Merge pull request #2921 from github/koesie10/modeling-panel-multiple-models

Add ability for method modeling panel to render multiple modelings of the same method

Author: koesie10

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

@@ -4,6 +4,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { MethodModeling as MethodModelingComponent } from "../../view/method-modeling/MethodModeling";
 import { createMethod } from "../../../test/factories/model-editor/method-factories";
+import { createModeledMethod } from "../../../test/factories/model-editor/modeled-method-factories";
 export default {
   title: "Method Modeling/Method Modeling",
   component: MethodModelingComponent,
@@ -18,18 +19,53 @@ const method = createMethod();
 export const MethodUnmodeled = Template.bind({});
 MethodUnmodeled.args = {
   method,
+  modeledMethods: [],
   modelingStatus: "unmodeled",
 };
 
 export const MethodModeled = Template.bind({});
 MethodModeled.args = {
   method,
-
+  modeledMethods: [],
   modelingStatus: "unsaved",
 };
 
 export const MethodSaved = Template.bind({});
 MethodSaved.args = {
   method,
+  modeledMethods: [],
+  modelingStatus: "saved",
+};
+
+export const MultipleModelingsUnmodeled = Template.bind({});
+MultipleModelingsUnmodeled.args = {
+  method,
+  modeledMethods: [],
+  showMultipleModels: true,
+  modelingStatus: "saved",
+};
+
+export const MultipleModelingsModeledSingle = Template.bind({});
+MultipleModelingsModeledSingle.args = {
+  method,
+  modeledMethods: [createModeledMethod(method)],
+  showMultipleModels: true,
+  modelingStatus: "saved",
+};
+
+export const MultipleModelingsModeledMultiple = Template.bind({});
+MultipleModelingsModeledMultiple.args = {
+  method,
+  modeledMethods: [
+    createModeledMethod(method),
+    createModeledMethod({
+      ...method,
+      type: "source",
+      input: "",
+      output: "ReturnValue",
+      kind: "remote",
+    }),
+  ],
+  showMultipleModels: true,
   modelingStatus: "saved",
 };

extensions/ql-vscode/src/view/common/icon/Codicon.tsx

@@ -4,7 +4,7 @@ import classNames from "classnames";
 
 type Props = {
   name: string;
-  label: string;
+  label?: string;
   className?: string;
   slot?: string;
 };

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

@@ -5,9 +5,9 @@ import { ModelingStatusIndicator } from "../model-editor/ModelingStatusIndicator
 import { Method } from "../../model-editor/method";
 import { MethodName } from "../model-editor/MethodName";
 import { ModeledMethod } from "../../model-editor/modeled-method";
-import { MethodModelingInputs } from "./MethodModelingInputs";
 import { VSCodeTag } from "@vscode/webview-ui-toolkit/react";
 import { ReviewInEditorButton } from "./ReviewInEditorButton";
+import { ModeledMethodsPanel } from "./ModeledMethodsPanel";
 
 const Container = styled.div`
   padding-top: 0.5rem;
@@ -38,10 +38,6 @@ const DependencyContainer = styled.div`
   margin-bottom: 0.8rem;
 `;
 
-const StyledMethodModelingInputs = styled(MethodModelingInputs)`
-  padding-bottom: 0.5rem;
-`;
-
 const StyledVSCodeTag = styled(VSCodeTag)<{ visible: boolean }>`
   visibility: ${(props) => (props.visible ? "visible" : "hidden")};
 `;
@@ -55,15 +51,16 @@ const UnsavedTag = ({ modelingStatus }: { modelingStatus: ModelingStatus }) => (
 export type MethodModelingProps = {
   modelingStatus: ModelingStatus;
   method: Method;
-  modeledMethod: ModeledMethod | undefined;
+  modeledMethods: ModeledMethod[];
   showMultipleModels?: boolean;
   onChange: (modeledMethod: ModeledMethod) => void;
 };
 
 export const MethodModeling = ({
   modelingStatus,
-  modeledMethod,
+  modeledMethods,
   method,
+  showMultipleModels = false,
   onChange,
 }: MethodModelingProps): JSX.Element => {
   return (
@@ -77,9 +74,10 @@ export const MethodModeling = ({
         <ModelingStatusIndicator status={modelingStatus} />
         <MethodName {...method} />
       </DependencyContainer>
-      <StyledMethodModelingInputs
+      <ModeledMethodsPanel
         method={method}
-        modeledMethod={modeledMethod}
+        modeledMethods={modeledMethods}
+        showMultipleModels={showMultipleModels}
         onChange={onChange}
       />
       <ReviewInEditorButton method={method} />

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

@@ -94,7 +94,7 @@ export function MethodModelingView({ initialViewState }: Props): JSX.Element {
     <MethodModeling
       modelingStatus={modelingStatus}
       method={method}
-      modeledMethod={modeledMethod}
+      modeledMethods={modeledMethod ? [modeledMethod] : []}
       showMultipleModels={viewState?.showMultipleModels}
       onChange={onChange}
     />

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { ModeledMethod } from "../../model-editor/modeled-method";
+import { MethodModelingInputs } from "./MethodModelingInputs";
+import { Method } from "../../model-editor/method";
+import { styled } from "styled-components";
+import { MultipleModeledMethodsPanel } from "./MultipleModeledMethodsPanel";
+
+export type ModeledMethodsPanelProps = {
+  method: Method;
+  modeledMethods: ModeledMethod[];
+  showMultipleModels: boolean;
+  onChange: (modeledMethod: ModeledMethod) => void;
+};
+
+const SingleMethodModelingInputs = styled(MethodModelingInputs)`
+  padding-bottom: 0.5rem;
+`;
+
+export const ModeledMethodsPanel = ({
+  method,
+  modeledMethods,
+  showMultipleModels,
+  onChange,
+}: ModeledMethodsPanelProps) => {
+  if (!showMultipleModels) {
+    return (
+      <SingleMethodModelingInputs
+        method={method}
+        modeledMethod={
+          modeledMethods.length > 0 ? modeledMethods[0] : undefined
+        }
+        onChange={onChange}
+      />
+    );
+  }
+
+  return (
+    <MultipleModeledMethodsPanel
+      method={method}
+      modeledMethods={modeledMethods}
+      onChange={onChange}
+    />
+  );
+};

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

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { useCallback, useState } from "react";
+import { Method } from "../../model-editor/method";
+import { ModeledMethod } from "../../model-editor/modeled-method";
+import { styled } from "styled-components";
+import { MethodModelingInputs } from "./MethodModelingInputs";
+import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
+import { Codicon } from "../common";
+
+export type MultipleModeledMethodsPanelProps = {
+  method: Method;
+  modeledMethods: ModeledMethod[];
+  onChange: (modeledMethod: ModeledMethod) => void;
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  padding-bottom: 0.5rem;
+  border-bottom: 0.05rem solid var(--vscode-panelSection-border);
+`;
+
+const Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const PaginationActions = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+`;
+
+export const MultipleModeledMethodsPanel = ({
+  method,
+  modeledMethods,
+  onChange,
+}: MultipleModeledMethodsPanelProps) => {
+  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+
+  const handlePreviousClick = useCallback(() => {
+    setSelectedIndex((previousIndex) => previousIndex - 1);
+  }, []);
+  const handleNextClick = useCallback(() => {
+    setSelectedIndex((previousIndex) => previousIndex + 1);
+  }, []);
+
+  return (
+    <Container>
+      {modeledMethods.length > 0 ? (
+        <MethodModelingInputs
+          method={method}
+          modeledMethod={modeledMethods[selectedIndex]}
+          onChange={onChange}
+        />
+      ) : (
+        <MethodModelingInputs
+          method={method}
+          modeledMethod={undefined}
+          onChange={onChange}
+        />
+      )}
+      <Footer>
+        <PaginationActions>
+          <VSCodeButton
+            appearance="icon"
+            aria-label="Previous modeling"
+            onClick={handlePreviousClick}
+            disabled={modeledMethods.length < 2 || selectedIndex === 0}
+          >
+            <Codicon name="chevron-left" />
+          </VSCodeButton>
+          {modeledMethods.length > 1 && (
+            <div>
+              {selectedIndex + 1}/{modeledMethods.length}
+            </div>
+          )}
+          <VSCodeButton
+            appearance="icon"
+            aria-label="Next modeling"
+            onClick={handleNextClick}
+            disabled={
+              modeledMethods.length < 2 ||
+              selectedIndex === modeledMethods.length - 1
+            }
+          >
+            <Codicon name="chevron-right" />
+          </VSCodeButton>
+        </PaginationActions>
+      </Footer>
+    </Container>
+  );
+};

extensions/ql-vscode/src/view/method-modeling/__tests__/MethodModeling.spec.tsx

@@ -16,7 +16,7 @@ describe(MethodModeling.name, () => {
     render({
       modelingStatus: "saved",
       method,
-      modeledMethod,
+      modeledMethods: [modeledMethod],
       onChange,
     });
 

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

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { render as reactRender, screen } from "@testing-library/react";
+import { createMethod } from "../../../../test/factories/model-editor/method-factories";
+import { createModeledMethod } from "../../../../test/factories/model-editor/modeled-method-factories";
+import {
+  ModeledMethodsPanel,
+  ModeledMethodsPanelProps,
+} from "../ModeledMethodsPanel";
+
+describe(ModeledMethodsPanel.name, () => {
+  const render = (props: ModeledMethodsPanelProps) =>
+    reactRender(<ModeledMethodsPanel {...props} />);
+
+  const method = createMethod();
+  const modeledMethods = [createModeledMethod(), createModeledMethod()];
+  const onChange = jest.fn();
+
+  describe("when show multiple models is disabled", () => {
+    const showMultipleModels = false;
+
+    it("renders the method modeling inputs", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+        showMultipleModels,
+      });
+
+      expect(screen.getAllByRole("combobox")).toHaveLength(4);
+    });
+
+    it("does not render the pagination", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+        showMultipleModels,
+      });
+
+      expect(
+        screen.queryByLabelText("Previous modeling"),
+      ).not.toBeInTheDocument();
+      expect(screen.queryByLabelText("Next modeling")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("when show multiple models is enabled", () => {
+    const showMultipleModels = true;
+
+    it("renders the method modeling inputs once", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+        showMultipleModels,
+      });
+
+      expect(screen.getAllByRole("combobox")).toHaveLength(4);
+    });
+
+    it("renders the pagination", () => {
+      render({
+        method,
+        modeledMethods,
+        onChange,
+        showMultipleModels,
+      });
+
+      expect(screen.getByLabelText("Previous modeling")).toBeInTheDocument();
+      expect(screen.getByLabelText("Next modeling")).toBeInTheDocument();
+      expect(screen.getByText("1/2")).toBeInTheDocument();
+    });
+  });
+});