Add Container and Header

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 Modelin",
+  component: MethodModelingComponent,
+} as Meta<typeof MethodModelingComponent>;
+
+const Template: StoryFn<typeof MethodModelingComponent> = () => (
+  <MethodModelingComponent />
+);
+
+export const MethodUnmodeled = Template.bind({});
+MethodUnmodeled.args = {};
+
+export const MethodModeled = Template.bind({});
+MethodModeled.args = {};
+
+export const MethodSaved = Template.bind({});
+MethodSaved.args = {};

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

@@ -1,9 +1,35 @@
 import * as React from "react";
+import { ModelingStatusIndicator } from "../data-extensions-editor/ModelingStatusIndicator";
+import { styled } from "styled-components";
+
+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 DependencyBox = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const DependencyName = styled.span`
+  font-family: var(--vscode-editor-font-family);
+`;
 
 export const MethodModeling = (): JSX.Element => {
   return (
-    <>
-      <p>Hello</p>
-    </>
+    <Container>
+      <Title>API or Method</Title>
+      <DependencyBox>
+        <DependencyName>that.dependency.THENAME</DependencyName>
+        <ModelingStatusIndicator status="unmodeled" />
+      </DependencyBox>
+    </Container>
   );
 };

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

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