Merge pull request #16612 from ElectronicBlueberry/workflow-annotations

Workflow Comments 💬

client/.eslintrc.js

@@ -41,7 +41,14 @@ const baseRules = {
     "vuejs-accessibility/form-control-has-label": "warn",
     "vuejs-accessibility/heading-has-content": "error",
     "vuejs-accessibility/iframe-has-title": "error",
-    "vuejs-accessibility/label-has-for": "warn",
+    "vuejs-accessibility/label-has-for": [
+        "warn",
+        {
+            required: {
+                some: ["nesting", "id"],
+            },
+        },
+    ],
     "vuejs-accessibility/mouse-events-have-key-events": "warn",
     "vuejs-accessibility/no-autofocus": "error",
     "vuejs-accessibility/no-static-element-interactions": "warn",

client/icons/all-icons.md

@@ -7,5 +7,7 @@ This file is auto-generated by `build_icons.js`. Manual changes will be lost!
 ---
 
 -   `<FontAwesomeIcon :icon="['gxd', 'galaxyLogo']" />`
+-   `<FontAwesomeIcon :icon="['gxd', 'textLarger']" />`
+-   `<FontAwesomeIcon :icon="['gxd', 'textSmaller']" />`
 
 ---

client/package.json

@@ -89,6 +89,7 @@
     "rxjs": "^7.8.1",
     "rxjs-spy": "^8.0.2",
     "rxjs-spy-devtools-plugin": "^0.0.4",
+    "simplify-js": "^1.2.4",
     "slugify": "^1.6.6",
     "stream-browserify": "^3.0.0",
     "timers-browserify": "^2.0.12",
@@ -141,6 +142,7 @@
     "@pinia/testing": "0.1.3",
     "@testing-library/jest-dom": "^6.1.4",
     "@types/d3": "^7.4.2",
+    "@types/dompurify": "^3.0.2",
     "@types/jquery": "^3.5.24",
     "@types/lodash": "^4.14.200",
     "@types/lodash.isequal": "^4.5.7",

client/src/components/Workflow/Editor/Comments/ColourSelector.test.js

@@ -0,0 +1,47 @@
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+
+import { colours } from "./colours";
+
+import ColourSelector from "./ColourSelector.vue";
+
+describe("ColourSelector", () => {
+    it("shows a button for each colour and 'none'", () => {
+        const wrapper = mount(ColourSelector, { propsData: { colour: "none" } });
+        const buttons = wrapper.findAll("button");
+        expect(buttons.length).toBe(Object.keys(colours).length + 1);
+    });
+
+    it("highlights the selected colour", async () => {
+        const wrapper = mount(ColourSelector, { propsData: { colour: "none" } });
+        const allSelected = wrapper.findAll(".selected");
+        expect(allSelected.length).toBe(1);
+
+        let selected = allSelected.wrappers[0];
+        expect(selected.element.getAttribute("title")).toBe("No Colour");
+
+        const colourNames = Object.keys(colours);
+
+        for (let i = 0; i < colourNames.length; i++) {
+            const colour = colourNames[i];
+            wrapper.setProps({ colour });
+            await nextTick();
+
+            selected = wrapper.find(".selected");
+
+            expect(selected.element.getAttribute("title")).toContain(colour);
+        }
+    });
+
+    it("emits the set colour", async () => {
+        const wrapper = mount(ColourSelector, { propsData: { colour: "none" } });
+
+        const colourNames = Object.keys(colours);
+
+        for (let i = 0; i < colourNames.length; i++) {
+            const colour = colourNames[i];
+            await wrapper.find(`[title="Colour ${colour}"]`).trigger("click");
+            expect(wrapper.emitted()["set-colour"][i][0]).toBe(colour);
+        }
+    });
+});

client/src/components/Workflow/Editor/Comments/ColourSelector.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { WorkflowCommentColour } from "@/stores/workflowEditorCommentStore";
+
+import { brightColours, colours } from "./colours";
+
+const props = defineProps<{
+    colour: WorkflowCommentColour;
+}>();
+
+const emit = defineEmits<{
+    (e: "set-colour", colour: WorkflowCommentColour): void;
+}>();
+
+function onClickColour(colour: WorkflowCommentColour) {
+    emit("set-colour", colour);
+}
+</script>
+
+<template>
+    <div class="comment-colour-selector">
+        <button
+            class="colour-button prevent-zoom"
+            title="No Colour"
+            data-colour="none"
+            :class="{ selected: props.colour === 'none' }"
+            @click="() => onClickColour('none')"></button>
+        <button
+            v-for="(hex, name) in colours"
+            :key="name"
+            class="colour-button prevent-zoom"
+            :data-colour="name"
+            :title="`Colour ${name}`"
+            :class="{ selected: props.colour === name }"
+            :style="{
+                '--colour': hex,
+                '--colour-bright': brightColours[name],
+            }"
+            @click="() => onClickColour(name)"></button>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.comment-colour-selector {
+    position: absolute;
+    z-index: 10000;
+
+    display: grid;
+    grid-template-rows: 1rem 1rem;
+    grid-template-columns: repeat(5, 1rem);
+    grid-auto-flow: column;
+
+    overflow: hidden;
+    border-radius: 0.25rem;
+
+    .colour-button {
+        --colour: #{$brand-primary};
+        --colour-bright: #{$brand-secondary};
+
+        background-color: var(--colour);
+        border-color: var(--colour-bright);
+        border-width: 0;
+        border-radius: 0;
+        padding: 0;
+
+        width: 100%;
+        height: 100%;
+
+        display: grid;
+        place-items: center;
+
+        transition: none;
+
+        &:hover {
+            background-color: var(--colour-bright);
+        }
+
+        &:focus,
+        &:focus-visible {
+            border-color: var(--colour-bright);
+            border-width: 2px;
+            box-shadow: none;
+        }
+
+        &.selected::after {
+            content: "";
+            display: block;
+            width: 50%;
+            height: 50%;
+            border-radius: 50%;
+            background-color: var(--colour-bright);
+        }
+
+        &.selected:hover::after {
+            background-color: var(--colour);
+        }
+    }
+}
+</style>