Pull request finos#402: Svg diagrams admin page

Merge in WALTZ/waltz from ~ZARA.OKOYE_DB.COM/waltz-zo:CTCTOWALTZ-3382-static-diagrams-7155 to db-feature/waltz-7155-diagrams

* commit 'ad71e592393d1fcc840b3d5d08981c7c8fc52f22':
  Static Diagrams Admin Page - Viewlink ammend
  Static Diagrams Admin Page - added getById to SvgDiagramEndpoint - Created page in system admin to view and edit static diagrams - Route to static diagram page via ID - capability to add and delete new static diagram - filled in help blocks (add help for where to find magic group names)

waltz-ng/client/common/svelte/ViewLink.svelte

@@ -125,6 +125,14 @@
             path: ctx => `server/${ctx.id}`,
             title: "Server View"
         },
+        "main.system.static-diagrams": {
+            path: () => `system/static-diagrams`,
+            title: "Static Diagrams"
+        },
+        "main.system.static-diagram": {
+            path: () => `system/static-diagrams/${ctx.id}`,
+            title: ""
+        },
         "main.survey.instance.view": {
             path: ctx => `survey/instance/${ctx.id}/response/view`,
             title: "Survey View"

waltz-ng/client/svelte-stores/svg-diagram-store.js

@@ -10,6 +10,13 @@ export function mkSvgDiagramStore() {
             [],
             {force});
 
+    const getById = (diagramId, force) => remote
+        .fetchAppList(
+            "GET",
+            `api/svg-diagram/${diagramId}`,
+            [],
+            {force});
+
     const save = (diagram) => remote
         .execute(
             "POST",
@@ -23,6 +30,7 @@ export function mkSvgDiagramStore() {
 
     return {
         findAll,
+        getById,
         save,
         remove
     };

waltz-ng/client/system/routes.js

@@ -27,6 +27,8 @@ import RecalculateView from "./recalculate-view";
 import ActorsView from "./actors-view";
 import EntityNamedNoteTypesView from "./entity-named-node-types-view";
 import StaticPanelsView from "./static-panels-view";
+import StaticDiagramsView from "./static-diagrams-view";
+import StaticDiagramView from "./static-diagram-view";
 import AssessmentDefinitionsView from "./assessment-defintions-view";
 import RatingSchemesView from "./rating-schemes-view";
 import EudaListView from "./euda-list-view";
@@ -102,6 +104,15 @@ const staticPanelsState = {
     views: {"content@": StaticPanelsView}
 };
 
+const staticDiagramsState = {
+    url: "/static-diagrams",
+    views: {"content@": StaticDiagramsView}
+}
+
+const staticDiagramState = {
+    url: "/static-diagrams/{id:int}",
+    views: {"content@": StaticDiagramView}
+}
 
 const assessmentDefintionsState = {
     url: "/assessment-definitions",
@@ -214,6 +225,8 @@ function setupRoutes($stateProvider) {
         .state("main.system.recalculate", recalculateState)
         .state("main.system.relationship-kinds", relationshipKindsState)
         .state("main.system.settings", settingsState)
+        .state("main.system.static-diagrams", staticDiagramsState)
+        .state("main.system.static-diagram", staticDiagramState)
         .state("main.system.static-panels", staticPanelsState)
         .state("main.system.version-info", versionInfoState);
 }

waltz-ng/client/system/static-diagram-view.html

@@ -0,0 +1,21 @@
+<!--
+  ~ Waltz - Enterprise Architecture
+  ~ Copyright (C) 2016, 2017, 2018, 2019 Waltz open source project
+  ~ See README.md for more information
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific
+  ~
+  -->
+
+<waltz-svelte-component component="$ctrl.StaticDiagram" diagram-id="$ctrl.diagramId">
+
+</waltz-svelte-component>

waltz-ng/client/system/static-diagram-view.js

@@ -0,0 +1,42 @@
+/*
+ * Waltz - Enterprise Architecture
+ * Copyright (C) 2016, 2017, 2018, 2019 Waltz open source project
+ * See README.md for more information
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific
+ *
+ */
+import template from './static-diagram-view.html';
+
+import StaticDiagram from "./svelte/static-diagrams/StaticDiagram.svelte"
+import {initialiseData} from '../common';
+
+const initialState = {
+    StaticDiagram
+};
+
+function controller($stateParams) {
+    const vm = initialiseData(this, initialState);
+
+    vm.diagramId = $stateParams.id;
+}
+
+controller.$inject = ["$stateParams"];
+
+const page = {
+    controller,
+    template,
+    controllerAs: '$ctrl'
+};
+
+
+export default page;

waltz-ng/client/system/static-diagrams-view.html

@@ -0,0 +1,19 @@
+<!--
+  ~ Waltz - Enterprise Architecture
+  ~ Copyright (C) 2016, 2017, 2018, 2019 Waltz open source project
+  ~ See README.md for more information
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific
+  ~
+  -->
+
+<waltz-svelte-component component="$ctrl.StaticDiagramsAdminView"></waltz-svelte-component>

waltz-ng/client/system/static-diagrams-view.js

@@ -0,0 +1,39 @@
+/*
+ * Waltz - Enterprise Architecture
+ * Copyright (C) 2016, 2017, 2018, 2019 Waltz open source project
+ * See README.md for more information
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific
+ *
+ */
+import template from './static-diagrams-view.html';
+
+import StaticDiagramsAdminView from "./svelte/static-diagrams/StaticDiagramsAdminView.svelte"
+import {initialiseData} from '../common';
+
+
+const initialState = {
+    StaticDiagramsAdminView
+};
+
+
+function controller() {
+    initialiseData(this, initialState);
+}
+
+const page = {
+    controller,
+    template,
+    controllerAs: '$ctrl'
+};
+
+export default page;

waltz-ng/client/system/svelte/static-diagrams/StaticDiagram.svelte

@@ -0,0 +1,196 @@
+<script>
+    import _ from "lodash";
+    import PageHeader from "../../../common/svelte/PageHeader.svelte";
+    import ViewLink from "../../../common/svelte/ViewLink.svelte";
+    import {svgDiagramStore} from "../../../svelte-stores/svg-diagram-store";
+    import toasts from "../../../svelte-stores/toast-store";
+    import { displayError } from "../../../common/error-utils";
+    import pageInfo from "../../../svelte-stores/page-navigation-store";
+    
+
+    export let diagramId;
+    let blankDiagram = {name: "", group: "", priority: 1, keyProperty: "none", svg: "<h1>Change me. You can use HTML or SVG code</h1>"};
+    let diagram = blankDiagram;
+    let diagramLoadCall = null;
+    let invalid = true;
+
+    function goToAdminView() {
+        $pageInfo = {
+            state: "main.system.static-diagrams"
+        };
+    }
+
+    function doSave(diagram) {
+        return svgDiagramStore
+            .save(diagram)
+            .then(() => {
+                goToAdminView();
+                svgDiagramStore.findAll(true);
+                if (isEdit){
+                    toasts.success(`${diagram.group}: ${diagram.name} has been updated successfully`)
+                } else {
+                    toasts.success(`${diagram.group}: ${diagram.name} has been created successfully`)
+                }})
+            .catch(e => {
+                displayError("Could not save diagram", e)
+            });        
+    }
+
+    $: isNew = diagramId && diagramId === -1;
+
+    $: isEdit = diagramId && diagramId >= 0;
+
+    $: { 
+        if (isEdit){
+            diagramLoadCall = svgDiagramStore.getById(diagramId)
+        }
+    };
+
+    $: diagram = $diagramLoadCall?.data || blankDiagram;
+
+    $: {
+        const badTextFields = _.some(
+            [diagram.group, diagram.name], 
+            v => _.isEmpty(v));
+
+        invalid = badTextFields || diagram.priority <= 0;
+    };
+
+</script>
+
+
+<PageHeader icon="picture-o"
+            name="Static Diagram">
+    <div slot="breadcrumbs">
+        <ol class="waltz-breadcrumbs">
+            <li><ViewLink state="main">Home</ViewLink></li>
+            <li><ViewLink state="main.system.list">System Admin</ViewLink></li>
+            <li><ViewLink state="main.system.static-diagrams">Static Diagrams</ViewLink></li>
+            <li>{diagram ? diagram.name : ""}</li>
+        </ol>
+    </div>
+</PageHeader>
+
+<div class="waltz-page-summary waltz-page-summary-attach">
+    <div class="row">
+        <div class="col-md-12">
+
+            {#if diagram}
+            <form autocomplete="off">
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label for="group">
+                                Group
+                                <small class="text-muted">(required)</small>
+                            </label>
+                            <br/>
+                            <input class="form-control" 
+                                    id="group"
+                                    required="required"
+                                    placeholder="Group e.g., NAVAID.MEASURABLE.33"
+                                    bind:value={diagram.group}>
+                            <div class="help-block">
+                                Group determines what screen the diagram will appear. Some example naming conventions include
+                                <ul>
+                                    <li>DATA_TYPE to appear on the Data screen</li>
+                                    <li>ORG_TREE to appear on the People screen</li>
+                                    <li>ORG_UNIT to appear on the Org Units screen</li>
+                                    <li>NAVAID.MEASURABLE.id to appear on one of the measurable screens, where id denotes the category (which can be found in the url of the category)</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label for="desc">
+                                Description
+                            </label>
+                            <br/>
+                            <input class="form-control"
+                                    id="desc" 
+                                    placeholder="Description"
+                                    bind:value={diagram.description}>
+                            <div class="help-block">Description of this diagram</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label for="name">
+                                Name
+                                <small class="text-muted">(required)</small>
+                            </label>
+                            <br/>
+                            <input class="form-control" 
+                                    id="name" 
+                                    required="required"
+                                    placeholder="Name"
+                                    bind:value={diagram.name}>
+                            <div class="help-block">Short name that describes this diagram</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label for="priority">
+                                Priority
+                                <small class="text-muted">(required)</small>
+                            </label>
+                            <br/>
+                            <input class="form-control" 
+                                    type="number" 
+                                    id="priority"
+                                    required="required"
+                                    bind:value={diagram.priority}>
+                            <div class="help-block">If multiple diagrams belong to the same group, priority will be used to order them (ascending, where 1 is the highest priority)</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-md-12">
+                        <div class="form-group">
+                            <label for="svg">
+                                Diagram Content
+                                <small class="text-muted">(required)</small>
+                            </label>
+                            <br/>
+                            <textarea class="form-control" 
+                                      id="svg" 
+                                      rows="10" 
+                                      bind:value={diagram.svg}></textarea>
+                            <div class="help-block">HTML or SVG code, any paths will be resolved against the context root of this waltz installation, e.g., /waltz</div>
+                        </div>
+                    </div>
+                </div>
+                <button type="submit" 
+                        class="btn btn-success"
+                        disabled={invalid}
+                        on:click|preventDefault={() => doSave(diagram)}>
+                    {isNew? "Create" : "Update"}
+                </button>
+
+                <button type="submit" 
+                        class="btn btn-link" 
+                        on:click|preventDefault={() => goToAdminView()}>
+                    Cancel
+                </button>
+            </form>
+            {:else}
+                <h1>not found</h1>
+            {/if}
+        </div>
+    </div>
+</div>    
+
+<style>
+    input:invalid {
+        border: 2px solid red;
+    }
+
+    textarea:invalid {
+        border: 2px solid red;
+    }
+</style>