@alepha/ui 0.16.1 → 0.17.0

package/src/admin/components/parameters/AdminParameters.tsx

@@ -1,61 +1,115 @@
-import { Flex, Text } from "@alepha/ui";
-import { Loader, Stack } from "@mantine/core";
+import { Text, useToast } from "@alepha/ui";
+import { Card, Flex } from "@mantine/core";
 import { IconSettings } from "@tabler/icons-react";
 import type {
-  AdminConfigController,
-  ConfigTreeNode,
+  AdminParameterController,
   Parameter,
+  ParameterTreeNode,
 } from "alepha/api/parameters";
 import { useClient } from "alepha/react";
 import { useCallback, useEffect, useState } from "react";
 import ParameterDetails from "./ParameterDetails.tsx";
+import ParameterEmptyState from "./ParameterEmptyState.tsx";
 import ParameterHistory from "./ParameterHistory.tsx";
 import ParameterTree from "./ParameterTree.tsx";
-import type { ConfigValue } from "./types.ts";
+import type { ParameterValue } from "./types.ts";
 
-const AdminParameters = () => {
-  const client = useClient<AdminConfigController>();
+export interface AdminParametersProps {
+  treeData: ParameterTreeNode[];
+}
+
+const AdminParameters = ({
+  treeData: initialTreeData,
+}: AdminParametersProps) => {
+  const client = useClient<AdminParameterController>();
+  const toast = useToast();
 
   // State
-  const [treeData, setTreeData] = useState<ConfigTreeNode[]>([]);
+  const [treeData, setTreeData] =
+    useState<ParameterTreeNode[]>(initialTreeData);
   const [selectedConfig, setSelectedConfig] = useState<string | null>(null);
-  const [configValue, setConfigValue] = useState<ConfigValue | null>(null);
+  const [configValue, setConfigValue] = useState<ParameterValue | null>(null);
   const [history, setHistory] = useState<Parameter[]>([]);
-  const [loading, setLoading] = useState(true);
   const [loadingConfig, setLoadingConfig] = useState(false);
   const [loadingHistory, setLoadingHistory] = useState(false);
+  const [saving, setSaving] = useState(false);
 
-  // Load tree data
-  const loadTree = useCallback(async () => {
+  // Refresh tree data
+  const handleRefresh = useCallback(async () => {
     try {
-      const tree = await client.getConfigTree({});
-      setTreeData(tree as ConfigTreeNode[]);
-    } finally {
-      setLoading(false);
+      const tree = await client.getParameterTree({});
+      setTreeData(tree as ParameterTreeNode[]);
+    } catch (error) {
+      toast.danger({
+        title: "Failed to refresh parameters",
+        message: error instanceof Error ? error.message : "Unknown error",
+      });
     }
-  }, []);
+  }, [client, toast]);
 
   // Load config value and history when selection changes
-  const loadConfigDetails = useCallback(async (name: string) => {
-    setLoadingConfig(true);
-    setLoadingHistory(true);
-
-    try {
-      const [current] = await Promise.all([
-        client.getCurrent({ params: { name } }),
-      ]);
-      setConfigValue(current);
-      setHistory([]);
-    } finally {
-      setLoadingConfig(false);
-      setLoadingHistory(false);
-    }
-  }, []);
+  const loadConfigDetails = useCallback(
+    async (name: string) => {
+      setLoadingConfig(true);
+      setLoadingHistory(true);
+
+      try {
+        const [currentResponse, historyResponse] = await Promise.all([
+          client.getCurrent({ params: { name } }),
+          client.getHistory({ params: { name } }),
+        ]);
+        setConfigValue(currentResponse);
+        setHistory(historyResponse.versions);
+      } catch (error) {
+        toast.danger({
+          title: "Failed to load configuration",
+          message: error instanceof Error ? error.message : "Unknown error",
+        });
+        setConfigValue(null);
+        setHistory([]);
+      } finally {
+        setLoadingConfig(false);
+        setLoadingHistory(false);
+      }
+    },
+    [client, toast],
+  );
 
-  // Initial load
-  useEffect(() => {
-    loadTree();
-  }, [loadTree]);
+  // Handle save
+  const handleSave = useCallback(
+    async (values: Record<string, unknown>) => {
+      if (!selectedConfig || !configValue) return;
+
+      setSaving(true);
+      try {
+        await client.createVersion({
+          params: { name: selectedConfig },
+          body: {
+            content: values,
+            schemaHash: "", // Schema hash is computed server-side when empty
+            changeDescription: "Updated via admin UI",
+          },
+        });
+
+        toast.success({
+          title: "Configuration saved",
+          message: `${selectedConfig} has been updated`,
+        });
+
+        // Reload details
+        await loadConfigDetails(selectedConfig);
+      } catch (error) {
+        toast.danger({
+          title: "Failed to save configuration",
+          message: error instanceof Error ? error.message : "Unknown error",
+        });
+        throw error;
+      } finally {
+        setSaving(false);
+      }
+    },
+    [client, selectedConfig, configValue, loadConfigDetails, toast],
+  );
 
   // Load details when selection changes
   useEffect(() => {
@@ -68,31 +122,38 @@ const AdminParameters = () => {
   }, [selectedConfig, loadConfigDetails]);
 
   // Handle rollback
-  const handleRollback = async (version: number) => {
-    if (!selectedConfig) return;
-
-    await client.rollback({
-      params: { name: selectedConfig },
-      body: { targetVersion: version },
-    });
-
-    // Reload details
-    await loadConfigDetails(selectedConfig);
-  };
-
-  if (loading) {
-    return (
-      <Flex flex={1} justify="center" align="center">
-        <Loader />
-      </Flex>
-    );
-  }
+  const handleRollback = useCallback(
+    async (version: number) => {
+      if (!selectedConfig) return;
+
+      try {
+        await client.rollback({
+          params: { name: selectedConfig },
+          body: { targetVersion: version },
+        });
+
+        toast.success({
+          title: "Rollback successful",
+          message: `${selectedConfig} rolled back to version ${version}`,
+        });
+
+        // Reload details
+        await loadConfigDetails(selectedConfig);
+      } catch (error) {
+        toast.danger({
+          title: "Rollback failed",
+          message: error instanceof Error ? error.message : "Unknown error",
+        });
+      }
+    },
+    [client, selectedConfig, loadConfigDetails, toast],
+  );
 
   // Empty state when no configs exist
   if (treeData.length === 0) {
     return (
       <Flex flex={1} justify="center" align="center">
-        <Stack align="center" gap="xs">
+        <Flex direction="column" align="center" gap="xs">
           <IconSettings
             size={48}
             stroke={1.5}
@@ -100,35 +161,52 @@ const AdminParameters = () => {
           />
           <Text c="dimmed">No Parameters Found</Text>
           <Text size="xs" c="dimmed" ta="center" maw={400}>
-            Define parameters using the $config primitive to manage dynamic
+            Define parameters using the $parameter primitive to manage dynamic
             application settings. Parameters will appear here once created.
           </Text>
-        </Stack>
+        </Flex>
       </Flex>
     );
   }
 
   return (
-    <Flex flex={1} gap={"xs"} h="100%">
-      <ParameterTree
-        treeData={treeData}
-        selectedConfig={selectedConfig}
-        onSelect={setSelectedConfig}
-        onRefresh={loadTree}
-      />
-
-      <ParameterDetails
-        selectedConfig={selectedConfig}
-        configValue={configValue}
-        loading={loadingConfig}
-      />
-
-      <ParameterHistory
-        selectedConfig={selectedConfig}
-        history={history}
-        loading={loadingHistory}
-        onRollback={handleRollback}
-      />
+    <Flex flex={1} p="md">
+      <Card
+        withBorder
+        p={0}
+        w={"100%"}
+        style={{
+          flexDirection: "row",
+        }}
+      >
+        <ParameterTree
+          treeData={treeData}
+          selectedConfig={selectedConfig}
+          onSelect={setSelectedConfig}
+          onRefresh={handleRefresh}
+        />
+
+        {selectedConfig ? (
+          <>
+            <ParameterDetails
+              selectedConfig={selectedConfig}
+              configValue={configValue}
+              loading={loadingConfig}
+              saving={saving}
+              onSave={handleSave}
+            />
+
+            <ParameterHistory
+              selectedConfig={selectedConfig}
+              history={history}
+              loading={loadingHistory}
+              onRollback={handleRollback}
+            />
+          </>
+        ) : (
+          <ParameterEmptyState />
+        )}
+      </Card>
     </Flex>
   );
 };

package/src/admin/components/parameters/ParameterDetails.tsx

@@ -1,32 +1,56 @@
-import { Flex, Text, TypeForm } from "@alepha/ui";
-import {
-  Badge,
-  Box,
-  Card,
-  Code,
-  Group,
-  Loader,
-  ScrollArea,
-  Stack,
-} from "@mantine/core";
-import { IconClock, IconSettings } from "@tabler/icons-react";
-import { jsonSchemaToTypeBox, type TObject } from "alepha";
+import { ActionButton, Flex, Text, TypeForm } from "@alepha/ui";
+import { Card, Code, Loader } from "@mantine/core";
+import { IconClock } from "@tabler/icons-react";
+import { jsonSchemaToTypeBox, type TObject, t } from "alepha";
 import { useForm } from "alepha/react/form";
 import { useI18n } from "alepha/react/i18n";
 import { useMemo } from "react";
-import { type ConfigValue, formatJson } from "./types.ts";
+import { formatJson, type ParameterValue } from "./types.ts";
 
 export interface ParameterDetailsProps {
   selectedConfig: string | null;
-  configValue: ConfigValue | null;
+  configValue: ParameterValue | null;
   loading: boolean;
+  saving: boolean;
+  onSave: (values: Record<string, unknown>) => Promise<void>;
 }
 
-const ParameterDetails = ({
+/**
+ * Loading state.
+ */
+const LoadingState = () => (
+  <Flex
+    flex={1}
+    h="100%"
+    p="md"
+    style={{
+      overflow: "hidden",
+      minWidth: 0,
+      display: "flex",
+    }}
+  >
+    <Flex flex={1} justify="center" align="center" h="100%">
+      <Loader size="sm" />
+    </Flex>
+  </Flex>
+);
+
+interface ConfigFormProps {
+  selectedConfig: string;
+  configValue: ParameterValue | null;
+  saving: boolean;
+  onSave: (values: Record<string, unknown>) => Promise<void>;
+}
+
+/**
+ * The actual form component - only rendered when a config is selected.
+ */
+const ConfigForm = ({
   selectedConfig,
   configValue,
-  loading,
-}: ParameterDetailsProps) => {
+  saving,
+  onSave,
+}: ConfigFormProps) => {
   const { l } = useI18n();
 
   // Get the current value to display (from saved version or default)
@@ -43,17 +67,21 @@ const ParameterDetails = ({
   // Convert JSON Schema from API to TypeBox schema
   const schemaForForm = useMemo(() => {
     if (!configValue?.schema) {
-      return { type: "object", properties: {} } as unknown as TObject;
+      return t.object({});
+    }
+    try {
+      return jsonSchemaToTypeBox(configValue.schema) as TObject;
+    } catch {
+      return t.object({});
     }
-    return jsonSchemaToTypeBox(configValue.schema) as TObject;
   }, [configValue?.schema]);
 
   const form = useForm(
     {
       schema: schemaForForm,
       initialValues: (currentContent ?? {}) as Record<string, unknown>,
-      handler: async () => {
-        // Read-only for now
+      handler: async (values) => {
+        await onSave(values as Record<string, unknown>);
       },
     },
     [selectedConfig, schemaForForm, currentContent],
@@ -66,117 +94,101 @@ const ParameterDetails = ({
       schema &&
       typeof schema === "object" &&
       "properties" in schema &&
-      Object.keys(schema.properties ?? {}).length > 0
+      Object.keys(schema.properties as object).length > 0
     );
   }, [configValue?.schema]);
 
-  if (!selectedConfig) {
-    return (
-      <Card withBorder flex={1} h="100%" style={{ overflow: "hidden" }}>
-        <Flex flex={1} justify="center" align="center" h="100%">
-          <Stack align="center" gap="xs">
-            <IconSettings
-              size={32}
-              stroke={1.5}
-              color="var(--mantine-color-dimmed)"
-            />
-            <Text c="dimmed" size="sm">
-              Select a parameter to view its value
-            </Text>
-          </Stack>
-        </Flex>
-      </Card>
-    );
-  }
+  // Count the number of fields to determine column layout
+  const fieldCount = useMemo(() => {
+    const schema = configValue?.schema;
+    if (
+      schema &&
+      typeof schema === "object" &&
+      "properties" in schema &&
+      schema.properties
+    ) {
+      return Object.keys(schema.properties as object).length;
+    }
+    return 0;
+  }, [configValue?.schema]);
 
-  if (loading) {
-    return (
-      <Card withBorder flex={1} h="100%" style={{ overflow: "hidden" }}>
-        <Flex flex={1} justify="center" align="center" h="100%">
-          <Loader size="sm" />
-        </Flex>
-      </Card>
-    );
-  }
+  // Determine optimal column count based on field count
+  const columns = useMemo(() => {
+    if (fieldCount <= 2) return 1;
+    if (fieldCount <= 6) return 2;
+    return 3;
+  }, [fieldCount]);
 
   return (
-    <Card withBorder flex={1} h="100%" style={{ overflow: "hidden" }}>
-      <Stack gap="md" h="100%">
-        <Group justify="space-between">
-          <Stack gap={2}>
-            <Text size="sm" fw={500}>
-              {selectedConfig}
-            </Text>
-            {configValue?.current && (
-              <Group gap="xs">
-                <Badge size="xs" color="green" variant="light">
-                  v{configValue.current.version}
-                </Badge>
-                {configValue.next && (
-                  <Badge size="xs" color="blue" variant="light">
-                    Next: v{configValue.next.version}
-                  </Badge>
-                )}
-              </Group>
-            )}
-            {!configValue?.current &&
-              configValue?.currentValue !== undefined && (
-                <Badge size="xs" color="yellow" variant="light">
-                  Default
-                </Badge>
-              )}
-          </Stack>
-        </Group>
-
-        <ScrollArea flex={1} offsetScrollbars>
+    <Flex
+      flex={1}
+      h="100%"
+      style={{
+        overflow: "hidden",
+        minWidth: 0,
+        display: "flex",
+      }}
+    >
+      <Flex direction="column" h="100%" w="100%" style={{ minHeight: 0 }}>
+        {/* Content */}
+        <Flex
+          flex={1}
+          p="md"
+          className="overflow-auto"
+          style={{ minHeight: 0 }}
+        >
           {currentContent !== null ? (
-            <Stack gap="md">
-              <Box>
-                <Text size="xs" c="dimmed" mb={4}>
-                  Current Value
-                </Text>
+            <Flex direction="column" gap="lg">
+              {/* Form or JSON view */}
+              <Flex>
                 {hasValidSchema ? (
                   <TypeForm
                     form={form}
-                    columns={1}
+                    columns={columns}
                     skipSubmitButton
-                    skipFormElement
+                    fill={false}
                   />
                 ) : (
-                  <Code block style={{ whiteSpace: "pre-wrap" }}>
-                    {formatJson(currentContent)}
-                  </Code>
+                  <Flex>
+                    <Text size="xs" c="dimmed" mb={4}>
+                      Current Value
+                    </Text>
+                    <Code block style={{ whiteSpace: "pre-wrap" }}>
+                      {formatJson(currentContent)}
+                    </Code>
+                  </Flex>
                 )}
-              </Box>
+              </Flex>
 
+              {/* Metadata */}
               {configValue?.current?.changeDescription && (
-                <Box>
+                <Flex>
                   <Text size="xs" c="dimmed" mb={4}>
                     Change Description
                   </Text>
                   <Text size="sm">{configValue.current.changeDescription}</Text>
-                </Box>
+                </Flex>
               )}
 
               {configValue?.current && (
-                <Group gap="xl">
-                  <Box>
+                <Flex gap="xl">
+                  <Flex>
                     <Text size="xs" c="dimmed" mb={2}>
                       Updated
                     </Text>
                     <Text size="sm">
                       {l(configValue.current.updatedAt, { date: "fromNow" })}
                     </Text>
-                  </Box>
+                  </Flex>
                   {configValue.current.creatorName && (
-                    <Box>
+                    <Flex>
                       <Text size="xs" c="dimmed" mb={2}>
                         Updated By
                       </Text>
                       <Text size="sm">{configValue.current.creatorName}</Text>
-                    </Box>
+                    </Flex>
                   )}
-                </Group>
+                </Flex>
               )}
 
               {!configValue?.current &&
@@ -187,18 +199,19 @@ const ParameterDetails = ({
                   </Text>
                 )}
 
+              {/* Scheduled update preview */}
               {configValue?.next && (
-                <Card withBorder bg="blue.0" p="sm">
-                  <Stack gap="xs">
-                    <Group gap="xs">
+                <Card withBorder p="sm" bg="var(--mantine-color-blue-light)">
+                  <Flex direction="column" gap="xs">
+                    <Flex gap="xs">
                       <IconClock
                         size={14}
                         color="var(--mantine-color-blue-6)"
                       />
-                      <Text size="xs" fw={500} c="blue.7">
+                      <Text size="xs" fw={500} c="blue">
                         Scheduled Update (v{configValue.next.version})
                       </Text>
-                    </Group>
+                    </Flex>
                     <Text size="xs" c="dimmed">
                       Activates{" "}
                       {l(configValue.next.activationDate, {
@@ -208,10 +221,10 @@ const ParameterDetails = ({
                     <Code block style={{ whiteSpace: "pre-wrap" }} fz="xs">
                       {formatJson(configValue.next.content)}
                     </Code>
-                  </Stack>
+                  </Flex>
                 </Card>
               )}
-            </Stack>
+            </Flex>
           ) : (
             <Flex justify="center" align="center" h={200}>
               <Text c="dimmed" size="sm">
@@ -219,9 +232,61 @@ const ParameterDetails = ({
               </Text>
             </Flex>
           )}
-        </ScrollArea>
-      </Stack>
-    </Card>
+        </Flex>
+
+        {/* Footer with actions */}
+        {hasValidSchema && currentContent !== null && (
+          <Flex
+            p="md"
+            style={{
+              flexShrink: 0,
+              borderTop: "1px solid var(--mantine-color-default-border)",
+            }}
+          >
+            <Flex justify="flex-end" gap="sm">
+              <ActionButton
+                variant="subtle"
+                onClick={() => form.reset({} as any)}
+                disabled={saving}
+              >
+                Reset
+              </ActionButton>
+              <ActionButton intent="primary" form={form} loading={saving}>
+                Save Changes
+              </ActionButton>
+            </Flex>
+          </Flex>
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+/**
+ * Parameter details panel.
+ * Shows loading state or the config form.
+ * Note: Empty state is handled by parent (AdminParameters).
+ */
+const ParameterDetails = ({
+  selectedConfig,
+  configValue,
+  loading,
+  saving,
+  onSave,
+}: ParameterDetailsProps) => {
+  // Loading state
+  if (loading) {
+    return <LoadingState />;
+  }
+
+  // Config form (selectedConfig is guaranteed to be non-null by parent)
+  return (
+    <ConfigForm
+      selectedConfig={selectedConfig!}
+      configValue={configValue}
+      saving={saving}
+      onSave={onSave}
+    />
   );
 };