diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateByGroupNoRecordAtAll.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateByGroupNoRecordAtAll.tsx index 8259f8172..08043fe86 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateByGroupNoRecordAtAll.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateByGroupNoRecordAtAll.tsx @@ -5,6 +5,8 @@ import { RecordIndexAddRecordInGroupDropdown } from '@/object-record/record-inde import { recordIndexRecordGroupHideComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordGroupHideComponentFamilyState'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay'; +import { getEmptyStateSubTitle } from '@/object-record/record-table/empty-state/utils/getEmptyStateSubTitle'; +import { getEmptyStateTitle } from '@/object-record/record-table/empty-state/utils/getEmptyStateTitle'; import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2'; import { ViewType } from '@/views/types/ViewType'; @@ -20,9 +22,15 @@ export const RecordTableEmptyStateByGroupNoRecordAtAll = () => { const buttonTitle = `Add a ${objectLabel}`; - const title = `Add your first ${objectLabel}`; + const title = getEmptyStateTitle( + objectMetadataItem.nameSingular, + objectLabel, + ); - const subTitle = `Use our API or add your first ${objectLabel} manually`; + const subTitle = getEmptyStateSubTitle( + objectMetadataItem.nameSingular, + objectLabel, + ); const handleButtonClick = () => { // When we have no records in the group, we want to show the empty state diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoGroupNoRecordAtAll.tsx b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoGroupNoRecordAtAll.tsx index 540a45366..0ae390a9a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoGroupNoRecordAtAll.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/components/RecordTableEmptyStateNoGroupNoRecordAtAll.tsx @@ -3,6 +3,8 @@ import { IconPlus } from 'twenty-ui'; import { useObjectLabel } from '@/object-metadata/hooks/useObjectLabel'; import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay'; +import { getEmptyStateSubTitle } from '@/object-record/record-table/empty-state/utils/getEmptyStateSubTitle'; +import { getEmptyStateTitle } from '@/object-record/record-table/empty-state/utils/getEmptyStateTitle'; import { useCreateNewTableRecord } from '@/object-record/record-table/hooks/useCreateNewTableRecords'; export const RecordTableEmptyStateNoGroupNoRecordAtAll = () => { @@ -21,9 +23,15 @@ export const RecordTableEmptyStateNoGroupNoRecordAtAll = () => { const buttonTitle = `Add a ${objectLabel}`; - const title = `Add your first ${objectLabel}`; + const title = getEmptyStateTitle( + objectMetadataItem.nameSingular, + objectLabel, + ); - const subTitle = `Use our API or add your first ${objectLabel} manually`; + const subTitle = getEmptyStateSubTitle( + objectMetadataItem.nameSingular, + objectLabel, + ); return ( { + it('should return the correct sub title for workflow version', () => { + const subTitle = getEmptyStateSubTitle( + CoreObjectNameSingular.WorkflowVersion, + 'Workflow Version', + ); + expect(subTitle).toBe( + 'Create a workflow and return here to view its versions', + ); + }); + + it('should return the correct sub title for workflow run', () => { + const subTitle = getEmptyStateSubTitle( + CoreObjectNameSingular.WorkflowRun, + 'Workflow Run', + ); + expect(subTitle).toBe( + 'Run a workflow and return here to view its executions', + ); + }); + + it('should return the correct sub title for other object', () => { + const subTitle = getEmptyStateSubTitle('object', 'Object'); + expect(subTitle).toBe('Use our API or add your first Object manually'); + }); +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/utils/__tests__/getEmptyStateTitle.test.ts b/packages/twenty-front/src/modules/object-record/record-table/empty-state/utils/__tests__/getEmptyStateTitle.test.ts new file mode 100644 index 000000000..03442b7da --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/utils/__tests__/getEmptyStateTitle.test.ts @@ -0,0 +1,25 @@ +import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; +import { getEmptyStateTitle } from '../getEmptyStateTitle'; + +describe('getEmptyStateTitle', () => { + it('should return the correct title for workflow version', () => { + const title = getEmptyStateTitle( + CoreObjectNameSingular.WorkflowVersion, + 'Workflow Version', + ); + expect(title).toBe('No workflow versions yet'); + }); + + it('should return the correct title for workflow run', () => { + const title = getEmptyStateTitle( + CoreObjectNameSingular.WorkflowRun, + 'Workflow Run', + ); + expect(title).toBe('No workflow runs yet'); + }); + + it('should return the correct title for other object', () => { + const title = getEmptyStateTitle('object', 'Object'); + expect(title).toBe('Add your first Object'); + }); +}); diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/utils/getEmptyStateSubTitle.ts b/packages/twenty-front/src/modules/object-record/record-table/empty-state/utils/getEmptyStateSubTitle.ts new file mode 100644 index 000000000..f1adf0f4d --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/utils/getEmptyStateSubTitle.ts @@ -0,0 +1,16 @@ +import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; + +export const getEmptyStateSubTitle = ( + objectNameSingular: string, + objectLabel: string, +) => { + if (objectNameSingular === CoreObjectNameSingular.WorkflowVersion) { + return 'Create a workflow and return here to view its versions'; + } + + if (objectNameSingular === CoreObjectNameSingular.WorkflowRun) { + return 'Run a workflow and return here to view its executions'; + } + + return `Use our API or add your first ${objectLabel} manually`; +}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/empty-state/utils/getEmptyStateTitle.ts b/packages/twenty-front/src/modules/object-record/record-table/empty-state/utils/getEmptyStateTitle.ts new file mode 100644 index 000000000..8b24ef594 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-table/empty-state/utils/getEmptyStateTitle.ts @@ -0,0 +1,16 @@ +import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; + +export const getEmptyStateTitle = ( + objectNameSingular: string, + objectLabel: string, +) => { + if (objectNameSingular === CoreObjectNameSingular.WorkflowVersion) { + return 'No workflow versions yet'; + } + + if (objectNameSingular === CoreObjectNameSingular.WorkflowRun) { + return 'No workflow runs yet'; + } + + return `Add your first ${objectLabel}`; +};