web: replace 'description-list' with list of descriptions by kensternberg-authentik · Pull Request #7392 · goauthentik/authentik

kensternberg-authentik · 2023-10-31T17:53:27Z

Details

Replace description lists with lists of descriptions.

A description list is a Patternfly component for drawing, well, lists with a term and a description. It builds off the standard HTML component for a definition list of <dl><dt>term</dt><dd>definition</dd></dl>, and is intended for things like dictionaries, glossaries, and indexes.

Jens uses it for a lot of things.

There are 36 uses of DescriptionLists in our code. They’re usually straightforward collections intended to label data, so they’re not used incorrectly (most of the time), but they’re still long and cluttery and finding the “What is going on here?” moments in some of them can be a bit involved.

This commit takes the following two entries:

    return html`
        <div class="pf-c-description-list__group">
            <dt class="pf-c-description-list__term">
                <span class="pf-c-description-list__text">${msg("Username")}</span>
            </dt>
            <dd class="pf-c-description-list__description">
                <div class="pf-c-description-list__text">${user.username}</div>
            </dd>
        </div>
        <div class="pf-c-description-list__group">
            <dt class="pf-c-description-list__term">
                <span class="pf-c-description-list__text">${msg("Name")}</span>
            </dt>
            <dd class="pf-c-description-list__description">
                <div class="pf-c-description-list__text">${user.name}</div>
            </dd>
        </div>`;

… and turns it into this:

    const userInfo = [
        [msg("Username"), user.username],
        [msg("Name"), user.name]
    ];

    return html`
        <div class="pf-c-card__body">${renderDescriptionList(userInfo)}</div>
    `;

… which makes it pretty clear what’s going on. The savings and clarity get better with more entries (and some judicious editing of the original to move the two large blocks of embedded code into their own named methods):

        const userInfo = [
            [msg("Username"), user.username],
            [msg("Name"), user.name],
            [msg("Email"), user.email || "-"],
            [msg("Last login"), user.lastLogin?.toLocaleString()],
            [msg("Active"), html`<ak-label color=${user.isActive ? PFColor.Green : PFColor.Orange}></ak-label>`],
            [msg("Type"), userTypeToLabel(user.type)],
            [msg("Superuser"), html`<ak-label color=${user.isSuperuser ? PFColor.Green : PFColor.Orange} ></ak-label>`],
            [msg("Actions"), this.renderActionButtons(user)],
            [msg("Recovery"), this.renderRecoveryButtons(user)],
        ];

It would be “nice” if Web Components had a “self-erasing” syntax like React, but they don’t, and we should be grateful that they don’t; we’ll just have to live with using JavaScript functions that, you know, look like functions.

UserViewPage was used as the testbed for this experiment; if it works out well and this patch is accepted, I intend to go through the other 35 uses of description lists and replace them as well. I even have an IDE macro for it already.

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)

One thing I hate is clutter. Just tell me what you're going to do. "Description Lists" in our code are renderings of Patternfly's DescriptionList; we use only four of their idioms: horizontal, compact, 2col, and 3col. With that in mind, I've stripped out the DescriptionList rendering code from UserViewPage and replaced it with a list of "Here's what to render" and a function call to render them. The calling code is still responsible for having the right styles available, as this is not a component or an attempt at isolation; it is *just* a function (at this point).

netlify · 2023-10-31T17:53:32Z

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	`9bcc678`
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/6579ca4d97d25b000866bdc6
😎 Deploy Preview	https://deploy-preview-7392--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-10-31T18:02:01Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (1fccbaa) 43.71% compared to head (baa17d1) 92.63%.
Report is 14 commits behind head on main.

❗ Current head baa17d1 differs from pull request most recent head 9bcc678. Consider uploading reports for the commit 9bcc678 to get more accurate results

Additional details and impacted files

@@             Coverage Diff             @@
##             main    #7392       +/-   ##
===========================================
+ Coverage   43.71%   92.63%   +48.92%     
===========================================
  Files         588      588               
  Lines       29200    29200               
===========================================
+ Hits        12764    27049    +14285     
+ Misses      16436     2151    -14285

Flag	Coverage Δ
e2e	`50.66% <ø> (+6.95%)`	⬆️
integration	`25.91% <ø> (?)`
unit	`89.70% <ø> (?)`

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.

github-actions · 2023-10-31T18:18:09Z

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-standalone-description-lists-1698775690-91fcbe1
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-standalone-description-lists-1698775690-91fcbe1-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-standalone-description-lists-1698775690-91fcbe1

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-standalone-description-lists-1698775690-91fcbe1-arm64

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

* main: (219 commits) web: bump the wdio group in /tests/wdio with 2 updates (#7702) events: fix lint (#7700) events: add better fallback for sanitize_item to ensure everything can be saved as JSON (#7694) web: bump the wdio group in /tests/wdio with 4 updates (#7696) events: include user agent in events (#7693) web: fix labels on group view page (#7677) website/docs: Add OIDC auth integration with Nextcloud (#7406) web: fix locale (#7689) core: bump python from 3.11.5-bookworm to 3.12.0-bookworm (#7048) translate: Updates for file web/xliff/en.xlf in zh_TW (#7688) web: bump pyright from 1.1.336 to 1.1.337 in /web (#7681) core: bump sentry-sdk from 1.35.0 to 1.36.0 (#7683) website: bump prism-react-renderer from 2.2.0 to 2.3.0 in /website (#7685) web: bump the sentry group in /web with 2 updates (#7679) web: bump rollup from 4.5.0 to 4.5.1 in /web (#7680) web: bump @types/codemirror from 5.60.14 to 5.60.15 in /web (#7682) web: bump the wdio group in /tests/wdio with 2 updates (#7684) website: bump react-tooltip from 5.23.0 to 5.24.0 in /website (#7686) core: bump goauthentik.io/api/v3 from 3.2023103.4 to 3.2023104.1 (#7687) website/blog: Blog on security (#7671) ...

* dev: (72 commits) web/flows: show logo in card (#7824) blueprints: improve file change handler (#7813) web/user: fix search not updating app (#7825) web: bump the storybook group in /web with 5 updates (#7819) core: compile backend translations (#7827) translate: Updates for file locale/en/LC_MESSAGES/django.po in de (#7812) core: bump github.com/go-openapi/strfmt from 0.21.8 to 0.21.9 (#7814) ci: bump actions/stale from 8 to 9 (#7815) web: bump the wdio group in /tests/wdio with 1 update (#7816) translate: Updates for file web/xliff/en.xlf in zh_CN (#7820) web: bump the sentry group in /web with 2 updates (#7817) web: bump vite-tsconfig-paths from 4.2.1 to 4.2.2 in /web (#7818) translate: Updates for file web/xliff/en.xlf in zh-Hans (#7821) translate: Updates for file locale/en/LC_MESSAGES/django.po in zh-Hans (#7822) translate: Updates for file locale/en/LC_MESSAGES/django.po in zh_CN (#7823) web: bump typescript from 5.3.2 to 5.3.3 in /web (#7806) website: bump typescript from 5.3.2 to 5.3.3 in /website (#7807) web: bump typescript from 5.3.2 to 5.3.3 in /tests/wdio (#7808) core: bump goauthentik.io/api/v3 from 3.2023104.1 to 3.2023104.2 (#7809) ci: bump actions/setup-go from 4 to 5 ...

This commit re-instals the demo for the "description list" of user fields.

* main: scripts: postgres, redis: only listen on localhost (#7849) website: bump @types/react from 18.2.42 to 18.2.43 in /website (#7840) web: bump ts-node from 10.9.1 to 10.9.2 in /tests/wdio (#7846) core: bump github.com/go-openapi/runtime from 0.26.0 to 0.26.2 (#7841) website: bump prettier from 3.1.0 to 3.1.1 in /website (#7839) web: bump the esbuild group in /web with 2 updates (#7842) web: bump rollup from 4.6.1 to 4.7.0 in /web (#7843) web: bump prettier from 3.1.0 to 3.1.1 in /web (#7844) web: bump the wdio group in /tests/wdio with 2 updates (#7845) web: bump prettier from 3.1.0 to 3.1.1 in /tests/wdio (#7847) translate: Updates for file web/xliff/en.xlf in fr (#7851) translate: Updates for file locale/en/LC_MESSAGES/django.po in fr (#7850) core: bump python from 3.12.0-slim-bookworm to 3.12.1-slim-bookworm web/flows: update flow background (#7833) web/flows: fix logo height (#7834) Fix cache related image build issues

netlify · 2023-12-11T16:30:37Z

✅ Deploy Preview for authentik ready!

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

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

* main: web: dark/light theme fixes (#7872) web: replace 'description-list' with list of descriptions (#7392) web: expressing success (#7830) web: fix turnstile types after update (#7854) core: bump github.com/google/uuid from 1.4.0 to 1.5.0 (#7866) website: bump @types/react from 18.2.43 to 18.2.45 in /website (#7865) web: bump wdio-wait-for from 3.0.9 to 3.0.10 in /tests/wdio (#7867) website/blog: okta part two blog (#7863) web: bump lit-analyzer from 2.0.1 to 2.0.2 in /web (#7858) web: bump the babel group in /web with 4 updates (#7856) web: bump the eslint group in /web with 2 updates (#7857) web: bump rollup from 4.7.0 to 4.8.0 in /web (#7859) web: bump the eslint group in /tests/wdio with 2 updates (#7860) web: refactor the table renderer for legibility (#7433) documentation: Improve explanation of `kubernetes_json_patches` (#7832) root: update security policy to include link to cure53 report (#7853)

kensternberg-authentik added 13 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)

web: fix issue that prevented the classMap from being rendered properly

00554eb

web: added comments to the description list.

91fcbe1

web: analyze & prettier had opinions

f17ce1c

kensternberg-authentik marked this pull request as ready for review October 31, 2023 18:05

kensternberg-authentik requested a review from a team as a code owner October 31, 2023 18:05

kensternberg-authentik marked this pull request as draft November 8, 2023 17:09

kensternberg-authentik added 4 commits November 27, 2023 09:40

web: Fix description-list demo

5914259

This commit re-instals the demo for the "description list" of user fields.

web: prettier had opinions.

fd5b4f2

kensternberg-authentik marked this pull request as ready for review December 8, 2023 20:50

any -> unknown

9bcc678

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

BeryJu merged commit 026e80b into main Dec 13, 2023

BeryJu deleted the web/standalone-description-lists branch December 13, 2023 15:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

web: replace 'description-list' with list of descriptions#7392

web: replace 'description-list' with list of descriptions#7392
BeryJu merged 20 commits intomainfrom
web/standalone-description-lists

kensternberg-authentik commented Oct 31, 2023 •

edited

Loading

Uh oh!

netlify bot commented Oct 31, 2023 •

edited

Loading

Uh oh!

codecov bot commented Oct 31, 2023 •

edited

Loading

Uh oh!

github-actions bot commented Oct 31, 2023

Uh oh!

netlify bot commented Dec 11, 2023 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

kensternberg-authentik commented Oct 31, 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 31, 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 Oct 31, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Oct 31, 2023

Uh oh!

netlify bot commented Dec 11, 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 Oct 31, 2023 •

edited

Loading

netlify bot commented Oct 31, 2023 •

edited

Loading

codecov bot commented Oct 31, 2023 •

edited

Loading

netlify bot commented Dec 11, 2023 •

edited

Loading