Add icon, position and key on View (#4413)

* Add view key field

* Update Prefill demo, seed dev, prefill new workspace

packages/twenty-front/src/modules/views/components/ViewsDropdownButton.tsx

@@ -10,6 +10,7 @@ import {
   IconPlus,
   IconTrash,
 } from '@/ui/display/icon';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -36,11 +37,8 @@ const StyledDropdownLabelAdornments = styled.span`
   margin-left: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledViewIcon = styled(IconList)`
-  margin-right: ${({ theme }) => theme.spacing(1)};
-`;
-
 const StyledViewName = styled.span`
+  margin-left: ${({ theme }) => theme.spacing(1)};
   display: inline-block;
   max-width: 130px;
   @media (max-width: 375px) {
@@ -128,13 +126,20 @@ export const ViewsDropdownButton = ({
     closeViewsDropdown();
   };
 
+  const { getIcon } = useIcons();
+  const CurrentViewIcon = getIcon(currentView?.icon);
+
   return (
     <Dropdown
       dropdownId={VIEWS_DROPDOWN_ID}
       dropdownHotkeyScope={hotkeyScope}
       clickableComponent={
         <StyledDropdownButtonContainer isUnfolded={isViewsDropdownOpen}>
-          <StyledViewIcon size={theme.icon.size.md} />
+          {currentView && CurrentViewIcon ? (
+            <CurrentViewIcon size={theme.icon.size.md} />
+          ) : (
+            <IconList size={theme.icon.size.md} />
+          )}
           <StyledViewName>{currentView?.name ?? 'All'}</StyledViewName>
           <StyledDropdownLabelAdornments>
             · {entityCountInCurrentView}{' '}
@@ -163,7 +168,7 @@ export const ViewsDropdownButton = ({
                     : null,
                 ].filter(isDefined)}
                 onClick={() => handleViewSelect(view.id)}
-                LeftIcon={IconList}
+                LeftIcon={getIcon(view.icon)}
                 text={view.name}
               />
             ))}

packages/twenty-front/src/modules/views/types/GraphQLView.ts

@@ -1,5 +1,7 @@
+import { Position } from '@/object-metadata/types/Position';
 import { ViewField } from '@/views/types/ViewField';
 import { ViewFilter } from '@/views/types/ViewFilter';
+import { ViewKey } from '@/views/types/ViewKey';
 import { ViewSort } from '@/views/types/ViewSort';
 import { ViewType } from '@/views/types/ViewType';
 
@@ -7,9 +9,12 @@ export type GraphQLView = {
   id: string;
   name: string;
   type: ViewType;
+  key: ViewKey | null;
   objectMetadataId: string;
   isCompact: boolean;
   viewFields: ViewField[];
   viewFilters: ViewFilter[];
   viewSorts: ViewSort[];
+  position: Position;
+  icon: string;
 };

packages/twenty-front/src/modules/views/types/ViewKey.ts

@@ -0,0 +1,3 @@
+export enum ViewKey {
+  Index = 'INDEX',
+}