feat: create custom object and update edited object names (#2220)

Closes #2155, Closes #2153

front/src/modules/metadata/hooks/useObjectMetadata.ts

@@ -1,5 +1,8 @@
 import { MetadataObject } from '../types/MetadataObject';
+import { formatMetadataObjectInput } from '../utils/formatMetadataObjectInput';
+import { getObjectSlug } from '../utils/getObjectSlug';
 
+import { useCreateOneMetadataObject } from './useCreateOneMetadataObject';
 import { useFindManyMetadataObjects } from './useFindManyMetadataObjects';
 import { useUpdateOneMetadataObject } from './useUpdateOneMetadataObject';
 
@@ -13,17 +16,30 @@ export const useObjectMetadata = () => {
     ({ isActive }) => !isActive,
   );
 
+  const findActiveObjectBySlug = (slug: string) =>
+    activeMetadataObjects.find(
+      (activeObject) => getObjectSlug(activeObject) === slug,
+    );
+
+  const { createOneMetadataObject } = useCreateOneMetadataObject();
   const { updateOneMetadataObject } = useUpdateOneMetadataObject();
 
-  const editObject = (metadataObject: MetadataObject) =>
+  const createObject = (
+    input: Pick<
+      MetadataObject,
+      'labelPlural' | 'labelSingular' | 'icon' | 'description'
+    >,
+  ) => createOneMetadataObject(formatMetadataObjectInput(input));
+
+  const editObject = (
+    input: Pick<
+      MetadataObject,
+      'id' | 'labelPlural' | 'labelSingular' | 'icon' | 'description'
+    >,
+  ) =>
     updateOneMetadataObject({
-      idToUpdate: metadataObject.id,
-      updatePayload: {
-        description: metadataObject.description ?? null,
-        icon: metadataObject.icon,
-        labelPlural: metadataObject.labelPlural,
-        labelSingular: metadataObject.labelSingular,
-      },
+      idToUpdate: input.id,
+      updatePayload: formatMetadataObjectInput(input),
     });
 
   const activateObject = (metadataObject: MetadataObject) =>
@@ -40,9 +56,11 @@ export const useObjectMetadata = () => {
 
   return {
     activateObject,
-    disableObject,
     activeObjects: activeMetadataObjects,
+    createObject,
     disabledObjects: disabledMetadataObjects,
+    disableObject,
     editObject,
+    findActiveObjectBySlug,
   };
 };

front/src/modules/metadata/hooks/useUpdateOneMetadataObject.ts

@@ -29,7 +29,13 @@ export const useUpdateOneMetadataObject = () => {
     idToUpdate: UpdateOneMetadataObjectMutationVariables['idToUpdate'];
     updatePayload: Pick<
       UpdateOneMetadataObjectMutationVariables['updatePayload'],
-      'description' | 'icon' | 'isActive' | 'labelPlural' | 'labelSingular'
+      | 'description'
+      | 'icon'
+      | 'isActive'
+      | 'labelPlural'
+      | 'labelSingular'
+      | 'namePlural'
+      | 'nameSingular'
     >;
   }) => {
     return await mutate({

front/src/modules/metadata/utils/formatMetadataObjectInput.ts

@@ -0,0 +1,18 @@
+import toCamelCase from 'lodash.camelcase';
+import upperFirst from 'lodash.upperfirst';
+
+import { MetadataObject } from '../types/MetadataObject';
+
+export const formatMetadataObjectInput = (
+  input: Pick<
+    MetadataObject,
+    'labelPlural' | 'labelSingular' | 'icon' | 'description'
+  >,
+) => ({
+  description: input.description?.trim() ?? null,
+  icon: input.icon,
+  labelPlural: input.labelPlural.trim(),
+  labelSingular: input.labelSingular.trim(),
+  namePlural: upperFirst(toCamelCase(input.labelPlural.trim())),
+  nameSingular: upperFirst(toCamelCase(input.labelSingular.trim())),
+});

front/src/modules/metadata/utils/getObjectSlug.ts

@@ -0,0 +1,7 @@
+import toKebabCase from 'lodash.kebabcase';
+
+import { MetadataObject } from '../types/MetadataObject';
+
+export const getObjectSlug = (
+  metadataObject: Pick<MetadataObject, 'labelPlural'>,
+) => toKebabCase(metadataObject.labelPlural);

front/src/modules/metadata/utils/validateMetadataObjectLabel.ts

@@ -0,0 +1,4 @@
+const metadataObjectLabelValidationPattern = /^[a-zA-Z][a-zA-Z0-9 ]*$/;
+
+export const validateMetadataObjectLabel = (value: string) =>
+  !!value.match(metadataObjectLabelValidationPattern);

front/src/modules/settings/data-model/components/SettingsObjectFormSection.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { validateMetadataObjectLabel } from '@/metadata/utils/validateMetadataObjectLabel';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { TextArea } from '@/ui/input/components/TextArea';
 import { TextInput } from '@/ui/input/components/TextInput';
@@ -43,7 +44,11 @@ export const SettingsObjectFormSection = ({
         label="Singular"
         placeholder="Investor"
         value={singularName}
-        onChange={(value) => onChange?.({ labelSingular: value })}
+        onChange={(value) => {
+          if (!value || validateMetadataObjectLabel(value)) {
+            onChange?.({ labelSingular: value });
+          }
+        }}
         disabled={disabled}
         fullWidth
       />
@@ -51,7 +56,11 @@ export const SettingsObjectFormSection = ({
         label="Plural"
         placeholder="Investors"
         value={pluralName}
-        onChange={(value) => onChange?.({ labelPlural: value })}
+        onChange={(value) => {
+          if (!value || validateMetadataObjectLabel(value)) {
+            onChange?.({ labelPlural: value });
+          }
+        }}
         disabled={disabled}
         fullWidth
       />

front/src/modules/types/SettingsPath.ts

@@ -2,11 +2,11 @@ export enum SettingsPath {
   ProfilePage = 'profile',
   Experience = 'profile/experience',
   Objects = 'objects',
-  ObjectDetail = 'objects/:pluralObjectName',
-  ObjectEdit = 'objects/:pluralObjectName/edit',
-  ObjectNewFieldStep1 = 'objects/:pluralObjectName/new-field/step-1',
-  ObjectNewFieldStep2 = 'objects/:pluralObjectName/new-field/step-2',
-  ObjectFieldEdit = 'objects/:pluralObjectName/:fieldName',
+  ObjectDetail = 'objects/:objectSlug',
+  ObjectEdit = 'objects/:objectSlug/edit',
+  ObjectNewFieldStep1 = 'objects/:objectSlug/new-field/step-1',
+  ObjectNewFieldStep2 = 'objects/:objectSlug/new-field/step-2',
+  ObjectFieldEdit = 'objects/:objectSlug/:fieldName',
   NewObject = 'objects/new',
   WorkspaceMembersPage = 'workspace-members',
   Workspace = 'workspace',