fix: display label identifier field input in Show Page (#3063)

* fix: display label identifier field input in Show Page Fixes #3003 * Cleaned a bit after comments --------- Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2023-12-20 18:52:02 +01:00
parent b1841d0e2f
commit a5f28b4395
10 changed files with 151 additions and 89 deletions
--- a/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx
+++ b/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx
@ -5,6 +5,7 @@ import { CompanyTeam } from '@/companies/components/CompanyTeam';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
+import { parseFieldType } from '@/object-metadata/utils/parseFieldType';
 import { FieldContext } from '@/object-record/field/contexts/FieldContext';
 import { entityFieldsFamilyState } from '@/object-record/field/states/entityFieldsFamilyState';
 import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
@ -25,7 +26,11 @@ import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSu
 import { ShowPageRecoilScopeContext } from '@/ui/layout/states/ShowPageRecoilScopeContext';
 import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { FileFolder, useUploadImageMutation } from '~/generated/graphql';
+import {
+  FieldMetadataType,
+  FileFolder,
+  useUploadImageMutation,
+} from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';

 import { useFindOneRecord } from '../hooks/useFindOneRecord';
@ -41,9 +46,10 @@ export const RecordShowPage = () => {
    throw new Error(`Object name is not defined`);
  }

-  const { objectMetadataItem } = useObjectMetadataItem({
-    objectNameSingular,
-  });
+  const { objectMetadataItem, labelIdentifierFieldMetadata } =
+    useObjectMetadataItem({
+      objectNameSingular,
+    });

  const { identifiersMapper } = useRelationPicker();

@ -171,6 +177,16 @@ export const RecordShowPage = () => {
    });
  };

+  const fieldMetadataItemsToShow = [...objectMetadataItem.fields]
+    .sort((fieldMetadataItemA, fieldMetadataItemB) =>
+      fieldMetadataItemA.name.localeCompare(fieldMetadataItemB.name),
+    )
+    .filter(isFieldMetadataItemAvailable)
+    .filter(
+      (fieldMetadataItem) =>
+        fieldMetadataItem.id !== labelIdentifierFieldMetadata?.id,
+    );
+
  return (
    <PageContainer>
      <PageTitle title={pageName} />
@ -204,9 +220,37 @@ export const RecordShowPage = () => {
                  <ShowPageSummaryCard
                    id={record.id}
                    logoOrAvatar={recordIdentifiers?.avatarUrl}
-                    title={recordIdentifiers?.name ?? 'No name'}
+                    avatarPlaceholder={recordIdentifiers?.name ?? ''}
                    date={record.createdAt ?? ''}
-                    renderTitleEditComponent={() => <></>}
+                    title={
+                      <FieldContext.Provider
+                        value={{
+                          entityId: record.id,
+                          recoilScopeId:
+                            record.id + labelIdentifierFieldMetadata?.id,
+                          isLabelIdentifier: false,
+                          fieldDefinition: {
+                            type: parseFieldType(
+                              labelIdentifierFieldMetadata?.type ||
+                                FieldMetadataType.Text,
+                            ),
+                            iconName: '',
+                            fieldMetadataId:
+                              labelIdentifierFieldMetadata?.id ?? '',
+                            label: labelIdentifierFieldMetadata?.label || '',
+                            metadata: {
+                              fieldName:
+                                labelIdentifierFieldMetadata?.name || '',
+                            },
+                          },
+                          useUpdateEntityMutation:
+                            useUpdateOneObjectRecordMutation,
+                          hotkeyScope: InlineCellHotkeyScope.InlineCell,
+                        }}
+                      >
+                        <RecordInlineCell />
+                      </FieldContext.Provider>
+                    }
                    avatarType={recordIdentifiers?.avatarType ?? 'rounded'}
                    onUploadPicture={
                      objectNameSingular === 'person'
@ -215,35 +259,29 @@ export const RecordShowPage = () => {
                    }
                  />
                  <PropertyBox extraPadding={true}>
-                    {objectMetadataItem &&
-                      [...objectMetadataItem.fields]
-                        .sort((a, b) =>
-                          a.name === 'name' ? -1 : a.name.localeCompare(b.name),
-                        )
-                        .filter(isFieldMetadataItemAvailable)
-                        .map((metadataField, index) => {
-                          return (
-                            <FieldContext.Provider
-                              key={record.id + metadataField.id}
-                              value={{
-                                entityId: record.id,
-                                recoilScopeId: record.id + metadataField.id,
-                                isLabelIdentifier: false,
-                                fieldDefinition:
-                                  formatFieldMetadataItemAsColumnDefinition({
-                                    field: metadataField,
-                                    position: index,
-                                    objectMetadataItem,
-                                  }),
-                                useUpdateEntityMutation:
-                                  useUpdateOneObjectRecordMutation,
-                                hotkeyScope: InlineCellHotkeyScope.InlineCell,
-                              }}
-                            >
-                              <RecordInlineCell />
-                            </FieldContext.Provider>
-                          );
-                        })}
+                    {fieldMetadataItemsToShow.map(
+                      (fieldMetadataItem, index) => (
+                        <FieldContext.Provider
+                          key={record.id + fieldMetadataItem.id}
+                          value={{
+                            entityId: record.id,
+                            recoilScopeId: record.id + fieldMetadataItem.id,
+                            isLabelIdentifier: false,
+                            fieldDefinition:
+                              formatFieldMetadataItemAsColumnDefinition({
+                                field: fieldMetadataItem,
+                                position: index,
+                                objectMetadataItem,
+                              }),
+                            useUpdateEntityMutation:
+                              useUpdateOneObjectRecordMutation,
+                            hotkeyScope: InlineCellHotkeyScope.InlineCell,
+                          }}
+                        >
+                          <RecordInlineCell />
+                        </FieldContext.Provider>
+                      ),
+                    )}
                  </PropertyBox>
                  {objectNameSingular === 'company' ? (
                    <>
--- a/packages/twenty-front/src/modules/object-record/components/RecordTableEffect.tsx
+++ b/packages/twenty-front/src/modules/object-record/components/RecordTableEffect.tsx
@ -31,7 +31,7 @@ export const RecordTableEffect = ({
  const {
    objectMetadataItem,
    basePathToShowPage,
-    labelIdentifierFieldMetadataId,
+    labelIdentifierFieldMetadata,
  } = useObjectMetadataItem({
    objectNameSingular,
  });
@ -49,16 +49,16 @@ export const RecordTableEffect = ({
  } = useViewBar({ viewBarId });

  useEffect(() => {
-    if (basePathToShowPage && labelIdentifierFieldMetadataId) {
+    if (basePathToShowPage && labelIdentifierFieldMetadata) {
      setObjectMetadataConfig?.({
        basePathToShowPage,
-        labelIdentifierFieldMetadataId,
+        labelIdentifierFieldMetadataId: labelIdentifierFieldMetadata.id,
      });
    }
  }, [
    basePathToShowPage,
    objectMetadataItem,
-    labelIdentifierFieldMetadataId,
+    labelIdentifierFieldMetadata,
    setObjectMetadataConfig,
  ]);

--- a/packages/twenty-front/src/modules/object-record/field/meta-types/input/components/FullNameFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/field/meta-types/input/components/FullNameFieldInput.tsx
@ -1,8 +1,8 @@
 import { useFullNameField } from '@/object-record/field/meta-types/hooks/useFullNameField';
 import { FieldDoubleText } from '@/object-record/field/types/FieldDoubleText';
 import { DoubleTextInput } from '@/ui/field/input/components/DoubleTextInput';
+import { FieldInputOverlay } from '@/ui/field/input/components/FieldInputOverlay';

-import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
 import { usePersistField } from '../../../hooks/usePersistField';

 import { FieldInputEvent } from './DateFieldInput';
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
@ -71,7 +71,9 @@ export const RecordInlineCell = () => {
            }
          : undefined
      }
-      IconLabel={getIcon(fieldDefinition.iconName)}
+      IconLabel={
+        fieldDefinition.iconName ? getIcon(fieldDefinition.iconName) : undefined
+      }
      editModeContent={
        <FieldInput
          onEnter={handleEnter}
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@ -36,7 +36,6 @@ const StyledLabelAndIconContainer = styled.div`

 const StyledValueContainer = styled.div`
  display: flex;
-  max-width: calc(100% - ${({ theme }) => theme.spacing(4)});
 `;

 const StyledLabel = styled.div<
@ -70,8 +69,6 @@ const StyledInlineCellBaseContainer = styled.div`

  position: relative;
  user-select: none;
-
-  width: 100%;
 `;

 type RecordInlineCellContainerProps = {
@ -129,16 +126,18 @@ export const RecordInlineCellContainer = ({
      onMouseEnter={handleContainerMouseEnter}
      onMouseLeave={handleContainerMouseLeave}
    >
-      <StyledLabelAndIconContainer>
-        {IconLabel && (
-          <StyledIconContainer>
-            <IconLabel stroke={theme.icon.stroke.sm} />
-          </StyledIconContainer>
-        )}
-        {label && (
-          <StyledLabel labelFixedWidth={labelFixedWidth}>{label}</StyledLabel>
-        )}
-      </StyledLabelAndIconContainer>
+      {(!!IconLabel || !!label) && (
+        <StyledLabelAndIconContainer>
+          {IconLabel && (
+            <StyledIconContainer>
+              <IconLabel stroke={theme.icon.stroke.sm} />
+            </StyledIconContainer>
+          )}
+          {label && (
+            <StyledLabel labelFixedWidth={labelFixedWidth}>{label}</StyledLabel>
+          )}
+        </StyledLabelAndIconContainer>
+      )}
      <StyledValueContainer>
        {isInlineCellInEditMode ? (
          <RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>