feature (admin): improve admin ux

public/assets/boot/router_backoffice.js

@@ -1,6 +1,7 @@
 const routes = {
     "/admin/backend": "/pages/adminpage/ctrl_backend.js",
     "/admin/settings": "/pages/adminpage/ctrl_settings.js",
+    "/admin/workflow.*": "/pages/adminpage/ctrl_workflow.js",
     "/admin/logs": "/pages/adminpage/ctrl_log.js",
     "/admin/about": "/pages/adminpage/ctrl_about.js",
     "/admin/setup": "/pages/adminpage/ctrl_setup.js",

public/assets/css/designsystem_formbuilder.css

@@ -19,8 +19,9 @@
 }
 .formbuilder fieldset legend {
     text-transform: uppercase;
-    font-weight: 200;
-    font-size: 1em;
+    color: var(--light);
+    opacity: 0.9;
+    font-size: 1.1em;
     padding: 0 15px;
 }
 .formbuilder .fileupload-image img {

public/assets/pages/adminpage/ctrl_backend.css

@@ -1,7 +1,8 @@
 .component_dashboard .box-container {
     display: flex;
     flex-wrap: wrap;
-    margin: 0px 0px 20px 0px;
+    margin-left: -3px;
+    margin-right: -3px;
 }
 .component_dashboard .box-container .box-item {
     position: relative;
@@ -29,7 +30,7 @@
     margin: 3px;
     padding: 30px 0;
     text-align: center;
-    color: rgba(0, 0, 0, 0.3);
+    color: var(--light);
     text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
     font-size: 1.1em;
     text-transform: uppercase;
@@ -133,3 +134,47 @@
     position: relative;
     top: 5px;
 }
+
+.component_dashboard [data-bind="idp"] > .formbuilder > fieldset > legend {
+    display: none;
+}
+.component_dashboard [data-bind="attribute-mapping"] > .formbuilder > fieldset > legend {
+    color: var(--color);
+    font-weight: 600;
+    font-size: 1.15rem;
+    display: contents;
+    text-transform: none;
+}
+.component_dashboard [data-bind="attribute-mapping"] > .formbuilder > fieldset > legend:before {
+    content: " ";
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    background: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3ZnLWljb24iIHN0eWxlPSJmaWxsOiAjNTc1OTVBIiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTc2LjgxODM0NyA5ODEuMzMzMzMzYTE4OC4zMzA2NjcgMTg4LjMzMDY2NyAwIDAgMS01Ny42LTEyLjhBNTcuMzQ0IDU3LjM0NCAwIDAgMSAwLjAxODM0NyA5MjQuMjQ1MzMzYTU0LjYxMzMzMyA1NC42MTMzMzMgMCAwIDEgMTkuMi0zOC4wNTg2NjYgOTEuNTIgOTEuNTIgMCAwIDEgMzguNC0xMi44aDMyYzE5LjIgMCAzOC40IDYuMzU3MzMzIDY0IDYuMzU3MzMzYTY5LjQxODY2NyA2OS40MTg2NjcgMCAwIDAgNTEuMi0xMi44IDI5Ny40NzIgMjk3LjQ3MiAwIDAgMCAzOC40LTk1LjE0NjY2N2w4OS42LTM2MS41MTQ2NjZIMjI0LjAxODM0N2wxOS4yLTY5Ljc2aDExNS4ydi0xMi44YTQyOC45NzA2NjcgNDI4Ljk3MDY2NyAwIDAgMSA1MS4yLTE1Mi4yMzQ2NjcgMjQzLjIgMjQzLjIgMCAwIDEgMTAyLjQtOTUuMTQ2NjY3IDM4OC42MDggMzg4LjYwOCAwIDAgMSAxMjEuNi0zOC4wNTg2NjYgMTIxLjQyOTMzMyAxMjEuNDI5MzMzIDAgMCAxIDUxLjIgMTIuOCA1Ny4zNDQgNTcuMzQ0IDAgMCAxIDE5LjIgNDQuNDE2IDg5LjYgODkuNiAwIDAgMS0xMi44IDM4LjA1ODY2NiA5MS41MiA5MS41MiAwIDAgMS0zOC40IDEyLjggMjI5LjIwNTMzMyAyMjkuMjA1MzMzIDAgMCAxLTY0LTEyLjhjLTEyLjggMC0xOS4yLTYuMzU3MzMzLTMyLTYuMzU3MzMzYTY2LjI2MTMzMyA2Ni4yNjEzMzMgMCAwIDAtNDQuOCAzMS43MDEzMzMgNTU0LjY2NjY2NyA1NTQuNjY2NjY3IDAgMCAwLTMyIDk1LjE0NjY2N2wtMjUuNiA4Mi40MzIgMjc1LjItNi4zNTczMzNoNi40YTU1LjQ2NjY2NyA1NS40NjY2NjcgMCAwIDEgMzguNCAxOS4wMjkzMzMgNDM0LjUxNzMzMyA0MzQuNTE3MzMzIDAgMCAxIDE5LjIgNTAuNzMwNjY3bDYuNCAyNS4zODY2NjYgMTkuMi0yNS4zODY2NjZhMzAyLjAzNzMzMyAzMDIuMDM3MzMzIDAgMCAxIDY0LTYzLjQwMjY2NyAxOTkuMTY4IDE5OS4xNjggMCAwIDEgODMuMi0zOC4wNTg2NjcgOTEuNTIgOTEuNTIgMCAwIDEgMzguNCAxMi44IDQyLjExMiA0Mi4xMTIgMCAwIDEgMCA2My40MDI2NjdsLTYuNCA2LjM1NzMzM2MtNi40IDYuMzU3MzMzLTE5LjIgMTIuOC01Ny42IDEyLjhhNzMuMDQ1MzMzIDczLjA0NTMzMyAwIDAgMC01MS4yIDE5LjAyOTMzNEE0MzcuNzE3MzMzIDQzNy43MTczMzMgMCAwIDAgODE5LjIxODM0NyA0OTkuMnYxMi44bDI1LjYgMTMzLjIwNTMzM2MxMi44IDUwLjczMDY2NyA0NC44IDEwMS40NjEzMzMgNjQgMTAxLjQ2MTMzNHMxOS4yLTEyLjggMjUuNi0xOS4wMjkzMzR2LTYuMzU3MzMzYTY3LjQ5ODY2NyA2Ny40OTg2NjcgMCAwIDEgNDQuOC0zOC4wNTg2NjdjMTIuOCAwIDE5LjIgNi4zNTczMzMgMzIgMTIuOGE0OC4yMTMzMzMgNDguMjEzMzMzIDAgMCAxIDEyLjggMzEuNzAxMzM0IDY2LjQ3NDY2NyA2Ni40NzQ2NjcgMCAwIDEtMzIgNTcuMDg4IDk2Ljc2OCA5Ni43NjggMCAwIDEtNzAuNCAyNS4zODY2NjYgMTU3Ljg2NjY2NyAxNTcuODY2NjY3IDAgMCAxLTEwMi40LTM4LjA1ODY2NiAzNTYuNzM2IDM1Ni43MzYgMCAwIDEtNzAuNC0xMjYuODQ4bC02LjQtMjUuMzg2NjY3LTE5LjIgMTkuMDI5MzMzQTY0MS41Nzg2NjcgNjQxLjU3ODY2NyAwIDAgMSA2NDAuMDE4MzQ3IDc0MC4zMDkzMzNhOTYuNzY4IDk2Ljc2OCAwIDAgMS03MC40IDI1LjM4NjY2NyA1OC4zNjggNTguMzY4IDAgMCAxLTQ0LjgtMTkuMDI5MzMzIDU0LjYxMzMzMyA1NC42MTMzMzMgMCAwIDEtMTkuMi0zOC4wNTg2NjcgNDYuMzM2IDQ2LjMzNiAwIDAgMSAxMi44LTM4LjA1ODY2N2M2LjQtMTIuOCAxOS4yLTEyLjggMzItMTIuOGE0NS43Mzg2NjcgNDUuNzM4NjY3IDAgMCAxIDM4LjQgMTkuMDI5MzM0bDYuNCAxMi44IDEyLjgtNi4zNTczMzQgMTkuMi0xOS4wMjkzMzNhMzE4LjU0OTMzMyAzMTguNTQ5MzMzIDAgMCAwIDQ0LjgtNTAuNzMwNjY3bDU3LjYtODIuNDMyLTI1LjYtMTIwLjQ5MDY2Ni0yNTYtNi4zNTczMzQtNzAuNCAyODUuMzk3MzM0YTUzMC41MTczMzMgNTMwLjUxNzMzMyAwIDAgMS0xMDguOCAyMTUuNjM3MzMzQTMxNy43Mzg2NjcgMzE3LjczODY2NyAwIDAgMSA3Ni44MTgzNDcgOTgxLjMzMzMzM3oiICAvPjwvc3ZnPgo=);
+    background-repeat: no-repeat;
+    margin-right: 10px;
+    position: relative;
+    top: 3px;
+}
+.component_dashboard [data-bind="attribute-mapping"] > .formbuilder > fieldset {
+    padding: 15px;
+}
+.component_dashboard [data-bind="attribute-mapping"] > .formbuilder > fieldset > legend:after {
+    content: " ";
+    display: block;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+    margin: 10px 0 15px 0;
+}
+/*
+.component_dashboard [data-bind="authentication_middleware"] form fieldset legend {
+    font-weight: bold;
+}
+.component_dashboard [data-bind="authentication_middleware"] form fieldset fieldset legend {
+    background: var(--border);
+    color: var(--light);
+    font-weight: normal;
+    border-radius: 5px;
+    border: 2px solid var(--border);
+    font-size: 1.05rem;
+}
+*/

public/assets/pages/adminpage/ctrl_log.js

@@ -10,7 +10,7 @@ import AdminHOC from "./decorator.js";
 export default AdminHOC(async function(render) {
     const $page = createElement(`
         <div class="component_logpage sticky">
-            <h2>Logging</h2>
+            <h2>Events</h2>
             <div class="component_logviewer"></div>
             <div class="component_logger"></div>
 

public/assets/pages/adminpage/ctrl_workflow.css

@@ -0,0 +1,65 @@
+.component_page_workflow .pull-right {
+    float: right;
+}
+.component_page_workflow .box {
+    display: block;
+    background: white;
+    border: 2px solid #ebebec;
+    border-style: solid;
+    border-radius: 5px;
+    margin: 15px 0 0 0;
+    padding: 15px;
+    overflow: visible;
+}
+.component_page_workflow .box.status-unpublished {
+    background: var(--border);
+}
+.component_page_workflow .box h3 {
+    font-weight: 600;
+    margin: 0;
+}
+.component_page_workflow .box h3 span {
+    font-weight: 300;
+    font-size: 0.95rem;
+    font-style: italic;
+    color: var(--light);
+}
+.component_page_workflow button {
+    font-size: 0.9rem;
+    padding: 3px 5px;
+    margin: 0 2px;
+}
+.component_page_workflow .box svg {
+    float: left;
+    width: 25px;
+    margin-right: 10px;
+    fill: var(--light);
+}
+.component_page_workflow button.box {
+    padding: 5px 10px;
+    background: var(--light);
+    color: var(--bg-color);
+}
+.component_page_workflow .box .workflow-summary button {
+    color: var(--light);
+}
+
+.component_page_workflow hr {
+    border: none;
+    height: 30px;
+    margin: 0 0 -15px 0;
+    position: relative;
+}
+.component_page_workflow hr:after {
+    content: " ";
+    position: absolute;
+    left: 20px;
+    top: 0;
+    bottom: 0;
+    border-right: 4px dashed rgba(0, 0, 0, 0.15);
+    border-right-style: dotted;
+}
+
+.component_page_admin .page_container a:hover {
+    opacity: 1;
+}

public/assets/pages/adminpage/ctrl_workflow.js

@@ -0,0 +1,38 @@
+import { createElement } from "../../lib/skeleton/index.js";
+import { loadCSS } from "../../helpers/loader.js";
+
+import AdminHOC from "./decorator.js";
+import ctrlList from "./ctrl_workflow_list.js";
+import ctrlDetails from "./ctrl_workflow_details.js";
+
+const mockWorkflows = [
+    {
+        id: "uuid",
+        name: "Notify team when file uploaded",
+        description: "Send notification to #general when any file is uploaded to /shared",
+        status: "published",
+        lastEdited: "2 days ago",
+        trigger: "File uploaded",
+        action: "Send notification"
+    },
+    {
+        id: "uuid",
+        name: "Notify team when file uploaded",
+        description: "Send notification to #general when any file is uploaded to /shared",
+        status: "unpublished",
+        lastEdited: "2 days ago",
+        trigger: "File uploaded",
+        action: "Send notification"
+    },
+];
+
+export default AdminHOC(async function(render) {
+    const id = new URLSearchParams(location.search).get("id");
+
+    await loadCSS(import.meta.url, "./ctrl_workflow.css");
+    render(createElement("<component-loader inlined></component-loader>"));
+    await new Promise((done) => setTimeout(() => done(), 100));
+
+    if (id) ctrlDetails(render, mockWorkflows[0]);
+    else ctrlList(render, mockWorkflows);
+});

public/assets/pages/adminpage/ctrl_workflow_details.js

@@ -0,0 +1,52 @@
+import { createElement } from "../../lib/skeleton/index.js";
+
+import transition from "./animate.js";
+
+export default async function(render, { name }) {
+    const $page = createElement(`
+        <div class="component_page_workflow">
+            <h2 class="ellipsis">
+                <a href="./admin/workflow" data-link>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="width:20px;fill:var(--color);">
+                        <path d="M169.4 297.4C156.9 309.9 156.9 330.2 169.4 342.7L361.4 534.7C373.9 547.2 394.2 547.2 406.7 534.7C419.2 522.2 419.2 501.9 406.7 489.4L237.3 320L406.6 150.6C419.1 138.1 419.1 117.8 406.6 105.3C394.1 92.8 373.8 92.8 361.3 105.3L169.3 297.3z"/>
+                    </svg>
+                </a>
+                ${name}
+            </h2>
+            <div data-bind="workflow">
+                <div class="box status-unpublished">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M528 320C528 434.9 434.9 528 320 528C205.1 528 112 434.9 112 320C112 205.1 205.1 112 320 112C434.9 112 528 205.1 528 320zM64 320C64 461.4 178.6 576 320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320zM296 184L296 320C296 328 300 335.5 306.7 340L402.7 404C413.7 411.4 428.6 408.4 436 397.3C443.4 386.2 440.4 371.4 429.3 364L344 307.2L344 184C344 170.7 333.3 160 320 160C306.7 160 296 170.7 296 184z"/></svg>
+                    <h3 class="ellipsis no-select">On a Schedule <span>(every day)</span></h3>
+                </div>
+                <hr>
+                <div class="box status-published">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M96 160C96 124.7 124.7 96 160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160zM240 164C215.7 164 196 183.7 196 208L196 256C196 280.3 215.7 300 240 300L272 300C296.3 300 316 280.3 316 256L316 208C316 183.7 296.3 164 272 164L240 164zM236 208C236 205.8 237.8 204 240 204L272 204C274.2 204 276 205.8 276 208L276 256C276 258.2 274.2 260 272 260L240 260C237.8 260 236 258.2 236 256L236 208zM376 164C365 164 356 173 356 184C356 193.7 362.9 201.7 372 203.6L372 280C372 291 381 300 392 300C403 300 412 291 412 280L412 184C412 173 403 164 392 164L376 164zM228 360C228 369.7 234.9 377.7 244 379.6L244 456C244 467 253 476 264 476C275 476 284 467 284 456L284 360C284 349 275 340 264 340L248 340C237 340 228 349 228 360zM324 384L324 432C324 456.3 343.7 476 368 476L400 476C424.3 476 444 456.3 444 432L444 384C444 359.7 424.3 340 400 340L368 340C343.7 340 324 359.7 324 384zM368 380L400 380C402.2 380 404 381.8 404 384L404 432C404 434.2 402.2 436 400 436L368 436C365.8 436 364 434.2 364 432L364 384C364 381.8 365.8 380 368 380z"/></svg>
+                    <h3 class="ellipsis">Execute Program <span>(duplicate)</span></h3>
+
+                    <div style="margin-top: 10px;padding: 10px 0 0 0; border-top: 2px solid rgba(0, 0, 0, 0.1);">
+                        <div class="flex">
+                            <span class="ellipsis">Frequency:</span>
+                            <div style="width:100%;"><select class="component_select" name="params.level" id="log_level"><option name="DEBUG" selected="">DEBUG</option><option name="INFO">INFO</option><option name="WARNING">WARNING</option><option name="ERROR">ERROR</option></select></div>
+                        </div>
+                        <div class="flex">
+                            <span class="ellipsis">Frequency:</span>
+                            <div style="width:100%;"><select class="component_select" name="params.level" id="log_level"><option name="DEBUG" selected="">DEBUG</option><option name="INFO">INFO</option><option name="WARNING">WARNING</option><option name="ERROR">ERROR</option></select></div>
+                        </div>
+                    </div>
+
+                </div>
+                <hr>
+                <div class="box status-published">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M112 128C85.5 128 64 149.5 64 176C64 191.1 71.1 205.3 83.2 214.4L291.2 370.4C308.3 383.2 331.7 383.2 348.8 370.4L556.8 214.4C568.9 205.3 576 191.1 576 176C576 149.5 554.5 128 528 128L112 128zM64 260L64 448C64 483.3 92.7 512 128 512L512 512C547.3 512 576 483.3 576 448L576 260L377.6 408.8C343.5 434.4 296.5 434.4 262.4 408.8L64 260z"/></svg>
+                    <h3 class="ellipsis">Notify <span>(john@example.com)</span></h3>
+                </div>
+                <hr>
+                <button class="box">+ Add step</button>
+            </div>
+            <style>
+                .component_page_admin .page_container h2:after { display: none; }
+            </style>
+        </div>
+    `);
+    render(transition($page));
+}

public/assets/pages/adminpage/ctrl_workflow_list.js

@@ -0,0 +1,41 @@
+import { createElement } from "../../lib/skeleton/index.js";
+import rxjs, { effect, onClick } from "../../lib/rx.js";
+import { qs } from "../../lib/dom.js";
+import { createModal } from "../../components/modal.js";
+
+import transition from "./animate.js";
+
+export default async function(render, workflows) {
+    const $page = createElement(`
+        <div class="component_page_workflow">
+            <h2>
+                Workflows
+                <a class="pull-right pointer no-select">+</a>
+            </h2>
+            <div data-bind="workflows"><Loader /></div>
+        </div>
+    `);
+    render(transition($page));
+
+    workflows.forEach((workflow) => qs($page, `[data-bind="workflows"]`).appendChild(createWorkflow(workflow)));
+
+    effect(onClick(qs($page, "h2 > a")).pipe(
+        rxjs.tap((a) => createModal({ withButtonsRight: "Create", withButtonsLeft: "Cancel" })(createElement(`
+            <div>
+               <input type="component_input" placeholder="worklow name" />
+            </div>
+        `))),
+    ));
+}
+
+function createWorkflow({ id, name, status }) {
+    const $workflow = createElement(`
+        <a href="./admin/workflow?id=${id}" class="box status-${status}" data-link>
+            <h3 class="ellipsis">${name} <span>(2 weeks ago)</span></h3>
+            <div class="workflow-summary">
+                <button class="light">Schedule</button> → <button class="light">execute</button><button class="light">notify</button>
+            </div>
+        </a>
+    `);
+    return $workflow;
+}

public/assets/pages/adminpage/decorator_sidemenu.js

@@ -27,7 +27,17 @@ export default function(ctrl) {
                     <ul>
                         <li>
                             <a href="${toHref("/admin/backend")}" data-link>
-                                Backend
+                                Storage
+                            </a>
+                        </li>
+                        <li>
+                            <a href="${toHref("/admin/logs")}" data-link>
+                                Activity
+                            </a>
+                        </li>
+                        <li class=${new URLSearchParams(location.search).has("canary") ? "" : "hidden"}>
+                            <a href="${toHref("/admin/workflow")}" data-link>
+                                Workflow
                             </a>
                         </li>
                         <li>
@@ -35,11 +45,6 @@ export default function(ctrl) {
                                 Settings
                             </a>
                         </li>
-                        <li>
-                            <a href="${toHref("/admin/logs")}" data-link>
-                                Logs
-                            </a>
-                        </li>
                         <li class="version">
                             <a href="${toHref("/admin/about")}" data-link data-bind="version">
                                 &nbsp;

public/assets/pages/adminpage/index.css

@@ -121,9 +121,10 @@
 }
 .component_page_admin .page_container fieldset {
     background: white;
-    border-color: rgba(0, 0, 0, 0.05);
+    border-color: #ebebec;
     border-style: solid;
-    border-radius: 3px;
+    border-radius: 5px;
+    padding: 10px 15px;
     margin: 15px 0 0 0;
 }