Added "start from a template" on object creation form (#5828)

Author: bilalabbad

frontend/app/src/config/constants.tsx

@@ -129,14 +129,14 @@ export const relationshipsForListView = {
   many: ["Attribute"],
 };
 
-export const relationshipsForDetailsView = {
+export const relationshipsForDetailsView: { one: RelationshipKind[]; many: RelationshipKind[] } = {
   one: ["Generic", "Attribute", "Component", "Parent", "Hierarchy"],
   many: ["Attribute", "Parent"],
 };
 
-export const relationshipsForTabs = {
+export const relationshipsForTabs: { one: RelationshipKind[]; many: RelationshipKind[] } = {
   one: [],
-  many: ["Generic", "Component", "Hierarchy"],
+  many: ["Generic", "Component", "Hierarchy", "Template"],
 };
 
 export const RELATIONSHIP_VIEW_BLACKLIST = [

frontend/app/src/entities/nodes/object-item-details/action-buttons/relationships-buttons.tsx

@@ -2,6 +2,7 @@ import { QSP } from "@/config/qsp";
 import { ADD_RELATIONSHIP } from "@/entities/nodes/relationships/api/addRelationship";
 import { Permission } from "@/entities/permission/types";
 import { genericSchemasAtom, nodeSchemasAtom } from "@/entities/schema/stores/schema.atom";
+import { ModelSchema } from "@/entities/schema/types";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
 import { useMutation } from "@/shared/api/graphql/useQuery";
 import { queryClient } from "@/shared/api/rest/client";
@@ -19,16 +20,19 @@ import { StringParam, useQueryParam } from "use-query-params";
 
 interface RelationshipsButtonsProps {
   permission: Permission;
+  schema: ModelSchema;
 }
 
-export function RelationshipsButtons({ permission }: RelationshipsButtonsProps) {
+export function RelationshipsButtons({
+  permission,
+  schema: parentSchema,
+}: RelationshipsButtonsProps) {
   const { objectKind, objectid } = useParams();
   const [addRelationship] = useMutation(ADD_RELATIONSHIP);
   const generics = useAtomValue(genericSchemasAtom);
   const schemaList = useAtomValue(nodeSchemasAtom);
   const [relationshipTab] = useQueryParam(QSP.TAB, StringParam);
 
-  const parentSchema = schemaList.find((s) => s.kind === objectKind);
   const parentGeneric = generics.find((s) => s.kind === objectKind);
   const relationshipSchema = parentSchema?.relationships?.find((r) => r?.name === relationshipTab);
   const relationshipGeneric = parentGeneric?.relationships?.find(

frontend/app/src/entities/nodes/object-template/object-template-autocomplete.tsx

@@ -0,0 +1,46 @@
+import { useObjects } from "@/entities/nodes/object/domain/get-objects.query";
+import { getNodeLabel } from "@/entities/nodes/object/utils/get-node-label";
+import { NodeObject } from "@/entities/nodes/types";
+import { TemplateSchema } from "@/entities/schema/types";
+import {
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxListProps,
+} from "@/shared/components/ui/combobox";
+import { Spinner } from "@/shared/components/ui/spinner";
+
+export interface ObjectTemplateAutocompleteProps extends Omit<ComboboxListProps, "onSelect"> {
+  templateSchema: TemplateSchema;
+  onSelect: (node: NodeObject) => void;
+}
+
+export function ObjectTemplateAutocomplete({
+  templateSchema,
+  onSelect,
+  ...props
+}: ObjectTemplateAutocompleteProps) {
+  const { data, isPending, error } = useObjects({
+    schema: templateSchema,
+    getAttributesVisible: (attributes) => attributes,
+    getRelationshipsVisible: (relationships) => relationships,
+  });
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  return (
+    <ComboboxList {...props}>
+      {isPending && <Spinner className="flex justify-center m-2" />}
+
+      <ComboboxEmpty>No template found</ComboboxEmpty>
+
+      {data?.pages.flat().map((node) => (
+        <ComboboxItem key={node.id} value={node.id} onSelect={() => onSelect(node)}>
+          <span className="truncate">{getNodeLabel(node)}</span>
+        </ComboboxItem>
+      ))}
+    </ComboboxList>
+  );
+}

frontend/app/src/entities/nodes/object-template/object-template-form.tsx

@@ -0,0 +1,106 @@
+import { ObjectTemplateAutocomplete } from "@/entities/nodes/object-template/object-template-autocomplete";
+import { NodeObject } from "@/entities/nodes/types";
+import { useSchema } from "@/entities/schema/ui/hooks/useSchema";
+import { Popover } from "@/shared/components/aria/popover";
+import ObjectForm, { ObjectFormProps } from "@/shared/components/form/object-form";
+import { classNames } from "@/shared/utils/common";
+import { FileBoxIcon, PlusIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button, ButtonProps, Dialog, DialogTrigger } from "react-aria-components";
+
+interface StartButtonProps extends ButtonProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  className?: string;
+  ref?: React.Ref<HTMLButtonElement>;
+}
+
+const StartButton = ({ icon, title, description, className, ...props }: StartButtonProps) => (
+  <Button
+    className={classNames(
+      "flex items-center gap-2 border border-dashed border-gray-400 p-4 rounded-lg hover:bg-gray-50",
+      className
+    )}
+    {...props}
+  >
+    <div className="bg-indigo-100 rounded-lg p-3">{icon}</div>
+
+    <div className="flex flex-col items-start gap-1">
+      <p className="text-sm font-medium">{title}</p>
+      <p className="text-xs text-gray-600">{description}</p>
+    </div>
+  </Button>
+);
+
+const StartFromTemplateButton = ({
+  objectTemplateSchema,
+  onSelect,
+}: {
+  objectTemplateSchema: any;
+  onSelect: (template: NodeObject | null) => void;
+}) => {
+  let buttonRef = useRef<HTMLButtonElement>(null);
+  let [buttonWidth, setButtonWidth] = useState<string | null>(null);
+  useEffect(() => {
+    if (buttonRef.current) {
+      setButtonWidth(buttonRef.current.offsetWidth + "px");
+    }
+  }, [buttonRef]);
+
+  return (
+    <DialogTrigger>
+      <StartButton
+        ref={buttonRef}
+        icon={<FileBoxIcon className="size-6" />}
+        title="Start from template"
+        description="Pick a premade object and customize it"
+      />
+
+      <Popover style={buttonWidth ? { width: buttonWidth } : undefined} placement="bottom start">
+        <Dialog>
+          <ObjectTemplateAutocomplete
+            autoFocus
+            templateSchema={objectTemplateSchema}
+            onSelect={onSelect}
+          />
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  );
+};
+
+export interface ObjectTemplateFormProps extends ObjectFormProps {
+  objectTemplateKind: string;
+}
+
+export default function ObjectTemplateForm({
+  objectTemplateKind,
+  ...props
+}: ObjectTemplateFormProps) {
+  const { schema: objectTemplateSchema } = useSchema(objectTemplateKind);
+  const [selectedObjectTemplate, setSelectedObjectTemplate] = useState<NodeObject | null>();
+
+  if (!objectTemplateSchema) {
+    return `Could not find template schema for ${objectTemplateKind}`;
+  }
+
+  if (selectedObjectTemplate !== undefined) {
+    return <ObjectForm {...props} objectTemplate={selectedObjectTemplate} />;
+  }
+
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <StartButton
+        icon={<PlusIcon className="size-6" />}
+        title="Start from scratch"
+        description="Create a new blank object"
+        onPress={() => setSelectedObjectTemplate(null)}
+      />
+      <StartFromTemplateButton
+        objectTemplateSchema={objectTemplateSchema}
+        onSelect={setSelectedObjectTemplate}
+      />
+    </div>
+  );
+}

frontend/app/src/entities/nodes/object/domain/get-objects.query.ts

@@ -1,22 +1,19 @@
 import { useCurrentBranch } from "@/entities/branches/ui/branches-provider";
-import { ModelSchema } from "@/entities/schema/types";
-import { ContextParams } from "@/shared/api/types";
-import { Filter } from "@/shared/hooks/useFilters";
+import { PaginationParams } from "@/shared/api/types";
 import { datetimeAtom } from "@/shared/stores/time.atom";
 import { infiniteQueryOptions, useInfiniteQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
-import { OBJECTS_PER_PAGE, getObjects } from "./get-objects";
+import { GetObjectsParams, OBJECTS_PER_PAGE, getObjects } from "./get-objects";
 
-type GetObjectsQueryParams = ContextParams & {
-  schema: ModelSchema;
-  filters?: Array<Filter>;
-};
+type GetObjectsQueryParams = Omit<GetObjectsParams, keyof PaginationParams>;
 
 export function getObjectsInfiniteQueryOptions({
   schema,
   filters,
   branchName,
   atDate,
+  getAttributesVisible,
+  getRelationshipsVisible,
 }: GetObjectsQueryParams) {
   return infiniteQueryOptions({
     queryKey: [branchName, atDate, "objects", schema.kind, JSON.stringify(filters)],
@@ -27,6 +24,8 @@ export function getObjectsInfiniteQueryOptions({
         branchName,
         atDate,
         filters,
+        getAttributesVisible,
+        getRelationshipsVisible,
       });
     },
     initialPageParam: 0,

frontend/app/src/entities/nodes/object/domain/get-objects.ts

@@ -1,7 +1,7 @@
 import { getAttributesVisibleInListView } from "@/entities/nodes/object/utils/get-attributes-visible-in-list";
 import { getRelationshipsVisibleInListView } from "@/entities/nodes/object/utils/get-relationships-visible-in-list";
 import { NodeObject } from "@/entities/nodes/types";
-import { ModelSchema } from "@/entities/schema/types";
+import { AttributeSchema, ModelSchema, RelationshipSchema } from "@/entities/schema/types";
 import graphqlClient from "@/shared/api/graphql/graphqlClientApollo";
 import {
   addAttributesToRequest,
@@ -19,13 +19,15 @@ export const OBJECTS_PER_PAGE = 40;
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////
 
-export type GetObjects = (
-  args: ContextParams &
-    PaginationParams & {
-      schema: ModelSchema;
-      filters?: Array<Filter>;
-    }
-) => Promise<Array<NodeObject>>;
+export type GetObjectsParams = ContextParams &
+  PaginationParams & {
+    schema: ModelSchema;
+    filters?: Array<Filter>;
+    getAttributesVisible?: (attributes: AttributeSchema[]) => AttributeSchema[];
+    getRelationshipsVisible?: (relationships: RelationshipSchema[]) => RelationshipSchema[];
+  };
+
+export type GetObjects = (args: GetObjectsParams) => Promise<Array<NodeObject>>;
 
 export const getObjects: GetObjects = async ({
   schema,
@@ -34,9 +36,11 @@ export const getObjects: GetObjects = async ({
   branchName,
   atDate,
   filters,
+  getAttributesVisible = getAttributesVisibleInListView,
+  getRelationshipsVisible = getRelationshipsVisibleInListView,
 }) => {
-  const attributesVisible = getAttributesVisibleInListView(schema.attributes ?? []);
-  const relationshipsVisible = getRelationshipsVisibleInListView(schema.relationships ?? []);
+  const attributesVisible = getAttributesVisible(schema.attributes ?? []);
+  const relationshipsVisible = getRelationshipsVisible(schema.relationships ?? []);
 
   const schemaKind = schema.kind as string;
   const kindFilter = filters?.find((filter) => filter.name === "kind__value");

frontend/app/src/entities/nodes/object/ui/object-table/cells/table-relationship-cell.tsx

@@ -1,5 +1,6 @@
 import { getNodeLabel } from "@/entities/nodes/object/utils/get-node-label";
 import {
+  NodeCore,
   NodeRelationship,
   NodeRelationshipMany,
   NodeRelationshipOne,
@@ -36,7 +37,7 @@ export function TableRelationshipCell({
   return nodes.map((node) => <RelationshipNodeDisplay key={node.id} node={node} />);
 }
 
-export function RelationshipNodeDisplay({ node }: NodeRelationshipOne) {
+export function RelationshipNodeDisplay({ node }: { node: NodeCore }) {
   const { schema } = useSchema(node.__typename);
 
   if (!schema) return `Schema for ${node.__typename} not found`;

frontend/app/src/entities/nodes/types.ts

@@ -16,7 +16,7 @@ export type NodeAttribute = {
 };
 
 export type NodeRelationshipOne = {
-  node: NodeCore;
+  node: NodeCore | null;
 };
 
 export type NodeRelationshipMany = {

frontend/app/src/entities/role-manager/ui/account-role-form.tsx

@@ -48,7 +48,7 @@ export const AccountRoleForm = ({
 
   const permissions = getRelationshipDefaultValue({
     relationshipData: currentObject?.permissions?.value,
-    peerField: "identifier",
+    relationshipName: "identifier",
   });
 
   const defaultValues = {

frontend/app/src/entities/schema/ui/schema-viewer.tsx

@@ -9,6 +9,7 @@ import { ModelSchema } from "@/entities/schema/types";
 import { isGenericSchema } from "@/entities/schema/utils/is-generic-schema";
 import { isNodeSchema } from "@/entities/schema/utils/is-node-schema";
 import { isProfileSchema } from "@/entities/schema/utils/is-profile-schema";
+import { isTemplateSchema } from "@/entities/schema/utils/is-template-schema";
 import { Button } from "@/shared/components/buttons/button-primitive";
 import { Badge } from "@/shared/components/ui/badge";
 import { classNames } from "@/shared/utils/common";
@@ -209,9 +210,15 @@ const Properties = ({ schema }: { schema: ModelSchema }) => {
         <PropertyRow title="Default filter" value={schema.default_filter} />
         <PropertyRow title="Order by" value={schema.order_by} />
         <PropertyRow title="Uniqueness constraints" value={schema.uniqueness_constraints} />
+      </div>
+
+      <div>
         {!isProfileSchema(schema) && (
           <PropertyRow title="Generate profile" value={schema.generate_profile} />
         )}
+        {!isTemplateSchema(schema) && (
+          <PropertyRow title="Generate template" value={schema.generate_template} />
+        )}
       </div>
 
       <div>