[ui-storagebrowser] adds trash functionality (#4024)

Author: ramprasadagarwal

desktop/core/src/desktop/api_public.py

@@ -371,7 +371,7 @@ def storage_trash_bulk_restore(request):
   return filebrowser_api.bulk_op(django_request, filebrowser_api.trash_restore)
 
 
-@api_view(["DELETE"])
+@api_view(["POST"])
 def storage_trash_purge(request):
   django_request = get_django_request(request)
   return filebrowser_api.trash_purge(django_request)

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

@@ -21,8 +21,8 @@ import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
 
 import PathBrowser from '../../../reactComponents/PathBrowser/PathBrowser';
 import StorageDirectoryPage from '../StorageDirectoryPage/StorageDirectoryPage';
-import { FILE_STATS_API_URL } from '../api';
-import { BrowserViewType, FileStats, FileSystem } from '../types';
+import { FILE_STATS_API_URL, TRASH_PATH } from '../api';
+import { BrowserViewType, FileStats, FileSystem, TrashPath } from '../types';
 import useLoadData from '../../../utils/hooks/useLoadData/useLoadData';
 import { BorderlessButton } from 'cuix/dist/components/Button';
 
@@ -33,6 +33,9 @@ import LoadingErrorWrapper from '../../../reactComponents/LoadingErrorWrapper/Lo
 import { getFileSystemAndPath } from '../../../reactComponents/PathBrowser/PathBrowser.util';
 import RefreshIcon from '@cloudera/cuix-core/icons/react/RefreshIcon';
 import HomeIcon from '@cloudera/cuix-core/icons/react/HomeIcon';
+import DeleteIcon from '@cloudera/cuix-core/icons/react/DeleteIcon';
+import { inTrash } from '../../../utils/storageBrowserUtils';
+import { Alert } from 'antd';
 
 interface StorageBrowserTabProps {
   fileSystem: FileSystem;
@@ -57,6 +60,27 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
 
   const { t } = i18nReact.useTranslation();
 
+  const {
+    data: trashPath,
+    loading: trashLoading,
+    reloadData: onTrashPathReload
+  } = useLoadData<TrashPath>(TRASH_PATH, {
+    params: { path: fileSystem.user_home_directory },
+    skip: !fileSystem.config?.is_trash_enabled || !fileSystem.user_home_directory
+  });
+
+  const onTrashClick = async () => {
+    const latestTrashData = await onTrashPathReload();
+    setFilePath(latestTrashData?.trash_path ?? '');
+  };
+
+  const reloadTrashPath = () => {
+    if (trashPath?.trash_path) {
+      return;
+    }
+    onTrashPathReload();
+  };
+
   const {
     data: fileStats,
     loading,
@@ -96,8 +120,10 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
     }
   ];
 
+  const isLoading = loading || trashLoading;
+
   return (
-    <LoadingErrorWrapper loading={loading} errors={errorConfig}>
+    <LoadingErrorWrapper loading={isLoading} errors={errorConfig}>
       <div className="hue-storage-browser-tab-content" data-testid={testId}>
         <div className="hue-storage-browser__title-bar" data-testid={`${testId}-title-bar`}>
           <div className="hue-storage-browser__title">
@@ -118,6 +144,18 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
             >
               {t('Home')}
             </BorderlessButton>
+            {fileSystem.config?.is_trash_enabled && (
+              <BorderlessButton
+                onClick={onTrashClick}
+                className="hue-path-browser__home-btn"
+                data-event=""
+                title={t('Trash')}
+                icon={<DeleteIcon />}
+                disabled={!trashPath?.trash_path}
+              >
+                {t('Trash')}
+              </BorderlessButton>
+            )}
             <BorderlessButton
               onClick={() => reloadData()}
               className="hue-storage-browser__home-bar-btns"
@@ -129,6 +167,14 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
             </BorderlessButton>
           </div>
         </div>
+        {!!inTrash(filePath) && fileSystem.file_system === 'hdfs' && (
+          <Alert
+            type="warning"
+            message={t(
+              'This is Hadoop trash. Files will be under a checkpoint, or timestamp named, directory.'
+            )}
+          />
+        )}
         <div
           className="hue-storage-browser__path-browser-panel"
           data-testid={`${testId}-path-browser-panel`}
@@ -140,14 +186,15 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
             showIcon={false}
           />
         </div>
-        {fileStats?.type === BrowserViewType.dir && !loading && (
+        {fileStats?.type === BrowserViewType.dir && !isLoading && (
           <StorageDirectoryPage
             fileStats={fileStats}
             onFilePathChange={setFilePath}
             fileSystem={fileSystem}
+            reloadTrashPath={reloadTrashPath}
           />
         )}
-        {fileStats?.type === BrowserViewType.file && !loading && (
+        {fileStats?.type === BrowserViewType.file && !isLoading && (
           <StorageFilePage fileName={fileName} fileStats={fileStats} onReload={reloadData} />
         )}
       </div>

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/FileAndFolder/StorageBrowserActions.scss renamed to desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/FileAndFolder/FileAndFolderActions.scss

@@ -19,7 +19,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
-import StorageBrowserActions from './StorageBrowserActions';
+import FileAndFolderActions from './FileAndFolderActions';
 import { StorageDirectoryTableData } from '../../../types';
 import { get } from '../../../../../api/utils';
 import huePubSub from '../../../../../utils/huePubSub';
@@ -44,7 +44,7 @@ jest.mock('config/hueConfig', () => ({
 
 const mockGet = get as jest.MockedFunction<typeof get>;
 
-describe('StorageBrowserRowActions', () => {
+describe('FileAndFolderActions', () => {
   //View summary option is enabled and added to the actions menu when the row data is either hdfs/ofs and a single file
   const mockTwoRecords: StorageDirectoryTableData[] = [
     {
@@ -74,7 +74,16 @@ describe('StorageBrowserRowActions', () => {
   const mockRecord: StorageDirectoryTableData = mockTwoRecords[0];
 
   const setLoadingFiles = jest.fn();
-  const onSuccessfulAction = jest.fn();
+  const mockOnActionSuccess = jest.fn();
+  const mockOnActionError = jest.fn();
+  const mockConfig = {
+    is_trash_enabled: true,
+    is_hdfs_superuser: true,
+    groups: ['hue'],
+    users: ['hue'],
+    superuser: 'hue',
+    supergroup: 'hue'
+  };
 
   const setUpActionMenu = async (
     records: StorageDirectoryTableData[],
@@ -93,9 +102,11 @@ describe('StorageBrowserRowActions', () => {
           ]
         : records;
     const { getByRole } = render(
-      <StorageBrowserActions
+      <FileAndFolderActions
+        config={mockConfig}
+        onActionError={mockOnActionError}
         setLoadingFiles={setLoadingFiles}
-        onSuccessfulAction={onSuccessfulAction}
+        onActionSuccess={mockOnActionSuccess}
         selectedFiles={selectedFiles}
         currentPath="/path/to/folder"
       />

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/FileAndFolder/StorageBrowserActions.test.tsx renamed to desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/FileAndFolder/FileAndFolderActions.test.tsx

@@ -34,9 +34,9 @@ import ConfigureIcon from '@cloudera/cuix-core/icons/react/ConfigureIcon';
 
 import { i18nReact } from '../../../../../utils/i18nReact';
 import huePubSub from '../../../../../utils/huePubSub';
-import './StorageBrowserActions.scss';
+import './FileAndFolderActions.scss';
 import { FileStats, FileSystem, StorageDirectoryTableData } from '../../../types';
-import { ActionType, getEnabledActions } from './StorageBrowserActions.util';
+import { ActionType, getEnabledActions } from './FileAndFolderActions.util';
 import MoveCopyModal from './MoveCopyModal/MoveCopyModal';
 import RenameModal from './RenameModal/RenameModal';
 import ReplicationModal from './ReplicationModal/ReplicationModal';
@@ -71,7 +71,7 @@ const iconsMap: Record<ActionType, JSX.Element> = {
   [ActionType.ChangePermission]: <ConfigureIcon />
 };
 
-const StorageBrowserActions = ({
+const FileAndFolderActions = ({
   config,
   currentPath,
   selectedFiles,
@@ -217,4 +217,4 @@ const StorageBrowserActions = ({
   );
 };
 
-export default StorageBrowserActions;
+export default FileAndFolderActions;

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/FileAndFolder/StorageBrowserActions.tsx renamed to desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/FileAndFolder/FileAndFolderActions.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import MoveCopyModal from './MoveCopyModal';
-import { ActionType } from '../StorageBrowserActions.util';
+import { ActionType } from '../FileAndFolderActions.util';
 import { BULK_COPY_API_URL, BULK_MOVE_API_URL } from '../../../../api';
 import { StorageDirectoryTableData } from '../../../../types';
 

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

@@ -17,7 +17,7 @@
 import React from 'react';
 import { i18nReact } from '../../../../../../utils/i18nReact';
 import useSaveData from '../../../../../../utils/hooks/useSaveData/useSaveData';
-import { ActionType } from '../StorageBrowserActions.util';
+import { ActionType } from '../FileAndFolderActions.util';
 import { BULK_COPY_API_URL, BULK_MOVE_API_URL } from '../../../../api';
 import FileChooserModal from '../../../../FileChooserModal/FileChooserModal';
 import { FileStats, StorageDirectoryTableData } from '../../../../types';

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/FileAndFolder/MoveCopyModal/MoveCopyModal.test.tsx

@@ -0,0 +1,109 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import StorageDirectoryActions from './StorageDirectoryActions';
+
+const mockOnActionSuccess = jest.fn();
+const mockSetLoadingFiles = jest.fn();
+const mockOnFilesDrop = jest.fn();
+const mockOnFilePathChange = jest.fn();
+
+describe('StorageDirectoryActions Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const mockSelectedFiles = [
+    {
+      name: 'file1.txt',
+      size: '0 Byte',
+      type: 'file',
+      permission: 'rwxrwxrwx',
+      mtime: '2021-01-01 00:00:00',
+      path: '/user/path/.Trash/Current/file1.txt',
+      user: 'test',
+      group: 'test',
+      replication: 1
+    }
+  ];
+
+  const mockFileStats = {
+    name: 'file1.txt',
+    type: 'file',
+    permission: 'rwxrwxrwx',
+    mtime: 123,
+    path: '/user/path/file1.txt',
+    user: 'test',
+    group: 'test',
+    replication: 1,
+    atime: 123,
+    blockSize: 123,
+    mode: 123,
+    rwx: 'rwxrwxrwx',
+    size: 123
+  };
+
+  const mockFileSystem = {
+    file_system: 'hdfs',
+    user_home_directory: '/user/hue'
+  };
+
+  const mockTrashPath = '/user/path/.Trash/Current';
+  const mockIsTrashEmpty = !mockSelectedFiles.length;
+
+  it('should render the Trash actions when path is in Trash', () => {
+    const { getByRole, queryByRole } = render(
+      <StorageDirectoryActions
+        selectedFiles={mockSelectedFiles}
+        isFolderEmpty={mockIsTrashEmpty}
+        onActionSuccess={mockOnActionSuccess}
+        setLoadingFiles={mockSetLoadingFiles}
+        fileStats={{ ...mockFileStats, path: mockTrashPath }}
+        fileSystem={mockFileSystem}
+        onFilePathChange={mockOnFilePathChange}
+        onFilesDrop={mockOnFilesDrop}
+      />
+    );
+
+    expect(getByRole('button', { name: 'Restore' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Empty trash' })).toBeInTheDocument();
+    expect(queryByRole('button', { name: 'Actions' })).not.toBeInTheDocument();
+    expect(queryByRole('button', { name: 'New' })).not.toBeInTheDocument();
+  });
+
+  it('should render the regular actions when path is not in Trash', () => {
+    const { getByRole, queryByRole } = render(
+      <StorageDirectoryActions
+        selectedFiles={mockSelectedFiles}
+        isFolderEmpty={mockIsTrashEmpty}
+        onActionSuccess={mockOnActionSuccess}
+        setLoadingFiles={mockSetLoadingFiles}
+        fileStats={mockFileStats}
+        fileSystem={mockFileSystem}
+        onFilePathChange={mockOnFilePathChange}
+        onFilesDrop={mockOnFilesDrop}
+      />
+    );
+
+    expect(getByRole('button', { name: 'Actions' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'New' })).toBeInTheDocument();
+    expect(queryByRole('button', { name: 'Restore' })).not.toBeInTheDocument();
+    expect(queryByRole('button', { name: 'Empty trash' })).not.toBeInTheDocument();
+  });
+});

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

@@ -15,14 +15,17 @@
 // limitations under the License.
 
 import React from 'react';
+import { inTrash } from '../../../../utils/storageBrowserUtils';
 import CreateAndUploadAction from './CreateAndUpload/CreateAndUploadAction';
-import StorageBrowserActions from './FileAndFolder/StorageBrowserActions';
+import TrashActions from './Trash/TrashActions';
+import FileAndFolderActions from './FileAndFolder/FileAndFolderActions';
 import { FileStats, FileSystem, StorageDirectoryTableData } from '../../types';
 import huePubSub from '../../../../utils/huePubSub';
 
 interface StorageDirectoryActionsProps {
   fileStats: FileStats;
   fileSystem: FileSystem;
+  onFilePathChange: (path: string) => void;
   onActionSuccess: () => void;
   setLoadingFiles: (value: boolean) => void;
   selectedFiles: StorageDirectoryTableData[];
@@ -32,6 +35,7 @@ interface StorageDirectoryActionsProps {
 const StorageDirectoryActions = ({
   fileStats,
   fileSystem,
+  onFilePathChange,
   onActionSuccess,
   setLoadingFiles,
   selectedFiles,
@@ -47,9 +51,22 @@ const StorageDirectoryActions = ({
     huePubSub.publish('hue.error', error);
   };
 
+  if (inTrash(fileStats.path)) {
+    return (
+      <TrashActions
+        selectedFiles={selectedFiles}
+        currentPath={fileStats.path}
+        setLoadingFiles={setLoadingFiles}
+        onActionSuccess={onApiSuccess}
+        onActionError={onApiError}
+        onTrashEmptySuccess={() => onFilePathChange(fileSystem.user_home_directory)}
+      />
+    );
+  }
+
   return (
     <>
-      <StorageBrowserActions
+      <FileAndFolderActions
         config={fileSystem.config}
         currentPath={fileStats.path}
         selectedFiles={selectedFiles}