add some hover descriptions to ui config editor

yusing · Feb 8, 2025 · 64c6096 · 64c6096
1 parent e459047
commit 64c6096
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git a/src/components/config_editor/ui/config_file.tsx b/src/components/config_editor/ui/config_file.tsx
@@ -7,6 +7,7 @@ import {
 } from "@/components/ui/accordion";
 import { Field } from "@/components/ui/field";
 import { Switch } from "@/components/ui/switch";
+import { getSchemaDescription } from "@/types/schema";
 import { Stack } from "@chakra-ui/react";
 import { Autocert, Config, ConfigSchema, Notification } from "godoxy-schemas";
 import React from "react";
@@ -76,6 +77,10 @@ export function ConfigUIEditor({
                 ConfigSchema.properties.entrypoint.properties.access_log
                   .properties,
               )}
+              description={getSchemaDescription(
+                ConfigSchema.properties.entrypoint.properties.access_log
+                  .properties,
+              )}
               value={data.entrypoint?.access_log ?? {}}
               onChange={(v) => {
                 if (!data.entrypoint) data.entrypoint = {};
@@ -143,6 +148,17 @@ export function ConfigUIEditor({
                   style: Notification.NTFY_MSG_STYLES,
                 },
               }}
+              description={{
+                webhook: getSchemaDescription(
+                  ConfigSchema.definitions.WebhookConfig.properties,
+                ),
+                gotify: getSchemaDescription(
+                  ConfigSchema.definitions.GotifyConfig.properties,
+                ),
+                ntfy: getSchemaDescription(
+                  ConfigSchema.definitions.NtfyConfig.properties,
+                ),
+              }}
               //@ts-ignore
               value={data.providers?.notification ?? []}
               onChange={(v) => {

diff --git a/src/components/input.tsx b/src/components/input.tsx
@@ -30,11 +30,20 @@ export const ListInput: React.FC<
     placeholder?: string;
     value: string[];
     required?: boolean;
+    description?: string;
     onChange: (v: string[]) => void;
   } & Omit<React.ComponentProps<typeof Input>, "onChange" | "value">
-> = ({ label, placeholder, value, required = false, onChange, ...rest }) => {
+> = ({
+  label,
+  placeholder,
+  value,
+  required = false,
+  description,
+  onChange,
+  ...rest
+}) => {
   return (
-    <Field label={label} required={required}>
+    <Field label={label} required={required} title={description}>
       <Stack gap="3" w="full">
         {value.map((item, index) => (
           <Group attached key={`${label}_${index}`}>
@@ -84,6 +93,7 @@ export const NamedListInput: React.FC<
     allowedNames?: ReadonlyArray<string>;
     allowedKeys?: { [key: string]: ReadonlyArray<string> };
     allowedValues?: { [key: string]: { [key: string]: ReadonlyArray<string> } };
+    description?: { [key: string]: { [key: string]: string } };
     value: NamedList;
     onChange: (v: NamedList) => void;
   } & Omit<
@@ -99,6 +109,7 @@ export const NamedListInput: React.FC<
   allowedNames,
   allowedKeys,
   allowedValues,
+  description,
   ...rest
 }) => {
   if (!(value instanceof Array)) value = [];
@@ -116,6 +127,7 @@ export const NamedListInput: React.FC<
               allowedNames={allowedNames}
               allowedKeys={allowedKeys?.[item[nameField]!]}
               allowedValues={allowedValues?.[item[nameField]!]}
+              description={description?.[item[nameField]!]}
               onChange={(v) => {
                 value[index] = {
                   ...v,
@@ -163,6 +175,7 @@ export const MapInput: React.FC<
     allowedNames?: ReadonlyArray<string>;
     allowedKeys?: ReadonlyArray<string>;
     allowedValues?: { [key: string]: ReadonlyArray<string> };
+    description?: { [key: string]: string };
     onChange: (v: Record<string, string>) => void;
   } & Omit<
     React.ComponentProps<typeof Input>,
@@ -178,6 +191,7 @@ export const MapInput: React.FC<
   allowedNames,
   allowedKeys,
   allowedValues,
+  description,
   onChange,
   ...rest
 }) => {
@@ -240,6 +254,7 @@ export const MapInput: React.FC<
                 key={`${label}_${index}_list`}
                 label={`${label}.${k}`}
                 value={v}
+                description={description?.[k]}
                 onChange={(e) => {
                   value[k] = e;
                   onChange(value);
@@ -249,6 +264,7 @@ export const MapInput: React.FC<
               <Group
                 attached
                 key={`${label}_${index}_map`}
+                title={description?.[k]}
                 color={
                   allowedKeys && !allowedKeys.includes(k)
                     ? "red.500"

diff --git a/src/types/schema.ts b/src/types/schema.ts
@@ -8,3 +8,14 @@ export type Schema =
   | typeof ConfigSchema
   | typeof RoutesSchema
   | typeof MiddlewareComposeSchema;
+
+export function getSchemaDescription(
+  definitions: Record<string, { description: string } | Record<string, any>>,
+) {
+  return Object.entries(definitions).reduce((acc, [k, v]) => {
+    if ("description" in v) {
+      acc[k] = v.description;
+    }
+    return acc;
+  }, {} as Record<string, string>);
+}