public commit

app/src/ui/routes/settings/components/Setting.tsx

@@ -0,0 +1,358 @@
+import { useHotkeys } from "@mantine/hooks";
+import { type TObject, ucFirst } from "core/utils";
+import { omit } from "lodash-es";
+import { type ReactNode, useMemo, useRef, useState } from "react";
+import { TbSettings } from "react-icons/tb";
+import { useAuth } from "ui";
+import { Link, Route, useLocation } from "wouter";
+import { useBknd } from "../../../client/BkndProvider";
+import { Button } from "../../../components/buttons/Button";
+import { IconButton } from "../../../components/buttons/IconButton";
+import { Empty } from "../../../components/display/Empty";
+import {
+   JsonSchemaForm,
+   type JsonSchemaFormRef
+} from "../../../components/form/json-schema/JsonSchemaForm";
+import { Dropdown } from "../../../components/overlay/Dropdown";
+import { DataTable } from "../../../components/table/DataTable";
+import { useEvent } from "../../../hooks/use-event";
+import * as AppShell from "../../../layouts/AppShell/AppShell";
+import { SectionHeaderTabs } from "../../../layouts/AppShell/AppShell";
+import { Breadcrumbs } from "../../../layouts/AppShell/Breadcrumbs";
+import { extractSchema } from "../utils/schema";
+import { SettingNewModal, type SettingsNewModalProps } from "./SettingNewModal";
+import { SettingSchemaModal, type SettingsSchemaModalRef } from "./SettingSchemaModal";
+
+export type SettingProps<
+   Schema extends TObject = TObject,
+   Props = Schema extends TObject<infer TProperties> ? TProperties : any
+> = {
+   schema: Schema;
+   config: any;
+   prefix?: string;
+   path?: string[];
+   uiSchema?: any;
+   options?: {
+      allowDelete?: (config: any) => boolean;
+      allowEdit?: (config: any) => boolean;
+      showAlert?: (config: any) => string | ReactNode | undefined;
+   };
+   properties?: {
+      [key in keyof Partial<Props>]: {
+         extract?: boolean;
+         hide?: boolean;
+         new?: Pick<SettingsNewModalProps, "schema" | "generateKey" | "uiSchema" | "anyOfValues">;
+         tableValues?: (config: any) => Record<string, any>[];
+      };
+   };
+};
+
+export function Setting<Schema extends TObject = any>({
+   schema,
+   uiSchema,
+   config,
+   prefix = "/",
+   options,
+   path = [],
+   properties
+}: SettingProps<Schema>) {
+   const [submitting, setSubmitting] = useState(false);
+   const { actions } = useBknd();
+   const formRef = useRef<JsonSchemaFormRef>(null);
+   const schemaLocalModalRef = useRef<SettingsSchemaModalRef>(null);
+   const schemaModalRef = useRef<SettingsSchemaModalRef>(null);
+
+   const [editing, setEditing] = useState(false);
+   useHotkeys([
+      [
+         "mod+s",
+         (e) => {
+            e.preventDefault();
+            onSave();
+            return false;
+         }
+      ],
+      [
+         "e",
+         () => {
+            if (!editing) {
+               onToggleEdit();
+            }
+         }
+      ],
+      [
+         "Escape",
+         () => {
+            if (editing) {
+               onToggleEdit();
+            }
+         }
+      ]
+   ]);
+
+   const exclude = useMemo(
+      () =>
+         properties
+            ? Object.entries(properties)
+                 .filter(([, value]) => value.hide || value.extract)
+                 .map(([key]) => key)
+            : [],
+      [properties]
+   );
+
+   const goBack = useEvent((replace?: boolean) => {
+      const backHref = window.location.href.split("/").slice(0, -1).join("/");
+      if (replace) {
+         window.location.replace(backHref);
+      } else {
+         window.history.back();
+      }
+      return;
+   });
+
+   const deleteAllowed = options?.allowDelete?.(config) ?? true;
+   const editAllowed = options?.allowEdit?.(config) ?? true;
+   const showAlert = options?.showAlert?.(config) ?? undefined;
+
+   console.log("--setting", { schema, config, prefix, path, exclude });
+   const [reducedSchema, reducedConfig, extracted] = extractSchema(schema, config, exclude);
+   console.log({ reducedSchema, reducedConfig, extracted });
+
+   const extractedKeys = Object.keys(extracted);
+   const selectedSubKey =
+      extractedKeys.find((key) => window.location.pathname.endsWith(key)) ?? extractedKeys[0];
+
+   const onToggleEdit = useEvent(() => {
+      if (!editAllowed) return;
+
+      setEditing((prev) => !prev);
+      //formRef.current?.cancel();
+   });
+
+   const onSave = useEvent(async () => {
+      if (!editAllowed || !editing) return;
+
+      if (formRef.current?.validateForm()) {
+         setSubmitting(true);
+         const data = formRef.current?.formData();
+         const [module, ...restOfPath] = path;
+         let success: boolean;
+
+         console.log("save:data", { module, restOfPath }, data);
+         if (restOfPath.length > 0) {
+            // patch
+            console.log("-> patch", { module, path: restOfPath.join(".") }, data);
+            success = await actions.patch(module as any, restOfPath.join("."), data);
+         } else {
+            // set
+            console.log("-> set", { module }, data);
+            success = await actions.set(module as any, data, true);
+         }
+
+         console.log("save:success", success);
+         if (success) {
+            //window.location.reload();
+         } else {
+            setSubmitting(false);
+         }
+      }
+   });
+
+   const handleDelete = useEvent(async () => {
+      if (!deleteAllowed) return;
+
+      const [module, ...restOfPath] = path;
+
+      if (window.confirm(`Are you sure you want to delete ${path.join(".")}`)) {
+         if (await actions.remove(module as any, restOfPath.join("."))) {
+            goBack(true);
+         }
+      }
+   });
+
+   if (!config) {
+      return (
+         <Empty
+            title="Not found"
+            description={`Configuration at path ${path.join(".")} doesn't exist.`}
+            buttonText="Go back"
+         />
+      );
+   }
+
+   return (
+      <>
+         <AppShell.SectionHeader
+            className={path.length > 1 ? "pl-3" : ""}
+            scrollable
+            right={
+               <>
+                  <Dropdown
+                     items={[
+                        {
+                           label: "Inspect local schema",
+                           onClick: () => {
+                              schemaLocalModalRef.current?.open();
+                           }
+                        },
+                        {
+                           label: "Inspect schema",
+                           onClick: () => {
+                              schemaModalRef.current?.open();
+                           }
+                        },
+                        deleteAllowed && {
+                           label: "Delete",
+                           destructive: true,
+                           onClick: handleDelete
+                        }
+                     ]}
+                     position="bottom-end"
+                  >
+                     <IconButton Icon={TbSettings} />
+                  </Dropdown>
+                  <Button onClick={onToggleEdit} disabled={!editAllowed}>
+                     {editing ? "Cancel" : "Edit"}
+                  </Button>
+                  {editing && (
+                     <Button
+                        variant="primary"
+                        onClick={onSave}
+                        disabled={submitting || !editAllowed}
+                     >
+                        {submitting ? "Save..." : "Save"}
+                     </Button>
+                  )}
+               </>
+            }
+         >
+            <Breadcrumbs path={path} />
+         </AppShell.SectionHeader>
+         <AppShell.Scrollable key={path.join("-")}>
+            {showAlert && (
+               <div className="flex flex-row dark:bg-amber-300/20 bg-amber-200 p-4">
+                  {showAlert}
+               </div>
+            )}
+
+            <div className="flex flex-col flex-grow p-3 gap-3">
+               <JsonSchemaForm
+                  ref={formRef}
+                  readonly={!editing}
+                  schema={omit(reducedSchema, ["title"])}
+                  formData={reducedConfig}
+                  uiSchema={uiSchema}
+                  onChange={console.log}
+                  className="legacy hide-required-mark fieldset-alternative mute-root"
+               />
+            </div>
+
+            {extractedKeys.length > 0 && (
+               <div className="flex flex-col max-w-full">
+                  <AppShell.SectionHeaderTabs
+                     items={extractedKeys.map((sub) => ({
+                        as: Link,
+                        label: ucFirst(sub),
+                        href: `${prefix}/${sub}`.replace(/\/+/g, "/"),
+                        active: selectedSubKey === sub,
+                        badge: Object.keys(extracted[sub]?.config ?? {}).length
+                     }))}
+                  />
+                  <div className="flex flex-grow flex-col gap-3 p-3">
+                     <Route
+                        path="/:prop?"
+                        component={({ params }) => {
+                           const [, navigate] = useLocation();
+                           const key = (params.prop ?? selectedSubKey) as string;
+                           const localConfig = extracted[key]?.config ?? {};
+                           const values = properties?.[key]?.tableValues
+                              ? properties?.[key]?.tableValues(localConfig)
+                              : Object.entries(localConfig).map(([key, value]) => {
+                                   if (!value || typeof value !== "object") {
+                                      return {
+                                         key,
+                                         value
+                                      };
+                                   }
+
+                                   const fistValueKey = Object.keys(value)[0]!;
+                                   const firstValueKeyValue = value[fistValueKey];
+                                   const _value = omit(value as any, [fistValueKey]);
+                                   return {
+                                      key,
+                                      [fistValueKey]: firstValueKeyValue,
+                                      value: _value
+                                   };
+                                });
+                           const newSetting = properties?.[key]?.new;
+
+                           if (!key) {
+                              return (
+                                 <div className="h-80 flex justify-center align-center">
+                                    <Empty
+                                       title="No sub-setting selected"
+                                       description="Select one from the tab bar"
+                                    />
+                                 </div>
+                              );
+                           }
+
+                           return (
+                              <>
+                                 {newSetting && (
+                                    <SettingNewModal
+                                       schema={newSetting.schema}
+                                       uiSchema={newSetting.uiSchema}
+                                       anyOfValues={newSetting.anyOfValues}
+                                       prefixPath={`/${key}/`}
+                                       path={[...path, key]}
+                                       generateKey={newSetting.generateKey}
+                                    />
+                                 )}
+                                 <DataTable
+                                    data={values}
+                                    onClickRow={(row) => {
+                                       const firstKeyValue = Object.values(row)[0];
+                                       navigate(`/${key}/${firstKeyValue}`);
+                                    }}
+                                 />
+                              </>
+                           );
+                        }}
+                     />
+                  </div>
+               </div>
+            )}
+         </AppShell.Scrollable>
+
+         <SettingSchemaModal
+            ref={schemaLocalModalRef}
+            title={path.join(".")}
+            tabs={[
+               {
+                  title: "Schema",
+                  json: reducedSchema
+               },
+               {
+                  title: "Config",
+                  json: reducedConfig
+               }
+            ]}
+         />
+         <SettingSchemaModal
+            ref={schemaModalRef}
+            title={path.join(".")}
+            tabs={[
+               {
+                  title: "Schema",
+                  json: schema
+               },
+               {
+                  title: "Config",
+                  json: config
+               }
+            ]}
+         />
+      </>
+   );
+}

app/src/ui/routes/settings/components/SettingNewModal.tsx

@@ -0,0 +1,170 @@
+import { useDisclosure, useFocusTrap } from "@mantine/hooks";
+import type { TObject } from "core/utils";
+import { omit } from "lodash-es";
+import { useRef, useState } from "react";
+import { TbCirclePlus, TbVariable } from "react-icons/tb";
+import { useLocation } from "wouter";
+import { useBknd } from "../../../client/BkndProvider";
+import { Button } from "../../../components/buttons/Button";
+import * as Formy from "../../../components/form/Formy";
+import {
+   JsonSchemaForm,
+   type JsonSchemaFormRef
+} from "../../../components/form/json-schema/JsonSchemaForm";
+import { Dropdown } from "../../../components/overlay/Dropdown";
+import { Modal } from "../../../components/overlay/Modal";
+
+export type SettingsNewModalProps = {
+   schema: TObject;
+   uiSchema?: object;
+   anyOfValues?: Record<string, { label: string; icon?: any }>;
+   path: string[];
+   prefixPath: string;
+   generateKey?: string | ((formData: any) => string);
+};
+
+export const SettingNewModal = ({
+   schema,
+   uiSchema = {},
+   anyOfValues,
+   path,
+   prefixPath,
+   generateKey
+}: SettingsNewModalProps) => {
+   const [location, navigate] = useLocation();
+   const [formSchema, setFormSchema] = useState(schema);
+   const [submitting, setSubmitting] = useState(false);
+   const { actions } = useBknd();
+   const [opened, { open, close }] = useDisclosure(false);
+   const isGeneratedKey = generateKey !== undefined;
+   const isStaticGeneratedKey = typeof generateKey === "string";
+   const [newKey, setNewKey] = useState(isStaticGeneratedKey ? generateKey : "");
+   const focusTrap = useFocusTrap(!isGeneratedKey);
+   const formRef = useRef<JsonSchemaFormRef>(null);
+   const isAnyOf = "anyOf" in schema;
+
+   function handleFormChange(data) {
+      if (generateKey && typeof generateKey === "function") {
+         handleKeyNameChange({
+            target: {
+               value: generateKey(data)
+            }
+         });
+      }
+      console.log("form change", data);
+   }
+
+   function handleKeyNameChange(e) {
+      const v = String(e.target.value);
+      if (v.length > 0 && !/^[a-zA-Z_][a-zA-Z0-9_ ]*$/.test(v)) {
+         console.log("no match", v);
+         return;
+      }
+      setNewKey(v.toLowerCase().replace(/ /g, "_").replace(/__+/g, "_"));
+   }
+
+   async function handleSave() {
+      if (formRef.current?.validateForm()) {
+         setSubmitting(true);
+         const data = formRef.current?.formData();
+         const [module, ...restOfPath] = path;
+         const addPath = [...restOfPath, newKey].join(".");
+         if (await actions.add(module as any, addPath, data)) {
+            navigate(prefixPath + newKey, {
+               replace: true
+            });
+         } else {
+            setSubmitting(false);
+         }
+      }
+      console.log("valid?", formRef.current?.validateForm());
+      console.log("data", newKey, formRef.current?.formData());
+   }
+
+   const anyOfItems = isAnyOf
+      ? (schema.anyOf as any[])!.map((item) => {
+           const key = item.title;
+           const label = anyOfValues?.[key]?.label || key;
+           const icon = anyOfValues?.[key]?.icon;
+
+           return {
+              label,
+              icon,
+              onClick: () => {
+                 setFormSchema(item);
+                 open();
+              }
+           };
+        })
+      : [];
+
+   return (
+      <>
+         <div className="flex flex-row">
+            {isAnyOf ? (
+               <Dropdown position="top-start" items={anyOfItems} itemsClassName="gap-3">
+                  <Button>Add new</Button>
+               </Dropdown>
+            ) : (
+               <Button onClick={open}>Add new</Button>
+            )}
+         </div>
+
+         <Modal
+            open={opened}
+            allowBackdropClose={false}
+            onClose={close}
+            className="min-w-96 w-6/12 mt-[30px] mb-[20px]"
+            stickToTop
+         >
+            <div
+               className="border border-muted rounded-lg flex flex-col overflow-y-scroll font-normal"
+               style={{ maxHeight: "calc(100dvh - 100px)" }}
+            >
+               <div className="bg-muted py-2 px-4 text-primary/70 font-mono flex flex-row gap-2 items-center">
+                  {[...path, newKey].join(".")}
+               </div>
+               <div className="flex flex-row gap-10 sticky top-0 bg-background z-10 p-4 border-b border-muted">
+                  <div className="flex flex-row flex-grow items-center relative">
+                     <Formy.Input
+                        ref={focusTrap}
+                        className="w-full"
+                        placeholder="New unique key..."
+                        onChange={handleKeyNameChange}
+                        value={newKey}
+                        disabled={isGeneratedKey}
+                     />
+                     {isGeneratedKey && (
+                        <div className="absolute h-full flex items-center z-10 right-3.5 top-0 bottom-0 font-mono font-sm opacity-50">
+                           generated
+                        </div>
+                     )}
+                  </div>
+                  <div className="flex flex-row gap-2">
+                     <Button onClick={close} disabled={submitting}>
+                        Cancel
+                     </Button>
+                     <Button
+                        variant="primary"
+                        onClick={handleSave}
+                        disabled={submitting || newKey.length === 0}
+                     >
+                        Create
+                     </Button>
+                  </div>
+               </div>
+               <div className="flex flex-col p-4">
+                  <JsonSchemaForm
+                     ref={formRef}
+                     /* readonly={!editing} */
+                     schema={omit(formSchema, ["title"])}
+                     uiSchema={uiSchema}
+                     onChange={handleFormChange}
+                     className="legacy hide-required-mark fieldset-alternative mute-root"
+                  />
+               </div>
+            </div>
+         </Modal>
+      </>
+   );
+};

app/src/ui/routes/settings/components/SettingSchemaModal.tsx

@@ -0,0 +1,73 @@
+import { useDisclosure } from "@mantine/hooks";
+import { forwardRef, useImperativeHandle } from "react";
+import { useState } from "react";
+import { TbVariable, TbX } from "react-icons/tb";
+import { IconButton } from "../../../components/buttons/IconButton";
+import { JsonViewer } from "../../../components/code/JsonViewer";
+import { Modal } from "../../../components/overlay/Modal";
+
+export type SettingsSchemaModalRef = {
+   open: () => void;
+   close: () => void;
+   isOpen: boolean;
+};
+
+type SettingSchemaModalProps = {
+   tabs: { title: string; json: object }[];
+   title?: string;
+};
+
+export const SettingSchemaModal = forwardRef<SettingsSchemaModalRef, SettingSchemaModalProps>(
+   ({ tabs, title }, ref) => {
+      const [opened, { open, close }] = useDisclosure(false);
+      const [index, setIndex] = useState(0);
+      const tab = tabs[index];
+
+      useImperativeHandle(ref, () => ({
+         open,
+         close,
+         isOpen: opened
+      }));
+
+      if (!tab) return null;
+
+      return (
+         <Modal
+            open={opened}
+            onClose={close}
+            className="min-w-96 w-9/12 mt-[80px] mb-[20px]"
+            stickToTop
+         >
+            <div
+               className="border border-primary rounded-lg flex flex-col overflow-scroll font-normal"
+               style={{ maxHeight: "calc(100dvh - 100px)" }}
+            >
+               {title && (
+                  <div className="bg-primary py-2 px-4 text-background font-mono flex flex-row gap-2 items-center">
+                     <TbVariable size={20} className="opacity-50" />
+                     {title}
+                  </div>
+               )}
+               <div className="flex flex-row justify-between sticky top-0 bg-background z-10 py-4 px-5">
+                  <div className="flex flex-row gap-3">
+                     {tabs.map((t, key) => (
+                        <button
+                           key={key}
+                           onClick={() => setIndex(key)}
+                           data-active={key === index ? 1 : undefined}
+                           className="font-mono data-[active]:font-bold"
+                        >
+                           {t.title}
+                        </button>
+                     ))}
+                  </div>
+                  <IconButton Icon={TbX} onClick={close} />
+               </div>
+               <div className="">
+                  <JsonViewer json={tab.json} expand={6} showSize showCopy />
+               </div>
+            </div>
+         </Modal>
+      );
+   }
+);

app/src/ui/routes/settings/index.tsx

@@ -0,0 +1,186 @@
+import { modals } from "@mantine/modals";
+import { IconSettings } from "@tabler/icons-react";
+import { ucFirst } from "core/utils";
+import { Route, Switch } from "wouter";
+import { useBknd } from "../../client";
+import { Empty } from "../../components/display/Empty";
+import { Link } from "../../components/wouter/Link";
+import { useBrowserTitle } from "../../hooks/use-browser-title";
+import * as AppShell from "../../layouts/AppShell/AppShell";
+import { bkndModals } from "../../modals";
+import { Setting } from "./components/Setting";
+import { AuthSettings } from "./routes/auth.settings";
+import { DataSettings } from "./routes/data.settings";
+import { FlowsSettings } from "./routes/flows.settings";
+
+function SettingsSidebar() {
+   const { version, schema } = useBknd();
+   useBrowserTitle(["Settings"]);
+
+   const modules = Object.keys(schema).map((key) => {
+      return {
+         title: schema[key].title ?? ucFirst(key),
+         key
+      };
+   });
+
+   return (
+      <AppShell.Sidebar>
+         <AppShell.SectionHeader right={<span className="font-mono">v{version}</span>}>
+            Settings
+         </AppShell.SectionHeader>
+         <AppShell.Scrollable initialOffset={96}>
+            <div className="flex flex-col flex-grow p-3 gap-3">
+               <nav className="flex flex-col flex-1 gap-1">
+                  {modules.map((module, key) => (
+                     <AppShell.SidebarLink as={Link} key={key} href={`/${module.key}`}>
+                        {module.title}
+                     </AppShell.SidebarLink>
+                  ))}
+               </nav>
+            </div>
+            {/*<button
+               onClick={() =>
+                  modals.openContextModal({
+                     modal: "test",
+                     title: "Test Modal",
+                     innerProps: { modalBody: "This is a test modal" }
+                  })
+               }
+            >
+               modal
+            </button>
+            <button
+               onClick={() =>
+                  bkndModals.open(bkndModals.ids.test, { modalBody: "test" }, { title: "what" })
+               }
+            >
+               modal2
+            </button>
+            <button onClick={() => bkndModals.open("test", { modalBody: "test" })}>modal</button>
+            <button
+               onClick={() =>
+                  bkndModals.open("debug", {
+                     data: {
+                        one: { what: 1 }
+                     }
+                  })
+               }
+            >
+               debug
+            </button>*/}
+         </AppShell.Scrollable>
+      </AppShell.Sidebar>
+   );
+}
+
+export default function SettingsRoutes() {
+   useBknd({ withSecrets: true });
+   return (
+      <>
+         <SettingsSidebar />
+         <AppShell.Main>
+            <Switch>
+               <Route
+                  path="/"
+                  component={() => (
+                     <Empty
+                        Icon={IconSettings}
+                        title="No Setting selected"
+                        description="Please select a setting from the left sidebar."
+                     />
+                  )}
+               />
+
+               <SettingRoutesRoutes />
+
+               <Route
+                  path="*"
+                  component={() => (
+                     <Empty
+                        Icon={IconSettings}
+                        title="Settings not found"
+                        description="Check other options."
+                     />
+                  )}
+               />
+            </Switch>
+         </AppShell.Main>
+      </>
+   );
+}
+
+const uiSchema = {
+   server: {
+      cors: {
+         allow_methods: {
+            "ui:widget": "checkboxes"
+         },
+         allow_headers: {
+            "ui:options": {
+               orderable: false
+            }
+         }
+      }
+   },
+   media: {
+      adapter: {
+         "ui:options": {
+            label: false
+         }
+         /*type: {
+            "ui:widget": "hidden"
+         }*/
+      }
+   }
+};
+
+const SettingRoutesRoutes = () => {
+   const { schema, config } = useBknd();
+
+   console.log("flows", {
+      schema: schema.flows,
+      config: config.flows
+   });
+
+   return (
+      <>
+         <FallbackRoutes
+            module="server"
+            schema={schema}
+            config={config}
+            uiSchema={uiSchema.server}
+         />
+         <DataSettings schema={schema.data} config={config.data} />
+         <AuthSettings schema={schema.auth} config={config.auth} />
+         <FallbackRoutes module="media" schema={schema} config={config} uiSchema={uiSchema.media} />
+         <FlowsSettings schema={schema.flows} config={config.flows} />
+      </>
+   );
+};
+
+const FallbackRoutes = ({ module, schema, config, ...settingProps }) => {
+   const { app } = useBknd();
+   const basepath = app.getAdminConfig();
+   const prefix = `~/${basepath}/settings`.replace(/\/+/g, "/");
+
+   return (
+      <Route path={`/${module}`} nest>
+         <Switch>
+            <Route
+               path="/"
+               component={() => (
+                  <Setting
+                     {...settingProps}
+                     schema={schema[module]}
+                     config={config[module]}
+                     prefix={`${prefix}/${module}`}
+                     path={[module]}
+                  />
+               )}
+               nest
+            />
+         </Switch>
+      </Route>
+   );
+};

app/src/ui/routes/settings/routes/auth.settings.tsx

@@ -0,0 +1,156 @@
+import { transformObject } from "core/utils";
+import { cloneDeep, pick } from "lodash-es";
+import { Route, Switch } from "wouter";
+import { useBknd } from "../../../client/BkndProvider";
+import { Setting } from "../components/Setting";
+
+const uiSchema = {
+   jwt: {
+      basepath: {
+         "ui:options": {
+            label: false
+         }
+      },
+      fields: {
+         "ui:options": {
+            orderable: false
+         }
+      }
+   },
+   strategies: {
+      additionalProperties: {
+         "ui:widget": "select",
+         type: {
+            "ui:widget": "hidden"
+         }
+      },
+      type: {
+         "ui:widget": "hidden"
+      }
+   },
+   roles: {
+      "ui:options": {
+         orderable: false
+      },
+      permissions: {
+         items: {
+            "ui:widget": "checkboxes"
+         },
+         "ui:widget": "checkboxes"
+      }
+   }
+};
+
+export const AuthSettings = ({ schema: _unsafe_copy, config }) => {
+   const _s = useBknd();
+   const _schema = cloneDeep(_unsafe_copy);
+   const { basepath } = _s.app.getAdminConfig();
+   const prefix = `~/${basepath}/settings`.replace(/\/+/g, "/");
+
+   try {
+      const user_entity = config.entity_name ?? "users";
+      const entities = _s.config.data.entities ?? {};
+      console.log("entities", entities, user_entity);
+      const user_fields = Object.entries(entities[user_entity]?.fields ?? {})
+         .map(([name, field]) => (!field.config?.virtual ? name : undefined))
+         .filter(Boolean);
+
+      if (user_fields.length > 0) {
+         console.log("user_fields", user_fields);
+         _schema.properties.jwt.properties.fields.items.enum = user_fields;
+         _schema.properties.jwt.properties.fields.uniqueItems = true;
+         uiSchema.jwt.fields["ui:widget"] = "checkboxes";
+      }
+   } catch (e) {}
+   console.log("_s", _s);
+   const roleSchema = _schema.properties.roles?.additionalProperties ?? { type: "object" };
+   if (_s.permissions) {
+      roleSchema.properties.permissions.items.enum = _s.permissions;
+      roleSchema.properties.permissions.uniqueItems = true;
+   }
+
+   return (
+      <Route path="/auth" nest>
+         <Switch>
+            <Route
+               path="/roles/:role"
+               component={({ params: { role } }) => {
+                  return (
+                     <Setting
+                        schema={roleSchema}
+                        uiSchema={uiSchema.roles}
+                        config={config.roles?.[role] as any}
+                        path={["auth", "roles", role]}
+                        prefix={`${prefix}/auth/roles/${role}`}
+                     />
+                  );
+               }}
+               nest
+            />
+
+            <Route
+               path="/strategies/:strategy"
+               component={({ params: { strategy } }) => {
+                  const c = config.strategies?.[strategy];
+                  // @ts-ignore
+                  const s = _schema.properties.strategies.additionalProperties as any;
+                  const editSchema = s.anyOf.find((x) => x.properties.type.const === c?.type);
+
+                  return (
+                     <Setting
+                        schema={editSchema ?? s}
+                        config={config.strategies?.[strategy] as any}
+                        path={["auth", "strategies", strategy]}
+                        prefix={`${prefix}/auth/strategies/${strategy}`}
+                     />
+                  );
+               }}
+               nest
+            />
+
+            <Route
+               path="/"
+               component={() => (
+                  <Setting
+                     schema={_schema}
+                     uiSchema={uiSchema}
+                     config={config}
+                     properties={{
+                        strategies: {
+                           extract: true,
+                           tableValues: (strategies: any) => {
+                              return Object.values(
+                                 transformObject(strategies, (s, name) => ({
+                                    key: name,
+                                    type: s.type
+                                 }))
+                              );
+                           },
+                           new: {
+                              schema: _schema.properties.strategies.additionalProperties,
+                              uiSchema: uiSchema.strategies,
+                              generateKey: (data) => {
+                                 return data.type === "password"
+                                    ? "password"
+                                    : data.config.name?.toLowerCase() || "";
+                              }
+                           }
+                        },
+                        roles: {
+                           extract: true,
+                           new: {
+                              schema: roleSchema,
+                              uiSchema: uiSchema.roles
+                           }
+                        }
+                     }}
+                     prefix={`${prefix}/auth`}
+                     path={["auth"]}
+                  />
+               )}
+               nest
+            />
+         </Switch>
+      </Route>
+   );
+};

app/src/ui/routes/settings/routes/data.settings.tsx

@@ -0,0 +1,347 @@
+import { cloneDeep, transform } from "lodash-es";
+import { fieldSpecs } from "ui/modules/data/components/fields-specs";
+import { Route, Switch } from "wouter";
+import type { ModuleConfigs, ModuleSchemas } from "../../../../modules";
+import { useBknd } from "../../../client";
+import { Setting } from "../components/Setting";
+
+export const dataFieldsUiSchema = {
+   config: {
+      fillable: {
+         "ui:options": {
+            wrap: true
+         },
+         anyOf: [
+            {},
+            {
+               "ui:widget": "checkboxes"
+            }
+         ]
+      },
+      hidden: {
+         "ui:options": {
+            wrap: true
+         },
+         anyOf: [
+            {},
+            {
+               "ui:widget": "checkboxes"
+            }
+         ]
+      },
+      schema: {
+         "ui:field": "JsonField"
+      },
+      ui_schema: {
+         "ui:field": "JsonField"
+      }
+   }
+};
+
+const fieldsAnyOfValues = fieldSpecs
+   .filter((s) => s.type !== "primary")
+   .reduce((acc, s) => {
+      acc[s.type] = {
+         label: s.label,
+         icon: s.icon
+      };
+      return acc;
+   }, {});
+
+const relationAnyOfValues = {
+   "1:1": {
+      label: "One-to-One"
+   },
+   "n:1": {
+      label: "Many-to-One"
+   },
+   "m:n": {
+      label: "Many-to-Many"
+   },
+   poly: {
+      label: "Polymorphic"
+   }
+};
+
+export const DataSettings = ({
+   schema,
+   config
+}: { schema: ModuleSchemas["data"]; config: ModuleConfigs["data"] }) => {
+   const { app } = useBknd();
+   const basepath = app.getAdminConfig().basepath;
+   const prefix = `~/${basepath}/settings`.replace(/\/+/g, "/");
+   const entities = Object.keys(config.entities ?? {});
+
+   function fillEntities(schema: any, key: string = "entity") {
+      if (entities.length === 0) return;
+      if (schema.properties && key in schema.properties) {
+         schema.properties[key].enum = entities;
+      }
+      if ("anyOf" in schema) {
+         schema.anyOf.forEach((s) => fillEntities(s, key));
+      }
+   }
+
+   return (
+      <Route path="/data" nest>
+         <Switch>
+            <Route
+               path="/entities/:entity/fields/:field"
+               component={({ params: { entity, field } }) => {
+                  const c = config.entities?.[entity]?.fields?.[field];
+                  // @ts-ignore
+                  const s = schema.properties.entities.additionalProperties?.properties?.fields
+                     .additionalProperties as any;
+
+                  const editSchema = s.anyOf.find((x) => x.properties.type.const === c?.type);
+                  //console.log("editSchema", editSchema);
+
+                  return (
+                     <Setting
+                        schema={editSchema ?? s}
+                        // @ts-ignore
+                        config={c}
+                        prefix={`${prefix}/data/entities/${entity}/fields/${field}`}
+                        path={["data", "entities", entity, "fields", field]}
+                        options={{
+                           showAlert: (config: any) => {
+                              // it's weird, but after creation, the config is not set (?)
+                              if (config?.type === "primary") {
+                                 return "Modifying the primary field may result in strange behaviors.";
+                              }
+                              return;
+                           }
+                        }}
+                        uiSchema={dataFieldsUiSchema}
+                     />
+                  );
+               }}
+               nest
+            />
+
+            <Route
+               path="/entities/:entity"
+               component={({ params: { entity } }) => {
+                  const s = schema.properties.entities.additionalProperties as any;
+                  const editSchema = cloneDeep(s);
+                  editSchema.properties.type.readOnly = true;
+
+                  const fieldsSchema = {
+                     anyOf: editSchema.properties.fields.additionalProperties.anyOf.filter(
+                        (s) => s.properties.type.const !== "primary"
+                     )
+                  } as any;
+
+                  return (
+                     <Setting
+                        schema={editSchema}
+                        config={config.entities?.[entity] as any}
+                        options={{
+                           showAlert: (config: any) => {
+                              if (config.type === "system") {
+                                 return "Modifying the system entities may result in strange behaviors.";
+                              }
+                              return;
+                           }
+                        }}
+                        properties={{
+                           fields: {
+                              extract: true,
+                              tableValues: (config: any) =>
+                                 transform(
+                                    config,
+                                    (acc, value, key) => {
+                                       acc.push({
+                                          property: key,
+                                          type: value.type,
+                                          required: value.config?.required ? "Yes" : "No"
+                                       });
+                                    },
+                                    [] as any[]
+                                 ),
+                              new: {
+                                 schema: fieldsSchema,
+                                 uiSchema: dataFieldsUiSchema,
+                                 anyOfValues: fieldsAnyOfValues
+                              }
+                           }
+                        }}
+                        path={["data", "entities", entity]}
+                        prefix={`${prefix}/data/entities/${entity}`}
+                     />
+                  );
+               }}
+               nest
+            />
+
+            {/* indices */}
+            <Route
+               path="/indices/:index"
+               component={({ params: { index } }) => {
+                  const indicesSchema = schema.properties.indices.additionalProperties as any;
+
+                  if (entities.length > 0) {
+                     fillEntities(indicesSchema, "entity");
+                     //indicesSchema.properties.entity.enum = entities;
+                  }
+
+                  return (
+                     <Setting
+                        schema={schema.properties.indices.additionalProperties as any}
+                        config={config.indices?.[index] as any}
+                        path={["data", "indices", index]}
+                        prefix={`${prefix}/data/indices/${index}`}
+                     />
+                  );
+               }}
+               nest
+            />
+
+            {/* relations */}
+            <Route
+               path="/relations/:relation"
+               component={({ params: { relation } }) => {
+                  const c = config.relations?.[relation];
+                  // @ts-ignore
+                  const s = schema.properties.relations.additionalProperties as any;
+                  const editSchema = s.anyOf.find((x) => x.properties.type.const === c?.type);
+
+                  if (entities.length > 0) {
+                     fillEntities(editSchema, "source");
+                     fillEntities(editSchema, "target");
+                  }
+
+                  return (
+                     <Setting
+                        schema={editSchema}
+                        config={c}
+                        path={["data", "relations", relation]}
+                        prefix={`${prefix}/data/relations/${relation}`}
+                     />
+                  );
+               }}
+               nest
+            />
+
+            <Route
+               path="/"
+               component={() => {
+                  const newIndex = schema.properties.indices.additionalProperties as any;
+                  const newRelation = schema.properties.relations.additionalProperties as any;
+
+                  fillEntities(newIndex, "entity");
+                  fillEntities(newRelation, "source");
+                  fillEntities(newRelation, "target");
+
+                  return (
+                     <Setting
+                        schema={schema}
+                        config={config}
+                        properties={{
+                           entities: {
+                              extract: true,
+                              tableValues: (config: any) =>
+                                 transform(
+                                    config,
+                                    (acc, value, key) => {
+                                       acc.push({
+                                          name: key,
+                                          type: value.type,
+                                          fields: Object.keys(value.fields ?? {}).length
+                                       });
+                                    },
+                                    [] as any[]
+                                 ),
+                              new: {
+                                 schema: schema.properties.entities.additionalProperties as any,
+                                 uiSchema: {
+                                    fields: {
+                                       "ui:widget": "hidden"
+                                    },
+                                    type: {
+                                       "ui:widget": "hidden"
+                                    }
+                                 }
+                              }
+                           },
+                           relations: {
+                              extract: true,
+                              new: {
+                                 schema: schema.properties.relations.additionalProperties as any,
+                                 generateKey: (data: any) => {
+                                    const parts = [
+                                       data.type.replace(":", ""),
+                                       data.source,
+                                       data.target,
+                                       data.config?.mappedBy,
+                                       data.config?.inversedBy,
+                                       data.config?.connectionTable,
+                                       data.config?.connectionTableMappedName
+                                    ].filter(Boolean);
+
+                                    return [...new Set(parts)].join("_");
+                                 },
+                                 anyOfValues: relationAnyOfValues
+                              },
+                              tableValues: (config: any) =>
+                                 transform(
+                                    config,
+                                    (acc, value, key) => {
+                                       acc.push({
+                                          name: key,
+                                          type: value.type,
+                                          source: value.source,
+                                          target: value.target
+                                       });
+                                    },
+                                    [] as any[]
+                                 )
+                           },
+                           indices: {
+                              extract: true,
+                              tableValues: (config: any) =>
+                                 transform(
+                                    config,
+                                    (acc, value, key) => {
+                                       acc.push({
+                                          name: key,
+                                          entity: value.entity,
+                                          fields: value.fields.join(", "),
+                                          unique: value.unique ? "Yes" : "No"
+                                       });
+                                    },
+                                    [] as any[]
+                                 ),
+                              new: {
+                                 schema: newIndex,
+                                 uiSchema: {
+                                    fields: {
+                                       "ui:options": {
+                                          orderable: false
+                                       }
+                                    }
+                                 },
+                                 generateKey: (data: any) => {
+                                    const parts = [
+                                       "idx",
+                                       data.entity,
+                                       data.unique && "unique",
+                                       ...data.fields.filter(Boolean)
+                                    ].filter(Boolean);
+
+                                    return parts.join("_");
+                                 }
+                              }
+                           }
+                        }}
+                        prefix={`${prefix}/data`}
+                        path={["data"]}
+                     />
+                  );
+               }}
+               nest
+            />
+         </Switch>
+      </Route>
+   );
+};

app/src/ui/routes/settings/routes/flows.settings.tsx

@@ -0,0 +1,212 @@
+import { transform } from "lodash-es";
+import { Route, Switch } from "wouter";
+import { useBknd } from "../../../client/BkndProvider";
+import { Setting } from "../components/Setting";
+
+const uiSchema = {
+   jwt: {
+      basepath: {
+         "ui:options": {
+            label: false
+         }
+      },
+      fields: {
+         "ui:options": {
+            orderable: false
+         }
+      }
+   },
+   strategies: {
+      additionalProperties: {
+         "ui:widget": "select",
+         type: {
+            "ui:widget": "hidden"
+         }
+      },
+      type: {
+         "ui:widget": "hidden"
+      }
+   }
+};
+
+export const FlowsSettings = ({ schema, config }) => {
+   const { app } = useBknd();
+   const { basepath } = app.getAdminConfig();
+   const prefix = `~/${basepath}/settings`.replace(/\/+/g, "/");
+
+   function fillTasks(schema: any, flow: any, key: string) {
+      const tasks = Object.keys(flow.tasks ?? {});
+
+      if (tasks.length === 0) return;
+      if (schema.properties && key in schema.properties) {
+         schema.properties[key].enum = tasks;
+      }
+      if ("anyOf" in schema) {
+         schema.anyOf.forEach((s) => fillTasks(s, flow, key));
+      }
+   }
+
+   return (
+      <Route path="/flows" nest>
+         <Switch>
+            <Route
+               path="/flows/:flow/connections/:connection"
+               component={({ params: { flow, connection } }) => {
+                  const flowConfig = config.flows?.[flow];
+                  const c = config.flows?.[flow]?.connections?.[connection];
+                  const s =
+                     schema.properties.flows.additionalProperties.properties.connections
+                        .additionalProperties;
+
+                  fillTasks(s, flowConfig, "source");
+                  fillTasks(s, flowConfig, "target");
+
+                  return (
+                     <Setting
+                        schema={s}
+                        config={c}
+                        path={["flows", "flows", flow, "connections", connection]}
+                        prefix={`${prefix}/flows/flows/${flow}/connections/${connection}`}
+                     />
+                  );
+               }}
+               nest
+            />
+
+            <Route
+               path="/flows/:flow/tasks/:task"
+               component={({ params: { flow, task } }) => {
+                  const c = config.flows?.[flow]?.tasks?.[task];
+                  const s =
+                     schema.properties.flows.additionalProperties.properties.tasks
+                        .additionalProperties;
+                  const editSchema = s.anyOf.find((x) => x.properties.type.const === c?.type);
+
+                  return (
+                     <Setting
+                        schema={editSchema}
+                        config={c}
+                        path={["flows", "flows", flow, "tasks", task]}
+                        prefix={`${prefix}/flows/flows/${flow}/tasks/${task}`}
+                        uiSchema={{
+                           params: {
+                              render: {
+                                 "ui:field": "LiquidJsField"
+                              }
+                           }
+                        }}
+                     />
+                  );
+               }}
+               nest
+            />
+
+            <Route
+               path="/flows/:flow"
+               component={({ params: { flow } }) => {
+                  const c = config.flows?.[flow];
+                  const flowSchema = schema.properties.flows.additionalProperties;
+                  const newTask = flowSchema.properties.tasks.additionalProperties;
+                  const newConnection = flowSchema.properties.connections.additionalProperties;
+
+                  fillTasks(flowSchema, c, "start_task");
+                  fillTasks(flowSchema, c, "responding_task");
+                  fillTasks(newConnection, c, "source");
+                  fillTasks(newConnection, c, "target");
+
+                  return (
+                     <Setting
+                        schema={flowSchema}
+                        config={c}
+                        path={["flows", "flows", flow]}
+                        prefix={`${prefix}/flows/flows/${flow}`}
+                        properties={{
+                           tasks: {
+                              extract: true,
+                              new: {
+                                 schema: newTask
+                              },
+                              tableValues: (config: any) =>
+                                 transform(
+                                    config,
+                                    (acc, value, key) => {
+                                       acc.push({
+                                          name: key,
+                                          type: value.type
+                                       });
+                                    },
+                                    [] as any[]
+                                 )
+                           },
+                           connections: {
+                              extract: true,
+                              new: {
+                                 schema: newConnection,
+                                 generateKey: crypto.randomUUID() as string
+                              },
+                              tableValues: (config: any) =>
+                                 transform(
+                                    config,
+                                    (acc, value, key) => {
+                                       acc.push({
+                                          id: key,
+                                          source: value.source,
+                                          target: value.target,
+                                          condition: value.config.condition?.type
+                                       });
+                                    },
+                                    [] as any[]
+                                 )
+                           }
+                        }}
+                     />
+                  );
+               }}
+               nest
+            />
+
+            <Route
+               path="/"
+               component={() => (
+                  <Setting
+                     schema={schema}
+                     uiSchema={uiSchema}
+                     config={config}
+                     properties={{
+                        flows: {
+                           extract: true,
+                           new: {
+                              schema: schema.properties.flows.additionalProperties as any
+
+                              /*uiSchema: {
+                                 fields: {
+                                    "ui:widget": "hidden"
+                                 }
+                              }*/
+                           },
+                           tableValues: (config: any) =>
+                              transform(
+                                 config,
+                                 (acc, value, key) => {
+                                    acc.push({
+                                       name: key,
+                                       trigger: value.trigger.type,
+                                       mode: value.trigger.config.mode,
+                                       start_task: value.start_task,
+                                       responding_task: value.responding_task
+                                    });
+                                 },
+                                 [] as any[]
+                              )
+                        }
+                     }}
+                     prefix={`${prefix}/flows`}
+                     path={["flows"]}
+                  />
+               )}
+               nest
+            />
+         </Switch>
+      </Route>
+   );
+};

app/src/ui/routes/settings/utils/schema.ts

@@ -0,0 +1,50 @@
+import type { Static, TObject } from "core/utils";
+import type { JSONSchema7 } from "json-schema";
+import { cloneDeep, omit, pick } from "lodash-es";
+
+export function extractSchema<
+   Schema extends TObject,
+   Keys extends keyof Schema["properties"],
+   Config extends Static<Schema>
+>(
+   schema: Schema,
+   config: Config,
+   keys: Keys[]
+): [
+   JSONSchema7,
+   Partial<Config>,
+   {
+      [K in Keys]: {
+         // @ts-ignore
+         config: Config[K];
+         schema: Schema["properties"][K];
+      };
+   }
+] {
+   if (!schema.properties) {
+      return [{ ...schema }, config, {} as any];
+   }
+
+   const newSchema = cloneDeep(schema);
+   const updated = {
+      ...newSchema,
+      properties: omit(newSchema.properties, keys)
+   };
+   if (updated.required) {
+      updated.required = updated.required.filter((key) => !keys.includes(key as any));
+   }
+
+   const extracted = {} as any;
+   for (const key of keys) {
+      extracted[key] = {
+         // @ts-ignore
+         config: config[key],
+         // @ts-ignore
+         schema: newSchema.properties[key]
+      };
+   }
+
+   const reducedConfig = omit(config, keys) as any;
+
+   return [updated, reducedConfig, extracted];
+}