From 15be27c4c3446dd36d6daaa679d67f4458f71336 Mon Sep 17 00:00:00 2001
From: Robert <robertbrignull@github.com>
Date: Mon, 3 Jul 2023 15:47:27 +0100
Subject: [PATCH 1/2] Add new buttons to title bar

---
 .../data-extensions-editor/LibraryRow.tsx     | 77 +++++++++++++++----
 .../ModeledMethodsList.tsx                    |  1 +
 2 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
index 2931b07f577..e3340d65ce3 100644
--- a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
@@ -9,6 +9,7 @@ import { calculateModeledPercentage } from "../../data-extensions-editor/shared/
 import { decimalFormatter, percentFormatter } from "./formatters";
 import { Codicon } from "../common";
 import { Mode } from "../../data-extensions-editor/shared/mode";
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 
 const LibraryContainer = styled.div`
   margin-bottom: 1rem;
@@ -19,8 +20,6 @@ const TitleContainer = styled.button`
   gap: 0.5em;
   align-items: center;
   width: 100%;
-  font-size: 1.2em;
-  font-weight: bold;
 
   color: var(--vscode-editor-foreground);
   background-color: transparent;
@@ -28,6 +27,39 @@ const TitleContainer = styled.button`
   cursor: pointer;
 `;
 
+const NameContainer = styled.div`
+  display: flex;
+  gap: 0.5em;
+  align-items: baseline;
+  flex-grow: 1;
+  text-align: left;
+`;
+
+const DependencyName = styled.span`
+  font-size: 1.2em;
+  font-weight: bold;
+`;
+
+const ModeledPercentage = styled.span`
+  color: var(--vscode-descriptionForeground);
+`;
+
+const UnsavedLabel = styled.span`
+  text-transform: uppercase;
+  background-color: var(--vscode-input-background);
+  padding: 0.2em 0.4em;
+  border-radius: 0.2em;
+`;
+
+const TitleButton = styled(VSCodeButton)`
+  background-color: transparent;
+
+  &:hover {
+    pointer: cursor;
+    background-color: var(--vscode-button-secondaryBackground);
+  }
+`;
+
 const StatusContainer = styled.div`
   display: flex;
   gap: 1em;
@@ -43,6 +75,7 @@ type Props = {
   externalApiUsages: ExternalApiUsage[];
   modeledMethods: Record<string, ModeledMethod>;
   mode: Mode;
+  hasUnsavedChanges: boolean;
   onChange: (
     externalApiUsage: ExternalApiUsage,
     modeledMethod: ModeledMethod,
@@ -54,6 +87,7 @@ export const LibraryRow = ({
   externalApiUsages,
   modeledMethods,
   mode,
+  hasUnsavedChanges,
   onChange,
 }: Props) => {
   const modeledPercentage = useMemo(() => {
@@ -70,6 +104,16 @@ export const LibraryRow = ({
     return externalApiUsages.reduce((acc, curr) => acc + curr.usages.length, 0);
   }, [externalApiUsages]);
 
+  const handleModelWithAI = useCallback(async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+  }, []);
+
+  const handleModelFromSource = useCallback(async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+  }, []);
+
   return (
     <LibraryContainer>
       <TitleContainer onClick={toggleExpanded} aria-expanded={isExpanded}>
@@ -78,20 +122,21 @@ export const LibraryRow = ({
         ) : (
           <Codicon name="chevron-right" label="Expand" />
         )}
-        {title}
-        {isExpanded ? null : (
-          <>
-            {" "}
-            (
-            {pluralize(
-              externalApiUsages.length,
-              "method",
-              "methods",
-              decimalFormatter.format.bind(decimalFormatter),
-            )}
-            , {percentFormatter.format(modeledPercentage / 100)} modeled)
-          </>
-        )}
+        <NameContainer>
+          <DependencyName>{title}</DependencyName>
+          <ModeledPercentage>
+            {percentFormatter.format(modeledPercentage / 100)} modeled
+          </ModeledPercentage>
+          {hasUnsavedChanges ? <UnsavedLabel>UNSAVED</UnsavedLabel> : null}
+        </NameContainer>
+        <TitleButton onClick={handleModelWithAI}>
+          <Codicon name="lightbulb-autofix" label="Model with AI" />
+          &nbsp;Model with AI
+        </TitleButton>
+        <TitleButton onClick={handleModelFromSource}>
+          <Codicon name="code" label="Model from source" />
+          &nbsp;Model from source
+        </TitleButton>
       </TitleContainer>
       {isExpanded && (
         <>
diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx
index dbcff18c87b..3f8c96a9261 100644
--- a/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/ModeledMethodsList.tsx
@@ -41,6 +41,7 @@ export const ModeledMethodsList = ({
           externalApiUsages={grouped[libraryName]}
           modeledMethods={modeledMethods}
           mode={mode}
+          hasUnsavedChanges={false}
           onChange={onChange}
         />
       ))}

From 97219b9f63dc246caa5f7e4d9b36879bb069b548 Mon Sep 17 00:00:00 2001
From: Robert <robertbrignull@github.com>
Date: Mon, 3 Jul 2023 15:48:18 +0100
Subject: [PATCH 2/2] Remove old status info

---
 .../data-extensions-editor/LibraryRow.tsx     | 52 +++----------------
 1 file changed, 7 insertions(+), 45 deletions(-)

diff --git a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
index e3340d65ce3..301c4a02e64 100644
--- a/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
+++ b/extensions/ql-vscode/src/view/data-extensions-editor/LibraryRow.tsx
@@ -3,10 +3,9 @@ import { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
 import { ModeledMethod } from "../../data-extensions-editor/modeled-method";
-import { pluralize } from "../../common/word";
 import { ModeledMethodDataGrid } from "./ModeledMethodDataGrid";
 import { calculateModeledPercentage } from "../../data-extensions-editor/shared/modeled-percentage";
-import { decimalFormatter, percentFormatter } from "./formatters";
+import { percentFormatter } from "./formatters";
 import { Codicon } from "../common";
 import { Mode } from "../../data-extensions-editor/shared/mode";
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
@@ -60,16 +59,6 @@ const TitleButton = styled(VSCodeButton)`
   }
 `;
 
-const StatusContainer = styled.div`
-  display: flex;
-  gap: 1em;
-  align-items: center;
-
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-  margin-left: 1em;
-`;
-
 type Props = {
   title: string;
   externalApiUsages: ExternalApiUsage[];
@@ -100,10 +89,6 @@ export const LibraryRow = ({
     setExpanded((oldIsExpanded) => !oldIsExpanded);
   }, []);
 
-  const usagesCount = useMemo(() => {
-    return externalApiUsages.reduce((acc, curr) => acc + curr.usages.length, 0);
-  }, [externalApiUsages]);
-
   const handleModelWithAI = useCallback(async (e: React.MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
@@ -139,35 +124,12 @@ export const LibraryRow = ({
         </TitleButton>
       </TitleContainer>
       {isExpanded && (
-        <>
-          <StatusContainer>
-            <div>
-              {pluralize(
-                externalApiUsages.length,
-                "method",
-                "methods",
-                decimalFormatter.format.bind(decimalFormatter),
-              )}
-            </div>
-            <div>
-              {pluralize(
-                usagesCount,
-                "usage",
-                "usages",
-                decimalFormatter.format.bind(decimalFormatter),
-              )}
-            </div>
-            <div>
-              {percentFormatter.format(modeledPercentage / 100)} modeled
-            </div>
-          </StatusContainer>
-          <ModeledMethodDataGrid
-            externalApiUsages={externalApiUsages}
-            modeledMethods={modeledMethods}
-            mode={mode}
-            onChange={onChange}
-          />
-        </>
+        <ModeledMethodDataGrid
+          externalApiUsages={externalApiUsages}
+          modeledMethods={modeledMethods}
+          mode={mode}
+          onChange={onChange}
+        />
       )}
     </LibraryContainer>
   );