Show model filename in data extensions editor

This adds the model filename to the data extensions editor and will also
allow the user to go to the model file by clicking on the filename.

This also updates the general UI to be somewhat more compact by moving
the modeled percentages to be below the header in 1 line.

Author: koesie10

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

@@ -93,6 +93,12 @@ export class DataExtensionsEditorView extends AbstractWebview<
       case "viewLoaded":
         await this.onWebViewLoaded();
 
+        break;
+      case "openModelFile":
+        await window.showTextDocument(
+          await workspace.openTextDocument(this.modelFilename),
+        );
+
         break;
       case "jumpToUsage":
         await this.jumpToUsage(msg.location);
@@ -119,6 +125,10 @@ export class DataExtensionsEditorView extends AbstractWebview<
     super.onWebViewLoaded();
 
     await Promise.all([
+      this.postMessage({
+        t: "setDataExtensionEditorInitialData",
+        modelFilename: this.modelFilename,
+      }),
       this.loadExternalApiUsages(),
       this.loadExistingModeledMethods(),
     ]);

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

@@ -481,6 +481,11 @@ export type ToDataFlowPathsMessage = SetDataFlowPathsMessage;
 
 export type FromDataFlowPathsMessage = CommonFromViewMessages;
 
+export interface SetDataExtensionEditorInitialDataMessage {
+  t: "setDataExtensionEditorInitialData";
+  modelFilename: string;
+}
+
 export interface SetExternalApiUsagesMessage {
   t: "setExternalApiUsages";
   externalApiUsages: ExternalApiUsage[];
@@ -511,9 +516,8 @@ export interface JumpToUsageMessage {
   location: ResolvableLocationValue;
 }
 
-export interface SetExistingModeledMethods {
-  t: "setExistingModeledMethods";
-  existingModeledMethods: Record<string, ModeledMethod>;
+export interface OpenModelFileMessage {
+  t: "openModelFile";
 }
 
 export interface SaveModeledMethods {
@@ -527,12 +531,14 @@ export interface GenerateExternalApiMessage {
 }
 
 export type ToDataExtensionsEditorMessage =
+  | SetDataExtensionEditorInitialDataMessage
   | SetExternalApiUsagesMessage
   | ShowProgressMessage
   | AddModeledMethodsMessage;
 
 export type FromDataExtensionsEditorMessage =
   | ViewLoadedMsg
+  | OpenModelFileMessage
   | JumpToUsageMessage
   | SaveModeledMethods
   | GenerateExternalApiMessage;

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

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

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

@@ -17,8 +17,21 @@ import { MethodRow } from "./MethodRow";
 import { assertNever } from "../../pure/helpers-pure";
 import { vscode } from "../vscode-api";
 import { calculateModeledPercentage } from "./modeled";
+import { LinkIconButton } from "../variant-analysis/LinkIconButton";
+import { basename } from "../common/path";
+import { ViewTitle } from "../common";
 
-export const DataExtensionsEditorContainer = styled.div`
+const DataExtensionsEditorContainer = styled.div`
+  margin-top: 1rem;
+`;
+
+const DetailsContainer = styled.div`
+  display: flex;
+  gap: 1em;
+  align-items: center;
+`;
+
+const EditorContainer = styled.div`
   margin-top: 1rem;
 `;
 
@@ -34,14 +47,20 @@ const ProgressBar = styled.div<ProgressBarProps>`
 `;
 
 type Props = {
+  initialModelFilename?: string;
   initialExternalApiUsages?: ExternalApiUsage[];
   initialModeledMethods?: Record<string, ModeledMethod>;
 };
 
 export function DataExtensionsEditor({
+  initialModelFilename,
   initialExternalApiUsages = [],
   initialModeledMethods = {},
 }: Props): JSX.Element {
+  const [modelFilename, setModelFilename] = useState<string | undefined>(
+    initialModelFilename,
+  );
+
   const [externalApiUsages, setExternalApiUsages] = useState<
     ExternalApiUsage[]
   >(initialExternalApiUsages);
@@ -59,6 +78,9 @@ export function DataExtensionsEditor({
       if (evt.origin === window.origin) {
         const msg: ToDataExtensionsEditorMessage = evt.data;
         switch (msg.t) {
+          case "setDataExtensionEditorInitialData":
+            setModelFilename(msg.modelFilename);
+            break;
           case "setExternalApiUsages":
             setExternalApiUsages(msg.externalApiUsages);
             break;
@@ -128,6 +150,12 @@ export function DataExtensionsEditor({
     });
   }, []);
 
+  const onOpenModelFileClick = useCallback(() => {
+    vscode.postMessage({
+      t: "openModelFile",
+    });
+  }, []);
+
   return (
     <DataExtensionsEditorContainer>
       {progress.maxStep > 0 && (
@@ -139,15 +167,19 @@ export function DataExtensionsEditor({
 
       {externalApiUsages.length > 0 && (
         <>
-          <div>
-            <h3>External API model stats</h3>
-            <ul>
-              <li>Modeled: {modeledPercentage.toFixed(2)}%</li>
-              <li>Unmodeled: {unModeledPercentage.toFixed(2)}%</li>
-            </ul>
-          </div>
-          <div>
-            <h3>External API modelling</h3>
+          <ViewTitle>Data extensions editor</ViewTitle>
+          <DetailsContainer>
+            {modelFilename && (
+              <LinkIconButton onClick={onOpenModelFileClick}>
+                <span slot="start" className="codicon codicon-file-code"></span>
+                {basename(modelFilename)}
+              </LinkIconButton>
+            )}
+            <div>{modeledPercentage.toFixed(2)}% modeled</div>
+            <div>{unModeledPercentage.toFixed(2)}% unmodeled</div>
+          </DetailsContainer>
+
+          <EditorContainer>
             <VSCodeButton onClick={onApplyClick}>Apply</VSCodeButton>
             &nbsp;
             <VSCodeButton onClick={onGenerateClick}>
@@ -188,7 +220,7 @@ export function DataExtensionsEditor({
                 />
               ))}
             </VSCodeDataGrid>
-          </div>
+          </EditorContainer>
         </>
       )}
     </DataExtensionsEditorContainer>