Feat 709 add progress bar to edit study page with the ability to switch between different lists (#832)

* feat: add inital wireframes proposal

* feat: fixes

* fix: merge conflicts

* feat: update edit study page

* feat: finished edit study page

* feat: added feedback

* fix: feedback updats

* feat: update with feedback

* chore: add initial test files

* fix: finished tests

* fix: tests

* fix: lowercase to uppercase

* replace mark with set

Author: nicoalee

compose/neurosynth-frontend/cypress/e2e/pages/BaseStudyPage.cy.tsx

@@ -22,7 +22,6 @@ describe(PAGE_NAME, () => {
         cy.intercept('GET', `**/api/base-studies/**`, {
             fixture: 'study',
         }).as('studyFixture');
-        cy.visit(PATH).wait('@semanticScholarFixture').wait('@studyFixture');
         // .get('tr')
         // .eq(2)
         // .click()

compose/neurosynth-frontend/cypress/e2e/pages/EditStudyPage.cy.tsx

@@ -36,7 +36,6 @@ describe(PAGE_NAME, () => {
             .wait('@studyFixture')
             .wait('@projectFixture')
             .wait('@annotationFixture')
-            .wait('@semanticScholarFixture')
             .wait('@studysetFixture');
     });
 
@@ -48,15 +47,14 @@ describe(PAGE_NAME, () => {
             .wait('@studyFixture')
             .wait('@projectFixture')
             .wait('@annotationFixture')
-            .wait('@semanticScholarFixture')
             .wait('@studysetFixture');
 
         // ACT
         cy.get('div').contains('(name, authors, description, doi, pmid, etc)').click();
         cy.contains('label', 'doi').next().clear();
         cy.contains('label', 'pmid').next().clear();
         cy.contains('label', 'pmcid').next().clear();
-        cy.contains('button', 'save').click();
+        cy.get('[data-testid="SaveIcon"]').click();
 
         // ASSERT
         cy.get('@editStudy').its('request.body').should('not.have.a.property', 'doi');

compose/neurosynth-frontend/cypress/e2e/pages/PublicStudiesPage.cy.tsx

@@ -7,7 +7,7 @@ export {};
 const PATH = '/base-studies';
 const PAGE_NAME = 'StudiesPage';
 
-describe.skip(PAGE_NAME, () => {
+describe(PAGE_NAME, () => {
     beforeEach(() => {
         cy.clearLocalStorage();
         cy.intercept('GET', 'https://api.appzi.io/**', { fixture: 'appzi' }).as('appziFixture');
@@ -16,7 +16,7 @@ describe.skip(PAGE_NAME, () => {
     it('should load successfully', () => {
         cy.intercept('GET', `**/api/projects*`).as('realProjectsRequest');
         cy.intercept('GET', `**/api/base-studies/**`).as('realStudiesRequest');
-        cy.visit(PATH).wait('@realStudiesRequest');
+        cy.visit(PATH);
     });
 
     // describe('Search', () => {

compose/neurosynth-frontend/cypress/e2e/workflows/Extraction/ExtractionTable.cy.tsx

@@ -3,6 +3,7 @@
 import { INeurosynthProjectReturn } from 'hooks/projects/useGetProjects';
 import { StudyReturn, StudysetReturn } from 'neurostore-typescript-sdk';
 import { IExtractionTableStudy } from 'pages/Extraction/components/ExtractionTable';
+import { getAuthorShortName } from 'pages/Extraction/components/ExtractionTable.helpers';
 
 describe('ExtractionTable', () => {
     beforeEach(() => {
@@ -303,7 +304,12 @@ describe('ExtractionTable', () => {
 
                 cy.get('tbody > tr').each((tr, index) => {
                     cy.wrap(tr).within(() => {
-                        cy.get('td').eq(2).should('have.text', sortedStudies[index].authors);
+                        cy.get('td')
+                            .eq(2)
+                            .should(
+                                'have.text',
+                                getAuthorShortName(sortedStudies?.[index]?.authors || '')
+                            );
                     });
                 });
             });
@@ -324,7 +330,12 @@ describe('ExtractionTable', () => {
 
                 cy.get('tbody > tr').each((tr, index) => {
                     cy.wrap(tr).within(() => {
-                        cy.get('td').eq(2).should('have.text', sortedStudies[index].authors);
+                        cy.get('td')
+                            .eq(2)
+                            .should(
+                                'have.text',
+                                getAuthorShortName(sortedStudies?.[index]?.authors || '')
+                            );
                     });
                 });
             });

compose/neurosynth-frontend/cypress/e2e/workflows/MetaAnalyses/CreateSpecificationDialog.cy.tsx

@@ -40,7 +40,7 @@ describe('CreateSpecificationDialog', () => {
         cy.contains('FDRCorrector').should('exist');
     });
 
-    it.only('should step through the wizard', () => {
+    it('should step through the wizard', () => {
         cy.intercept('POST', '**/api/specifications', {
             id: 'mockedSpecificationId',
         }).as('createSpecificationFixture');

compose/neurosynth-frontend/cypress/e2e/workflows/SleuthImport/DoSleuthImport.cy.tsx

@@ -433,7 +433,7 @@ describe('DoSleuthImport', () => {
     });
 
     describe('edge cases', () => {
-        it.only('should apply the pubmed details to the study if a matching pubmed study is found', () => {
+        it('should apply the pubmed details to the study if a matching pubmed study is found', () => {
             // this stuff exists just to make sure cypress doesnt send any real requests. They are not under test
             // synth API responses
             cy.intercept('POST', `${neurostoreAPIBaseURL}/analyses/**`, {

compose/neurosynth-frontend/src/App.spec.tsx

@@ -5,15 +5,16 @@ import useGoogleAnalytics from 'hooks/useGoogleAnalytics';
 import { SnackbarKey, SnackbarProvider } from 'notistack';
 import { useEffect, useRef } from 'react';
 import { QueryCache, QueryClient, QueryClientProvider } from 'react-query';
-import Navbar from './components/Navbar/Navbar';
+import Navbar from 'components/Navbar/Navbar';
 import useGetToken from './hooks/useGetToken';
-import BaseNavigation from './pages/BaseNavigation/BaseNavigation';
+import BaseNavigation from 'pages/BaseNavigation/BaseNavigation';
 import { useLocation } from 'react-router-dom';
 
 const queryClient = new QueryClient({
     defaultOptions: {
         queries: {
             retry: 0,
+            refetchOnWindowFocus: false,
             // staleTime: 5000, // https://tkdodo.eu/blog/practical-react-query#the-defaults-explained
         },
     },

compose/neurosynth-frontend/src/App.tsx

@@ -5,6 +5,7 @@ const useAuth0 = jest.fn().mockReturnValue({
     loginWithPopup: jest.fn(),
     logout: jest.fn(),
     isAuthenticated: false,
+    isLoading: false,
     user: {
         sub: 'some-github-user',
     },

compose/neurosynth-frontend/src/__mocks__/@auth0/auth0-react.ts

@@ -0,0 +1,5 @@
+const useSnackbar = jest.fn().mockReturnValue({
+    enqueueSnackbar: jest.fn(),
+});
+
+export { useSnackbar };