From 9ec6f548a60baf88ea4f21791df055460eba0283 Mon Sep 17 00:00:00 2001 From: Ken Sternberg <133134217+kensternberg-authentik@users.noreply.github.com> Date: Mon, 6 May 2024 08:55:43 -0700 Subject: [PATCH] web: clean up the options rendering in PromptForm (#9564) * web: fix esbuild issue with style sheets Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious pain. This fix better identifies the value types (instances) being passed from various sources in the repo to the three *different* kinds of style processors we're using (the native one, the polyfill one, and whatever the heck Storybook does internally). Falling back to using older CSS instantiating techniques one era at a time seems to do the trick. It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content (FLoUC), it's the logic with which we're left. In standard mode, the following warning appears on the console when running a Flow: ``` Autofocus processing was blocked because a document already has a focused element. ``` In compatibility mode, the following **error** appears on the console when running a Flow: ``` crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. at initDomMutationObservers (crawler-inject.js:1106:18) at crawler-inject.js:1114:24 at Array.forEach () at initDomMutationObservers (crawler-inject.js:1114:10) at crawler-inject.js:1549:1 initDomMutationObservers @ crawler-inject.js:1106 (anonymous) @ crawler-inject.js:1114 initDomMutationObservers @ crawler-inject.js:1114 (anonymous) @ crawler-inject.js:1549 ``` Despite this error, nothing seems to be broken and flows work as anticipated. * web: clean up a bit inside the promptform Just something I did while researching Github Issue 5197. --- web/package.json | 4 +- web/src/admin/stages/prompt/PromptForm.ts | 144 +++++----------------- 2 files changed, 32 insertions(+), 116 deletions(-) diff --git a/web/package.json b/web/package.json index a7d31ebb34..48f29b05e0 100644 --- a/web/package.json +++ b/web/package.json @@ -14,8 +14,8 @@ "build": "run-s build-locales esbuild:build", "build-proxy": "run-s build-locales esbuild:build-proxy", "watch": "run-s build-locales esbuild:watch", - "lint": "cross-env NODE_OPTIONS='--max_old_space_size=16384' eslint . --max-warnings 0 --fix", - "lint:precommit": "cross-env NODE_OPTIONS='--max_old_space_size=16384' node scripts/eslint-precommit.mjs", + "lint": "cross-env NODE_OPTIONS='--max_old_space_size=65536' eslint . --max-warnings 0 --fix", + "lint:precommit": "cross-env NODE_OPTIONS='--max_old_space_size=65536' node scripts/eslint-precommit.mjs", "lint:spelling": "node scripts/check-spelling.mjs", "lit-analyse": "lit-analyzer src", "precommit": "npm-run-all --parallel tsc lit-analyse lint:spelling --sequential lint:precommit prettier", diff --git a/web/src/admin/stages/prompt/PromptForm.ts b/web/src/admin/stages/prompt/PromptForm.ts index 386ae7004f..234d0a8bb0 100644 --- a/web/src/admin/stages/prompt/PromptForm.ts +++ b/web/src/admin/stages/prompt/PromptForm.ts @@ -11,6 +11,7 @@ import { msg } from "@lit/localize"; import { CSSResult, TemplateResult, html } from "lit"; import { customElement, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; +import { map } from "lit/directives/map.js"; import PFTitle from "@patternfly/patternfly/components/Title/title.css"; import PFGrid from "@patternfly/patternfly/layouts/Grid/grid.css"; @@ -121,120 +122,35 @@ export class PromptForm extends ModelForm { } renderTypes(): TemplateResult { - return html` - - - - - - - - - - - - - - - - - - - `; + // prettier-ignore + const promptTypesWithLabels = [ + [PromptTypeEnum.Text, msg("Text: Simple Text input")], + [PromptTypeEnum.TextArea, msg("Text Area: Multiline text input")], + [PromptTypeEnum.TextReadOnly, msg("Text (read-only): Simple Text input, but cannot be edited.")], + [PromptTypeEnum.TextAreaReadOnly, msg("Text Area (read-only): Multiline text input, but cannot be edited.")], + [PromptTypeEnum.Username, msg("Username: Same as Text input, but checks for and prevents duplicate usernames.")], + [PromptTypeEnum.Email, msg("Email: Text field with Email type.")], + [PromptTypeEnum.Password, msg("Password: Masked input, multiple inputs of this type on the same prompt need to be identical.")], + [PromptTypeEnum.Number, msg("Number")], + [PromptTypeEnum.Checkbox, msg("Checkbox")], + [PromptTypeEnum.RadioButtonGroup, msg("Radio Button Group (fixed choice)")], + [PromptTypeEnum.Dropdown, msg("Dropdown (fixed choice)")], + [PromptTypeEnum.Date, msg("Date")], + [PromptTypeEnum.DateTime, msg("Date Time")], + [PromptTypeEnum.File, msg("File")], + [PromptTypeEnum.Separator, msg("Separator: Static Separator Line")], + [PromptTypeEnum.Hidden, msg("Hidden: Hidden field, can be used to insert data into form.")], + [PromptTypeEnum.Static, msg("Static: Static value, displayed as-is.")], + [PromptTypeEnum.AkLocale, msg("authentik: Locale: Displays a list of locales authentik supports.")], + ]; + const currentType = this.instance?.type; + return html` ${map( + promptTypesWithLabels, + ([promptType, label]) => + html``, + )}`; } renderForm(): TemplateResult {