made the creation of an entity more accessible and obvious

2026-03-15 20:17:22 +00:00 · 2025-01-17 11:24:24 +01:00
parent ac3c7316ff
commit 1625a0c7c0
12 changed files with 176 additions and 138 deletions
--- a/app/src/ui/client/schema/data/use-bknd-data.ts
+++ b/app/src/ui/client/schema/data/use-bknd-data.ts
@@ -12,6 +12,7 @@ import {
 } from "data/data-schema";
 import { useBknd } from "ui/client/bknd";
 import type { TSchemaActions } from "ui/client/schema/actions";
+import { bkndModals } from "ui/modals";

 export function useBkndData() {
   const { config, app, schema, actions: bkndActions } = useBknd();
@@ -62,7 +63,8 @@ export function useBkndData() {
      }
   };
   const $data = {
-      entity: (name: string) => entities[name]
+      entity: (name: string) => entities[name],
+      modals
   };

   return {
@@ -75,6 +77,15 @@ export function useBkndData() {
   };
 }

+const modals = {
+   createAny: () => bkndModals.open(bkndModals.ids.dataCreate, {}),
+   createEntity: () =>
+      bkndModals.open(bkndModals.ids.dataCreate, {
+         initialPath: ["entities", "entity"],
+         initialState: { action: "entity" }
+      })
+};
+
 function entityFieldActions(bkndActions: TSchemaActions, entityName: string) {
   return {
      add: async (name: string, field: TAppDataField) => {
--- a/app/src/ui/components/display/Empty.tsx
+++ b/app/src/ui/components/display/Empty.tsx
@@ -1,33 +1,33 @@
-import { Button } from "../buttons/Button";
+import { twMerge } from "tailwind-merge";
+import { Button, type ButtonProps } from "../buttons/Button";

 export type EmptyProps = {
   Icon?: any;
   title?: string;
   description?: string;
-   buttonText?: string;
-   buttonOnClick?: () => void;
+   primary?: ButtonProps;
+   secondary?: ButtonProps;
+   className?: string;
 };
 export const Empty: React.FC<EmptyProps> = ({
   Icon = undefined,
   title = undefined,
   description = "Check back later my friend.",
-   buttonText,
-   buttonOnClick
+   primary,
+   secondary,
+   className
 }) => (
-   <div className="flex flex-col h-full w-full justify-center items-center">
+   <div className={twMerge("flex flex-col h-full w-full justify-center items-center", className)}>
      <div className="flex flex-col gap-3 items-center max-w-80">
         {Icon && <Icon size={48} className="opacity-50" stroke={1} />}
         <div className="flex flex-col gap-1">
            {title && <h3 className="text-center text-lg font-bold">{title}</h3>}
            <p className="text-center text-primary/60">{description}</p>
         </div>
-         {buttonText && (
-            <div className="mt-1.5">
-               <Button variant="primary" onClick={buttonOnClick}>
-                  {buttonText}
-               </Button>
+         <div className="mt-1.5 flex flex-row gap-2">
+            {secondary && <Button variant="default" {...secondary} />}
+            {primary && <Button variant="primary" {...primary} />}
         </div>
-         )}
      </div>
   </div>
 );
--- a/app/src/ui/components/steps/Steps.tsx
+++ b/app/src/ui/components/steps/Steps.tsx
@@ -10,6 +10,7 @@ import {
 export type TStepsProps = {
   children: any;
   initialPath?: string[];
+   initialState?: any;
   lastBack?: () => void;
   [key: string]: any;
 };
@@ -19,13 +20,14 @@ type TStepContext<T = any> = {
   stepBack: () => void;
   close: () => void;
   state: T;
+   path: string[];
   setState: Dispatch<SetStateAction<T>>;
 };

 const StepContext = createContext<TStepContext>(undefined as any);

-export function Steps({ children, initialPath = [], lastBack }: TStepsProps) {
-   const [state, setState] = useState<any>({});
+export function Steps({ children, initialPath = [], initialState = {}, lastBack }: TStepsProps) {
+   const [state, setState] = useState<any>(initialState);
   const [path, setPath] = useState<string[]>(initialPath);
   const steps: any[] = Children.toArray(children).filter(
      (child: any) => child.props.disabled !== true
@@ -46,7 +48,7 @@ export function Steps({ children, initialPath = [], lastBack }: TStepsProps) {
   const current = steps.find((step) => step.props.id === path[path.length - 1]) || steps[0];

   return (
-      <StepContext.Provider value={{ nextStep, stepBack, state, setState, close: lastBack! }}>
+      <StepContext.Provider value={{ nextStep, stepBack, state, path, setState, close: lastBack! }}>
         {current}
      </StepContext.Provider>
   );
--- a/app/src/ui/modals/index.tsx
+++ b/app/src/ui/modals/index.tsx
@@ -1,8 +1,8 @@
 import type { ModalProps } from "@mantine/core";
 import { modals as $modals, ModalsProvider, closeModal, openContextModal } from "@mantine/modals";
-import { transformObject } from "core/utils";
 import type { ComponentProps } from "react";
 import { OverlayModal } from "ui/modals/debug/OverlayModal";
+import { CreateModal } from "ui/modules/data/components/schema/create-modal/CreateModal";
 import { DebugModal } from "./debug/DebugModal";
 import { SchemaFormModal } from "./debug/SchemaFormModal";
 import { TestModal } from "./debug/TestModal";
@@ -11,7 +11,8 @@ const modals = {
   test: TestModal,
   debug: DebugModal,
   form: SchemaFormModal,
-   overlay: OverlayModal
+   overlay: OverlayModal,
+   dataCreate: CreateModal
 };

 declare module "@mantine/modals" {
@@ -54,10 +55,9 @@ function close<Modal extends keyof typeof modals>(modal: Modal) {
 }

 export const bkndModals = {
-   ids: transformObject(modals, (key) => key) as unknown as Record<
-      keyof typeof modals,
-      keyof typeof modals
-   >,
+   ids: Object.fromEntries(Object.keys(modals).map((key) => [key, key])) as {
+      [K in keyof typeof modals]: K;
+   },
   open,
   close,
   closeAll: $modals.closeAll
--- a/app/src/ui/modules/data/components/schema/create-modal/CreateModal.tsx
+++ b/app/src/ui/modules/data/components/schema/create-modal/CreateModal.tsx
@@ -1,15 +1,9 @@
-import { type Static, StringEnum, StringIdentifier, Type, transformObject } from "core/utils";
-import { FieldClassMap } from "data";
+import type { ModalProps } from "@mantine/core";
+import type { ContextModalProps } from "@mantine/modals";
+import { type Static, StringEnum, StringIdentifier, Type } from "core/utils";
 import { entitiesSchema, fieldsSchema, relationsSchema } from "data/data-schema";
-import { omit } from "lodash-es";
-import { forwardRef, useState } from "react";
-import {
-   Modal2,
-   type Modal2Ref,
-   ModalBody,
-   ModalFooter,
-   ModalTitle
-} from "ui/components/modal/Modal2";
+import { useState } from "react";
+import { type Modal2Ref, ModalBody, ModalFooter, ModalTitle } from "ui/components/modal/Modal2";
 import { Step, Steps, useStepContext } from "ui/components/steps/Steps";
 import { StepCreate } from "ui/modules/data/components/schema/create-modal/step.create";
 import { StepEntity } from "./step.entity";
@@ -67,17 +61,20 @@ const createModalSchema = Type.Object(
 );
 export type TCreateModalSchema = Static<typeof createModalSchema>;

-export const CreateModal = forwardRef<CreateModalRef>(function CreateModal(props, ref) {
-   const [path, setPath] = useState<string[]>([]);
+export function CreateModal({
+   context,
+   id,
+   innerProps: { initialPath = [], initialState }
+}: ContextModalProps<{ initialPath?: string[]; initialState?: TCreateModalSchema }>) {
+   const [path, setPath] = useState<string[]>(initialPath);
+   console.log("...", initialPath, initialState);

   function close() {
-      // @ts-ignore
-      ref?.current?.close();
+      context.closeModal(id);
   }

   return (
-      <Modal2 ref={ref}>
-         <Steps path={path} lastBack={close}>
+      <Steps path={path} lastBack={close} initialPath={initialPath} initialState={initialState}>
         <Step id="select">
            <ModalTitle path={["Create New"]} onClose={close} />
            <StepSelect />
@@ -107,8 +104,16 @@ export const CreateModal = forwardRef<CreateModalRef>(function CreateModal(props
            </Step>
         ))}
      </Steps>
-      </Modal2>
   );
-});
+}
+CreateModal.defaultTitle = undefined;
+CreateModal.modalProps = {
+   withCloseButton: false,
+   size: "xl",
+   padding: 0,
+   classNames: {
+      root: "bknd-admin"
+   }
+} satisfies Partial<ModalProps>;

 export { ModalBody, ModalFooter, ModalTitle, useStepContext, relationsSchema };
--- a/app/src/ui/modules/data/components/schema/create-modal/step.select.tsx
+++ b/app/src/ui/modules/data/components/schema/create-modal/step.select.tsx
@@ -12,7 +12,7 @@ import {
 import Templates from "./templates/register";

 export function StepSelect() {
-   const { nextStep, stepBack, state, setState } = useStepContext<TCreateModalSchema>();
+   const { nextStep, stepBack, state, path, setState } = useStepContext<TCreateModalSchema>();
   const selected = state.action ?? null;

   function handleSelect(action: TSchemaAction) {
@@ -74,6 +74,7 @@ export function StepSelect() {
            }}
            prev={{ onClick: stepBack }}
            prevLabel="Cancel"
+            debug={{ state, path }}
         />
      </>
   );
--- a/app/src/ui/routes/data/_data.root.tsx
+++ b/app/src/ui/routes/data/_data.root.tsx
@@ -1,8 +1,10 @@
-import { SegmentedControl } from "@mantine/core";
+import { SegmentedControl, Tooltip } from "@mantine/core";
 import { IconDatabase } from "@tabler/icons-react";
 import type { Entity, TEntityType } from "data";
+import { TbDatabasePlus } from "react-icons/tb";
 import { twMerge } from "tailwind-merge";
-import { useBknd } from "ui/client/bknd";
+import { useBkndData } from "ui/client/schema/data/use-bknd-data";
+import { IconButton } from "ui/components/buttons/IconButton";
 import { Empty } from "ui/components/display/Empty";
 import { Link } from "ui/components/wouter/Link";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
@@ -11,9 +13,7 @@ import { routes, useNavigate } from "ui/lib/routes";

 export function DataRoot({ children }) {
   // @todo: settings routes should be centralized
-   const {
-      app: { entities }
-   } = useBknd();
+   const { entities, $data } = useBkndData();
   const entityList: Record<TEntityType, Entity[]> = {
      regular: [],
      generated: [],
@@ -22,7 +22,7 @@ export function DataRoot({ children }) {
   const [navigate] = useNavigate();
   const context = window.location.href.match(/\/schema/) ? "schema" : "data";

-   for (const entity of entities) {
+   for (const entity of Object.values(entities)) {
      entityList[entity.getType()].push(entity);
   }

@@ -52,6 +52,7 @@ export function DataRoot({ children }) {
         <AppShell.Sidebar>
            <AppShell.SectionHeader
               right={
+                  <>
                     <SegmentedControl
                        data={[
                           { value: "data", label: "Data" },
@@ -60,6 +61,10 @@ export function DataRoot({ children }) {
                        value={context}
                        onChange={handleSegmentChange}
                     />
+                     <Tooltip label="New Entity">
+                        <IconButton Icon={TbDatabasePlus} onClick={$data.modals.createEntity} />
+                     </Tooltip>
+                  </>
               }
            >
               Entities
@@ -70,7 +75,7 @@ export function DataRoot({ children }) {
                     <SearchInput placeholder="Search entities" />
                  </div>*/}

-                  <EntityLinkList entities={entityList.regular} context={context} />
+                  <EntityLinkList entities={entityList.regular} context={context} suggestCreate />
                  <EntityLinkList entities={entityList.system} context={context} title="System" />
                  <EntityLinkList
                     entities={entityList.generated}
@@ -88,9 +93,22 @@ export function DataRoot({ children }) {
 const EntityLinkList = ({
   entities,
   title,
-   context
-}: { entities: Entity[]; title?: string; context: "data" | "schema" }) => {
-   if (entities.length === 0) return null;
+   context,
+   suggestCreate = false
+}: { entities: Entity[]; title?: string; context: "data" | "schema"; suggestCreate?: boolean }) => {
+   const { $data } = useBkndData();
+   if (entities.length === 0) {
+      return suggestCreate ? (
+         <Empty
+            className="py-10"
+            description="Create your first entity to get started."
+            secondary={{
+               children: "Create entity",
+               onClick: () => $data.modals.createEntity()
+            }}
+         />
+      ) : null;
+   }

   return (
      <nav
@@ -119,9 +137,9 @@ const EntityLinkList = ({
 export function DataEmpty() {
   useBrowserTitle(["Data"]);
   const [navigate] = useNavigate();
+   const { $data } = useBkndData();

   function handleButtonClick() {
-      //navigate(routes.settings.path(["data", "entities"]), { absolute: true });
      navigate(routes.data.schema.root());
   }

@@ -130,8 +148,14 @@ export function DataEmpty() {
         Icon={IconDatabase}
         title="No entity selected"
         description="Please select an entity from the left sidebar or create a new one to continue."
-         buttonText="Go to schema"
-         buttonOnClick={handleButtonClick}
+         secondary={{
+            children: "Go to schema",
+            onClick: handleButtonClick
+         }}
+         primary={{
+            children: "Create entity",
+            onClick: $data.modals.createEntity
+         }}
      />
   );
 }
--- a/app/src/ui/routes/data/data.schema.$entity.tsx
+++ b/app/src/ui/routes/data/data.schema.$entity.tsx
@@ -37,7 +37,6 @@ export function DataSchemaEntity({ params }) {
      <>
         <AppShell.SectionHeader
            right={
-               <>
               <Dropdown
                  items={[
                     {
@@ -52,7 +51,6 @@ export function DataSchemaEntity({ params }) {
               >
                  <IconButton Icon={TbDots} />
               </Dropdown>
-               </>
            }
            className="pl-3"
         >
@@ -74,12 +72,11 @@ export function DataSchemaEntity({ params }) {
               <Empty
                  title="Relations"
                  description="This will soon be available here. Meanwhile, check advanced settings."
-                  buttonText="Advanced Settings"
-                  buttonOnClick={() =>
-                     navigate(routes.settings.path(["data", "relations"]), {
-                        absolute: true
-                     })
-                  }
+                  primary={{
+                     children: "Advanced Settings",
+                     onClick: () =>
+                        navigate(routes.settings.path(["data", "relations"]), { absolute: true })
+                  }}
               />
            </AppShell.SectionHeaderAccordionItem>
            <AppShell.SectionHeaderAccordionItem
@@ -91,12 +88,13 @@ export function DataSchemaEntity({ params }) {
               <Empty
                  title="Indices"
                  description="This will soon be available here. Meanwhile, check advanced settings."
-                  buttonText="Advanced Settings"
-                  buttonOnClick={() =>
+                  primary={{
+                     children: "Advanced Settings",
+                     onClick: () =>
                        navigate(routes.settings.path(["data", "indices"]), {
                           absolute: true
                        })
-                  }
+                  }}
               />
            </AppShell.SectionHeaderAccordionItem>
         </div>
--- a/app/src/ui/routes/data/data.schema.index.tsx
+++ b/app/src/ui/routes/data/data.schema.index.tsx
@@ -1,10 +1,7 @@
-import { Suspense, lazy, useRef } from "react";
-import {
-   CreateModal,
-   type CreateModalRef
-} from "ui/modules/data/components/schema/create-modal/CreateModal";
-import { Button } from "../../components/buttons/Button";
-import * as AppShell from "../../layouts/AppShell/AppShell";
+import { Suspense, lazy } from "react";
+import { useBkndData } from "ui/client/schema/data/use-bknd-data";
+import { Button } from "ui/components/buttons/Button";
+import * as AppShell from "ui/layouts/AppShell/AppShell";

 const DataSchemaCanvas = lazy(() =>
   import("ui/modules/data/components/canvas/DataSchemaCanvas").then((m) => ({
@@ -13,18 +10,12 @@ const DataSchemaCanvas = lazy(() =>
 );

 export function DataSchemaIndex() {
-   const createModalRef = useRef<CreateModalRef>(null);
-
+   const { $data } = useBkndData();
   return (
      <>
-         <CreateModal ref={createModalRef} />
         <AppShell.SectionHeader
            right={
-               <Button
-                  type="button"
-                  variant="primary"
-                  onClick={() => createModalRef.current?.open()}
-               >
+               <Button type="button" variant="primary" onClick={$data.modals.createAny}>
                  Create new
               </Button>
            }
--- a/app/src/ui/routes/media/_media.root.tsx
+++ b/app/src/ui/routes/media/_media.root.tsx
@@ -20,8 +20,10 @@ export function MediaRoot({ children }) {
            Icon={IconPhoto}
            title="Media not enabled"
            description="Please enable media in the settings to continue."
-            buttonText="Manage Settings"
-            buttonOnClick={() => navigate(app.getSettingsPath(["media"]))}
+            primary={{
+               children: "Manage Settings",
+               onClick: () => navigate(app.getSettingsPath(["media"]))
+            }}
         />
      );
   }
--- a/app/src/ui/routes/settings/components/Setting.tsx
+++ b/app/src/ui/routes/settings/components/Setting.tsx
@@ -175,7 +175,10 @@ export function Setting<Schema extends TObject = any>({
         <Empty
            title="Not found"
            description={`Configuration at path ${path.join(".")} doesn't exist.`}
-            buttonText="Go back"
+            primary={{
+               children: "Go back",
+               onClick: () => goBack()
+            }}
         />
      );
   }
--- a/biome.json
+++ b/biome.json
@@ -52,6 +52,7 @@
        "noSwitchDeclarations": "warn"
      },
      "complexity": {
+        "noUselessFragments": "warn",
        "noStaticOnlyClass": "off",
        "noForEach": "off",
        "useLiteralKeys": "warn",