Minor redesign of method modeling title (#2832)

Author: charisk

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

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { MethodModeling as MethodModelingComponent } from "../../view/method-modeling/MethodModeling";
+import { createMethod } from "../../../test/factories/data-extension/method-factories";
 export default {
   title: "Method Modeling/Method Modeling",
   component: MethodModelingComponent,
@@ -12,11 +13,23 @@ const Template: StoryFn<typeof MethodModelingComponent> = (args) => (
   <MethodModelingComponent {...args} />
 );
 
+const method = createMethod();
+
 export const MethodUnmodeled = Template.bind({});
-MethodUnmodeled.args = { modelingStatus: "unmodeled" };
+MethodUnmodeled.args = {
+  method,
+  modelingStatus: "unmodeled",
+};
 
 export const MethodModeled = Template.bind({});
-MethodModeled.args = { modelingStatus: "unsaved" };
+MethodModeled.args = {
+  method,
+
+  modelingStatus: "unsaved",
+};
 
 export const MethodSaved = Template.bind({});
-MethodSaved.args = { modelingStatus: "saved" };
+MethodSaved.args = {
+  method,
+  modelingStatus: "saved",
+};

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

@@ -8,19 +8,26 @@ import { Method } from "../../model-editor/method";
 import { MethodName } from "../model-editor/MethodName";
 
 const Container = styled.div`
-  background-color: var(--vscode-peekViewResult-background);
   padding: 0.3rem;
   margin-bottom: 1rem;
+  width: 100%;
 `;
 
 const Title = styled.div`
   padding-bottom: 0.3rem;
-  font-size: 1.2em;
+  font-size: 0.7rem;
+  text-transform: uppercase;
 `;
 
 const DependencyContainer = styled.div`
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5em;
+  background-color: var(--vscode-textBlockQuote-background);
+  border-radius: 0.3rem;
+  border-color: var(--vscode-textBlockQuote-border);
+  padding: 0.5rem;
 `;
 
 export type MethodModelingProps = {
@@ -34,10 +41,13 @@ export const MethodModeling = ({
 }: MethodModelingProps): JSX.Element => {
   return (
     <Container>
-      <Title>API or Method</Title>
+      <Title>
+        {method.packageName}
+        {method.libraryVersion && <>@{method.libraryVersion}</>}
+      </Title>
       <DependencyContainer>
-        <MethodName {...method} />
         <ModelingStatusIndicator status={modelingStatus} />
+        <MethodName {...method} />
       </DependencyContainer>
     </Container>
   );

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

@@ -8,11 +8,15 @@ describe(MethodModeling.name, () => {
     reactRender(<MethodModeling {...props} />);
 
   it("renders method modeling panel", () => {
+    const method = createMethod();
+
     render({
       modelingStatus: "saved",
-      method: createMethod(),
+      method,
     });
 
-    expect(screen.getByText("API or Method")).toBeInTheDocument();
+    expect(
+      screen.getByText(`${method.packageName}@${method.libraryVersion}`),
+    ).toBeInTheDocument();
   });
 });