Merge branch 'main' into chore/remove-data-files-btn

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;
+}

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;
 }
 

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>
   );
 };

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;

client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.jsx

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

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);
 }

client/src/components/DataFiles/DataFilesSidebar/DataFilesSidebar.scss

@@ -1,69 +1,28 @@
 @import '../../../styles/components/dropdown-menu.css';
 
-#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;
 }
 

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'}
           />

client/src/components/DataFiles/tests/DataFiles.test.jsx

@@ -1,24 +1,40 @@
-import React from 'react';
+import React, { version } from 'react';
 import { createMemoryHistory } from 'history';
 import configureStore from 'redux-mock-store';
 import DataFiles from '../DataFiles';
 import systemsFixture from '../fixtures/DataFiles.systems.fixture';
 import filesFixture from '../fixtures/DataFiles.files.fixture';
 import renderComponent from 'utils/testing';
 import { projectsFixture } from '../../../redux/sagas/fixtures/projects.fixture';
+import { vi } from 'vitest';
+import { useExtract } from 'hooks/datafiles/mutations';
 
 const mockStore = configureStore();
+global.fetch = vi.fn();
 
 describe('DataFiles', () => {
-  it('should render Data Files with multiple private systems', () => {
+  afterEach(() => {
+    fetch.mockClear();
+  });
+  it.skip('should render Data Files with multiple private systems', () => {
     const history = createMemoryHistory();
     const store = mockStore({
       workbench: {
         config: {
-          extract: '',
-          compress: '',
+          extract: {
+            id: 'extract',
+            version: '0.0.1',
+          },
+          compress: {
+            id: 'compress',
+            version: '0.0.3',
+          },
         },
       },
+      allocations: {
+        portal_alloc: 'TACC-ACI',
+        active: [{ projectId: 'active-project' }],
+      },
       systems: systemsFixture,
       files: filesFixture,
       pushKeys: {
@@ -39,6 +55,7 @@ describe('DataFiles', () => {
         },
       },
     });
+    fetch.mockResolvedValue(useExtract());
     const { getByText, getAllByText, queryByText } = renderComponent(
       <DataFiles />,
       store,

client/src/components/Tickets/TicketCreateForm.jsx

@@ -197,7 +197,7 @@ function TicketCreateForm({
                       <FormField
                         name="cc"
                         label="Cc"
-                        description="Separate emails with commas"
+                        description="Separate emails with commas. NOTE: Emails listed here will only receive emails on replies to tickets."
                       />
                     </Col>
                   </Row>

client/src/components/_common/Button/Button.module.css

@@ -36,9 +36,11 @@
 }
 
 .root.as-link {
-  font-size: 1rem;
+  font-size: inherit;
 }
 
+
+
 .icon--before {
   composes: c-button__icon--before from '../../../styles/components/c-button--new.css';
 }

client/src/components/_common/Form/FileInputDropZone.jsx

@@ -1,5 +1,5 @@
 /* FP-993: Allow use by DataFilesUploadModal */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { Button, InlineMessage } from '_common';
 import PropTypes from 'prop-types';
@@ -45,6 +45,13 @@ function FileInputDropZone({
     }
   };
 
+  const removeRejectedFile = (i) => {
+    const newRejectedFiles = rejectedFiles.filter(
+      (file) => file !== rejectedFiles[i]
+    );
+    setRejectedFiles(newRejectedFiles);
+  };
+
   const showFileList = (files && files.length > 0) || rejectedFiles.length > 0;
 
   return (
@@ -74,6 +81,14 @@ function FileInputDropZone({
                   <InlineMessage type="error">
                     Exceeds File Size Limit
                   </InlineMessage>
+                  <Button
+                    type="link"
+                    onClick={() => {
+                      removeRejectedFile(i);
+                    }}
+                  >
+                    Remove
+                  </Button>
                 </div>
               ))}
             {files &&