Feat/harmonize chips cell fields (#724)

* Wip

* Finished

* Fix lint

front/src/modules/companies/components/CompanyChip.tsx

@@ -1,70 +1,21 @@
-import { Link } from 'react-router-dom';
-import { Theme } from '@emotion/react';
-import styled from '@emotion/styled';
+import { EntityChip } from '@/ui/chip/components/EntityChip';
 
-import { Avatar } from '@/users/components/Avatar';
-
-export type CompanyChipPropsType = {
+type OwnProps = {
   id: string;
   name: string;
   picture?: string;
+  clickable?: boolean;
 };
 
-const baseStyle = ({ theme }: { theme: Theme }) => `
-  align-items: center;
-  background-color: ${theme.background.tertiary};
-  border-radius: ${theme.spacing(1)};
-  color: ${theme.font.color.primary};
-  display: inline-flex;
-  gap: ${theme.spacing(1)};
-  height: calc(20px - 2 * ${theme.spacing(1)});
-  overflow: hidden;
-  padding: ${theme.spacing(1)};
-
-  text-decoration: none;
-
-  user-select: none;
-
-  :hover {
-    filter: brightness(95%);
-  }
-
-  img {
-    height: 14px;
-    object-fit: cover;
-    width: 14px;
-  }
-`;
-
-const StyledName = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const StyledContainerLink = styled(Link)`
-  ${baseStyle}
-`;
-
-const StyledContainerNoLink = styled.div`
-  ${baseStyle}
-`;
-
-export function CompanyChip({ id, name, picture }: CompanyChipPropsType) {
-  const ContainerComponent = id ? StyledContainerLink : StyledContainerNoLink;
-
+export function CompanyChip({ id, name, picture, clickable }: OwnProps) {
   return (
-    <ContainerComponent data-testid="company-chip" to={`/companies/${id}`}>
-      {picture && (
-        <Avatar
-          avatarUrl={picture?.toString()}
-          colorId={id}
-          placeholder={name}
-          type="squared"
-          size={14}
-        />
-      )}
-      <StyledName>{name}</StyledName>
-    </ContainerComponent>
+    <EntityChip
+      entityId={id}
+      linkToEntity={`/companies/${id}`}
+      name={name}
+      avatarType="squared"
+      clickable={clickable}
+      picture={picture}
+    />
   );
 }

front/src/modules/companies/components/CompanyEditableNameCell.tsx

@@ -29,10 +29,15 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
     <EditableCellChip
       value={internalValue}
       placeholder="Name"
-      picture={getLogoUrlFromDomainName(company.domainName)}
-      id={company.id}
       changeHandler={setInternalValue}
-      ChipComponent={CompanyChip}
+      ChipComponent={
+        <CompanyChip
+          id={company.id}
+          name={company.name}
+          clickable
+          picture={getLogoUrlFromDomainName(company.domainName)}
+        />
+      }
       onSubmit={() =>
         updateCompany({
           variables: {

front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx

@@ -25,15 +25,13 @@ export function CompanyAccountOwnerEditableField({ company }: OwnProps) {
           }}
           parentHotkeyScope={{
             scope: PageHotkeyScope.CompanyShowPage,
+            customScopes: {
+              goto: true,
+            },
           }}
           iconLabel={<IconUserCircle />}
           editModeContent={
-            <CompanyAccountOwnerPickerFieldEditMode
-              parentHotkeyScope={{
-                scope: PageHotkeyScope.CompanyShowPage,
-              }}
-              company={company}
-            />
+            <CompanyAccountOwnerPickerFieldEditMode company={company} />
           }
           displayModeContent={
             company.accountOwner?.displayName ? (

front/src/modules/companies/editable-field/components/CompanyAccountOwnerPickerFieldEditMode.tsx

@@ -24,9 +24,8 @@ export function CompanyAccountOwnerPickerFieldEditMode({
   company,
   onSubmit,
   onCancel,
-  parentHotkeyScope,
 }: OwnProps) {
-  const { closeEditableField } = useEditableField(parentHotkeyScope);
+  const { closeEditableField } = useEditableField();
 
   function handleSubmit() {
     closeEditableField();

front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx

@@ -54,6 +54,7 @@ export function CompanyAddressEditableField({ company }: OwnProps) {
           />
         }
         displayModeContent={internalValue ?? ''}
+        isDisplayModeContentEmpty={!(internalValue !== '')}
       />
     </RecoilScope>
   );