Addning props and minor changes

Author: norascheuch

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

@@ -4,19 +4,19 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { MethodModeling as MethodModelingComponent } from "../../view/method-modeling/MethodModeling";
 export default {
-  title: "Method Modeling / Method Modelin",
+  title: "Method Modeling/Method Modeling",
   component: MethodModelingComponent,
 } as Meta<typeof MethodModelingComponent>;
 
-const Template: StoryFn<typeof MethodModelingComponent> = () => (
-  <MethodModelingComponent />
+const Template: StoryFn<typeof MethodModelingComponent> = (args) => (
+  <MethodModelingComponent {...args} />
 );
 
 export const MethodUnmodeled = Template.bind({});
-MethodUnmodeled.args = {};
+MethodUnmodeled.args = { modelingStatus: "unmodeled" };
 
 export const MethodModeled = Template.bind({});
-MethodModeled.args = {};
+MethodModeled.args = { modelingStatus: "unsaved" };
 
 export const MethodSaved = Template.bind({});
-MethodSaved.args = {};
+MethodSaved.args = { modelingStatus: "saved" };

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

@@ -1,6 +1,9 @@
 import * as React from "react";
 import { styled } from "styled-components";
-import { ModelingStatusIndicator } from "../model-editor/ModelingStatusIndicator";
+import {
+  ModelingStatus,
+  ModelingStatusIndicator,
+} from "../model-editor/ModelingStatusIndicator";
 
 const Container = styled.div`
   background-color: var(--vscode-peekViewResult-background);
@@ -22,13 +25,18 @@ const DependencyName = styled.span`
   font-family: var(--vscode-editor-font-family);
 `;
 
-export const MethodModeling = (): JSX.Element => {
+export type MethodModelingProps = {
+  modelingStatus: ModelingStatus;
+};
+
+export const MethodModeling = (props: MethodModelingProps) => {
+  const { modelingStatus } = props;
   return (
     <Container>
       <Title>API or Method</Title>
       <DependencyBox>
         <DependencyName>that.dependency.THENAME</DependencyName>
-        <ModelingStatusIndicator status="unmodeled" />
+        <ModelingStatusIndicator status={modelingStatus} />
       </DependencyBox>
     </Container>
   );

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useEffect } from "react";
 import { MethodModeling } from "./MethodModeling";
+import { ModelingStatus } from "../model-editor/ModelingStatusIndicator";
 
 export function MethodModelingView(): JSX.Element {
   useEffect(() => {
@@ -20,5 +21,6 @@ export function MethodModelingView(): JSX.Element {
     };
   }, []);
 
-  return <MethodModeling />;
+  const modelingStatus: ModelingStatus = "saved";
+  return <MethodModeling {...{ modelingStatus }} />;
 }

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

@@ -1,12 +1,13 @@
 import * as React from "react";
 import { render as reactRender, screen } from "@testing-library/react";
-import { MethodModeling } from "../MethodModeling";
+import { MethodModeling, MethodModelingProps } from "../MethodModeling";
 
 describe(MethodModeling.name, () => {
-  const render = () => reactRender(<MethodModeling />);
+  const render = (props: MethodModelingProps) =>
+    reactRender(<MethodModeling {...props} />);
 
-  it("renders data flow paths", () => {
-    render();
+  it("renders method modeling panel", () => {
+    render({ modelingStatus: "saved" });
 
     expect(screen.getByText("that.dependency.THENAME")).toBeInTheDocument();
   });