From f57a9b5ea91e34c7af9e3ac8fda109a467ee6e44 Mon Sep 17 00:00:00 2001 From: hsjobeki Date: Tue, 3 Jun 2025 12:10:21 +0000 Subject: [PATCH 1/2] Reaply: #3777: fix/machine-detail-view --- pkgs/clan-app/ui/.storybook/preview.ts | 1 + .../ui/src/components/TagList/TagList.css | 7 ++ .../components/TagList/TagList.stories.tsx | 36 ++++++++++ .../ui/src/components/TagList/TagList.tsx | 21 ++++++ .../ui/src/components/inputBase/index.tsx | 2 +- .../ui/src/routes/machines/details.tsx | 68 ++++++++++--------- 6 files changed, 101 insertions(+), 34 deletions(-) create mode 100644 pkgs/clan-app/ui/src/components/TagList/TagList.css create mode 100644 pkgs/clan-app/ui/src/components/TagList/TagList.stories.tsx create mode 100644 pkgs/clan-app/ui/src/components/TagList/TagList.tsx diff --git a/pkgs/clan-app/ui/.storybook/preview.ts b/pkgs/clan-app/ui/.storybook/preview.ts index d402861af..90e8a31a2 100644 --- a/pkgs/clan-app/ui/.storybook/preview.ts +++ b/pkgs/clan-app/ui/.storybook/preview.ts @@ -2,6 +2,7 @@ import type { Preview } from "@kachurun/storybook-solid"; import "@/src/components/v2/index.css"; import "./preview.css"; +import "../src/index.css"; export const preview: Preview = { tags: ["autodocs"], diff --git a/pkgs/clan-app/ui/src/components/TagList/TagList.css b/pkgs/clan-app/ui/src/components/TagList/TagList.css new file mode 100644 index 000000000..261c86336 --- /dev/null +++ b/pkgs/clan-app/ui/src/components/TagList/TagList.css @@ -0,0 +1,7 @@ +div.tag-list { + @apply flex flex-wrap gap-2; + + span.tag { + @apply w-fit rounded-full px-3 py-2 bg-inv-4 fg-inv-1; + } +} diff --git a/pkgs/clan-app/ui/src/components/TagList/TagList.stories.tsx b/pkgs/clan-app/ui/src/components/TagList/TagList.stories.tsx new file mode 100644 index 000000000..43d286a01 --- /dev/null +++ b/pkgs/clan-app/ui/src/components/TagList/TagList.stories.tsx @@ -0,0 +1,36 @@ +import type { Meta, StoryObj } from "@kachurun/storybook-solid"; +import { TagList, TagListProps } from "./TagList"; + +const meta: Meta = { + title: "Components/TagList", + component: TagList, + decorators: [ + // wrap in a fixed width div so we can check that it wraps + (Story) => { + return ( +
+ +
+ ); + }, + ], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + values: [ + "Titan", + "Enceladus", + "Mimas", + "Dione", + "Iapetus", + "Tethys", + "Hyperion", + "Epimetheus", + ], + }, +}; diff --git a/pkgs/clan-app/ui/src/components/TagList/TagList.tsx b/pkgs/clan-app/ui/src/components/TagList/TagList.tsx new file mode 100644 index 000000000..ff039ceaa --- /dev/null +++ b/pkgs/clan-app/ui/src/components/TagList/TagList.tsx @@ -0,0 +1,21 @@ +import { Component, For } from "solid-js"; +import { Typography } from "@/src/components/Typography"; +import "./TagList.css"; + +export interface TagListProps { + values: string[]; +} + +export const TagList: Component = (props) => { + return ( +
+ + {(tag) => ( + + {tag} + + )} + +
+ ); +}; diff --git a/pkgs/clan-app/ui/src/components/inputBase/index.tsx b/pkgs/clan-app/ui/src/components/inputBase/index.tsx index 126ba250e..e25975647 100644 --- a/pkgs/clan-app/ui/src/components/inputBase/index.tsx +++ b/pkgs/clan-app/ui/src/components/inputBase/index.tsx @@ -137,7 +137,7 @@ export const InputLabel = (props: InputLabelProps) => { weight="bold" size="xs" > - {"∗"} + <>* )} {props.help && ( diff --git a/pkgs/clan-app/ui/src/routes/machines/details.tsx b/pkgs/clan-app/ui/src/routes/machines/details.tsx index 9dc20b6c2..97bc7f217 100644 --- a/pkgs/clan-app/ui/src/routes/machines/details.tsx +++ b/pkgs/clan-app/ui/src/routes/machines/details.tsx @@ -32,6 +32,7 @@ import { FileSelectorField, } from "@/src/components/fileSelect"; import { useClanContext } from "@/src/contexts/clan"; +import { TagList } from "@/src/components/TagList/TagList"; type MachineFormInterface = MachineData & { sshKey?: File; @@ -77,10 +78,12 @@ const LoadingBar = () => ( function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); } + interface InstallMachineProps { name?: string; machine: MachineData; } + const InstallMachine = (props: InstallMachineProps) => { const { activeClanURI } = useClanContext(); @@ -381,6 +384,7 @@ const InstallMachine = (props: InstallMachineProps) => { interface MachineDetailsProps { initialData: MachineData; } + const MachineForm = (props: MachineDetailsProps) => { const [formStore, { Form, Field }] = // TODO: retrieve the correct initial values from API @@ -595,49 +599,47 @@ const MachineForm = (props: MachineDetailsProps) => { {(field, props) => ( -
- +
+ Tags{" "} - - {(tag) => ( - - - {tag} - - - )} - +
+ {/* alphabetically sort the tags */} + +
)} -
- - {(field, props) => ( - Hardware Configuration} - field={{field.value || "None"}} - /> - )} - -
- - {(field, props) => ( - <> + +
+ + {(field, props) => ( Disk schema} + label={Hardware Configuration} field={{field.value || "None"}} /> - - )} - -
+ )} + +
+ + {(field, props) => ( + <> + Disk schema} + field={{field.value || "None"}} + /> + + )} + +
+
From fc98df01be6effeb859b558c55f6ba7319014a6b Mon Sep 17 00:00:00 2001 From: Johannes Kirschbauer Date: Tue, 3 Jun 2025 19:09:43 +0200 Subject: [PATCH 2/2] Chore(ui/taglist): snapshot test --- .../__snapshots__/TagList.stories.tsx.snap | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 pkgs/clan-app/ui/src/components/TagList/__snapshots__/TagList.stories.tsx.snap diff --git a/pkgs/clan-app/ui/src/components/TagList/__snapshots__/TagList.stories.tsx.snap b/pkgs/clan-app/ui/src/components/TagList/__snapshots__/TagList.stories.tsx.snap new file mode 100644 index 000000000..7ac0b3f35 --- /dev/null +++ b/pkgs/clan-app/ui/src/components/TagList/__snapshots__/TagList.stories.tsx.snap @@ -0,0 +1,32 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Components/TagList Default smoke-test 1`] = ` +
+
+ + Titan + + + Enceladus + + + Mimas + + + Dione + + + Iapetus + + + Tethys + + + Hyperion + + + Epimetheus + +
+
+`;