[ui-sb] feat: disable drag and drop for root paths (#4240)

Author: ramprasadagarwal

desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserTab/StorageBrowserTab.tsx

@@ -36,7 +36,7 @@ import {
   getLastDirOrFileNameFromPath,
   getFileSystemAndPath
 } from '../../../reactComponents/PathBrowser/PathBrowser.util';
-import { inTrash } from '../../../utils/storageBrowserUtils';
+import { inTrash } from '../utils/utils';
 
 import './StorageBrowserTab.scss';
 

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/CreateAndUpload/CreateAndUploadAction.test.tsx

@@ -20,7 +20,7 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import CreateAndUploadAction from './CreateAndUploadAction';
 import { CREATE_DIRECTORY_API_URL, CREATE_FILE_API_URL } from '../../../api';
-import * as storageUtils from '../../../../../utils/storageBrowserUtils';
+import * as storageUtils from '../../../utils/utils';
 
 const mockSave = jest.fn();
 jest.mock('../../../../../utils/hooks/useSaveData/useSaveData', () => ({

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/CreateAndUpload/CreateAndUploadAction.tsx

@@ -34,8 +34,8 @@ import {
   isOFSServiceID,
   isOFSVol,
   isS3Root,
-  isFileSystemRoot
-} from '../../../../../utils/storageBrowserUtils';
+  isFileSystemNonRoot
+} from '../../../utils/utils';
 import { FileStats } from '../../../types';
 import useSaveData from '../../../../../utils/hooks/useSaveData/useSaveData';
 import InputModal from '../../../../../reactComponents/InputModal/InputModal';
@@ -78,15 +78,15 @@ const getActionConfig = (t: TFunction): Record<ActionType, ActionItem> => ({
     modal: { title: t('Create File'), label: t('File name') },
     api: CREATE_FILE_API_URL,
     group: 'create',
-    visible: path => isFileSystemRoot(path)
+    visible: path => isFileSystemNonRoot(path)
   },
   [ActionType.createFolder]: {
     icon: <FolderIcon />,
     label: t('New Folder'),
     modal: { title: t('Create Folder'), label: t('Folder name') },
     api: CREATE_DIRECTORY_API_URL,
     group: 'create',
-    visible: path => isFileSystemRoot(path)
+    visible: path => isFileSystemNonRoot(path)
   },
   [ActionType.createBucket]: {
     icon: <BucketIcon />,
@@ -116,7 +116,7 @@ const getActionConfig = (t: TFunction): Record<ActionType, ActionItem> => ({
     icon: <ImportIcon />,
     label: t('Upload File'),
     group: 'upload',
-    visible: path => isFileSystemRoot(path)
+    visible: path => isFileSystemNonRoot(path)
   }
 });
 

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/FileAndFolder/FileAndFolderActions.util.ts

@@ -29,7 +29,7 @@ import {
   isS3,
   isOFSRoot,
   inTrash
-} from '../../../../../utils/storageBrowserUtils';
+} from '../../../utils/utils';
 import { SupportedFileTypes } from '../../../../../utils/constants/storageBrowser';
 import { TFunction } from 'i18next';
 import { getFileType } from '../../../StorageFilePage/StorageFilePage.util';

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/StorageDirectoryActions.tsx

@@ -15,7 +15,7 @@
 // limitations under the License.
 
 import React from 'react';
-import { inTrash } from '../../../../utils/storageBrowserUtils';
+import { inTrash } from '../../utils/utils';
 import CreateAndUploadAction from './CreateAndUpload/CreateAndUploadAction';
 import TrashActions from './Trash/TrashActions';
 import FileAndFolderActions from './FileAndFolder/FileAndFolderActions';

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/Trash/TrashActions.tsx

@@ -22,7 +22,7 @@ import { i18nReact } from '../../../../../utils/i18nReact';
 import { FileStats, StorageDirectoryTableData } from '../../../types';
 import useSaveData from '../../../../../utils/hooks/useSaveData/useSaveData';
 import { TRASH_PURGE, TRASH_RESTORE_BULK } from '../../../api';
-import { inRestorableTrash } from '../../../../../utils/storageBrowserUtils';
+import { inRestorableTrash } from '../../../utils/utils';
 
 interface TrashActionsProps {
   selectedFiles: StorageDirectoryTableData[];

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryPage.tsx

@@ -51,6 +51,7 @@ import {
   FILE_UPLOAD_START_EVENT,
   FILE_UPLOAD_SUCCESS_EVENT
 } from '../../../reactComponents/FileUploadQueue/event';
+import { isFileSystemNonRoot } from '../utils/utils';
 
 import './StorageDirectoryPage.scss';
 
@@ -127,7 +128,16 @@ const StorageDirectoryPage = ({
 
   const onRowClicked = (record: StorageDirectoryTableData) => {
     return {
-      onClick: () => {
+      onClick: (event: React.MouseEvent) => {
+        // Handle CTRL+click to open in new tab
+        if (event.ctrlKey || event.metaKey) {
+          const currentUrl = new URL(window.location.href);
+          currentUrl.searchParams.set('path', record.path);
+          window.open(currentUrl.toString(), '_blank');
+          return;
+        }
+
+        // Normal click behavior
         if (selectedFiles.length === 0) {
           onFilePathChange(record.path);
           if (record.type === 'dir') {
@@ -258,7 +268,7 @@ const StorageDirectoryPage = ({
         </div>
       </div>
 
-      <DragAndDrop onDrop={onFilesDrop}>
+      <DragAndDrop onDrop={onFilesDrop} disabled={!isFileSystemNonRoot(fileStats.path)}>
         <LoadingErrorWrapper errors={errorConfig}>
           <PaginatedTable<StorageDirectoryTableData>
             loading={listDirectoryLoading && !polling}

desktop/core/src/desktop/js/apps/storageBrowser/StorageFilePage/StorageFilePage.tsx

@@ -32,7 +32,7 @@ import {
 import useLoadData from '../../../utils/hooks/useLoadData/useLoadData';
 import { getLastKnownConfig } from '../../../config/hueConfig';
 import LoadingErrorWrapper from '../../../reactComponents/LoadingErrorWrapper/LoadingErrorWrapper';
-import { inTrash } from '../../../utils/storageBrowserUtils';
+import { inTrash } from '../utils/utils';
 import { getLastDirOrFileNameFromPath } from '../../../reactComponents/PathBrowser/PathBrowser.util';
 
 interface StorageFilePageProps {

desktop/core/src/desktop/js/utils/storageBrowserUtils.test.ts renamed to desktop/core/src/desktop/js/apps/storageBrowser/utils/utils.test.ts

@@ -28,8 +28,8 @@ import {
   isOFSVol,
   inTrash,
   inRestorableTrash,
-  isFileSystemRoot
-} from './storageBrowserUtils';
+  isFileSystemNonRoot
+} from './utils';
 
 describe('isHDFS function', () => {
   test('returns true for paths starting with "/"', () => {
@@ -225,49 +225,49 @@ describe('inRestorableTrash function', () => {
   });
 });
 
-describe('isFileSystemRoot', () => {
+describe('isFileSystemNonRoot', () => {
   beforeEach(() => {
     jest.resetAllMocks();
   });
 
   it('returns true for non-root S3 path', () => {
-    expect(isFileSystemRoot('s3a://bucket/folder')).toBe(true);
+    expect(isFileSystemNonRoot('s3a://bucket/folder')).toBe(true);
   });
 
   it('returns false for S3 root path', () => {
-    expect(isFileSystemRoot('s3a://')).toBe(false);
+    expect(isFileSystemNonRoot('s3a://')).toBe(false);
   });
 
   it('returns true for non-root GS path', () => {
-    expect(isFileSystemRoot('gs://folder')).toBe(true);
+    expect(isFileSystemNonRoot('gs://folder')).toBe(true);
   });
 
   it('returns false for GS root path', () => {
-    expect(isFileSystemRoot('gs://')).toBe(false);
+    expect(isFileSystemNonRoot('gs://')).toBe(false);
   });
 
   it('returns true for non-root ABFS path', () => {
-    expect(isFileSystemRoot('abfs://folder')).toBe(true);
+    expect(isFileSystemNonRoot('abfs://folder')).toBe(true);
   });
 
   it('returns false for ABFS root path', () => {
-    expect(isFileSystemRoot('abfs://')).toBe(false);
+    expect(isFileSystemNonRoot('abfs://')).toBe(false);
   });
 
   it('returns true for OFS when not serviceID or volume', () => {
-    expect(isFileSystemRoot('ofs://service/volume/folder')).toBe(true);
+    expect(isFileSystemNonRoot('ofs://service/volume/folder')).toBe(true);
   });
 
   it('returns false for OFS serviceID', () => {
-    expect(isFileSystemRoot('ofs://service')).toBe(false);
+    expect(isFileSystemNonRoot('ofs://service')).toBe(false);
   });
 
   it('returns false for OFS volume', () => {
-    expect(isFileSystemRoot('ofs://service/vol')).toBe(false);
+    expect(isFileSystemNonRoot('ofs://service/vol')).toBe(false);
   });
 
   it('returns true for HDFS (default case)', () => {
-    expect(isFileSystemRoot('/hdfs')).toBe(true);
-    expect(isFileSystemRoot('/')).toBe(true);
+    expect(isFileSystemNonRoot('/hdfs')).toBe(true);
+    expect(isFileSystemNonRoot('/')).toBe(true);
   });
 });

desktop/core/src/desktop/js/utils/storageBrowserUtils.ts renamed to desktop/core/src/desktop/js/apps/storageBrowser/utils/utils.ts

@@ -84,7 +84,7 @@ export const inRestorableTrash = (path: string): boolean => {
   return path.match(/^\/user\/.+?\/\.Trash\/.+?/) !== null;
 };
 
-export const isFileSystemRoot = (path: string): boolean => {
+export const isFileSystemNonRoot = (path: string): boolean => {
   if (isS3(path)) {
     return !isS3Root(path);
   }