HP-255 HEAL UI updates with adaptations to ecosystems UI (#876)

* feat(discovery): updates to discovery from HEAL

* fix(css): try to collapse css merge issues

* fix(clean): remove duplicate code

* fix(lint): lint issues

* Add 'common_url' to manifest if that field is present in the study

* HP-231 HP-244 Fix/heal mvp UI (#883)

* Quickly swap out access selector for column filter

* Add Export to Workspace button

* Studies are not selectable unless user has access

* Restore border to study description

* Add export buttons

* Post to manifestservice when Export to Workspace button is clicked

* Fix bug with config variable scope

* Update mock config with file manifests

* Implement 'Download Manifest' button

* [WIP] Support content_type: link

* Add content_type: link

* Redirect to workspace page on Export to Workspace click

* Configure whether Disco page is behind login

* Revert breaking config change

* Fix bug preventing multiple files from being selected

- Steps to reproduce (heal preprod):
  - Search for 'jcoin' and select that study
  - See 1 study selected
  - Search for 'bacpac' and select that study
  - Expect 2 studies selected, get 1 study selected

- Cause: table selection onChange handler sets selected resources to be
whatever's currently selected in the table. If search or filtering has removed
a selected row in the table, the onChange handler will happily drop it, as
even though it was selected it's no longer in the table.

- Fix: ~~Update table selection onChange handler to work by deselecting / selecting
a single row at a time.~~ Actually it turns out there's a one-line config change
that also fixes the issue :angry-haha:

* Remove old code and fix errors

* Fix tests

* Fix style issues

* Adv search open/close

* Merge master

* [WIP] Filter sliding animation and stick to viewport

* [WIP] Filtering logic

* Set filter state

* Filter based on selections

* Combine filters with AND

* Hide locks if authz field is missing

* Hide Adv Search Filters button if not enabled

* Warn instead of crashing if adv search filters field is missing

* Update style: search bar

* Update font

* Update style: adjust font sizes and margins to compress header

* Update style: advanced search button

* Update style: advanced search button and export to workspace button

* Tweak header style to match prototype

* [WIP] Update table style to match prototype

* Warn instead of crash if malformed filterField

* Fix eslint

* Update table style to match prototype

- Hide border between row and study desc row
- Negative margin hack to move study desc row up
- Fix bottom border
- Remove hover state

* Make table scrollable when advanced search filters are open

* Enable search over fields not present in table

* [WIP] Study description page pops in from right

* [WIP] Improve study description page

- [x] Study desc page pops in from right
- [x] Field styles match prototype
- [ ] Permalink button matches prototype
- [ ] Tags match prototype
- [ ] Study description is expandable
- [ ] Close button matches prototype

* [WIP] Improve study description page

- [x] Study desc page pops in from right
- [x] Field styles match prototype
- [ ] Permalink button matches prototype
- [ ] Tags match prototype
- [ ] Study description is expandable
- [ ] Close button matches prototype

* [WIP] Improve study description page

- [x] Study desc page pops in from right
- [x] Field styles match prototype
- [ ] Permalink button matches prototype
- [x] Tags match prototype
- [ ] Study description is expandable
- [ ] Close button matches prototype

* [WIP] Improve study description page

- [x] Study desc page pops in from right
- [x] Field styles match prototype
- [ ] Permalink button matches prototype
- [x] Tags match prototype
- [ ] Study description is expandable
- [ ] Close button matches prototype
- [x] Handle display of long fields

* Clean up unused code

* New study description page

- [x] Study desc page pops in from right
- [x] Field styles match prototype
- [x] Tags match prototype
- [x] Close button matches prototype
- [x] Permalink button matches prototype
- [x] Handle display of long fields

- TODO Study description is expandable

* Fix table row highlight visual bug

- Use a CSS hack (::after element behind the expanded row, which has a transparent background)

* Fix visual bug: pagination not visible

* Fix visual bug: top of third study description line visible in table

* change label 'Unaccessible' to 'No Access'

* change n/a logic

* change label to 'Access Required'

* fix unit test

* remove bhc from testSchema

* fix stylelint

* heal bundle without home page

* Delete portal_config.md

* fix

* fix

* fix unit test

* fix: adv filter overflow

* Mitigate table row CSS bug in Safari

- In Safari, table rows overhang the bottom.
- Seems to be caused by absolutely positioned ::after element -- in Chrome,
  it seems that `bottom: -35px` puts the ::after element right below the
  element it's attached to, but on Safari, `bottom: -35px` puts the ::after
  element on the bottom of the *container* element (the `table body`!)
- Mitigated by changing table background to the same gray as the rows,
  and hiding the ::after elements at the bottom of the <tbody> element
  behind the pagination element.

* fix: row color

* fix: empty component

* fix: css

* fix: css

* fix: more css

* feat: tag scroll

* fix lint

* feat: scroll tag reset

* feat: sort tag

* chore: rebase

* chore: pkg

* chore: 8 tags

* chore: no more beta

* fix: search crash

* fix: css

* fix: checkbox

Co-authored-by: Michael Ingram <mpingram@uchicago.edu>
Co-authored-by: haraprasadj <haraprasadj@uchicago.edu>

* HP-269 Feat/button redirect (#884)

* Quickly swap out access selector for column filter

* Add Export to Workspace button

* Studies are not selectable unless user has access

* Restore border to study description

* Add export buttons

* Post to manifestservice when Export to Workspace button is clicked

* Fix bug with config variable scope

* Update mock config with file manifests

* Implement 'Download Manifest' button

* [WIP] Support content_type: link

* Add content_type: link

* Redirect to workspace page on Export to Workspace click

* Configure whether Disco page is behind login

* Revert breaking config change

* Fix bug preventing multiple files from being selected

- Steps to reproduce (heal preprod):
  - Search for 'jcoin' and select that study
  - See 1 study selected
  - Search for 'bacpac' and select that study
  - Expect 2 studies selected, get 1 study selected

- Cause: table selection onChange handler sets selected resources to be
whatever's currently selected in the table. If search or filtering has removed
a selected row in the table, the onChange handler will happily drop it, as
even though it was selected it's no longer in the table.

- Fix: ~~Update table selection onChange handler to work by deselecting / selecting
a single row at a time.~~ Actually it turns out there's a one-line config change
that also fixes the issue :angry-haha:

* Remove old code and fix errors

* Fix tests

* Fix style issues

* Adv search open/close

* Merge master

* [WIP] Filter sliding animation and stick to viewport

* [WIP] Filtering logic

* Set filter state

* Filter based on selections

* Combine filters with AND

* Hide locks if authz field is missing

* Hide Adv Search Filters button if not enabled

* Warn instead of crashing if adv search filters field is missing

* Update style: search bar

* Update font

* Update style: adjust font sizes and margins to compress header

* Update style: advanced search button

* Update style: advanced search button and export to workspace button

* Tweak header style to match prototype

* [WIP] Update table style to match prototype

* Warn instead of crash if malformed filterField

* Fix eslint

* Update table style to match prototype

- Hide border between row and study desc row
- Negative margin hack to move study desc row up
- Fix bottom border
- Remove hover state

* Make table scrollable when advanced search filters are open

* Enable search over fields not present in table

* [WIP] Study description page pops in from right

* [WIP] Improve study description page

- [x] Study desc page pops in from right
- [x] Field styles match prototype
- [ ] Permalink button matches prototype
- [ ] Tags match prototype
- [ ] Study description is expandable
- [ ] Close button matches prototype

* [WIP] Improve study description page

- [x] Study desc page pops in from right
- [x] Field styles match prototype
- [ ] Permalink button matches prototype
- [ ] Tags match prototype
- [ ] Study description is expandable
- [ ] Close button matches prototype

* [WIP] Improve study description page

- [x] Study desc page pops in from right
- [x] Field styles match prototype
- [ ] Permalink button matches prototype
- [x] Tags match prototype
- [ ] Study description is expandable
- [ ] Close button matches prototype

* [WIP] Improve study description page

- [x] Study desc page pops in from right
- [x] Field styles match prototype
- [ ] Permalink button matches prototype
- [x] Tags match prototype
- [ ] Study description is expandable
- [ ] Close button matches prototype
- [x] Handle display of long fields

* Clean up unused code

* New study description page

- [x] Study desc page pops in from right
- [x] Field styles match prototype
- [x] Tags match prototype
- [x] Close button matches prototype
- [x] Permalink button matches prototype
- [x] Handle display of long fields

- TODO Study description is expandable

* Fix table row highlight visual bug

- Use a CSS hack (::after element behind the expanded row, which has a transparent background)

* Fix visual bug: pagination not visible

* Fix visual bug: top of third study description line visible in table

* change label 'Unaccessible' to 'No Access'

* change n/a logic

* change label to 'Access Required'

* fix unit test

* remove bhc from testSchema

* fix stylelint

* heal bundle without home page

* Delete portal_config.md

* fix

* fix

* fix unit test

* fix: adv filter overflow

* Mitigate table row CSS bug in Safari

- In Safari, table rows overhang the bottom.
- Seems to be caused by absolutely positioned ::after element -- in Chrome,
  it seems that `bottom: -35px` puts the ::after element right below the
  element it's attached to, but on Safari, `bottom: -35px` puts the ::after
  element on the bottom of the *container* element (the `table body`!)
- Mitigated by changing table background to the same gray as the rows,
  and hiding the ::after elements at the bottom of the <tbody> element
  behind the pagination element.

* fix: row color

* fix: empty component

* fix: css

* fix: css

* fix: more css

* feat: tag scroll

* fix lint

* feat: scroll tag reset

* feat: sort tag

* chore: rebase

* chore: pkg

* chore: 8 tags

* chore: no more beta

* fix: search crash

* fix: css

* fix: checkbox

* feat: button redirect to login

* update

* fix: tests

* fix: travis

* update lock

Co-authored-by: Michael Ingram <mpingram@uchicago.edu>
Co-authored-by: haraprasadj <haraprasadj@uchicago.edu>

* do not overwrite manigest common_url if it exists

* feat: make download btn name configurable (#888)

* HP-225 Feat/new disco icon (#889)

* feat: new pending icon

* update tooltip text

* fix: add space for icon

* add do not add commons_url if == hostname

* update commons catgory name

* case

* add do not add common_url if present in hostname

* HP-312 Fix/adv filter height (#890)

* fix: adv serch filter height

* fix: test

* fix: drawer content css

* feat: add datadog to heal bundle

* fix: remove duplicated route

* feat: make tag column display name configurable

* Fix/tag responsive (#892)

* fix: tag responsiveness and linting

* fix: travis

* Fix/disco download (#891)

* fix: add back disco download

* chore: restore base style

* update css

* fix: css

* fix: follow design

* fix: halfwidth

* fix: no hard coded font

* fix: use fence download path

Co-authored-by: Craig Barnes <craigrbarnes@uchicago.edu>
Co-authored-by: Mingfei Shao <2475897+mfshao@users.noreply.github.com>
Co-authored-by: Michael Ingram <mpingram@uchicago.edu>
Co-authored-by: haraprasadj <haraprasadj@uchicago.edu>
Co-authored-by: Mingfei Shao <mshao1@uchicago.edu>

docs/portal_config.md

@@ -398,13 +398,19 @@ Below is an example, with inline comments describing what each JSON block config
     "dropdowns": {} // optional; dropdown groupings for buttons
   },
   "discoveryConfig": { // config for Discovery page. Required if 'featureFlags.discovery' is true. See src/Discovery/DiscoveryConfig.d.ts for Typescript schema.
+    "requireLogin": false, // optional, defaults to false. If true, requires user to sign in before seeing the Discovery page
     "public": true, // optional, defaults to true. If false, requires user to sign in before seeing the Discovery page
     "features": {
-      "exportToWorkspaceBETA": { // configures the export to workspace feature. If enabled, the Discovery page data must contain a field which is a list of GUIDs for each study. See `manifestFieldName`
+      "exportToWorkspace": { // configures the export to workspace feature. If enabled, the Discovery page data must contain a field which is a list of GUIDs for each study. See `manifestFieldName`
           "enable": boolean
           "enableDownloadManifest": boolean // enables a button which allows user to download a manifest file for gen3 client
+          "downloadManifestButtonText": string // text to be displayed on the download manifest button
           "manifestFieldName": string // the field in the Discovery page data that contains the list of GUIDs that link to each study's data files.
-      }
+          "documentationLinks": {
+              "gen3Client": string // link to documentation about the gen3 client. Used for button tooltips
+              "gen3Workspaces": string // link to documentation about gen3 workspaces. Used for button tooltips.
+          }
+      },
       "pageTitle": {
         "enabled": true,
         "text": "My Special Test Discovery Page"
@@ -414,21 +420,24 @@ Below is an example, with inline comments describing what each JSON block config
           "enabled": true
         }
       },
+      "advSearchFilters": {
+        "enabled": true
+      },
       "authorization": {
         "enabled": true // toggles whether Discovery page displays users' access to studies. If true, 'useArboristUI' must also be set to true.
       }
     },
     "aggregations": [ // configures the statistics at the top of the discovery page (e.g. 'XX Studies', 'XX,XXX Subjects')
-        {
-            "name": "Studies",
-            "field": "study_id",
-            "type": "count" // count of rows in data where `field` is non-empty
-        },
-        {
-            "name": "Total Subjects",
-            "field": "_subjects_count",
-            "type": "sum" // sums together all numeric values in `row[field]`. `field` must be a numeric field.
-        }
+      {
+        "name": "Studies",
+        "field": "study_id",
+        "type": "count" // count of rows in data where `field` is non-empty
+      },
+      {
+        "name": "Total Subjects",
+        "field": "_subjects_count",
+        "type": "sum" // sums together all numeric values in `row[field]`. `field` must be a numeric field.
+      }
     ],
     "tagSelector": {
       "title": "Associated tags organized by category"
@@ -536,13 +545,15 @@ Below is an example, with inline comments describing what each JSON block config
     "minimalFieldMapping": { // maps
       "tagsListFieldName": "tags", // required; the field which contains the list of tags (format: [{name: string, category: string}] )
       "authzField": "authz", // optional if features.authorization.enabled is false, otherwise required
+      "dataAvailabilityField": "data_availability", // optional, for checking if a study has data pending to be available
       "uid": "study_id" // required; a unique identifier for each study. Can be any unique value and does not have to have any special meaning (eg does not need to be a GUID)
     },
     "tagCategories": [ // configures the categories displayed in the tag selector. If a tag category appears in the `tagsListFieldName` field but is not configured here, it will not be displayed in the tag selector.
       {
         "name": "Program", // this configures the tag category name that will be shown on the tag selector
         "color": "rgba(129, 211, 248, 1)", // color can be any vaid CSS color string, including hex, rgb, rgba, hsl
-        "display": true
+        "display": true,
+        "displayName": "All Programs" // optional string to customize tag category display name
       },
       {
         "name": "Study Registration",