web/admin: widen prompt form (#10615)

* web/admin: make prompt form wider

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

* unrelated vscode settings

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

---------

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

.vscode/extensions.json

@@ -16,6 +16,6 @@
         "ms-python.black-formatter",
         "redhat.vscode-yaml",
         "Tobermory.es6-string-html",
-        "unifiedjs.vscode-mdx",
+        "unifiedjs.vscode-mdx"
     ]
 }

.vscode/launch.json

@@ -22,6 +22,6 @@
             },
             "justMyCode": true,
             "django": true
-        },
+        }
     ]
 }

.vscode/settings.json

@@ -18,7 +18,7 @@
         "sso",
         "totp",
         "traefik",
-        "webauthn",
+        "webauthn"
     ],
     "todo-tree.tree.showCountsInTree": true,
     "todo-tree.tree.showBadges": true,
@@ -48,9 +48,7 @@
             "ignoreCase": false
         }
     ],
-    "go.testFlags": [
+    "go.testFlags": ["-count=1"],
-        "-count=1"
-    ],
     "github-actions.workflows.pinned.workflows": [
         ".github/workflows/ci-main.yml"
     ]

.vscode/tasks.json

@@ -2,85 +2,67 @@
     "version": "2.0.0",
     "tasks": [
         {
-            "label": "authentik[core]: format & test",
+            "label": "authentik/core: make",
             "command": "poetry",
-            "args": [
+            "args": ["run", "make", "lint-fix", "lint"],
-                "run",
+            "presentation": {
-                "make"
+                "panel": "new"
-            ],
+            },
-            "group": "build",
+            "group": "test"
         },
         {
-            "label": "authentik[core]: run",
+            "label": "authentik/core: run",
             "command": "poetry",
-            "args": [
+            "args": ["run", "ak", "server"],
-                "run",
-                "make",
-                "run",
-            ],
             "group": "build",
             "presentation": {
                 "panel": "dedicated",
                 "group": "running"
-            },
+            }
         },
         {
-            "label": "authentik[web]: format",
+            "label": "authentik/web: make",
             "command": "make",
             "args": ["web"],
-            "group": "build",
+            "group": "build"
         },
         {
-            "label": "authentik[web]: watch",
+            "label": "authentik/web: watch",
             "command": "make",
             "args": ["web-watch"],
             "group": "build",
             "presentation": {
                 "panel": "dedicated",
                 "group": "running"
-            },
+            }
         },
         {
             "label": "authentik: install",
             "command": "make",
-            "args": ["install"],
+            "args": ["install", "-j4"],
-            "group": "build",
+            "group": "build"
         },
         {
-            "label": "authentik: i18n-extract",
+            "label": "authentik/website: make",
-            "command": "poetry",
-            "args": [
-                "run",
-                "make",
-                "i18n-extract"
-            ],
-            "group": "build",
-        },
-        {
-            "label": "authentik[website]: format",
             "command": "make",
             "args": ["website"],
-            "group": "build",
+            "group": "build"
         },
         {
-            "label": "authentik[website]: watch",
+            "label": "authentik/website: watch",
             "command": "make",
             "args": ["website-watch"],
             "group": "build",
             "presentation": {
                 "panel": "dedicated",
                 "group": "running"
-            },
+            }
         },
         {
-            "label": "authentik[api]: generate",
+            "label": "authentik/api: generate",
             "command": "poetry",
-            "args": [
+            "args": ["run", "make", "gen"],
-                "run",
-                "make",
-                "gen"
-            ],
             "group": "build"
-        },
+        }
     ]
 }

web/src/admin/stages/prompt/PromptListPage.ts

@@ -1,6 +1,7 @@
 import "@goauthentik/admin/rbac/ObjectPermissionModal";
 import "@goauthentik/admin/stages/prompt/PromptForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { PFSize } from "@goauthentik/common/enums";
 import "@goauthentik/elements/buttons/ModalButton";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import "@goauthentik/elements/forms/DeleteBulkForm";
@@ -85,7 +86,7 @@ export class PromptListPage extends TablePage<Prompt> {
             html`${item.promptstageSet?.map((stage) => {
                 return html`<li>${stage.name}</li>`;
             })}`,
-            html`<ak-forms-modal>
+            html`<ak-forms-modal size=${PFSize.XLarge}>
                     <span slot="submit"> ${msg("Update")} </span>
                     <span slot="header"> ${msg("Update Prompt")} </span>
                     <ak-prompt-form slot="form" .instancePk=${item.pk}> </ak-prompt-form>
@@ -105,7 +106,7 @@ export class PromptListPage extends TablePage<Prompt> {
 
     renderObjectCreate(): TemplateResult {
         return html`
-            <ak-forms-modal>
+            <ak-forms-modal size=${PFSize.XLarge}>
                 <span slot="submit"> ${msg("Create")} </span>
                 <span slot="header"> ${msg("Create Prompt")} </span>
                 <ak-prompt-form slot="form"> </ak-prompt-form>

web/src/admin/stages/prompt/PromptStageForm.ts

@@ -1,6 +1,7 @@
 import { BaseStageForm } from "@goauthentik/admin/stages/BaseStageForm";
 import "@goauthentik/admin/stages/prompt/PromptForm";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
+import { PFSize } from "@goauthentik/common/enums";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/ModalForm";
@@ -94,7 +95,7 @@ export class PromptStageForm extends BaseStageForm<PromptStage> {
                             ${msg("Hold control/command to select multiple items.")}
                         </p>
                         ${this.instance
-                            ? html`<ak-forms-modal>
+                            ? html`<ak-forms-modal size=${PFSize.XLarge}>
                                   <span slot="submit"> ${msg("Create")} </span>
                                   <span slot="header"> ${msg("Create Prompt")} </span>
                                   <ak-prompt-form slot="form"> </ak-prompt-form>

web/src/elements/buttons/ModalButton.ts

@@ -66,6 +66,9 @@ export class ModalButton extends AKElement {
                 .locked {
                     overflow-y: hidden !important;
                 }
+                .pf-c-modal-box.pf-m-xl {
+                    --pf-c-modal-box--Width: calc(1.5 * var(--pf-c-modal-box--m-lg--lg--MaxWidth));
+                }
             `,
         ];
     }