Extract external api usage name component and reuse it (#2765)

extensions/ql-vscode/src/stories/model-editor/ExternalApiUsageName.stories.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ExternalApiUsageName as ExternalApiUsageNameComponent } from "../../view/model-editor/ExternalApiUsageName";
+import { createExternalApiUsage } from "../../../test/factories/data-extension/external-api-factories";
+
+export default {
+  title: "CodeQL Model Editor/External API Usage Name",
+  component: ExternalApiUsageNameComponent,
+} as Meta<typeof ExternalApiUsageNameComponent>;
+
+const Template: StoryFn<typeof ExternalApiUsageNameComponent> = (args) => (
+  <ExternalApiUsageNameComponent {...args} />
+);
+
+export const ExternalApiUsageName = Template.bind({});
+ExternalApiUsageName.args = createExternalApiUsage();

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

@@ -4,6 +4,8 @@ import {
   ModelingStatus,
   ModelingStatusIndicator,
 } from "../model-editor/ModelingStatusIndicator";
+import { ExternalApiUsage } from "../../model-editor/external-api-usage";
+import { ExternalApiUsageName } from "../model-editor/ExternalApiUsageName";
 
 const Container = styled.div`
   background-color: var(--vscode-peekViewResult-background);
@@ -21,21 +23,20 @@ const DependencyContainer = styled.div`
   justify-content: space-between;
 `;
 
-const DependencyName = styled.span`
-  font-family: var(--vscode-editor-font-family);
-`;
-
 export type MethodModelingProps = {
   modelingStatus: ModelingStatus;
+  externalApiUsage: ExternalApiUsage;
 };
 
-export const MethodModeling = (props: MethodModelingProps) => {
+export const MethodModeling = ({
-  const { modelingStatus } = props;
+  modelingStatus,
+  externalApiUsage,
+}: MethodModelingProps): JSX.Element => {
   return (
     <Container>
       <Title>API or Method</Title>
       <DependencyContainer>
-        <DependencyName>that.dependency.THENAME</DependencyName>
+        <ExternalApiUsageName {...externalApiUsage} />
         <ModelingStatusIndicator status={modelingStatus} />
       </DependencyContainer>
     </Container>

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

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useEffect } from "react";
 import { MethodModeling } from "./MethodModeling";
 import { ModelingStatus } from "../model-editor/ModelingStatusIndicator";
+import { ExternalApiUsage } from "../../model-editor/external-api-usage";
 
 export function MethodModelingView(): JSX.Element {
   useEffect(() => {
@@ -22,5 +23,22 @@ export function MethodModelingView(): JSX.Element {
   }, []);
 
   const modelingStatus: ModelingStatus = "saved";
-  return <MethodModeling modelingStatus={modelingStatus} />;
+  const externalApiUsage: ExternalApiUsage = {
+    library: "sql2o",
+    libraryVersion: "1.6.0",
+    signature: "org.sql2o.Connection#createQuery(String)",
+    packageName: "org.sql2o",
+    typeName: "Connection",
+    methodName: "createQuery",
+    methodParameters: "(String)",
+    supported: true,
+    supportedType: "summary",
+    usages: [],
+  };
+  return (
+    <MethodModeling
+      modelingStatus={modelingStatus}
+      externalApiUsage={externalApiUsage}
+    />
+  );
 }

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

@@ -1,14 +1,18 @@
 import * as React from "react";
 import { render as reactRender, screen } from "@testing-library/react";
 import { MethodModeling, MethodModelingProps } from "../MethodModeling";
+import { createExternalApiUsage } from "../../../../test/factories/data-extension/external-api-factories";
 
 describe(MethodModeling.name, () => {
   const render = (props: MethodModelingProps) =>
     reactRender(<MethodModeling {...props} />);
 
-  it("renders method name", () => {
+  it("renders method modeling panel", () => {
-    render({ modelingStatus: "saved" });
+    render({
+      modelingStatus: "saved",
+      externalApiUsage: createExternalApiUsage(),
+    });
 
-    expect(screen.getByText("that.dependency.THENAME")).toBeInTheDocument();
+    expect(screen.getByText("API or Method")).toBeInTheDocument();
   });
 });

extensions/ql-vscode/src/view/model-editor/ExternalApiUsageName.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { styled } from "styled-components";
+import { ExternalApiUsage } from "../../model-editor/external-api-usage";
+
+const Name = styled.span`
+  font-family: var(--vscode-editor-font-family);
+`;
+
+export const ExternalApiUsageName = (
+  externalApiUsage: ExternalApiUsage,
+): JSX.Element => {
+  return (
+    <Name>
+      {externalApiUsage.packageName && <>{externalApiUsage.packageName}.</>}
+      {externalApiUsage.typeName}.{externalApiUsage.methodName}
+      {externalApiUsage.methodParameters}
+    </Name>
+  );
+};

extensions/ql-vscode/src/view/model-editor/MethodRow.tsx

@@ -25,6 +25,7 @@ import {
   ModelingStatusIndicator,
 } from "./ModelingStatusIndicator";
 import { InProgressDropdown } from "./InProgressDropdown";
+import { ExternalApiUsageName } from "./ExternalApiUsageName";
 
 const ApiOrMethodCell = styled(VSCodeDataGridCell)`
   display: flex;
@@ -218,7 +219,7 @@ function ModelableMethodRow(props: Props) {
       <ApiOrMethodCell gridColumn={1}>
         <ModelingStatusIndicator status={modelingStatus} />
         <MethodClassifications externalApiUsage={externalApiUsage} />
-        <ExternalApiUsageName {...props} />
+        <ExternalApiUsageName {...props.externalApiUsage} />
         {mode === Mode.Application && (
           <UsagesButton onClick={jumpToUsage}>
             {externalApiUsage.usages.length}
@@ -294,7 +295,7 @@ function UnmodelableMethodRow(props: Props) {
     <VSCodeDataGridRow>
       <ApiOrMethodCell gridColumn={1}>
         <ModelingStatusIndicator status="saved" />
-        <ExternalApiUsageName {...props} />
+        <ExternalApiUsageName {...props.externalApiUsage} />
         {mode === Mode.Application && (
           <UsagesButton onClick={jumpToUsage}>
             {externalApiUsage.usages.length}
@@ -310,18 +311,6 @@ function UnmodelableMethodRow(props: Props) {
   );
 }
 
-function ExternalApiUsageName(props: { externalApiUsage: ExternalApiUsage }) {
-  return (
-    <span>
-      {props.externalApiUsage.packageName && (
-        <>{props.externalApiUsage.packageName}.</>
-      )}
-      {props.externalApiUsage.typeName}.{props.externalApiUsage.methodName}
-      {props.externalApiUsage.methodParameters}
-    </span>
-  );
-}
-
 function sendJumpToUsageMessage(externalApiUsage: ExternalApiUsage) {
   vscode.postMessage({
     t: "jumpToUsage",

extensions/ql-vscode/src/view/model-editor/__tests__/ExternalApiUsageName.spec.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { render as reactRender, screen } from "@testing-library/react";
+import { ExternalApiUsageName } from "../ExternalApiUsageName";
+import { ExternalApiUsage } from "../../../model-editor/external-api-usage";
+import { createExternalApiUsage } from "../../../../test/factories/data-extension/external-api-factories";
+
+describe(ExternalApiUsageName.name, () => {
+  const render = (props: ExternalApiUsage) =>
+    reactRender(<ExternalApiUsageName {...props} />);
+
+  it("renders method name", () => {
+    const apiUsage = createExternalApiUsage();
+    render(apiUsage);
+
+    const name = `${apiUsage.packageName}.${apiUsage.typeName}.${apiUsage.methodName}${apiUsage.methodParameters}`;
+    expect(screen.getByText(name)).toBeInTheDocument();
+  });
+});

extensions/ql-vscode/test/factories/data-extension/external-api-factories.ts

@@ -7,15 +7,15 @@ import { ModeledMethodType } from "../../../src/model-editor/modeled-method";
 import { ResolvableLocationValue } from "../../../src/common/bqrs-cli-types";
 
 export function createExternalApiUsage({
-  library = "test",
+  library = "sql2o-1.6.0.jar",
   supported = true,
-  supportedType = "none" as ModeledMethodType,
+  supportedType = "summary" as ModeledMethodType,
   usages = [],
-  signature = "test",
+  signature = "org.sql2o.Sql2o#open()",
-  packageName = "test",
+  packageName = "org.sql2o",
-  typeName = "test",
+  typeName = "Sql2o",
-  methodName = "test",
+  methodName = "open",
-  methodParameters = "test",
+  methodParameters = "()",
 }: {
   library?: string;
   supported?: boolean;