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

feat: show embedded superset dashboard in iframe #3192

Conversation

HendrikThePendric
Copy link
Contributor

@HendrikThePendric HendrikThePendric commented Jan 21, 2025

In this PR I've added support for showing a superset dashboard in the dashboard-app. Some notes:

  • We assume embedded superset dashboards come with their own whitespace around the dashboard. This is the default setting in superset. And as such we remove padding from the dashboard-container and add it to the description when the dashboard is embedded.
  • Loading the dashboard goes in three stages. :
    1. We show this loader-overlay with translucent backdrop that comes with an AlertBar if loading takes long.
    2. We show an "Fetching external dashboard" loader. This loader comes with a "show animation" which is called after a 400ms delay. The result of this is that on quick connections this loader is effectively skipped, which is better than showing 3 different loaders in quick succession.
    3. Finally superset has its own internal loading UI. It was not possible to work out when superset has completely loaded the dashboard so hiding the dashboard until then was not feasible.
  • There is currently a known issue in the superSetEmbeddedSdk which is preventing the side-filter-ui to be hidden. We will take no action but simply wait until this is fixed upstream.

And this PR also includes a small unrelated change: the dashboard-type-radio now only gets a focus outline when the user starts using keyboard navigation. We are still discussing wether or not this is better than the previous solution, so this may be subject to change later on. I woulnd't pay too much notices to the changes in src/components/DashboardsBar/CreateDashboardButton/styles/DashboardTypeRadio.module.css

Screenshot 2025-01-21 at 14 17 04

@dhis2-bot
Copy link
Contributor

dhis2-bot commented Jan 21, 2025

🚀 Deployed on https://pr-3192.dashboard.netlify.dhis2.org

@dhis2-bot dhis2-bot temporarily deployed to netlify January 21, 2025 09:10 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify January 21, 2025 09:35 Inactive
@HendrikThePendric HendrikThePendric force-pushed the feat/show-embedded-superset-dashboard-in-iframe branch from a8eb3b1 to 3558b92 Compare January 21, 2025 09:40
@dhis2-bot dhis2-bot temporarily deployed to netlify January 21, 2025 09:42 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify January 21, 2025 11:01 Inactive
@HendrikThePendric HendrikThePendric changed the title Feat/show embedded superset dashboard in iframe feat: show embedded superset dashboard in iframe Jan 21, 2025
@dhis2-bot dhis2-bot temporarily deployed to netlify January 21, 2025 13:05 Inactive
@dhis2-bot dhis2-bot temporarily deployed to netlify January 21, 2025 13:28 Inactive
@HendrikThePendric HendrikThePendric force-pushed the feat/show-embedded-superset-dashboard-in-iframe branch from ab13eae to 9825ca7 Compare January 21, 2025 13:31
@dhis2-bot dhis2-bot temporarily deployed to netlify January 21, 2025 13:34 Inactive
@HendrikThePendric HendrikThePendric marked this pull request as ready for review January 21, 2025 13:35
@HendrikThePendric HendrikThePendric merged commit 9524153 into feat/embedded-superset-dashboards-DHIS2-17891 Jan 21, 2025
31 checks passed
@HendrikThePendric HendrikThePendric deleted the feat/show-embedded-superset-dashboard-in-iframe branch January 21, 2025 14:17
HendrikThePendric added a commit that referenced this pull request Feb 4, 2025
* chore: include embedded field when fetching dashboards

* chore: include embedded field when fetching an individual dashboard

* fix: ensure embedded property is on the selected dashboard state

* feat: show embedded-superset-dashboard and allow it to take up the full page

* chore: add @superset/embedded-sdk dependency

* chore: add a redux selector that returns the superset embed data

* chore: add an api helper that returns a superset guest token

* feat: load superset embedded dashboard into DOM

* fix: remove whitespace from dashboard container when displaying an embedded dashboard

* fix: adjust dashboard-type-radio focus style

* chore: set focus with focusVisible to theoretically show the blue focus outline

* feat: loading and error state on superset embedded dashboard

* fix: add padding to description when dasboard is embedded

* chore: fix failing tests
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.

3 participants