@alepha/ui 0.13.6 → 0.13.7

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

@@ -0,0 +1,137 @@
+import { useClient } from "@alepha/react";
+import { Flex, Text } from "@alepha/ui";
+import { Loader, Stack } from "@mantine/core";
+import { IconSettings } from "@tabler/icons-react";
+import type {
+  ConfigController,
+  ConfigTreeNode,
+  Parameter,
+} from "alepha/api/parameters";
+import { useCallback, useEffect, useState } from "react";
+import ParameterDetails from "./ParameterDetails.tsx";
+import ParameterHistory from "./ParameterHistory.tsx";
+import ParameterTree from "./ParameterTree.tsx";
+import type { ConfigValue } from "./types.ts";
+
+const AdminParameters = () => {
+  const client = useClient<ConfigController>();
+
+  // State
+  const [treeData, setTreeData] = useState<ConfigTreeNode[]>([]);
+  const [selectedConfig, setSelectedConfig] = useState<string | null>(null);
+  const [configValue, setConfigValue] = useState<ConfigValue | null>(null);
+  const [history, setHistory] = useState<Parameter[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingConfig, setLoadingConfig] = useState(false);
+  const [loadingHistory, setLoadingHistory] = useState(false);
+
+  // Load tree data
+  const loadTree = useCallback(async () => {
+    try {
+      const tree = await client.getConfigTree({});
+      setTreeData(tree as ConfigTreeNode[]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // Load config value and history when selection changes
+  const loadConfigDetails = useCallback(async (name: string) => {
+    setLoadingConfig(true);
+    setLoadingHistory(true);
+
+    try {
+      const [current, historyData] = await Promise.all([
+        client.getCurrent({ params: { name } }),
+        client.getHistory({ params: { name } }),
+      ]);
+      setConfigValue(current);
+      setHistory(historyData.versions);
+    } finally {
+      setLoadingConfig(false);
+      setLoadingHistory(false);
+    }
+  }, []);
+
+  // Initial load
+  useEffect(() => {
+    loadTree();
+  }, [loadTree]);
+
+  // Load details when selection changes
+  useEffect(() => {
+    if (selectedConfig) {
+      loadConfigDetails(selectedConfig);
+    } else {
+      setConfigValue(null);
+      setHistory([]);
+    }
+  }, [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>
+    );
+  }
+
+  // Empty state when no configs exist
+  if (treeData.length === 0) {
+    return (
+      <Flex flex={1} justify="center" align="center">
+        <Stack align="center" gap="xs">
+          <IconSettings
+            size={48}
+            stroke={1.5}
+            color="var(--mantine-color-dimmed)"
+          />
+          <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
+            application settings. Parameters will appear here once created.
+          </Text>
+        </Stack>
+      </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>
+  );
+};
+
+export default AdminParameters;

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

@@ -0,0 +1,228 @@
+import { useForm } from "@alepha/react/form";
+import { useI18n } from "@alepha/react/i18n";
+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 { useMemo } from "react";
+import { type ConfigValue, formatJson } from "./types.ts";
+
+export interface ParameterDetailsProps {
+  selectedConfig: string | null;
+  configValue: ConfigValue | null;
+  loading: boolean;
+}
+
+const ParameterDetails = ({
+  selectedConfig,
+  configValue,
+  loading,
+}: ParameterDetailsProps) => {
+  const { l } = useI18n();
+
+  // Get the current value to display (from saved version or default)
+  const currentContent = useMemo(() => {
+    if (configValue?.current?.content) {
+      return configValue.current.content;
+    }
+    if (configValue?.currentValue !== undefined) {
+      return configValue.currentValue;
+    }
+    return null;
+  }, [configValue]);
+
+  // Convert JSON Schema from API to TypeBox schema
+  const schemaForForm = useMemo(() => {
+    if (!configValue?.schema) {
+      return { type: "object", properties: {} } as unknown as TObject;
+    }
+    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
+      },
+    },
+    [selectedConfig, schemaForForm, currentContent],
+  );
+
+  // Check if we have a valid schema with properties
+  const hasValidSchema = useMemo(() => {
+    const schema = configValue?.schema;
+    return (
+      schema &&
+      typeof schema === "object" &&
+      "properties" in schema &&
+      Object.keys(schema.properties ?? {}).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>
+    );
+  }
+
+  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>
+    );
+  }
+
+  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>
+          {currentContent !== null ? (
+            <Stack gap="md">
+              <Box>
+                <Text size="xs" c="dimmed" mb={4}>
+                  Current Value
+                </Text>
+                {hasValidSchema ? (
+                  <TypeForm
+                    form={form}
+                    columns={1}
+                    skipSubmitButton
+                    skipFormElement
+                  />
+                ) : (
+                  <Code block style={{ whiteSpace: "pre-wrap" }}>
+                    {formatJson(currentContent)}
+                  </Code>
+                )}
+              </Box>
+
+              {configValue?.current?.changeDescription && (
+                <Box>
+                  <Text size="xs" c="dimmed" mb={4}>
+                    Change Description
+                  </Text>
+                  <Text size="sm">{configValue.current.changeDescription}</Text>
+                </Box>
+              )}
+
+              {configValue?.current && (
+                <Group gap="xl">
+                  <Box>
+                    <Text size="xs" c="dimmed" mb={2}>
+                      Updated
+                    </Text>
+                    <Text size="sm">
+                      {l(configValue.current.updatedAt, { date: "fromNow" })}
+                    </Text>
+                  </Box>
+                  {configValue.current.creatorName && (
+                    <Box>
+                      <Text size="xs" c="dimmed" mb={2}>
+                        Updated By
+                      </Text>
+                      <Text size="sm">{configValue.current.creatorName}</Text>
+                    </Box>
+                  )}
+                </Group>
+              )}
+
+              {!configValue?.current &&
+                configValue?.currentValue !== undefined && (
+                  <Text size="xs" c="dimmed">
+                    This configuration is using its default value. No versions
+                    have been saved to the database yet.
+                  </Text>
+                )}
+
+              {configValue?.next && (
+                <Card withBorder bg="blue.0" p="sm">
+                  <Stack gap="xs">
+                    <Group gap="xs">
+                      <IconClock
+                        size={14}
+                        color="var(--mantine-color-blue-6)"
+                      />
+                      <Text size="xs" fw={500} c="blue.7">
+                        Scheduled Update (v{configValue.next.version})
+                      </Text>
+                    </Group>
+                    <Text size="xs" c="dimmed">
+                      Activates{" "}
+                      {l(configValue.next.activationDate, {
+                        date: "fromNow",
+                      })}
+                    </Text>
+                    <Code block style={{ whiteSpace: "pre-wrap" }} fz="xs">
+                      {formatJson(configValue.next.content)}
+                    </Code>
+                  </Stack>
+                </Card>
+              )}
+            </Stack>
+          ) : (
+            <Flex justify="center" align="center" h={200}>
+              <Text c="dimmed" size="sm">
+                No current value
+              </Text>
+            </Flex>
+          )}
+        </ScrollArea>
+      </Stack>
+    </Card>
+  );
+};
+
+export default ParameterDetails;

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

@@ -0,0 +1,146 @@
+import { useI18n } from "@alepha/react/i18n";
+import { ActionButton, Flex, Text } from "@alepha/ui";
+import {
+  Badge,
+  Card,
+  Group,
+  Loader,
+  ScrollArea,
+  Stack,
+  Timeline,
+} from "@mantine/core";
+import { IconHistory } from "@tabler/icons-react";
+import type { Parameter } from "alepha/api/parameters";
+import { getStatusColor } from "./types.ts";
+
+export interface ParameterHistoryProps {
+  selectedConfig: string | null;
+  history: Parameter[];
+  loading: boolean;
+  onRollback: (version: number) => void;
+}
+
+const ParameterHistory = ({
+  selectedConfig,
+  history,
+  loading,
+  onRollback,
+}: ParameterHistoryProps) => {
+  const { l } = useI18n();
+
+  const renderContent = () => {
+    if (!selectedConfig) {
+      return (
+        <Flex flex={1} justify="center" align="center">
+          <Text c="dimmed" size="xs">
+            Select a parameter
+          </Text>
+        </Flex>
+      );
+    }
+
+    if (loading) {
+      return (
+        <Flex flex={1} justify="center" align="center">
+          <Loader size="sm" />
+        </Flex>
+      );
+    }
+
+    if (history.length === 0) {
+      return (
+        <Flex flex={1} justify="center" align="center">
+          <Text c="dimmed" size="xs">
+            No history
+          </Text>
+        </Flex>
+      );
+    }
+
+    return (
+      <ScrollArea flex={1} offsetScrollbars>
+        <Timeline
+          active={history.findIndex((h) => h.status === "current")}
+          bulletSize={24}
+          lineWidth={2}
+        >
+          {history.map((version) => (
+            <Timeline.Item
+              key={version.id}
+              bullet={
+                <Text size="xs" fw={500}>
+                  {version.version}
+                </Text>
+              }
+              title={
+                <Group gap="xs">
+                  <Text size="xs" fw={500}>
+                    Version {version.version}
+                  </Text>
+                  <Badge
+                    size="xs"
+                    variant="light"
+                    color={getStatusColor(version.status)}
+                  >
+                    {version.status}
+                  </Badge>
+                </Group>
+              }
+            >
+              <Stack gap={4} mt={4}>
+                <Text size="xs" c="dimmed">
+                  {l(version.createdAt, { date: "fromNow" })}
+                </Text>
+                {version.changeDescription && (
+                  <Text size="xs" lineClamp={2}>
+                    {version.changeDescription}
+                  </Text>
+                )}
+                {version.creatorName && (
+                  <Text size="xs" c="dimmed">
+                    by {version.creatorName}
+                  </Text>
+                )}
+                {version.migrationLog && (
+                  <Badge size="xs" variant="outline" color="orange">
+                    Schema Changed
+                  </Badge>
+                )}
+                {version.status === "expired" && (
+                  <ActionButton
+                    size="compact-xs"
+                    variant="subtle"
+                    onClick={() => onRollback(version.version)}
+                  >
+                    Rollback to this version
+                  </ActionButton>
+                )}
+              </Stack>
+            </Timeline.Item>
+          ))}
+        </Timeline>
+      </ScrollArea>
+    );
+  };
+
+  return (
+    <Card
+      withBorder
+      w={300}
+      h="100%"
+      style={{ flexShrink: 0, overflow: "hidden" }}
+    >
+      <Stack gap="xs" h="100%">
+        <Group gap="xs">
+          <IconHistory size={16} color="var(--mantine-color-dimmed)" />
+          <Text size="sm" fw={500}>
+            Version History
+          </Text>
+        </Group>
+        {renderContent()}
+      </Stack>
+    </Card>
+  );
+};
+
+export default ParameterHistory;

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

@@ -0,0 +1,146 @@
+import { ActionButton, Text } from "@alepha/ui";
+import {
+  Box,
+  Card,
+  Group,
+  ScrollArea,
+  Stack,
+  Tooltip,
+  Tree,
+  type TreeNodeData,
+  useTree,
+} from "@mantine/core";
+import {
+  IconChevronDown,
+  IconChevronRight,
+  IconFolder,
+  IconFolderOpen,
+  IconRefresh,
+  IconSettings,
+} from "@tabler/icons-react";
+import type { ConfigTreeNode } from "alepha/api/parameters";
+import { type HTMLAttributes, useMemo } from "react";
+
+export interface ParameterTreeProps {
+  treeData: ConfigTreeNode[];
+  selectedConfig: string | null;
+  onSelect: (name: string) => void;
+  onRefresh: () => void;
+}
+
+const ParameterTree = ({
+  treeData,
+  selectedConfig,
+  onSelect,
+  onRefresh,
+}: ParameterTreeProps) => {
+  const tree = useTree({
+    initialExpandedState: {},
+  });
+
+  const mantineTreeData = useMemo((): TreeNodeData[] => {
+    const convert = (nodes: ConfigTreeNode[]): TreeNodeData[] => {
+      return nodes.map((node) => ({
+        value: node.path,
+        label: node.name,
+        children: node.children.length > 0 ? convert(node.children) : undefined,
+      }));
+    };
+    return convert(treeData);
+  }, [treeData]);
+
+  const renderNode = ({
+    node,
+    expanded,
+    hasChildren,
+    elementProps,
+  }: {
+    node: TreeNodeData;
+    expanded: boolean;
+    hasChildren: boolean;
+    elementProps: HTMLAttributes<HTMLDivElement>;
+  }) => {
+    const isLeaf = !hasChildren;
+    const isSelected = selectedConfig === node.value;
+
+    return (
+      <Group
+        gap="xs"
+        wrap="nowrap"
+        {...elementProps}
+        onClick={(e) => {
+          elementProps.onClick?.(e);
+          if (isLeaf) {
+            onSelect(node.value);
+          }
+        }}
+        style={{
+          ...elementProps.style,
+          cursor: isLeaf ? "pointer" : "default",
+          backgroundColor: isSelected
+            ? "var(--mantine-color-blue-light)"
+            : undefined,
+          borderRadius: "var(--mantine-radius-sm)",
+          paddingTop: 4,
+          paddingBottom: 4,
+          paddingRight: 8,
+        }}
+      >
+        {hasChildren ? (
+          <>
+            {expanded ? (
+              <IconChevronDown size={14} color="var(--mantine-color-dimmed)" />
+            ) : (
+              <IconChevronRight size={14} color="var(--mantine-color-dimmed)" />
+            )}
+            {expanded ? (
+              <IconFolderOpen size={16} color="var(--mantine-color-blue-6)" />
+            ) : (
+              <IconFolder size={16} color="var(--mantine-color-blue-6)" />
+            )}
+          </>
+        ) : (
+          <>
+            <Box w={14} />
+            <IconSettings size={16} color="var(--mantine-color-gray-6)" />
+          </>
+        )}
+        <Text size="sm" fw={isSelected ? 500 : 400}>
+          {node.label}
+        </Text>
+      </Group>
+    );
+  };
+
+  return (
+    <Card withBorder w={280} h="100%" style={{ flexShrink: 0 }}>
+      <Stack gap="xs" h="100%">
+        <Group justify="space-between">
+          <Text size="sm" fw={500}>
+            Parameters
+          </Text>
+          <Tooltip label="Refresh">
+            <ActionButton
+              variant="subtle"
+              size="compact-xs"
+              onClick={onRefresh}
+            >
+              <IconRefresh size={14} />
+            </ActionButton>
+          </Tooltip>
+        </Group>
+        <ScrollArea flex={1} offsetScrollbars>
+          <Tree
+            data={mantineTreeData}
+            tree={tree}
+            levelOffset={20}
+            expandOnClick
+            renderNode={renderNode}
+          />
+        </ScrollArea>
+      </Stack>
+    </Card>
+  );
+};
+
+export default ParameterTree;

package/src/admin/components/parameters/types.ts

@@ -0,0 +1,35 @@
+import type { Parameter } from "alepha/api/parameters";
+
+export interface ConfigValue {
+  current?: Parameter;
+  next?: Parameter;
+  /** Default value from the registered $config primitive */
+  defaultValue?: unknown;
+  /** Current in-memory value (may be default if never saved) */
+  currentValue?: unknown;
+  /** TypeBox/JSON schema for the configuration (as JSON from API) */
+  schema?: Record<string, unknown>;
+}
+
+export const getStatusColor = (status: string) => {
+  switch (status) {
+    case "current":
+      return "green";
+    case "next":
+      return "blue";
+    case "future":
+      return "cyan";
+    case "expired":
+      return "gray";
+    default:
+      return "gray";
+  }
+};
+
+export const formatJson = (obj: unknown): string => {
+  try {
+    return JSON.stringify(obj, null, 2);
+  } catch {
+    return String(obj);
+  }
+};

package/src/admin/components/{AdminSessions.tsx → sessions/AdminSessions.tsx}

@@ -15,7 +15,7 @@ import {
   sessions,
 } from "alepha/api/users";
 import { useState } from "react";
-import type { AdminRouter } from "../AdminRouter.ts";
+import type { AdminRouter } from "../../AdminRouter.ts";
 
 export interface AdminSessionsProps {
   userRealmName?: string;