feat: record group add new (#8925)

Fix #8757 This PR is adding the Add new button on view groups. Also this PR fix an issue where the pending record can be draggable, and is causing error. <img width="1119" alt="Screenshot 2024-12-10 at 4 24 43 PM" src="https://github.com/user-attachments/assets/4fd01e99-c85e-4a06-a733-cbf3cc32957d"> It also start to issues with the way we're using Context. We're initializing pretty much all Context like this: ```typescript export const RecordTableContext = createContext<RecordTableContextProps>( {} as RecordTableContextProps, ); ``` This is causing issues when by mistake we use the context like this outside the Provider hierarchy: ```typescript const context = useContext(RecordTableContext); ``` This is going to fail silently, and all the context variables become undefined... To fix this I've introduced an util called `createRequiredContext`, this one is returning an array containing the provider and the hook to retrieve the context. The context is initialized to undefined inside this utility, this way we can check if the value has been initialized with the provider to check if we're inside it. It'll throw an error if this one is used outside the provider. The return values are properly typed, so `undefined` is not added to the value of the Context. I'll create a followup ticket to use this new utility function, if that's ok and replace it everywhere in the codebase. We can also consider adding a eslint rule to warn about the use of `createContext` directly.
twentyhq · Dec 12, 2024 · d7da73f · d7da73f
1 parent 182ebb6
commit d7da73f
Show file tree

Hide file tree

Showing 81 changed files with 1,544 additions and 682 deletions.
diff --git a/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx b/...ules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
@@ -9,7 +9,7 @@ import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdow
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { useSelectFilter } from '@/object-record/object-filter-dropdown/hooks/useSelectFilter';
 import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -20,7 +20,6 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useContext } from 'react';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 
@@ -57,7 +56,7 @@ type ObjectFilterDropdownFilterSelectProps = {
 export const ObjectFilterDropdownFilterSelect = ({
   isAdvancedFilterButtonVisible,
 }: ObjectFilterDropdownFilterSelectProps) => {
-  const { recordIndexId } = useContext(RecordIndexRootPropsContext);
+  const { recordIndexId } = useRecordIndexContextOrThrow();
 
   const {
     setObjectFilterDropdownSearchInput,

diff --git a/...d/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx b/...d/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx
@@ -1,9 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
+import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
 import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
+import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
@@ -19,13 +22,17 @@ import { FieldMetadataType } from '~/generated/graphql';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 
 const meta: Meta<typeof MultipleFiltersDropdownButton> = {
   title:
     'Modules/ObjectRecord/ObjectFilterDropdown/MultipleFiltersDropdownButton',
   component: MultipleFiltersDropdownButton,
   decorators: [
     (Story) => {
+      const companyObjectMetadataItem = generatedMockObjectMetadataItems.find(
+        (item) => item.nameSingular === CoreObjectNameSingular.Company,
+      )!;
       const instanceId = 'entity-tasks-filter-scope';
       const setAvailableFilterDefinitions = useSetRecoilComponentStateV2(
         availableFilterDefinitionsComponentState,
@@ -91,19 +98,30 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
         },
       ]);
       return (
-        <ObjectFilterDropdownComponentInstanceContext.Provider
-          value={{ instanceId }}
+        <RecordIndexContextProvider
+          value={{
+            indexIdentifierUrl: () => '',
+            onIndexRecordsLoaded: () => {},
+            objectNamePlural: CoreObjectNamePlural.Company,
+            objectNameSingular: CoreObjectNameSingular.Company,
+            objectMetadataItem: companyObjectMetadataItem,
+            recordIndexId: instanceId,
+          }}
         >
-          <RecordTableComponentInstanceContext.Provider
-            value={{ instanceId: instanceId, onColumnsChange: () => {} }}
+          <ObjectFilterDropdownComponentInstanceContext.Provider
+            value={{ instanceId }}
           >
-            <ViewComponentInstanceContext.Provider value={{ instanceId }}>
-              <ObjectFilterDropdownScope filterScopeId={instanceId}>
-                <Story />
-              </ObjectFilterDropdownScope>
-            </ViewComponentInstanceContext.Provider>
-          </RecordTableComponentInstanceContext.Provider>
-        </ObjectFilterDropdownComponentInstanceContext.Provider>
+            <RecordTableComponentInstanceContext.Provider
+              value={{ instanceId: instanceId, onColumnsChange: () => {} }}
+            >
+              <ViewComponentInstanceContext.Provider value={{ instanceId }}>
+                <ObjectFilterDropdownScope filterScopeId={instanceId}>
+                  <Story />
+                </ObjectFilterDropdownScope>
+              </ViewComponentInstanceContext.Provider>
+            </RecordTableComponentInstanceContext.Provider>
+          </ObjectFilterDropdownComponentInstanceContext.Provider>
+        </RecordIndexContextProvider>
       );
     },
     ObjectMetadataItemsDecorator,

diff --git a/...d/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx b/...d/object-options-dropdown/components/__stories__/ObjectOptionsDropdownContent.stories.tsx
@@ -7,7 +7,7 @@ import { ObjectOptionsDropdownContent } from '@/object-record/object-options-dro
 import { OBJECT_OPTIONS_DROPDOWN_ID } from '@/object-record/object-options-dropdown/constants/ObjectOptionsDropdownId';
 import { ObjectOptionsDropdownContext } from '@/object-record/object-options-dropdown/states/contexts/ObjectOptionsDropdownContext';
 import { ObjectOptionsContentId } from '@/object-record/object-options-dropdown/types/ObjectOptionsContentId';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
@@ -76,11 +76,10 @@ const createStory = (contentId: ObjectOptionsContentId | null): Story => ({
       )!;
 
       return (
-        <RecordIndexRootPropsContext.Provider
+        <RecordIndexContextProvider
           value={{
             indexIdentifierUrl: () => '',
             onIndexRecordsLoaded: () => {},
-            onCreateRecord: () => {},
             objectNamePlural: 'companies',
             objectNameSingular: 'company',
             objectMetadataItem: companyObjectMetadataItem,
@@ -102,7 +101,7 @@ const createStory = (contentId: ObjectOptionsContentId | null): Story => ({
               <Story />
             </DropdownMenu>
           </ObjectOptionsDropdownContext.Provider>
-        </RecordIndexRootPropsContext.Provider>
+        </RecordIndexContextProvider>
       );
     },
   ],

diff --git a/.../object-record/object-options-dropdown/hooks/__tests__/useSearchRecordGroupField.test.tsx b/.../object-record/object-options-dropdown/hooks/__tests__/useSearchRecordGroupField.test.tsx
@@ -1,5 +1,5 @@
 import { useSearchRecordGroupField } from '@/object-record/object-options-dropdown/hooks/useSearchRecordGroupField';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { renderHook } from '@testing-library/react';
 import { act } from 'react';
@@ -11,13 +11,13 @@ describe('useSearchRecordGroupField', () => {
     renderHook(() => useSearchRecordGroupField(), {
       wrapper: ({ children }) => (
         <RecoilRoot>
-          <RecordIndexRootPropsContext.Provider value={contextValue}>
+          <RecordIndexContextProvider value={contextValue}>
             <ViewComponentInstanceContext.Provider
               value={{ instanceId: 'myViewInstanceId' }}
             >
               {children}
             </ViewComponentInstanceContext.Provider>
-          </RecordIndexRootPropsContext.Provider>
+          </RecordIndexContextProvider>
         </RecoilRoot>
       ),
     });

diff --git a/...ront/src/modules/object-record/object-options-dropdown/hooks/useSearchRecordGroupField.ts b/...ront/src/modules/object-record/object-options-dropdown/hooks/useSearchRecordGroupField.ts
@@ -1,11 +1,11 @@
 import { objectOptionsDropdownSearchInputComponentState } from '@/object-record/object-options-dropdown/states/objectOptionsDropdownSearchInputComponentState';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const useSearchRecordGroupField = () => {
-  const { objectMetadataItem } = useContext(RecordIndexRootPropsContext);
+  const { objectMetadataItem } = useRecordIndexContextOrThrow();
 
   const [recordGroupFieldSearchInput, setRecordGroupFieldSearchInput] =
     useRecoilComponentStateV2(objectOptionsDropdownSearchInputComponentState);

diff --git a/...nt/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/...nt/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@@ -5,7 +5,7 @@ import { IconChevronDown, MenuItem, useIcons } from 'twenty-ui';
 import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
 import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
 import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -16,7 +16,6 @@ import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/Styl
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useContext } from 'react';
 import { SORT_DIRECTIONS } from '../types/SortDirection';
 
 export const StyledInput = styled.input`
@@ -77,7 +76,7 @@ export const ObjectSortDropdownButton = ({
     resetSearchInput,
   } = useObjectSortDropdown();
 
-  const { recordIndexId } = useContext(RecordIndexRootPropsContext);
+  const { recordIndexId } = useRecordIndexContextOrThrow();
 
   const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
 

diff --git a/...rd-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx b/...rd-field/meta-types/display/components/__stories__/perf/ChipFieldDisplay.perf.stories.tsx
@@ -1,15 +1,41 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ComponentDecorator } from 'twenty-ui';
 
+import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { ChipFieldDisplay } from '@/object-record/record-field/meta-types/display/components/ChipFieldDisplay';
+import { RecordIndexContextProvider } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator';
 import { getFieldDecorator } from '~/testing/decorators/getFieldDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
+import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
 
 const meta: Meta = {
   title: 'UI/Data/Field/Display/ChipFieldDisplay',
   decorators: [
+    (Story) => {
+      const instanceId = 'child-field-display-scope';
+
+      const companyObjectMetadataItem = generatedMockObjectMetadataItems.find(
+        (item) => item.nameSingular === CoreObjectNameSingular.Company,
+      )!;
+
+      return (
+        <RecordIndexContextProvider
+          value={{
+            indexIdentifierUrl: () => '',
+            onIndexRecordsLoaded: () => {},
+            objectNamePlural: CoreObjectNamePlural.Company,
+            objectNameSingular: CoreObjectNameSingular.Company,
+            objectMetadataItem: companyObjectMetadataItem,
+            recordIndexId: instanceId,
+          }}
+        >
+          <Story />
+        </RecordIndexContextProvider>
+      );
+    },
     MemoryRouterDecorator,
     ChipGeneratorsDecorator,
     getFieldDecorator('person', 'name'),

diff --git a/...ages/twenty-front/src/modules/object-record/record-group/hooks/useCurrentRecordGroupId.ts b/...ages/twenty-front/src/modules/object-record/record-group/hooks/useCurrentRecordGroupId.ts
@@ -1,7 +1,7 @@
 import { RecordGroupContext } from '@/object-record/record-group/states/context/RecordGroupContext';
 import { useContext } from 'react';
 
-export const useCurrentRecordGroupId = () => {
+export const useCurrentRecordGroupId = (): string => {
   const context = useContext(RecordGroupContext);
 
   if (!context) {

diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts
@@ -5,7 +5,7 @@ import { RecordBoardColumnContext } from '@/object-record/record-board/record-bo
 import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/useRecordGroupVisibility';
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
 import { RecordGroupAction } from '@/object-record/record-group/types/RecordGroupActions';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useCallback, useContext, useMemo } from 'react';
@@ -17,9 +17,7 @@ export const useRecordGroupActions = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const { objectNameSingular, recordIndexId } = useContext(
-    RecordIndexRootPropsContext,
-  );
+  const { objectNameSingular, recordIndexId } = useRecordIndexContextOrThrow();
 
   const { columnDefinition: recordGroupDefinition } = useContext(
     RecordBoardColumnContext,

diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroup.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useSetRecordGroup.ts
@@ -2,15 +2,14 @@ import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/s
 import { recordGroupFieldMetadataComponentState } from '@/object-record/record-group/states/recordGroupFieldMetadataComponentState';
 import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState';
 import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
-import { useContext } from 'react';
 import { useRecoilCallback } from 'recoil';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 export const useSetRecordGroup = (viewId?: string) => {
-  const { objectMetadataItem } = useContext(RecordIndexRootPropsContext);
+  const { objectMetadataItem } = useRecordIndexContextOrThrow();
 
   const recordIndexRecordGroupIdsState = useRecoilComponentCallbackStateV2(
     recordGroupIdsComponentState,

diff --git a/...s/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/...s/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
@@ -17,7 +17,7 @@ import { recordIndexSortsState } from '@/object-record/record-index/states/recor
 import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
 
 import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
@@ -39,7 +39,7 @@ import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
 import { mapViewGroupsToRecordGroupDefinitions } from '@/views/utils/mapViewGroupsToRecordGroupDefinitions';
 import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useCallback, useContext } from 'react';
+import { useCallback } from 'react';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 const StyledContainer = styled.div`
@@ -67,7 +67,7 @@ export const RecordIndexContainer = () => {
     recordIndexId,
     objectMetadataItem,
     objectNameSingular,
-  } = useContext(RecordIndexRootPropsContext);
+  } = useRecordIndexContextOrThrow();
 
   const setRecordGroup = useSetRecordGroup(recordIndexId);
 

diff --git a/...record-index/components/RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect.tsx b/...record-index/components/RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect.tsx
@@ -5,11 +5,11 @@ import { computeContextStoreFilters } from '@/context-store/utils/computeContext
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { useFindManyRecordIndexTableParams } from '@/object-record/record-index/hooks/useFindManyRecordIndexTableParams';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 
 export const RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect =
   () => {
@@ -21,7 +21,7 @@ export const RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect =
       contextStoreTargetedRecordsRuleComponentState,
     );
 
-    const { objectNamePlural } = useContext(RecordIndexRootPropsContext);
+    const { objectNamePlural } = useRecordIndexContextOrThrow();
 
     const { objectNameSingular } = useObjectNameSingularFromPlural({
       objectNamePlural,