Merge pull request #2924 from github/koesie10/modeling-panel-multiple-models-add-remove

Add ability to add/remove modelings to method modeling panel

Author: koesie10

extensions/ql-vscode/src/stories/method-modeling/MultipleModeledMethodsPanel.stories.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { useCallback, useEffect, useState } from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+
+import { MultipleModeledMethodsPanel as MultipleModeledMethodsPanelComponent } from "../../view/method-modeling/MultipleModeledMethodsPanel";
+import { createMethod } from "../../../test/factories/model-editor/method-factories";
+import { createModeledMethod } from "../../../test/factories/model-editor/modeled-method-factories";
+import { ModeledMethod } from "../../model-editor/modeled-method";
+
+export default {
+  title: "Method Modeling/Multiple Modeled Methods Panel",
+  component: MultipleModeledMethodsPanelComponent,
+} as Meta<typeof MultipleModeledMethodsPanelComponent>;
+
+const Template: StoryFn<typeof MultipleModeledMethodsPanelComponent> = (
+  args,
+) => {
+  const [modeledMethods, setModeledMethods] = useState<ModeledMethod[]>(
+    args.modeledMethods,
+  );
+
+  useEffect(() => {
+    setModeledMethods(args.modeledMethods);
+  }, [args.modeledMethods]);
+
+  const handleChange = useCallback(
+    (modeledMethods: ModeledMethod[]) => {
+      args.onChange(modeledMethods);
+      setModeledMethods(modeledMethods);
+    },
+    [args],
+  );
+
+  return (
+    <MultipleModeledMethodsPanelComponent
+      {...args}
+      modeledMethods={modeledMethods}
+      onChange={handleChange}
+    />
+  );
+};
+
+const method = createMethod();
+
+export const Unmodeled = Template.bind({});
+Unmodeled.args = {
+  method,
+  modeledMethods: [],
+};
+
+export const Single = Template.bind({});
+Single.args = {
+  method,
+  modeledMethods: [createModeledMethod(method)],
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  method,
+  modeledMethods: [
+    createModeledMethod(method),
+    createModeledMethod({
+      ...method,
+      type: "source",
+      input: "",
+      output: "ReturnValue",
+      kind: "remote",
+    }),
+  ],
+};

extensions/ql-vscode/src/view/method-modeling/ModeledMethodsPanel.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useCallback } from "react";
 import { ModeledMethod } from "../../model-editor/modeled-method";
 import { MethodModelingInputs } from "./MethodModelingInputs";
 import { Method } from "../../model-editor/method";
@@ -23,6 +24,13 @@ export const ModeledMethodsPanel = ({
   showMultipleModels,
   onChange,
 }: ModeledMethodsPanelProps) => {
+  const handleMultipleChange = useCallback(
+    (modeledMethods: ModeledMethod[]) => {
+      onChange(modeledMethods[0]);
+    },
+    [onChange],
+  );
+
   if (!showMultipleModels) {
     return (
       <SingleMethodModelingInputs
@@ -37,7 +45,7 @@ export const ModeledMethodsPanel = ({
     <MultipleModeledMethodsPanel
       method={method}
       modeledMethods={modeledMethods}
-      onChange={onChange}
+      onChange={handleMultipleChange}
     />
   );
 };

extensions/ql-vscode/src/view/method-modeling/MultipleModeledMethodsPanel.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Method } from "../../model-editor/method";
 import { ModeledMethod } from "../../model-editor/modeled-method";
 import { styled } from "styled-components";
@@ -10,7 +10,7 @@ import { Codicon } from "../common";
 export type MultipleModeledMethodsPanelProps = {
   method: Method;
   modeledMethods: ModeledMethod[];
-  onChange: (modeledMethod: ModeledMethod) => void;
+  onChange: (modeledMethods: ModeledMethod[]) => void;
 };
 
 const Container = styled.div`
@@ -25,6 +25,7 @@ const Container = styled.div`
 const Footer = styled.div`
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
 `;
 
 const PaginationActions = styled.div`
@@ -33,6 +34,12 @@ const PaginationActions = styled.div`
   gap: 0.5rem;
 `;
 
+const ModificationActions = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+`;
+
 export const MultipleModeledMethodsPanel = ({
   method,
   modeledMethods,
@@ -47,19 +54,73 @@ export const MultipleModeledMethodsPanel = ({
     setSelectedIndex((previousIndex) => previousIndex + 1);
   }, []);
 
+  const handleAddClick = 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(newModeledMethods);
+    setSelectedIndex(newModeledMethods.length - 1);
+  }, [onChange, modeledMethods, method]);
+
+  const handleRemoveClick = useCallback(() => {
+    const newModeledMethods = modeledMethods.filter(
+      (_, index) => index !== selectedIndex,
+    );
+
+    const newSelectedIndex =
+      selectedIndex === newModeledMethods.length
+        ? selectedIndex - 1
+        : selectedIndex;
+
+    onChange(newModeledMethods);
+    setSelectedIndex(newSelectedIndex);
+  }, [onChange, modeledMethods, selectedIndex]);
+
+  const anyUnmodeled = useMemo(
+    () =>
+      modeledMethods.length === 0 ||
+      modeledMethods.some((m) => m.type === "none"),
+    [modeledMethods],
+  );
+
+  const handleChange = useCallback(
+    (modeledMethod: ModeledMethod) => {
+      if (modeledMethods.length > 0) {
+        const newModeledMethods = [...modeledMethods];
+        newModeledMethods[selectedIndex] = modeledMethod;
+        onChange(newModeledMethods);
+      } else {
+        onChange([modeledMethod]);
+      }
+    },
+    [modeledMethods, selectedIndex, onChange],
+  );
+
   return (
     <Container>
       {modeledMethods.length > 0 ? (
         <MethodModelingInputs
           method={method}
           modeledMethod={modeledMethods[selectedIndex]}
-          onChange={onChange}
+          onChange={handleChange}
         />
       ) : (
         <MethodModelingInputs
           method={method}
           modeledMethod={undefined}
-          onChange={onChange}
+          onChange={handleChange}
         />
       )}
       <Footer>
@@ -89,6 +150,24 @@ export const MultipleModeledMethodsPanel = ({
             <Codicon name="chevron-right" />
           </VSCodeButton>
         </PaginationActions>
+        <ModificationActions>
+          <VSCodeButton
+            appearance="icon"
+            aria-label="Delete modeling"
+            onClick={handleRemoveClick}
+            disabled={modeledMethods.length < 2}
+          >
+            <Codicon name="trash" />
+          </VSCodeButton>
+          <VSCodeButton
+            appearance="icon"
+            aria-label="Add modeling"
+            onClick={handleAddClick}
+            disabled={anyUnmodeled}
+          >
+            <Codicon name="add" />
+          </VSCodeButton>
+        </ModificationActions>
       </Footer>
     </Container>
   );