Add new ModelPacks component (#3469)

extensions/ql-vscode/src/common/model-pack-details.ts

@@ -0,0 +1,4 @@
+export interface ModelPackDetails {
+  name: string;
+  path: string;
+}

extensions/ql-vscode/src/stories/model-alerts/ModelPacks.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryFn } from "@storybook/react";
+
+import { ModelPacks as ModelPacksComponent } from "../../view/model-alerts/ModelPacks";
+
+export default {
+  title: "Model Alerts/Model Packs",
+  component: ModelPacksComponent,
+  argTypes: {
+    openModelPackClick: {
+      action: "open-model-pack-clicked",
+      table: {
+        disable: true,
+      },
+    },
+  },
+} as Meta<typeof ModelPacksComponent>;
+
+const Template: StoryFn<typeof ModelPacksComponent> = (args) => (
+  <ModelPacksComponent {...args} />
+);
+
+export const ModelPacks = Template.bind({});
+ModelPacks.args = {
+  modelPacks: [
+    {
+      name: "Model pack 1",
+      path: "/path/to/model-pack-1",
+    },
+    {
+      name: "Model pack 2",
+      path: "/path/to/model-pack-2",
+    },
+  ],
+};

extensions/ql-vscode/src/view/model-alerts/ModelPacks.tsx

@@ -0,0 +1,43 @@
+import { styled } from "styled-components";
+import { LinkIconButton } from "../common/LinkIconButton";
+import type { ModelPackDetails } from "../../common/model-pack-details";
+
+const Title = styled.h3`
+  font-size: medium;
+  font-weight: 500;
+  margin: 0;
+`;
+
+const List = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin-top: 5px;
+`;
+
+export const ModelPacks = ({
+  modelPacks,
+  openModelPackClick,
+}: {
+  modelPacks: ModelPackDetails[];
+  openModelPackClick: (path: string) => void;
+}): React.JSX.Element => {
+  if (modelPacks.length <= 0) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <Title>Model packs</Title>
+      <List>
+        {modelPacks.map((modelPack) => (
+          <li key={modelPack.path}>
+            <LinkIconButton onClick={() => openModelPackClick(modelPack.path)}>
+              <span slot="start" className="codicon codicon-file-code"></span>
+              {modelPack.name}
+            </LinkIconButton>
+          </li>
+        ))}
+      </List>
+    </>
+  );
+};