Merge pull request #2982 from github/robertbrignull/add-remove-models

Implement onClick for the add/remove model buttons in the model editor

Author: robertbrignull

extensions/ql-vscode/src/view/model-editor/MethodRow.tsx

@@ -126,6 +126,33 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
       [method, modeledMethods, onChange],
     );
 
+    const removeModelClickedHandlers = useMemo(
+      () =>
+        modeledMethods.map((_, index) => () => {
+          const newModeledMethods = [...modeledMethods];
+          newModeledMethods.splice(index, 1);
+          onChange(method.signature, newModeledMethods);
+        }),
+      [method, modeledMethods, onChange],
+    );
+
+    const handleAddModelClick = useCallback(() => {
+      const newModeledMethod: ModeledMethod = {
+        type: "none",
+        input: "",
+        output: "",
+        kind: "",
+        provenance: "manual",
+        signature: method.signature,
+        packageName: method.packageName,
+        typeName: method.typeName,
+        methodName: method.methodName,
+        methodParameters: method.methodParameters,
+      };
+      const newModeledMethods = [...modeledMethods, newModeledMethod];
+      onChange(method.signature, newModeledMethods);
+    }, [method, modeledMethods, onChange]);
+
     const jumpToMethod = useCallback(
       () => sendJumpToMethodMessage(method),
       [method],
@@ -228,6 +255,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                       key={index}
                       appearance="icon"
                       aria-label="Add new model"
+                      onClick={handleAddModelClick}
                       disabled={addModelButtonDisabled}
                     >
                       <Codicon name="add" />
@@ -237,6 +265,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                       key={index}
                       appearance="icon"
                       aria-label="Remove model"
+                      onClick={removeModelClickedHandlers[index]}
                     >
                       <Codicon name="trash" />
                     </CodiconRow>

extensions/ql-vscode/src/view/model-editor/__tests__/MethodRow.spec.tsx

@@ -358,4 +358,84 @@ describe(MethodRow.name, () => {
       expect(removeButton?.getElementsByTagName("input")[0]).toBeEnabled();
     }
   });
+
+  it("can add a new model", async () => {
+    render({
+      modeledMethods: [modeledMethod],
+      viewState: {
+        ...viewState,
+        showMultipleModels: true,
+      },
+    });
+
+    onChange.mockReset();
+    await userEvent.click(screen.getByLabelText("Add new model"));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(method.signature, [
+      modeledMethod,
+      {
+        type: "none",
+        input: "",
+        output: "",
+        kind: "",
+        provenance: "manual",
+        signature: method.signature,
+        packageName: method.packageName,
+        typeName: method.typeName,
+        methodName: method.methodName,
+        methodParameters: method.methodParameters,
+      },
+    ]);
+  });
+
+  it("can delete the first modeled method", async () => {
+    render({
+      modeledMethods: [
+        { ...modeledMethod, type: "source" },
+        { ...modeledMethod, type: "sink" },
+        { ...modeledMethod, type: "none" },
+        { ...modeledMethod, type: "summary" },
+      ],
+      viewState: {
+        ...viewState,
+        showMultipleModels: true,
+      },
+    });
+
+    onChange.mockReset();
+    await userEvent.click(screen.getAllByLabelText("Remove model")[0]);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(method.signature, [
+      { ...modeledMethod, type: "sink" },
+      { ...modeledMethod, type: "none" },
+      { ...modeledMethod, type: "summary" },
+    ]);
+  });
+
+  it("can delete a modeled method in the middle", async () => {
+    render({
+      modeledMethods: [
+        { ...modeledMethod, type: "source" },
+        { ...modeledMethod, type: "sink" },
+        { ...modeledMethod, type: "none" },
+        { ...modeledMethod, type: "summary" },
+      ],
+      viewState: {
+        ...viewState,
+        showMultipleModels: true,
+      },
+    });
+
+    onChange.mockReset();
+    await userEvent.click(screen.getAllByLabelText("Remove model")[2]);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(method.signature, [
+      { ...modeledMethod, type: "source" },
+      { ...modeledMethod, type: "sink" },
+      { ...modeledMethod, type: "summary" },
+    ]);
+  });
 });