Fix broken link in Globus transfer panel (#719)

* Fix broken link in Globus transfer panel

* Globus link display update (#3)

* Added a warning case for when a transfer request returns no failures or successes in the backend response. No successes indicates no transfer occurred although there wasn't any specified errors provided. Added new test for the added warning case.

* Fix pre-commit prerequisites

---------

Co-authored-by: Zach Price <pricezt@ornl.gov>
Co-authored-by: Carlos Downie <42552189+downiec@users.noreply.github.com>

.github/workflows/pre-commit.yml

@@ -6,17 +6,17 @@ on:
     branches: [master]
 
 jobs:
-  pre-commit-hooks:
+  pre-commit:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout Code Repository
+      - name: Checkout code
         uses: actions/checkout@v4
 
       # Required to run the local ESLint hook
-      - name: Use Node.js 23.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v4
         with:
-          node-version: "23.x"
+          node-version: '22.x'
 
       - name: Cache node modules
         uses: actions/cache@v4
@@ -36,12 +36,12 @@ jobs:
           yarn install --frozen-lockfile
 
       - name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
-          python-version: 3.11
+          python-version: '3.11'
 
-      # Run all pre-commit hooks on all the files.
-      # Getting only staged files can be tricky in case a new PR is opened
-      # since the action is run on a branch in detached head state
-      - name: Install and Run Pre-commit
-        uses: pre-commit/action@v3.0.1
+      - name: Install requirements
+        run: pip install -r backend/requirements/local.txt
+
+      - name: Run pre-commit
+        run: pre-commit run --all-files

backend/metagrid/api_globus/tests/test_views.py

@@ -52,7 +52,7 @@ def test_globus_transfer_missing_required_parameter_returns_400(
 
 @responses.activate
 @pytest.mark.django_db
-@patch("globus_sdk.TransferClient.submit_transfer", return_value="")
+@patch("globus_sdk.TransferClient.submit_transfer")
 @pytest.mark.parametrize(
     "json_fixture", ["esgsearch_multiple_results.json"], indirect=True
 )
@@ -146,19 +146,24 @@ def test_globus_transfer_returns_207_when_submission_errors(
 
 @responses.activate
 @pytest.mark.django_db
-@patch("globus_sdk.TransferClient.submit_transfer", return_value="")
 @pytest.mark.parametrize(
     "json_fixture", ["esgsearch_multiple_results.json"], indirect=True
 )
 def test_globus_transfer_returns_200_when_submissions_all_succeed(
-    submit_mock, json_fixture, api_client
+    json_fixture, api_client
 ):
     responses.add(responses.GET, settings.SEARCH_URL, json=json_fixture)
     responses.add(
         responses.GET,
         "https://transfer.api.globus.org/v0.10/submission_id",
         json={"value": "someid"},
     )
+    responses.add(
+        responses.POST, "https://transfer.api.globus.org/v0.10/submission_id"
+    )
+    responses.add(
+        responses.POST, "https://transfer.api.globus.org/v0.10/transfer"
+    )
 
     response = api_client.post(
         reverse("globus_transfer"),

backend/metagrid/api_globus/views.py

@@ -201,7 +201,7 @@ def submit_transfers(self) -> GlobusSubmissionResult:
                 submission: GlobusHTTPResponse = self.client.submit_transfer(
                     task
                 )
-                results["successes"].append(submission)
+                results["successes"].append(submission.data)
             except Exception as e:
                 results["failures"].append(repr(e))
 

frontend/package.json

@@ -83,7 +83,7 @@
     "react-hotjar": "2.2.1",
     "react-joyride": "2.5.3",
     "react-markdown": "9.0.1",
-    "react-router-dom": "^6.9.0",
+    "react-router-dom": "^7.1.3",
     "recoil": "0.7.7",
     "typescript": "5.4.2",
     "uuid": "^11.0.3"

frontend/src/api/index.test.ts

@@ -21,7 +21,6 @@ import {
   processCitation,
   saveSessionValue,
   saveSessionValues,
-  startGlobusTransfer,
   startSearchGlobusEndpoints,
   updateUserCart,
 } from '.';
@@ -582,20 +581,6 @@ describe('test user endpoint search', () => {
   });
 });
 
-describe('test startGlobusTransfer function', () => {
-  it('performs a transfer with a filename variable', async () => {
-    const resp = await startGlobusTransfer('asdfs', 'asdfs', 'endpointTest', 'path', 'id', ['clt']);
-
-    expect(resp.data).toEqual({ status: 'OK', taskid: '1234567' });
-  });
-
-  it('performs a transfer without filename variables', async () => {
-    const resp = await startGlobusTransfer('asdfs', 'asdfs', 'endpointTest', 'path', 'id', []);
-
-    expect(resp.data).toEqual({ status: 'OK', taskid: '1234567' });
-  });
-});
-
 describe('test parsing node status', () => {
   it('returns correctly formatted node status', () => {
     const nodeStatus = rawNodeStatusFixture();

frontend/src/api/index.ts

@@ -42,6 +42,12 @@ export interface ResponseError extends Error {
   response: { status: HTTPCodeType; [key: string]: string | HTTPCodeType };
 }
 
+export interface SubmissionResult {
+  status: number;
+  successes: Record<string, unknown>[];
+  failures: string[];
+}
+
 const getCookie = (name: string): null | string => {
   let cookieValue = null;
   if (document && document.cookie && document.cookie !== '') {
@@ -654,36 +660,6 @@ export async function createGlobusAuthObject(): Promise<PKCE> {
   });
 }
 
-/**
- * Performs validation against the globus API to ensure a 200 response.
- *
- * If the API returns a 200, it returns the axios response.
- */
-export const startGlobusTransfer = async (
-  transferAccessToken: string,
-  accessToken: string,
-  endpointId: string,
-  path: string,
-  ids: string[] | string,
-  filenameVars?: string[]
-): Promise<AxiosResponse> => {
-  return axios
-    .post(
-      apiRoutes.globusTransfer.path,
-      JSON.stringify({
-        access_token: transferAccessToken,
-        refresh_token: accessToken,
-        endpointId,
-        path,
-        dataset_id: ids,
-        filenameVars,
-      })
-    )
-    .then((resp) => {
-      return resp;
-    });
-};
-
 export const startSearchGlobusEndpoints = async (
   searchText: string
 ): Promise<GlobusEndpointSearchResults> => {

frontend/src/components/App/App.test.tsx

@@ -74,10 +74,6 @@ describe('test main components', () => {
     const leftSearchColumn = await screen.findByTestId('search-facets');
     expect(leftSearchColumn).toBeTruthy();
 
-    // Wait for components to rerender
-    await screen.findByTestId('search');
-    await screen.findByTestId('facets-form');
-
     const facetsForm = await screen.findByTestId('facets-form');
     expect(facetsForm).toBeTruthy();
 

frontend/src/components/App/App.tsx

@@ -570,14 +570,14 @@ const App: React.FC<React.PropsWithChildren<Props>> = ({ searchQuery }) => {
                   }
                 />
                 <Route
-                  path="/cart/*"
+                  path="/cart"
                   element={
                     <>
                       <Breadcrumb
                         items={[
                           {
                             title: (
-                              <Link to="/">
+                              <Link to="../">
                                 <HomeOutlined /> Home
                               </Link>
                             ),
@@ -596,7 +596,9 @@ const App: React.FC<React.PropsWithChildren<Props>> = ({ searchQuery }) => {
                       />
                     </>
                   }
-                />
+                >
+                  <Route path="*" element={<></>} />
+                </Route>
                 <Route
                   path="*"
                   element={

frontend/src/components/Cart/Items.test.tsx

@@ -40,7 +40,7 @@ describe('test the cart items component', () => {
     expect(firstRow).toBeTruthy();
 
     // Check first row has add button and click it
-    const addBtn = await within(firstRow).findByRole('img', { name: 'plus' });
+    const addBtn = await screen.findByTestId('row-0-add-to-cart');
     expect(addBtn).toBeTruthy();
     await user.click(addBtn);
 
@@ -74,11 +74,11 @@ describe('test the cart items component', () => {
     customRender(<App searchQuery={activeSearch} />);
 
     // Wait for results to load
-    expect(await screen.findByText('results found for', { exact: false })).toBeTruthy();
+    expect(await screen.findByTestId('search-results-span')).toBeInTheDocument();
 
     // Check first row has add button and click it
     const firstRow = await screen.findByTestId('cart-items-row-1');
-    const addBtn = await within(firstRow).findByRole('img', { name: 'plus' });
+    const addBtn = await screen.findByTestId('row-0-add-to-cart');
     expect(addBtn).toBeTruthy();
     await user.click(addBtn);
 

frontend/src/components/Cart/Summary.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, Collapse, Divider, List } from 'antd';
+import { Card, Collapse, Divider, List, Typography } from 'antd';
 import { useRecoilState } from 'recoil';
 import Button from '../General/Button';
 import cartImg from '../../assets/img/cart.svg';
@@ -31,6 +31,7 @@ export type Props = {
   userCart: UserCart | [];
 };
 
+const { Title, Link } = Typography;
 const dp: DataPersister = DataPersister.Instance;
 
 const Summary: React.FC<React.PropsWithChildren<Props>> = ({ userCart }) => {
@@ -85,12 +86,12 @@ const Summary: React.FC<React.PropsWithChildren<Props>> = ({ userCart }) => {
               {
                 key: '1',
                 label: (
-                  <h3 style={{ margin: 0 }}>
+                  <Title level={5} style={{ margin: 0 }}>
                     Task Submit History
                     <Button size="small" danger style={{ float: 'right' }} onClick={clearAllTasks}>
-                      Clear All
+                      <span data-testid="clear-all-submitted-globus-tasks">Clear All</span>
                     </Button>
-                  </h3>
+                  </Title>
                 ),
                 children: (
                   <List
@@ -103,9 +104,9 @@ const Summary: React.FC<React.PropsWithChildren<Props>> = ({ userCart }) => {
                           <List.Item.Meta
                             title={`Submitted: ${task.submitDate}`}
                             description={
-                              <a href={task.taskStatusURL} target="_blank" rel="noreferrer">
+                              <Link href={task.taskStatusURL} target="_blank" rel="noreferrer">
                                 View Task In Globus
-                              </a>
+                              </Link>
                             }
                           />
                         </Card>

frontend/src/components/Facets/FacetsForm.tsx

@@ -396,9 +396,7 @@ const FacetsForm: React.FC<React.PropsWithChildren<Props>> = ({
                               const innerTitle = variable[0].substring(0, maxItemLength - cLength);
                               optionOutput = (
                                 <Tooltip
-                                  overlayInnerStyle={{
-                                    width: 'max-content',
-                                  }}
+                                  styles={{ body: { width: 'max-content' } }}
                                   title={variable[0]}
                                 >
                                   {innerTitle}...