Show extension pack name in data extensions editor

This will add the extension pack name to the data extensions editor and
allow the user to click on it to go to the folder of the extension pack
in the explorer panel.

Author: koesie10

extensions/ql-vscode/src/common/commands.ts

@@ -87,6 +87,7 @@ export type BuiltInVsCodeCommands = {
   ) => Promise<void>;
   "vscode.open": (uri: Uri) => Promise<void>;
   "vscode.openFolder": (uri: Uri) => Promise<void>;
+  revealInExplorer: (uri: Uri) => Promise<void>;
 };
 
 // Commands that are available before the extension is fully activated.

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

@@ -1,6 +1,7 @@
 import {
   CancellationTokenSource,
   ExtensionContext,
+  Uri,
   ViewColumn,
   window,
   workspace,
@@ -34,6 +35,7 @@ import { readQueryResults, runQuery } from "./external-api-usage-query";
 import { createDataExtensionYaml, loadDataExtensionYaml } from "./yaml";
 import { ExternalApiUsage } from "./external-api-usage";
 import { ModeledMethod } from "./modeled-method";
+import { ExtensionPackModelFile } from "./extension-pack-picker";
 
 function getQlSubmoduleFolder(): WorkspaceFolder | undefined {
   const workspaceFolder = workspace.workspaceFolders?.find(
@@ -60,7 +62,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
     private readonly queryRunner: QueryRunner,
     private readonly queryStorageDir: string,
     private readonly databaseItem: DatabaseItem,
-    private readonly modelFilename: string,
+    private readonly modelFile: ExtensionPackModelFile,
   ) {
     super(ctx);
   }
@@ -93,10 +95,17 @@ export class DataExtensionsEditorView extends AbstractWebview<
       case "viewLoaded":
         await this.onWebViewLoaded();
 
+        break;
+      case "openExtensionPack":
+        await this.app.commands.execute(
+          "revealInExplorer",
+          Uri.file(this.modelFile.extensionPack.path),
+        );
+
         break;
       case "openModelFile":
         await window.showTextDocument(
-          await workspace.openTextDocument(this.modelFilename),
+          await workspace.openTextDocument(this.modelFile.filename),
         );
 
         break;
@@ -127,7 +136,8 @@ export class DataExtensionsEditorView extends AbstractWebview<
     await Promise.all([
       this.postMessage({
         t: "setDataExtensionEditorInitialData",
-        modelFilename: this.modelFilename,
+        extensionPackName: this.modelFile.extensionPack.name,
+        modelFilename: this.modelFile.filename,
       }),
       this.loadExternalApiUsages(),
       this.loadExistingModeledMethods(),
@@ -164,24 +174,26 @@ export class DataExtensionsEditorView extends AbstractWebview<
       modeledMethods,
     );
 
-    await outputFile(this.modelFilename, yaml);
+    await outputFile(this.modelFile.filename, yaml);
 
-    void extLogger.log(`Saved data extension YAML to ${this.modelFilename}`);
+    void extLogger.log(
+      `Saved data extension YAML to ${this.modelFile.filename}`,
+    );
   }
 
   protected async loadExistingModeledMethods(): Promise<void> {
     try {
-      const yaml = await readFile(this.modelFilename, "utf8");
+      const yaml = await readFile(this.modelFile.filename, "utf8");
 
       const data = loadYaml(yaml, {
-        filename: this.modelFilename,
+        filename: this.modelFile.filename,
       });
 
       const existingModeledMethods = loadDataExtensionYaml(data);
 
       if (!existingModeledMethods) {
         void showAndLogErrorMessage(
-          `Failed to parse data extension YAML ${this.modelFilename}.`,
+          `Failed to parse data extension YAML ${this.modelFile.filename}.`,
         );
         return;
       }
@@ -193,7 +205,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
     } catch (e: unknown) {
       void showAndLogErrorMessage(
         `Unable to read data extension YAML ${
-          this.modelFilename
+          this.modelFile.filename
         }: ${getErrorMessage(e)}`,
       );
     }

extensions/ql-vscode/src/data-extensions-editor/extension-pack-picker.ts

@@ -21,42 +21,55 @@ const packNameRegex = new RegExp(
 );
 const packNameLength = 128;
 
+export interface ExtensionPack {
+  name: string;
+  path: string;
+}
+
+export interface ExtensionPackModelFile {
+  filename: string;
+  extensionPack: ExtensionPack;
+}
+
 export async function pickExtensionPackModelFile(
   cliServer: Pick<CodeQLCliServer, "resolveQlpacks" | "resolveExtensions">,
   databaseItem: Pick<DatabaseItem, "name" | "language">,
   progress: ProgressCallback,
   token: CancellationToken,
-): Promise<string | undefined> {
-  const extensionPackPath = await pickExtensionPack(
+): Promise<ExtensionPackModelFile | undefined> {
+  const extensionPack = await pickExtensionPack(
     cliServer,
     databaseItem,
     progress,
     token,
   );
-  if (!extensionPackPath) {
-    return;
+  if (!extensionPack) {
+    return undefined;
   }
 
   const modelFile = await pickModelFile(
     cliServer,
     databaseItem,
-    extensionPackPath,
+    extensionPack.path,
     progress,
     token,
   );
   if (!modelFile) {
     return;
   }
 
-  return modelFile;
+  return {
+    filename: modelFile,
+    extensionPack,
+  };
 }
 
 async function pickExtensionPack(
   cliServer: Pick<CodeQLCliServer, "resolveQlpacks">,
   databaseItem: Pick<DatabaseItem, "name" | "language">,
   progress: ProgressCallback,
   token: CancellationToken,
-): Promise<string | undefined> {
+): Promise<ExtensionPack | undefined> {
   progress({
     message: "Resolving extension packs...",
     step: 1,
@@ -117,7 +130,10 @@ async function pickExtensionPack(
     return undefined;
   }
 
-  return extensionPackPaths[0];
+  return {
+    name: extensionPackOption.extensionPack,
+    path: extensionPackPaths[0],
+  };
 }
 
 async function pickModelFile(
@@ -186,7 +202,7 @@ async function pickModelFile(
 async function pickNewExtensionPack(
   databaseItem: Pick<DatabaseItem, "name" | "language">,
   token: CancellationToken,
-): Promise<string | undefined> {
+): Promise<ExtensionPack | undefined> {
   const workspaceFolders = getOnDiskWorkspaceFoldersObjects();
   const workspaceFolderOptions = workspaceFolders.map((folder) => ({
     label: folder.name,
@@ -263,7 +279,10 @@ async function pickNewExtensionPack(
     }),
   );
 
-  return packPath;
+  return {
+    name: packName,
+    path: packPath,
+  };
 }
 
 async function pickNewModelFile(

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

@@ -483,6 +483,7 @@ export type FromDataFlowPathsMessage = CommonFromViewMessages;
 
 export interface SetDataExtensionEditorInitialDataMessage {
   t: "setDataExtensionEditorInitialData";
+  extensionPackName: string;
   modelFilename: string;
 }
 
@@ -516,6 +517,10 @@ export interface JumpToUsageMessage {
   location: ResolvableLocationValue;
 }
 
+export interface OpenExtensionPackMessage {
+  t: "openExtensionPack";
+}
+
 export interface OpenModelFileMessage {
   t: "openModelFile";
 }
@@ -539,6 +544,7 @@ export type ToDataExtensionsEditorMessage =
 export type FromDataExtensionsEditorMessage =
   | ViewLoadedMsg
   | OpenModelFileMessage
+  | OpenExtensionPackMessage
   | JumpToUsageMessage
   | SaveModeledMethods
   | GenerateExternalApiMessage;

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

@@ -15,6 +15,7 @@ const Template: ComponentStory<typeof DataExtensionsEditorComponent> = (
 
 export const DataExtensionsEditor = Template.bind({});
 DataExtensionsEditor.args = {
+  initialExtensionPackName: "codeql/sql2o-models",
   initialModelFilename:
     "/home/user/vscode-codeql-starter/codeql-custom-queries-java/sql2o/models/sql2o.yml",
   initialExternalApiUsages: [

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

@@ -47,16 +47,21 @@ const ProgressBar = styled.div<ProgressBarProps>`
 `;
 
 type Props = {
+  initialExtensionPackName?: string;
   initialModelFilename?: string;
   initialExternalApiUsages?: ExternalApiUsage[];
   initialModeledMethods?: Record<string, ModeledMethod>;
 };
 
 export function DataExtensionsEditor({
+  initialExtensionPackName,
   initialModelFilename,
   initialExternalApiUsages = [],
   initialModeledMethods = {},
 }: Props): JSX.Element {
+  const [extensionPackName, setExtensionPackName] = useState<
+    string | undefined
+  >(initialExtensionPackName);
   const [modelFilename, setModelFilename] = useState<string | undefined>(
     initialModelFilename,
   );
@@ -79,6 +84,7 @@ export function DataExtensionsEditor({
         const msg: ToDataExtensionsEditorMessage = evt.data;
         switch (msg.t) {
           case "setDataExtensionEditorInitialData":
+            setExtensionPackName(msg.extensionPackName);
             setModelFilename(msg.modelFilename);
             break;
           case "setExternalApiUsages":
@@ -150,6 +156,12 @@ export function DataExtensionsEditor({
     });
   }, []);
 
+  const onOpenExtensionPackClick = useCallback(() => {
+    vscode.postMessage({
+      t: "openExtensionPack",
+    });
+  }, []);
+
   const onOpenModelFileClick = useCallback(() => {
     vscode.postMessage({
       t: "openModelFile",
@@ -169,6 +181,12 @@ export function DataExtensionsEditor({
         <>
           <ViewTitle>Data extensions editor</ViewTitle>
           <DetailsContainer>
+            {extensionPackName && (
+              <LinkIconButton onClick={onOpenExtensionPackClick}>
+                <span slot="start" className="codicon codicon-package"></span>
+                {extensionPackName}
+              </LinkIconButton>
+            )}
             {modelFilename && (
               <LinkIconButton onClick={onOpenModelFileClick}>
                 <span slot="start" className="codicon codicon-file-code"></span>