Fix 3 bugs (#3391)

* Fix Favorites

* Fix opportunities

packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx

@@ -1,6 +1,8 @@
+import { useCallback } from 'react';
 import styled from '@emotion/styled';
 
 import { mapBoardFieldDefinitionsToViewFields } from '@/companies/utils/mapBoardFieldDefinitionsToViewFields';
+import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import {
   RecordBoard,
   RecordBoardProps,
@@ -8,6 +10,7 @@ import {
 import { RecordBoardEffect } from '@/object-record/record-board/components/RecordBoardEffect';
 import { BoardOptionsDropdownId } from '@/object-record/record-board/constants/BoardOptionsDropdownId';
 import { RecordBoardOptionsDropdown } from '@/object-record/record-board/options/components/RecordBoardOptionsDropdown';
+import { BoardColumnDefinition } from '@/object-record/record-board/types/BoardColumnDefinition';
 import { ViewBar } from '@/views/components/ViewBar';
 import { useViewFields } from '@/views/hooks/internal/useViewFields';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
@@ -37,12 +40,31 @@ export const CompanyBoard = ({
 
   const { persistViewFields } = useViewFields(viewBarId);
 
+  const { createOneRecord } = useCreateOneRecord({
+    objectNameSingular: 'pipelineStep',
+  });
+
+  const onStageAdd = useCallback(
+    (stage: BoardColumnDefinition) => {
+      createOneRecord({
+        name: stage.title,
+        color: stage.colorCode,
+        position: stage.position,
+        id: stage.id,
+      });
+    },
+    [createOneRecord],
+  );
+
   return (
     <StyledContainer>
       <ViewBar
         viewBarId={viewBarId}
         optionsDropdownButton={
-          <RecordBoardOptionsDropdown recordBoardId={recordBoardId} />
+          <RecordBoardOptionsDropdown
+            recordBoardId={recordBoardId}
+            onStageAdd={onStageAdd}
+          />
         }
         optionsDropdownScopeId={BoardOptionsDropdownId}
       />

packages/twenty-front/src/modules/object-metadata/utils/getObjectRecordIdentifier.ts

@@ -21,6 +21,7 @@ export const getObjectRecordIdentifier = ({
         name: record?.company?.name,
         avatarUrl: record.avatarUrl,
         avatarType: 'rounded',
+        linkToShowPage: `/opportunities/${record.id}`,
       };
   }
 
@@ -64,13 +65,13 @@ export const getObjectRecordIdentifier = ({
     objectMetadataItem,
   });
 
-  const linkToEntity = `${basePathToShowPage}${record.id}`;
+  const linkToShowPage = `${basePathToShowPage}${record.id}`;
 
   return {
     id: record.id,
     name: labelIdentifierFieldValue,
     avatarUrl,
     avatarType,
-    linkToEntity,
+    linkToShowPage,
   };
 };

packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx

@@ -22,7 +22,6 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate';
 import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
-import { ThemeColor } from '@/ui/theme/constants/colors';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
 import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';
@@ -39,13 +38,6 @@ export type RecordBoardOptionsDropdownContentProps = {
 
 type BoardOptionsMenu = 'fields' | 'stage-creation' | 'stages';
 
-type ColumnForCreate = {
-  id: string;
-  colorCode: ThemeColor;
-  position: number;
-  title: string;
-};
-
 export const RecordBoardOptionsDropdownContent = ({
   onStageAdd,
   recordBoardId,
@@ -85,7 +77,7 @@ export const RecordBoardOptionsDropdownContent = ({
     if (currentMenu !== 'stage-creation' || !stageInputRef?.current?.value)
       return;
 
-    const columnToCreate: ColumnForCreate = {
+    const columnToCreate: BoardColumnDefinition = {
       id: v4(),
       colorCode: 'gray',
       position: boardColumns.length,
@@ -143,7 +135,6 @@ export const RecordBoardOptionsDropdownContent = ({
       const name = viewEditInputRef.current?.value;
       resetMenu();
       setViewEditMode('none');
-      closeDropdown();
       handleStageSubmit();
       handleViewNameSubmit(name);
       closeDropdown();

packages/twenty-front/src/modules/object-record/types/ObjectRecordIdentifier.ts

@@ -5,6 +5,5 @@ export type ObjectRecordIdentifier = {
   name: string;
   avatarUrl?: string | null;
   avatarType?: AvatarType | null;
-  linkToEntity?: string;
   linkToShowPage?: string;
 };

packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx

@@ -98,30 +98,38 @@ export const IconPicker = ({
 
   const { getIcons, getIcon } = useIcons();
   const icons = getIcons();
-
-  const iconKeys = useMemo(() => {
+  const matchingSearchIconKeys = useMemo(() => {
     const filteredIconKeys = icons
       ? Object.keys(icons).filter((iconKey) => {
-          return (
-            iconKey !== selectedIconKey &&
-            (!searchString ||
-              [iconKey, convertIconKeyToLabel(iconKey)].some((label) =>
-                label.toLowerCase().includes(searchString.toLowerCase()),
-              ))
+          if (searchString === '') {
+            return true;
+          }
+
+          const isMatchingSearchString = [
+            iconKey,
+            convertIconKeyToLabel(iconKey),
+          ].some((label) =>
+            label.toLowerCase().includes(searchString.toLowerCase()),
           );
+
+          return isMatchingSearchString;
         })
       : [];
 
-    return (
-      selectedIconKey
-        ? [selectedIconKey, ...filteredIconKeys]
-        : filteredIconKeys
-    ).slice(0, 25);
+    const uniqueFilteredIconKeys = [
+      ...new Set(
+        selectedIconKey
+          ? [selectedIconKey, ...filteredIconKeys]
+          : filteredIconKeys,
+      ),
+    ];
+
+    return uniqueFilteredIconKeys.slice(0, 25);
   }, [icons, searchString, selectedIconKey]);
 
   const iconKeys2d = useMemo(
-    () => arrayToChunks(iconKeys.slice(), 5),
-    [iconKeys],
+    () => arrayToChunks(matchingSearchIconKeys.slice(), 5),
+    [matchingSearchIconKeys],
   );
 
   return (
@@ -151,7 +159,9 @@ export const IconPicker = ({
               <DropdownMenuSearchInput
                 placeholder="Search icon"
                 autoFocus
-                onChange={(event) => setSearchString(event.target.value)}
+                onChange={(event) => {
+                  setSearchString(event.target.value);
+                }}
               />
               <DropdownMenuSeparator />
               <div
@@ -164,7 +174,7 @@ export const IconPicker = ({
               >
                 <DropdownMenuItemsContainer>
                   <StyledMenuIconItemsContainer>
-                    {iconKeys.map((iconKey) => (
+                    {matchingSearchIconKeys.map((iconKey) => (
                       <IconPickerIcon
                         key={iconKey}
                         iconKey={iconKey}

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts

@@ -2,6 +2,7 @@ import { useRecoilState } from 'recoil';
 
 import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 
 export const useDropdown = (dropdownId?: string) => {
   const {
@@ -10,7 +11,7 @@ export const useDropdown = (dropdownId?: string) => {
     dropdownWidthState,
     isDropdownOpenState,
   } = useDropdownStates({
-    dropdownScopeId: `${dropdownId}-scope`,
+    dropdownScopeId: getScopeIdFromComponentId(dropdownId),
   });
 
   const {