Merge pull request #2004 from github/nora/update-query-history-icons

Query history polish: new icons

extensions/ql-vscode/media/drive.svg

@@ -1,7 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 12.1952C15.5 12.9126 14.9137 13.4996 14.1957 13.4996H1.80435C1.08696 13.4996 0.5 12.9126 0.5 12.1952L0.5 9.80435C0.5 9.08696 1.08696 8.5 1.80435 8.5H14.1956C14.9137 8.5 15.5 9.08696 15.5 9.80435L15.5 12.1952Z" stroke="#959DA5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.45654 11.5H13.5435" stroke="#959DA5" stroke-linecap="round" stroke-linejoin="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 9.5C13.224 9.5 13 9.725 13 10C13 10.275 13.224 10.5 13.5 10.5C13.776 10.5 14 10.275 14 10C14 9.725 13.776 9.5 13.5 9.5" fill="#959DA5"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 9.5C11.224 9.5 11 9.725 11 10C11 10.275 11.224 10.5 11.5 10.5C11.776 10.5 12 10.275 12 10C12 9.725 11.776 9.5 11.5 9.5" fill="#959DA5"/>
-<path d="M15.5 9.81464L13.8728 2.76261C13.6922 2.06804 12.9572 1.5 12.2391 1.5H3.76087C3.04348 1.5 2.30848 2.06804 2.12783 2.76261L0.5 9.8" stroke="#959DA5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

extensions/ql-vscode/media/globe.svg

@@ -1,16 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="7.5" cy="7.5" r="7" stroke="#959DA5"/>
-<mask id="mask0_394_2982" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="15" height="15">
-<circle cx="7.5" cy="7.5" r="7.5" fill="#C4C4C4"/>
-</mask>
-<g mask="url(#mask0_394_2982)">
-<path d="M14.5 7.5C14.5 9.42971 13.6822 11.1907 12.5493 12.4721C11.4035 13.7683 10.0054 14.5 8.90625 14.5C7.84644 14.5 6.81131 13.8113 6.01569 12.5383C5.22447 11.2724 4.71875 9.49235 4.71875 7.5C4.71875 5.50765 5.22447 3.72765 6.01569 2.4617C6.81131 1.1887 7.84644 0.5 8.90625 0.5C10.0054 0.5 11.4035 1.23172 12.5493 2.52786C13.6822 3.80934 14.5 5.57029 14.5 7.5Z" stroke="#959DA5"/>
-</g>
-<mask id="mask1_394_2982" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="0" width="16" height="15">
-<circle cx="9.375" cy="7.5" r="7.5" fill="#C4C4C4"/>
-</mask>
-<g mask="url(#mask1_394_2982)">
-<path d="M10.2812 7.5C10.2812 9.49235 9.77553 11.2724 8.98431 12.5383C8.18869 13.8113 7.15356 14.5 6.09375 14.5C4.99456 14.5 3.5965 13.7683 2.45067 12.4721C1.31781 11.1907 0.5 9.42971 0.5 7.5C0.5 5.57029 1.31781 3.80934 2.45067 2.52786C3.5965 1.23172 4.99456 0.5 6.09375 0.5C7.15356 0.5 8.18869 1.1887 8.98431 2.4617C9.77553 3.72765 10.2812 5.50765 10.2812 7.5Z" stroke="#959DA5"/>
-</g>
-<line y1="7.5" x2="15" y2="7.5" stroke="#959DA5"/>
-</svg>

extensions/ql-vscode/src/query-history/query-history.ts

@@ -8,6 +8,7 @@ import {
   ExtensionContext,
   ProviderResult,
   Range,
+  ThemeColor,
   ThemeIcon,
   TreeDataProvider,
   TreeItem,
@@ -101,21 +102,6 @@ const SHOW_QUERY_TEXT_QUICK_EVAL_MSG = `\
 
 `;
 
-/**
- * Path to icon to display next to a failed query history item.
- */
-const FAILED_QUERY_HISTORY_ITEM_ICON = "media/red-x.svg";
-
-/**
- * Path to icon to display next to a successful local run.
- */
-const LOCAL_SUCCESS_QUERY_HISTORY_ITEM_ICON = "media/drive.svg";
-
-/**
- * Path to icon to display next to a successful remote run.
- */
-const REMOTE_SUCCESS_QUERY_HISTORY_ITEM_ICON = "media/globe.svg";
-
 export enum SortOrder {
   NameAsc = "NameAsc",
   NameDesc = "NameDesc",
@@ -158,28 +144,10 @@ export class HistoryTreeDataProvider
 
   private history: QueryHistoryInfo[] = [];
 
-  private failedIconPath: string;
-
-  private localSuccessIconPath: string;
-
-  private remoteSuccessIconPath: string;
-
   private current: QueryHistoryInfo | undefined;
 
-  constructor(
+  constructor(private readonly labelProvider: HistoryItemLabelProvider) {
-    extensionPath: string,
-    private readonly labelProvider: HistoryItemLabelProvider,
-  ) {
     super();
-    this.failedIconPath = join(extensionPath, FAILED_QUERY_HISTORY_ITEM_ICON);
-    this.localSuccessIconPath = join(
-      extensionPath,
-      LOCAL_SUCCESS_QUERY_HISTORY_ITEM_ICON,
-    );
-    this.remoteSuccessIconPath = join(
-      extensionPath,
-      REMOTE_SUCCESS_QUERY_HISTORY_ITEM_ICON,
-    );
   }
 
   async getTreeItem(element: QueryHistoryInfo): Promise<TreeItem> {
@@ -206,12 +174,12 @@ export class HistoryTreeDataProvider
         return new ThemeIcon("sync~spin");
       case QueryStatus.Completed:
         if (element.t === "local") {
-          return this.localSuccessIconPath;
+          return new ThemeIcon("database");
         } else {
-          return this.remoteSuccessIconPath;
+          return new ThemeIcon("cloud");
         }
       case QueryStatus.Failed:
-        return this.failedIconPath;
+        return new ThemeIcon("error", new ThemeColor("errorForeground"));
       default:
         assertNever(element.status);
     }
@@ -421,7 +389,7 @@ export class QueryHistoryManager extends DisposableObject {
     );
 
     this.treeDataProvider = this.push(
-      new HistoryTreeDataProvider(ctx.extensionPath, this.labelProvider),
+      new HistoryTreeDataProvider(this.labelProvider),
     );
     this.treeView = this.push(
       window.createTreeView("codeQLQueryHistory", {

extensions/ql-vscode/test/vscode-tests/no-workspace/query-history/query-history.test.ts

@@ -1652,10 +1652,7 @@ describe("query-history", () => {
       labelProvider = new HistoryItemLabelProvider({
         /**/
       } as QueryHistoryConfig);
-      historyTreeDataProvider = new HistoryTreeDataProvider(
+      historyTreeDataProvider = new HistoryTreeDataProvider(labelProvider);
-        vscode.Uri.file(mockExtensionLocation).fsPath,
-        labelProvider,
-      );
     });
 
     afterEach(() => {
@@ -1683,9 +1680,7 @@ describe("query-history", () => {
         });
         expect(treeItem.label).toContain("query-file.ql");
         expect(treeItem.contextValue).toBe("rawResultsItem");
-        expect(treeItem.iconPath).toEqual(
+        expect(treeItem.iconPath).toEqual(new vscode.ThemeIcon("database"));
-          vscode.Uri.file(`${mockExtensionLocation}/media/drive.svg`).fsPath,
-        );
       });
 
       it("should get a tree item with interpreted results", async () => {
@@ -1701,9 +1696,7 @@ describe("query-history", () => {
           mockQueryWithInterpretedResults,
         );
         expect(treeItem.contextValue).toBe("interpretedResultsItem");
-        expect(treeItem.iconPath).toEqual(
+        expect(treeItem.iconPath).toEqual(new vscode.ThemeIcon("database"));
-          vscode.Uri.file(`${mockExtensionLocation}/media/drive.svg`).fsPath,
-        );
       });
 
       it("should get a tree item that did not complete successfully", async () => {
@@ -1716,8 +1709,11 @@ describe("query-history", () => {
         });
 
         const treeItem = await historyTreeDataProvider.getTreeItem(mockQuery);
-        expect(treeItem.iconPath).toBe(
+        expect(treeItem.iconPath).toEqual(
-          vscode.Uri.file(`${mockExtensionLocation}/media/red-x.svg`).fsPath,
+          new vscode.ThemeIcon(
+            "error",
+            new vscode.ThemeColor("errorForeground"),
+          ),
         );
       });
 
@@ -1728,8 +1724,11 @@ describe("query-history", () => {
         });
 
         const treeItem = await historyTreeDataProvider.getTreeItem(mockQuery);
-        expect(treeItem.iconPath).toBe(
+        expect(treeItem.iconPath).toEqual(
-          vscode.Uri.file(`${mockExtensionLocation}/media/red-x.svg`).fsPath,
+          new vscode.ThemeIcon(
+            "error",
+            new vscode.ThemeColor("errorForeground"),
+          ),
         );
       });