Merge pull request #213 from weni-ai/feat/add-redirect-to-chats-ongoi…

…ng-rooms

[ENGAGE-2304] - Add redirect to chats from ongoing rooms

src/components/insights/widgets/HumanServiceAgentsTable/index.vue

@@ -69,7 +69,7 @@ export default {
     },
 
     formattedItems() {
-      if (!this.formattedHeaders.length || !this.items.length) return [];
+      if (!this.formattedHeaders?.length || !this.items?.length) return [];
 
       const formattedItems = this.items.map((item) => ({
         ...item,
@@ -179,7 +179,7 @@ export default {
     :hover.unnnic-table-next__body-row {
       cursor: pointer;
       background-color: $unnnic-color-neutral-lightest;
-      text-decoration: underline;
+      font-weight: $unnnic-font-weight-bold;
     }
 
     span[data-testid='arrow-asc-icon'] {

src/components/insights/widgets/TableGroup.vue

@@ -20,6 +20,7 @@
       >
         <UnnnicTableNext
           v-if="activeTable.headers"
+          :class="`table-group__table-${key}`"
           data-testid="table"
           :pagination="page + 1"
           :headers="activeTable.headers"
@@ -28,6 +29,7 @@
           :paginationInterval="paginationInterval"
           :isLoading="isLoading"
           @update:pagination="page = $event - 1"
+          @row-click="rowClick"
         />
       </template>
     </UnnnicTab>
@@ -70,6 +72,10 @@ export default {
       type: Number,
       default: 0,
     },
+    initialTab: {
+      type: String,
+      default: '',
+    },
   },
 
   emits: ['request-data'],
@@ -138,7 +144,7 @@ export default {
         const content = dynamicHeaders.map((header) =>
           formatRowValue(row[header.value]),
         );
-        return { content };
+        return { ...row, link: undefined, url_link: row.link?.url, content };
       });
 
       return {
@@ -181,14 +187,22 @@ export default {
   },
 
   unmounted() {
-    const newQuery = this.$route.query;
-    delete newQuery.slug;
     this.$router.replace({
       ...this.$route,
-      query: newQuery,
+      slug: undefined,
     });
   },
 
+  mounted() {
+    if (this.initialTab) this.changeActiveTabName(this.initialTab);
+    else {
+      Object.keys(this.tabs).forEach((tabKey) => {
+        if (this.tabs[tabKey].is_default) this.changeActiveTabName(tabKey);
+      });
+    }
+    if (this.$route.query.slug) this.emitRequestData();
+  },
+
   methods: {
     changeActiveTabName(newActiveTabName) {
       this.activeTabName = newActiveTabName;
@@ -197,12 +211,35 @@ export default {
       const { offset, limit } = this.paginationConfig;
       this.$emit('request-data', { offset, limit });
     },
+    rowClick(row) {
+      if (row.url_link) {
+        const [path, query] = row.url_link.split('?');
+        window.parent.postMessage(
+          {
+            event: 'redirect',
+            path: path + 'insights?' + query,
+          },
+          '*',
+        );
+      }
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .table-group {
   overflow-y: auto;
+
+  :deep(.table-group__table-in_progress) {
+    display: flex;
+    overflow: auto;
+
+    :hover.unnnic-table-next__body-row {
+      cursor: pointer;
+      background-color: $unnnic-color-neutral-lightest;
+      font-weight: $unnnic-font-weight-bold;
+    }
+  }
 }
 </style>

src/components/insights/widgets/__tests__/TableGroup.spec.js

@@ -60,7 +60,9 @@ describe('TableGroup', () => {
       expect(table.props('headers')).toEqual([
         { content: 'Field 1', value: 'field1' },
       ]);
-      expect(table.props('rows')).toEqual([{ content: ['Value'] }]);
+      expect(table.props('rows')).toEqual([
+        { field1: 'Value', content: ['Value'] },
+      ]);
     });
 
     it('returns null when no activeTab is found and no default tab is available', () => {
@@ -100,7 +102,7 @@ describe('TableGroup', () => {
     it('computes dynamic rows from the provided data', () => {
       const rows = wrapper.vm.activeTable.rows;
 
-      expect(rows).toEqual([{ content: ['Value'] }]);
+      expect(rows).toEqual([{ field1: 'Value', content: ['Value'] }]);
     });
 
     it('formats row values correctly for dates, arrays, and strings', async () => {
@@ -126,7 +128,7 @@ describe('TableGroup', () => {
       await wrapper.setData({ page: 1 });
 
       expect(wrapper.emitted('request-data')).toBeTruthy();
-      expect(wrapper.emitted('request-data')[0]).toEqual([
+      expect(wrapper.emitted('request-data')[1]).toEqual([
         { offset: 5, limit: 5 },
       ]);
     });