Show when there are unsaved changes to a model

Author: robertbrignull

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

@@ -67,6 +67,8 @@ export function DataExtensionsEditor({
   const [externalApiUsages, setExternalApiUsages] = useState<
     ExternalApiUsage[]
   >(initialExternalApiUsages);
+  const [unsavedModels, setUnsavedModels] = useState<Set<string>>(new Set());
+
   const [modeledMethods, setModeledMethods] = useState<
     Record<string, ModeledMethod>
   >(initialModeledMethods);
@@ -86,6 +88,7 @@ export function DataExtensionsEditor({
             break;
           case "setExternalApiUsages":
             setExternalApiUsages(msg.externalApiUsages);
+            setUnsavedModels(new Set());
             break;
           case "showProgress":
             setProgress(msg);
@@ -130,11 +133,14 @@ export function DataExtensionsEditor({
   const unModeledPercentage = 100 - modeledPercentage;
 
   const onChange = useCallback(
-    (method: ExternalApiUsage, model: ModeledMethod) => {
+    (modelName: string, method: ExternalApiUsage, model: ModeledMethod) => {
       setModeledMethods((oldModeledMethods) => ({
         ...oldModeledMethods,
         [method.signature]: model,
       }));
+      setUnsavedModels(
+        (oldUnsavedModels) => new Set([...oldUnsavedModels, modelName]),
+      );
     },
     [],
   );
@@ -254,6 +260,7 @@ export function DataExtensionsEditor({
             </ButtonsContainer>
             <ModeledMethodsList
               externalApiUsages={externalApiUsages}
+              unsavedModels={unsavedModels}
               modeledMethods={modeledMethods}
               mode={viewState?.mode ?? Mode.Application}
               onChange={onChange}

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

@@ -78,6 +78,7 @@ type Props = {
   mode: Mode;
   hasUnsavedChanges: boolean;
   onChange: (
+    modelName: string,
     externalApiUsage: ExternalApiUsage,
     modeledMethod: ModeledMethod,
   ) => void;
@@ -116,6 +117,13 @@ export const LibraryRow = ({
     e.preventDefault();
   }, []);
 
+  const onChangeWithModelName = useCallback(
+    (externalApiUsage: ExternalApiUsage, modeledMethod: ModeledMethod) => {
+      onChange(title, externalApiUsage, modeledMethod);
+    },
+    [onChange, title],
+  );
+
   return (
     <LibraryContainer>
       <TitleContainer onClick={toggleExpanded} aria-expanded={isExpanded}>
@@ -147,11 +155,13 @@ export const LibraryRow = ({
             externalApiUsages={externalApiUsages}
             modeledMethods={modeledMethods}
             mode={mode}
-            onChange={onChange}
+            onChange={onChangeWithModelName}
           />
           <SectionDivider />
           <ButtonsContainer>
-            <VSCodeButton onClick={handleSave}>Save</VSCodeButton>
+            <VSCodeButton onClick={handleSave} disabled={!hasUnsavedChanges}>
+              Save
+            </VSCodeButton>
           </ButtonsContainer>
         </>
       )}

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

@@ -11,16 +11,19 @@ import {
 
 type Props = {
   externalApiUsages: ExternalApiUsage[];
+  unsavedModels: Set<string>;
   modeledMethods: Record<string, ModeledMethod>;
   mode: Mode;
   onChange: (
+    modelName: string,
     externalApiUsage: ExternalApiUsage,
     modeledMethod: ModeledMethod,
   ) => void;
 };
 
 export const ModeledMethodsList = ({
   externalApiUsages,
+  unsavedModels,
   modeledMethods,
   mode,
   onChange,
@@ -39,9 +42,9 @@ export const ModeledMethodsList = ({
           key={libraryName}
           title={libraryName}
           externalApiUsages={grouped[libraryName]}
+          hasUnsavedChanges={unsavedModels.has(libraryName)}
           modeledMethods={modeledMethods}
           mode={mode}
-          hasUnsavedChanges={false}
           onChange={onChange}
         />
       ))}