flows: add diagrams (#415)

* flows: initial diagram implementation

* web: install flowchart.js, add flow diagram page

* web: adjust diagram colours for dark mode

* flows: add permission checks for diagram

* flows: fix formatting

* web: fix formatting for web

* flows: add fix when last stage has policy

* flows: add test for diagram

* web: flows/diagram: add support for light mode

* flows: make Flows's Diagram API return json, add more tests and fix swagger response

web/src/pages/flows/FlowViewPage.ts

@@ -9,6 +9,7 @@ import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/policies/BoundPoliciesList";
 import "./BoundStagesList";
+import "./FlowDiagram";
 
 @customElement("ak-flow-view")
 export class FlowViewPage extends LitElement {
@@ -49,6 +50,12 @@ export class FlowViewPage extends LitElement {
                 </div>
             </section>
             <ak-tabs>
+                <div slot="page-1" data-tab-title="${gettext("Flow Diagram")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
+                    <div class="pf-c-card">
+                        <ak-flow-diagram flowSlug=${this.flow.slug}>
+                        </ak-flow-diagram>
+                    </div>
+                </div>
                 <div slot="page-2" data-tab-title="${gettext("Stage Bindings")}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                     <div class="pf-c-card">
                         <ak-bound-stages-list .target=${this.flow.pk}>