From 431e45cc3a1e88cc6d789a05b6e57f16b94ac7d1 Mon Sep 17 00:00:00 2001 From: Brian McGee Date: Fri, 22 Aug 2025 15:58:14 +0100 Subject: [PATCH 1/2] feat(ui): support editing basic metadata for a Clan --- .../ui/src/components/Modal/Modal.tsx | 81 +++++---- .../src/components/Sidebar/SidebarHeader.tsx | 31 ++-- pkgs/clan-app/ui/src/hooks/queries.ts | 84 ++++++--- .../ClanSettingsModal.module.css | 7 + .../ClanSettingsModal.stories.tsx | 38 ++++ .../ClanSettingsModal/ClanSettingsModal.tsx | 170 ++++++++++++++++++ .../modals/ListClansModal/ListClansModal.tsx | 4 +- pkgs/clan-app/ui/src/routes/Clan/Clan.tsx | 18 +- pkgs/clan-cli/clan_lib/clan/get.py | 31 ++++ 9 files changed, 388 insertions(+), 76 deletions(-) create mode 100644 pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.module.css create mode 100644 pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.stories.tsx create mode 100644 pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.tsx diff --git a/pkgs/clan-app/ui/src/components/Modal/Modal.tsx b/pkgs/clan-app/ui/src/components/Modal/Modal.tsx index e69089fb1..12c54a133 100644 --- a/pkgs/clan-app/ui/src/components/Modal/Modal.tsx +++ b/pkgs/clan-app/ui/src/components/Modal/Modal.tsx @@ -5,6 +5,7 @@ import { createContext, createSignal, useContext, + ParentComponent, } from "solid-js"; import { Dialog as KDialog } from "@kobalte/core/dialog"; import styles from "./Modal.module.css"; @@ -27,6 +28,10 @@ export const useModalContext = () => { return context as ModalContextType; }; +const defaultContentWrapper: ParentComponent = (props): JSX.Element => ( + <>{props.children} +); + export interface ModalProps { id?: string; title: string; @@ -35,12 +40,18 @@ export interface ModalProps { mount?: Node; class?: string; metaHeader?: Component; + wrapContent?: ParentComponent; disablePadding?: boolean; open: boolean; } export const Modal = (props: ModalProps) => { const [portalRef, setPortalRef] = createSignal(); + + // allows wrapping the dialog content in a component + // useful with forms where the submit button is in the header + const contentWrapper: Component = props.wrapContent || defaultContentWrapper; + return ( @@ -48,40 +59,48 @@ export const Modal = (props: ModalProps) => {
-
- - {props.title} - - - - - - -
- - {(metaHeader) => ( + {contentWrapper({ + children: ( <> -
- +
+ + {props.title} + + + + + + +
+ + {(metaHeader) => ( + <> +
+ +
+
+ + )} + +
+ + {props.children} +
-
- )} - -
- - {props.children} - -
+ ), + })}
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx index 8d757d1b8..99a287c75 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx @@ -3,20 +3,18 @@ import Icon from "@/src/components/Icon/Icon"; import { DropdownMenu } from "@kobalte/core/dropdown-menu"; import { useNavigate } from "@solidjs/router"; import { Typography } from "../Typography/Typography"; -import { createSignal, For, Suspense, useContext } from "solid-js"; -import { - navigateToClan, - navigateToOnboarding, - useClanURI, -} from "@/src/hooks/clan"; +import { createSignal, For, Show, Suspense, useContext } from "solid-js"; +import { navigateToOnboarding } from "@/src/hooks/clan"; import { setActiveClanURI } from "@/src/stores/clan"; import { Button } from "../Button/Button"; import { ClanContext } from "@/src/routes/Clan/Clan"; +import { ClanSettingsModal } from "@/src/modals/ClanSettingsModal/ClanSettingsModal"; export const SidebarHeader = () => { const navigate = useNavigate(); const [open, setOpen] = createSignal(false); + const [showSettings, setShowSettings] = createSignal(false); // get information about the current active clan const ctx = useContext(ClanContext); @@ -25,20 +23,27 @@ export const SidebarHeader = () => { throw new Error("SidebarContext not found"); } - const clanURI = useClanURI(); - const clanChar = () => - ctx?.activeClanQuery?.data?.name.charAt(0).toUpperCase(); - const clanName = () => ctx?.activeClanQuery?.data?.name; + ctx?.activeClanQuery?.data?.details.name.charAt(0).toUpperCase(); + const clanName = () => ctx?.activeClanQuery?.data?.details.name; const clanList = () => ctx.allClansQueries .filter((it) => it.isSuccess) .map((it) => it.data!) - .sort((a, b) => a.name.localeCompare(b.name)); + .sort((a, b) => a.details.name.localeCompare(b.details.name)); return (
+ + { + ctx?.activeClanQuery?.refetch(); // refresh clan data + setShowSettings(false); + }} + /> + @@ -70,7 +75,7 @@ export const SidebarHeader = () => { navigateToClan(navigate, clanURI)} + onSelect={() => setShowSettings(true)} > { size="xs" weight="medium" > - {clan.name} + {clan.details.name} diff --git a/pkgs/clan-app/ui/src/hooks/queries.ts b/pkgs/clan-app/ui/src/hooks/queries.ts index 97d58cd56..1bcc135b7 100644 --- a/pkgs/clan-app/ui/src/hooks/queries.ts +++ b/pkgs/clan-app/ui/src/hooks/queries.ts @@ -10,8 +10,11 @@ import { useApiClient } from "./ApiClient"; import { experimental_createQueryPersister } from "@tanstack/solid-query-persist-client"; import { ClanDetailsStore } from "@/src/stores/clanDetails"; -export type ClanDetails = SuccessData<"get_clan_details">; -export type ClanDetailsWithURI = ClanDetails & { uri: string }; +export interface ClanDetails { + uri: string; + details: SuccessData<"get_clan_details">; + fieldsSchema: SuccessData<"get_clan_details_schema">; +} export type Tags = SuccessData<"list_tags">; export type Machine = SuccessData<"get_machine">; @@ -29,7 +32,7 @@ export interface MachineDetail { } export type MachinesQueryResult = UseQueryResult; -export type ClanListQueryResult = UseQueryResult[]; +export type ClanListQueryResult = UseQueryResult[]; export const DefaultQueryClient = new QueryClient({ defaultOptions: { @@ -65,7 +68,7 @@ export const useMachineQuery = (clanURI: string, machineName: string) => { return useQuery(() => ({ queryKey: ["clans", encodeBase64(clanURI), "machine", machineName], queryFn: async () => { - const [tagsCall, machineCall, schemaCall] = await Promise.all([ + const [tagsCall, machineCall, schemaCall] = [ client.fetch("list_tags", { flake: { identifier: clanURI, @@ -85,7 +88,7 @@ export const useMachineQuery = (clanURI: string, machineName: string) => { }, }, }), - ]); + ]; const tags = await tagsCall.result; if (tags.status === "error") { @@ -176,26 +179,45 @@ export const ClanDetailsPersister = experimental_createQueryPersister({ export const useClanDetailsQuery = (clanURI: string) => { const client = useApiClient(); - return useQuery(() => ({ + return useQuery(() => ({ queryKey: ["clans", encodeBase64(clanURI), "details"], persister: ClanDetailsPersister.persisterFn, queryFn: async () => { - const call = client.fetch("get_clan_details", { + const args = { flake: { identifier: clanURI, }, - }); - const result = await call.result; + }; - if (result.status === "error") { - // todo should we create some specific error types? - console.error("Error fetching clan details", clanURI, result.errors); - throw new Error(result.errors[0].message); + const [detailsCall, schemaCall] = [ + client.fetch("get_clan_details", args), + client.fetch("get_clan_details_schema", { + flake: { + identifier: clanURI, + }, + }), + ]; + + const details = await detailsCall.result; + + if (details.status === "error") { + throw new Error( + "Error fetching clan details: " + details.errors[0].message, + ); + } + + const schema = await schemaCall.result; + + if (schema.status === "error") { + throw new Error( + "Error fetching clan details schema: " + schema.errors[0].message, + ); } return { uri: clanURI, - ...result.data, + details: details.data!, + fieldsSchema: schema.data, }; }, })); @@ -230,21 +252,41 @@ export const useClanListQuery = ( } } - const call = client.fetch("get_clan_details", { + const args = { flake: { identifier: clanURI, }, - }); - const result = await call.result; + }; - if (result.status === "error") { - // todo should we create some specific error types? - throw new Error(result.errors[0].message); + const [detailsCall, schemaCall] = [ + client.fetch("get_clan_details", args), + client.fetch("get_clan_details_schema", { + flake: { + identifier: clanURI, + }, + }), + ]; + + const details = await detailsCall.result; + + if (details.status === "error") { + throw new Error( + "Error fetching clan details: " + details.errors[0].message, + ); + } + + const schema = await schemaCall.result; + + if (schema.status === "error") { + throw new Error( + "Error fetching clan details schema: " + schema.errors[0].message, + ); } return { uri: clanURI, - ...result.data, + details: details.data, + fieldsSchema: schema.data, }; }, }; diff --git a/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.module.css b/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.module.css new file mode 100644 index 000000000..9f0e4bf27 --- /dev/null +++ b/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.module.css @@ -0,0 +1,7 @@ +.modal { + @apply w-screen max-w-xl h-fit flex flex-col; + + .header { + @apply flex w-full items-center justify-between; + } +} diff --git a/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.stories.tsx b/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.stories.tsx new file mode 100644 index 000000000..f99007ac6 --- /dev/null +++ b/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.stories.tsx @@ -0,0 +1,38 @@ +import { fn } from "storybook/test"; +import type { Meta, StoryObj } from "@kachurun/storybook-solid"; +import { ClanSettingsModal, ClanSettingsModalProps } from "./ClanSettingsModal"; + +const meta: Meta = { + title: "Modals/ClanSettings", + component: ClanSettingsModal, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + onClose: fn(), + model: { + uri: "/home/foo/my-clan", + name: "Sol", + description: null, + icon: null, + fieldsSchema: { + name: { + readonly: true, + reason: null, + }, + description: { + readonly: false, + reason: null, + }, + icon: { + readonly: false, + reason: null, + }, + }, + }, + }, +}; diff --git a/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.tsx b/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.tsx new file mode 100644 index 000000000..9f42120d8 --- /dev/null +++ b/pkgs/clan-app/ui/src/modals/ClanSettingsModal/ClanSettingsModal.tsx @@ -0,0 +1,170 @@ +import cx from "classnames"; +import styles from "./ClanSettingsModal.module.css"; +import { Modal } from "@/src/components/Modal/Modal"; +import { ClanDetails } from "@/src/hooks/queries"; +import * as v from "valibot"; +import { + createForm, + getErrors, + Maybe, + SubmitHandler, + valiForm, +} from "@modular-forms/solid"; +import { TextInput } from "@/src/components/Form/TextInput"; +import { tooltipText } from "@/src/components/Form"; +import { TextArea } from "@/src/components/Form/TextArea"; +import { createSignal, Show, splitProps } from "solid-js"; +import { Fieldset } from "@/src/components/Form/Fieldset"; +import { Divider } from "@/src/components/Divider/Divider"; +import { Typography } from "@/src/components/Typography/Typography"; +import { Button } from "@/src/components/Button/Button"; +import { callApi } from "@/src/hooks/api"; +import { Alert } from "@/src/components/Alert/Alert"; + +const schema = v.object({ + name: v.pipe(v.optional(v.string())), + description: v.nullish(v.string()), + icon: v.pipe(v.nullish(v.string())), +}); + +export interface ClanSettingsModalProps { + model: ClanDetails; + onClose: () => void; +} + +type FieldNames = "name" | "description" | "icon"; +type FormValues = Pick; + +export const ClanSettingsModal = (props: ClanSettingsModalProps) => { + const [saving, setSaving] = createSignal(false); + + const [formStore, { Form, Field }] = createForm({ + initialValues: props.model.details, + validate: valiForm(schema), + }); + + const readOnly = (name: FieldNames) => + props.model.fieldsSchema[name]?.readonly ?? false; + + const handleSubmit: SubmitHandler = async (values, event) => { + if (!formStore.dirty) { + // nothing to save, just close the modal + props.onClose(); + return; + } + + // we only save stuff when the form is dirty + setSaving(true); + + const call = callApi("set_clan_details", { + options: { + flake: { + identifier: props.model.uri, + }, + meta: { + // todo we don't support icon field yet, so we mixin the original fields to stop the API from complaining + // about deleting a field + ...props.model.details, + ...values, + }, + }, + }); + + const result = await call.result; + + setSaving(false); + + if (result.status == "error") { + throw new Error(`Failed to save changes: ${result.errors[0].message}`); + } + + if (result.status == "success") { + props.onClose(); + } + }; + + const errorMessage = (): Maybe => { + const formErrors = getErrors(formStore); + + const firstFormError = Object.values(formErrors).find( + (value) => value, + ) as Maybe; + + return firstFormError || formStore.response.message; + }; + + return ( + ( +
{props.children}
+ )} + metaHeader={() => ( +
+ + {props.model.details.name} + + +
+ )} + > + + + +
+ + {(field, input) => ( + + )} + + + + {(field, input) => ( +