feat: UI Metadata info component (#4851)

This PR allows the visualization of the metadata clicking on the menu at
the top of the record

closes #4788

---------

Co-authored-by: Damián Pumar <[email protected]>

Author: leiyre

argilla-frontend/assets/icons/index.js

@@ -23,6 +23,7 @@ require('./filter')
 require('./focus-mode')
 require('./hand-labeling')
 require('./info')
+require('./kebab')
 require('./link')
 require('./log-out')
 require('./matching')

argilla-frontend/assets/icons/kebab.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({
+  'kebab': {
+    width: 20,
+    height: 21,
+    viewBox: '0 0 20 21',
+    data: '<path pid="0" d="M11.875 4.875a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM11.875 10.5a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM11.875 16.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0z" _fill="#000"/>'
+  }
+})

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

@@ -133,6 +133,7 @@ $primary-font-family: "Inter", "Helvetica", "Arial", sans-serif;
 $secondary-font-family: "raptor_v2_premiumbold", "Helvetica", "Arial",
   sans-serif;
 $tertiary-font-family: "Roboto Condensed", sans-serif;
+$quaternary-font-family: "Roboto Mono", monospace;
 $base-font-size: 14px;
 $base-line-height: 1.4em;
 

argilla-frontend/components/base/base-action-tooltip/BaseActionTooltip.vue

@@ -5,7 +5,7 @@
   >
     <slot></slot>
     <span
-      v-if="showTooltip && tooltip"
+      v-if="tooltip && showTooltip"
       class="tooltip"
       :class="tooltipClass"
       v-text="tooltip"
@@ -48,7 +48,7 @@ export default {
 <style scoped lang="scss">
 .tooltip {
   position: absolute;
-  top: 100%;
+  top: 0;
   background: palette(grey, 100);
   display: inline-block;
   border-radius: $border-radius-s;
@@ -59,10 +59,10 @@ export default {
   white-space: nowrap;
   font-family: $primary-font-family !important;
   &.--left {
-    right: 0;
+    right: 100%;
   }
   &.--right {
-    left: 0;
+    left: 100%;
   }
   &__container {
     position: relative;

argilla-frontend/components/base/base-dropdown/BaseDropdown.vue

@@ -42,6 +42,11 @@
         <slot name="dropdown-content" />
       </div>
     </transition>
+    <div
+      @click="onClose"
+      v-if="visible && freezingPage"
+      class="dropdown--frozen-page"
+    ></div>
   </div>
 </template>
 <script>
@@ -60,6 +65,10 @@ export default {
       default: "parent",
       validator: (value) => ["parent", "viewport"].includes(value),
     },
+    freezingPage: {
+      type: Boolean,
+      default: false,
+    },
     gap: {
       type: Number,
       default: 8,
@@ -70,6 +79,7 @@ export default {
       dropdownTop: 0,
       dropdownLeft: 0,
       inViewport: true,
+      frozenScrollParent: null,
     };
   },
   computed: {
@@ -83,6 +93,14 @@ export default {
         this.setViewportPosition();
       });
     },
+    freezingPage(value) {
+      if (value) {
+        this.frozenScrollParent = this.getScrollableParent(this.$refs.dropdown);
+        this.frozenScrollParent.style.overflow = "hidden";
+      } else {
+        this.frozenScrollParent.style.overflow = "auto";
+      }
+    },
   },
   methods: {
     onClose() {
@@ -108,21 +126,21 @@ export default {
 
       this.dropdownLeft = left;
     },
-    isScrollable(el) {
-      const hasScrollableContent =
-        el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
-      const overflowYStyle = window.getComputedStyle(el).overflow;
-      const isOverflowHidden = overflowYStyle.indexOf("hidden") !== -1;
-      return hasScrollableContent && !isOverflowHidden;
-    },
     getScrollableParent(element) {
-      const isBody = !element || element === document.body;
-
-      if (isBody) return document.body;
+      if (!element) {
+        return undefined;
+      }
 
-      if (this.isScrollable(element)) return element;
+      let parent = element.parentElement;
+      while (parent) {
+        const { overflow } = window.getComputedStyle(parent);
+        if (overflow.split(" ").every((o) => o === "auto" || o === "scroll")) {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
 
-      return this.getScrollableParent(element.parentNode);
+      return document.documentElement;
     },
     isInViewport(element) {
       const rect = element.getBoundingClientRect();
@@ -189,5 +207,18 @@ export default {
     border-radius: $border-radius;
     background: palette(white);
   }
+  &--frozen-page {
+    &:before {
+      content: "";
+      position: fixed;
+      height: 100vh;
+      width: 100vw;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 2;
+    }
+  }
 }
 </style>

argilla-frontend/components/feedback-task/container/fields/Record.vue

@@ -61,9 +61,9 @@ export default {
   background: palette(white);
   border: 1px solid palette(grey, 600);
   border-radius: $border-radius-m;
-  &--focus {
-    overflow-y: auto;
-    overflow-x: hidden;
+  &:has(.dropdown__content),
+  &:has(.checkbox.checked) {
+    border-color: $black-20;
   }
   &__wrapper {
     flex: 1;
@@ -87,6 +87,10 @@ export default {
       height: 100%;
       overflow: auto;
     }
+    .record--focus & {
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
   }
   &__fixed-header {
     padding: $base-space * 2;

argilla-frontend/components/feedback-task/container/fields/RecordFieldsHeader.vue

@@ -25,6 +25,7 @@
         :recordId="record.id"
       />
       <RecordStatus :recordStatus="record.status" />
+      <RecordMenu :record="record" />
     </div>
   </div>
 </template>

argilla-frontend/components/feedback-task/container/fields/RecordMenu.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="record-menu">
+    <BaseDropdown
+      :freezing-page="visibleMetadataInfo"
+      :visible="dropdownIsVisible"
+      @visibility="onVisibility"
+    >
+      <template slot="dropdown-header">
+        <BaseButton class="record-menu__header">
+          <svgicon name="kebab" width="20" height="20" />
+        </BaseButton>
+      </template>
+      <template slot="dropdown-content">
+        <RecordMetadataInfo v-if="visibleMetadataInfo" :record="record" />
+        <ul v-else class="record-menu__content">
+          <li>
+            <BaseButton @on-click="viewMetadata">
+              {{ $t("viewMetadata") }}
+            </BaseButton>
+          </li>
+          <li>
+            <BaseButton @on-click="copyRecord">
+              {{ $t("copyRecord") }}
+            </BaseButton>
+          </li>
+        </ul>
+      </template>
+    </BaseDropdown>
+  </div>
+</template>
+
+<script>
+import "assets/icons/kebab";
+export default {
+  props: {
+    record: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      dropdownIsVisible: false,
+      visibleMetadataInfo: false,
+    };
+  },
+  methods: {
+    viewMetadata() {
+      this.visibleMetadataInfo = true;
+    },
+    copyRecord() {
+      this.dropdownIsVisible = false;
+      this.$copyToClipboard(
+        this.record.fields
+          .map((field) => `${field.title}\n${field.content}`)
+          .join("\n")
+      );
+    },
+    onVisibility(isVisible) {
+      this.visibleMetadataInfo = false;
+      this.dropdownIsVisible = isVisible;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.record-menu {
+  &__header {
+    padding: 0;
+    color: $black-54;
+    margin-right: -$base-space;
+    &:hover {
+      color: $black-87;
+    }
+  }
+  &__content {
+    list-style: none;
+    padding: $base-space;
+    margin: 0;
+    li {
+      border-radius: $border-radius-s;
+      transition: background-color 0.3s ease;
+      &:hover {
+        background: $black-4;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+      }
+    }
+    .button {
+      display: block;
+      max-width: 200px;
+      text-align: left;
+      padding: $base-space;
+      font-weight: normal;
+      @include truncate;
+    }
+  }
+  :deep(.dropdown__content) {
+    min-width: 100%;
+    left: auto;
+    right: 0;
+    top: calc(100% + $base-space * 2);
+  }
+}
+</style>