request #19263: Empty and error state illustrations of the taskboard …

…are not displayed The issue happens for two reasons: * since the v5.0 of file-loader everything is considered to be usable as a ES module by default. This does not work in this situation. * SVG loaded through `<use>` is a bit of grey area in the Content-Security-Policy specification [0][1] and a result it does not work on Firefox when `default-src` is set to none. In order to solve the issue while keeping the overall app not too big, the parts of the SVG have been splitted into individual components and are loaded asynchronously. The opportunity has also been taken to optimize the SVGs with SVGO [2]. [0] w3c/webappsec-csp#199 [1] w3c/webappsec-csp#198 [2] https://github.com/svg/svgo Change-Id: Ia66419a50e73eadaffdd31bf3b1b70a5328592d3
Enalean · Feb 4, 2021 · 38c8bd4 · 38c8bd4
1 parent 3350461
commit 38c8bd4
Show file tree

Hide file tree

Showing 17 changed files with 624 additions and 365 deletions.
diff --git a/plugins/scaled_agile/webpack.common.js b/plugins/scaled_agile/webpack.common.js
@@ -53,7 +53,6 @@ module.exports = [
                 ),
                 webpack_configurator.rule_easygettext_loader,
                 webpack_configurator.rule_vue_loader,
-                webpack_configurator.rule_file_loader_images,
                 webpack_configurator.rule_scss_loader,
             ],
         },

diff --git a/plugins/taskboard/scripts/taskboard/src/components/App.vue b/plugins/taskboard/scripts/taskboard/src/components/App.vue
@@ -31,12 +31,12 @@
 import Vue from "vue";
 import { namespace, State, Getter } from "vuex-class";
 import { Component } from "vue-property-decorator";
-import BoardWithoutAnyColumnsError from "./GlobalError/BoardWithoutAnyColumnsError.vue";
-import GlobalAppError from "./GlobalError/GlobalAppError.vue";
 import { ColumnDefinition, TaskboardEvent } from "../type";
 import TaskBoard from "./TaskBoard/TaskBoard.vue";
-import NoContentEmptyState from "./EmptyState/NoContentEmptyState.vue";
 import EventBus from "./../helpers/event-bus";
+import NoContentEmptyState from "./EmptyState/NoContentEmptyState.vue";
+import BoardWithoutAnyColumnsError from "./GlobalError/BoardWithoutAnyColumnsError.vue";
+import GlobalAppError from "./GlobalError/GlobalAppError.vue";
 
 const column = namespace("column");
 const error = namespace("error");

diff --git a/plugins/taskboard/scripts/taskboard/src/components/EmptyState/NoContentEmptyState.vue b/plugins/taskboard/scripts/taskboard/src/components/EmptyState/NoContentEmptyState.vue
@@ -18,15 +18,10 @@
   -
   -->
 
-<template functional>
+<template>
     <div class="empty-page">
         <div class="empty-page-illustration">
-            <svg xmlns="http://www.w3.org/2000/svg" width="534" height="170" fill="none">
-                <use
-                    href="../../images/illustrations.svg#no-content-empty-state"
-                    class="tlp-illustration"
-                />
-            </svg>
+            <no-content-empty-state-illustration />
         </div>
         <translate tag="p" class="empty-page-text">This taskboard is empty</translate>
     </div>
@@ -35,7 +30,13 @@
 <script lang="ts">
 import Vue from "vue";
 import { Component } from "vue-property-decorator";
-
-@Component
+@Component({
+    components: {
+        "no-content-empty-state-illustration": (): Promise<Record<string, unknown>> =>
+            import(
+                /* webpackChunkName: "taskboard-no-content-empty-state-illustration" */ "./NoContentEmptyStateIllustration.vue"
+            ),
+    },
+})
 export default class NoContentEmptyState extends Vue {}
 </script>
diff --git a/...taskboard/scripts/taskboard/src/components/EmptyState/NoContentEmptyStateIllustration.vue b/...taskboard/scripts/taskboard/src/components/EmptyState/NoContentEmptyStateIllustration.vue
@@ -0,0 +1,160 @@
+<!--
+  - Copyright (c) Enalean, 2019 - present. All Rights Reserved.
+  -
+  - This file is a part of Tuleap.
+  -
+  - Tuleap is free software; you can redistribute it and/or modify
+  - it under the terms of the GNU General Public License as published by
+  - the Free Software Foundation; either version 2 of the License, or
+  - (at your option) any later version.
+  -
+  - Tuleap is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU General Public License for more details.
+  -
+  - You should have received a copy of the GNU General Public License
+  - along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template functional>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="534"
+        height="170"
+        fill="none"
+        class="tlp-illustration"
+        aria-hidden="true"
+        role="img"
+    >
+        <path
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            stroke-width="3"
+            stroke="var(--tlp-illustration-tertiary-color)"
+            d="M524 145h8m-17 0h4m-21-5h13m6.302 0h4M104 168h37m6 0h4m-57 0h4m32-5h21m6 0h3M23 140h10m5 0h4m-30 5h14.302M2 145h4"
+        />
+        <g
+            opacity=".2"
+            stroke-linecap="round"
+            stroke-width="2.452"
+            stroke="var(--tlp-illustration-primary-color)"
+        >
+            <path d="M134.722 87.624c-5.353-4.33-10.778-4.09-16.274.718s-7.266 6.947-5.307 6.416" />
+            <path
+                d="M135.322 74.541c-7.535-4.3-29.568.17-24.922 17.51 4.646 17.339 29.011 12.896 33.998.272"
+            />
+            <path
+                d="M129.024 98.7c7.861-2.476 13.513-4.16 9.881-14.027-3.633-9.868-9.354-7.79-17.615-5.553-5.506 1.492-8.346 5.507-8.518 12.045"
+            />
+            <path
+                d="M130.417 103.405c12.149-3.8 17.621-9.644 13.943-20.68-3.679-11.035-9.313-15.103-22.071-11.648-8.506 2.303-11.98 8.572-10.422 18.805"
+            />
+            <path
+                d="M122.084 83.737c-.644-.776-2.65-.707-6.02.209-3.37.915-5.195 3.802-5.477 8.66m16.13-4.553c.045 4.428-1.836 7.158-5.643 8.191-3.806 1.033-6.942.033-9.407-3l15.05-5.192z"
+            />
+            <path
+                d="M135.141 74.128l2.817 2.842m-3.571 14.379c-1.038 3.986-4.203 6.7-9.493 8.139-5.291 1.439-9.782-.44-13.472-5.64l22.965-2.5zm-3.566-18.567l4.239-3.544-4.239 3.544zM118.595 70.383l-2.894 6.461 7.107-1.614M143.505 85.559l-5.791-4.073.229 7.284M138.625 94.147c.238 1.58-.067 2.75-.914 3.513-1.271 1.144 3.511.807 6.198-2.575m-32.221-19.716l-1.928 7.97 1.928-7.97zm6.747 3.385l3.39 1.147-3.39-1.147zm11.755 1.887l-6.787 3.768 6.787-3.768zm-14.035 8.574c.774.135 1.935-.005 3.484-.42l-3.484.42zm14.064 2.094l-4.058.458 4.058-.458zm-8.543-.587l-1.546 4.983 1.546-4.983zm10.404 7.702l-4.428 4.739c3.272 2.462 6.147 3.003 8.626 1.623l-4.198-6.362zM111.154 96.218c-.555 3.951-.199 6.173 1.068 6.665"
+            />
+        </g>
+        <rect
+            stroke-width="3"
+            stroke="var(--tlp-illustration-primary-color)"
+            fill="var(--tlp-illustration-secondary-light-color)"
+            rx="3"
+            height="121"
+            width="165"
+            y="2"
+            x="185"
+        />
+        <path
+            fill="#fff"
+            d="M342.808 9.192H186.269V7.27c0-2.209 1.734-4 3.944-4h154.093c2.485 0 4.425 2.015 4.425 4.5v109.116a4 4 0 01-4 4h-1.923V9.192z"
+            clip-rule="evenodd"
+            fill-rule="evenodd"
+            opacity=".6"
+        />
+        <path
+            stroke-width="3"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M185 20.346h165M241.5 2.846V123M296.5 2.846V123"
+        />
+        <path
+            stroke-linecap="round"
+            stroke-width="3"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M362.577 112.901c-10.786-8.724-21.717-8.241-32.791 1.447-11.075 9.688-14.64 13.997-10.694 12.928"
+        />
+        <path
+            stroke-linecap="round"
+            stroke-width="3"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M367.117 87.572c-15.181-8.666-59.576.342-50.215 35.279 9.361 34.937 54.103 25.3 64.151-.137"
+        />
+        <path
+            stroke-linecap="round"
+            stroke-width="3"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M349.276 114.997c.09 8.922-3.7 14.423-11.37 16.505-7.67 2.081-13.989.066-18.956-6.044m44.194-20.51c-6.35-10.156-15.577-13.596-27.68-10.32s-18.492 11.545-19.167 24.806l46.847-14.486z"
+        />
+        <path
+            stroke-linecap="round"
+            stroke-width="3"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M357.666 85.053l5.675 5.726M339.939 106.3c-1.296-1.563-5.339-1.423-12.129.422-6.79 1.844-10.468 7.66-11.035 17.45l23.164-17.872zm24.792 15.338c-2.092 8.033-8.469 13.499-19.13 16.399-10.66 2.901-19.708-.887-27.143-11.361l46.273-5.038zm-7.187-37.41l9.918-1.623-9.918 1.622zM345.832 80.517l-6.768 5.654 8.838 2.073"
+        />
+        <path
+            stroke-linecap="round"
+            stroke-width="3"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M356.446 133.858c4.912-.986 8.61-2.64 11.094-4.961m-40.269-41.043l-3.535 6.124 3.535-6.124zm-10.222 9.369l-.194 7.004.194-7.004zm15.539-.962l6.831 2.31-6.831-2.31zm14.535-3.439l6.761-1.812-6.761 1.812zm2.226 10.627l-6.692 5.934 6.692-5.934zm-24.982 6.932l-7.727 2.07 7.727-2.07zm3.626 6.958c1.56.272 3.9-.01 7.021-.846l-7.021.846zm21.089 1.974l-5.158-3.794 5.158 3.794zm10.706 19.216l-6.194 6.451c4.514 3.293 8.498 3.994 11.952 2.104l-5.758-8.555zm13.48-11.253c.48 3.182-.134 5.541-1.841 7.078-2.561 2.305 7.074 1.626 12.488-5.188l-10.647-1.89zm-40.456 17.389l5.763 4.119-5.763-4.119zm-11.923-11.01c2.081 7.766 4.49 11.607 7.229 11.522l-7.229-11.522zM358.878 118.305c-1.349-8.143.447-12.231 5.39-12.264 4.942-.032 9.333 1.297 13.173 3.987"
+        />
+        <path
+            stroke-linecap="round"
+            stroke-width="3"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M327.545 104.914c6.329-12.806 40.531-26.994 50.152.947 9.621 27.941-40.697 36.343-47.442 16.343"
+        />
+        <path
+            stroke-linecap="round"
+            stroke-width="3"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M338.105 119.434c7.237 5.781 15.035 7.243 23.395 4.385 8.36-2.857 13.421-7.672 15.183-14.443m-38.752 4.886c-.198-9.38 4.554-15.728 14.258-19.043 9.703-3.314 17.738-.856 24.104 7.374l-38.362 11.669z"
+        />
+        <path
+            stroke-linecap="round"
+            stroke-width="3"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M332.457 100.206l-.819 6.31m22.233-.974c.176-1.65 3.025-3.416 8.549-5.297 5.523-1.881 10.727.346 15.611 6.681l-24.16-1.384zm-10.268 21.985c5.112 4.525 11.957 5.329 20.533 2.412 8.576-2.916 12.982-9.658 13.22-20.225l-33.753 17.813zm-11.826-28.648l-7.43 3.764 7.43-3.764zM338.386 90.96l7.72.696-5.493 5.77"
+        />
+        <path
+            stroke-linecap="round"
+            stroke-width="3"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M336.078 117.652l6.628 1.623c-1.357 4.138-3.513 6.322-6.469 6.553m17.92-38.31l4.457 2.083-4.457-2.083zm11.149 1.495l3.355 4.917-3.355-4.917zm-10.758 6.335l-3.344 4.768 3.344-4.768zm-11.466 5.018l-5.571 1.919 5.571-1.919zm3.278 6.993l7.8.931-7.8-.931zm19.806-6.391l6.686-2.302-6.686 2.302zm6.098 6.956c-.849 2.506-2.996 4.352-6.441 5.538l6.441-5.538zm-19.193 5.363l1.116-4.001-1.116 4.001zm12.514 3.762c-1.021 2.228-3.035 3.306-6.04 3.233-3.006-.072-4.513-.553-4.521-1.444l10.561-1.789zM343.884 134.548c2.178 1.681 4.186 2.211 6.024 1.591 2.756-.93-1.658 5.904-8.934 7.061M331.396 125.81c-2.414 1.215-4.678 1.223-6.791.023m52.075 2.125l-1.655 4.966 1.655-4.966zm1.888-12.945c2.065 5.999 2.436 9.489 1.111 10.468l-1.111-10.468z"
+        />
+        <path
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            stroke-width="2"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M338.821 76.841c-9.202 2.193-17.597 7.39-23.658 14.977m-3.381 4.896a43.412 43.412 0 00-2.611 5.166l2.611-5.166zM364.999 155.488c8.107-2.751 9.737-4.944 13.508-8.51m4.43-4.321a23.408 23.408 0 001.789-2.752l-1.789 2.752zM355.949 155.203c6.03-1.404 6.379-1.904 11.409-4.198"
+            opacity=".3"
+        />
+        <path
+            stroke-linecap="round"
+            stroke-width="2"
+            stroke="var(--tlp-illustration-primary-color)"
+            d="M203.776 99.175c6.738 7.819 15.81-4.833 9.72-5.507-6.091-.675-4.08 13.596 8.043 10.613M254.261 115.63c9.802 6.732 16-5.11 10-5.11s0 10 8 7.825 10.5-9.825 5.5-10.325-2.5 10.325 4 10.325c4.333 0 7.166-.845 8.5-2.536M228.862 134.525c8.824 5.319 11.614-9.154 6.146-7.995-5.469 1.159 1.846 13.888 11.034 7.544"
+            opacity=".3"
+        />
+    </svg>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import { Component } from "vue-property-decorator";
+
+@Component
+export default class NoContentEmptyStateIllustration extends Vue {}
+</script>
diff --git a/...cripts/taskboard/src/components/EmptyState/__snapshots__/NoContentEmptyState.test.ts.snap b/...cripts/taskboard/src/components/EmptyState/__snapshots__/NoContentEmptyState.test.ts.snap
@@ -7,23 +7,14 @@ exports[`NoContentEmptyState displays a cell that span on the whole table 1`] =
   <div
     class="empty-page-illustration"
   >
-    <svg
-      fill="none"
-      height="170"
-      width="534"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <use
-        class="tlp-illustration"
-        href="../../images/illustrations.svg#no-content-empty-state"
-      />
-    </svg>
+    <!---->
   </div>
    
-  <p
+  <translate-stub
     class="empty-page-text"
+    tag="p"
   >
     This taskboard is empty
-  </p>
+  </translate-stub>
 </div>
 `;
diff --git a/...oard/scripts/taskboard/src/components/GlobalError/BoardWithoutAnyColumnsErrorForAdmin.vue b/...oard/scripts/taskboard/src/components/GlobalError/BoardWithoutAnyColumnsErrorForAdmin.vue
@@ -20,12 +20,7 @@
 <template>
     <div class="empty-page">
         <div class="empty-page-illustration">
-            <svg xmlns="http://www.w3.org/2000/svg" width="364" height="150" fill="none">
-                <use
-                    href="../../images/illustrations.svg#board-without-any-columns-for-admin"
-                    class="tlp-illustration"
-                />
-            </svg>
+            <board-without-any-columns-error-for-admin-illustration />
         </div>
         <div class="empty-page-text-with-small-text">
             <translate>This taskboard is not properly configured</translate>
@@ -43,8 +38,16 @@
 import Vue from "vue";
 import { Component } from "vue-property-decorator";
 import { State } from "vuex-class";
-
-@Component
+@Component({
+    components: {
+        "board-without-any-columns-error-for-admin-illustration": (): Promise<
+            Record<string, unknown>
+        > =>
+            import(
+                /* webpackChunkName: "taskboard-board-without-any-columns-error-for-admin-illustration" */ "./BoardWithoutAnyColumnsErrorForAdminIllustration.vue"
+            ),
+    },
+})
 export default class BoardWithoutAnyColumnsErrorForAdmin extends Vue {
     @State
     readonly admin_url!: string;