feat: responsive study list (#1068)

* 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

* Newer version of react-dates (calendar input component)

* Add useMedia hook

* Add useDebounce hook

* Export hooks for consumption

* Pull search filter into own component

* StudyListWithData to StudyListRoute

* Rename pagination component

* Rename Toolbar

* CustomeDateRangePicker to plain ol' css

* Remove unused styles

* Misc

* Magic to make our "OR" filters work

* Play w/ Mobile styles

* Fix pagination pushing out max width for viewport

* Tidy up small and medium templates

* Remove unecessary nesting

* Better mobile header and logo styles

* Fix studyList font size

* Remove unused code

* hookup on click

* Fix table search selectors

* Cypress uses medium width

* Remove irrelevant test

* Fix primary sort

* Fix sort for our smaller displays

* fix study list sometimes longer than specified rowsPerPage

* Simplify date picker styles

* restore study date filters

* Fix about table styling

* fix take value for search

* Fix header sizing for viewer and list route

* Remove dead code

* Restore isLoading

* Update platform/ui/src/components/studyList/StudyList.styl

Co-Authored-By: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

* Attempt first usage of translations w/ hooks

* Pull from react-i18n library

* Fit presets on to a single line

* add no results message

* Show error message in studyList table

* Update input selectors for e2e tests

* Make sure messages span all columns

* fix test selector for table results

* Skip hover for result rows

* fix imports

* Date filtering w/ config

* Default export

* Pushed to PageComponent

* Remove DropZone

This previously only worked for null/undefined studies. I'm unable to trigger the state by testing the data. This "might" have happened when using a fresh/empty PACS; but even an empty array of studies would not show

platform/viewer/src/components/Header/Header.js

@@ -1,5 +1,4 @@
 import './Header.css';
-import './Header.css';
 
 import { Link, withRouter } from 'react-router-dom';
 import React, { Component } from 'react';
@@ -84,60 +83,59 @@ class Header extends Component {
     // TODO: reset `this.hotKeysData`
   }
 
+  // ANTD -- Hamburger, Drawer, Menu
   render() {
     const { t } = this.props;
     const { appConfig = {} } = this.context;
     const showStudyList =
       appConfig.showStudyList !== undefined ? appConfig.showStudyList : true;
     return (
-      <div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
-        <div className="header-left-box">
-          {this.props.location && this.props.location.studyLink && (
-            <Link
-              to={this.props.location.studyLink}
-              className="header-btn header-viewerLink"
-            >
-              {t('Back to Viewer')}
-            </Link>
-          )}
+      <>
+        <div className="notification-bar">{t('INVESTIGATIONAL USE ONLY')}</div>
+        <div className={`entry-header ${this.props.home ? 'header-big' : ''}`}>
+          <div className="header-left-box">
+            {this.props.location && this.props.location.studyLink && (
+              <Link
+                to={this.props.location.studyLink}
+                className="header-btn header-viewerLink"
+              >
+                {t('Back to Viewer')}
+              </Link>
+            )}
 
-          <span
-            className={`${
-              this.props.home ? 'header-versionInfoHome' : 'header-versionInfo'
-            }`}
-            data-cy="header-version-info"
-          >
-            v{process.env.VERSION_NUMBER}
-          </span>
+            {this.props.children}
 
-          {this.props.children}
+            {showStudyList && !this.props.home && (
+              <Link
+                className="header-btn header-studyListLinkSection"
+                to={{
+                  pathname: '/',
+                  state: { studyLink: this.props.location.pathname },
+                }}
+              >
+                {t('Study list')}
+              </Link>
+            )}
+          </div>
 
-          {showStudyList && !this.props.home && (
-            <Link
-              className="header-btn header-studyListLinkSection"
-              to={{
-                pathname: '/',
-                state: { studyLink: this.props.location.pathname },
-              }}
-            >
-              {t('Study list')}
-            </Link>
-          )}
+          <div className="header-menu">
+            <span className="research-use">
+              {t('INVESTIGATIONAL USE ONLY')}
+            </span>
+            <Dropdown title={t('Options')} list={this.options} align="right" />
+
+            {/* TODO: We need a Modal service */}
+            <AboutModal
+              {...this.state}
+              onCancel={() =>
+                this.setState({
+                  isOpen: false,
+                })
+              }
+            />
+          </div>
         </div>
-
-        <div className="header-menu">
-          <span className="research-use">{t('INVESTIGATIONAL USE ONLY')}</span>
-          <Dropdown title={t('Options')} list={this.options} align="right" />
-          <AboutModal
-            {...this.state}
-            onCancel={() =>
-              this.setState({
-                isOpen: false,
-              })
-            }
-          />
-        </div>
-      </div>
+      </>
     );
   }
 }