From 45c10722914871baeb62237d43abbd304102dc55 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Tue, 23 Mar 2021 16:06:08 +0100
Subject: [PATCH] web: add execute button to flow view page

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../pages/applications/ApplicationViewPage.ts |  6 ++--
 web/src/pages/flows/FlowViewPage.ts           | 30 +++++++++++++++----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/web/src/pages/applications/ApplicationViewPage.ts b/web/src/pages/applications/ApplicationViewPage.ts
index c4a663dcf..fc888f527 100644
--- a/web/src/pages/applications/ApplicationViewPage.ts
+++ b/web/src/pages/applications/ApplicationViewPage.ts
@@ -75,7 +75,7 @@ export class ApplicationViewPage extends LitElement {
             <ak-tabs>
                 <section slot="page-1" data-tab-title="${gettext("Overview")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                     <div class="pf-l-gallery pf-m-gutter">
-                        <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
+                        <div class="pf-c-card pf-l-gallery__item" style="grid-column-end: span 3;grid-row-end: span 2;">
                             <div class="pf-c-card__title">${gettext("Logins over the last 24 hours")}</div>
                             <div class="pf-c-card__body">
                                 ${this.application && html`
@@ -83,7 +83,7 @@ export class ApplicationViewPage extends LitElement {
                                     </ak-charts-application-authorize>`}
                             </div>
                         </div>
-                        <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-2-col">
+                        <div class="pf-c-card pf-l-gallery__item">
                             <div class="pf-c-card__title">${gettext("Related")}</div>
                             <div class="pf-c-card__body">
                                 <dl class="pf-c-description-list">
@@ -104,7 +104,7 @@ export class ApplicationViewPage extends LitElement {
                                 </dl>
                             </div>
                         </div>
-                        <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
+                        <div class="pf-c-card pf-l-gallery__item" style="grid-column-end: span 3;grid-row-end: span 2;">
                             <div class="pf-c-card__title">${gettext("Changelog")}</div>
                             <div class="pf-c-card__body">
                                 <ak-object-changelog
diff --git a/web/src/pages/flows/FlowViewPage.ts b/web/src/pages/flows/FlowViewPage.ts
index 1f1987e37..329519659 100644
--- a/web/src/pages/flows/FlowViewPage.ts
+++ b/web/src/pages/flows/FlowViewPage.ts
@@ -16,9 +16,8 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import AKGlobal from "../../authentik.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import PFFlex from "@patternfly/patternfly/utilities/Flex/flex.css";
-import PFDisplay from "@patternfly/patternfly/utilities/Display/display.css";
-import PFSizing from "@patternfly/patternfly/utilities/Sizing/sizing.css";
+import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
+import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-flow-view")
 export class FlowViewPage extends LitElement {
@@ -35,7 +34,7 @@ export class FlowViewPage extends LitElement {
     flow!: Flow;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFPage, PFCard, PFContent, PFFlex, PFSizing, PFDisplay, AKGlobal].concat(
+        return [PFBase, PFPage, PFCard, PFContent, PFGallery, AKGlobal].concat(
             css`
                 img.pf-icon {
                     max-height: 24px;
@@ -62,8 +61,8 @@ export class FlowViewPage extends LitElement {
             </section>
             <ak-tabs>
                 <div slot="page-1" data-tab-title="${gettext("Flow Overview")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
-                    <div class="pf-u-display-flex">
-                        <div class="pf-u-w-75">
+                    <div class="pf-l-gallery pf-m-gutter">
+                        <div class="pf-c-card pf-l-gallery__item" style="grid-column-end: span 3;grid-row-end: span 2;">
                             <div class="pf-c-card">
                                 <div class="pf-c-card__body">
                                     <ak-flow-diagram flowSlug=${this.flow.slug}>
@@ -71,6 +70,25 @@ export class FlowViewPage extends LitElement {
                                 </div>
                             </div>
                         </div>
+                        <div class="pf-c-card pf-l-gallery__item">
+                            <div class="pf-c-card__title">${gettext("Related")}</div>
+                            <div class="pf-c-card__body">
+                                <dl class="pf-c-description-list">
+                                    <div class="pf-c-description-list__group">
+                                        <dt class="pf-c-description-list__term">
+                                            <span class="pf-c-description-list__text">${gettext("Execute flow")}</span>
+                                        </dt>
+                                        <dd class="pf-c-description-list__description">
+                                            <div class="pf-c-description-list__text">
+                                                <a class="pf-c-button pf-m-secondary ak-root-link" href="${AdminURLManager.flows(`${this.flow.pk}/execute/?next=/%23${window.location.href}`)}">
+                                                    ${gettext("Execute")}
+                                                </a>
+                                            </div>
+                                        </dd>
+                                    </div>
+                                </dl>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div slot="page-2" data-tab-title="${gettext("Stage Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile">