web: patternfly hints as ak-web-component by kensternberg-authentik · Pull Request #7120 · goauthentik/authentik

kensternberg-authentik · 2023-10-09T17:22:21Z

Details

Patternfly 5's "Hints" React Component, but ported to web components. The discovery that CSS Custom Properties are still available in child components, even if they're within independent ShadowDOMs, made this fairly easy to port from Handlebars to Lit-HTML. Moving the definitions into :host and the applications into the root DIV of the component made duplicating the Patternfly 5 structure straightforward.

Despite the Patternfly Elements documentation, there's a lot to Patternfly Elements that isn't well documented, such as their slot controller, which near as I can tell just makes it easy to determine if a slot with the given name is actually being used by the client code, but it's hard to tell why, other than that it provides an easy way to determine if some CSS should be included.

This is a 1:1 port of the HBR files and SCSS to a Patternfly-Elements form. As such, there are probably a lot of edge cases using slotted content that I haven't addressed, but for the basic use cases we have in mind, it seems to work just fine.

Checklist

Local tests pass (ak test authentik/)
The code has been formatted (make lint-fix)

If an API change has been made

The API schema has been updated (make gen-build)

If changes to the frontend have been made

The code has been formatted (make web)
The translation files have been updated (make i18n-extract)

If applicable

The documentation has been updated
The documentation has been formatted (make website)

Patternfly 5's "Hints" React Component, but ported to web components. The discovery that CSS Custom Properties are still available in child components, even if they're within independent ShadowDOMs, made this fairly easy to port from Handlebars to Lit-HTML. Moving the definitions into `:host` and the applications into the root DIV of the component made duplicating the Patternfly 5 structure straightforward. Despite the [Patternfly Elements]documentation](https://patternflyelements.org/docs/develop/create/), there's a lot to Patternfly Elements that isn't well documented, such as their slot controller, which near as I can tell just makes it easy to determine if a slot with the given name is actually being used by the client code, but it's hard to tell why, other than that it provides an easy way to determine if some CSS should be included.

netlify · 2023-10-09T17:22:25Z

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	`b449a5c`
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/65281893856bff0008623088
😎 Deploy Preview	https://deploy-preview-7120--authentik-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-10-09T17:23:32Z

✅ Deploy Preview for authentik ready!

Name	Link
🔨 Latest commit	`fe69f8a`
🔍 Latest deploy log	https://app.netlify.com/sites/authentik/deploys/652436cfc6e2ab000815fba5
😎 Deploy Preview	https://deploy-preview-7120--authentik.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 95 (🟢 up 1 from production) Accessibility: 90 (no change from production) Best Practices: 100 (no change from production) SEO: 80 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-10-09T17:26:19Z

✅ Deploy Preview for authentik ready!

Name	Link
🔨 Latest commit	`ba67c08`
🔍 Latest deploy log	https://app.netlify.com/sites/authentik/deploys/6526f7ec80647d00085145d8
😎 Deploy Preview	https://deploy-preview-7120--authentik.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 95 (🔴 down 1 from production) Accessibility: 90 (no change from production) Best Practices: 100 (no change from production) SEO: 80 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov · 2023-10-09T17:36:21Z

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (8f493c8) 92.67% compared to head (b449a5c) 92.67%.
Report is 9 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7120   +/-   ##
=======================================
  Coverage   92.67%   92.67%           
=======================================
  Files         568      568           
  Lines       28049    28049           
=======================================
  Hits        25991    25991           
  Misses       2058     2058

Flag	Coverage Δ
e2e	`51.18% <ø> (ø)`
integration	`26.34% <ø> (ø)`
unit	`89.57% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

see 2 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

* main: (22 commits) lifecycle: fix install_id migration not running (#7116) core: bump Go from 1.20 to 1.21 (#7117) providers/ldap: add windows adsi support (#7098) web: bump API Client version (#7113) translate: Updates for file web/xliff/en.xlf in zh-Hans on branch main (#7112) translate: Updates for file web/xliff/en.xlf in zh_CN on branch main (#7111) web: bump the wdio group in /tests/wdio with 4 updates (#7108) core/api: add uuid field to core api user http response (#7110) core: bump goauthentik.io/api/v3 from 3.2023083.4 to 3.2023083.5 (#7105) core: bump golang.org/x/oauth2 from 0.12.0 to 0.13.0 (#7106) web: bump the eslint group in /tests/wdio with 1 update (#7107) providers/proxy: improve SLO by backchannel logging out sessions (#7099) web: bump @rollup/plugin-node-resolve from 15.2.2 to 15.2.3 in /web (#7104) web: bump the eslint group in /web with 1 update (#7103) web: bump the storybook group in /web with 1 update (#7102) web: bump API Client version (#7101) providers/saml: add default RelayState value for IDP-initiated requests (#7100) lifecycle: improve reliability of system migrations (#7089) sources/ldap: fix attribute path resolution (#7090) root: Ignore the vendor folder (#7094) ...

BeryJu

Looks good, the only thing its missing is a darker background when using the dark theme, maybe something like --ak-dark-background-lighter (I tried to make this work with pure css myself but failed to get there)

github-actions · 2023-10-10T21:55:42Z

authentik PR Installation instructions

Instructions for docker-compose

Add the following block to your .env file:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-web-hint-element-1697127313-4c28b69
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

For arm64, use these values:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-web-hint-element-1697127313-4c28b69-arm64
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

Afterwards, run the upgrade commands from the latest release notes.

Instructions for Kubernetes

Add the following block to your values.yml file:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
image:
    repository: ghcr.io/goauthentik/dev-server
    tag: gh-web-hint-element-1697127313-4c28b69

For arm64, use these values:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
image:
    repository: ghcr.io/goauthentik/dev-server
    tag: gh-web-hint-element-1697127313-4c28b69-arm64

Afterwards, run the upgrade commands from the latest release notes.

* main: web: bump pyright from 1.1.330 to 1.1.331 in /web (#7143) core: bump golang from 1.21.2-bookworm to 1.21.3-bookworm (#7142) core: bump gitpython from 3.1.35 to 3.1.37 (#7140) core: bump goauthentik.io/api/v3 from 3.2023083.5 to 3.2023083.6 (#7124) website/docs: fix PowerDNS Docker Hub repo name (#7134) website/blog: Fix typo in SCIM post (#7136) providers/proxy: fix redis cookies missing strict path (#7135) web: bump @lit-labs/task from 3.0.2 to 3.1.0 in /web (#7132) web: bump @lit/localize-tools from 0.6.10 to 0.7.0 in /web (#7133) web: bump the eslint group in /tests/wdio with 2 updates (#7128) core: bump structlog from 23.1.0 to 23.2.0 (#7125) core: bump selenium from 4.13.0 to 4.14.0 (#7126) web: bump the eslint group in /web with 2 updates (#7127) web: bump the wdio group in /tests/wdio with 4 updates (#7129)

Add the `ShowHintController`. This ReactiveController takes a token in its constructor, and looks in LocalStorage for that token and an associated value. If that value is not `undefined`, it sets the field `this.host.showHint` to the value found. It also provides a `render()` method that provides an `ak-hint-footer` with a checkbox and the "Don't show this message again," and responds to clicks on the checkbox by setting the `this.hint.showHint` and LocalStorage values to "false". An example web component using it has been supplied.

This was nifty. Still not entirely sure about the `theme="dark"` rippling through the product, but in this case it works quite well. All it took was defining the alternative dark mode values in a CSS entry, `:host([theme="dark"]) { ... }` and exploiting Patternfly's already intensely atomized CSS Custom Properties properly.

kensternberg-authentik · 2023-10-11T19:59:31Z

web/src/admin/applications/ApplicationWizardHint.ts

+
+import PFPage from "@patternfly/patternfly/components/Page/page.css";
+
+@customElement("ak-application-wizard-hint")


If this pattern of showHint; hintController; hintController.render() becomes commonplace enough, it might behoove us to extract that into an abstract ShowHintHost class, but not today, Satan, not today. :-)

kensternberg-authentik · 2023-10-11T20:03:02Z

web/src/components/ak-hint/ak-hint.ts

+        );
+    }
+
+    :host([theme="dark"]) {


Once all the sub-components were receiving their styling instructions from this block, adding the host-with-attribute-match made it remarkably easy to get dark mode working.

web/src/components/ak-hint/ak-hint.ts

Signed-off-by: Jens L. <jens@beryju.org>

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* main: web: patternfly hints as ak-web-component (#7120) web: fix form default submit handler (#7122) web/admin: add additional Flow info (#7155) tests: fix potential infinite wait in tests spinning up a container (#7153) ci: disable ghcr retention schedule while it's broken (#7154) translate: Updates for file locale/en/LC_MESSAGES/django.po in de (#7151) core: bump golang.org/x/net from 0.16.0 to 0.17.0 (#7148) web: bump the babel group in /web with 5 updates (#7149) core: bump sentry-sdk from 1.31.0 to 1.32.0 (#7150) website: make get started on pricing page go to customer portal (#7147)

Pre-commit fixes.

d0ce5a8

kensternberg-authentik added 2 commits October 9, 2023 10:42

web: fix some issues with styling found while testing.

26740e8

web: separated the "with Title" and "without Title" stories.

5d9a3ce

kensternberg-authentik marked this pull request as ready for review October 9, 2023 19:38

kensternberg-authentik requested a review from a team as a code owner October 9, 2023 19:38

BeryJu reviewed Oct 9, 2023

View reviewed changes

Added footer story, fixed some CSS.

e91fd05

kensternberg-authentik added 3 commits October 11, 2023 10:41

kensternberg-authentik commented Oct 11, 2023

View reviewed changes

web: revise colors to use more of the Authentik dark-mode style.

4b3f769

BeryJu reviewed Oct 12, 2023

View reviewed changes

web/src/components/ak-hint/ak-hint.ts Outdated Show resolved Hide resolved

BeryJu added 2 commits October 12, 2023 17:59

Update web/src/components/ak-hint/ak-hint.ts

4c28b69

Signed-off-by: Jens L. <jens@beryju.org>

remove any

b449a5c

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

BeryJu approved these changes Oct 12, 2023

View reviewed changes

kensternberg-authentik merged commit 21e5441 into main Oct 12, 2023

kensternberg-authentik deleted the web/hint-element branch October 12, 2023 17:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

web: patternfly hints as ak-web-component#7120

web: patternfly hints as ak-web-component#7120
kensternberg-authentik merged 12 commits intomainfrom
web/hint-element

kensternberg-authentik commented Oct 9, 2023 •

edited

Loading

Uh oh!

netlify bot commented Oct 9, 2023 •

edited

Loading

Uh oh!

netlify bot commented Oct 9, 2023 •

edited

Loading

Uh oh!

netlify bot commented Oct 9, 2023 •

edited

Loading

Uh oh!

codecov bot commented Oct 9, 2023 •

edited

Loading

Uh oh!

BeryJu left a comment

Uh oh!

github-actions bot commented Oct 10, 2023 •

edited

Loading

Uh oh!

kensternberg-authentik Oct 11, 2023

Uh oh!

kensternberg-authentik Oct 11, 2023

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		import PFPage from "@patternfly/patternfly/components/Page/page.css";

		@customElement("ak-application-wizard-hint")

Uh oh!

Conversation

kensternberg-authentik commented Oct 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Checklist

Uh oh!

netlify bot commented Oct 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for authentik-storybook ready!

Uh oh!

netlify bot commented Oct 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for authentik ready!

Uh oh!

netlify bot commented Oct 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for authentik ready!

Uh oh!

codecov bot commented Oct 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

BeryJu left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kensternberg-authentik Oct 11, 2023

Choose a reason for hiding this comment

Uh oh!

kensternberg-authentik Oct 11, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kensternberg-authentik commented Oct 9, 2023 •

edited

Loading

netlify bot commented Oct 9, 2023 •

edited

Loading

netlify bot commented Oct 9, 2023 •

edited

Loading

netlify bot commented Oct 9, 2023 •

edited

Loading

codecov bot commented Oct 9, 2023 •

edited

Loading

github-actions bot commented Oct 10, 2023 •

edited

Loading