From 2194554a8924add2216565e7c67a3d4b78e1d1b9 Mon Sep 17 00:00:00 2001 From: Chaitanya Bankanhal Date: Sun, 21 Jun 2020 17:39:33 +0530 Subject: [PATCH 1/5] Enable uploading a file. Enable uploading a file. --- greenkeeper.json | 28 --- src/scss/_custom.scss | 7 + .../Base/FileOperations/FileOperations.js | 11 +- .../Base/FileOperations/FileUploadModal.js | 117 +++++++++++ .../FileOperations/FileUploadModal.test.js | 50 +++++ .../__snapshots__/FileOperations.test.js.snap | 44 ++-- .../FileUploadModal.test.js.snap | 198 ++++++++++++++++++ 7 files changed, 406 insertions(+), 49 deletions(-) delete mode 100644 greenkeeper.json create mode 100644 src/views/Base/FileOperations/FileUploadModal.js create mode 100644 src/views/Base/FileOperations/FileUploadModal.test.js create mode 100644 src/views/Base/FileOperations/__snapshots__/FileUploadModal.test.js.snap diff --git a/greenkeeper.json b/greenkeeper.json deleted file mode 100644 index c857b9c6e..000000000 --- a/greenkeeper.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "groups": { - "default": { - "packages": [ - "package.json", - "src/containers/DefaultLayout/package.json", - "src/views/Base/NewDriveAuthModal/package.json", - "src/views/Base/RunningJobs/package.json", - "src/views/Explorer/RemoteExplorer/package.json", - "src/views/Explorer/RemoteExplorerLayout/package.json", - "src/views/Explorer/RemotesList/package.json", - "src/views/Home/package.json", - "src/views/Pages/Login/package.json", - "src/views/Pages/Page404/package.json", - "src/views/Pages/Page500/package.json", - "src/views/Pages/Register/package.json", - "src/views/RCloneDashboard/package.json", - "src/views/RemoteManagement/NewDrive/package.json", - "src/views/RemoteManagement/ShowConfig/package.json" - ], - "ignore": [ - "react-dnd", - "react-dnd-html5-backend", - "react-dnd-test-utils" - ] - } - } -} diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss index 735717313..fef66b802 100644 --- a/src/scss/_custom.scss +++ b/src/scss/_custom.scss @@ -370,3 +370,10 @@ body{ -ms-transform: rotate(270deg) translateX(-100%); } +.upload-box { + height: 150px; + border: 2px darkgray dashed; + background: rgba(211, 211, 211, 0.23); + color: rgb(101, 101, 101); +} + diff --git a/src/views/Base/FileOperations/FileOperations.js b/src/views/Base/FileOperations/FileOperations.js index 3ee3c8ab6..52385a5d2 100644 --- a/src/views/Base/FileOperations/FileOperations.js +++ b/src/views/Base/FileOperations/FileOperations.js @@ -38,7 +38,8 @@ import {toast} from "react-toastify"; import {PROP_FS_INFO} from "../../../utils/RclonePropTypes"; import newFolderImg from '../../../assets/img/new-folder.png'; import {cleanTrashForRemote} from "rclone-api"; -import {createSelector} from "reselect"; // with import +import {createSelector} from "reselect"; +import FileUploadModal from "./FileUploadModal"; // with import function getUrl(currentPath) { const {remoteName, remotePath} = currentPath; @@ -195,11 +196,6 @@ class FileOperations extends React.Component { changePath(containerID, urlSplits[0], urlSplits[1]) } - getLg = (n) => { - const {numCols} = this.props; - return Math.abs(n * numCols); - } - render() { const {containerID, getFilesForContainerID, gridMode, navigateFwd, navigateBack, searchQuery, currentPath, doughnutData} = this.props; const {newFolderModalIsVisible, dropdownOpen, isAboutModalOpen, searchOpen, tempUrl, isUrlBarFocused} = this.state; @@ -273,7 +269,8 @@ class FileOperations extends React.Component { Show Remote Info - +
{searchOpen && { + const { + currentPath + } = props; + + const [modal, setModal] = useState(false); + + + const [files, setFiles] = useState(null); + + + const toggle = () => setModal(!modal); + + + const changeFilesHandler = (e) => { + setFiles(e.target.files); + } + + const isUploadDisabled = () => files == null; + + + const fileUploadHandler = (_) => { + const data = new FormData(); + console.log(files); + for (let i = 0; i < files.length; i++) { + // get item + let file = files.item(i); + + data.append("file" + i, file); + } + + + axiosInstance.post(`operations/uploadfile?fs=` + + `${addColonAtLast(currentPath.remoteName)}` + + `&remote=${currentPath.remotePath}`, data) + .then(res => { + toast.info("File uploaded successfully"); + }, err => { + toast.error("File upload failed"); + }); + } + + return ( +
+ + + Upload file(s) + + + New Mount + + + + + + + + + + + + + + + + + + + {' '} + + + +
+ ); +} + +FileUploadModal.propTypes = { + currentPath: RclonePropTypes.PROP_CURRENT_PATH +} + +export default FileUploadModal; \ No newline at end of file diff --git a/src/views/Base/FileOperations/FileUploadModal.test.js b/src/views/Base/FileOperations/FileUploadModal.test.js new file mode 100644 index 000000000..d11383280 --- /dev/null +++ b/src/views/Base/FileOperations/FileUploadModal.test.js @@ -0,0 +1,50 @@ +import React from "react"; +import {shallow} from "enzyme"; +import toJson from "enzyme-to-json"; +import FileUploadModal from "./FileUploadModal"; +import {findByTestAttr, testStore} from "../../../../Utils"; + + +const setUp = (intialState = {}, props = {}) => { + const store = testStore(intialState); + + const component = shallow(); + return component; +}; + + +describe('File upload Modal', function () { + describe('renders', function () { + let wrapper; + beforeEach(() => { + const initialState = {}; + + const props = { + currentPath: { + remoteName: "local", + remotePath: "" + } + }; + wrapper = setUp(initialState, props) + }); + + it('should render without crashing', function () { + const component = findByTestAttr(wrapper, "fileUploadModalComponent"); + expect(component).toHaveLength(1); + }); + + it('should have ok and cancel buttons', function () { + const okButton = findByTestAttr(wrapper, "ok-button") + expect(okButton).toHaveLength(1); + + const cancelButton = findByTestAttr(wrapper, "cancel-button"); + expect(cancelButton).toHaveLength(1); + }) + + + it('should match snapshot', function () { + expect(toJson(wrapper)).toMatchSnapshot(); + }); + + }); +}); diff --git a/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap b/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap index bc906932c..221573284 100644 --- a/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap +++ b/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap @@ -220,20 +220,36 @@ exports[`File Operations renders should match snapshot 1`] = ` className="fa fa-lg fa-search" /> - - - - + Show Remote Info + + + + + + + + Upload file(s) + + + + New Mount + + + + + + + + + + + + + + + + + + + + + + + + +`; From e85aba1aa1c7cce39773101a0c0192c7d95f5740 Mon Sep 17 00:00:00 2001 From: Chaitanya Bankanhal Date: Sun, 21 Jun 2020 17:56:40 +0530 Subject: [PATCH 2/5] Separate components from FileComponent.js --- src/views/Explorer/FilesView/FIleIcon.test.js | 0 src/views/Explorer/FilesView/FileActions.js | 78 +++++++++++++++ .../Explorer/FilesView/FileActions.test.js | 0 src/views/Explorer/FilesView/FileComponent.js | 98 +------------------ src/views/Explorer/FilesView/FileIcon.js | 27 +++++ 5 files changed, 110 insertions(+), 93 deletions(-) create mode 100644 src/views/Explorer/FilesView/FIleIcon.test.js create mode 100644 src/views/Explorer/FilesView/FileActions.js create mode 100644 src/views/Explorer/FilesView/FileActions.test.js create mode 100644 src/views/Explorer/FilesView/FileIcon.js diff --git a/src/views/Explorer/FilesView/FIleIcon.test.js b/src/views/Explorer/FilesView/FIleIcon.test.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/views/Explorer/FilesView/FileActions.js b/src/views/Explorer/FilesView/FileActions.js new file mode 100644 index 000000000..3fda0defa --- /dev/null +++ b/src/views/Explorer/FilesView/FileActions.js @@ -0,0 +1,78 @@ +import React from "react"; +import {Button, DropdownItem, DropdownMenu, DropdownToggle, UncontrolledButtonDropdown} from "reactstrap"; +import * as PropTypes from "prop-types"; +import * as RclonePropTypes from "../../../utils/RclonePropTypes"; + +function FileActions({downloadHandle, deleteHandle, item, linkShareHandle}) { + const confirmDelete = (deleteHandle, item) => { + if (window.confirm(`Are you sure you want to delete ${item.Name}`)) { + deleteHandle(item); + } + } + + const {IsDir} = item; + // let {ID, Name} = item; + // // Using fallback as fileName when the ID is not available (for local file system) + // if (ID === undefined) { + // ID = Name; + // } + + + if (!IsDir) { + + return ( + + + + + + + + + + Actions + linkShareHandle(item)}> Share with link + + confirmDelete(deleteHandle, item)}> Delete + + + + + ); + } else { + return ( + + + + + + + + Actions + linkShareHandle(item)}> Share with link + + confirmDelete(deleteHandle, item)}> Delete + + + + ) + } +} + +FileActions.propTypes = { + downloadHandle: PropTypes.func.isRequired, + deleteHandle: PropTypes.func.isRequired, + item: RclonePropTypes.PROP_ITEM.isRequired, + linkShareHandle: PropTypes.func.isRequired + +} + +export default FileActions; \ No newline at end of file diff --git a/src/views/Explorer/FilesView/FileActions.test.js b/src/views/Explorer/FilesView/FileActions.test.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/views/Explorer/FilesView/FileComponent.js b/src/views/Explorer/FilesView/FileComponent.js index 950bb2ee0..d0be18332 100644 --- a/src/views/Explorer/FilesView/FileComponent.js +++ b/src/views/Explorer/FilesView/FileComponent.js @@ -1,14 +1,5 @@ import React from "react"; -import { - Button, - Card, - CardBody, - CardFooter, - DropdownItem, - DropdownMenu, - DropdownToggle, - UncontrolledButtonDropdown, -} from "reactstrap"; +import {Card, CardBody, CardFooter,} from "reactstrap"; import {ItemTypes} from './Constants' import {DragSource} from 'react-dnd' @@ -20,6 +11,8 @@ import handleViewport from 'react-in-viewport'; import MediaWidget, {isMedia} from "../../Base/MediaWidget/MediaWidget"; import {PROP_ITEM} from "../../../utils/RclonePropTypes"; import ErrorBoundary from "../../../ErrorHandling/ErrorBoundary"; +import FileActions from "./FileActions"; +import FileIcon from "./FileIcon"; async function performCopyMoveOperation(params) { const {srcRemoteName, srcRemotePath, destRemoteName, destRemotePath, Name, IsDir, dropEffect, updateHandler} = params; @@ -94,88 +87,7 @@ function collect(connect, monitor) { } } -function FileIcon({IsDir, MimeType}, ...props) { - let className = "fa-file"; - if (IsDir) { - className = "fa-folder"; - } else if (MimeType === "application/pdf") { - className = "fa-file-pdf-o"; - } else if (MimeType === "image/jpeg") { - className = "fa-file-image-o"; - } else if (MimeType === "application/rar" || MimeType === "application/x-rar-compressed" || MimeType === " application/zip") { - className = "fa-file-archive-o"; - } else if (MimeType === "text/plain") { - className = "fa-file-text-o"; - } else if (MimeType === "text/x-vcard") { - className = "fa-address-card-o"; - } - return ; -} - -function confirmDelete(deleteHandle, item) { - if (window.confirm(`Are you sure you want to delete ${item.Name}`)) { - deleteHandle(item); - } -} - -function Actions({downloadHandle, deleteHandle, item, linkShareHandle}) { - - const {IsDir} = item; - // let {ID, Name} = item; - // // Using fallback as fileName when the ID is not available (for local file system) - // if (ID === undefined) { - // ID = Name; - // } - - if (!IsDir) { - - return ( - - - - - - - - - - Actions - linkShareHandle(item)}> Share with link - - confirmDelete(deleteHandle, item)}> Delete - - - - - ); - } else { - return ( - - - - - - - - Actions - linkShareHandle(item)}> Share with link - - confirmDelete(deleteHandle, item)}> Delete - - - - ) - } -} /** * Main class for individual render of file/directory in the files view. @@ -235,8 +147,8 @@ class FileComponent extends React.Component { {Name} - + diff --git a/src/views/Explorer/FilesView/FileIcon.js b/src/views/Explorer/FilesView/FileIcon.js new file mode 100644 index 000000000..65252bd0f --- /dev/null +++ b/src/views/Explorer/FilesView/FileIcon.js @@ -0,0 +1,27 @@ +import React from "react"; +import * as PropTypes from "prop-types"; + +function FileIcon({IsDir, MimeType}) { + let className = "fa-file"; + if (IsDir) { + className = "fa-folder"; + } else if (MimeType === "application/pdf") { + className = "fa-file-pdf-o"; + } else if (MimeType === "image/jpeg") { + className = "fa-file-image-o"; + } else if (MimeType === "application/rar" || MimeType === "application/x-rar-compressed" || MimeType === " application/zip") { + className = "fa-file-archive-o"; + } else if (MimeType === "text/plain") { + className = "fa-file-text-o"; + } else if (MimeType === "text/x-vcard") { + className = "fa-address-card-o"; + } + return ; +} + +FileIcon.propTypes = { + IsDir: PropTypes.string.isRequired, + MimeType: PropTypes.string.isRequired +} + +export default FileIcon; \ No newline at end of file From c34674316dbcf35655d7e22785747a6cb1e86793 Mon Sep 17 00:00:00 2001 From: Chaitanya Bankanhal Date: Mon, 22 Jun 2020 14:01:37 +0530 Subject: [PATCH 3/5] Update react dnd for upload files dnd --- package-lock.json | 91 +++--- package.json | 4 +- src/index.js | 2 +- src/views/Base/DropOverlay/DropOverlay.js | 16 ++ .../Base/DropOverlay/DropOverlay.test.js | 36 +++ .../__snapshots__/DropOverlay.test.js.snap | 19 ++ .../Base/FileOperations/FileUploadBox.js | 36 +++ .../Base/FileOperations/FileUploadModal.js | 119 +++++--- .../__snapshots__/FileOperations.test.js.snap | 101 ++++--- .../FileUploadModal.test.js.snap | 258 +++++++++--------- src/views/Explorer/FilesView/FIleIcon.test.js | 0 src/views/Explorer/FilesView/FileIcon.js | 30 +- src/views/Explorer/FilesView/FileIcon.test.js | 40 +++ src/views/Explorer/FilesView/FilesView.js | 19 +- .../Explorer/FilesView/FilesView.test.js | 12 +- .../__snapshots__/FileIcon.test.js.snap | 8 + .../__snapshots__/FilesView.test.js.snap | 15 +- .../RemoteExplorerLayout.js | 75 ++--- 18 files changed, 558 insertions(+), 323 deletions(-) create mode 100644 src/views/Base/DropOverlay/DropOverlay.js create mode 100644 src/views/Base/DropOverlay/DropOverlay.test.js create mode 100644 src/views/Base/DropOverlay/__snapshots__/DropOverlay.test.js.snap create mode 100644 src/views/Base/FileOperations/FileUploadBox.js delete mode 100644 src/views/Explorer/FilesView/FIleIcon.test.js create mode 100644 src/views/Explorer/FilesView/FileIcon.test.js create mode 100644 src/views/Explorer/FilesView/__snapshots__/FileIcon.test.js.snap diff --git a/package-lock.json b/package-lock.json index 437ff3d88..d0becca34 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1687,6 +1687,21 @@ "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==", "dev": true }, + "@react-dnd/asap": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz", + "integrity": "sha512-0XhqJSc6pPoNnf8DhdsPHtUhRzZALVzYMTzRwV4VI6DJNJ/5xxfL9OQUwb8IH5/2x7lSf7nAZrnzUD+16VyOVQ==" + }, + "@react-dnd/invariant": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz", + "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==" + }, + "@react-dnd/shallowequal": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz", + "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==" + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -5271,16 +5286,6 @@ "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=", "dev": true }, - "dnd-core": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-7.7.0.tgz", - "integrity": "sha512-+YqwflWEY1MEAEl2QiEiRaglYkCwIZryyQwximQGuTOm/ns7fS6Lg/i7OCkrtjM10D5FhArf/VUHIL4ZaRBK0g==", - "requires": { - "asap": "^2.0.6", - "invariant": "^2.2.4", - "redux": "^4.0.1" - } - }, "dns-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", @@ -8165,6 +8170,7 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -13434,38 +13440,52 @@ } }, "react-dnd": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-7.7.0.tgz", - "integrity": "sha512-anpJDKMgdXE6kXvtBFmIAe1fuaexpVy7meUyNjiTfCnjQ1mRvnttGTVvcW9fMKijsUQYadiyvzd3BRxteFuVXg==", + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-11.1.3.tgz", + "integrity": "sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==", "requires": { + "@react-dnd/shallowequal": "^2.0.0", "@types/hoist-non-react-statics": "^3.3.1", - "dnd-core": "^7.7.0", - "hoist-non-react-statics": "^3.3.0", - "invariant": "^2.1.0", - "shallowequal": "^1.1.0" + "dnd-core": "^11.1.3", + "hoist-non-react-statics": "^3.3.0" + }, + "dependencies": { + "dnd-core": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz", + "integrity": "sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==", + "requires": { + "@react-dnd/asap": "^4.0.0", + "@react-dnd/invariant": "^2.0.0", + "redux": "^4.0.4" + } + } } }, "react-dnd-html5-backend": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-7.7.0.tgz", - "integrity": "sha512-JgKmWOxqorFyfGPeWV+SAPhVGFe6+LrOR24jETE9rrYZU5hCppzwK9ujjS508kWibeDvbfEgi9j5qC2wB1/MoQ==", - "requires": { - "dnd-core": "^7.7.0" - } - }, - "react-dnd-test-backend": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/react-dnd-test-backend/-/react-dnd-test-backend-7.7.0.tgz", - "integrity": "sha512-ELX2b6mBcgpVUuS9K74h+ldlHdsb1ZEVhJUm5vv7ZL+9l+xmpz+6IikiSdh7MmEGGrGLb2FCdXReeMPOblaCnQ==", - "dev": true, + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz", + "integrity": "sha512-/1FjNlJbW/ivkUxlxQd7o3trA5DE33QiRZgxent3zKme8DwF4Nbw3OFVhTRFGaYhHFNL1rZt6Rdj1D78BjnNLw==", "requires": { - "dnd-core": "^7.7.0" + "dnd-core": "^11.1.3" + }, + "dependencies": { + "dnd-core": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz", + "integrity": "sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==", + "requires": { + "@react-dnd/asap": "^4.0.0", + "@react-dnd/invariant": "^2.0.0", + "redux": "^4.0.4" + } + } } }, "react-dnd-test-utils": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/react-dnd-test-utils/-/react-dnd-test-utils-7.7.0.tgz", - "integrity": "sha512-OZAMws/26P6Jo5lVomxU3RZ9BEKyshG4szrkBK0ibF6SrfJ1ysEp4HOPtpeE0hVFdy3RG0eCsVDHXQSMY+6EBg==", + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/react-dnd-test-utils/-/react-dnd-test-utils-11.1.3.tgz", + "integrity": "sha512-Yg+oTpXaCJ+NxEFt+qXJZX96dbar47EK410eXj7bDsIdYYTZzYO51BtEGlEvR/a9Kb4vEkhPZkJLxyCfqNrpjw==", "dev": true }, "react-dom": { @@ -14801,11 +14821,6 @@ "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" }, - "shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" - }, "shebang-command": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", diff --git a/package.json b/package.json index ceea5e616..d3f9b4c73 100644 --- a/package.json +++ b/package.json @@ -34,8 +34,8 @@ "react-autosuggest": "^10.0.0", "react-awesome-player": "^1.0.11", "react-chartjs-2": "^2.9.0", - "react-dnd": "^7.7.0", - "react-dnd-html5-backend": "^7.7.0", + "react-dnd": "^11.1.3", + "react-dnd-html5-backend": "^11.1.3", "react-dom": "^16.12.0", "react-in-viewport": "0.0.38", "react-redux": "^7.1.3", diff --git a/src/index.js b/src/index.js index 8e7aaa00a..8fffa0db6 100644 --- a/src/index.js +++ b/src/index.js @@ -17,4 +17,4 @@ ReactDOM.render( // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: http://bit.ly/CRA-PWA -serviceWorker.unregister(); +serviceWorker.unregister(); \ No newline at end of file diff --git a/src/views/Base/DropOverlay/DropOverlay.js b/src/views/Base/DropOverlay/DropOverlay.js new file mode 100644 index 000000000..b1cb33400 --- /dev/null +++ b/src/views/Base/DropOverlay/DropOverlay.js @@ -0,0 +1,16 @@ +import React from "react"; + +const DropOverlay = (props) => (
); + +export default DropOverlay; \ No newline at end of file diff --git a/src/views/Base/DropOverlay/DropOverlay.test.js b/src/views/Base/DropOverlay/DropOverlay.test.js new file mode 100644 index 000000000..8bf90ef4d --- /dev/null +++ b/src/views/Base/DropOverlay/DropOverlay.test.js @@ -0,0 +1,36 @@ +import React from "react"; +import {shallow} from "enzyme"; +import toJson from "enzyme-to-json"; +import DropOverlay from "./DropOverlay"; +import {findByTestAttr, testStore} from "../../../../Utils"; + + +const setUp = (intialState = {}, props = {}) => { + const store = testStore(intialState); + + const component = shallow(); + return component; +}; + + +describe('Drop Overlay', function () { + describe('renders', function () { + let wrapper; + beforeEach(() => { + const initialState = {}; + + const props = {}; + wrapper = setUp(initialState, props) + }); + + it('should render without crashing', function () { + const component = findByTestAttr(wrapper, "dropOverlay"); + expect(component).toHaveLength(1); + }); + + it('should match snapshot', function () { + expect(toJson(wrapper)).toMatchSnapshot(); + }); + + }); +}); diff --git a/src/views/Base/DropOverlay/__snapshots__/DropOverlay.test.js.snap b/src/views/Base/DropOverlay/__snapshots__/DropOverlay.test.js.snap new file mode 100644 index 000000000..ffe6db366 --- /dev/null +++ b/src/views/Base/DropOverlay/__snapshots__/DropOverlay.test.js.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Drop Overlay renders should match snapshot 1`] = ` +
+`; diff --git a/src/views/Base/FileOperations/FileUploadBox.js b/src/views/Base/FileOperations/FileUploadBox.js new file mode 100644 index 000000000..b9acc6b19 --- /dev/null +++ b/src/views/Base/FileOperations/FileUploadBox.js @@ -0,0 +1,36 @@ +import {NativeTypes} from 'react-dnd-html5-backend' +import {useDrop} from 'react-dnd' +import React from "react"; +import DropOverlay from "../DropOverlay/DropOverlay"; +import * as PropTypes from 'prop-types'; + + +export const FileUploadBox = (props) => { + const {onDrop} = props + const [{canDrop, isOver}, drop] = useDrop({ + accept: [NativeTypes.FILE], + drop(item, monitor) { + if (onDrop) { + onDrop(props, monitor) + } + }, + collect: (monitor) => ({ + isOver: monitor.isOver(), + canDrop: monitor.canDrop(), + }), + }) + const isActive = canDrop && isOver + return ( +
+ {/*Display overlay if file is about to be dropped*/} + {isActive && } + {props.children} +
+ ) +} + +FileUploadBox.propTypes = { + onDrop: PropTypes.func +} + +export default FileUploadBox; \ No newline at end of file diff --git a/src/views/Base/FileOperations/FileUploadModal.js b/src/views/Base/FileOperations/FileUploadModal.js index 267645c9b..e667651d2 100644 --- a/src/views/Base/FileOperations/FileUploadModal.js +++ b/src/views/Base/FileOperations/FileUploadModal.js @@ -1,4 +1,4 @@ -import React, {useState} from 'react'; +import React, {useCallback, useState} from 'react'; import { Button, Col, @@ -10,12 +10,16 @@ import { ModalFooter, ModalHeader, Row, + Table, UncontrolledTooltip } from 'reactstrap'; import axiosInstance from "../../../utils/API/API"; -import {addColonAtLast} from "../../../utils/Tools"; +import {addColonAtLast, formatBytes} from "../../../utils/Tools"; import {toast} from "react-toastify"; import * as RclonePropTypes from "../../../utils/RclonePropTypes"; +import FileUploadBox from "./FileUploadBox"; +import {DndProvider} from "react-dnd"; +import {HTML5Backend} from "react-dnd-html5-backend"; /** * New Mount Modal shows a button for opening a modal for new mount and then executes okHandle when positive @@ -34,6 +38,8 @@ const FileUploadModal = (props) => { const [files, setFiles] = useState(null); + const [isUploading, setIsUploading] = useState(false); + const toggle = () => setModal(!modal); @@ -42,32 +48,53 @@ const FileUploadModal = (props) => { setFiles(e.target.files); } - const isUploadDisabled = () => files == null; + const isUploadDisabled = () => !files || isUploading; + + const getFilesElement = () => { + let out = []; + for (let i = 0; i < files.length; i++) { + out.push( + {files[i].name} + {files[i].size === -1 ? "-" : formatBytes(files[i].size, 2)} + ); + } + return out; + } const fileUploadHandler = (_) => { const data = new FormData(); - console.log(files); for (let i = 0; i < files.length; i++) { // get item - let file = files.item(i); + let file = files[i]; data.append("file" + i, file); } - + setIsUploading(true); axiosInstance.post(`operations/uploadfile?fs=` + `${addColonAtLast(currentPath.remoteName)}` + `&remote=${currentPath.remotePath}`, data) .then(res => { + setIsUploading(false); + setFiles(null); + toggle(); toast.info("File uploaded successfully"); }, err => { + setIsUploading(false); toast.error("File upload failed"); }); } + const filesDropHandler = useCallback((item, monitor) => { + if (monitor) { + setFiles(monitor.getItem().files); + } + }, []); + return (
+ {' '} - - + + New Mount + + + + {files ? + + + + + + + + + {getFilesElement()} + +
NameSize
+ + : + + + + + + + + } + + + + + + + + + + {' '} + + + +
); diff --git a/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap b/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap index 221573284..7e0c599c3 100644 --- a/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap +++ b/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap @@ -1,12 +1,33 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`File Operations renders should match snapshot 1`] = ` -
+ @@ -131,17 +152,10 @@ exports[`File Operations renders should match snapshot 1`] = ` flip={true} tag="div" > - - None - - +
+ + + + - Clean Trash - - - - - - - -
-
+ + + + + + +
+ + `; diff --git a/src/views/Base/FileOperations/__snapshots__/FileUploadModal.test.js.snap b/src/views/Base/FileOperations/__snapshots__/FileUploadModal.test.js.snap index d519109a3..8c380c1a8 100644 --- a/src/views/Base/FileOperations/__snapshots__/FileUploadModal.test.js.snap +++ b/src/views/Base/FileOperations/__snapshots__/FileUploadModal.test.js.snap @@ -48,65 +48,56 @@ exports[`File upload Modal renders should match snapshot 1`] = ` unmountOnClose={true} zIndex={1050} > - - New Mount - - - + New Mount + + - - - - - - - - - - - - - - - - - - - + + + + + `; diff --git a/src/views/Explorer/FilesView/FIleIcon.test.js b/src/views/Explorer/FilesView/FIleIcon.test.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/views/Explorer/FilesView/FileIcon.js b/src/views/Explorer/FilesView/FileIcon.js index 65252bd0f..b2193b849 100644 --- a/src/views/Explorer/FilesView/FileIcon.js +++ b/src/views/Explorer/FilesView/FileIcon.js @@ -1,26 +1,28 @@ import React from "react"; import * as PropTypes from "prop-types"; +const mimeClassMap = { + "application/pdf": "fa-file-pdf-o", + "image/jpeg": "fa-file-image-o", + "application/rar": "fa-file-archive-o", + "application/x-rar-compressed": "fa-file-archive-o", + "application/zip": "fa-file-archive-o", + "text/plain": "fa-file-text-o", + "text/x-vcard": "fa-address-card-o" +} + function FileIcon({IsDir, MimeType}) { - let className = "fa-file"; + let className = mimeClassMap[MimeType]; if (IsDir) { - className = "fa-folder"; - } else if (MimeType === "application/pdf") { - className = "fa-file-pdf-o"; - } else if (MimeType === "image/jpeg") { - className = "fa-file-image-o"; - } else if (MimeType === "application/rar" || MimeType === "application/x-rar-compressed" || MimeType === " application/zip") { - className = "fa-file-archive-o"; - } else if (MimeType === "text/plain") { - className = "fa-file-text-o"; - } else if (MimeType === "text/x-vcard") { - className = "fa-address-card-o"; + className = "fa-folder" } - return ; + if (!className) className = "fa-file"; + + return ; } FileIcon.propTypes = { - IsDir: PropTypes.string.isRequired, + IsDir: PropTypes.bool.isRequired, MimeType: PropTypes.string.isRequired } diff --git a/src/views/Explorer/FilesView/FileIcon.test.js b/src/views/Explorer/FilesView/FileIcon.test.js new file mode 100644 index 000000000..b242ef519 --- /dev/null +++ b/src/views/Explorer/FilesView/FileIcon.test.js @@ -0,0 +1,40 @@ +import React from "react"; +import {shallow} from "enzyme"; +import toJson from "enzyme-to-json"; +import FileIcon from "./FileIcon"; +import {findByTestAttr, testStore} from "../../../../Utils"; + + +const setUp = (intialState = {}, props = {}) => { + const store = testStore(intialState); + + const component = shallow(); + return component; +}; + + +describe('New Mount Modal', function () { + describe('renders', function () { + let wrapper; + beforeEach(() => { + const initialState = {}; + + const props = { + IsDir: false, + MimeType: "text/plain" + }; + wrapper = setUp(initialState, props) + }); + + it('should render without crashing', function () { + const component = findByTestAttr(wrapper, "fileIconComponent"); + expect(component).toHaveLength(1); + }); + + + it('should match snapshot', function () { + expect(toJson(wrapper)).toMatchSnapshot(); + }); + + }); +}); diff --git a/src/views/Explorer/FilesView/FilesView.js b/src/views/Explorer/FilesView/FilesView.js index e3d36aaa9..3952cfd88 100644 --- a/src/views/Explorer/FilesView/FilesView.js +++ b/src/views/Explorer/FilesView/FilesView.js @@ -24,6 +24,7 @@ import * as PropTypes from 'prop-types'; import ErrorBoundary from "../../../ErrorHandling/ErrorBoundary"; import {createNewPublicLink, deleteFile, purgeDir} from "rclone-api"; import {createSelector} from "reselect"; +import DropOverlay from "../../Base/DropOverlay/DropOverlay"; /* * Start code for react DND @@ -73,22 +74,6 @@ function collect(connect, monitor) { } } -function renderOverlay() { - return ( -
- ); -} /* * END code for react DND @@ -435,7 +420,7 @@ class FilesView extends React.PureComponent { return connectDropTarget(
- {isOver && canDrop && renderOverlay()} + {isOver && canDrop && } { const store = testStore(intialState); const MyFiles = wrapInTestContext(FilesView); const component = shallow(); - const manager = component.instance().getManager(); - const backend = manager.getBackend() return component.childAt(0).dive(); }; -describe('Files View', function () { - - +describe(__filename, function () { describe('renders', function () { let wrapper; beforeEach(() => { @@ -41,11 +37,5 @@ describe('Files View', function () { it('should match snapshot', function () { expect(toJson(wrapper)).toMatchSnapshot() }); - - }); - - - - }); \ No newline at end of file diff --git a/src/views/Explorer/FilesView/__snapshots__/FileIcon.test.js.snap b/src/views/Explorer/FilesView/__snapshots__/FileIcon.test.js.snap new file mode 100644 index 000000000..aa2ebd358 --- /dev/null +++ b/src/views/Explorer/FilesView/__snapshots__/FileIcon.test.js.snap @@ -0,0 +1,8 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`New Mount Modal renders should match snapshot 1`] = ` + +`; diff --git a/src/views/Explorer/FilesView/__snapshots__/FilesView.test.js.snap b/src/views/Explorer/FilesView/__snapshots__/FilesView.test.js.snap index 1569110f2..2cd81ecc0 100644 --- a/src/views/Explorer/FilesView/__snapshots__/FilesView.test.js.snap +++ b/src/views/Explorer/FilesView/__snapshots__/FilesView.test.js.snap @@ -1,16 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Files View renders should match snapshot 1`] = ` - -`; +exports[`/media/negativezero/Projects/rclone/rclone-webui-react/src/views/Explorer/FilesView/FilesView.test.js renders should match snapshot 1`] = `""`; diff --git a/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js b/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js index 455a3deb2..578e55a26 100644 --- a/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js +++ b/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js @@ -1,10 +1,7 @@ import React from "react"; import {Button, Col, Row} from "reactstrap"; -import HTML5Backend from "react-dnd-html5-backend"; -import {DragDropContext} from "react-dnd"; import {connect} from "react-redux"; -import {compose} from "redux"; import {createPath} from "../../../actions/explorerStateActions"; import * as PropTypes from 'prop-types'; import {addRemoteContainer, changeDistractionFreeMode, changeNumCols} from "../../../actions/explorerActions"; @@ -15,6 +12,9 @@ import doublePaneImg from '../../../assets/img/double-pane1.png'; import triplePaneImg from '../../../assets/img/triple-pane.png'; import TabbedPanes from "./TabbedPanes"; +import TabsLayout from "../TabsLayout/TabsLayout"; +import {DndProvider} from "react-dnd"; +import {HTML5Backend} from 'react-dnd-html5-backend'; class RemoteExplorerLayout extends React.Component { @@ -51,42 +51,43 @@ class RemoteExplorerLayout extends React.Component { const {numCols, distractionFreeMode, activeRemoteContainerID, containers} = this.props; return ( - + + - {distractionFreeMode &&
- -
} + {distractionFreeMode &&
+ +
} - {(!distractionFreeMode) && - + {(!distractionFreeMode) && + Choose Layout: {" "} - - - - - - {/**/} - - - } - + + + + + + {/**/} + + + } + + ); } @@ -118,7 +120,10 @@ RemoteExplorerLayout.propTypes = { distractionFreeMode: PropTypes.bool.isRequired }; -export default compose( - connect(mapStateToProps, {createPath, changeNumCols, changeDistractionFreeMode, addRemoteContainer}), - DragDropContext(HTML5Backend) -)(RemoteExplorerLayout); +export default connect(mapStateToProps, { + createPath, + changeNumCols, + changeDistractionFreeMode, + addRemoteContainer +}) +(RemoteExplorerLayout); From fab2f2893ad786f485cee37911c25ad5635ee27e Mon Sep 17 00:00:00 2001 From: Chaitanya Bankanhal Date: Mon, 22 Jun 2020 14:33:42 +0530 Subject: [PATCH 4/5] Add tests for FileActions. --- package-lock.json | 20 +++++ package.json | 4 +- src/utils/testData.js | 9 +++ src/views/Explorer/FilesView/FileActions.js | 72 ++++++------------ .../Explorer/FilesView/FileActions.test.js | 55 ++++++++++++++ .../__snapshots__/FileActions.test.js.snap | 75 +++++++++++++++++++ 6 files changed, 185 insertions(+), 50 deletions(-) create mode 100644 src/views/Explorer/FilesView/__snapshots__/FileActions.test.js.snap diff --git a/package-lock.json b/package-lock.json index d0becca34..fa858de4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5286,6 +5286,17 @@ "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=", "dev": true }, + "dnd-core": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz", + "integrity": "sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==", + "dev": true, + "requires": { + "@react-dnd/asap": "^4.0.0", + "@react-dnd/invariant": "^2.0.0", + "redux": "^4.0.4" + } + }, "dns-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", @@ -13482,6 +13493,15 @@ } } }, + "react-dnd-test-backend": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/react-dnd-test-backend/-/react-dnd-test-backend-11.1.3.tgz", + "integrity": "sha512-5qFm+NI2GdWIUfiYun0A8Gv0xjbq0NGOPS+f6z3x/3nTuliApjmqcM1lfTgePoz1FDG47ZofF58N8y96If62+Q==", + "dev": true, + "requires": { + "dnd-core": "^11.1.3" + } + }, "react-dnd-test-utils": { "version": "11.1.3", "resolved": "https://registry.npmjs.org/react-dnd-test-utils/-/react-dnd-test-utils-11.1.3.tgz", diff --git a/package.json b/package.json index d3f9b4c73..d6c3562ae 100644 --- a/package.json +++ b/package.json @@ -58,8 +58,8 @@ "enzyme-adapter-react-16": "^1.15.2", "enzyme-to-json": "^3.4.4", "fetch-mock": "^9.4.0", - "react-dnd-test-backend": "^7.7.0", - "react-dnd-test-utils": "^7.4.4", + "react-dnd-test-backend": "^11.1.3", + "react-dnd-test-utils": "^11.1.3", "react-scripts": "^3.3.1", "redux-mock-store": "^1.5.4" }, diff --git a/src/utils/testData.js b/src/utils/testData.js index 4fd0d900d..0434be5ee 100644 --- a/src/utils/testData.js +++ b/src/utils/testData.js @@ -352,4 +352,13 @@ export const FILE_ITEM_DATA = { MimeType: 'application/octet-stream', ModTime: '2019-06-07T22:44:37.357539000+05:30', IsDir: false +}; + +export const DIR_ITEM_DATA = { + Path: 'abc', + Name: 'abc', + Size: 0, + MimeType: '', + ModTime: '2019-06-07T22:44:37.357539000+05:30', + IsDir: true }; \ No newline at end of file diff --git a/src/views/Explorer/FilesView/FileActions.js b/src/views/Explorer/FilesView/FileActions.js index 3fda0defa..23aea7658 100644 --- a/src/views/Explorer/FilesView/FileActions.js +++ b/src/views/Explorer/FilesView/FileActions.js @@ -17,54 +17,30 @@ function FileActions({downloadHandle, deleteHandle, item, linkShareHandle}) { // ID = Name; // } - - if (!IsDir) { - - return ( - - - - - - - - - - Actions - linkShareHandle(item)}> Share with link - - confirmDelete(deleteHandle, item)}> Delete - - - - - ); - } else { - return ( - - - - - - - - Actions - linkShareHandle(item)}> Share with link - - confirmDelete(deleteHandle, item)}> Delete - - - - ) - } + return ( +
+ {!IsDir && } + + + + + + + + Actions + linkShareHandle(item)}> Share with link + + confirmDelete(deleteHandle, item)}> Delete + + +
+ ) } FileActions.propTypes = { diff --git a/src/views/Explorer/FilesView/FileActions.test.js b/src/views/Explorer/FilesView/FileActions.test.js index e69de29bb..1a7fa7507 100644 --- a/src/views/Explorer/FilesView/FileActions.test.js +++ b/src/views/Explorer/FilesView/FileActions.test.js @@ -0,0 +1,55 @@ +import React from "react"; +import {shallow} from "enzyme"; +import toJson from "enzyme-to-json"; +import FileActions from "./FileActions"; +import {findByTestAttr, testStore} from "../../../../Utils"; +import {FILE_ITEM_DATA} from "../../../utils/testData"; + +const setUp = (intialState = {}, props = {}) => { + const store = testStore(intialState); + + const component = shallow(); + return component; +}; + + +describe('File Actions', function () { + describe('renders', function () { + let wrapper; + let downloadHandle = jest.fn(); + let deleteHandle = jest.fn(); + let linkShareHandle = jest.fn(); + beforeEach(() => { + const initialState = {}; + + const props = { + item: FILE_ITEM_DATA, + downloadHandle, + deleteHandle, + linkShareHandle + }; + wrapper = setUp(initialState, props) + }); + + it('should render without crashing', function () { + const component = findByTestAttr(wrapper, "fileActionsComponent"); + expect(component).toHaveLength(1); + }); + it('should contain buttons', function () { + const downloadButton = findByTestAttr(wrapper, "btn-download"); + expect(downloadButton).toHaveLength(1); + + const shareWithLinkButton = findByTestAttr(wrapper, "btn-share-with-link"); + expect(shareWithLinkButton).toHaveLength(1); + + const deleteItemButton = findByTestAttr(wrapper, "btn-delete-item"); + expect(deleteItemButton).toHaveLength(1); + + }); + + it('should match snapshot', function () { + expect(toJson(wrapper)).toMatchSnapshot(); + }); + + }); +}); diff --git a/src/views/Explorer/FilesView/__snapshots__/FileActions.test.js.snap b/src/views/Explorer/FilesView/__snapshots__/FileActions.test.js.snap new file mode 100644 index 000000000..9e68f0550 --- /dev/null +++ b/src/views/Explorer/FilesView/__snapshots__/FileActions.test.js.snap @@ -0,0 +1,75 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`File Actions renders should match snapshot 1`] = ` +
+ + + + + + + + + Actions + + + + Share with link + + + + + Delete + + + +
+`; From 023802545079fd368a390f993f58243440854a3c Mon Sep 17 00:00:00 2001 From: Chaitanya Bankanhal Date: Sun, 19 Jul 2020 17:34:50 +0530 Subject: [PATCH 5/5] uploadfile: action button should take up 100% height. tests: Fix failing tests update snapshots update snapshots --- .../Base/FileOperations/FileUploadModal.js | 2 +- .../__snapshots__/FileOperations.test.js.snap | 155 +++++++----------- .../FileUploadModal.test.js.snap | 3 +- src/views/Explorer/FilesView/FileComponent.js | 4 +- .../Explorer/FilesView/FilesView.test.js | 2 +- .../__snapshots__/FilesView.test.js.snap | 2 +- .../RemoteExplorerLayout.js | 4 +- .../RemoteExplorerLayout.test.js | 3 +- .../RemoteExplorerLayout/TabbedPanes.test.js | 1 - 9 files changed, 66 insertions(+), 110 deletions(-) diff --git a/src/views/Base/FileOperations/FileUploadModal.js b/src/views/Base/FileOperations/FileUploadModal.js index e667651d2..03e47c379 100644 --- a/src/views/Base/FileOperations/FileUploadModal.js +++ b/src/views/Base/FileOperations/FileUploadModal.js @@ -95,7 +95,7 @@ const FileUploadModal = (props) => { return (
- diff --git a/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap b/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap index 7e0c599c3..1cccc8cde 100644 --- a/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap +++ b/src/views/Base/FileOperations/__snapshots__/FileOperations.test.js.snap @@ -1,33 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`File Operations renders should match snapshot 1`] = ` - - @@ -152,10 +131,17 @@ exports[`File Operations renders should match snapshot 1`] = ` flip={true} tag="div" > - - - Show Remote Info - - - - - - - - - - + + + - - - - - - -
- - + Clean Trash + + + + + + + +
+
`; diff --git a/src/views/Base/FileOperations/__snapshots__/FileUploadModal.test.js.snap b/src/views/Base/FileOperations/__snapshots__/FileUploadModal.test.js.snap index 8c380c1a8..4a3b446a9 100644 --- a/src/views/Base/FileOperations/__snapshots__/FileUploadModal.test.js.snap +++ b/src/views/Base/FileOperations/__snapshots__/FileUploadModal.test.js.snap @@ -5,7 +5,7 @@ exports[`File upload Modal renders should match snapshot 1`] = ` data-test="fileUploadModalComponent" >