lint

I had some weird linting errors and I don't have time to test if the changes
introduced bugs.

keeping this lint as a separate commit.  If there are bugs, you may need
to undo these changes

best,

will

Author: williamsyang-work

packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx

@@ -216,7 +216,7 @@ export class ReactAvailableViewsWidget extends React.Component<ReactAvailableVie
     }
 
     private entryToTreeNode(entry: OutputDescriptor, idStringToNodeId: { [key: string]: number }): TreeNode {
-        let id = idStringToNodeId[entry.id] ?? (idStringToNodeId[entry.id] = this._idGenerator++);
+        const id = idStringToNodeId[entry.id] ?? (idStringToNodeId[entry.id] = this._idGenerator++);
 
         let parentId = -1;
         if (entry.parentId) {
@@ -241,6 +241,7 @@ export class ReactAvailableViewsWidget extends React.Component<ReactAvailableVie
         const isCustomizable = entry.capabilities?.canCreate === true;
         const isDeletable = entry.capabilities?.canDelete === true;
 
+        // Return undefined if no relevant capabilities
         if (!isCustomizable && !isDeletable) {
             return undefined;
         }
@@ -253,30 +254,36 @@ export class ReactAvailableViewsWidget extends React.Component<ReactAvailableVie
             flexShrink: 1
         };
 
-        if (isCustomizable) {
-            return (): JSX.Element => (
-                <>
-                    <span style={nameSpanStyle}>{entry.name}</span>
-                    <div className="remove-output-button-container" title={`Add custom analysis to ${entry.name}`}>
-                        <button className="remove-output-button" onClick={e => this.handleCustomizeClick(entry, e)}>
-                            <FontAwesomeIcon icon={faPlus} />
-                        </button>
-                    </div>
-                </>
-            );
-        } else {
-            // Must be deletable based on our conditions
-            return (): JSX.Element => (
+        const useCustomizableUI = isCustomizable;
+
+        const EnrichedContent = (): JSX.Element => {
+            const displayName = useCustomizableUI
+                ? entry.name
+                : entry.configuration?.name;
+
+            const buttonTitle = useCustomizableUI
+                ? `Add custom analysis to ${displayName}`
+                : `Remove "${displayName}"`;
+
+            const icon = useCustomizableUI ? faPlus : faTimes;
+
+            const handleClick = useCustomizableUI ?
+                (e: React.MouseEvent) => this.handleCustomizeClick(entry, e) :
+                (e: React.MouseEvent) => this.handleDeleteClick(entry, e);
+
+            return (
                 <>
-                    <span style={nameSpanStyle}>{entry.configuration?.name}</span>
-                    <div className="remove-output-button-container" title={`Remove "${entry.configuration?.name}"`}>
-                        <button className="remove-output-button" onClick={e => this.handleDeleteClick(entry, e)}>
-                            <FontAwesomeIcon icon={faTimes} />
+                    <span style={nameSpanStyle}>{displayName}</span>
+                    <div className={'enriched-output-button-container'} title={buttonTitle}>
+                        <button className={'enriched-output-button'} onClick={handleClick}>
+                            <FontAwesomeIcon icon={icon} />
                         </button>
                     </div>
                 </>
             );
-        }
+        };
+
+        return EnrichedContent;
     }
 
     private handleCustomizeClick = async (entry: OutputDescriptor, e: React.MouseEvent) => {

packages/react-components/style/output-components-style.css

@@ -575,15 +575,15 @@ input[type="reset"].input-button {
     flex-shrink: 0;
 }
 
-.remove-output-button-container {
+.enriched-output-button-container {
     margin-right: 2px;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     margin-left: auto;
 }
 
-.remove-output-button {
+.enriched-output-button {
     background: none;
     border: none;
     visibility: visible;
@@ -592,6 +592,6 @@ input[type="reset"].input-button {
     cursor: pointer;
 }
 
-.remove-output-button :hover {
+.enriched-output-button :hover {
     background: none;
 }