[ui-storagebrowser] refactor action component to extend for trash actions (#4023)

Author: ramprasadagarwal

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

@@ -13,6 +13,7 @@
 // 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.
+
 @use 'variables' as vars;
 @use 'mixins';
 

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

@@ -56,6 +56,7 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
     filePath.split('/').pop() !== '' ? (filePath.split('/').pop() ?? '') : filePath.split('://')[0];
 
   const { t } = i18nReact.useTranslation();
+
   const {
     data: fileStats,
     loading,
@@ -111,17 +112,17 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
                 setFilePath(fileSystem.user_home_directory);
               }}
               className="hue-storage-browser__home-bar-btns"
-              data-event={''}
-              title={'home'}
+              data-event=""
+              title={t('Home')}
               icon={<HomeIcon />}
             >
               {t('Home')}
             </BorderlessButton>
             <BorderlessButton
               onClick={() => reloadData()}
               className="hue-storage-browser__home-bar-btns"
-              data-event={''}
-              title={'Refresh'}
+              data-event=""
+              title={t('Refresh')}
               icon={<RefreshIcon />}
             >
               {t('Refresh')}
@@ -143,7 +144,7 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
           <StorageDirectoryPage
             fileStats={fileStats}
             onFilePathChange={setFilePath}
-            config={fileSystem.config}
+            fileSystem={fileSystem}
           />
         )}
         {fileStats?.type === BrowserViewType.file && !loading && (

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/CreateAndUploadAction/CreateAndUploadAction.scss renamed to desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/CreateAndUpload/CreateAndUploadAction.scss

@@ -2,34 +2,36 @@ import React from 'react';
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import CreateAndUploadAction from './CreateAndUploadAction';
-import { CREATE_DIRECTORY_API_URL, CREATE_FILE_API_URL } from '../../api';
+import { CREATE_DIRECTORY_API_URL, CREATE_FILE_API_URL } from '../../../api';
 
 const mockSave = jest.fn();
-jest.mock('../../../../utils/hooks/useSaveData/useSaveData', () => ({
+jest.mock('../../../../../utils/hooks/useSaveData/useSaveData', () => ({
   __esModule: true,
   default: jest.fn(() => ({
     save: mockSave
   }))
 }));
 
-jest.mock('../../../../utils/huePubSub', () => ({
+jest.mock('../../../../../utils/huePubSub', () => ({
   __esModule: true,
   publish: jest.fn()
 }));
 
 describe('CreateAndUploadAction', () => {
   const currentPath = '/some/path';
-  const onSuccessfulAction = jest.fn();
+  const onActionSuccess = jest.fn();
+  const onActionError = jest.fn();
   const setLoadingFiles = jest.fn();
   const mockFilesUpload = jest.fn();
 
   beforeEach(() => {
     render(
       <CreateAndUploadAction
         currentPath={currentPath}
-        onSuccessfulAction={onSuccessfulAction}
+        onActionSuccess={onActionSuccess}
         setLoadingFiles={setLoadingFiles}
         onFilesUpload={mockFilesUpload}
+        onActionError={onActionError}
       />
     );
   });

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

@@ -24,20 +24,20 @@ import DropDownIcon from '@cloudera/cuix-core/icons/react/DropdownIcon';
 import ImportIcon from '@cloudera/cuix-core/icons/react/ImportIcon';
 import { PrimaryButton } from 'cuix/dist/components/Button';
 
-import { i18nReact } from '../../../../utils/i18nReact';
-import huePubSub from '../../../../utils/huePubSub';
-import { CREATE_DIRECTORY_API_URL, CREATE_FILE_API_URL } from '../../api';
-import { FileStats } from '../../types';
-import useSaveData from '../../../../utils/hooks/useSaveData/useSaveData';
-import InputModal from '../../../../reactComponents/InputModal/InputModal';
+import { i18nReact } from '../../../../../utils/i18nReact';
+import { CREATE_DIRECTORY_API_URL, CREATE_FILE_API_URL } from '../../../api';
+import { FileStats } from '../../../types';
+import useSaveData from '../../../../../utils/hooks/useSaveData/useSaveData';
+import InputModal from '../../../../../reactComponents/InputModal/InputModal';
 import './CreateAndUploadAction.scss';
-import DragAndDrop from '../../../../reactComponents/DragAndDrop/DragAndDrop';
+import DragAndDrop from '../../../../../reactComponents/DragAndDrop/DragAndDrop';
 
 interface CreateAndUploadActionProps {
   currentPath: FileStats['path'];
-  onSuccessfulAction: () => void;
+  onActionSuccess: () => void;
   setLoadingFiles: (value: boolean) => void;
   onFilesUpload: (files: File[]) => void;
+  onActionError: (error: Error) => void;
 }
 
 enum ActionType {
@@ -48,9 +48,10 @@ enum ActionType {
 
 const CreateAndUploadAction = ({
   currentPath,
-  onSuccessfulAction,
+  onActionSuccess,
   setLoadingFiles,
-  onFilesUpload
+  onFilesUpload,
+  onActionError
 }: CreateAndUploadActionProps): JSX.Element => {
   const { t } = i18nReact.useTranslation();
 
@@ -66,19 +67,13 @@ const CreateAndUploadAction = ({
   };
 
   const onApiSuccess = () => {
-    setLoadingFiles(false);
     onModalClose();
-    onSuccessfulAction();
-  };
-
-  const onApiError = (error: Error) => {
-    setLoadingFiles(false);
-    huePubSub.publish('hue.error', error);
+    onActionSuccess();
   };
 
   const { save, loading } = useSaveData(undefined, {
     onSuccess: onApiSuccess,
-    onError: onApiError
+    onError: onActionError
   });
 
   const onActionClick = (action: ActionType) => () => {

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

@@ -19,7 +19,7 @@ import { render, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import ChangeOwnerAndGroupModal from './ChangeOwnerAndGroupModal';
-import { StorageDirectoryTableData } from '../../../types';
+import { StorageDirectoryTableData } from '../../../../types';
 
 const mockFiles: StorageDirectoryTableData[] = [
   {
@@ -36,7 +36,7 @@ const mockFiles: StorageDirectoryTableData[] = [
 ];
 
 const mockSave = jest.fn();
-jest.mock('../../../../../utils/hooks/useSaveData/useSaveData', () => ({
+jest.mock('../../../../../../utils/hooks/useSaveData/useSaveData', () => ({
   __esModule: true,
   default: jest.fn(() => ({
     save: mockSave,

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

@@ -16,11 +16,11 @@
 
 import React, { useEffect, useMemo, useState } from 'react';
 import Modal from 'cuix/dist/components/Modal';
-import { i18nReact } from '../../../../../utils/i18nReact';
-import useSaveData from '../../../../../utils/hooks/useSaveData/useSaveData';
+import { i18nReact } from '../../../../../../utils/i18nReact';
+import useSaveData from '../../../../../../utils/hooks/useSaveData/useSaveData';
 import { Checkbox, Input, Select } from 'antd';
-import { ListDirectory, StorageDirectoryTableData } from '../../../types';
-import { BULK_CHANGE_OWNER_API_URL } from '../../../api';
+import { ListDirectory, StorageDirectoryTableData } from '../../../../types';
+import { BULK_CHANGE_OWNER_API_URL } from '../../../../api';
 import './ChangeOwnerAndGroupModal.scss';
 
 interface ChangeOwnerAndGroupModalProps {

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

@@ -18,7 +18,7 @@ import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ChangePermissionModal from './ChangePermissionModal';
-import { StorageDirectoryTableData } from '../../../types';
+import { StorageDirectoryTableData } from '../../../../types';
 
 const mockFiles: StorageDirectoryTableData[] = [
   {
@@ -35,7 +35,7 @@ const mockFiles: StorageDirectoryTableData[] = [
 ];
 
 const mockSave = jest.fn();
-jest.mock('../../../../../utils/hooks/useSaveData/useSaveData', () => ({
+jest.mock('../../../../../../utils/hooks/useSaveData/useSaveData', () => ({
   __esModule: true,
   default: jest.fn(() => ({
     save: mockSave,

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

@@ -16,11 +16,11 @@
 
 import React, { useState } from 'react';
 import Modal from 'cuix/dist/components/Modal';
-import { i18nReact } from '../../../../../utils/i18nReact';
-import useSaveData from '../../../../../utils/hooks/useSaveData/useSaveData';
+import { i18nReact } from '../../../../../../utils/i18nReact';
+import useSaveData from '../../../../../../utils/hooks/useSaveData/useSaveData';
 import { Checkbox, Table } from 'antd';
-import { StorageDirectoryTableData } from '../../../types';
-import { BULK_CHANGE_PERMISSION_API_URL } from '../../../api';
+import { StorageDirectoryTableData } from '../../../../types';
+import { BULK_CHANGE_PERMISSION_API_URL } from '../../../../api';
 import { getInitialPermissions, Permission } from './ChangePermissionModal.util';
 
 import './ChangePermissionModal.scss';

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

@@ -15,7 +15,7 @@
 // limitations under the License.
 
 import { getInitialPermissions } from './ChangePermissionModal.util';
-import { StorageDirectoryTableData } from '../../../types';
+import { StorageDirectoryTableData } from '../../../../types';
 
 describe('getInitialPermissions', () => {
   const mockFiles: StorageDirectoryTableData[] = [

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

@@ -14,7 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { StorageDirectoryTableData } from '../../../types';
+import { StorageDirectoryTableData } from '../../../../types';
 
 interface entityPermission {
   read: boolean;

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

@@ -18,7 +18,7 @@ import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import CompressionModal from './CompressionModal';
-import { StorageDirectoryTableData } from '../../../types';
+import { StorageDirectoryTableData } from '../../../../types';
 
 const mockFiles: StorageDirectoryTableData[] = [
   {
@@ -46,7 +46,7 @@ const mockFiles: StorageDirectoryTableData[] = [
 ];
 
 const mockSave = jest.fn();
-jest.mock('../../../../../utils/hooks/useSaveData/useSaveData', () => ({
+jest.mock('../../../../../../utils/hooks/useSaveData/useSaveData', () => ({
   __esModule: true,
   default: jest.fn(() => ({
     save: mockSave,

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

@@ -16,10 +16,10 @@
 
 import React, { useState } from 'react';
 import Modal from 'cuix/dist/components/Modal';
-import { i18nReact } from '../../../../../utils/i18nReact';
-import useSaveData from '../../../../../utils/hooks/useSaveData/useSaveData';
-import { StorageDirectoryTableData } from '../../../types';
-import { COMPRESS_API_URL } from '../../../api';
+import { i18nReact } from '../../../../../../utils/i18nReact';
+import useSaveData from '../../../../../../utils/hooks/useSaveData/useSaveData';
+import { StorageDirectoryTableData } from '../../../../types';
+import { COMPRESS_API_URL } from '../../../../api';
 import { Input } from 'antd';
 
 import './CompressionModal.scss';

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

@@ -1,9 +1,25 @@
+// 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, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import DeletionModal from './DeletionModal';
-import { StorageDirectoryTableData } from '../../../types';
-import { BULK_DELETION_API_URL, DELETION_API_URL } from '../../../api';
+import { StorageDirectoryTableData } from '../../../../types';
+import { BULK_DELETION_API_URL, DELETION_API_URL } from '../../../../api';
 
 const mockFiles: StorageDirectoryTableData[] = [
   {
@@ -31,7 +47,7 @@ const mockFiles: StorageDirectoryTableData[] = [
 ];
 
 const mockSave = jest.fn();
-jest.mock('../../../../../utils/hooks/useSaveData/useSaveData', () => ({
+jest.mock('../../../../../../utils/hooks/useSaveData/useSaveData', () => ({
   __esModule: true,
   default: jest.fn(() => ({
     save: mockSave,

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

@@ -16,10 +16,10 @@
 
 import React from 'react';
 import Modal from 'cuix/dist/components/Modal';
-import { i18nReact } from '../../../../../utils/i18nReact';
-import useSaveData from '../../../../../utils/hooks/useSaveData/useSaveData';
-import { StorageDirectoryTableData } from '../../../types';
-import { BULK_DELETION_API_URL, DELETION_API_URL } from '../../../api';
+import { i18nReact } from '../../../../../../utils/i18nReact';
+import useSaveData from '../../../../../../utils/hooks/useSaveData/useSaveData';
+import { StorageDirectoryTableData } from '../../../../types';
+import { BULK_DELETION_API_URL, DELETION_API_URL } from '../../../../api';
 
 interface DeletionModalProps {
   isOpen?: boolean;

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

@@ -18,7 +18,7 @@ import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ExtractAction from './ExtractionModal';
-import { StorageDirectoryTableData } from '../../../types';
+import { StorageDirectoryTableData } from '../../../../types';
 
 const mockFile: StorageDirectoryTableData = {
   name: 'archive.zip',
@@ -34,7 +34,7 @@ const mockFile: StorageDirectoryTableData = {
 
 const mockSave = jest.fn();
 let mockLoading = false;
-jest.mock('../../../../../utils/hooks/useSaveData/useSaveData', () => ({
+jest.mock('../../../../../../utils/hooks/useSaveData/useSaveData', () => ({
   __esModule: true,
   default: jest.fn(() => ({
     save: mockSave,

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

@@ -16,10 +16,10 @@
 
 import React from 'react';
 import Modal from 'cuix/dist/components/Modal';
-import { i18nReact } from '../../../../../utils/i18nReact';
-import useSaveData from '../../../../../utils/hooks/useSaveData/useSaveData';
-import { StorageDirectoryTableData } from '../../../types';
-import { EXTRACT_API_URL } from '../../../api';
+import { i18nReact } from '../../../../../../utils/i18nReact';
+import useSaveData from '../../../../../../utils/hooks/useSaveData/useSaveData';
+import { StorageDirectoryTableData } from '../../../../types';
+import { EXTRACT_API_URL } from '../../../../api';
 
 interface ExtractActionProps {
   currentPath: string;