Implement saving only one model at a time

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

@@ -88,7 +88,6 @@ export function DataExtensionsEditor({
             break;
           case "setExternalApiUsages":
             setExternalApiUsages(msg.externalApiUsages);
-            setUnsavedModels(new Set());
             break;
           case "showProgress":
             setProgress(msg);
@@ -151,14 +150,35 @@ export function DataExtensionsEditor({
     });
   }, []);
 
-  const onApplyClick = useCallback(() => {
+  const onSaveAllClick = useCallback(() => {
     vscode.postMessage({
       t: "saveModeledMethods",
       externalApiUsages,
       modeledMethods,
     });
+    setUnsavedModels(new Set());
   }, [externalApiUsages, modeledMethods]);
 
+  const onSaveModelClick = useCallback(
+    (
+      modelName: string,
+      externalApiUsages: ExternalApiUsage[],
+      modeledMethods: Record<string, ModeledMethod>,
+    ) => {
+      vscode.postMessage({
+        t: "saveModeledMethods",
+        externalApiUsages,
+        modeledMethods,
+      });
+      setUnsavedModels((oldUnsavedModels) => {
+        const newUnsavedModels = new Set(oldUnsavedModels);
+        newUnsavedModels.delete(modelName);
+        return newUnsavedModels;
+      });
+    },
+    [],
+  );
+
   const onGenerateClick = useCallback(() => {
     vscode.postMessage({
       t: "generateExternalApi",
@@ -239,7 +259,7 @@ export function DataExtensionsEditor({
 
           <EditorContainer>
             <ButtonsContainer>
-              <VSCodeButton onClick={onApplyClick}>Apply</VSCodeButton>
+              <VSCodeButton onClick={onSaveAllClick}>Apply</VSCodeButton>
               {viewState?.enableFrameworkMode && (
                 <VSCodeButton appearance="secondary" onClick={onRefreshClick}>
                   Refresh
@@ -264,6 +284,7 @@ export function DataExtensionsEditor({
               modeledMethods={modeledMethods}
               mode={viewState?.mode ?? Mode.Application}
               onChange={onChange}
+              onSaveModelClick={onSaveModelClick}
             />
           </EditorContainer>
         </>

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

@@ -87,6 +87,11 @@ type Props = {
     externalApiUsage: ExternalApiUsage,
     modeledMethod: ModeledMethod,
   ) => void;
+  onSaveModelClick: (
+    modelName: string,
+    externalApiUsages: ExternalApiUsage[],
+    modeledMethods: Record<string, ModeledMethod>,
+  ) => void;
 };
 
 export const LibraryRow = ({
@@ -96,6 +101,7 @@ export const LibraryRow = ({
   mode,
   hasUnsavedChanges,
   onChange,
+  onSaveModelClick,
 }: Props) => {
   const modeledPercentage = useMemo(() => {
     return calculateModeledPercentage(externalApiUsages);
@@ -117,10 +123,14 @@ export const LibraryRow = ({
     e.preventDefault();
   }, []);
 
-  const handleSave = useCallback(async (e: React.MouseEvent) => {
+  const handleSave = useCallback(
-    e.stopPropagation();
+    async (e: React.MouseEvent) => {
-    e.preventDefault();
+      onSaveModelClick(title, externalApiUsages, modeledMethods);
-  }, []);
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    [title, externalApiUsages, modeledMethods, onSaveModelClick],
+  );
 
   const onChangeWithModelName = useCallback(
     (externalApiUsage: ExternalApiUsage, modeledMethod: ModeledMethod) => {

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

@@ -19,6 +19,11 @@ type Props = {
     externalApiUsage: ExternalApiUsage,
     modeledMethod: ModeledMethod,
   ) => void;
+  onSaveModelClick: (
+    modelName: string,
+    externalApiUsages: ExternalApiUsage[],
+    modeledMethods: Record<string, ModeledMethod>,
+  ) => void;
 };
 
 export const ModeledMethodsList = ({
@@ -27,6 +32,7 @@ export const ModeledMethodsList = ({
   modeledMethods,
   mode,
   onChange,
+  onSaveModelClick,
 }: Props) => {
   const grouped = useMemo(
     () => groupMethods(externalApiUsages, mode),
@@ -46,6 +52,7 @@ export const ModeledMethodsList = ({
           modeledMethods={modeledMethods}
           mode={mode}
           onChange={onChange}
+          onSaveModelClick={onSaveModelClick}
         />
       ))}
     </>