Add new render for task tags [SCI-10106]

app/javascript/vue/my_modules/modals/tags.vue

@@ -37,13 +37,13 @@
                   <label class="sci-checkbox-label"></label>
                 </div>
                 <div v-if="!tag.editing" @click="startEditMode(tag)"
-                     class="flex grow"
-                     :class="{'cursor-pointer': canManage}"
-                >
-                  <div class="h-6 px-1.5 flex items-center truncate text-sn-white rounded" :style="{ backgroundColor: tag.attributes.color }">
+                     class="h-6 px-1.5 flex items-center max-w-80 truncate text-sn-white rounded"
+                     :class="{
+                       'cursor-pointer': canManage
+                     }"
+                     :style="{ backgroundColor: tag.attributes.color }">
                   {{ tag.attributes.name }}
                 </div>
-                </div>
                 <template v-else>
                   <GeneralDropdown>
                     <template v-slot:field>
@@ -63,7 +63,7 @@
                       </div>
                     </template>
                   </GeneralDropdown>
-                  <input type="text" :value="tag.attributes.name" class="border-0 focus:outline-none bg-transparent" @change="updateTagName($event.target.value, tag)"/>
+                  <input type="text" :value="tag.attributes.name" class="border-0 grow focus:outline-none bg-transparent" @change="updateTagName($event.target.value, tag)"/>
                   <i @click.stop="finishEditMode($event, tag)" class="sn-icon sn-icon-check cursor-pointer ml-auto"></i>
                 </template>
                 <i  v-if="canManage" @click.stop="deleteTag(tag)"

app/javascript/vue/my_modules/renderers/tags.vue

@@ -1,16 +1,45 @@
 <template>
-
-  <span v-if="params.data.tags > 0" @click.stop="openModal" class="text-sn-blue cursor-pointer">
-    {{ params.data.tags }}
-  </span>
-  <span v-else-if="params.data.permissions.manage_tags" @click.stop="openModal" class="text-sn-blue cursor-pointer">
-    {{ i18n.t('experiments.table.add_tag') }}
-  </span>
-  <span v-else>{{ i18n.t('experiments.table.not_set') }}</span>
+  <div class="flex items-center gap-1.5 h-9 mt-0.5">
+    <template v-if="params.data.tags.length > 0 || params.data.permissions.manage_tags">
+      <div v-if="params.data.tags.length > 0"
+           class="h-6 px-1.5 flex items-center rounded text-white max-w-[150px]"
+           :style="{'background': params.data.tags[0].color}">
+        <div class="truncate">{{ params.data.tags[0].name }}</div>
+      </div>
+      <GeneralDropdown v-if="params.data.tags.length > 1" >
+        <template v-slot:field>
+          <div class="h-6 min-w-[24px] text-sn-dark-grey flex items-center justify-center rounded-full text-[.625rem]
+                    bg-sn-light-grey border !border-sn-sleepy-grey cursor-pointer">
+            <span>+{{ params.data.tags.length - 1 }}</span>
+          </div>
+        </template>
+        <template v-slot:flyout>
+          <div>
+            {{ i18n.t('experiments.table.used_tags') }}
+          </div>
+          <hr class="my-2" />
+          <div class="max-h-[200px] overflow-y-auto flex flex-wrap gap-1.5 max-w-[240px]">
+            <div v-for="tag in params.data.tags" :key="tag.id"
+                class="h-6 px-1.5 flex items-center rounded text-white max-w-[150px]"
+                :style="{'background': tag.color}">
+              <div class="truncate">{{ tag.name }}</div>
+            </div>
+          </div>
+        </template>
+      </GeneralDropdown>
+      <div v-if="params.data.permissions.manage_tags" @click.stop="openModal"
+        class="cursor-pointer text-sn-sleep-grey border !border-dashed h-6 w-6 flex items-center
+               justify-center !border-sn-sleep-grey rounded-full ">
+        <i class="sn-icon sn-icon-new-task"></i>
+    </div>
+    </template>
+    <span v-else>{{ i18n.t('experiments.table.not_set') }}</span>
+  </div>
 </template>
-
 <script>
 
+import GeneralDropdown from '../../shared/general_dropdown.vue';
+
 export default {
   name: 'TagsRenderer',
   props: {
@@ -18,6 +47,9 @@ export default {
       required: true
     }
   },
+  components: {
+    GeneralDropdown
+  },
   methods: {
     openModal() {
       this.params.dtComponent.$emit('editTags', null, [this.params.data]);

app/serializers/lists/my_module_serializer.rb

@@ -132,7 +132,13 @@ module Lists
     end
 
     def tags
-      object.tags.length
+      object.tags.map do |tag|
+        {
+          id: tag.id,
+          name: tag.name,
+          color: tag.color
+        }
+      end
     end
 
     def comments

config/locales/en.yml

@@ -1601,6 +1601,7 @@ en:
         archived_tasks: 'Go to Archived tasks'
         active_tasks: 'Go to Active tasks'
       add_tag: '+ Add tag'
+      used_tags: 'Used tags'
       search: 'Manage assignees'
       not_set: 'not set'
       archive_group: