Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 31 commits into from
Jul 22, 2021
Merged

Conversation

williamhaley
Copy link
Contributor

@williamhaley williamhaley commented Jul 7, 2021

Jira Ticket: HP-255

Deployed at: https://qa-bloodpac.planx-pla.net/discovery and https://qa-heal.planx-pla.net/

New Features

  • Use a side panel/drawer for Discovery page details
  • Enable exporting to workspaces for multiple Discovery results
  • Utilize the aggregate metadata service APIs provided by the metadata-service app
  • Create a new configuration for a HEAL-specific bundle
  • Allow a site to default to the Discovery page without authentication
  • Allow public access to the Discovery page with prompts to authenticate on-demand
  • Discovery page will have a new look and feel
  • Add Datadog RUM support to HEAL bundle

Improvements

  • Style updates
  • Responsive tags in the tag viewer
  • Updates to tests
  • Further componentize the Discovery page
  • New data availability status pending

Dependency updates

  • Redux/local storage testing related dependencies

Deployment changes

  • Portal config field discoveryConfig.features.exportToWorkspaceBETA has been renamed to discoveryConfig.features.exportToWorkspace
  • Note that there are several other new configurations introduced for the Discovery page, please refer to this diff
  • New GEN3_BUNDLE option heal introduced for buliding a HEAL bundle

@williamhaley williamhaley force-pushed the feat/heal branch 3 times, most recently from 30b0306 to 4892a7a Compare July 7, 2021 19:37
@williamhaley williamhaley changed the title Feat/heal HP-255 HEAL UI updates with adaptations to ecosystems UI Jul 7, 2021
@williamhaley williamhaley marked this pull request as ready for review July 8, 2021 20:39
src/index.jsx Outdated Show resolved Hide resolved
Copy link
Collaborator

@mfshao mfshao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we deploy to qa-heal and see?

@williamhaley
Copy link
Contributor Author

@mfshao Yeah, for sure. I'm waiting for a cloud-automation fix to pass and then I'll push the latest MDS updates and then I'll build out this branch to QA

@mfshao
Copy link
Collaborator

mfshao commented Jul 8, 2021

@mfshao Yeah, for sure. I'm waiting for a cloud-automation fix to pass and then I'll push the latest MDS updates and then I'll build out this branch to QA

Nice thanks! There is a huge queue in quay for portal images 🤦
I have manually cancelled some older builds, hopefully that can get us speed up a bit

Will and others added 11 commits July 8, 2021 16:28
* 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>
* 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>
* feat: new pending icon

* update tooltip text
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants