Merge pull request #2760 from github/nora/add-components-to-modeling-panel

Adds container and header css to new method model sidebar

Author: norascheuch

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

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

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

@@ -1,9 +1,43 @@
 import * as React from "react";
+import { styled } from "styled-components";
+import {
+  ModelingStatus,
+  ModelingStatusIndicator,
+} from "../model-editor/ModelingStatusIndicator";
 
-export const MethodModeling = (): JSX.Element => {
+const Container = styled.div`
+  background-color: var(--vscode-peekViewResult-background);
+  padding: 0.3rem;
+  margin-bottom: 1rem;
+`;
+
+const Title = styled.div`
+  padding-bottom: 0.3rem;
+  font-size: 1.2em;
+`;
+
+const DependencyContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const DependencyName = styled.span`
+  font-family: var(--vscode-editor-font-family);
+`;
+
+export type MethodModelingProps = {
+  modelingStatus: ModelingStatus;
+};
+
+export const MethodModeling = (props: MethodModelingProps) => {
+  const { modelingStatus } = props;
   return (
-    <>
-      <p>Hello</p>
-    </>
+    <Container>
+      <Title>API or Method</Title>
+      <DependencyContainer>
+        <DependencyName>that.dependency.THENAME</DependencyName>
+        <ModelingStatusIndicator status={modelingStatus} />
+      </DependencyContainer>
+    </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={modelingStatus} />;
 }

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

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