Merge pull request #2717 from github/nora/hide-modeled-on-model-details-view

Respect the "Hide modeled APIs" checkbox in the model details view

Author: norascheuch

extensions/ql-vscode/src/common/interface-types.ts

@@ -567,6 +567,11 @@ interface ModelDependencyMessage {
   t: "modelDependency";
 }
 
+interface HideModeledApisMessage {
+  t: "hideModeledApis";
+  hideModeledApis: boolean;
+}
+
 export type ToDataExtensionsEditorMessage =
   | SetExtensionPackStateMessage
   | SetExternalApiUsagesMessage
@@ -585,4 +590,5 @@ export type FromDataExtensionsEditorMessage =
   | GenerateExternalApiMessage
   | GenerateExternalApiFromLlmMessage
   | StopGeneratingExternalApiFromLlmMessage
-  | ModelDependencyMessage;
+  | ModelDependencyMessage
+  | HideModeledApisMessage;

extensions/ql-vscode/src/data-extensions-editor/data-extensions-editor-view.ts

@@ -43,6 +43,7 @@ import { join } from "path";
 import { pickExtensionPack } from "./extension-pack-picker";
 import { getLanguageDisplayName } from "../common/query-language";
 import { AutoModeler } from "./auto-modeler";
+import { INITIAL_HIDE_MODELED_APIS_VALUE } from "./shared/hide-modeled-apis";
 
 export class DataExtensionsEditorView extends AbstractWebview<
   ToDataExtensionsEditorMessage,
@@ -51,6 +52,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
   private readonly autoModeler: AutoModeler;
 
   private externalApiUsages: ExternalApiUsage[];
+  private hideModeledApis: boolean;
 
   public constructor(
     ctx: ExtensionContext,
@@ -66,6 +68,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
     private readonly updateModelDetailsPanelState: (
       externalApiUsages: ExternalApiUsage[],
       databaseItem: DatabaseItem,
+      hideModeledApis: boolean,
     ) => Promise<void>,
     private readonly revealItemInDetailsPanel: (usage: Usage) => Promise<void>,
     private readonly handleViewBecameActive: (
@@ -98,6 +101,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
       },
     );
     this.externalApiUsages = [];
+    this.hideModeledApis = INITIAL_HIDE_MODELED_APIS_VALUE;
   }
 
   public async openView() {
@@ -110,6 +114,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
         await this.updateModelDetailsPanelState(
           this.externalApiUsages,
           this.databaseItem,
+          this.hideModeledApis,
         );
       }
     });
@@ -235,6 +240,14 @@ export class DataExtensionsEditorView extends AbstractWebview<
 
         await Promise.all([this.setViewState(), this.loadExternalApiUsages()]);
 
+        break;
+      case "hideModeledApis":
+        this.hideModeledApis = msg.hideModeledApis;
+        await this.updateModelDetailsPanelState(
+          this.externalApiUsages,
+          this.databaseItem,
+          this.hideModeledApis,
+        );
         break;
       default:
         assertNever(msg);
@@ -340,6 +353,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
             await this.updateModelDetailsPanelState(
               this.externalApiUsages,
               this.databaseItem,
+              this.hideModeledApis,
             );
           }
         } catch (err) {

extensions/ql-vscode/src/data-extensions-editor/model-details/model-details-data-provider.ts

@@ -13,6 +13,7 @@ import { ExternalApiUsage, Usage } from "../external-api-usage";
 import { DatabaseItem } from "../../databases/local-databases";
 import { relative } from "path";
 import { CodeQLCliServer } from "../../codeql-cli/cli";
+import { INITIAL_HIDE_MODELED_APIS_VALUE } from "../shared/hide-modeled-apis";
 
 export class ModelDetailsDataProvider
   extends DisposableObject
@@ -21,6 +22,7 @@ export class ModelDetailsDataProvider
   private externalApiUsages: ExternalApiUsage[] = [];
   private databaseItem: DatabaseItem | undefined = undefined;
   private sourceLocationPrefix: string | undefined = undefined;
+  private hideModeledApis: boolean = INITIAL_HIDE_MODELED_APIS_VALUE;
 
   private readonly onDidChangeTreeDataEmitter = this.push(
     new EventEmitter<void>(),
@@ -44,15 +46,19 @@ export class ModelDetailsDataProvider
   public async setState(
     externalApiUsages: ExternalApiUsage[],
     databaseItem: DatabaseItem,
+    hideModeledApis: boolean,
   ): Promise<void> {
     if (
       this.externalApiUsages !== externalApiUsages ||
-      this.databaseItem !== databaseItem
+      this.databaseItem !== databaseItem ||
+      this.hideModeledApis !== hideModeledApis
     ) {
       this.externalApiUsages = externalApiUsages;
       this.databaseItem = databaseItem;
       this.sourceLocationPrefix =
         await this.databaseItem.getSourceLocationPrefix(this.cliServer);
+      this.hideModeledApis = hideModeledApis;
+
       this.onDidChangeTreeDataEmitter.fire();
     }
   }
@@ -92,7 +98,11 @@ export class ModelDetailsDataProvider
 
   getChildren(item?: ModelDetailsTreeViewItem): ModelDetailsTreeViewItem[] {
     if (item === undefined) {
-      return this.externalApiUsages;
+      if (this.hideModeledApis) {
+        return this.externalApiUsages.filter((api) => !api.supported);
+      } else {
+        return this.externalApiUsages;
+      }
     } else if (isExternalApiUsage(item)) {
       return item.usages;
     } else {

extensions/ql-vscode/src/data-extensions-editor/model-details/model-details-panel.ts

@@ -26,10 +26,18 @@ export class ModelDetailsPanel extends DisposableObject {
   public async setState(
     externalApiUsages: ExternalApiUsage[],
     databaseItem: DatabaseItem,
+    hideModeledApis: boolean,
   ): Promise<void> {
-    await this.dataProvider.setState(externalApiUsages, databaseItem);
+    await this.dataProvider.setState(
+      externalApiUsages,
+      databaseItem,
+      hideModeledApis,
+    );
+    const numOfApis = hideModeledApis
+      ? externalApiUsages.filter((api) => !api.supported).length
+      : externalApiUsages.length;
     this.treeView.badge = {
-      value: externalApiUsages.length,
+      value: numOfApis,
       tooltip: "Number of external APIs",
     };
   }

extensions/ql-vscode/src/data-extensions-editor/shared/hide-modeled-apis.ts

@@ -0,0 +1 @@
+export const INITIAL_HIDE_MODELED_APIS_VALUE = true;

extensions/ql-vscode/src/view/data-extensions-editor/DataExtensionsEditor.tsx

@@ -19,6 +19,7 @@ import { percentFormatter } from "./formatters";
 import { Mode } from "../../data-extensions-editor/shared/mode";
 import { InProgressMethods } from "../../data-extensions-editor/shared/in-progress-methods";
 import { getLanguageDisplayName } from "../../common/query-language";
+import { INITIAL_HIDE_MODELED_APIS_VALUE } from "../../data-extensions-editor/shared/hide-modeled-apis";
 
 const LoadingContainer = styled.div`
   text-align: center;
@@ -74,12 +75,14 @@ type Props = {
   initialViewState?: DataExtensionEditorViewState;
   initialExternalApiUsages?: ExternalApiUsage[];
   initialModeledMethods?: Record<string, ModeledMethod>;
+  initialHideModeledApis?: boolean;
 };
 
 export function DataExtensionsEditor({
   initialViewState,
   initialExternalApiUsages = [],
   initialModeledMethods = {},
+  initialHideModeledApis = INITIAL_HIDE_MODELED_APIS_VALUE,
 }: Props): JSX.Element {
   const [viewState, setViewState] = useState<
     DataExtensionEditorViewState | undefined
@@ -96,7 +99,16 @@ export function DataExtensionsEditor({
     new InProgressMethods(),
   );
 
-  const [hideModeledApis, setHideModeledApis] = useState(true);
+  const [hideModeledApis, setHideModeledApis] = useState(
+    initialHideModeledApis,
+  );
+
+  useEffect(() => {
+    vscode.postMessage({
+      t: "hideModeledApis",
+      hideModeledApis,
+    });
+  }, [hideModeledApis]);
 
   const [modeledMethods, setModeledMethods] = useState<
     Record<string, ModeledMethod>

extensions/ql-vscode/test/vscode-tests/no-workspace/data-extensions-editor/model-details/model-details-data-provider.test.ts

@@ -8,57 +8,83 @@ describe("ModelDetailsDataProvider", () => {
   const mockCliServer = mockedObject<CodeQLCliServer>({});
 
   describe("setState", () => {
-    it("should not emit onDidChangeTreeData event when state has not changed", async () => {
-      const externalApiUsages: ExternalApiUsage[] = [];
-      const dbItem = mockedObject<DatabaseItem>({
-        getSourceLocationPrefix: () => "test",
-      });
+    const hideModeledApis: boolean = false;
+    const externalApiUsages: ExternalApiUsage[] = [];
+    const dbItem = mockedObject<DatabaseItem>({
+      getSourceLocationPrefix: () => "test",
+    });
 
+    it("should not emit onDidChangeTreeData event when state has not changed", async () => {
       const dataProvider = new ModelDetailsDataProvider(mockCliServer);
-      await dataProvider.setState(externalApiUsages, dbItem);
+      await dataProvider.setState(externalApiUsages, dbItem, hideModeledApis);
 
       const onDidChangeTreeDataListener = jest.fn();
       dataProvider.onDidChangeTreeData(onDidChangeTreeDataListener);
 
-      await dataProvider.setState(externalApiUsages, dbItem);
+      await dataProvider.setState(externalApiUsages, dbItem, hideModeledApis);
 
       expect(onDidChangeTreeDataListener).not.toHaveBeenCalled();
     });
 
     it("should emit onDidChangeTreeData event when externalApiUsages has changed", async () => {
-      const externalApiUsages1: ExternalApiUsage[] = [];
       const externalApiUsages2: ExternalApiUsage[] = [];
-      const dbItem = mockedObject<DatabaseItem>({
-        getSourceLocationPrefix: () => "test",
-      });
 
       const dataProvider = new ModelDetailsDataProvider(mockCliServer);
-      await dataProvider.setState(externalApiUsages1, dbItem);
+      await dataProvider.setState(externalApiUsages, dbItem, hideModeledApis);
 
       const onDidChangeTreeDataListener = jest.fn();
       dataProvider.onDidChangeTreeData(onDidChangeTreeDataListener);
 
-      await dataProvider.setState(externalApiUsages2, dbItem);
+      await dataProvider.setState(externalApiUsages2, dbItem, hideModeledApis);
 
       expect(onDidChangeTreeDataListener).toHaveBeenCalledTimes(1);
     });
 
     it("should emit onDidChangeTreeData event when dbItem has changed", async () => {
-      const externalApiUsages: ExternalApiUsage[] = [];
-      const dbItem1 = mockedObject<DatabaseItem>({
+      const dbItem2 = mockedObject<DatabaseItem>({
         getSourceLocationPrefix: () => "test",
       });
+
+      const dataProvider = new ModelDetailsDataProvider(mockCliServer);
+      await dataProvider.setState(externalApiUsages, dbItem, hideModeledApis);
+
+      const onDidChangeTreeDataListener = jest.fn();
+      dataProvider.onDidChangeTreeData(onDidChangeTreeDataListener);
+
+      await dataProvider.setState(externalApiUsages, dbItem2, hideModeledApis);
+
+      expect(onDidChangeTreeDataListener).toHaveBeenCalledTimes(1);
+    });
+
+    it("should emit onDidChangeTreeData event when hideModeledApis has changed", async () => {
+      const dataProvider = new ModelDetailsDataProvider(mockCliServer);
+      await dataProvider.setState(externalApiUsages, dbItem, hideModeledApis);
+
+      const onDidChangeTreeDataListener = jest.fn();
+      dataProvider.onDidChangeTreeData(onDidChangeTreeDataListener);
+
+      await dataProvider.setState(externalApiUsages, dbItem, !hideModeledApis);
+
+      expect(onDidChangeTreeDataListener).toHaveBeenCalledTimes(1);
+    });
+
+    it("should emit onDidChangeTreeData event when all entries have changed", async () => {
       const dbItem2 = mockedObject<DatabaseItem>({
         getSourceLocationPrefix: () => "test",
       });
+      const externalApiUsages2: ExternalApiUsage[] = [];
 
       const dataProvider = new ModelDetailsDataProvider(mockCliServer);
-      await dataProvider.setState(externalApiUsages, dbItem1);
+      await dataProvider.setState(externalApiUsages, dbItem, hideModeledApis);
 
       const onDidChangeTreeDataListener = jest.fn();
       dataProvider.onDidChangeTreeData(onDidChangeTreeDataListener);
 
-      await dataProvider.setState(externalApiUsages, dbItem2);
+      await dataProvider.setState(
+        externalApiUsages2,
+        dbItem2,
+        !hideModeledApis,
+      );
 
       expect(onDidChangeTreeDataListener).toHaveBeenCalledTimes(1);
     });