From 14f9e892d17cba40654ab01dad0ac0839184983e Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Sat, 5 Aug 2023 15:41:18 -0700
Subject: [PATCH] Add ability to force picker width (#1093)

---
 .../modules/companies/components/CompanyPickerCell.tsx   | 3 +++
 .../modules/companies/constants/companyViewFields.tsx    | 7 +++++++
 .../src/modules/ui/dropdown/components/DropdownMenu.tsx  | 9 ++++++---
 .../relation-picker/components/SingleEntitySelect.tsx    | 8 +++++++-
 front/src/modules/ui/link/components/RawLink.tsx         | 2 --
 .../components/GenericEditableRelationCellEditMode.tsx   | 2 ++
 front/src/modules/users/components/UserPicker.tsx        | 4 +++-
 7 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/front/src/modules/companies/components/CompanyPickerCell.tsx b/front/src/modules/companies/components/CompanyPickerCell.tsx
index 21a71e58f0c7..92e0aa7a15f7 100644
--- a/front/src/modules/companies/components/CompanyPickerCell.tsx
+++ b/front/src/modules/companies/components/CompanyPickerCell.tsx
@@ -12,6 +12,7 @@ export type OwnProps = {
   onSubmit: (newCompany: EntityForSelect | null) => void;
   onCancel?: () => void;
   createModeEnabled?: boolean;
+  width?: number;
 };
 
 export function CompanyPickerCell({
@@ -19,6 +20,7 @@ export function CompanyPickerCell({
   onSubmit,
   onCancel,
   createModeEnabled,
+  width,
 }: OwnProps) {
   const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState);
 
@@ -46,6 +48,7 @@ export function CompanyPickerCell({
 
   return (
     <SingleEntitySelect
+      width={width}
       onCreate={createModeEnabled ? handleCreate : undefined}
       onCancel={onCancel}
       onEntitySelected={handleEntitySelected}
diff --git a/front/src/modules/companies/constants/companyViewFields.tsx b/front/src/modules/companies/constants/companyViewFields.tsx
index 51e2c86ecb98..df077e6cc4a0 100644
--- a/front/src/modules/companies/constants/companyViewFields.tsx
+++ b/front/src/modules/companies/constants/companyViewFields.tsx
@@ -32,6 +32,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       contentFieldName: 'name',
       relationType: Entity.Company,
     },
+    isVisible: true,
   } as ViewFieldDefinition<ViewFieldChipMetadata>,
   {
     id: 'domainName',
@@ -44,6 +45,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       fieldName: 'domainName',
       placeHolder: 'example.com',
     },
+    isVisible: true,
   } as ViewFieldDefinition<ViewFieldURLMetadata>,
   {
     id: 'accountOwner',
@@ -56,6 +58,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       fieldName: 'accountOwner',
       relationType: Entity.User,
     },
+    isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldRelationMetadata>,
   {
     id: 'createdAt',
@@ -67,6 +70,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       type: 'date',
       fieldName: 'createdAt',
     },
+    isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldDateMetadata>,
   {
     id: 'employees',
@@ -78,6 +82,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       type: 'number',
       fieldName: 'employees',
     },
+    isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldNumberMetadata>,
   {
     id: 'linkedin',
@@ -90,6 +95,7 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       fieldName: 'linkedinUrl',
       placeHolder: 'LinkedIn URL',
     },
+    isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldURLMetadata>,
   {
     id: 'address',
@@ -102,5 +108,6 @@ export const companyViewFields: ViewFieldDefinition<ViewFieldMetadata>[] = [
       fieldName: 'address',
       placeHolder: 'Addre​ss', // Hack: Fake character to prevent password-manager from filling the field
     },
+    isVisible: true,
   } satisfies ViewFieldDefinition<ViewFieldTextMetadata>,
 ];
diff --git a/front/src/modules/ui/dropdown/components/DropdownMenu.tsx b/front/src/modules/ui/dropdown/components/DropdownMenu.tsx
index 0326dda12f8b..12e09ff91763 100644
--- a/front/src/modules/ui/dropdown/components/DropdownMenu.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownMenu.tsx
@@ -1,6 +1,9 @@
 import styled from '@emotion/styled';
 
-export const DropdownMenu = styled.div<{ disableBlur?: boolean }>`
+export const DropdownMenu = styled.div<{
+  disableBlur?: boolean;
+  width?: number;
+}>`
   backdrop-filter: ${({ disableBlur }) =>
     disableBlur ? 'none' : 'blur(20px)'};
 
@@ -13,7 +16,7 @@ export const DropdownMenu = styled.div<{ disableBlur?: boolean }>`
 
   flex-direction: column;
 
-  min-width: 160px;
-
   overflow: hidden;
+
+  width: ${({ width }) => width ?? 160}px;
 `;
diff --git a/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx b/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx
index 34e634d732e9..903b90f8da9f 100644
--- a/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx
+++ b/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx
@@ -30,6 +30,7 @@ export function SingleEntitySelect<
   onEntitySelected,
   onCreate,
   onCancel,
+  width,
   disableBackgroundBlur = false,
 }: {
   onCancel?: () => void;
@@ -37,6 +38,7 @@ export function SingleEntitySelect<
   entities: EntitiesForSingleEntitySelect<CustomEntityForSelect>;
   onEntitySelected: (entity: CustomEntityForSelect | null | undefined) => void;
   disableBackgroundBlur?: boolean;
+  width?: number;
 }) {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -58,7 +60,11 @@ export function SingleEntitySelect<
   });
 
   return (
-    <DropdownMenu disableBlur={disableBackgroundBlur} ref={containerRef}>
+    <DropdownMenu
+      disableBlur={disableBackgroundBlur}
+      ref={containerRef}
+      width={width}
+    >
       <DropdownMenuSearch
         value={searchFilter}
         onChange={handleSearchFilterChange}
diff --git a/front/src/modules/ui/link/components/RawLink.tsx b/front/src/modules/ui/link/components/RawLink.tsx
index 3e550b465657..6cef6899b985 100644
--- a/front/src/modules/ui/link/components/RawLink.tsx
+++ b/front/src/modules/ui/link/components/RawLink.tsx
@@ -20,8 +20,6 @@ const StyledClickable = styled.div`
 `;
 
 export function RawLink({ className, href, children, onClick }: OwnProps) {
-  console.log(children);
-
   return (
     <div>
       <StyledClickable className={className}>
diff --git a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx
index 870e3315478b..ab5ff5ee6a24 100644
--- a/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx
+++ b/front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx
@@ -54,6 +54,7 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) {
           companyId={fieldValueEntity?.id ?? null}
           onSubmit={handleEntitySubmit}
           onCancel={handleCancel}
+          width={viewField.columnSize}
         />
       );
     }
@@ -63,6 +64,7 @@ export function GenericEditableRelationCellEditMode({ viewField }: OwnProps) {
           userId={fieldValueEntity?.id ?? null}
           onSubmit={handleEntitySubmit}
           onCancel={handleCancel}
+          width={viewField.columnSize}
         />
       );
     }
diff --git a/front/src/modules/users/components/UserPicker.tsx b/front/src/modules/users/components/UserPicker.tsx
index 3ad4e6cd0922..a8d683979dd9 100644
--- a/front/src/modules/users/components/UserPicker.tsx
+++ b/front/src/modules/users/components/UserPicker.tsx
@@ -10,13 +10,14 @@ export type OwnProps = {
   userId: string;
   onSubmit: (newUser: EntityForSelect | null) => void;
   onCancel?: () => void;
+  width?: number;
 };
 
 type UserForSelect = EntityForSelect & {
   entityType: Entity.User;
 };
 
-export function UserPicker({ userId, onSubmit, onCancel }: OwnProps) {
+export function UserPicker({ userId, onSubmit, onCancel, width }: OwnProps) {
   const [searchFilter] = useRecoilScopedState(
     relationPickerSearchFilterScopedState,
   );
@@ -44,6 +45,7 @@ export function UserPicker({ userId, onSubmit, onCancel }: OwnProps) {
 
   return (
     <SingleEntitySelect
+      width={width}
       onEntitySelected={handleEntitySelected}
       onCancel={onCancel}
       entities={{