Merge pull request #1265 from internxt/fix/breadcumbs-rename-and-rena…

…me-folder-default-name [PB-469]: fix/breadcrumbs and New folder dialog name issues
internxt · Sep 24, 2024 · 8a2f217 · 8a2f217
2 parents b85a136 + 00b14a4
commit 8a2f217
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 158 deletions.
diff --git a/src/app/drive/components/DriveExplorer/DriveExplorer.tsx b/src/app/drive/components/DriveExplorer/DriveExplorer.tsx
@@ -70,6 +70,7 @@ import WarningMessageWrapper from '../WarningMessage/WarningMessageWrapper';
 import './DriveExplorer.scss';
 import { DriveTopBarItems } from './DriveTopBarItems';
 import DriveTopBarActions from './components/DriveTopBarActions';
+import { getAncestorsAndSetNamePath } from 'app/store/slices/storage/storage.thunks/goToFolderThunk';
 
 const TRASH_PAGINATION_OFFSET = 50;
 export const UPLOAD_ITEMS_LIMIT = 3000;
@@ -429,7 +430,7 @@ const DriveExplorer = (props: DriveExplorerProps): JSX.Element => {
       if (isFileViewerOpen) {
         dispatch(uiActions.setCurrentEditingNameDirty(newItem.plainName ?? newItem.name));
       } else if (itemToRename && editNameItem.isFolder) {
-        dispatch(uiActions.setCurrentEditingBreadcrumbNameDirty(newItem.plainName ?? newItem.name));
+        getAncestorsAndSetNamePath(newItem.uuid, dispatch);
       }
     }
     dispatch(storageActions.setItemToRename(null));

diff --git a/src/app/drive/components/DriveExplorer/DriveExplorerItem/hooks/useDriveStoreProps.tsx b/src/app/drive/components/DriveExplorer/DriveExplorerItem/hooks/useDriveStoreProps.tsx
@@ -15,7 +15,6 @@ interface DriveItemStoreProps {
   isDriveItemInfoMenuOpen: boolean;
   isEditingName: (item: DriveItemData) => boolean;
   dirtyName: string;
-  breadcrumbDirtyName: string;
 }
 
 const useDriveItemStoreProps = (): DriveItemStoreProps => {
@@ -38,7 +37,6 @@ const useDriveItemStoreProps = (): DriveItemStoreProps => {
   const isDriveItemInfoMenuOpen = useAppSelector((state: RootState) => state.ui.isDriveItemInfoMenuOpen);
   const isEditingName = useAppSelector(isEditingNameSelector);
   const dirtyName = useAppSelector((state: RootState) => state.ui.currentEditingNameDirty);
-  const breadcrumbDirtyName = useAppSelector((state: RootState) => state.ui.currentEditingBreadcrumbNameDirty);
 
   return {
     isSomeItemSelected,
@@ -51,7 +49,6 @@ const useDriveItemStoreProps = (): DriveItemStoreProps => {
     isDriveItemInfoMenuOpen,
     isEditingName,
     dirtyName,
-    breadcrumbDirtyName,
   };
 };
 

diff --git a/src/app/drive/components/EditFolderNameDialog/EditFolderNameDialog.tsx b/src/app/drive/components/EditFolderNameDialog/EditFolderNameDialog.tsx
diff --git a/src/app/drive/components/EditItemNameDialog/EditItemNameDialog.tsx b/src/app/drive/components/EditItemNameDialog/EditItemNameDialog.tsx
@@ -17,12 +17,11 @@ type EditItemNameDialogProps = {
 };
 
 const EditItemNameDialog: FC<EditItemNameDialogProps> = ({ item, isOpen, resourceToken, onClose, onSuccess }) => {
-  const [newItemName, setNewItemName] = useState('');
+  const dispatch = useAppDispatch();
+  const { translate } = useTranslationContext();
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-
-  const { translate } = useTranslationContext();
-  const dispatch = useAppDispatch();
+  const [newItemName, setNewItemName] = useState('');
 
   useEffect(() => {
     setNewItemName(item?.plainName ?? '');
@@ -72,7 +71,6 @@ const EditItemNameDialog: FC<EditItemNameDialogProps> = ({ item, isOpen, resourc
         <p className="text-2xl font-medium text-gray-100" data-cy="editItemNameDialogTitle">
           {translate('modals.renameItemDialog.title')}
         </p>
-
         <Input
           disabled={isLoading}
           className={`${error !== '' ? 'error' : ''}`}
@@ -89,7 +87,6 @@ const EditItemNameDialog: FC<EditItemNameDialogProps> = ({ item, isOpen, resourc
           message={error}
           autofocus
         />
-
         <div className="flex flex-row items-center justify-end space-x-2">
           <Button
             disabled={isLoading}

diff --git a/src/app/shared/components/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.tsx b/src/app/shared/components/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.tsx
@@ -13,7 +13,6 @@ import {
   handleRepeatedUploadingFiles,
   handleRepeatedUploadingFolders,
 } from '../../../../store/slices/storage/storage.thunks/renameItemsThunk';
-import { uiActions } from '../../../../store/slices/ui';
 import { BreadcrumbItemData, BreadcrumbsMenuProps } from '../types';
 interface BreadcrumbsItemProps {
   item: BreadcrumbItemData;
@@ -125,7 +124,6 @@ const BreadcrumbsItem = (props: BreadcrumbsItemProps): JSX.Element => {
   );
 
   const onItemClicked = (item: BreadcrumbItemData): void => {
-    dispatch(uiActions.setCurrentEditingBreadcrumbNameDirty(''));
     if (item.active) {
       item.onClick && item.onClick();
     }

diff --git a/src/app/shared/components/Breadcrumbs/BreadcrumbsMenu/BreadcrumbsMenuBackups.tsx b/src/app/shared/components/Breadcrumbs/BreadcrumbsMenu/BreadcrumbsMenuBackups.tsx
@@ -4,15 +4,13 @@ import { useTranslationContext } from '../../../../i18n/provider/TranslationProv
 import { downloadItemsThunk } from '../../../../store/slices/storage/storage.thunks/downloadItemsThunk';
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import { uiActions } from '../../../../store/slices/ui';
-import useDriveItemStoreProps from '../../../../drive/components/DriveExplorer/DriveExplorerItem/hooks/useDriveStoreProps';
 import { getAppConfig } from '../../../../core/services/config.service';
 import { BreadcrumbsMenuProps } from '../types';
 import { DriveItemData } from '../../../../drive/types';
 
 const BreadcrumbsMenuBackups = (props: BreadcrumbsMenuProps): JSX.Element => {
   const { translate } = useTranslationContext();
   const dispatch = useAppDispatch();
-  const { breadcrumbDirtyName } = useDriveItemStoreProps();
   const currentDevice = useAppSelector((state) => state.backups.currentDevice);
   const currentFolder = useAppSelector((state) => state.backups.currentFolder);
   const path = getAppConfig().views.find((view) => view.path === location.pathname);
@@ -39,8 +37,8 @@ const BreadcrumbsMenuBackups = (props: BreadcrumbsMenuProps): JSX.Element => {
         focus-visible:bg-gray-5"
       >
         <div className="flex max-w-fit flex-1 flex-row items-center truncate">
-          <span title={breadcrumbDirtyName || props.item.label} className="max-w-sm flex-1 truncate">
-            {breadcrumbDirtyName || props.item.label}
+          <span title={props.item.label} className="max-w-sm flex-1 truncate">
+            {props.item.label}
           </span>
           <CaretDown weight="fill" className={`ml-1 h-3 w-3 ${isSharedView && 'hidden'}`} />
         </div>

diff --git a/src/app/shared/components/Breadcrumbs/BreadcrumbsMenu/BreadcrumbsMenuDrive.tsx b/src/app/shared/components/Breadcrumbs/BreadcrumbsMenu/BreadcrumbsMenuDrive.tsx
@@ -10,17 +10,16 @@ import {
   Info,
 } from '@phosphor-icons/react';
 import { ReactComponent as MoveActionIcon } from 'assets/icons/move.svg';
-import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
+import { useTranslationContext } from '../../../../i18n/provider/TranslationProvider';
 import moveItemsToTrash from '../../../../../use_cases/trash/move-items-to-trash';
-import { DriveItemData, DriveItemDetails } from 'app/drive/types';
-import { useAppDispatch, useAppSelector } from 'app/store/hooks';
+import { DriveItemData, DriveItemDetails, FolderPath } from '../../../../drive/types';
+import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import { uiActions } from '../../../../store/slices/ui';
-import useDriveItemStoreProps from 'app/drive/components/DriveExplorer/DriveExplorerItem/hooks/useDriveStoreProps';
-import { getAppConfig } from 'app/core/services/config.service';
+import { getAppConfig } from '../../../../core/services/config.service';
 import { BreadcrumbsMenuProps } from '../types';
-import storageThunks from 'app/store/slices/storage/storage.thunks';
+import storageThunks from '../../../../store/slices/storage/storage.thunks';
 import { storageActions } from '../../../../store/slices/storage';
-import shareService from 'app/share/services/share.service';
+import shareService from '../../../../share/services/share.service';
 
 const BreadcrumbsMenuDrive = (props: BreadcrumbsMenuProps): JSX.Element => {
   const { onItemClicked } = props;
@@ -29,16 +28,15 @@ const BreadcrumbsMenuDrive = (props: BreadcrumbsMenuProps): JSX.Element => {
   const allItems = useAppSelector((state) => state.storage.levels);
   const namePath = useAppSelector((state) => state.storage.namePath);
   const currentBreadcrumb = namePath[namePath.length - 1];
-  const { breadcrumbDirtyName } = useDriveItemStoreProps();
   const path = getAppConfig().views.find((view) => view.path === location.pathname);
   const pathId = path?.id;
   const isSharedView = pathId === 'shared';
 
-  const findCurrentFolder = (currentBreadcrumb) => {
+  const findCurrentFolder = (currentBreadcrumb: FolderPath) => {
     const foldersList: DriveItemData[] = [];
 
-    for (const itemsInAllitems in allItems) {
-      const selectedFolder = allItems[itemsInAllitems].find((item) => item?.id === currentBreadcrumb?.id);
+    for (const itemsInAllItems in allItems) {
+      const selectedFolder = allItems[itemsInAllItems].find((item) => item?.uuid === currentBreadcrumb?.uuid);
       if (selectedFolder) foldersList.push(selectedFolder);
     }
     return foldersList;
@@ -96,8 +94,8 @@ const BreadcrumbsMenuDrive = (props: BreadcrumbsMenuProps): JSX.Element => {
         focus-visible:bg-gray-5"
       >
         <div className="flex max-w-fit flex-1 flex-row items-center truncate">
-          <span title={breadcrumbDirtyName || props.item.label} className="max-w-sm flex-1 truncate">
-            {breadcrumbDirtyName || props.item.label}
+          <span title={props.item.label} className="max-w-sm flex-1 truncate">
+            {props.item.label}
           </span>
           <CaretDown weight="fill" className={`ml-1 h-3 w-3 ${isSharedView && 'hidden'}`} />
         </div>

diff --git a/src/app/store/slices/ui/index.ts b/src/app/store/slices/ui/index.ts
@@ -33,7 +33,6 @@ interface UISliceState {
   currentFileInfoMenuItem: FileInfoMenuItem | null;
   currentEditingNameDriveItem: DriveItemData | null;
   currentEditingNameDirty: string;
-  currentEditingBreadcrumbNameDirty: string;
   isToastNotificationOpen: boolean;
   isGlobalSearch: boolean;
 }
@@ -69,7 +68,6 @@ const initialState: UISliceState = {
   currentFileInfoMenuItem: null,
   currentEditingNameDriveItem: null,
   currentEditingNameDirty: '',
-  currentEditingBreadcrumbNameDirty: '',
   isToastNotificationOpen: false,
   isGlobalSearch: false,
 };
@@ -174,12 +172,6 @@ export const uiSlice = createSlice({
     ) => {
       state.currentEditingNameDirty = action.payload;
     },
-    setCurrentEditingBreadcrumbNameDirty: (
-      state: UISliceState,
-      action: PayloadAction<UISliceState['currentEditingBreadcrumbNameDirty']>,
-    ) => {
-      state.currentEditingBreadcrumbNameDirty = action.payload;
-    },
     resetState: (state: UISliceState) => {
       Object.assign(state, initialState);
     },