Merge branch 'main' into task/WP-682

TACC · Jan 22, 2025 · 83a7871 · 83a7871
2 parents f6e1cf5 + c8e4f93
commit 83a7871
Show file tree

Hide file tree

Showing 39 changed files with 1,037 additions and 317 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -98,7 +98,7 @@
     "stylelint-config-standard": "^25.0.0",
     "timekeeper": "^2.3.1",
     "typescript": "5.5",
-    "vite": "^5.4.8",
+    "vite": "^5.4.14",
     "vitest": "^2.1.1",
     "weak-key": "^1.0.1"
   }

diff --git a/...nents/Allocations/AllocationsModals/AllocationsTeamViewModal/AllocationsTeamViewModal.jsx b/...nents/Allocations/AllocationsModals/AllocationsTeamViewModal/AllocationsTeamViewModal.jsx
@@ -94,14 +94,23 @@ const AllocationsTeamViewModal = ({ isOpen, toggle }) => {
 
   return (
     <Modal isOpen={isOpen} toggle={toggle} size="lg" onClosed={resetCard}>
-      <ModalHeader className="has-MuiTabs" toggle={toggle} charCode="&#xe912;">
+      <ModalHeader
+        className="pe-3 has-MuiTabs"
+        toggle={toggle}
+        charCode="&#xe912;"
+      >
         <Tabs
           style={{ marginBottom: '-8px' }}
           value={selectedTab}
           onChange={handleTabChange}
         >
           <Tab style={{ width: '160px', color: '#222222' }} label="View Team" />
-          {isManager && <Tab label="Manage Team" />}
+          {isManager && (
+            <Tab
+              style={{ width: '160px', color: '#222222' }}
+              label="Manage Team"
+            />
+          )}
         </Tabs>
       </ModalHeader>
       <ModalBody className={selectedTab === 0 ? 'd-flex p-0' : 'pb-0'}>

diff --git a/client/src/components/DataFiles/CombinedBreadcrumbs/CombinedBreadcrumbs.module.scss b/client/src/components/DataFiles/CombinedBreadcrumbs/CombinedBreadcrumbs.module.scss
@@ -3,3 +3,7 @@
   align-items: center;
   gap: 1rem;
 }
+
+.combined-breadcrumbs :global(.breadcrumb-container) button {
+  font-size: 1rem;
+}
diff --git a/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss b/client/src/components/DataFiles/DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss
@@ -42,32 +42,15 @@
   padding-left: var(--horizontal-buffer);
 }
 
-/* Nested to prevent styles from affecting CMS header dropdown */
-/* HACK: Using ID to increase specificity (until source of problem is fixed) */
-/* HELP: Why does DataFilesSidebar not need such specificity? */
-/* .go-to-button-dropdown { */
-#go-to-button-dropdown {
-  /* To fix menu not showing */
-  /* HELP: Why does DataFilesSidebar not need this fix? */
+.go-to-button-dropdown {
   .dropdown-menu {
-    opacity: 1 !important;
-    pointer-events: auto !important;
-  }
-  /* To restyle */
-  .dropdown-menu {
-    margin-top: 38px;
+    /* To push menu down by the height of its button */
+    /* FAQ: Required because `tag={Button}` loses auto-position of menu */
+    top: 28px !important; /* to override `inset` from Popper via Reactstrap */
   }
   .dropdown-menu::before,
   .dropdown-menu::after {
     left: 23px;
-    margin-left: 0;
-  }
-  .dropdown-menu::after {
-    top: -9px;
-  }
-
-  .dropdown-item {
-    display: inline-block;
   }
 }
 
@@ -85,12 +68,12 @@
   padding-left: 20px;
 }
 
-#go-to-button-dropdown .complex-dropdown-item-root,
+.complex-dropdown-item-root,
 .complex-dropdown-item-project {
-  display: flex !important;
+  display: flex;
 }
 
-#go-to-button-dropdown .link-hover:hover {
+.go-to-button-dropdown .link-hover:hover {
   text-decoration: none;
 }
 

diff --git a/client/src/components/DataFiles/DataFilesDropdown/DataFilesDropdown.jsx b/client/src/components/DataFiles/DataFilesDropdown/DataFilesDropdown.jsx
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { Link, useLocation } from 'react-router-dom';
 import { Button } from '_common';
 import {
+  Dropdown,
   DropdownToggle,
   DropdownMenu,
   DropdownItem,
-  ButtonDropdown,
 } from 'reactstrap';
 import { useSystemDisplayName, useSystems } from 'hooks/datafiles';
 import '../DataFilesBreadcrumbs/DataFilesBreadcrumbs.scss';
@@ -75,10 +75,9 @@ const BreadcrumbsDropdown = ({
   const sliceStart = scheme === 'projects' && systemName ? 0 : 1;
   return (
     <div id="path-button-wrapper">
-      <ButtonDropdown
+      <Dropdown
         isOpen={dropdownOpen}
         toggle={toggleDropdown}
-        id="go-to-button-dropdown"
         className="go-to-button-dropdown"
       >
         <DropdownToggle tag={Button}>Go to ...</DropdownToggle>
@@ -132,7 +131,7 @@ const BreadcrumbsDropdown = ({
             </DropdownItem>
           </Link>
         </DropdownMenu>
-      </ButtonDropdown>
+      </Dropdown>
     </div>
   );
 };

diff --git a/.../components/DataFiles/DataFilesModals/DataFilesModalTables/DataFilesModalListingTable.jsx b/.../components/DataFiles/DataFilesModals/DataFilesModalTables/DataFilesModalListingTable.jsx
@@ -120,7 +120,7 @@ const DataFilesModalButtonCell = ({
       <span>
         <Button
           type="primary"
-          className="float-right data-files-btn"
+          className="float-right"
           disabled={disabled}
           onClick={onClick}
         >

diff --git a/client/src/components/DataFiles/DataFilesModals/DataFilesModals.scss b/client/src/components/DataFiles/DataFilesModals/DataFilesModals.scss
@@ -9,8 +9,10 @@
   .h-100 {
     padding: 0 10px;
   }
+  .breadcrumb-container {
+    font-size: 0.75rem;
+  }
   .breadcrumbs {
-    font-size: 12px;
     padding-top: 5px;
     padding-bottom: 5px;
     color: #707070;

diff --git a/client/src/components/DataFiles/DataFilesProjectMembers/_cells/ProjectRoleSelector.jsx b/client/src/components/DataFiles/DataFilesProjectMembers/_cells/ProjectRoleSelector.jsx
@@ -75,7 +75,6 @@ const ProjectRoleSelector = ({ projectId, username }) => {
       {data.role !== selectedRole && !isFetching && (
         <Button
           type="primary"
-          className="data-files-btn"
           onClick={() =>
             setProjectRole({ oldRole: data.role, newRole: selectedRole })
           }

diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx
@@ -5,7 +5,7 @@ import {
   Nav,
   NavItem,
   NavLink,
-  ButtonDropdown,
+  Dropdown,
   DropdownMenu,
   DropdownToggle,
   DropdownItem,
@@ -67,13 +67,9 @@ const DataFilesAddButton = ({ readOnly }) => {
   const writeItemStyle = disabled ? 'read-only' : '';
 
   return (
-    <div id="add-button-wrapper">
-      <ButtonDropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
-        <DropdownToggle
-          color="primary"
-          id="data-files-add"
-          className="data-files-btn"
-        >
+    <>
+      <Dropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
+        <DropdownToggle color="primary" id="data-files-add">
           + Add
         </DropdownToggle>
         <DropdownMenu>
@@ -89,6 +85,7 @@ const DataFilesAddButton = ({ readOnly }) => {
               <i className="icon-folder" /> Shared Workspace
             </DropdownItem>
           )}
+          <DropdownItem divider />
           <DropdownItem
             className={`complex-dropdown-item ${styles[writeItemStyle]}`}
             onClick={toggleUploadModal}
@@ -101,8 +98,8 @@ const DataFilesAddButton = ({ readOnly }) => {
             </span>
           </DropdownItem>
         </DropdownMenu>
-      </ButtonDropdown>
-    </div>
+      </Dropdown>
+    </>
   );
 };
 

diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.module.scss b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.module.scss
@@ -13,5 +13,5 @@
 
 .add-button-item {
   padding-bottom: 20px;
-  padding-left: 20px;
+  padding-inline: var(--global-space--section-left);
 }
diff --git a/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss b/client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss
@@ -1,79 +1,28 @@
 @import '../../../styles/components/dropdown-menu.css';
 
-.data-files-btn {
-  background-color: var(--global-color-accent--normal);
-  border-color: var(--global-color-accent--normal);
-  border-radius: 0;
-}
-
-.data-files-btn-cancel {
-  border-radius: 0;
-}
-
-#add-button-wrapper {
-  padding-left: var(--horizontal-buffer);
-}
 #data-files-add {
-  width: 174px;
+  width: 100%;
 }
 
 .data-files-nav {
   padding-top: 20px;
 }
 
-/* Nested to prevent styles from affecting CMS header dropdown */
 .data-files-sidebar {
   .dropdown-menu {
-    border-color: var(--global-color-accent--normal);
-    border-radius: 0;
-    margin: 11px 3px 0;
-    width: 200px;
-    vertical-align: top;
-  }
-  .dropdown-menu::before {
-    position: absolute;
-    top: -10px;
-    left: 67px;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid var(--global-color-accent--normal);
-    border-left: 10px solid transparent;
-    margin-left: 20px;
-    content: '';
+    /* To make menu wider than button yet still centered */
+    width: calc(100% + var(--global-space--section-left));
+    left: calc(
+      var(--global-space--section-left) / -2
+    ) !important; /* to override `inset` from Popper via Reactstrap */
   }
+  .dropdown-menu::before,
   .dropdown-menu::after {
-    top: -9px;
-    left: 68px;
-    border-right: 9px solid transparent;
-    border-bottom: 9px solid #ffffff;
-    border-left: 9px solid transparent;
-    margin-left: 20px;
-    content: '';
-  }
-
-  .dropdown-item {
-    padding: 10px 6px;
-    color: var(--global-color-primary--x-dark);
-    font-size: 14px;
-    i {
-      padding-right: 19px;
-      font-size: 20px;
-      vertical-align: middle;
-    }
-    &:hover {
-      color: var(--global-color-primary--x-dark);
-    }
-  }
-  .dropdown-item:focus,
-  .dropdown-item:hover {
-    /* FAQ: Before FP-1083, value was #E6E0FB, which matched Design
-            and was `--global-color-accent` at 25% opacity on white…
-            which is what `--global-color-accent--weak` is now */
-    background-color: var(--global-color-accent--weak);
+    left: calc(50% - var(--arrow-size));
   }
 }
 
 .complex-dropdown-item {
-  border-top: 1px solid #707070;
   display: flex;
 }
 

diff --git a/client/src/components/DataFiles/DataFilesToolbar/DataFilesToolbar.jsx b/client/src/components/DataFiles/DataFilesToolbar/DataFilesToolbar.jsx
@@ -7,6 +7,7 @@ import getFilePermissions from 'utils/filePermissions';
 import { useModal, useSelectedFiles, useFileListing } from 'hooks/datafiles';
 import { useSystemRole } from '../DataFilesProjectMembers/_cells/SystemRoleSelector';
 import './DataFilesToolbar.scss';
+import { useTrash } from 'hooks/datafiles/mutations';
 
 export const ToolbarButton = ({ text, iconName, onClick, disabled }) => {
   const iconClassName = `action icon-${iconName}`;
@@ -40,6 +41,7 @@ const DataFilesToolbar = ({ scheme, api }) => {
   const { toggle } = useModal();
   const { selectedFiles } = useSelectedFiles();
   const { params } = useFileListing('FilesListing');
+  const { trash } = useTrash();
 
   const history = useHistory();
   const location = useLocation();
@@ -172,20 +174,15 @@ const DataFilesToolbar = ({ scheme, api }) => {
     }
   };
 
-  const trash = useCallback(() => {
-    const filteredSelected = selectedFiles.filter(
-      (f) => status[f.system + f.path] !== 'SUCCESS'
-    );
+  const homeDir = selectedSystem?.homeDir;
 
-    dispatch({
-      type: 'DATA_FILES_TRASH',
-      payload: {
-        src: filteredSelected,
-        homeDir: selectedSystem?.homeDir || '',
-        reloadCallback: reloadPage,
-      },
+  const trashCallback = useCallback(() => {
+    trash({
+      destSystem: selectedSystem.system,
+      homeDir: homeDir,
+      callback: reloadPage,
     });
-  }, [selectedFiles, selectedSystem, reloadPage]);
+  }, [selectedFiles, reloadPage, status]);
 
   const empty = () => {
     dispatch({
@@ -271,7 +268,7 @@ const DataFilesToolbar = ({ scheme, api }) => {
           <ToolbarButton
             text={!inTrash ? 'Trash' : 'Empty'}
             iconName="trash"
-            onClick={!inTrash ? trash : empty}
+            onClick={!inTrash ? trashCallback : empty}
             disabled={!inTrash ? !canTrash : !canEmpty}
             className={!inTrash ? '' : 'is-empty'}
           />