Added display name for workflow definition (#2205)

* refactor(backoffice-v2): changed case creation to use displayName over name

* refactor(backoffice-v2): changed fallback of display name

apps/backoffice-v2/src/domains/workflow-definitions/fetchers.ts

@@ -25,6 +25,7 @@ export const WorkflowDefinitionConfigSchema = z
 
 export const WorkflowDefinitionByIdSchema = ObjectWithIdSchema.extend({
   name: z.string(),
+  displayName: z.string().nullable(),
   version: z.number(),
   variant: z.string().default(WorkflowDefinitionVariant.DEFAULT),
   contextSchema: z.record(z.any(), z.any()).nullable(),

apps/backoffice-v2/src/pages/Entities/Entities.page.tsx

@@ -24,7 +24,7 @@ export const Entities: FunctionComponent = () => {
     totalPages,
     caseCount,
     skeletonEntities,
-    showCaseCreation,
+    isManualCaseCreationEnabled,
   } = useEntities();
 
   return (
@@ -39,8 +39,8 @@ export const Entities: FunctionComponent = () => {
       >
         <MotionScrollArea
           className={ctw({
-            'h-[calc(100vh-300px)]': showCaseCreation,
-            'h-[calc(100vh-240px)]': !showCaseCreation,
+            'h-[calc(100vh-300px)]': isManualCaseCreationEnabled,
+            'h-[calc(100vh-240px)]': !isManualCaseCreationEnabled,
           })}
         >
           <Cases.List>
@@ -72,7 +72,7 @@ export const Entities: FunctionComponent = () => {
         <div className={`divider my-0 px-4`}></div>
         <div className="flex flex-col gap-5 px-4">
           <Pagination onPaginate={onPaginate} page={page} totalPages={totalPages} />
-          <CaseCreation />
+          {isManualCaseCreationEnabled && <CaseCreation />}
         </div>
       </Cases>
       {/* Display skeleton individual when loading the entities list */}

apps/backoffice-v2/src/pages/Entities/components/CaseCreation/CaseCreation.tsx

@@ -6,12 +6,15 @@ import { withCaseCreation } from '@/pages/Entities/components/CaseCreation/conte
 import { useCaseCreationContext } from '@/pages/Entities/components/CaseCreation/context/case-creation-context/hooks/useCaseCreationContext';
 import { useCaseCreationWorkflowDefinition } from '@/pages/Entities/components/CaseCreation/hooks/useCaseCreationWorkflowDefinition';
 import { Plus } from 'lucide-react';
+import { valueOrNA } from '@/common/utils/value-or-na/value-or-na';
+import { ctw } from '@/common/utils/ctw/ctw';
+import { titleCase } from 'string-ts';
 
 export const CaseCreation = withCaseCreation(() => {
   const { workflowDefinition, isLoading, error } = useCaseCreationWorkflowDefinition();
   const { isOpen, setIsOpen: setOpen } = useCaseCreationContext();
-
-  if (!workflowDefinition?.config?.enableManualCreation) return null;
+  const workflowDefinitionName =
+    workflowDefinition?.displayName || titleCase(workflowDefinition?.name ?? '');
 
   return (
     <Sheet open={isOpen} onOpenChange={setOpen}>
@@ -29,13 +32,25 @@ export const CaseCreation = withCaseCreation(() => {
         {!isLoading && workflowDefinition ? (
           <div className="flex flex-col px-[60px] py-[72px]">
             <div className="flex flex-col">
-              <span className="pb-3 text-base font-bold capitalize">
-                {workflowDefinition?.name?.replaceAll('_', ' ')}
+              <span
+                className={ctw('pb-3 text-base font-bold capitalize', {
+                  'text-slate-400': !workflowDefinitionName,
+                })}
+              >
+                {valueOrNA(workflowDefinitionName)}
               </span>
               <h1 className="leading-0 pb-5 text-3xl font-bold">Add a Case</h1>
               <p className="pb-10">
-                Create a {workflowDefinition?.name} case by filling in the information below. Please
-                ensure all the required fields are filled out correctly.
+                Create a{' '}
+                <span
+                  className={ctw({
+                    'text-slate-400': !workflowDefinitionName,
+                  })}
+                >
+                  {valueOrNA(workflowDefinitionName)}
+                </span>{' '}
+                case by filling in the information below. Please ensure all the required fields are
+                filled out correctly.
               </p>
               <div className="flex flex-col gap-6">
                 <h2 className="fontbold text-2xl">Case information</h2>

apps/backoffice-v2/src/pages/Entities/hooks/useEntities/useEntities.tsx

@@ -97,7 +97,6 @@ export const useEntities = () => {
     onFilter: onFilterChange,
     onSortBy: onSortByChange,
     onSortDirToggle,
-    showCaseCreation: workflowDefinition?.config?.enableManualCreation,
     search: searchValue,
     cases: data?.data,
     caseCount: data?.meta?.totalItems || 0,
@@ -106,5 +105,6 @@ export const useEntities = () => {
     totalPages,
     skeletonEntities,
     entity,
+    isManualCaseCreationEnabled: workflowDefinition?.config?.enableManualCreation,
   };
 };

services/workflows-service/prisma/migrations/20240314123948_definition_display_name/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "WorkflowDefinition" ADD COLUMN     "displayName" TEXT;

services/workflows-service/prisma/schema.prisma

@@ -146,6 +146,7 @@ model Business {
 
 model WorkflowDefinition {
   id              String  @id @default(cuid())
+  displayName     String?
   reviewMachineId String?
   name            String
   version         Int     @default(1)