@processmaker/modeler 1.31.0 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "open-cypress": "TZ=UTC cypress open",
@@ -74,7 +74,7 @@
     "@babel/core": "^7.12.7",
     "@cypress/code-coverage": "^1.14.0",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/processmaker-bpmn-moddle": "0.13.0",
+    "@processmaker/processmaker-bpmn-moddle": "0.14.0",
     "@types/jest": "^24.9.1",
     "@vue/babel-preset-app": "^5.0.4",
     "@vue/cli-plugin-babel": "^4.5.9",

package/src/ModelerApp.vue

@@ -18,14 +18,6 @@
       <b-card-body class="overflow-hidden position-relative p-0 vh-100">
         <modeler ref="modeler" @set-xml-manager="xmlManager = $event" @validate="validationErrors = $event" @warnings="warnings = $event" :decorations="decorations" />
       </b-card-body>
-      <!--   TODO remove me when the time comes   -->
-      <!--      <validation-status ref="validationStatus"-->
-      <!--        :validation-errors="validationErrors"-->
-      <!--        :warnings="warnings"-->
-      <!--        :xml-manager="xmlManager"-->
-      <!--      >-->
-      <!--        <component v-for="(component, index) in validationBar" :key="index" :is="component" />-->
-      <!--      </validation-status>-->
     </b-card>
 
     <b-modal
@@ -64,7 +56,6 @@ export default {
   },
   data() {
     return {
-      validationBar: [],
       decorations: {
         borderOutline: {},
       },

package/src/assets/topRail/issue-close.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.693905 5.53599L6.00816 0.222004C6.26437 -0.0342065 6.68 -0.0342065 6.93621 0.222004L7.55609 0.841887C7.81203 1.09782 7.8123 1.51236 7.55719 1.76884L3.34543 6.00001L7.55691 10.2315C7.8123 10.4879 7.81176 10.9025 7.55582 11.1584L6.93594 11.7783C6.67973 12.0345 6.2641 12.0345 6.00789 11.7783L0.693905 6.46404C0.437694 6.20782 0.437694 5.7922 0.693905 5.53599Z" />
+</svg>

package/src/assets/topRail/issue-item.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 0.1875C2.78906 0.1875 0.1875 2.78906 0.1875 6C0.1875 9.21094 2.78906 11.8125 6 11.8125C9.21094 11.8125 11.8125 9.21094 11.8125 6C11.8125 2.78906 9.21094 0.1875 6 0.1875ZM8.85 7.52578C8.96016 7.63594 8.96016 7.81406 8.85 7.92422L7.92188 8.85C7.81172 8.96016 7.63359 8.96016 7.52344 8.85L6 7.3125L4.47422 8.85C4.36406 8.96016 4.18594 8.96016 4.07578 8.85L3.15 7.92188C3.03984 7.81172 3.03984 7.63359 3.15 7.52344L4.6875 6L3.15 4.47422C3.03984 4.36406 3.03984 4.18594 3.15 4.07578L4.07812 3.14766C4.18828 3.0375 4.36641 3.0375 4.47656 3.14766L6 4.6875L7.52578 3.15C7.63594 3.03984 7.81406 3.03984 7.92422 3.15L8.85234 4.07812C8.9625 4.18828 8.9625 4.36641 8.85234 4.47656L7.3125 6L8.85 7.52578Z" />
+</svg>

package/src/assets/topRail/issue-open.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="8" viewBox="0 0 15 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.96966 7.43098L0.896437 2.11689C0.603531 1.8606 0.603531 1.44508 0.896437 1.18881L1.60478 0.569014C1.89719 0.313159 2.37109 0.312666 2.66419 0.56792L7.5 4.77943L12.3358 0.56792C12.6289 0.312666 13.1028 0.313159 13.3952 0.569014L14.1035 1.18881C14.3964 1.44511 14.3964 1.86062 14.1035 2.11689L8.03034 7.43098C7.73744 7.68725 7.26256 7.68725 6.96966 7.43098Z" />
+</svg>
+

package/src/assets/topRail/validate-close.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="16" viewBox="0 0 18 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.81873 8C1.81873 4.39289 4.74287 1.46875 8.34998 1.46875C9.54059 1.46875 10.6551 1.78679 11.6152 2.34215C11.899 2.50635 12.2622 2.40935 12.4264 2.1255C12.5906 1.84166 12.4936 1.47844 12.2098 1.31424C11.0739 0.657144 9.75491 0.28125 8.34998 0.28125C4.08703 0.28125 0.631226 3.73705 0.631226 8C0.631226 12.2629 4.08703 15.7188 8.34998 15.7188C12.6129 15.7188 16.0687 12.2629 16.0687 8C16.0687 7.67208 15.8029 7.40625 15.475 7.40625C15.1471 7.40625 14.8812 7.67208 14.8812 8C14.8812 11.6071 11.9571 14.5312 8.34998 14.5312C4.74287 14.5312 1.81873 11.6071 1.81873 8Z" />
+    <path d="M17.0823 2.48234C17.3142 2.25047 17.3142 1.87453 17.0823 1.64266C16.8504 1.41078 16.4745 1.41078 16.2426 1.64266L8.34998 9.53531L5.20732 6.39266C4.97545 6.16078 4.5995 6.16078 4.36763 6.39266C4.13576 6.62453 4.13576 7.00047 4.36763 7.23234L7.93013 10.7948C8.162 11.0267 8.53795 11.0267 8.76982 10.7948L17.0823 2.48234Z" />
+</svg>

package/src/assets/topRail/validate-open.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="18" viewBox="0 0 19 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.80589 9C1.80589 13.2502 5.25137 16.6957 9.50156 16.6957C13.7517 16.6957 17.1972 13.2502 17.1972 9C17.1972 4.75024 13.7524 1.30498 9.50272 1.30435C9.14254 1.30429 8.85058 1.01226 8.85063 0.652077C8.85069 0.291891 9.14273 -5.34573e-05 9.50291 7.34216e-09C14.4729 0.000737734 18.5016 4.02995 18.5016 9C18.5016 13.9706 14.4721 18 9.50156 18C4.53099 18 0.501541 13.9706 0.501541 9C0.501541 7.11913 1.08174 5.32928 2.12769 3.83814L1.38144 3.18945C0.988324 2.84772 1.13471 2.20576 1.63712 2.06822L4.47212 1.29212C4.92098 1.16925 5.3504 1.54254 5.29118 2.00413L4.9172 4.91955C4.85093 5.43621 4.23559 5.67051 3.84247 5.32877L3.11835 4.6993C2.27288 5.95119 1.80589 7.43811 1.80589 9Z" />
+    <path d="M12.7244 5.87213C13.0539 5.54262 13.5881 5.54262 13.9176 5.87213C14.2431 6.19759 14.2471 6.72279 13.9296 7.05316L9.43837 12.6672C9.43189 12.6753 9.42496 12.683 9.41763 12.6904C9.08812 13.0199 8.55389 13.0199 8.22438 12.6904L5.24713 9.71312C4.91762 9.38361 4.91762 8.84938 5.24713 8.51988C5.57663 8.19037 6.11087 8.19037 6.44037 8.51988L8.79558 10.8751L12.702 5.89737C12.709 5.88851 12.7164 5.88009 12.7244 5.87213Z" />
+</svg>

package/src/components/hotkeys/escKey.js

@@ -0,0 +1,20 @@
+import nodeTypesStore from '@/nodeTypesStore';
+
+export default {
+  methods: {
+    escapeKeyHandler(event) {
+      if (this.selectedNode) {
+        event.preventDefault();
+        window.ProcessMaker.EventBus.$emit('custom-pointerclick', event);
+      }
+    },
+  },
+  computed: {
+    selectedNode() {
+      return nodeTypesStore.getters.getSelectedNode;
+    },
+    movedElement() {
+      return nodeTypesStore.getters.getGhostNode;
+    },
+  },
+};

package/src/components/hotkeys/main.js

@@ -1,10 +1,11 @@
 import ZoomInOut from './zoomInOut';
 import CopyPaste from './copyPaste.js';
-import store from '@/store';
 import moveShapeByKeypress from './moveWithArrowKeys';
+import EscKey from './escKey';
+import store from '@/store';
 
 export default {
-  mixins: [ZoomInOut, CopyPaste],
+  mixins: [ZoomInOut, CopyPaste, EscKey],
   computed: {
     clientLeftPaper() {
       return store.getters.clientLeftPaper;
@@ -19,6 +20,7 @@ export default {
       // Pass event to all handlers
       this.zoomInOutHandler(event, options);
       this.copyPasteHandler(event, options);
+      this.escapeKeyHandler(event);
     },
     keyupListener(event) {
       if (event.code === 'Space') {

package/src/components/modeler/Modeler.vue

@@ -7,6 +7,9 @@
       :paper-manager="paperManager"
       :breadcrumb-data="breadcrumbData"
       :panelsCompressed="panelsCompressed"
+      :validation-errors="validationErrors"
+      :warnings="allWarnings"
+      :xml-manager="xmlManager"
       @load-xml="loadXML"
       @toggle-panels-compressed="panelsCompressed = !panelsCompressed"
       @toggle-mini-map-open="miniMapOpen = $event"

package/src/components/modeler/ModelerReadonly.vue

@@ -31,7 +31,6 @@
         :paper="paper"
         :node="node"
         :id="node.id"
-        :highlighted="highlightedNodes.includes(node)"
         :border-outline="borderOutline(node.id)"
         :collaboration="collaboration"
         :process-node="processNode"
@@ -40,11 +39,14 @@
         :moddle="moddle"
         :nodeRegistry="nodeRegistry"
         :root-elements="definitions.get('rootElements')"
-        :isRendering="isRendering"
         :paperManager="paperManager"
         :auto-validate="autoValidate"
-        :is-active="node === activeNode"
         :node-id-generator="nodeIdGenerator"
+        :highlighted="highlightedNodes.includes(node)"
+        :is-active="node === activeNode"
+        :is-rendering="isRendering"
+        :is-completed="requestCompletedNodes.includes(node.definition.id)"
+        :is-in-progress="requestInProgressNodes.includes(node.definition.id)"
         @add-node="addNode"
         @set-cursor="cursor = $event"
         @set-pool-target="poolTarget = $event"
@@ -132,6 +134,14 @@ export default {
       type: Boolean,
       default: true,
     },
+    requestCompletedNodes: {
+      type: Array,
+      default: () => [],
+    },
+    requestInProgressNodes: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -215,7 +225,6 @@ export default {
     canvasScale(canvasScale) {
       this.paperManager.scale = canvasScale;
     },
-
   },
   computed: {
     showControls() {
@@ -926,10 +935,16 @@ export default {
         return;
       }
 
-      // ignore click event if the user is Grabbing the paper
-      if (this.isGrabbing) return;
+      // ignore click event if the user is grabbing the paper.
+      if (this.isGrabbing) {
+        return;
+      }
 
       shape.component.$emit('click', event);
+      this.$emit('click', {
+        event,
+        node: this.highlightedNode.definition,
+      });
     });
 
     this.paperManager.addEventHandler('cell:pointerdown', ({ model: shape }, event) => {

package/src/components/railBottom/controls/Controls.vue

@@ -5,7 +5,7 @@
   >
     <li
       v-for="item in controls"
-      :class="['control-item', {'active': selectedItem === item.type}]"
+      :class="['control-item', {'active': selectedItem && (selectedItem.type === item.type)}]"
       :id="item.id"
       :key="item.id"
       @click.stop="onClickHandler($event, item)"
@@ -35,6 +35,7 @@
 import InlineSvg from 'vue-inline-svg';
 import nodeTypesStore from '@/nodeTypesStore';
 import SubmenuPopper from './SubmenuPopper/SubmenuPopper.vue';
+import clickAndDrop from '@/mixins/clickAndDrop';
 
 export default ({
   components: {
@@ -44,29 +45,15 @@ export default ({
   props: {
     nodeTypes: Array,
   },
+  mixins: [clickAndDrop],
   data() {
     return {
       plusIcon: require('@/assets/railBottom/plus.svg'),
-      wasClicked: false,
-      element: null,
-      selectedItem: null,
-      selectedSubmenuItem: null,
-      xOffset: 0,
-      yOffset: 0,
-      movedElement: null,
-      isDragging: false,
-      helperStyles: {
-        backgroundColor:'#ffffff',
-        position: 'absolute',
-        height: '40px',
-        width: '40px',
-        zIndex: '10',
-        opacity: '0.5',
-        pointerEvents: 'none',
-      },
-      popperType: null,
     };
   },
+  created() {
+    nodeTypesStore.dispatch('getUserPinnedObjects');
+  },
   computed: {
     controls() {
       return nodeTypesStore.getters.getPinnedNodeTypes;
@@ -79,69 +66,14 @@ export default ({
     clickToSubmenuHandler(data){
       window.ProcessMaker.EventBus.$off('custom-pointerclick');
       this.wasClicked = false;
-      this.parent = this.element;
+      this.parent = this.selectedItem;
       this.selectedSubmenuItem = data.control.type;
       this.onClickHandler(data.event, data.control);
     },
-    onClickHandler(event, control) {
-      this.createDraggingHelper(event, control);
-      document.addEventListener('mousemove', this.setDraggingPosition);
-      this.setDraggingPosition(event);
-      this.wasClicked = true;
-      this.element = control;
-      this.$emit('onSetCursor', 'crosshair');
-      if (!this.parent) {
-        this.selectedItem = control.type;
-        this.popperType = control.type;
-      }
-      window.ProcessMaker.EventBus.$on('custom-pointerclick', message => {
-        window.ProcessMaker.EventBus.$off('custom-pointerclick');
-        document.removeEventListener('mousemove', this.setDraggingPosition);
-        if (this.movedElement) {
-          document.body.removeChild(this.movedElement);
-        }
-        this.popperType = null;
-        this.selectedSubmenuItem = null;
-        this.selectedItem = null;
-        this.movedElement = null;
-        this.onCreateElement(message);
-      });
-    },
-    onCreateElement(event){
-      if (this.wasClicked && this.element) {
-        if (this.parent) {
-          this.parent = null;
-        }
-        this.$emit('onCreateElement', { event, control: this.element });
-        this.$emit('onSetCursor', 'none');
-        event.preventDefault();
-        this.wasClicked = false;
-      }
-    },
-    setDraggingPosition({ pageX, pageY }) {
-      this.movedElement.style.left = `${pageX}px`;
-      this.movedElement.style.top = `${pageY}px`;
-    },
     toggleExplorer() {
       nodeTypesStore.commit('toggleExplorer');
       nodeTypesStore.commit('clearFilteredNodes');
     },
-    createDraggingHelper(event, control) {
-      if (this.movedElement) {
-        document.removeEventListener('mousemove', this.setDraggingPosition);
-        document.body.removeChild(this.movedElement);
-        this.movedElement = null;
-      }
-      const sourceElement = event.target;
-      this.movedElement = document.createElement('img');
-      Object.keys(this.helperStyles).forEach((property) => {
-        this.movedElement.style[property] = this.helperStyles[property];
-      });
-      this.movedElement.src = control.icon;
-      document.body.appendChild(this.movedElement);
-      this.xOffset = event.clientX - sourceElement.getBoundingClientRect().left;
-      this.yOffset = event.clientY - sourceElement.getBoundingClientRect().top;
-    },
   },
 });
 </script>

package/src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue

@@ -2,29 +2,16 @@
 import pinIcon from '@/assets/pin-angle.svg';
 import pinFillIcon from '@/assets/pin-angle-fill.svg';
 import nodeTypesStore from '@/nodeTypesStore';
+import clickAndDrop from '@/mixins/clickAndDrop';
 
 export default {
   name: 'NodeTypesLoop',
+  mixins: [clickAndDrop],
   data() {
     return {
       pinIcon,
       pinFillIcon,
       showPin: false,
-      wasClicked: false,
-      element: null,
-      selectedItem: null,
-      xOffset: 0,
-      yOffset: 0,
-      movedElement: null,
-      helperStyles: {
-        backgroundColor:'#ffffff',
-        position: 'absolute',
-        height: '40px',
-        width: '40px',
-        zIndex: '10',
-        opacity: '0.5',
-        pointerEvents: 'none',
-      },
     };
   },
   created() {
@@ -40,63 +27,6 @@ export default {
     addPin(object) {
       return nodeTypesStore.dispatch('addUserPinnedObject', object);
     },
-    onClickHandler(event, control) {
-      this.createDraggingHelper(event, control);
-      document.addEventListener('mousemove', this.setDraggingPosition);
-      this.setDraggingPosition(event);
-      // Deselect control on click if same control is already selected
-      if (this.selectedItem === control.type) {
-        document.removeEventListener('mousemove', this.setDraggingPosition);
-        document.body.removeChild(this.movedElement);
-        this.$emit('onSetCursor', 'none');
-        this.selectedItem = null;
-        this.movedElement = null;
-        this.wasClicked = false;
-        return;
-      }
-      this.wasClicked = true;
-      this.element = control;
-      this.$emit('onSetCursor', 'crosshair');
-      this.selectedItem = control.type;
-      window.ProcessMaker.EventBus.$on('custom-pointerclick', message => {
-        window.ProcessMaker.EventBus.$off('custom-pointerclick');
-        document.removeEventListener('mousemove', this.setDraggingPosition);
-        if (this.movedElement) {
-          document.body.removeChild(this.movedElement);
-        }
-        this.selectedItem = null;
-        this.movedElement = null;
-        this.onCreateElement(message);
-      });
-    },
-    createDraggingHelper(event, control) {
-      if (this.movedElement) {
-        document.removeEventListener('mousemove', this.setDraggingPosition);
-        document.body.removeChild(this.movedElement);
-        this.movedElement = null;
-      }
-      const sourceElement = event.target;
-      this.movedElement = document.createElement('img');
-      Object.keys(this.helperStyles).forEach((property) => {
-        this.movedElement.style[property] = this.helperStyles[property];
-      });
-      this.movedElement.src = control.icon;
-      document.body.appendChild(this.movedElement);
-      this.xOffset = event.clientX - sourceElement.getBoundingClientRect().left;
-      this.yOffset = event.clientY - sourceElement.getBoundingClientRect().top;
-    },
-    setDraggingPosition({ pageX, pageY }) {
-      this.movedElement.style.left = pageX  + 'px';
-      this.movedElement.style.top = pageY + 'px';
-    },
-    onCreateElement(event){
-      if (this.wasClicked && this.element) {
-        this.$emit('onCreateElement', { event, control: this.element });
-        this.$emit('onSetCursor', 'none');
-        event.preventDefault();
-        this.wasClicked = false;
-      }
-    },
   },
   computed: {
     pinnedObjects() {

package/src/components/toolbar/ToolBar.vue

@@ -4,9 +4,13 @@
       aria-label="Toolbar" :class="{ 'ignore-pointer': canvasDragPosition }"
     >
       <breadcrumb :breadcrumb-data="breadcrumbData" />
-      <div class="mr-3">
-        <align-buttons @save-state="$emit('save-state')" />
+      <div class="d-flex mr-3">
+        <TopRail
+          :validation-errors="validationErrors"
+          :warnings="warnings"
+        />
 
+        <align-buttons @save-state="$emit('save-state')" />
 
         <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Additional controls">
           <b-button
@@ -78,23 +82,28 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { faCompress, faExpand, faMapMarked, faMinus, faPlus, faRedo, faUndo, faSave, faCheckCircle, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import undoRedoStore from '@/undoRedoStore';
 import Breadcrumb from '@/components/toolbar/breadcrumb/Breadcrumb';
+import TopRail from '@/components/topRail/TopRail.vue';
 import AlignButtons from '@/components/toolbar/alignButtons/AlignButtons';
 
 export default {
   name: 'tool-bar',
-  components: { Breadcrumb, FontAwesomeIcon, AlignButtons },
-  props: {
-    canvasDragPosition: {},
-    cursor: {},
-    paperManager: {},
-    isRendering: {
-      type: Boolean,
-    },
-    breadcrumbData: {
-      type: Array,
-    },
-    panelsCompressed: Boolean,
+  components: {
+    Breadcrumb,
+    TopRail,
+    FontAwesomeIcon,
+    AlignButtons,
   },
+  props: [
+    'canvasDragPosition',
+    'cursor',
+    'paperManager',
+    'isRendering',
+    'breadcrumbData',
+    'panelsCompressed',
+    'validationErrors',
+    'warnings',
+    'xmlManager',
+  ],
   watch: {
     miniMapOpen(isOpen) {
       this.$emit('toggle-mini-map-open', isOpen);

package/src/components/topRail/TopRail.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="top-rail-container">
+    <ValidateIssue
+      v-show="isOpenIssue"
+      :number-of-errors="numberOfErrors"
+      @openPanel="handleOpenPanel"
+    />
+
+    <ValidateButton @openIssue="handleOpenIssue" />
+
+    <ValidatePanel
+      v-show="isOpenIssue && isOpenPanel"
+      :error-list="errorList"
+      :warnings="warnings"
+    />
+  </div>
+</template>
+
+<script>
+import store from '@/store';
+import { ValidateButton, ValidateIssue, ValidatePanel } from '@/components/topRail/validateControl';
+
+export default {
+  components: {
+    ValidateButton,
+    ValidateIssue,
+    ValidatePanel,
+  },
+  props: {
+    validationErrors: {
+      type: Object,
+      required: true,
+    },
+    warnings: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isOpenIssue: false,
+      isOpenPanel: false,
+    };
+  },
+  computed: {
+    errorList() {
+      // Get a formatted error list to show in the issue panel
+      return Object.entries(this.validationErrors)
+        .flatMap(([errorKey, errors]) => (
+          errors.flatMap(error => ({
+            ...error,
+            errorKey,
+            ...{ 'errorId': `${error.id}_${error.message.split(' ').join('_')}` },
+          }))
+        ));
+    },
+    numberOfErrors() {
+      // Get the number of errors
+      return this.errorList.length + this.warnings.length;
+    },
+  },
+  watch: {
+    numberOfErrors(newValue) {
+      // Checks the number of errors, if it is "0" hides the panel errors
+      if (newValue === 0) {
+        this.isOpenPanel = false;
+      }
+    },
+  },
+  methods: {
+    /**
+     * Show/hide the issue button
+     * @param {boolean} value
+     */
+    handleOpenIssue(value) {
+      this.isOpenIssue = value;
+      // Set the auto-validate value store
+      store.commit('setAutoValidate', this.isOpenIssue);
+    },
+    /**
+     * Show/hide the issue panel
+     * @param {boolean} value
+     */
+    handleOpenPanel(value) {
+      this.isOpenPanel = value;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./topRail.scss"></style>

package/src/components/topRail/topRail.scss

@@ -0,0 +1,6 @@
+.top-rail-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0px 8px;
+}

package/src/components/topRail/validateControl/index.js

@@ -0,0 +1,3 @@
+export { default as ValidateButton } from './validateButton/ValidateButton.vue';
+export { default as ValidateIssue } from './validateIssue/ValidateIssue.vue';
+export { default as ValidatePanel } from './validatePanel/ValidatePanel.vue';

package/src/components/topRail/validateControl/validateButton/ValidateButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <button
+    type="button"
+    @click.prevent="handleOpen"
+    :class="['validate-button', { 'validate-button-active': isOpen }]"
+  >
+    <inline-svg :src="isOpen ? validateOpenIcon : validateCloseIcon" />
+  </button>
+</template>
+
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  components: {
+    InlineSvg,
+  },
+  data() {
+    return {
+      isOpen: false,
+      validateCloseIcon: require('@/assets/topRail/validate-close.svg'),
+      validateOpenIcon: require('@/assets/topRail/validate-open.svg'),
+    };
+  },
+  methods: {
+    /**
+     * Show/hide issue button
+     */
+    handleOpen() {
+      this.isOpen = !this.isOpen;
+
+      this.$emit('openIssue', this.isOpen);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./validateButton.scss"></style>

package/src/components/topRail/validateControl/validateButton/validateButton.scss

@@ -0,0 +1,25 @@
+.validate-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  background-color: #EBEEF2;
+  border: 0 none;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+
+  & > svg {
+    width: 18px;
+    fill: #212529;
+  }
+
+  &:active,
+  &-active {
+    background-color: #104A75;
+
+    & > svg {
+      fill: #ffffff;
+    }
+  }
+}