Improve merge UX: clarify tooltip and separate status from action

Author: mguzmanm

package.json

@@ -649,7 +649,7 @@
       {
         "category": "CMSIS",
         "command": "cmsis-csolution.mergeFile",
-        "title": "Merge Updated Config File",
+        "title": "Open Merge View",
         "icon": "$(git-merge)"
       },
       {

src/views/solution-outline/tree-structure/solution-outline-file-item.test.ts

@@ -94,15 +94,13 @@ describe('FileItem', () => {
         expect(createdChildren.length).toBe(2);
 
         // check attributes and merge features for each file node
-        const fileLabels = ['RTX_Config.c', 'RTX_Config.h'];
-        const fileStatuses = ["- 'RTX_Config.c' is incompatible. A file update is mandatory.", "- 'RTX_Config.h' has corrections. A file update is suggested."];
+        const fileLabels = ['RTX_Config.c', 'RTX_Config.h'];       
         createdChildren.forEach((child, idx) => {
             expect(child.getTag()).toBe('file');
             expect(child.getAttribute('label')).toContain(fileLabels[idx]);
             expect(child.getAttribute('update')).toContain('update');
             expect(child.getAttribute('base')).toContain('base');
-            expect(child.getAttribute('description')).toBeUndefined();
-            expect(child.getAttribute('tooltip')).toContain(fileStatuses[idx]);
+            expect(child.getAttribute('description')).toBeUndefined();            
         });
 
     });

src/views/solution-outline/tree-structure/solution-outline-file-item.ts

@@ -18,7 +18,7 @@ import path from 'path';
 import { CTreeItem, ITreeItem } from '../../../generic/tree-item';
 import { FILE_TAGS } from '../../../solutions/constants';
 import { COutlineItem } from './solution-outline-item';
-import { getStatusTooltip, setContextMenuAttributes, setHeaderContext, setMergeFileContext } from './solution-outline-utils';
+import { setContextMenuAttributes, setHeaderContext, setMergeFileContext } from './solution-outline-utils';
 import { matchesContext } from '../../../utils/context-utils';
 import { SolutionOutlineItemBuilder } from './solution-outline-item-builder';
 import { CSolution } from '../../../solutions/csolution';
@@ -131,21 +131,6 @@ export class FileItemBuilder extends SolutionOutlineItemBuilder {
 
         // assign merge context
         setMergeFileContext(cfileItem);
-
-        // set tooltip
-        const existingTooltip = cfileItem.getValue('tooltip');
-        const label = cfileItem.getValue('label');
-
-        if (label) {
-            const statusTooltip = getStatusTooltip(label, fileStatus);
-
-            if (existingTooltip) {
-                cfileItem.setAttribute('tooltip', existingTooltip + '\n' + statusTooltip);
-            } else {
-                cfileItem.setAttribute('tooltip', statusTooltip);
-            }
-        }
-
         cfileItem.setAttribute('local', localPath);
         cfileItem.setAttribute('update', updatePath);
         cfileItem.setAttribute('base', basePath);

src/views/solution-outline/tree-structure/solution-outline-hardware-item.test.ts

@@ -106,9 +106,7 @@ describe('HardwareItemBuilder', () => {
         const base = device?.getAttribute('base');
         const gotBase = base ? path.basename(base) : '';
         const wantBase = 'Hello+CS300.dbgconf.base@0.0.1';
-        expect(gotBase).toEqual(wantBase);
-
-        expect(device?.getAttribute('tooltip')).toContain("- 'Hello+CS300.dbgconf' has corrections. A file update is suggested.");
+        expect(gotBase).toEqual(wantBase);        
     });
 
 });

src/views/solution-outline/tree-structure/solution-outline-project-items.ts

@@ -21,12 +21,12 @@ import { FileItemBuilder } from './solution-outline-file-item';
 import { COutlineItem } from './solution-outline-item';
 import * as manifest from '../../../manifest';
 import { CSolution } from '../../../solutions/csolution';
-import { getMapFilePath, getStatusTooltip, setDocContext, setHeaderContext, setLinkerContext } from './solution-outline-utils';
+import { getMapFilePath, setDocContext, setHeaderContext, setLinkerContext } from './solution-outline-utils';
 import { CProjectYamlFile } from '../../../solutions/files/cproject-yaml-file';
 import { SolutionOutlineItemBuilder } from './solution-outline-item-builder';
 
 export class ProjectItemsBuilder extends SolutionOutlineItemBuilder {
-    private _lastPrioritizedComponentList: COutlineItem[] = [];
+    private readonly _lastPrioritizedComponentList: COutlineItem[] = [];
 
     public get lastPrioritizedComponentList(): COutlineItem[] {
         return this._lastPrioritizedComponentList;
@@ -222,58 +222,9 @@ export class ProjectItemsBuilder extends SolutionOutlineItemBuilder {
         }
 
         this.addComponentOptions(componentNodes);
-
-        // add merge description
-        const components = Array.from(componentNodes.values());
-        const fileStatus = this.getMergeDescriptionAtParentComponentLevel(components);
-        if (fileStatus) {
-            // assign tooltip with component ids
-            const prioritizedList = this._lastPrioritizedComponentList;
-            let newTooltip = 'Components with updated configuration files:';
-            for (const comp of prioritizedList) {
-                const compId = comp.getAttribute('label');
-                const compStatus = comp.getAttribute('status');
-                if (compId && compStatus) {
-                    newTooltip += `\n- ${compId}: ${compStatus}`;
-                }
-            }
-            componentsItem.setAttribute('tooltip', newTooltip);
-        }
         return true; // do have components to edit
     }
 
-    private getMergeDescriptionAtParentComponentLevel(components: COutlineItem[]): string | undefined {
-        let result: string | undefined = undefined;
-        const updateRequired: COutlineItem[] = [];
-        const updateRecommended: COutlineItem[] = [];
-        const updateSuggested: COutlineItem[] = [];
-
-        for (const component of components) {
-            const status = component.getAttribute('status');
-            if (!status) {
-                continue;
-            }
-            if (status == 'update required') {
-                updateRequired.push(component);
-            } else if (status == 'update recommended') {
-                updateRecommended.push(component);
-            } else if (status == 'update suggested') {
-                updateSuggested.push(component);
-            }
-        }
-
-        const prioritizedList = [...updateRequired, ...updateRecommended, ...updateSuggested];
-        this._lastPrioritizedComponentList = prioritizedList;
-        const prioritizedFile = prioritizedList[0];
-
-        const fileStatus = prioritizedFile?.getAttribute('status');
-        if (fileStatus) {
-            result = fileStatus;
-        }
-
-        return result;
-    }
-
     private addComponentOptions(componentNodes: Map<string, COutlineItem>) {
         const components = componentNodes.values();
 
@@ -433,25 +384,6 @@ export class ProjectItemsBuilder extends SolutionOutlineItemBuilder {
 
         // set status at component level
         node.setAttribute('status', fileStatus);
-
-        // set tooltip
-        const prevTooltip = node.getValue('tooltip');
-        let newTooltip: string = '';
-        for (const file of prioritizedList) {
-            const fileLabel = file.getValue('file');
-            const fileStatus = file.getValue('status');
-            if (fileLabel && fileStatus) {
-                const tooltip = getStatusTooltip(fileLabel, fileStatus);
-                newTooltip += `\n ${tooltip}`;
-            }
-        }
-
-        if (prevTooltip) {
-            node.setAttribute('tooltip', prevTooltip + '\n' + newTooltip);
-        } else {
-            node.setAttribute('tooltip', newTooltip);
-        }
-
     }
 
     private getPrioritizedMergeFile(files: ITreeItem<CTreeItem>[]): ITreeItem<CTreeItem>[] {

src/views/solution-outline/tree-structure/solution-outline-tree.ts

@@ -121,23 +121,6 @@ export class SolutionOutlineTree extends SolutionOutlineItemBuilder {
         if (cproject) {
             const projectItems = new ProjectItemsBuilder(this.csolution, this.rpcData, context);
             projectItems.addProjectChildren(this.csolution, cprojectItem, cprojectFile, cbuild);
-
-            // get prioritized component list and set merge description if available
-            const prioritizedList = projectItems.lastPrioritizedComponentList;
-            if (prioritizedList && prioritizedList.length > 0) {
-                const fileStatus = prioritizedList[0].getAttribute('status');
-                if (fileStatus) {
-                    // set tooltip
-                    const existingTooltip = cprojectItem.getAttribute('tooltip');
-                    const newTooltip = `- Component config files: ${fileStatus}`;
-
-                    if (existingTooltip) {
-                        cprojectItem.setAttribute('tooltip', existingTooltip + '\n' + newTooltip);
-                    } else {
-                        cprojectItem.setAttribute('tooltip', newTooltip);
-                    }
-                }
-            }
         } else {
             cprojectItem.setAttribute('description', 'error loading project');
         }

src/views/solution-outline/tree-structure/solution-outline-utils.ts

@@ -52,19 +52,6 @@ export function setMergeFiles(component: COutlineItem, file: ITreeItem<CTreeItem
     component.setAttribute('base', basePath);
 }
 
-export function getStatusTooltip(label: string, status: string): string | undefined {
-    switch (status) {
-        case 'update suggested':
-            return `- '${label}' has corrections. A file update is suggested.`;
-        case 'update recommended':
-            return `- '${label}' has new features. A file update is recommended.`;
-        case 'update required':
-            return `- '${label}' is incompatible. A file update is mandatory.`;
-        default:
-            return undefined;
-    }
-}
-
 export function setLinkerContext(node: COutlineItem, mapFilePath: string): void {
     node.addFeature(`${manifest.LINKER_CONTEXT}`);
     node.setAttribute('type', 'linkerMapFile');

src/views/solution-outline/treeview-decoration-provider.ts

@@ -28,8 +28,8 @@ export class TreeViewFileDecorationProvider implements vscode.FileDecorationProv
     static readonly themeColor: string = 'descriptionForeground';
 
     static readonly mergeBadge: string = 'N';
-    static readonly mergeTooltip: string = 'Merge update available';
-    static readonly mergeColor: string = 'charts.green';
+    static readonly mergeTooltip: string = 'New Version Available for Merge';
+    static readonly mergeColor: string = 'charts.blue';
 
     static readonly excludedBadge: string = 'X';
     static readonly excludedTooltip: string = 'Excluded from build';