web: refactor status label to separate component by kensternberg-authentik · Pull Request #7407 · goauthentik/authentik

kensternberg-authentik · 2023-11-01T22:11:16Z

Details

A quality of life thing: <ak-status-label good>

There’s an idiom throughout the UI:

<ak-label color=${item.enabled ? PFColor.Green : PFColor.Red}>
      ${item.enabled ? msg("Yes") : msg("No")}
      </ak-label>

There are two problems with this.

Repeating the conditional multiple times is error-prone
The color scheme doesn’t communicate much.

There are uses for ak-label that aren’t like this, but I’m focusing on this particular use case, which occurs about 20 times throughout the UI.

Since it’s so common, let’s isolate the most common case: <ak-status-label good /> gives you the “good” status, and <ak-status-label/> gives you the “bad” status, which is the default (no arguments to the function).

There wasn’t much clarity in the system for when to use orange vs red vs grey, but looking through the use cases, it became clear that Red meant fail/inaccessible, Orange meant “Warning, but not blocking,” and Grey just means “info: this thing is off”.

So let’s define that with meaning: there are three types, error, warning, and info. Which corresponds to debugging levels, but whatever, nerds grok that stuff.

So that example at the top becomes

<ak-status-label ?good=${item.enabled}></ak-status-label>

… and we can now more clearly understand what that conveys.

There is some heavy tension in this case: this is an easier and quicker-to-write solution to informing the user of a binary status in an iconic way, but the developer has to remember that it exists.

Providing the other types is via a flag:

<ak-status-label type="info" ?good=${item.enabled></ak-status-label> will provide the grey/info icon version.
<ak-status-label type="warning" ?good=${item.enabled></ak-status-label> will provide the orange/warning icon version.

Alternative "good" and "bad" messages can be provided via an attribute:

<ak-status-label ?good=${item.enabled} good-label="Hurray!"></ak-status-label>

Story provided, and changes to the existing uses of the existing idiom provided.

The story just displays the various uses, which does a pretty good job of illustrating in the source code how each alternative is accessed.

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)

This commit changes the way the root node of the web application shell is discovered by child components, such that the base class shared by both no longer results in a circular dependency between the two models. I've run this in isolation and have seen no failures of discovery; the identity token exists as soon as the Interface is constructed and is found by every item on the page.

* main: (57 commits) stages/email: Fix query parameters getting lost in Email links (#5376) core/rbac: fix missing field when removing perm, add delete from object page (#7226) website/integrations: grafana: add Helm and Terraform config examples (#7121) web: bump @types/codemirror from 5.60.11 to 5.60.12 in /web (#7223) translate: Updates for file web/xliff/en.xlf in zh_CN (#7224) translate: Updates for file web/xliff/en.xlf in zh-Hans (#7225) website/blogs: blog about sso tax (#7202) web: Application wizard v2 with tests (#7004) web: bump API Client version (#7220) core: bump goauthentik.io/api/v3 from 3.2023083.7 to 3.2023083.8 (#7221) providers/radius: TOTP MFA support (#7217) web: bump API Client version (#7218) stage/deny: add custom message (#7144) docs: update full-dev-setup docs (#7205) enterprise: bump license usage task frequency (#7215) web: bump the storybook group in /web with 5 updates (#7212) web: bump the sentry group in /web with 2 updates (#7211) Revert "web: Updates to the Context and Tasks libraries from lit. (#7168)" web: bump @types/codemirror from 5.60.10 to 5.60.11 in /web (#7209) web: bump @types/chart.js from 2.9.38 to 2.9.39 in /web (#7206) ...

* main: web/flows: update flow background (#7232) web/admin: fix prompt form and codemirror mode (#7231) web/admin: decrease wizard hint padding (#7227)

* main: web: bump API Client version (#7246) sources/oauth: include default JWKS URLs for OAuth sources (#6992) sources/oauth: periodically update OAuth sources' OIDC configuration (#7245) website/blogs: Fix sso blog to remove 3rd reason (#7230) lifecycle: fix otp_merge migration again (#7244) web: bump core-js from 3.33.0 to 3.33.1 in /web (#7243) core: bump node from 20 to 21 (#7237) web: fix bad comment that was confusing lit-analyze (#7234) translate: Updates for file web/xliff/en.xlf in zh_CN (#7235) core: bump ruff from 0.1.0 to 0.1.1 (#7238) core: bump twilio from 8.9.1 to 8.10.0 (#7239) web: bump the storybook group in /web with 5 updates (#7240) web: bump the wdio group in /tests/wdio with 4 updates (#7241) translate: Updates for file web/xliff/en.xlf in zh-Hans (#7236) web: isolate clipboard handling (#7229)

This built... and then it didn't? Anyway, the current fix is to provide type information the AkInterface for the data that consumers require.

* main: sources/oauth: fix oidc well-known parsing (#7248) web/admin: improve user email button labels (#7233)

* main: core: bump pylint-django from 2.5.3 to 2.5.4 (#7255) core: bump goauthentik.io/api/v3 from 3.2023083.9 to 3.2023083.10 (#7256) web: bump the wdio group in /tests/wdio with 1 update (#7258) web: bump the eslint group in /tests/wdio with 1 update (#7257) sources/oauth: fix name clash (#7253) web: bump the eslint group in /web with 1 update (#7250) web: bump mermaid from 10.5.0 to 10.5.1 in /web (#7247) web: break circular dependency between AKElement & Interface. (#7165)

* main: (28 commits) web: fix typo in traefik name web/admin: disable wizard banner for now (#7294) web/admin: small fixes (#7292) core: Use branding_title in the end session page (#7282) web: bump pyright from 1.1.332 to 1.1.333 in /web (#7287) website: bump react-tooltip from 5.21.5 to 5.21.6 in /website (#7283) web: bump the sentry group in /web with 2 updates (#7285) web: bump the eslint group in /web with 1 update (#7286) core: bump ruff from 0.1.1 to 0.1.2 (#7289) core: bump pytest from 7.4.2 to 7.4.3 (#7288) web: bump the wdio group in /tests/wdio with 3 updates (#7290) website/blogs: fixed typo in blog (#7281) core: bump pylint from 2.17.7 to 3.0.2 (#7270) web: bump the eslint group in /tests/wdio with 2 updates (#7274) translate: Updates for file web/xliff/en.xlf in zh-Hans (#7278) translate: Updates for file web/xliff/en.xlf in zh_CN (#7277) ci: bump actions/setup-node from 3 to 4 (#7268) core: bump pylint-django from 2.5.4 to 2.5.5 (#7271) web: bump the eslint group in /web with 2 updates (#7269) web: bump @trivago/prettier-plugin-sort-imports from 4.2.0 to 4.2.1 in /tests/wdio (#7275) ...

* main: (38 commits) crypto: fix race conditions when creating self-signed certificates on startup (#7344) blueprints: fix entries with state: absent not being deleted if their serializer has errors (#7345) web/admin: fix @change handler for ak-radio elements (#7348) rbac: handle lookup error (#7341) website/docs: add warning about upgrading to 2023.10 (#7340) web/admin: fix role form reacting to enter (#7330) core: bump github.com/google/uuid from 1.3.1 to 1.4.0 (#7333) core: bump goauthentik.io/api/v3 from 3.2023083.10 to 3.2023101.1 (#7334) core: bump ruff from 0.1.2 to 0.1.3 (#7335) core: bump pydantic-scim from 0.0.7 to 0.0.8 (#7336) website/blogs: Blog dockers (#7328) providers/proxy: attempt to fix duplicate cookie (#7324) stages/email: fix sending emails from task (#7325) web: bump API Client version (#7321) website/docs: update release notes for 2023.10.1 (#7316) release: 2023.10.1 lifecycle: fix otp merge migration (#7315) root: fix pylint errors (#7312) web: bump API Client version (#7311) release: 2023.10.0 ...

* main: web: bump rollup from 4.1.4 to 4.1.5 in /web (#7370) website/integrations: add SonarQube (#7167) web: bump the storybook group in /web with 5 updates (#7382) core: bump goauthentik.io/api/v3 from 3.2023101.1 to 3.2023102.1 (#7378) web: bump ts-lit-plugin from 2.0.0 to 2.0.1 in /web (#7379) web: bump @rollup/plugin-replace from 5.0.4 to 5.0.5 in /web (#7380) web: bump API Client version (#7365) website/docs: add 2023.8.4 release notes release: 2023.10.2 security: fix oobe-flow reuse when akadmin is deleted (#7361) website/docs: prepare 2023.10.2 release notes (#7362) website/docs: add missing breaking change due to APPEND_SLASH (#7360) lifecycle: rework otp_merge migration (#7359) translate: Updates for file web/xliff/en.xlf in zh-Hans (#7354) translate: Updates for file web/xliff/en.xlf in zh_CN (#7353) website/docs: add warning about Helm breaking change in 2024.x (#7351)

* main: website/integrations: argocd: add missing url in ArgoCD configuration (#7404) core: bump sentry-sdk from 1.32.0 to 1.33.1 (#7397) core: bump webauthn from 1.11.0 to 1.11.1 (#7399) core: bump github.com/redis/go-redis/v9 from 9.2.1 to 9.3.0 (#7396) core: bump twisted from 23.8.0 to 23.10.0 (#7398) web: bump the sentry group in /web with 2 updates (#7401) web: bump pyright from 1.1.333 to 1.1.334 in /web (#7402) web: bump rollup from 4.1.5 to 4.2.0 in /web (#7403) core: bump pytest-django from 4.5.2 to 4.6.0 (#7387) web: bump the eslint group in /tests/wdio with 2 updates (#7388) web: bump the sentry group in /web with 2 updates (#7366) web: bump the eslint group in /web with 2 updates (#7389) web: bump core-js from 3.33.1 to 3.33.2 in /web (#7390) stages/email: fix duplicate querystring encoding (#7386) web/admin: fix html error on oauth2 provider page (#7384)

There's an idiom throughout the UI: ``` HTML <ak-label color=${item.enabled ? PFColor.Green : PFColor.Red}> ${item.enabled ? msg("Yes") : msg("No")} </ak-label> ``` There are two problems with this. - Repeating the conditional multiple times is error-prone - The color scheme doesn't communicate much. There are uses for ak-label that aren't like this, but I'm focusing on this particular use case, which occurs about 20 times throughout the UI. Since it's so common, let's isolate the most common case: `<ak-status-label good />` gives you the "good" status, and `<ak-status-label/>` gives you the "bad" status, which is the default (no arguments to the function). There wasn't much clarity in the system for when to use orange vs red vs grey, but looking through the use cases, it became clear that Red meant fail/inaccessible, Orange meant "Warning, but not blocking," and Grey just means "info: this thing is off". So let's define that with meaning: there are three types, error, warning, and info. Which corresponds to debugging levels, but whatever, nerds grok that stuff. So that example at the top becomes ```<ak-status-label ?good=${item.enabled}></ak-status-label>``` ... and we can now more clearly understand what that conveys. There is some heavy tension in this case: this is an easier and quicker-to-write solution to informing the user of a binary status in an iconic way, but the developer has to remember that it exists. Story provided, and changes to the existing uses of the existing idiom provided.

netlify · 2023-11-01T22:11:21Z

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	`880457f`
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/655bab520f6c0a000894649c
😎 Deploy Preview	https://deploy-preview-7407--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.

codecov · 2023-11-01T22:21:23Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (c0b7d32) 92.36% compared to head (a0d0ccd) 91.14%.
Report is 1 commits behind head on main.

❗ Current head a0d0ccd differs from pull request most recent head 880457f. Consider uploading reports for the commit 880457f to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7407      +/-   ##
==========================================
- Coverage   92.36%   91.14%   -1.22%     
==========================================
  Files         587      587              
  Lines       29075    28895     -180     
==========================================
- Hits        26854    26337     -517     
- Misses       2221     2558     +337

Flag	Coverage Δ
e2e	`50.93% <ø> (+1.95%)`	⬆️
integration	`?`
unit	`89.59% <ø> (-0.08%)`	⬇️

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

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

kensternberg-authentik · 2023-11-01T22:27:57Z

By using a custom .prettierrc.json file, I was able to turn all of the existing idiomatic ak-label blocks into one-liners. Once that was achieved, the conversion was programmatic:

perl -pi.bak -e '/<ak-label.*Red.*Yes/ && s/<ak-label color=\$\{(\S+).*?<\/ak-label>/<ak-status-label ?good=\${$1}><\/ak-status-label>/' $(rg -l '<ak-label.*Red.*Yes')

Similar fixes were needed for the info and warning variants, and for knowing which files needed import ... ak-label changed to import ... ak-status-label. And in at least one case (CertificateKeyPairsListPage), both were needed. (It's also the only page with a custom "good" message.) The build and precommit phases made those cases easy to identify.

github-actions · 2023-11-01T22:35:22Z

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-ak-status-label-1698877615-b9c8acd
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-ak-status-label-1698877615-b9c8acd-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-ak-status-label-1698877615-b9c8acd

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-ak-status-label-1698877615-b9c8acd-arm64

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

netlify · 2023-11-02T15:16:46Z

✅ Deploy Preview for authentik ready!

Name	Link
🔨 Latest commit	`880457f`
🔍 Latest deploy log	https://app.netlify.com/sites/authentik/deploys/655bab521844b4000858bf60
😎 Deploy Preview	https://deploy-preview-7407--authentik.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 96 (🔴 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.

* main: (157 commits) sources/ldap: clean-up certs written from db (#7617) web: bump the eslint group in /tests/wdio with 1 update (#7635) core: compile backend translations (#7637) core: bump psycopg from 3.1.12 to 3.1.13 (#7625) core: bump ruff from 0.1.5 to 0.1.6 (#7626) core: bump twilio from 8.10.1 to 8.10.2 (#7627) web: bump the eslint group in /web with 1 update (#7629) web: bump the esbuild group in /web with 2 updates (#7630) web: bump rollup from 4.4.1 to 4.5.0 in /web (#7631) web: bump core-js from 3.33.2 to 3.33.3 in /web (#7633) core: bump goauthentik.io/api/v3 from 3.2023103.3 to 3.2023103.4 (#7634) web: bump the wdio group in /tests/wdio with 4 updates (#7636) translate: Updates for file locale/en/LC_MESSAGES/django.po in zh_TW (#7628) root: specify node and python versions in respective config files, deduplicate in CI (#7620) translate: Updates for file web/xliff/en.xlf in zh-Hans (#7619) translate: Updates for file web/xliff/en.xlf in zh_CN (#7618) tests: better per-test timeouts (#7612) web: bump API Client version (#7613) stages/identification: add option to pretend user exists (#7610) events: stop spam (#7611) ...

* main: web: refactor status label to separate component (#7407) web: refactor sidebar capabilities for categorical subsections (#7482)

kensternberg-authentik added 12 commits October 13, 2023 08:22

Merge branch 'main' into web/theme-controller-2

83338f8

* main: web/flows: update flow background (#7232) web/admin: fix prompt form and codemirror mode (#7231) web/admin: decrease wizard hint padding (#7227)

web: fix broken typescript references

0123bf6

This built... and then it didn't? Anyway, the current fix is to provide type information the AkInterface for the data that consumers require.

Merge branch 'main' into web/theme-controller-2

8713a1d

* main: sources/oauth: fix oidc well-known parsing (#7248) web/admin: improve user email button labels (#7233)

kensternberg-authentik marked this pull request as ready for review November 1, 2023 22:28

kensternberg-authentik requested a review from a team as a code owner November 1, 2023 22:28

Added the 'compact label' story to storybook.

a0d0ccd

BeryJu approved these changes Nov 16, 2023

View reviewed changes

BeryJu changed the title ~~Web/ak status label~~ web: refactor status label to separate component Nov 16, 2023

kensternberg-authentik merged commit 73751e5 into main Nov 20, 2023

kensternberg-authentik deleted the web/ak-status-label branch November 20, 2023 19:24

kensternberg-authentik added a commit that referenced this pull request Nov 21, 2023

Merge branch 'main' into dev

9c392d4

* main: web: refactor status label to separate component (#7407) web: refactor sidebar capabilities for categorical subsections (#7482)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

web: refactor status label to separate component#7407

web: refactor status label to separate component#7407
kensternberg-authentik merged 14 commits intomainfrom
web/ak-status-label

kensternberg-authentik commented Nov 1, 2023 •

edited

Loading

Uh oh!

netlify bot commented Nov 1, 2023 •

edited

Loading

Uh oh!

codecov bot commented Nov 1, 2023 •

edited

Loading

Uh oh!

kensternberg-authentik commented Nov 1, 2023

Uh oh!

github-actions bot commented Nov 1, 2023

Uh oh!

netlify bot commented Nov 2, 2023 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

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

Uh oh!

Details

Checklist

Uh oh!

netlify bot commented Nov 1, 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!

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

Uh oh!

Codecov Report

Uh oh!

kensternberg-authentik commented Nov 1, 2023

Uh oh!

github-actions bot commented Nov 1, 2023

Uh oh!

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

Uh oh!

✅ Deploy Preview for authentik ready!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

kensternberg-authentik commented Nov 1, 2023 •

edited

Loading

netlify bot commented Nov 1, 2023 •

edited

Loading

codecov bot commented Nov 1, 2023 •

edited

Loading

netlify bot commented Nov 2, 2023 •

edited

Loading