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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 100 additions and 34 deletions

View File

@ -3,6 +3,7 @@ import { docLink } from "@goauthentik/common/global";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/components/ak-toggle-group"; import "@goauthentik/components/ak-toggle-group";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -169,7 +170,7 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
${this.source === blueprintSource.internal ${this.source === blueprintSource.internal
? html`<ak-form-element-horizontal label=${msg("Blueprint")} name="content"> ? html`<ak-form-element-horizontal label=${msg("Blueprint")} name="content">
<ak-codemirror <ak-codemirror
mode="yaml" mode=${CodeMirrorMode.YAML}
.parseValue=${false} .parseValue=${false}
value="${ifDefined(this.instance?.content)}" value="${ifDefined(this.instance?.content)}"
></ak-codemirror> ></ak-codemirror>
@ -183,7 +184,7 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${msg("Context")} name="context"> <ak-form-element-horizontal label=${msg("Context")} name="context">
<ak-codemirror <ak-codemirror
mode="yaml" mode=${CodeMirrorMode.YAML}
value="${YAML.stringify(first(this.instance?.context, {}))}" value="${YAML.stringify(first(this.instance?.context, {}))}"
> >
</ak-codemirror> </ak-codemirror>

View File

@ -2,6 +2,7 @@ import "@goauthentik/admin/groups/MemberSelectModal";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/chips/Chip"; import "@goauthentik/elements/chips/Chip";
import "@goauthentik/elements/chips/ChipGroup"; import "@goauthentik/elements/chips/ChipGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
@ -153,7 +154,7 @@ export class GroupForm extends ModelForm<Group, string> {
name="attributes" name="attributes"
> >
<ak-codemirror <ak-codemirror
mode="yaml" mode=${CodeMirrorMode.YAML}
value="${YAML.stringify(first(this.instance?.attributes, {}))}" value="${YAML.stringify(first(this.instance?.attributes, {}))}"
> >
</ak-codemirror> </ak-codemirror>

View File

@ -2,6 +2,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global"; import { docLink } from "@goauthentik/common/global";
import { groupBy } from "@goauthentik/common/utils"; import { groupBy } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/SearchSelect"; import "@goauthentik/elements/forms/SearchSelect";
@ -209,7 +210,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Configuration")} name="config"> <ak-form-element-horizontal label=${msg("Configuration")} name="config">
<ak-codemirror <ak-codemirror
mode="yaml" mode=${CodeMirrorMode.YAML}
value="${YAML.stringify( value="${YAML.stringify(
this.instance ? this.instance.config : this.defaultConfig?.config, this.instance ? this.instance.config : this.defaultConfig?.config,
)}" )}"

View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import YAML from "yaml"; import YAML from "yaml";
@ -75,7 +76,7 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Kubeconfig")} name="kubeconfig"> <ak-form-element-horizontal label=${msg("Kubeconfig")} name="kubeconfig">
<ak-codemirror <ak-codemirror
mode="yaml" mode=${CodeMirrorMode.YAML}
value="${YAML.stringify(first(this.instance?.kubeconfig, {}))}" value="${YAML.stringify(first(this.instance?.kubeconfig, {}))}"
> >
</ak-codemirror> </ak-codemirror>

View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import { PFColor } from "@goauthentik/elements/Label"; import { PFColor } from "@goauthentik/elements/Label";
import { Form } from "@goauthentik/elements/forms/Form"; import { Form } from "@goauthentik/elements/forms/Form";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
@ -145,7 +146,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Context")} name="context"> <ak-form-element-horizontal label=${msg("Context")} name="context">
<ak-codemirror <ak-codemirror
mode="yaml" mode=${CodeMirrorMode.YAML}
value=${YAML.stringify(first(this.request?.context, {}))} value=${YAML.stringify(first(this.request?.context, {}))}
> >
</ak-codemirror> </ak-codemirror>

View File

@ -2,6 +2,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global"; import { docLink } from "@goauthentik/common/global";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -85,7 +86,7 @@ export class ExpressionPolicyForm extends ModelForm<ExpressionPolicy, string> {
name="expression" name="expression"
> >
<ak-codemirror <ak-codemirror
mode="python" mode=${CodeMirrorMode.Python}
value="${ifDefined(this.instance?.expression)}" value="${ifDefined(this.instance?.expression)}"
> >
</ak-codemirror> </ak-codemirror>

View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global"; import { docLink } from "@goauthentik/common/global";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -69,7 +70,10 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
?required=${true} ?required=${true}
name="expression" name="expression"
> >
<ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}"> <ak-codemirror
mode=${CodeMirrorMode.Python}
value="${ifDefined(this.instance?.expression)}"
>
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg("Expression using Python.")} ${msg("Expression using Python.")}

View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global"; import { docLink } from "@goauthentik/common/global";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -54,7 +55,10 @@ export class PropertyMappingNotification extends ModelForm<NotificationWebhookMa
?required=${true} ?required=${true}
name="expression" name="expression"
> >
<ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}"> <ak-codemirror
mode=${CodeMirrorMode.Python}
value="${ifDefined(this.instance?.expression)}"
>
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg("Expression using Python.")} ${msg("Expression using Python.")}

View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global"; import { docLink } from "@goauthentik/common/global";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -81,7 +82,10 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
?required=${true} ?required=${true}
name="expression" name="expression"
> >
<ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}"> <ak-codemirror
mode=${CodeMirrorMode.Python}
value="${ifDefined(this.instance?.expression)}"
>
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg("Expression using Python.")} ${msg("Expression using Python.")}

View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global"; import { docLink } from "@goauthentik/common/global";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -54,7 +55,10 @@ export class PropertyMappingSCIMForm extends ModelForm<SCIMMapping, string> {
?required=${true} ?required=${true}
name="expression" name="expression"
> >
<ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}"> <ak-codemirror
mode=${CodeMirrorMode.Python}
value="${ifDefined(this.instance?.expression)}"
>
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg("Expression using Python.")} ${msg("Expression using Python.")}

View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { docLink } from "@goauthentik/common/global"; import { docLink } from "@goauthentik/common/global";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -81,7 +82,10 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
?required=${true} ?required=${true}
name="expression" name="expression"
> >
<ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}"> <ak-codemirror
mode=${CodeMirrorMode.Python}
value="${ifDefined(this.instance?.expression)}"
>
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg("Expression using Python.")} ${msg("Expression using Python.")}

View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import { Form } from "@goauthentik/elements/forms/Form"; import { Form } from "@goauthentik/elements/forms/Form";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import "@goauthentik/elements/forms/SearchSelect"; import "@goauthentik/elements/forms/SearchSelect";
@ -50,7 +51,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
return html`<ak-form-element-horizontal label=${msg("Result")}> return html`<ak-form-element-horizontal label=${msg("Result")}>
${this.result?.successful ${this.result?.successful
? html`<ak-codemirror ? html`<ak-codemirror
mode="javascript" mode=${CodeMirrorMode.JavaScript}
?readOnly=${true} ?readOnly=${true}
value="${ifDefined(this.result?.result)}" value="${ifDefined(this.result?.result)}"
> >
@ -148,7 +149,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Context")} name="context"> <ak-form-element-horizontal label=${msg("Context")} name="context">
<ak-codemirror <ak-codemirror
mode="yaml" mode=${CodeMirrorMode.YAML}
value=${YAML.stringify(first(this.request?.context, {}))} value=${YAML.stringify(first(this.request?.context, {}))}
> >
</ak-codemirror> </ak-codemirror>

View File

@ -7,6 +7,7 @@ import { MessageLevel } from "@goauthentik/common/messages";
import "@goauthentik/components/events/ObjectChangelog"; import "@goauthentik/components/events/ObjectChangelog";
import { AKElement } from "@goauthentik/elements/Base"; import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/EmptyState"; import "@goauthentik/elements/EmptyState";
import "@goauthentik/elements/Tabs"; import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/buttons/ActionButton"; import "@goauthentik/elements/buttons/ActionButton";
@ -472,7 +473,7 @@ export class SAMLProviderViewPage extends AKElement {
</div> </div>
<div class="pf-c-card__footer"> <div class="pf-c-card__footer">
<ak-codemirror <ak-codemirror
mode="xml" mode=${CodeMirrorMode.XML}
?readOnly=${true} ?readOnly=${true}
value="${ifDefined(this.metadata?.metadata)}" value="${ifDefined(this.metadata?.metadata)}"
></ak-codemirror> ></ak-codemirror>

View File

@ -5,6 +5,7 @@ import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import { rootInterface } from "@goauthentik/elements/Base"; import { rootInterface } from "@goauthentik/elements/Base";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -218,7 +219,7 @@ export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
<ak-form-element-horizontal label=${msg("OIDC JWKS")} name="oidcJwks"> <ak-form-element-horizontal label=${msg("OIDC JWKS")} name="oidcJwks">
<ak-codemirror <ak-codemirror
mode="javascript" mode=${CodeMirrorMode.JavaScript}
value="${JSON.stringify(first(this.instance?.oidcJwks, {}))}" value="${JSON.stringify(first(this.instance?.oidcJwks, {}))}"
> >
</ak-codemirror> </ak-codemirror>

View File

@ -6,6 +6,7 @@ import { EVENT_REFRESH } from "@goauthentik/common/constants";
import "@goauthentik/components/events/ObjectChangelog"; import "@goauthentik/components/events/ObjectChangelog";
import { AKElement } from "@goauthentik/elements/Base"; import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/Tabs"; import "@goauthentik/elements/Tabs";
import "@goauthentik/elements/buttons/SpinnerButton"; import "@goauthentik/elements/buttons/SpinnerButton";
import "@goauthentik/elements/forms/ModalForm"; import "@goauthentik/elements/forms/ModalForm";
@ -175,7 +176,7 @@ export class SAMLSourceViewPage extends AKElement {
<div class="pf-c-card pf-l-grid__item pf-m-12-col"> <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__body"> <div class="pf-c-card__body">
<ak-codemirror <ak-codemirror
mode="xml" mode=${CodeMirrorMode.XML}
?readOnly=${true} ?readOnly=${true}
value="${ifDefined(this.metadata?.metadata)}" value="${ifDefined(this.metadata?.metadata)}"
></ak-codemirror> ></ak-codemirror>

View File

@ -2,6 +2,7 @@ import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { dateTimeLocal, first } from "@goauthentik/common/utils"; import { dateTimeLocal, first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/SearchSelect"; import "@goauthentik/elements/forms/SearchSelect";
@ -79,7 +80,7 @@ export class InvitationForm extends ModelForm<Invitation, string> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Custom attributes")} name="fixedData"> <ak-form-element-horizontal label=${msg("Custom attributes")} name="fixedData">
<ak-codemirror <ak-codemirror
mode="yaml" mode=${CodeMirrorMode.YAML}
value="${YAML.stringify(first(this.instance?.fixedData, {}))}" value="${YAML.stringify(first(this.instance?.fixedData, {}))}"
> >
</ak-codemirror> </ak-codemirror>

View File

@ -1,6 +1,7 @@
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import { StageHost } from "@goauthentik/flow/stages/base"; import { StageHost } from "@goauthentik/flow/stages/base";
@ -240,7 +241,9 @@ export class PromptForm extends ModelForm<Prompt, string> {
renderForm(): TemplateResult { renderForm(): TemplateResult {
return html`<div class="pf-l-grid pf-m-gutter"> return html`<div class="pf-l-grid pf-m-gutter">
<div class="pf-l-grid__item pf-m-6-col">${this.renderEditForm()}</div> <div class="pf-l-grid__item pf-m-6-col pf-c-form pf-m-horizontal">
${this.renderEditForm()}
</div>
<div class="pf-l-grid__item pf-m-6-col">${this.renderPreview()}</div> <div class="pf-l-grid__item pf-m-6-col">${this.renderPreview()}</div>
</div> `; </div> `;
} }
@ -386,7 +389,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Placeholder")} name="placeholder"> <ak-form-element-horizontal label=${msg("Placeholder")} name="placeholder">
<ak-codemirror <ak-codemirror
mode="python" mode=${CodeMirrorMode.Python}
value="${ifDefined(this.instance?.placeholder)}" value="${ifDefined(this.instance?.placeholder)}"
@change=${() => { @change=${() => {
this._shouldRefresh = true; this._shouldRefresh = true;
@ -425,19 +428,22 @@ export class PromptForm extends ModelForm<Prompt, string> {
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Initial value")} name="initialValue"> <ak-form-element-horizontal label=${msg("Initial value")} name="initialValue">
<ak-codemirror mode="python" value="${ifDefined(this.instance?.initialValue)}"> <ak-codemirror
mode=${CodeMirrorMode.Python}
value="${ifDefined(this.instance?.initialValue)}"
>
</ak-codemirror> </ak-codemirror>
<p class="pf-c-form__helper-text"> <p class="pf-c-form__helper-text">
${msg( ${msg(
`Optionally pre-fill the input with an initial value. `Optionally pre-fill the input with an initial value.
When creating a fixed choice field, enable interpreting as expression and When creating a fixed choice field, enable interpreting as expression and
return a list to return multiple default choices.`, return a list to return multiple default choices.`,
)}} )}
</p> </p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Help text")} name="subText"> <ak-form-element-horizontal label=${msg("Help text")} name="subText">
<ak-codemirror <ak-codemirror
mode="htmlmixed" mode=${CodeMirrorMode.HTML}
value="${ifDefined(this.instance?.subText)}" value="${ifDefined(this.instance?.subText)}"
@change=${() => { @change=${() => {
this._shouldRefresh = true; this._shouldRefresh = true;

View File

@ -3,6 +3,7 @@ import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/FormGroup"; import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -267,7 +268,7 @@ export class TenantForm extends ModelForm<Tenant, string> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal label=${msg("Attributes")} name="attributes"> <ak-form-element-horizontal label=${msg("Attributes")} name="attributes">
<ak-codemirror <ak-codemirror
mode="yaml" mode=${CodeMirrorMode.YAML}
value="${YAML.stringify(first(this.instance?.attributes, {}))}" value="${YAML.stringify(first(this.instance?.attributes, {}))}"
> >
</ak-codemirror> </ak-codemirror>

View File

@ -3,6 +3,7 @@ import { UserTypeEnum } from "@goauthentik/api/dist/models/UserTypeEnum";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils"; import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/CodeMirror"; import "@goauthentik/elements/CodeMirror";
import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
import "@goauthentik/elements/forms/HorizontalFormElement"; import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm"; import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/Radio"; import "@goauthentik/elements/forms/Radio";
@ -159,7 +160,7 @@ export class UserForm extends ModelForm<User, number> {
name="attributes" name="attributes"
> >
<ak-codemirror <ak-codemirror
mode="yaml" mode=${CodeMirrorMode.YAML}
value="${YAML.stringify( value="${YAML.stringify(
first(this.instance?.attributes, UserForm.defaultUserAttributes), first(this.instance?.attributes, UserForm.defaultUserAttributes),
)}" )}"

View File

@ -18,17 +18,26 @@ import { EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
import { AKElement } from "@goauthentik/elements/Base"; import { AKElement } from "@goauthentik/elements/Base";
import YAML from "yaml"; import YAML from "yaml";
import { CSSResult, css } from "lit";
import { customElement, property } from "lit/decorators.js"; import { customElement, property } from "lit/decorators.js";
import { UiThemeEnum } from "@goauthentik/api"; import { UiThemeEnum } from "@goauthentik/api";
export enum CodeMirrorMode {
XML = "xml",
JavaScript = "javascript",
HTML = "html",
Python = "python",
YAML = "yaml",
}
@customElement("ak-codemirror") @customElement("ak-codemirror")
export class CodeMirrorTextarea<T> extends AKElement { export class CodeMirrorTextarea<T> extends AKElement {
@property({ type: Boolean }) @property({ type: Boolean })
readOnly = false; readOnly = false;
@property() @property()
mode = "yaml"; mode: CodeMirrorMode = CodeMirrorMode.YAML;
@property() @property()
name?: string; name?: string;
@ -45,6 +54,24 @@ export class CodeMirrorTextarea<T> extends AKElement {
themeLight: Extension; themeLight: Extension;
themeDark: 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() @property()
// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types
set value(v: T | string) { set value(v: T | string) {
@ -79,10 +106,10 @@ export class CodeMirrorTextarea<T> extends AKElement {
return this.getInnerValue(); return this.getInnerValue();
} }
try { try {
switch (this.mode.toLowerCase()) { switch (this.mode) {
case "yaml": case CodeMirrorMode.YAML:
return YAML.parse(this.getInnerValue()); return YAML.parse(this.getInnerValue());
case "javascript": case CodeMirrorMode.JavaScript:
return JSON.parse(this.getInnerValue()); return JSON.parse(this.getInnerValue());
default: default:
return this.getInnerValue(); return this.getInnerValue();
@ -115,15 +142,15 @@ export class CodeMirrorTextarea<T> extends AKElement {
getLanguageExtension(): LanguageSupport | undefined { getLanguageExtension(): LanguageSupport | undefined {
switch (this.mode.toLowerCase()) { switch (this.mode.toLowerCase()) {
case "xml": case CodeMirrorMode.XML:
return xml(); return xml();
case "javascript": case CodeMirrorMode.JavaScript:
return javascript(); return javascript();
case "html": case CodeMirrorMode.HTML:
return htmlLang(); return htmlLang();
case "python": case CodeMirrorMode.Python:
return python(); return python();
case "yaml": case CodeMirrorMode.YAML:
return new LanguageSupport(StreamLanguage.define(yamlMode.yaml)); return new LanguageSupport(StreamLanguage.define(yamlMode.yaml));
} }
return undefined; return undefined;