Fixes Default View Ordering (twentyhq#6114) (twentyhq#6326)

fixes twentyhq#6114 Co-authored-by: Lucas Bordeau <[email protected]>
depot · Jul 19, 2024 · 12c3315 · 12c3315
1 parent 088d061
commit 12c3315
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 54 deletions.
diff --git 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
@@ -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>