Chip untitled modification (#11498)

Fixes https://github.com/twentyhq/core-team-issues/issues/663

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx

@@ -43,12 +43,17 @@ const StyledIconsContainer = styled.div`
   display: flex;
 `;
 
+const StyledEmptyText = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
 export type CommandMenuContextChipProps = {
   Icons: React.ReactNode[];
   text?: string;
   onClick?: () => void;
   testId?: string;
   maxWidth?: string;
+  forceEmptyText?: boolean;
 };
 
 export const CommandMenuContextChip = ({
@@ -57,6 +62,7 @@ export const CommandMenuContextChip = ({
   onClick,
   testId,
   maxWidth,
+  forceEmptyText = false,
 }: CommandMenuContextChipProps) => {
   return (
     <StyledChip
@@ -70,7 +76,13 @@ export const CommandMenuContextChip = ({
           <Fragment key={index}>{Icon}</Fragment>
         ))}
       </StyledIconsContainer>
-      {text && <OverflowingTextWithTooltip text={text} />}
+      {text?.trim() ? (
+        <OverflowingTextWithTooltip text={text} />
+      ) : !forceEmptyText ? (
+        <StyledEmptyText>Untitled</StyledEmptyText>
+      ) : (
+        ''
+      )}
     </StyledChip>
   );
 };

packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx

@@ -21,8 +21,8 @@ import { useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { Button } from 'twenty-ui/input';
 import { IconChevronLeft, IconX } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
 
 const StyledInputContainer = styled.div`
@@ -126,6 +126,7 @@ export const CommandMenuTopBar = () => {
                 Icons={[<IconChevronLeft size={theme.icon.size.sm} />]}
                 onClick={goBackFromCommandMenu}
                 testId="command-menu-go-back-button"
+                forceEmptyText={true}
               />
             </motion.div>
           )}

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx

@@ -4,6 +4,7 @@ import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlin
 import { useRecordValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { TitleInputHotkeyScope } from '@/ui/input/types/TitleInputHotkeyScope';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { Theme, withTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useContext } from 'react';
 import { OverflowingTextWithTooltip } from 'twenty-ui/display';
@@ -26,10 +27,16 @@ const StyledDiv = styled.div`
   }
 `;
 
+const StyledEmptyText = withTheme(styled.div<{ theme: Theme }>`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`);
+
 export const RecordTitleCellSingleTextDisplayMode = () => {
   const { recordId, fieldDefinition } = useContext(FieldContext);
 
   const recordValue = useRecordValue(recordId);
+  const isEmpty =
+    recordValue?.[fieldDefinition.metadata.fieldName].trim() === '';
 
   const { openInlineCell } = useInlineCell();
 
@@ -46,12 +53,16 @@ export const RecordTitleCellSingleTextDisplayMode = () => {
         openInlineCell();
       }}
     >
-      <OverflowingTextWithTooltip
-        text={
-          recordValue?.[fieldDefinition.metadata.fieldName] ||
-          fieldDefinition.label
-        }
-      />
+      {isEmpty ? (
+        <StyledEmptyText>Untitled</StyledEmptyText>
+      ) : (
+        <OverflowingTextWithTooltip
+          text={
+            recordValue?.[fieldDefinition.metadata.fieldName] ||
+            fieldDefinition.label
+          }
+        />
+      )}
     </StyledDiv>
   );
 };

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx

@@ -1,6 +1,7 @@
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay';
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
+import { Theme, withTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useContext } from 'react';
@@ -25,6 +26,10 @@ const StyledDiv = styled.div`
   }
 `;
 
+const StyledEmptyText = withTheme(styled.div<{ theme: Theme }>`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`);
+
 export const RecordTitleFullNameFieldDisplay = () => {
   const { fieldDefinition } = useContext(FieldContext);
 
@@ -39,9 +44,13 @@ export const RecordTitleFullNameFieldDisplay = () => {
 
   return (
     <StyledDiv onClick={() => openInlineCell()}>
-      <OverflowingTextWithTooltip
-        text={isNonEmptyString(content) ? content : fieldDefinition.label}
-      />
+      {!content ? (
+        <StyledEmptyText>Untitled</StyledEmptyText>
+      ) : (
+        <OverflowingTextWithTooltip
+          text={isNonEmptyString(content) ? content : fieldDefinition.label}
+        />
+      )}
     </StyledDiv>
   );
 };