web/admin: fix prompt form and codemirror mode (#7231)

* web/admin: fix extra curly brace

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

* also fix form rendering

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

* fix codemirror alignment

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

* use enum for codemirror mode to prevent invalid mode

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

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L
2023-10-19 23:53:04 +02:00
committed by GitHub
parent 4686796543
commit 41464aec18
20 changed files with 100 additions and 34 deletions

View File

@ -18,17 +18,26 @@ import { EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
import { AKElement } from "@goauthentik/elements/Base";
import YAML from "yaml";
import { CSSResult, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import { UiThemeEnum } from "@goauthentik/api";
export enum CodeMirrorMode {
XML = "xml",
JavaScript = "javascript",
HTML = "html",
Python = "python",
YAML = "yaml",
}
@customElement("ak-codemirror")
export class CodeMirrorTextarea<T> extends AKElement {
@property({ type: Boolean })
readOnly = false;
@property()
mode = "yaml";
mode: CodeMirrorMode = CodeMirrorMode.YAML;
@property()
name?: string;
@ -45,6 +54,24 @@ export class CodeMirrorTextarea<T> extends AKElement {
themeLight: Extension;
themeDark: Extension;
static get styles(): CSSResult[] {
return [
// Better alignment with patternfly components
css`
.cm-editor {
padding-top: calc(
var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm)
);
padding-bottom: calc(
var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm)
);
padding-right: var(--pf-c-form-control--inset--base);
padding-left: var(--pf-c-form-control--inset--base);
}
`,
];
}
@property()
// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types
set value(v: T | string) {
@ -79,10 +106,10 @@ export class CodeMirrorTextarea<T> extends AKElement {
return this.getInnerValue();
}
try {
switch (this.mode.toLowerCase()) {
case "yaml":
switch (this.mode) {
case CodeMirrorMode.YAML:
return YAML.parse(this.getInnerValue());
case "javascript":
case CodeMirrorMode.JavaScript:
return JSON.parse(this.getInnerValue());
default:
return this.getInnerValue();
@ -115,15 +142,15 @@ export class CodeMirrorTextarea<T> extends AKElement {
getLanguageExtension(): LanguageSupport | undefined {
switch (this.mode.toLowerCase()) {
case "xml":
case CodeMirrorMode.XML:
return xml();
case "javascript":
case CodeMirrorMode.JavaScript:
return javascript();
case "html":
case CodeMirrorMode.HTML:
return htmlLang();
case "python":
case CodeMirrorMode.Python:
return python();
case "yaml":
case CodeMirrorMode.YAML:
return new LanguageSupport(StreamLanguage.define(yamlMode.yaml));
}
return undefined;