Add new buttons to title bar

Author: robertbrignull

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,15 +20,46 @@ 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;
   border: none;
   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 && (
         <>

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}
         />
       ))}