Add new header UI elements

Author: robertbrignull

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

@@ -527,6 +527,10 @@ interface JumpToUsageMessage {
   location: ResolvableLocationValue;
 }
 
+interface OpenDatabaseMessage {
+  t: "openDatabase";
+}
+
 interface OpenExtensionPackMessage {
   t: "openExtensionPack";
 }
@@ -566,6 +570,7 @@ export type FromDataExtensionsEditorMessage =
   | ViewLoadedMsg
   | SwitchModeMessage
   | RefreshExternalApiUsages
+  | OpenDatabaseMessage
   | OpenExtensionPackMessage
   | JumpToUsageMessage
   | SaveModeledMethods

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

@@ -107,6 +107,13 @@ export class DataExtensionsEditorView extends AbstractWebview<
       case "viewLoaded":
         await this.onWebViewLoaded();
 
+        break;
+      case "openDatabase":
+        await this.app.commands.execute(
+          "revealInExplorer",
+          this.databaseItem.getSourceArchiveExplorerUri(),
+        );
+
         break;
       case "openExtensionPack":
         await this.app.commands.execute(

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

@@ -4,15 +4,18 @@ import {
   ShowProgressMessage,
   ToDataExtensionsEditorMessage,
 } from "../../common/interface-types";
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
+import {
+  VSCodeButton,
+  VSCodeCheckbox,
+  VSCodeTag,
+} from "@vscode/webview-ui-toolkit/react";
 import styled from "styled-components";
 import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
 import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
 import { assertNever } from "../../common/helpers-pure";
 import { vscode } from "../vscode-api";
 import { calculateModeledPercentage } from "../../data-extensions-editor/shared/modeled-percentage";
 import { LinkIconButton } from "../variant-analysis/LinkIconButton";
-import { ViewTitle } from "../common";
 import { DataExtensionEditorViewState } from "../../data-extensions-editor/shared/view-state";
 import { ModeledMethodsList } from "./ModeledMethodsList";
 import { percentFormatter } from "./formatters";
@@ -30,12 +33,35 @@ const DataExtensionsEditorContainer = styled.div`
   margin-top: 1rem;
 `;
 
-const DetailsContainer = styled.div`
+const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+`;
+
+const HeaderColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+`;
+
+const HeaderSpacer = styled.div`
+  flex-grow: 1;
+`;
+
+const HeaderRow = styled.div`
   display: flex;
+  flex-direction: row;
   gap: 1em;
   align-items: center;
 `;
 
+const ViewTitle = styled.h1`
+  font-size: 2em;
+  font-weight: 500;
+  margin: 0;
+`;
+
 const EditorContainer = styled.div`
   margin-top: 1rem;
 `;
@@ -150,8 +176,6 @@ export function DataExtensionsEditor({
     [externalApiUsages],
   );
 
-  const unModeledPercentage = 100 - modeledPercentage;
-
   const onChange = useCallback(
     (modelName: string, method: ExternalApiUsage, model: ModeledMethod) => {
       setModeledMethods((oldModeledMethods) => ({
@@ -228,6 +252,12 @@ export function DataExtensionsEditor({
     [],
   );
 
+  const onOpenDatabaseClick = useCallback(() => {
+    vscode.postMessage({
+      t: "openDatabase",
+    });
+  }, []);
+
   const onOpenExtensionPackClick = useCallback(() => {
     vscode.postMessage({
       t: "openExtensionPack",
@@ -259,40 +289,46 @@ export function DataExtensionsEditor({
 
       {externalApiUsages.length > 0 && (
         <>
-          <ViewTitle>
-            {getLanguageDisplayName(viewState.extensionPack.language)}
-          </ViewTitle>
-          <DetailsContainer>
-            <LinkIconButton onClick={onOpenExtensionPackClick}>
-              <span slot="start" className="codicon codicon-package"></span>
-              {viewState.extensionPack.name}
-            </LinkIconButton>
-            <div>
-              {percentFormatter.format(modeledPercentage / 100)} modeled
-            </div>
-            <div>
-              {percentFormatter.format(unModeledPercentage / 100)} unmodeled
-            </div>
-            {viewState.enableFrameworkMode && (
-              <>
-                <div>
-                  Mode:{" "}
-                  {viewState.mode === Mode.Framework
-                    ? "Framework"
-                    : "Application"}
-                </div>
-                <div>
+          <HeaderContainer>
+            <HeaderColumn>
+              <HeaderRow>
+                <ViewTitle>
+                  {getLanguageDisplayName(viewState.extensionPack.language)}
+                </ViewTitle>
+                <VSCodeTag>
+                  {percentFormatter.format(modeledPercentage / 100)} MODELED
+                </VSCodeTag>
+              </HeaderRow>
+              <HeaderRow>
+                <>{viewState.extensionPack.name}</>
+              </HeaderRow>
+              <HeaderRow>
+                <LinkIconButton onClick={onOpenDatabaseClick}>
+                  <span slot="start" className="codicon codicon-package"></span>
+                  Open database
+                </LinkIconButton>
+                <LinkIconButton onClick={onOpenExtensionPackClick}>
+                  <span slot="start" className="codicon codicon-package"></span>
+                  Open extension pack
+                </LinkIconButton>
+                {viewState.enableFrameworkMode && (
                   <LinkIconButton onClick={onSwitchModeClick}>
                     <span
                       slot="start"
                       className="codicon codicon-library"
                     ></span>
-                    Switch mode
+                    {viewState.mode === Mode.Framework
+                      ? "Model as application"
+                      : "Model as dependency"}
                   </LinkIconButton>
-                </div>
-              </>
-            )}
-          </DetailsContainer>
+                )}
+              </HeaderRow>
+            </HeaderColumn>
+            <HeaderSpacer />
+            <HeaderColumn>
+              <VSCodeCheckbox>Hide modeled APIs</VSCodeCheckbox>
+            </HeaderColumn>
+          </HeaderContainer>
 
           <EditorContainer>
             <ButtonsContainer>