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

* Add view key field

* Update Prefill demo, seed dev, prefill new workspace

packages/twenty-front/src/generated-metadata/gql.ts

@@ -20,7 +20,7 @@ const documents = {
     "\n  mutation UpdateOneObjectMetadataItem(\n    $idToUpdate: ID!\n    $updatePayload: UpdateObjectInput!\n  ) {\n    updateOneObject(input: { id: $idToUpdate, update: $updatePayload }) {\n      id\n      dataSourceId\n      nameSingular\n      namePlural\n      labelSingular\n      labelPlural\n      description\n      icon\n      isCustom\n      isActive\n      createdAt\n      updatedAt\n      labelIdentifierFieldMetadataId\n      imageIdentifierFieldMetadataId\n    }\n  }\n": types.UpdateOneObjectMetadataItemDocument,
     "\n  mutation DeleteOneObjectMetadataItem($idToDelete: ID!) {\n    deleteOneObject(input: { id: $idToDelete }) {\n      id\n      dataSourceId\n      nameSingular\n      namePlural\n      labelSingular\n      labelPlural\n      description\n      icon\n      isCustom\n      isActive\n      createdAt\n      updatedAt\n      labelIdentifierFieldMetadataId\n      imageIdentifierFieldMetadataId\n    }\n  }\n": types.DeleteOneObjectMetadataItemDocument,
     "\n  mutation DeleteOneFieldMetadataItem($idToDelete: ID!) {\n    deleteOneField(input: { id: $idToDelete }) {\n      id\n      type\n      name\n      label\n      description\n      icon\n      isCustom\n      isActive\n      isNullable\n      createdAt\n      updatedAt\n    }\n  }\n": types.DeleteOneFieldMetadataItemDocument,
-    "\n  query ObjectMetadataItems(\n    $objectFilter: objectFilter\n    $fieldFilter: fieldFilter\n  ) {\n    objects(paging: { first: 1000 }, filter: $objectFilter) {\n      edges {\n        node {\n          id\n          dataSourceId\n          nameSingular\n          namePlural\n          labelSingular\n          labelPlural\n          description\n          icon\n          isCustom\n          isActive\n          isSystem\n          createdAt\n          updatedAt\n          labelIdentifierFieldMetadataId\n          imageIdentifierFieldMetadataId\n          fields(paging: { first: 1000 }, filter: $fieldFilter) {\n            edges {\n              node {\n                id\n                type\n                name\n                label\n                description\n                icon\n                isCustom\n                isActive\n                isSystem\n                isNullable\n                createdAt\n                updatedAt\n                fromRelationMetadata {\n                  id\n                  relationType\n                  toObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  toFieldMetadataId\n                }\n                toRelationMetadata {\n                  id\n                  relationType\n                  fromObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  fromFieldMetadataId\n                }\n                defaultValue\n                options\n              }\n            }\n            pageInfo {\n              hasNextPage\n              hasPreviousPage\n              startCursor\n              endCursor\n            }\n            totalCount\n          }\n        }\n      }\n      pageInfo {\n        hasNextPage\n        hasPreviousPage\n        startCursor\n        endCursor\n      }\n      totalCount\n    }\n  }\n": types.ObjectMetadataItemsDocument,
+    "\n  query ObjectMetadataItems(\n    $objectFilter: objectFilter\n    $fieldFilter: fieldFilter\n  ) {\n    objects(paging: { first: 1000 }, filter: $objectFilter) {\n      edges {\n        node {\n          id\n          dataSourceId\n          nameSingular\n          namePlural\n          labelSingular\n          labelPlural\n          description\n          icon\n          isCustom\n          isActive\n          isSystem\n          createdAt\n          updatedAt\n          labelIdentifierFieldMetadataId\n          imageIdentifierFieldMetadataId\n          fields(paging: { first: 1000 }, filter: $fieldFilter) {\n            edges {\n              node {\n                id\n                type\n                name\n                label\n                description\n                icon\n                isCustom\n                isActive\n                isSystem\n                isNullable\n                createdAt\n                updatedAt\n                fromRelationMetadata {\n                  id\n                  relationType\n                  toObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  toFieldMetadataId\n                }\n                toRelationMetadata {\n                  id\n                  relationType\n                  fromObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  fromFieldMetadataId\n                }\n                defaultValue\n                options\n              }\n            }\n            pageInfo {\n              hasNextPage\n              hasPreviousPage\n              startCursor\n              endCursor\n            }\n          }\n        }\n      }\n      pageInfo {\n        hasNextPage\n        hasPreviousPage\n        startCursor\n        endCursor\n      }\n    }\n  }\n": types.ObjectMetadataItemsDocument,
 };
 
 /**
@@ -68,7 +68,7 @@ export function graphql(source: "\n  mutation DeleteOneFieldMetadataItem($idToDe
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query ObjectMetadataItems(\n    $objectFilter: objectFilter\n    $fieldFilter: fieldFilter\n  ) {\n    objects(paging: { first: 1000 }, filter: $objectFilter) {\n      edges {\n        node {\n          id\n          dataSourceId\n          nameSingular\n          namePlural\n          labelSingular\n          labelPlural\n          description\n          icon\n          isCustom\n          isActive\n          isSystem\n          createdAt\n          updatedAt\n          labelIdentifierFieldMetadataId\n          imageIdentifierFieldMetadataId\n          fields(paging: { first: 1000 }, filter: $fieldFilter) {\n            edges {\n              node {\n                id\n                type\n                name\n                label\n                description\n                icon\n                isCustom\n                isActive\n                isSystem\n                isNullable\n                createdAt\n                updatedAt\n                fromRelationMetadata {\n                  id\n                  relationType\n                  toObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  toFieldMetadataId\n                }\n                toRelationMetadata {\n                  id\n                  relationType\n                  fromObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  fromFieldMetadataId\n                }\n                defaultValue\n                options\n              }\n            }\n            pageInfo {\n              hasNextPage\n              hasPreviousPage\n              startCursor\n              endCursor\n            }\n            totalCount\n          }\n        }\n      }\n      pageInfo {\n        hasNextPage\n        hasPreviousPage\n        startCursor\n        endCursor\n      }\n      totalCount\n    }\n  }\n"): (typeof documents)["\n  query ObjectMetadataItems(\n    $objectFilter: objectFilter\n    $fieldFilter: fieldFilter\n  ) {\n    objects(paging: { first: 1000 }, filter: $objectFilter) {\n      edges {\n        node {\n          id\n          dataSourceId\n          nameSingular\n          namePlural\n          labelSingular\n          labelPlural\n          description\n          icon\n          isCustom\n          isActive\n          isSystem\n          createdAt\n          updatedAt\n          labelIdentifierFieldMetadataId\n          imageIdentifierFieldMetadataId\n          fields(paging: { first: 1000 }, filter: $fieldFilter) {\n            edges {\n              node {\n                id\n                type\n                name\n                label\n                description\n                icon\n                isCustom\n                isActive\n                isSystem\n                isNullable\n                createdAt\n                updatedAt\n                fromRelationMetadata {\n                  id\n                  relationType\n                  toObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  toFieldMetadataId\n                }\n                toRelationMetadata {\n                  id\n                  relationType\n                  fromObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  fromFieldMetadataId\n                }\n                defaultValue\n                options\n              }\n            }\n            pageInfo {\n              hasNextPage\n              hasPreviousPage\n              startCursor\n              endCursor\n            }\n            totalCount\n          }\n        }\n      }\n      pageInfo {\n        hasNextPage\n        hasPreviousPage\n        startCursor\n        endCursor\n      }\n      totalCount\n    }\n  }\n"];
+export function graphql(source: "\n  query ObjectMetadataItems(\n    $objectFilter: objectFilter\n    $fieldFilter: fieldFilter\n  ) {\n    objects(paging: { first: 1000 }, filter: $objectFilter) {\n      edges {\n        node {\n          id\n          dataSourceId\n          nameSingular\n          namePlural\n          labelSingular\n          labelPlural\n          description\n          icon\n          isCustom\n          isActive\n          isSystem\n          createdAt\n          updatedAt\n          labelIdentifierFieldMetadataId\n          imageIdentifierFieldMetadataId\n          fields(paging: { first: 1000 }, filter: $fieldFilter) {\n            edges {\n              node {\n                id\n                type\n                name\n                label\n                description\n                icon\n                isCustom\n                isActive\n                isSystem\n                isNullable\n                createdAt\n                updatedAt\n                fromRelationMetadata {\n                  id\n                  relationType\n                  toObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  toFieldMetadataId\n                }\n                toRelationMetadata {\n                  id\n                  relationType\n                  fromObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  fromFieldMetadataId\n                }\n                defaultValue\n                options\n              }\n            }\n            pageInfo {\n              hasNextPage\n              hasPreviousPage\n              startCursor\n              endCursor\n            }\n          }\n        }\n      }\n      pageInfo {\n        hasNextPage\n        hasPreviousPage\n        startCursor\n        endCursor\n      }\n    }\n  }\n"): (typeof documents)["\n  query ObjectMetadataItems(\n    $objectFilter: objectFilter\n    $fieldFilter: fieldFilter\n  ) {\n    objects(paging: { first: 1000 }, filter: $objectFilter) {\n      edges {\n        node {\n          id\n          dataSourceId\n          nameSingular\n          namePlural\n          labelSingular\n          labelPlural\n          description\n          icon\n          isCustom\n          isActive\n          isSystem\n          createdAt\n          updatedAt\n          labelIdentifierFieldMetadataId\n          imageIdentifierFieldMetadataId\n          fields(paging: { first: 1000 }, filter: $fieldFilter) {\n            edges {\n              node {\n                id\n                type\n                name\n                label\n                description\n                icon\n                isCustom\n                isActive\n                isSystem\n                isNullable\n                createdAt\n                updatedAt\n                fromRelationMetadata {\n                  id\n                  relationType\n                  toObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  toFieldMetadataId\n                }\n                toRelationMetadata {\n                  id\n                  relationType\n                  fromObjectMetadata {\n                    id\n                    dataSourceId\n                    nameSingular\n                    namePlural\n                    isSystem\n                  }\n                  fromFieldMetadataId\n                }\n                defaultValue\n                options\n              }\n            }\n            pageInfo {\n              hasNextPage\n              hasPreviousPage\n              startCursor\n              endCursor\n            }\n          }\n        }\n      }\n      pageInfo {\n        hasNextPage\n        hasPreviousPage\n        startCursor\n        endCursor\n      }\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

packages/twenty-front/src/generated/graphql.tsx

@@ -134,8 +134,6 @@ export type FieldConnection = {
   edges: Array<FieldEdge>;
   /** Paging information */
   pageInfo: PageInfo;
-  /** Fetch total count of records */
-  totalCount: Scalars['Int'];
 };
 
 export type FieldDeleteResponse = {
@@ -351,8 +349,6 @@ export type ObjectConnection = {
   edges: Array<ObjectEdge>;
   /** Paging information */
   pageInfo: PageInfo;
-  /** Fetch total count of records */
-  totalCount: Scalars['Int'];
 };
 
 export type ObjectFieldsConnection = {
@@ -361,8 +357,6 @@ export type ObjectFieldsConnection = {
   edges: Array<FieldEdge>;
   /** Paging information */
   pageInfo: PageInfo;
-  /** Fetch total count of records */
-  totalCount: Scalars['Int'];
 };
 
 export type PageInfo = {
@@ -474,8 +468,6 @@ export type RelationConnection = {
   edges: Array<RelationEdge>;
   /** Paging information */
   pageInfo: PageInfo;
-  /** Fetch total count of records */
-  totalCount: Scalars['Int'];
 };
 
 export type RelationDeleteResponse = {

packages/twenty-front/src/modules/object-metadata/types/Position.ts

@@ -0,0 +1 @@
+export type Position = number | 'first' | 'last';

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',
+}

packages/twenty-front/src/testing/mock-data/metadata.ts

@@ -5,6 +5,7 @@ import {
 } from '~/generated-metadata/graphql';
 
 export const mockedPeopleMetadata = {
+  cursor: '',
   __typename: 'objectEdge',
   node: {
     __typename: 'object',
@@ -581,6 +582,7 @@ export const mockedPeopleMetadata = {
 
 export const mockedCompaniesMetadata = {
   __typename: 'objectEdge',
+  cursor: '',
   node: {
     __typename: 'object',
     id: '2a603764-1a2f-4043-bbfa-dea375391fad',

packages/twenty-server/src/database/typeorm-seeds/workspace/views.ts

@@ -10,29 +10,53 @@ export const seedViews = async (
   const createdViews = await workspaceDataSource
     .createQueryBuilder()
     .insert()
-    .into(`${schemaName}.view`, ['name', 'objectMetadataId', 'type'])
+    .into(`${schemaName}.view`, [
+      'name',
+      'objectMetadataId',
+      'type',
+      'key',
+      'position',
+      'icon',
+    ])
     .values([
       {
         name: 'All Companies',
         objectMetadataId: objectMetadataMap['company'].id,
         type: 'table',
+        key: 'INDEX',
+        position: 0,
+        icon: 'IconBuildingSkyscraper',
       },
       {
         name: 'All People',
         objectMetadataId: objectMetadataMap['person'].id,
         type: 'table',
+        key: 'INDEX',
+        position: 0,
+        icon: 'IconUser',
+      },
+      {
+        name: 'By Stage',
+        objectMetadataId: objectMetadataMap['opportunity'].id,
+        type: 'kanban',
+        key: null,
+        position: 0,
+        icon: 'IconLayoutKanban',
       },
       {
         name: 'All Opportunities',
         objectMetadataId: objectMetadataMap['opportunity'].id,
-        type: 'kanban',
+        type: 'table',
+        key: 'INDEX',
+        position: 1,
+        icon: 'IconTargetArrow',
       },
     ])
     .returning('*')
     .execute();
 
   const viewIdMap = createdViews.raw.reduce((acc, view) => {
-    acc[view.name] = view.id;
+    acc[`${view.name}`] = view.id;
 
     return acc;
   }, {});
@@ -162,34 +186,78 @@ export const seedViews = async (
       },
 
       {
-        fieldMetadataId: objectMetadataMap['opportunity'].fields['amount'],
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['name'],
         viewId: viewIdMap['All Opportunities'],
         position: 0,
         isVisible: true,
         size: 150,
       },
       {
-        fieldMetadataId: objectMetadataMap['opportunity'].fields['closeDate'],
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['amount'],
         viewId: viewIdMap['All Opportunities'],
         position: 1,
         isVisible: true,
         size: 150,
       },
       {
-        fieldMetadataId: objectMetadataMap['opportunity'].fields['probability'],
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['closeDate'],
         viewId: viewIdMap['All Opportunities'],
         position: 2,
         isVisible: true,
         size: 150,
       },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['probability'],
+        viewId: viewIdMap['All Opportunities'],
+        position: 3,
+        isVisible: true,
+        size: 150,
+      },
       {
         fieldMetadataId:
           objectMetadataMap['opportunity'].fields['pointOfContact'],
         viewId: viewIdMap['All Opportunities'],
+        position: 4,
+        isVisible: true,
+        size: 150,
+      },
+
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['name'],
+        viewId: viewIdMap['By Stage'],
+        position: 0,
+        isVisible: true,
+        size: 150,
+      },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['amount'],
+        viewId: viewIdMap['By Stage'],
+        position: 1,
+        isVisible: true,
+        size: 150,
+      },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['closeDate'],
+        viewId: viewIdMap['By Stage'],
+        position: 2,
+        isVisible: true,
+        size: 150,
+      },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['probability'],
+        viewId: viewIdMap['By Stage'],
         position: 3,
         isVisible: true,
         size: 150,
       },
+      {
+        fieldMetadataId:
+          objectMetadataMap['opportunity'].fields['pointOfContact'],
+        viewId: viewIdMap['By Stage'],
+        position: 4,
+        isVisible: true,
+        size: 150,
+      },
     ])
     .execute();
 };

packages/twenty-server/src/workspace/workspace-manager/demo-objects-prefill-data/view.ts

@@ -11,23 +11,47 @@ export const viewPrefillData = async (
   const createdViews = await entityManager
     .createQueryBuilder()
     .insert()
-    .into(`${schemaName}.view`, ['name', 'objectMetadataId', 'type'])
+    .into(`${schemaName}.view`, [
+      'name',
+      'objectMetadataId',
+      'type',
+      'key',
+      'position',
+      'icon',
+    ])
     .orIgnore()
     .values([
       {
         name: 'All Companies',
         objectMetadataId: objectMetadataMap['company'].id,
         type: 'table',
+        key: 'INDEX',
+        position: 0,
+        icon: 'IconBuildingSkyscraper',
       },
       {
         name: 'All People',
         objectMetadataId: objectMetadataMap['person'].id,
         type: 'table',
+        key: 'INDEX',
+        position: 0,
+        icon: 'IconUser',
+      },
+      {
+        name: 'By Stage',
+        objectMetadataId: objectMetadataMap['opportunity'].id,
+        type: 'kanban',
+        key: null,
+        position: 0,
+        icon: 'IconLayoutKanban',
       },
       {
         name: 'All Opportunities',
         objectMetadataId: objectMetadataMap['opportunity'].id,
-        type: 'kanban',
+        type: 'table',
+        key: 'INDEX',
+        position: 1,
+        icon: 'IconTargetArrow',
       },
     ])
     .returning('*')
@@ -168,34 +192,78 @@ export const viewPrefillData = async (
       },
       // Opportunity
       {
-        fieldMetadataId: objectMetadataMap['opportunity'].fields['amount'],
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['name'],
         viewId: viewIdMap['All Opportunities'],
         position: 0,
         isVisible: true,
         size: 150,
       },
       {
-        fieldMetadataId: objectMetadataMap['opportunity'].fields['closeDate'],
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['amount'],
         viewId: viewIdMap['All Opportunities'],
         position: 1,
         isVisible: true,
         size: 150,
       },
       {
-        fieldMetadataId: objectMetadataMap['opportunity'].fields['probability'],
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['closeDate'],
         viewId: viewIdMap['All Opportunities'],
         position: 2,
         isVisible: true,
         size: 150,
       },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['probability'],
+        viewId: viewIdMap['All Opportunities'],
+        position: 3,
+        isVisible: true,
+        size: 150,
+      },
       {
         fieldMetadataId:
           objectMetadataMap['opportunity'].fields['pointOfContact'],
         viewId: viewIdMap['All Opportunities'],
+        position: 4,
+        isVisible: true,
+        size: 150,
+      },
+
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['name'],
+        viewId: viewIdMap['By Stage'],
+        position: 0,
+        isVisible: true,
+        size: 150,
+      },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['amount'],
+        viewId: viewIdMap['By Stage'],
+        position: 1,
+        isVisible: true,
+        size: 150,
+      },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['closeDate'],
+        viewId: viewIdMap['By Stage'],
+        position: 2,
+        isVisible: true,
+        size: 150,
+      },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['probability'],
+        viewId: viewIdMap['By Stage'],
         position: 3,
         isVisible: true,
         size: 150,
       },
+      {
+        fieldMetadataId:
+          objectMetadataMap['opportunity'].fields['pointOfContact'],
+        viewId: viewIdMap['By Stage'],
+        position: 4,
+        isVisible: true,
+        size: 150,
+      },
     ])
     .execute();
 };

packages/twenty-server/src/workspace/workspace-manager/standard-objects-prefill-data/view.ts

@@ -11,23 +11,47 @@ export const viewPrefillData = async (
   const createdViews = await entityManager
     .createQueryBuilder()
     .insert()
-    .into(`${schemaName}.view`, ['name', 'objectMetadataId', 'type'])
+    .into(`${schemaName}.view`, [
+      'name',
+      'objectMetadataId',
+      'type',
+      'key',
+      'position',
+      'icon',
+    ])
     .orIgnore()
     .values([
       {
         name: 'All Companies',
         objectMetadataId: objectMetadataMap['company'].id,
         type: 'table',
+        key: 'INDEX',
+        position: 0,
+        icon: 'IconBuildingSkyscraper',
       },
       {
         name: 'All People',
         objectMetadataId: objectMetadataMap['person'].id,
         type: 'table',
+        key: 'INDEX',
+        position: 0,
+        icon: 'IconUser',
+      },
+      {
+        name: 'By Stage',
+        objectMetadataId: objectMetadataMap['opportunity'].id,
+        type: 'kanban',
+        key: null,
+        position: 0,
+        icon: 'IconLayoutKanban',
       },
       {
         name: 'All Opportunities',
         objectMetadataId: objectMetadataMap['opportunity'].id,
-        type: 'kanban',
+        type: 'table',
+        key: 'INDEX',
+        position: 1,
+        icon: 'IconTargetArrow',
       },
     ])
     .returning('*')
@@ -168,34 +192,78 @@ export const viewPrefillData = async (
       },
       // Opportunity
       {
-        fieldMetadataId: objectMetadataMap['opportunity'].fields['amount'],
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['name'],
         viewId: viewIdMap['All Opportunities'],
         position: 0,
         isVisible: true,
         size: 150,
       },
       {
-        fieldMetadataId: objectMetadataMap['opportunity'].fields['closeDate'],
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['amount'],
         viewId: viewIdMap['All Opportunities'],
         position: 1,
         isVisible: true,
         size: 150,
       },
       {
-        fieldMetadataId: objectMetadataMap['opportunity'].fields['probability'],
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['closeDate'],
         viewId: viewIdMap['All Opportunities'],
         position: 2,
         isVisible: true,
         size: 150,
       },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['probability'],
+        viewId: viewIdMap['All Opportunities'],
+        position: 3,
+        isVisible: true,
+        size: 150,
+      },
       {
         fieldMetadataId:
           objectMetadataMap['opportunity'].fields['pointOfContact'],
         viewId: viewIdMap['All Opportunities'],
+        position: 4,
+        isVisible: true,
+        size: 150,
+      },
+
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['name'],
+        viewId: viewIdMap['By Stage'],
+        position: 0,
+        isVisible: true,
+        size: 150,
+      },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['amount'],
+        viewId: viewIdMap['By Stage'],
+        position: 1,
+        isVisible: true,
+        size: 150,
+      },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['closeDate'],
+        viewId: viewIdMap['By Stage'],
+        position: 2,
+        isVisible: true,
+        size: 150,
+      },
+      {
+        fieldMetadataId: objectMetadataMap['opportunity'].fields['probability'],
+        viewId: viewIdMap['By Stage'],
         position: 3,
         isVisible: true,
         size: 150,
       },
+      {
+        fieldMetadataId:
+          objectMetadataMap['opportunity'].fields['pointOfContact'],
+        viewId: viewIdMap['By Stage'],
+        position: 4,
+        isVisible: true,
+        size: 150,
+      },
     ])
     .execute();
 };

packages/twenty-server/src/workspace/workspace-sync-metadata/standard-objects/view.object-metadata.ts

@@ -41,6 +41,31 @@ export class ViewObjectMetadata extends BaseObjectMetadata {
   })
   type: string;
 
+  @FieldMetadata({
+    type: FieldMetadataType.SELECT,
+    label: 'Key',
+    description: 'View key',
+    options: [{ value: 'INDEX', label: 'Index', position: 0, color: 'red' }],
+    defaultValue: { value: 'INDEX' },
+  })
+  @IsNullable()
+  key: string;
+
+  @FieldMetadata({
+    type: FieldMetadataType.TEXT,
+    label: 'Icon',
+    description: 'View icon',
+  })
+  icon: string;
+
+  @FieldMetadata({
+    type: FieldMetadataType.POSITION,
+    label: 'Position',
+    description: 'View position',
+  })
+  @IsNullable()
+  position: number;
+
   @FieldMetadata({
     type: FieldMetadataType.BOOLEAN,
     label: 'Compact View',