add dummy stories for vuln details components (#210)

.storybook/main.ts

@@ -22,6 +22,7 @@ const config: StorybookConfig = {
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@chromatic-com/storybook"),
     getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-queryparams"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-webpack5"),

.storybook/preview.ts

@@ -4,8 +4,10 @@ import "@patternfly/patternfly/utilities/Display/display.css";
 import "@patternfly/patternfly/utilities/Flex/flex.css";
 import "@patternfly/patternfly/utilities/Sizing/sizing.css";
 import "@patternfly/patternfly/utilities/Spacing/spacing.css";
+import React from "react";
 
 import type { Preview } from "@storybook/react";
+import { BrowserRouter as Router } from "react-router-dom";
 
 const preview: Preview = {
   parameters: {

client/src/app/pages/vulnerability-details/advisories-by-vulnerability.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { AdvisoriesByVulnerability } from "./advisories-by-vulnerability";
+
+const meta = {
+  title: "Components/vulnerability-details/advisories-by-vulnerability.tsx",
+  component: AdvisoriesByVulnerability,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+  ],
+} satisfies Meta<typeof AdvisoriesByVulnerability>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const EmptyState: Story = {
+  args: {
+    variant: "compact",
+    advisories: [],
+  },
+};

client/src/app/pages/vulnerability-details/overview.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Overview } from "./overview";
 
 const meta = {
-  title: "Vulnerabilities/Vulnerability Details/Overview",
+  title: "Components/vulnerability-details/overview.tsx",
   component: Overview,
   parameters: {
     layout: "fullscreen",

client/src/app/pages/vulnerability-details/packages-by-vulnerability.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BrowserRouter } from "react-router-dom";
+
+import { PackagesByVulnerability } from "./packages-by-vulnerability";
+import React from "react";
+
+const meta = {
+  title: "Components/vulnerability-details/packages-by-vulnerability.tsx",
+  component: PackagesByVulnerability,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof PackagesByVulnerability>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const EmptyState: Story = {
+  args: {
+    variant: "compact",
+    initialItemsPerPage: 10,
+    advisories: [],
+  },
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+  ],
+};

client/src/app/pages/vulnerability-details/sboms-by-vulnerability.stories.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { BrowserRouter } from "react-router-dom";
+import { SbomsByVulnerability } from "./sboms-by-vulnerability";
+
+const meta = {
+  title: "Components/vulnerability-details/sboms-by-vulnerability.tsx",
+  component: SbomsByVulnerability,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof SbomsByVulnerability>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: "compact",
+    advisories: [],
+  },
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+  ],
+};
+
+export const EmptyState: Story = {
+  args: {
+    variant: "compact",
+    advisories: [],
+  },
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+  ],
+};

client/src/app/pages/vulnerability-details/vulnerability-details.stories.tsx

@@ -1,19 +1,34 @@
 import type { Meta, StoryObj } from "@storybook/react";
-
+import { BrowserRouter } from "react-router-dom";
+import React from "react";
 import { CveDetails } from "./vulnerability-details";
 
 const meta = {
-  title: "Vulnerabilities/Vulnerability Details/Vulnerability Details",
+  title: "Components/vulnerability-details/vulnerability-details.tsx",
   component: CveDetails,
   parameters: {
-    layout: "fullscreen",
+    query: {
+      vulnerabilityId: "CVE-2023-1664",
+    },
   },
   tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
+    ),
+  ],
 } satisfies Meta<typeof CveDetails>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {},
+  render: () => {
+    const urlParams = new URLSearchParams(document.location.search);
+    const mockedParam = urlParams.get("vulnerabilityId");
+    return <div>Mocked value: {mockedParam}</div>;
+  },
 };

client/src/stories/overview.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Overview } from "../app/pages/vulnerability-details/overview";
+
+const meta = {
+  title: "v2/Vulnerability Details",
+  component: Overview,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Overview>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    vulnerability: {
+      // type VulnerabilityHead
+      cwes: [],
+      description: "Some description here",
+      discovered: "And here",
+      identifier: "vulny-wulny",
+      title: "Some Fun Vulnerability",
+      modified: null,
+      normative: false,
+      published: null,
+      released: null,
+      withdrawn: null,
+      average_score: null,
+      average_severity: null,
+      reserved: null,
+
+      // advisories, if any
+      advisories: [],
+    },
+  },
+};

package.json

@@ -51,6 +51,7 @@
     "@storybook/addon-interactions": "^8.3.6",
     "@storybook/addon-links": "^8.3.6",
     "@storybook/addon-onboarding": "^8.3.6",
+    "@storybook/addon-queryparams": "^7.0.1",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
     "@storybook/blocks": "^8.3.6",
     "@storybook/react": "^8.3.6",