feat: Unify record-level actions for all tasks (Validate, Clear, and Discard)

frontend/assets/icons/clear.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * 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 language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'clear': {
+    width: 18,
+    height: 18,
+    viewBox: '0 0 18 18',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M1.02 9.845a1.878 1.878 0 000 2.655l3.622 3.622H1.569a.939.939 0 000 1.878h15.023a.939.939 0 000-1.878H8.02l8.933-8.933a1.878 1.878 0 000-2.656L12.97.55a1.878 1.878 0 00-2.656 0L1.019 9.845zm4.06-1.406l-2.733 2.733 3.984 3.984 2.733-2.734-3.983-3.983zM6.41 7.11l3.983 3.983 5.233-5.233-3.983-3.983L6.409 7.11z" _fill="#52A3ED"/>'
+  }
+})

frontend/assets/icons/discard.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * 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 language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'discard': {
+    width: 30,
+    height: 30,
+    viewBox: '0 0 30 30',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M4.393 4.393c-5.857 5.858-5.857 15.356 0 21.214 5.858 5.858 15.356 5.858 21.214 0 5.858-5.858 5.858-15.356 0-21.214-5.858-5.857-15.356-5.857-21.214 0zm3.62 19.951L24.343 8.012c3.427 4.57 3.062 11.082-1.094 15.238-4.156 4.156-10.668 4.52-15.238 1.095zM6.75 6.75c-4.156 4.156-4.52 10.668-1.095 15.238L21.988 5.655C17.418 2.23 10.906 2.595 6.75 6.75z" _fill="#000"/>'
+  }
+})

frontend/assets/icons/index.js

@@ -6,9 +6,11 @@ require('./chevron-down')
 require('./chevron-left')
 require('./chevron-right')
 require('./chevron-up')
+require('./clear')
 require('./close')
 require('./copy')
 require('./danger')
+require('./discard')
 require('./exploration')
 require('./external')
 require('./filter')
@@ -32,4 +34,5 @@ require('./support')
 require('./time')
 require('./trash-empty')
 require('./unavailable')
+require('./validate')
 require('./weak-labeling')

frontend/assets/icons/validate.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * 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 language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'validate': {
+    width: 31,
+    height: 31,
+    viewBox: '0 0 31 31',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M15.75.75c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15zm-11.826 15c0-6.531 5.295-11.826 11.826-11.826 6.531 0 11.826 5.295 11.826 11.826 0 6.531-5.295 11.826-11.826 11.826-6.531 0-11.826-5.295-11.826-11.826zm19.3-3.698L20.98 9.807l-7.587 7.587-3.794-3.793-2.244 2.244 6.038 6.039 9.832-9.832z" _fill="#000"/>'
+  }
+})

frontend/assets/scss/abstract/variables/_variables.scss

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-
 // Color map
 //-----------
 $palettes: (
@@ -27,18 +26,20 @@ $palettes: (
   ),
   grey: (
     100: #212121,
-    200: #4D4D4D,
+    200: #4d4d4d,
     300: #686a6d,
-    600: #E6E6E6,
-    700: #F5F5F5,
-    800: #FAFAFA,
+    400: #838589,
+    600: #e6e6e6,
+    700: #f5f5f5,
+    800: #fafafa,
   ),
   blue: (
-    500: #3E5CC9,
+    100: #52a3ed,
+    500: #3e5cc9,
   ),
   purple: (
     100: #3b3269,
-    200: #4C4EA3,
+    200: #4c4ea3,
   ),
   pink: (
     base: #f2067a,
@@ -49,12 +50,12 @@ $palettes: (
     dark: #1d1d1d,
   ),
   orange-red-crayola: (
-    base: #FF675F
+    base: #ff675f,
   ),
   apricot: (
-    light: #FFFBFA,
-    base: #F8C0A7,
-    dark: #FD8F5E,
+    light: #fffbfa,
+    base: #f8c0a7,
+    dark: #fd8f5e,
   ),
   brown: (
     base: #bb720a,
@@ -80,10 +81,10 @@ $bg: palette(grey, 800);
 // Black opacity
 //-----------
 $black-87: rgba(0, 0, 0, 0.87);
-$black-54: rgba(0, 0, 0, 0.60);
+$black-54: rgba(0, 0, 0, 0.6);
 $black-37: rgba(0, 0, 0, 0.37);
-$black-20: rgba(0, 0, 0, 0.20);
-$black-10: rgba(0, 0, 0, 0.10);
+$black-20: rgba(0, 0, 0, 0.2);
+$black-10: rgba(0, 0, 0, 0.1);
 $black-4: rgba(0, 0, 0, 0.04);
 
 // States
@@ -96,7 +97,8 @@ $info: palette(grey, 600);
 // Fonts
 //-----------
 $primary-font-family: "Inter", "Helvetica", "Arial", sans-serif;
-$secondary-font-family: "raptor_v2_premiumbold", "Helvetica", "Arial", sans-serif;
+$secondary-font-family: "raptor_v2_premiumbold", "Helvetica", "Arial",
+  sans-serif;
 $base-font-size: 14px;
 $base-line-height: 1.4em;
 

frontend/components/commons/results/RecordActionButtons.spec.js

@@ -0,0 +1,69 @@
+import { shallowMount } from "@vue/test-utils";
+import RecordActionButtons from "./RecordActionButtons";
+import BaseButton from "@/components/base/BaseButton";
+
+let wrapper = null;
+const options = {
+  stubs: {
+    "base-button": BaseButton,
+  },
+  propsData: {
+    actions: [
+      {
+        id: "validate",
+        name: "Validate",
+        active: true,
+      },
+      {
+        id: "discard",
+        name: "Discard",
+        active: true,
+      },
+      {
+        id: "clear",
+        name: "Clear",
+        active: false,
+      },
+    ],
+  },
+};
+beforeEach(() => {
+  wrapper = shallowMount(RecordActionButtons, options);
+});
+
+afterEach(() => {
+  wrapper.destroy();
+});
+
+describe("RecordActionButtonsComponent", () => {
+  it("render the component", () => {
+    expect(wrapper.is(RecordActionButtons)).toBe(true);
+  });
+  it("expect to show validate button active", async () => {
+    testIfButtonIsDisabled("validate", undefined);
+  });
+  it("expect to show discard button active", async () => {
+    testIfButtonIsDisabled("discard", undefined);
+  });
+  it("expect to show clear button disabled", async () => {
+    testIfButtonIsDisabled("clear", "disabled");
+  });
+  it("expect to emit validate on click validate button", async () => {
+    testIfEmittedIsCorrect("validate");
+  });
+  it("expect to emit discard on click discard button", async () => {
+    testIfEmittedIsCorrect("discard");
+  });
+  it("expect to emit clear on click clear button", async () => {
+    testIfEmittedIsCorrect("clear");
+  });
+});
+
+const testIfButtonIsDisabled = async (button, disabled) => {
+  const actionButton = wrapper.find(`.record__actions-button--${button}`);
+  expect(actionButton.attributes().disabled).toBe(disabled);
+};
+const testIfEmittedIsCorrect = async (button) => {
+  wrapper.find(`.record__actions-button--${button}`).vm.$emit("click");
+  expect(wrapper.emitted()).toHaveProperty(button);
+};

frontend/components/commons/results/RecordActionButtons.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="record__actions-buttons">
+    <base-button
+      v-for="{ id, name, active } in actions"
+      :key="id"
+      :class="`record__actions-button--${id}`"
+      :disabled="!active"
+      @click="onAction(id)"
+    >
+      <svgicon :name="id" width="22" height="22" />
+      {{ name }}
+    </base-button>
+  </div>
+</template>
+
+<script>
+import "assets/icons/validate";
+import "assets/icons/discard";
+import "assets/icons/clear";
+export default {
+  props: {
+    actions: {
+      type: Array,
+      required: true,
+      validator(actions) {
+        return actions.map((action) =>
+          ["validate", "discard", "clear"].includes(action.id)
+        );
+      },
+    },
+  },
+  methods: {
+    onAction(id) {
+      this.$emit(id);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$recordActions: (
+  validate: palette(green),
+  discard: palette(grey, 400),
+  clear: palette(blue, 100),
+);
+.record {
+  &__actions-buttons {
+    display: flex;
+    gap: $base-space * 4;
+    margin-top: 1.5em;
+  }
+  @each $action, $color in $recordActions {
+    &__actions-button--#{$action} {
+      padding: 0;
+      color: $color;
+      @include font-size(14px);
+      &:hover {
+        color: darken($color, 10%);
+      }
+      &:active .svg-icon {
+        animation: zoom-in-out 0.2s linear;
+      }
+      &[disabled] {
+        opacity: 30%;
+      }
+    }
+  }
+}
+@keyframes zoom-in-out {
+  0% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>

frontend/components/commons/results/RecordExtraActions.vue

@@ -29,13 +29,6 @@
           <span>Copy text</span>
         </div>
       </base-action-tooltip>
-      <div
-        v-if="allowChangeStatus"
-        :class="recordStatus === 'Discarded' ? 'disabled' : null"
-        @click="onChangeRecordStatus('Discarded')"
-      >
-        <span>Discard record</span>
-      </div>
     </div>
   </div>
 </template>
@@ -52,17 +45,10 @@ export default {
     }),
   ],
   props: {
-    allowChangeStatus: {
-      type: Boolean,
-      default: false,
-    },
     recordId: {
       type: String | Number,
       required: true,
     },
-    recordStatus: {
-      type: String,
-    },
     recordClipboardText: {
       type: Array | String,
       required: true,
@@ -88,13 +74,6 @@ export default {
     },
   },
   methods: {
-    // TODO: call vuex-actions here instead of trigger event
-    onChangeRecordStatus(status) {
-      if (this.recordStatus !== status) {
-        this.$emit("on-change-record-status", status);
-      }
-      this.close();
-    },
     showRecordInfoModal() {
       this.$emit("show-record-info-modal");
       this.close();