PET UI fixes [SCI-12107]

app/javascript/vue/experiments/renderers/status.vue

@@ -12,7 +12,11 @@
   </div>
   <div v-else class="flex items-center gap-2 py-0.5">
     <div class="w-3 h-3 rounded-full"
-         :class="this.statusColor(params.data.status_cell.status)"></div>
+         :class="{
+           'bg-sn-grey-500': params.data.status_cell.status === 'not_started',
+           'bg-sn-science-blue': params.data.status_cell.status === 'in_progress',
+           'bg-sn-alert-green': params.data.status_cell.status === 'done'
+         }"></div>
       <span class="truncate">
         {{ this.i18n.t(`experiments.table.column.status.${params.data.status_cell.status}`) }}
       </span>
@@ -34,16 +38,6 @@ export default {
     }
   },
   methods: {
-    statusColor(status) {
-      let color = 'bg-sn-grey-500';
-      if (status === 'in_progress') {
-        color = 'bg-sn-science-blue';
-      } else if (status === 'done') {
-        color = 'bg-sn-alert-green';
-      }
-
-      return color;
-    },
     optionRenderer(option) {
       return `
         <div class="flex items-center gap-2">

app/javascript/vue/my_modules/renderers/designated_users.vue

@@ -7,11 +7,10 @@
             <img :src="user.avatar" class="w-7 h-7 rounded-full" />
           </div>
           <div v-if="hiddenUsers.length > 0" :title="hiddenUsersTitle"
-              class="flex shrink-0 items-center justify-center w-7 h-7 text-xs
-                    rounded-full bg-sn-dark-grey text-sn-white">
+              class="flex shrink-0 items-center justify-center w-7 h-7 text-xs rounded-full bg-sn-dark-grey text-sn-white">
             +{{ hiddenUsers.length }}
           </div>
-          <div v-if="canManage" class="flex items-center shrink-0 justify-center w-7 h-7 rounded-full bg-sn-light-grey text-sn-dark-grey">
+          <div v-if="canManage" class="flex items-center shrink-0 justify-center w-7 h-7 rounded-full border-dashed bg-sn-white text-sn-sleepy-grey border-sn-sleepy-grey">
             <i class="sn-icon sn-icon-new-task"></i>
           </div>
         </div>

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

@@ -3,15 +3,16 @@
     <template v-if="params.data.tags.length > 0 || params.data.permissions.manage_tags">
       <GeneralDropdown v-if="params.data.tags.length > 0">
         <template v-slot:field>
-          <div
-              class="sci-tag text-white max-w-[150px]"
-              :style="{'background': params.data.tags[0].color}">
-            <div class="truncate">{{ params.data.tags[0].name }}</div>
-          </div>
-          <div v-if="params.data.tags.length > 1"
-               class="h-6 min-w-[24px] text-sn-dark-grey inline-flex items-center justify-center rounded-full text-[.625rem]
-                      ml-1.5 bg-sn-light-grey border !border-sn-sleepy-grey cursor-pointer">
-            <span>+{{ params.data.tags.length - 1 }}</span>
+          <div class="flex items-center gap-1.5">
+            <div
+                class="sci-tag text-white max-w-[150px]"
+                :style="{'background': params.data.tags[0].color}">
+              <div class="truncate">{{ params.data.tags[0].name }}</div>
+            </div>
+            <div v-if="params.data.tags.length > 1"
+                class="flex shrink-0 items-center justify-center w-7 h-7 text-xs rounded-full bg-sn-dark-grey text-sn-white">
+              <span>+{{ params.data.tags.length - 1 }}</span>
+            </div>
           </div>
         </template>
         <template v-slot:flyout>
@@ -29,8 +30,7 @@
         </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 ">
+        class="flex items-center shrink-0 justify-center w-7 h-7 rounded-full border-dashed bg-sn-white text-sn-sleepy-grey border-sn-sleepy-grey">
         <i class="sn-icon sn-icon-new-task"></i>
     </div>
     </template>

app/javascript/vue/projects/renderers/status.vue

@@ -1,15 +1,27 @@
 <template>
-<div v-if="params.data.status" class="py-0.5">
-  <SelectDropdown
-    :options="params.statusesList"
-    :value="params.data.status"
-    @change="changeStatus"
-    size="xs"
-    :borderless="true"
-    :optionRenderer="optionRenderer"
-    :labelRenderer="optionRenderer"
-    :disabled="!params.data.urls.update"
-  />
+<div v-if="params.data.status">
+  <div v-if="params.data.urls.update" class="py-0.5">
+    <SelectDropdown
+      :options="params.statusesList"
+      :value="params.data.status"
+      @change="changeStatus"
+      size="xs"
+      :borderless="true"
+      :optionRenderer="optionRenderer"
+      :labelRenderer="optionRenderer"
+    />
+  </div>
+  <div v-else class="flex items-center gap-2 py-0.5">
+    <div class="w-3 h-3 rounded-full"
+        :class="{
+          'bg-sn-grey-500': params.data.status === 'not_started',
+          'bg-sn-science-blue': params.data.status === 'in_progress',
+          'bg-sn-alert-green': params.data.status === 'done'
+        }"></div>
+      <span class="truncate">
+        {{ this.i18n.t(`projects.index.status.${params.data.status}`) }}
+      </span>
+  </div>
 </div>
 </template>
 

app/javascript/vue/projects/renderers/superviser.vue

@@ -2,7 +2,7 @@
   <div v-if="params.data.supervised_by">
     <GeneralDropdown v-if="canManage" @open="openFlyout" @close="closeFlyout" position="right">
       <template v-slot:field>
-        <div class="flex items-center gap-1 cursor-pointer h-9">
+        <div class="flex items-center gap-1 cursor-pointer h-9 px-1" :class="{ 'bg-sn-super-light-blue': opened }">
           <div v-if="params.data.supervised_by.id" class="flex items-center gap-2" :title="params.data.supervised_by.name">
             <img :src="params.data.supervised_by.avatar" class="w-7 h-7 rounded-full" />
             <span>{{ params.data.supervised_by.name }}</span>
@@ -67,7 +67,8 @@ export default {
   data() {
     return {
       allUsers: [],
-      query: ''
+      query: '',
+      opened: false
     };
   },
   watch: {
@@ -83,6 +84,7 @@ export default {
   methods: {
     openFlyout() {
       this.loadUsers();
+      this.opened = true;
       this.$nextTick(() => {
         if (this.$refs.searchInput) {
           this.$refs.searchInput.focus();
@@ -102,6 +104,7 @@ export default {
     },
     closeFlyout() {
       this.query = '';
+      this.opened = false;
     },
     selectUser(user) {
       if (user[0] === this.params.data.supervised_by.id) {

app/javascript/vue/shared/datatable/renderers/description.vue

@@ -7,7 +7,7 @@
               @click.stop="showDescriptionModal">
           {{ removeTags(params.data.description) }}
         </span>
-        <span v-if="params.data.description && params.data.description.length > 0"
+        <span v-if="params.data.description && removeTags(params.data.description).length > 0"
               @click.stop="showDescriptionModal"
               class="text-sn-blue cursor-pointer shrink-0 inline-block text-sm leading-[unset]">
           {{ i18n.t('experiments.card.more') }}