Merge pull request #338 from weni-ai/nexus-1263-fail-status-on-conten…

…t-items [Nexus-1263] Content Base: Failure Status on Items
weni-ai · May 23, 2024 · 9b11575 · 9b11575
2 parents 5f563ee + 8f19ff5
commit 9b11575
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 62 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -156,6 +156,8 @@
       "sites": "Websites",
       "text": "Text"
     },
+    "file_with_error": "File with error. Delete and add it again.",
+    "site_with_error": "Site with error. Delete and add it again.",
     "files": {
       "upload_content": "Upload content from files",
       "drag_and_drop_your_file_here": "Drag and drop your file here to add the content to the AI knowledge base.",

diff --git a/src/locales/es.json b/src/locales/es.json
@@ -156,6 +156,8 @@
       "sites": "Sitios",
       "text": "Texto"
     },
+    "file_with_error": "Archivo con error. Bórrelo y añádalo de nuevo.",
+    "site_with_error": "Sitio con error. Borrar y añadir de nuevo.",
     "files": {
       "upload_content": "Cargar contenido a partir de archivos",
       "drag_and_drop_your_file_here": "Arrastre y suelte su archivo aquí para añadir el contenido a la base de conocimientos de IA.",

diff --git a/src/locales/pt_br.json b/src/locales/pt_br.json
@@ -156,6 +156,8 @@
       "sites": "Sites",
       "text": "Texto"
     },
+    "file_with_error": "Arquivo com erro. Exclua e adicione-o novamente.",
+    "site_with_error": "Site com erro. Exclua e adicione-o novamente.",
     "files": {
       "upload_content": "Carregar conteúdo de arquivos",
       "drag_and_drop_your_file_here": "Arraste e solte seu arquivo aqui para adicionar o conteúdo à base de conhecimento da IA.",

diff --git a/src/views/repository/content/BasesForm.vue b/src/views/repository/content/BasesForm.vue
@@ -569,7 +569,11 @@ export default {
         data.results
           .map((file) => ({
             ...file,
-            status: file.status === 'success' ? 'uploaded' : 'processing',
+            status:
+              {
+                Processing: 'processing',
+                success: 'uploaded',
+              }[file.status] || file.status,
           }))
           .filter(
             ({ uuid }) =>
@@ -610,7 +614,11 @@ export default {
               ...site,
               extension_file: 'site',
               created_file_name: site.link,
-              status: site.status === 'success' ? 'uploaded' : 'processing',
+              status:
+                {
+                  Processing: 'processing',
+                  success: 'uploaded',
+                }[site.status] || site.status,
             }))
             .filter(
               ({ uuid }) =>

diff --git a/src/views/repository/content/BasesFormFilesItem.vue b/src/views/repository/content/BasesFormFilesItem.vue
@@ -1,66 +1,75 @@
 <template>
-  <div
-    :class="[
-      'files-list__content__file',
-      { 'files-list__content__file--compressed': compressed },
-    ]"
+  <UnnnicToolTip
+    side="top"
+    :text="failureMessage"
+    :enabled="file.status === 'fail'"
   >
-    <div class="files-list__content__file__icon">
-      <UnnnicIcon
-        :icon="icon"
-        class="files-list__content__file__icon__itself"
-        :size="compressed ? 'sm' : 'avatar-nano'"
-      />
-    </div>
-
-    <div class="files-list__content__file__content">
-      <div class="files-list__content__file__content__title">
-        {{ name }}
-      </div>
-
-      <div class="files-list__content__file__content__status">
-        <template v-if="file.status === 'uploading'">
-          {{ $t('content_bases.files.status.uploading') }}
-        </template>
-      </div>
-    </div>
-
-    <div class="files-list__content__file__actions">
-      <UnnnicIcon
-        v-if="downloading"
-        icon="cached"
-        size="sm"
-        scheme="neutral-cloudy"
-        class="files-list__content__file__actions__loading"
-      />
-
-      <UnnnicIcon
-        v-else-if="file.status === 'uploaded' && file.extension_file !== 'site'"
-        icon="download"
-        size="sm"
-        class="files-list__content__file__actions__icon"
-        @click.native.stop="download"
-      />
-
-      <UnnnicIcon
-        v-if="!file.uuid.startsWith('temp-')"
-        icon="delete"
-        size="sm"
-        class="files-list__content__file__actions__icon"
-        @click.native.stop="$emit('remove')"
-      />
-    </div>
-
-    <div
-      v-if="file.status === 'uploading'"
-      :class="['files-list__content__file__status-bar', file.extension_file]"
+    <section
+      :class="[
+        'files-list__content__file',
+        `files-list__content__file--status-${file.status}`,
+        { 'files-list__content__file--compressed': compressed },
+      ]"
     >
-      <div
-        class="files-list__content__file__status-bar__filled"
-        :style="{ width: `${file.progress * 100}%` }"
-      ></div>
-    </div>
-  </div>
+      <section class="files-list__content__file__icon">
+        <UnnnicIcon
+          :icon="file.status === 'fail' ? 'warning' : icon"
+          class="files-list__content__file__icon__itself"
+          :size="compressed ? 'sm' : 'avatar-nano'"
+        />
+      </section>
+
+      <header class="files-list__content__file__content">
+        <p class="files-list__content__file__content__title">
+          {{ name }}
+        </p>
+
+        <p class="files-list__content__file__content__status">
+          <template v-if="file.status === 'uploading'">
+            {{ $t('content_bases.files.status.uploading') }}
+          </template>
+        </p>
+      </header>
+
+      <section class="files-list__content__file__actions">
+        <UnnnicIcon
+          v-if="downloading"
+          icon="cached"
+          size="sm"
+          scheme="neutral-cloudy"
+          class="files-list__content__file__actions__loading"
+        />
+
+        <UnnnicIcon
+          v-else-if="
+            file.status === 'uploaded' && file.extension_file !== 'site'
+          "
+          icon="download"
+          size="sm"
+          class="files-list__content__file__actions__icon"
+          @click.native.stop="download"
+        />
+
+        <UnnnicIcon
+          v-if="!file.uuid.startsWith('temp-')"
+          icon="delete"
+          size="sm"
+          class="files-list__content__file__actions__icon"
+          @click.native.stop="$emit('remove')"
+        />
+      </section>
+
+      <section
+        v-if="file.status === 'uploading'"
+        :class="['files-list__content__file__status-bar', file.extension_file]"
+      >
+        <div
+          class="files-list__content__file__status-bar__filled"
+          :style="{ width: `${file.progress * 100}%` }"
+        ></div>
+      </section>
+    </section>
+  </UnnnicToolTip>
 </template>
 
 <script>
@@ -103,6 +112,13 @@ export default {
         : this.fileName.slice(this.fileName.lastIndexOf('.') + 1);
     },
 
+    failureMessage() {
+      const message =
+        { site: 'site_with_error' }[this.extension] || 'file_with_error';
+
+      return this.$t(`content_bases.${message}`);
+    },
+
     icon() {
       return (
         {
@@ -182,6 +198,10 @@ export default {
   align-items: center;
   position: relative;
 
+  p {
+    margin: 0;
+  }
+
   &--compressed {
     column-gap: $unnnic-spacing-xs;
 
@@ -190,6 +210,23 @@ export default {
     }
   }
 
+  &--status-fail {
+    outline-color: $unnnic-color-aux-red-500;
+    background-color: $unnnic-color-aux-red-100;
+    color: $unnnic-color-aux-red-500;
+
+    .files-list__content__file__icon {
+      background-color: inherit;
+    }
+
+    .files-list__content__file__icon__itself,
+    .files-list__content__file__content__title,
+    .files-list__content__file__actions__icon,
+    .files-list__content__file__actions__loading {
+      color: inherit;
+    }
+  }
+
   &__icon {
     display: flex;
     background-color: $unnnic-color-neutral-light;