feat: 🎸 Load spinner when selecting gcloud store. Add key on td (#1034)

* feat: 🎸 Load spinner when selecting gcloud store. Add key on td

* feat: 🎸 Code review. Translate loading study status

* feat: 🎸 Code review. Minor code refactoring

* fix: add missing study and index declerations

* test: Improviment on VTK beforeEach hook (#1057)

* feat: 🎸 Some improvements on table cell and react lifecycle

* feat: 🎸 Prevent component update on a not searchData changing

* feat: 🎸 Some cypress improv to pass ci

* feat: 🎸 Code reviewe and also fixing list for gcloud

* feat: 🎸 Code review. Add spinner on first load of store

* feat: 🎸 Code review. Centering loading list spinner icon

platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js

@@ -1,6 +1,6 @@
 describe('OHIFStandaloneViewer', () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.openStudyList();
   });
 
   it('loads route with at least 2 rows', () => {

platform/viewer/cypress/support/aliases.js

@@ -35,8 +35,8 @@ export function initCommonElementsAliases() {
 //Creating aliases for Routes
 export function initRouteAliases() {
   cy.server();
-  cy.route('GET', '/**/series/**').as('getStudySeries');
-  cy.route('GET', '/**/studies/**').as('getStudies');
+  cy.route('GET', '**/series**').as('getStudySeries');
+  cy.route('GET', '**/studies**').as('getStudies');
 }
 
 //Creating aliases for VTK tools buttons

platform/viewer/cypress/support/commands.js

@@ -39,20 +39,12 @@ import {
  * @param {string} PatientName - Patient name that we would like to search for
  */
 Cypress.Commands.add('openStudy', patientName => {
-  cy.initRouteAliases();
-  cy.visit('/');
-  cy.wrap(null).then(() => {
-    return new Cypress.Promise((resolve, reject) => {
-      cy.get('#patientName').type(patientName);
-      setTimeout(() => {
-        cy.get('#studyListData')
-          .contains(patientName)
-          .first()
-          .click();
-        resolve();
-      }, 2000);
-    });
-  });
+  cy.openStudyList();
+  cy.get('#patientName').type(patientName);
+  cy.wait('@getStudies');
+  cy.get('#studyListData .studylistStudy', { timeout: 5000 })
+    .contains(patientName)
+    .first().click();
 });
 
 /**
@@ -82,6 +74,12 @@ Cypress.Commands.add('isPageLoaded', (url = '/viewer/') => {
   return cy.location('pathname', { timeout: 60000 }).should('include', url);
 });
 
+Cypress.Commands.add('openStudyList', patientName => {
+  cy.initRouteAliases();
+  cy.visit('/');
+  cy.wait('@getStudies');
+});
+
 /**
  * Command to perform a drag and drop action. Before using this command, we must get the element that should be dragged first.
  * Example of usage: cy.get(element-to-be-dragged).drag(dropzone-element)

platform/viewer/src/googleCloud/DicomStorePickerModal.js

@@ -22,6 +22,8 @@ class DicomStorePickerModal extends Component {
   handleEvent = data => {
     const servers = GoogleCloudUtilServers.getServers(data, data.dicomstore);
     this.props.setServers(servers);
+    // Force auto close
+    this.props.onClose();
   };
 
   render() {

platform/viewer/src/studylist/StudyListWithData.js

@@ -8,6 +8,7 @@ import { StudyList } from '@ohif/ui';
 import ConnectedHeader from '../connectedComponents/ConnectedHeader.js';
 import * as RoutesUtil from '../routes/routesUtil';
 import moment from 'moment';
+import isEqual from 'lodash.isequal';
 import ConnectedDicomFilesUploader from '../googleCloud/ConnectedDicomFilesUploader';
 import ConnectedDicomStorePicker from '../googleCloud/ConnectedDicomStorePicker';
 import filesToStudies from '../lib/filesToStudies.js';
@@ -20,8 +21,9 @@ import AppContext from '../context/AppContext';
 class StudyListWithData extends Component {
   static contextType = AppContext;
   state = {
-    searchData: {},
+    searchOutdated: true,
     studies: [],
+    searchingStudies: false,
     error: null,
     modalComponentId: null,
   };
@@ -62,6 +64,7 @@ class StudyListWithData extends Component {
     if (!this.props.server && appConfig.enableGoogleCloudAdapter) {
       this.setState({
         modalComponentId: 'DicomStorePicker',
+        searchOutdated: false,
       });
     } else {
       this.searchForStudies({
@@ -71,21 +74,33 @@ class StudyListWithData extends Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
-    if (!this.state.searchData && !this.state.studies) {
-      this.searchForStudies();
-    }
-    if (this.props.server !== prevProps.server) {
-      this.setState({
-        modalComponentId: null,
-        searchData: null,
-        studies: null,
-      });
+  componentDidUpdate(prevProps, prevState) {
+    const hasNewServer = !isEqual(this.props.server, prevProps.server);
+
+    const { searchOutdated, searchingStudies } = this.state;
+
+    if (!searchingStudies) {
+      if (hasNewServer) {
+        const { appConfig = {} } = this.context;
+
+        const newState = {
+          searchOutdated: true,
+          studies: null,
+        };
+        if (appConfig.enableGoogleCloudAdapter) {
+          newState.modalComponentId = null;
+        }
+        this.setState(newState);
+      }
+
+      if (searchOutdated) {
+        this.searchForStudies();
+      }
     }
   }
 
   searchForStudies = (searchData = StudyListWithData.defaultSearchData) => {
-    const { server } = this.props;
+    const { server = {} } = this.props;
     const filter = {
       patientId: searchData.patientId,
       patientName: searchData.patientName,
@@ -105,7 +120,9 @@ class StudyListWithData extends Component {
     // TODO: add sorting
     const promise = OHIF.studies.searchStudies(server, filter);
 
-    // Render the viewer when the data is ready
+    this.setState({
+      searchingStudies: true,
+    });
     promise
       .then(studies => {
         if (!studies) {
@@ -150,11 +167,15 @@ class StudyListWithData extends Component {
 
         this.setState({
           studies: sortedStudies,
+          searchingStudies: false,
+          searchOutdated: false,
         });
       })
       .catch(error => {
         this.setState({
           error: true,
+          searchingStudies: false,
+          searchOutdated: false,
         });
 
         throw new Error(error);
@@ -208,8 +229,6 @@ class StudyListWithData extends Component {
 
     if (this.state.error) {
       return <div>Error: {JSON.stringify(this.state.error)}</div>;
-    } else if (this.state.studies === null && !this.state.modalComponentId) {
-      return <div>Loading...</div>;
     }
 
     let healthCareApiButtons = null;
@@ -240,8 +259,9 @@ class StudyListWithData extends Component {
 
     const studyList = (
       <div className="paginationArea">
-        {this.state.studies ? (
+        {this.state.studies || this.state.searchingStudies ? (
           <StudyList
+            loading={this.state.searchingStudies}
             studies={this.state.studies}
             studyListFunctionsEnabled={this.props.studyListFunctionsEnabled}
             onImport={this.onImport}