From 12c33159e0fc47c66c4cd75b0270a4ce68d50b30 Mon Sep 17 00:00:00 2001
From: Faisal-imtiyaz123 <142205282+Faisal-imtiyaz123@users.noreply.github.com>
Date: Fri, 19 Jul 2024 21:57:33 +0530
Subject: [PATCH] Fixes Default View Ordering (#6114) (#6326)

fixes #6114

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../views/utils/getObjectMetadataItemViews.ts | 11 +--
 .../components/ViewPickerListContent.tsx      | 79 ++++++++-----------
 2 files changed, 36 insertions(+), 54 deletions(-)

diff --git a/packages/twenty-front/src/modules/views/utils/getObjectMetadataItemViews.ts b/packages/twenty-front/src/modules/views/utils/getObjectMetadataItemViews.ts
index da5c5b0398..ebc1f502f1 100644
--- a/packages/twenty-front/src/modules/views/utils/getObjectMetadataItemViews.ts
+++ b/packages/twenty-front/src/modules/views/utils/getObjectMetadataItemViews.ts
@@ -4,18 +4,11 @@ export const getObjectMetadataItemViews = (
   viewObjectMetadataId: string,
   views: GraphQLView[],
 ) => {
-  const indexView = views.find(
-    (view) =>
-      view.key === 'INDEX' && view.objectMetadataId === viewObjectMetadataId,
-  );
-
   return [
-    ...views
-      .filter((view) => view.objectMetadataId === viewObjectMetadataId)
-      .filter((view) => view.key !== 'INDEX'),
+    ...views.filter((view) => view.objectMetadataId === viewObjectMetadataId),
   ]
     .sort((a, b) => a.position - b.position)
-    .concat(indexView ? [indexView] : [])
+
     .map((view) => ({
       id: view.id,
       name: view.name,
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
index 91b18694dd..0fc67d6ab9 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
@@ -64,9 +64,6 @@ export const ViewPickerListContent = () => {
   const { getIcon } = useIcons();
 
   const indexView = viewsOnCurrentObject.find((view) => view.key === 'INDEX');
-  const viewsOnCurrentObjectWithoutIndex = viewsOnCurrentObject.filter(
-    (view) => view.key !== 'INDEX',
-  );
 
   const handleDragEnd = useCallback(
     (result: DropResult) => {
@@ -89,49 +86,41 @@ export const ViewPickerListContent = () => {
       <DropdownMenuItemsContainer>
         <DraggableList
           onDragEnd={handleDragEnd}
-          draggableItems={viewsOnCurrentObjectWithoutIndex.map(
-            (view, index) => (
-              <DraggableItem
-                key={view.id}
-                draggableId={view.id}
-                index={index}
-                isDragDisabled={viewsOnCurrentObjectWithoutIndex.length === 1}
-                itemComponent={
-                  <MenuItemDraggable
-                    key={view.id}
-                    iconButtons={[
-                      {
-                        Icon: IconPencil,
-                        onClick: (event: MouseEvent<HTMLButtonElement>) =>
-                          handleEditViewButtonClick(event, view.id),
-                      },
-                    ].filter(isDefined)}
-                    isIconDisplayedOnHoverOnly
-                    onClick={() => handleViewSelect(view.id)}
-                    LeftIcon={getIcon(view.icon)}
-                    text={view.name}
-                  />
-                }
-              />
-            ),
-          )}
+          draggableItems={viewsOnCurrentObject.map((view, index) => (
+            <DraggableItem
+              key={view.id}
+              draggableId={view.id}
+              index={index}
+              isDragDisabled={viewsOnCurrentObject.length === 1}
+              itemComponent={
+                <MenuItemDraggable
+                  key={view.id}
+                  iconButtons={
+                    indexView?.id === view.id
+                      ? [
+                          {
+                            Icon: IconLock,
+                          },
+                        ]
+                      : [
+                          {
+                            Icon: IconPencil,
+                            onClick: (event: MouseEvent<HTMLButtonElement>) =>
+                              handleEditViewButtonClick(event, view.id),
+                          },
+                        ].filter(isDefined)
+                  }
+                  isIconDisplayedOnHoverOnly={
+                    indexView?.id === view.id ? false : true
+                  }
+                  onClick={() => handleViewSelect(view.id)}
+                  LeftIcon={getIcon(view.icon)}
+                  text={view.name}
+                />
+              }
+            />
+          ))}
         />
-        {indexView && (
-          <MenuItemDraggable
-            key={indexView.id}
-            iconButtons={[
-              {
-                Icon: IconLock,
-              },
-            ].filter(isDefined)}
-            isIconDisplayedOnHoverOnly={false}
-            onClick={() => handleViewSelect(indexView.id)}
-            LeftIcon={getIcon(indexView.icon)}
-            text={indexView.name}
-            accent="placeholder"
-            isDragDisabled
-          />
-        )}
       </DropdownMenuItemsContainer>
       <DropdownMenuSeparator />
       <StyledBoldDropdownMenuItemsContainer>