From b3883f7fbfc4e59f07609601e2cdf49512eb2584 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens@goauthentik.io>
Date: Sun, 16 Feb 2025 18:20:55 +0100
Subject: [PATCH] add exec button

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 .../expression/ExpressionPolicyForm.ts        | 100 ++++++++++--------
 1 file changed, 56 insertions(+), 44 deletions(-)

diff --git a/web/src/admin/policies/expression/ExpressionPolicyForm.ts b/web/src/admin/policies/expression/ExpressionPolicyForm.ts
index 139babd6f0..03b57863ba 100644
--- a/web/src/admin/policies/expression/ExpressionPolicyForm.ts
+++ b/web/src/admin/policies/expression/ExpressionPolicyForm.ts
@@ -5,7 +5,7 @@ import { me } from "@goauthentik/common/users";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
 import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
-import "@goauthentik/elements/LoadingOverlay";
+import "@goauthentik/elements/EmptyState";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import YAML from "yaml";
@@ -186,53 +186,65 @@ export class ExpressionPolicyForm extends BasePolicyForm<ExpressionPolicy> {
                             </ak-codemirror>
                         </ak-form-element-horizontal>
                     </div>
+                    <div class="pf-c-card__footer">
+                        <button
+                            class="pf-c-button pf-m-primary"
+                            @click=${() => {
+                                this.refreshPreview();
+                            }}
+                        >
+                            ${msg("Execute")}
+                        </button>
+                    </div>
                 </div>
                 <div class="pf-c-card pf-l-grid__item pf-m-12-col">
                     <div class="pf-c-card__title">${msg("Test results")}</div>
-                    <div class="pf-c-card__body pf-c-form pf-m-horizontal">
-                        <ak-form-element-horizontal label=${msg("Passing")}>
-                            <div class="pf-c-form__group-label">
-                                <div class="c-form__horizontal-group">
-                                    <span class="pf-c-form__label-text">
-                                        <ak-status-label
-                                            ?good=${this.preview?.passing}
-                                        ></ak-status-label>
-                                    </span>
-                                </div>
-                            </div>
-                        </ak-form-element-horizontal>
-                        <ak-form-element-horizontal label=${msg("Messages")}>
-                            <div class="pf-c-form__group-label">
-                                <div class="c-form__horizontal-group">
-                                    <ul>
-                                        ${(this.preview?.messages || []).length > 0
-                                            ? this.preview?.messages?.map((m) => {
-                                                  return html`<li>
-                                                      <span class="pf-c-form__label-text"
-                                                          >${m}</span
-                                                      >
-                                                  </li>`;
-                                              })
-                                            : html`<li>
-                                                  <span class="pf-c-form__label-text">-</span>
-                                              </li>`}
-                                    </ul>
-                                </div>
-                            </div>
-                        </ak-form-element-horizontal>
+                    ${this.previewLoading
+                        ? html`<ak-empty-state loading></ak-empty-state>`
+                        : html`<div class="pf-c-card__body pf-c-form pf-m-horizontal">
+                              <ak-form-element-horizontal label=${msg("Passing")}>
+                                  <div class="pf-c-form__group-label">
+                                      <div class="c-form__horizontal-group">
+                                          <span class="pf-c-form__label-text">
+                                              <ak-status-label
+                                                  ?good=${this.preview?.passing}
+                                              ></ak-status-label>
+                                          </span>
+                                      </div>
+                                  </div>
+                              </ak-form-element-horizontal>
+                              <ak-form-element-horizontal label=${msg("Messages")}>
+                                  <div class="pf-c-form__group-label">
+                                      <div class="c-form__horizontal-group">
+                                          <ul>
+                                              ${(this.preview?.messages || []).length > 0
+                                                  ? this.preview?.messages?.map((m) => {
+                                                        return html`<li>
+                                                            <span class="pf-c-form__label-text"
+                                                                >${m}</span
+                                                            >
+                                                        </li>`;
+                                                    })
+                                                  : html`<li>
+                                                        <span class="pf-c-form__label-text">-</span>
+                                                    </li>`}
+                                          </ul>
+                                      </div>
+                                  </div>
+                              </ak-form-element-horizontal>
 
-                        <ak-form-element-horizontal label=${msg("Log messages")}>
-                            <div class="pf-c-form__group-label">
-                                <div class="c-form__horizontal-group">
-                                    <dl class="pf-c-description-list pf-m-horizontal">
-                                        <ak-log-viewer
-                                            .logs=${this.preview?.logMessages}
-                                        ></ak-log-viewer>
-                                    </dl>
-                                </div>
-                            </div>
-                        </ak-form-element-horizontal>
-                    </div>
+                              <ak-form-element-horizontal label=${msg("Log messages")}>
+                                  <div class="pf-c-form__group-label">
+                                      <div class="c-form__horizontal-group">
+                                          <dl class="pf-c-description-list pf-m-horizontal">
+                                              <ak-log-viewer
+                                                  .logs=${this.preview?.logMessages}
+                                              ></ak-log-viewer>
+                                          </dl>
+                                      </div>
+                                  </div>
+                              </ak-form-element-horizontal>
+                          </div>`}
                 </div>
                 ${this.previewError
                     ? html`