Merge branch 'main' into task/WP-729

CHANGELOG.md

@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.10.0]
+
+### Added
+
+- deps/react-18: Update React to v18 (#979)
+- WP-50: Fix sizing of buttons "as-link" (#986)
+- WP-509: Handle file/folder download feature with large number of files (#981)
+- WP-520: AppTray should use versionEnabled for list of apps instead of enabled (#991)
+- WP-24: Disabling Google Drive Integration (#988)
+- WP-730: Refactor useRename to use react-query (#993)
+- WP-728: Mutation hook: Copy file (#1000)
+- WP-78: V3 Shared Workspaces Tests (#987)
+
+### Fixed
+
+- WP-419 Public Data Header Left Margin (#1003)
+- WP-765: Fix job status button to show background (#1015)
+
+
 ## [3.9.0]
 
 ### Fixed
@@ -1115,7 +1134,8 @@ WP-306: Fix target path regression (#871)
 ## [1.0.0] - 2020-02-28
 v1.0.0 Production release as of Feb 28, 2020.
 
-[unreleased]: https://github.com/TACC/Core-Portal/compare/v3.9.0...HEAD
+[unreleased]: https://github.com/TACC/Core-Portal/compare/v3.10.0...HEAD
+[3.10.0]: https://github.com/TACC/Core-Portal/releases/tag/v3.10.0
 [3.9.0]: https://github.com/TACC/Core-Portal/releases/tag/v3.9.0
 [3.8.2]: https://github.com/TACC/Core-Portal/releases/tag/v3.8.2
 [3.8.1]: https://github.com/TACC/Core-Portal/releases/tag/v3.8.1

client/src/components/Applications/AppForm/AppForm.jsx

@@ -152,7 +152,6 @@ const HandleDependentFieldChanges = ({ app, formStateUpdateHandler }) => {
   const { values, setValues } = useFormikContext();
   React.useEffect(() => {
     if (previousValues) {
-      let valueUpdated = false;
       let updatedValues = { ...values };
 
       // Set the current allocation
@@ -171,24 +170,23 @@ const HandleDependentFieldChanges = ({ app, formStateUpdateHandler }) => {
           updatedValues,
           formStateUpdateHandler
         );
-        valueUpdated = true;
       }
       if (previousValues.execSystemId !== values.execSystemId) {
         updatedValues = execSystemChangeHandler(
           app,
           values,
           formStateUpdateHandler
         );
-        valueUpdated = true;
       }
 
       if (
         previousValues.execSystemLogicalQueue !== values.execSystemLogicalQueue
       ) {
         updatedValues = updateValuesForQueue(app, values);
-        valueUpdated = true;
       }
-      if (valueUpdated) setValues(updatedValues);
+      if (JSON.stringify(updatedValues) !== JSON.stringify(values)) {
+        setValues(updatedValues);
+      }
     }
     setPreviousValues(values);
   }, [app, values, setValues, formStateUpdateHandler]);

client/src/components/DataFiles/DataFilesModals/DataFilesDownloadMessageModal.jsx

@@ -44,23 +44,67 @@ const DataFilesDownloadMessageModal = () => {
     }
   };
 
-  const compressCallback = () => {
-    const { filenameDisplay, compressionType } = formRef.current.values;
+  // Toggles the Large Download Modal when a user selects files to download totaling more than 2 GB
+  const toggleDataFilesLargeDownloadModal = () => {
+    dispatch({
+      type: 'DATA_FILES_TOGGLE_MODAL',
+      payload: {
+        operation: 'largeDownload',
+        props: {},
+      },
+    });
+  };
+
+  // Toggles the No Folders Modal when a user selects 1 or more folders to download
+  const toggleDataFilesNoFoldersModal = () => {
     dispatch({
-      type: 'DATA_FILES_COMPRESS',
+      type: 'DATA_FILES_TOGGLE_MODAL',
       payload: {
-        filename: filenameDisplay,
-        files: selected,
-        scheme: params.scheme,
-        compressionType,
-        onSuccess: {
-          type: 'DATA_FILES_TOGGLE_MODAL',
-          payload: { operation: 'downloadMessage', props: {} },
-        },
+        operation: 'noFolders',
+        props: {},
       },
     });
   };
 
+  const compressCallback = () => {
+    const { filenameDisplay, compressionType } = formRef.current.values;
+    let containsFolder = false;
+    let totalFileSize = 0;
+    const maxFileSize = 2 * 1024 * 1024 * 1024;
+    // Add up the file sizes of all files and shows if the user selected a folder
+    for (let i = 0; i < selectedFiles.length; i++) {
+      totalFileSize = totalFileSize + selectedFiles[i].length;
+      if (selectedFiles[i].format == 'folder') {
+        containsFolder = true;
+      }
+    }
+    // Run the dispatch if the user does not select any folders...
+    if (containsFolder === false) {
+      // ...and if the total file size is below 2 GB
+      if (totalFileSize < maxFileSize) {
+        dispatch({
+          type: 'DATA_FILES_COMPRESS',
+          payload: {
+            filename: filenameDisplay,
+            files: selected,
+            scheme: params.scheme,
+            compressionType,
+            onSuccess: {
+              type: 'DATA_FILES_TOGGLE_MODAL',
+              payload: { operation: 'downloadMessage', props: {} },
+            },
+          },
+        });
+        // Prevent the compression process and redirect the user to Globus otherwise
+      } else {
+        toggleDataFilesLargeDownloadModal();
+      }
+      // Prevents compression of folders if a folder is among the selected files
+    } else {
+      toggleDataFilesNoFoldersModal();
+    }
+  };
+
   const initialValues = {
     filenameDisplay:
       selectedFiles[0] && selectedFiles.length === 1

client/src/components/DataFiles/DataFilesModals/DataFilesLargeDownloadModal.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, SectionMessage } from '_common';
+import { useModal } from 'hooks/datafiles';
+import styles from './DataFilesLargeDownloadModal.module.scss';
+
+const DataFilesLargeDownloadModal = () => {
+  const dispatch = useDispatch();
+  const { getStatus: getModalStatus } = useModal();
+  const isOpen = getModalStatus('largeDownload');
+
+  const toggle = () => {
+    dispatch({
+      type: 'DATA_FILES_TOGGLE_MODAL',
+      payload: {
+        operation: 'largeDownload',
+        props: {},
+      },
+    });
+  };
+
+  const openTabToGlobus = () => {
+    window.open('https://docs.tacc.utexas.edu/basics/datatransfer/#globus');
+  };
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} className="dataFilesModal">
+      <ModalHeader toggle={toggle} charCode="&#xe912;">
+        Large Download
+      </ModalHeader>
+      <ModalBody>
+        <SectionMessage type="warn">
+          Your download is larger than 2 gigabytes.
+        </SectionMessage>
+        <p className={styles['info']}>
+          Use Globus to quickly transfer large volumes of data.
+        </p>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          type="primary"
+          attr="submit"
+          onClick={openTabToGlobus}
+          className={styles['linkButton']}
+        >
+          Globus Data Transfer Guide
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default DataFilesLargeDownloadModal;

client/src/components/DataFiles/DataFilesModals/DataFilesLargeDownloadModal.module.scss

@@ -0,0 +1,10 @@
+/* Rules placed for consistent styling */
+.info {
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+/* Enlarges the button to accommodate its text */
+.linkButton {
+  max-width: unset;
+}

client/src/components/DataFiles/DataFilesModals/DataFilesModals.jsx

@@ -16,6 +16,8 @@ import DataFilesLinkModal from './DataFilesLinkModal';
 import DataFilesShowPathModal from './DataFilesShowPathModal';
 import DataFilesMakePublicModal from './DataFilesMakePublicModal';
 import DataFilesDownloadMessageModal from './DataFilesDownloadMessageModal';
+import DataFilesLargeDownloadModal from './DataFilesLargeDownloadModal';
+import DataFilesNoFoldersModal from './DataFilesNoFoldersModal';
 import './DataFilesModals.scss';
 
 export default function DataFilesModals() {
@@ -38,6 +40,8 @@ export default function DataFilesModals() {
       <DataFilesProjectEditDescriptionModal />
       <DataFilesMakePublicModal />
       <DataFilesDownloadMessageModal />
+      <DataFilesLargeDownloadModal />
+      <DataFilesNoFoldersModal />
     </>
   );
 }

client/src/components/DataFiles/DataFilesModals/DataFilesNoFoldersModal.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { useModal } from 'hooks/datafiles';
+import { SectionMessage } from '_common';
+import styles from './DataFilesNoFoldersModal.module.scss';
+
+const DataFilesNoFoldersModal = () => {
+  const dispatch = useDispatch();
+  const { getStatus: getModalStatus } = useModal();
+  const isOpen = getModalStatus('noFolders');
+
+  const toggle = () => {
+    dispatch({
+      type: 'DATA_FILES_TOGGLE_MODAL',
+      payload: {
+        operation: 'noFolders',
+        props: {},
+      },
+    });
+  };
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} className="dataFilesModal">
+      <ModalHeader toggle={toggle} charCode="&#xe912;">
+        No Folders
+      </ModalHeader>
+      <ModalBody>
+        <SectionMessage type="warn">
+          Folders can no longer be compressed.
+        </SectionMessage>
+        <p className={styles['info']}>
+          Please individually select which files you would like to download.
+        </p>
+      </ModalBody>
+    </Modal>
+  );
+};
+
+export default DataFilesNoFoldersModal;

client/src/components/DataFiles/DataFilesModals/DataFilesNoFoldersModal.module.scss

@@ -0,0 +1,5 @@
+/* Rules placed for consistent styling */
+.info {
+  margin-top: 1rem;
+  margin-bottom: 0;
+}