From cb3f957e362dbbbfcff12e283eaad7ca4f2b4b31 Mon Sep 17 00:00:00 2001
From: vashjs <vadym.shchekotilin@gmail.com>
Date: Wed, 23 Oct 2024 21:33:34 +0200
Subject: [PATCH] UIPQB-143 Translate language codes to languages in the
 ResultsViewer

---
 .../ResultViewer/ResultViewer.test.js         | 13 +++++++++++
 src/QueryBuilder/ResultViewer/helpers.js      | 22 +++++++++++++------
 src/hooks/useAsyncDataSource.js               |  4 +++-
 test/jest/data/content.js                     |  1 +
 test/jest/data/entityType.js                  |  2 +-
 5 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/QueryBuilder/ResultViewer/ResultViewer.test.js b/src/QueryBuilder/ResultViewer/ResultViewer.test.js
index 3a48d539..95aa426f 100644
--- a/src/QueryBuilder/ResultViewer/ResultViewer.test.js
+++ b/src/QueryBuilder/ResultViewer/ResultViewer.test.js
@@ -96,6 +96,19 @@ describe('ResultViewer', () => {
     const limit = 200;
     const changePage = jest.fn();
 
+    it('should format language name shortcuts to full name', async () => {
+      const { debug } = render(renderResultViewer({ visibleColumns: ['instance.languages'] }));
+
+      await waitFor(() => {
+        expect(screen.queryByText('ui-plugin-query-builder.result.inProgress')).not.toBeInTheDocument();
+
+        expect(screen.queryByText('Languages')).toBeVisible();
+        expect(screen.queryByText('English | French')).toBeVisible();
+
+        debug(undefined, Infinity);
+      });
+    });
+
     it('should be rendered with pagination', async () => {
       jest.spyOn(pagination, 'usePagination').mockImplementation(() => ({
         limit,
diff --git a/src/QueryBuilder/ResultViewer/helpers.js b/src/QueryBuilder/ResultViewer/helpers.js
index 62c7ab81..0ee8e074 100644
--- a/src/QueryBuilder/ResultViewer/helpers.js
+++ b/src/QueryBuilder/ResultViewer/helpers.js
@@ -1,8 +1,9 @@
 import { FormattedDate } from 'react-intl';
+import { formattedLanguageName } from '@folio/stripes/components';
 import { DATA_TYPES } from '../../constants/dataTypes';
 import { DynamicTable } from './DynamicTable/DynamicTable';
 
-export const getTableMetadata = (entityType, forcedVisibleValues) => {
+export const getTableMetadata = (entityType, forcedVisibleValues, intl) => {
   const defaultColumns = (entityType?.columns?.map((cell) => ({
     label: cell.labelAlias,
     value: cell.name,
@@ -34,22 +35,29 @@ export const getTableMetadata = (entityType, forcedVisibleValues) => {
     const { value, dataType, properties } = column;
 
     formatted[value] = (item) => {
+      const val = item[value];
+
       if (properties?.length) {
-        return <DynamicTable properties={properties} values={item[value]} />;
+        return <DynamicTable properties={properties} values={val} />;
       } else if (dataType === DATA_TYPES.DateType) {
-        return item[value] ? <FormattedDate value={item[value]} /> : '';
+        return val ? <FormattedDate value={val} /> : '';
       } else if (dataType === DATA_TYPES.ArrayType) {
-        return item[value]?.join(' | ');
+        // Special case for instance languages, to format them as translated strings
+        if (value === 'instance.languages') {
+          return val?.map(lang => formattedLanguageName(lang, intl)).join(' | ');
+        }
+
+        return val?.join(' | ');
       } else if (dataType === DATA_TYPES.NumberType || dataType === DATA_TYPES.IntegerType) {
-        if (item[value] === undefined) {
+        if (val === undefined) {
           return '';
         }
 
-        return item[value];
+        return val;
       } else {
         // If value is empty we will return empty string
         // instead of undefined
-        return item[value] || '';
+        return val || '';
       }
     };
 
diff --git a/src/hooks/useAsyncDataSource.js b/src/hooks/useAsyncDataSource.js
index 67475c3f..15ff1cb2 100644
--- a/src/hooks/useAsyncDataSource.js
+++ b/src/hooks/useAsyncDataSource.js
@@ -1,4 +1,5 @@
 import { useQuery, useQueryClient } from 'react-query';
+import { useIntl } from 'react-intl';
 
 import { useNamespace } from '@folio/stripes/core';
 
@@ -33,6 +34,7 @@ export const useAsyncDataSource = ({
   contentQueryKeys,
   forcedVisibleValues,
 }) => {
+  const intl = useIntl();
   const queryClient = useQueryClient();
   const [namespaceKey] = useNamespace();
   const [entityKey] = useNamespace({ key: QUERY_KEYS.QUERY_PLUGIN_PREVIEW_ENTITY_TYPE });
@@ -79,7 +81,7 @@ export const useAsyncDataSource = ({
     defaultVisibleColumns,
     formatter,
     columnWidths,
-  } = getTableMetadata(entityType, forcedVisibleValues);
+  } = getTableMetadata(entityType, forcedVisibleValues, intl);
 
   return {
     contentData,
diff --git a/test/jest/data/content.js b/test/jest/data/content.js
index f9bfd9a2..4198be8a 100644
--- a/test/jest/data/content.js
+++ b/test/jest/data/content.js
@@ -29,6 +29,7 @@ export const content = {
       'item_material_type': 'book',
       'content_id': '993eb55b-c237-44e7-bba5-227ce3ab5d80',
       'sort_seq': 0,
+      'instance.languages': ['eng', 'fre'],
     },
     {
       'user_id': '55c0f118-7a44-462a-a18b-861b91659543',
diff --git a/test/jest/data/entityType.js b/test/jest/data/entityType.js
index 9940fc27..a3f1b809 100644
--- a/test/jest/data/entityType.js
+++ b/test/jest/data/entityType.js
@@ -294,7 +294,7 @@ export const entityType = {
       'visibleByDefault': false,
     },
     {
-      'name': 'languages',
+      'name': 'instance.languages',
       'queryable': true,
       'dataType': {
         'dataType': 'arrayType',