#12486 GeoNode service uses the category identifier on catalog cards (#12505)

Fix #12486 GeoNode service uses the category identifier on catalog cards

Author: Binabh

web/client/api/catalog/GeoNode.js

@@ -53,13 +53,35 @@ export const resolveTagFilterType = (service) => {
     return getGeoNodeDefaultTagFilterType();
 };
 
+const getTagLabel = (tag, tagFilterType) => {
+    if (!tag || typeof tag !== 'object') {
+        return tag;
+    }
+    if (tagFilterType === 'category') {
+        return tag.label || tag.gn_description || tag.identifier;
+    }
+    if (tagFilterType === 'keyword') {
+        return tag.label || tag.name || tag.slug;
+    }
+    return tag.label || tag.name || tag.gn_description || tag.identifier || tag.slug;
+};
+
+const normalizeTag = (tag, tagFilterType) => {
+    if (!tag || typeof tag !== 'object') {
+        return tag;
+    }
+    const label = getTagLabel(tag, tagFilterType);
+    return label ? { ...tag, label } : tag;
+};
+
 export const getCatalogRecords = (records, options) => {
     if (records && records.records) {
         const tagFilterType = resolveTagFilterType(options?.service);
         return records.records.map((record) => {
-            const tags = tagFilterType === 'keyword'
+            const tags = (tagFilterType === 'keyword'
                 ? (record.keywords || [])
-                : (record.category ? [record.category] : []);
+                : (record.category ? [record.category] : []))
+                .map((tag) => normalizeTag(tag, tagFilterType));
             return {
                 ...record,
                 serviceType: "geonode",

web/client/api/catalog/__tests__/GeoNode-test.js

@@ -37,6 +37,40 @@ describe('Test correctness of the GeoNode catalog APIs', () => {
         expect(records[0].pk).toBe(123);
     });
 
+    it('geonode catalog records mapping uses category label for tags', () => {
+        const records = getCatalogRecords({
+            records: [{
+                title: 'Title',
+                category: {
+                    identifier: 'boundaries',
+                    gn_description: 'Boundaries'
+                },
+                pk: 123
+            }]
+        });
+        expect(records[0].tags).toEqual([{
+            identifier: 'boundaries',
+            gn_description: 'Boundaries',
+            label: 'Boundaries'
+        }]);
+    });
+
+    it('geonode catalog records mapping falls back to category identifier for tag label', () => {
+        const records = getCatalogRecords({
+            records: [{
+                title: 'Title',
+                category: {
+                    identifier: 'boundaries'
+                },
+                pk: 123
+            }]
+        });
+        expect(records[0].tags).toEqual([{
+            identifier: 'boundaries',
+            label: 'boundaries'
+        }]);
+    });
+
     it('geonode catalog records returns null with no records', () => {
         expect(getCatalogRecords()).toBe(null);
         expect(getCatalogRecords({})).toBe(null);

web/client/components/catalog/__tests__/CatalogCard-test.jsx

@@ -11,6 +11,7 @@ import ReactDOM from 'react-dom';
 import expect from 'expect';
 import TestUtils from 'react-dom/test-utils';
 import CatalogCard from '../datasets/CatalogCard';
+import { GEONODE_CATEGORY_FILTER } from '../../../api/catalog/GeoNode';
 
 describe('CatalogCard component', () => {
     const record = {
@@ -136,4 +137,44 @@ describe('CatalogCard component', () => {
         const card = document.querySelector('.ms-catalog-card.disabled');
         expect(card).toBeTruthy();
     });
+
+    it('renders GeoNode category tag label while preserving identifier as filter value', () => {
+        const actions = {
+            onTagClick: () => {}
+        };
+        const spyOnTagClick = expect.spyOn(actions, 'onTagClick');
+        const geonodeRecord = {
+            ...record,
+            tagFilterType: 'category',
+            tags: [{
+                identifier: 'boundaries',
+                label: 'Boundaries'
+            }]
+        };
+
+        ReactDOM.render(<CatalogCard
+            includeAddToMap={false}
+            multiSelect={false}
+            loadingRecords={false}
+            filters={{
+                [GEONODE_CATEGORY_FILTER]: ['boundaries']
+            }}
+            record={geonodeRecord}
+            onToggle={() => {}}
+            onAdd={() => {}}
+            onTagClick={actions.onTagClick}
+        />, document.getElementById('container'));
+
+        const tagButton = document.querySelector('.ms-resource-card-tag-button');
+        expect(tagButton).toBeTruthy();
+        expect(tagButton.textContent).toBe('Boundaries');
+        expect(tagButton.getAttribute('title')).toBe('Boundaries');
+        expect(tagButton.className.includes('selected')).toBe(true);
+
+        TestUtils.Simulate.click(tagButton, { stopPropagation: () => {} });
+
+        expect(spyOnTagClick).toHaveBeenCalled();
+        expect(spyOnTagClick.calls[0].arguments[0]).toBe('boundaries');
+        expect(spyOnTagClick.calls[0].arguments[1]).toEqual(geonodeRecord);
+    });
 });

web/client/components/catalog/datasets/CatalogCard.jsx

@@ -236,6 +236,7 @@ const CatalogCard = ({
                         filter: activeFilterKey,
                         itemColor: 'color',
                         itemValue: activeFilterProp,
+                        itemLabel: 'label',
                         itemSelected: 'selected',
                         onClick: onTagClick
                             ? (tagValue) => onTagClick(tagValue, record)

web/client/components/catalog/resources/ResourceCard.jsx

@@ -129,14 +129,18 @@ const ResourceCardMetadataValue = tooltip(({
 
     const getProperties = () => {
         if (isObject(value)) {
+            const itemValue = value[entry.itemValue];
+            const itemLabel = entry.itemLabel ? value[entry.itemLabel] : null;
             return {
-                value: value[entry.itemValue],
+                value: itemValue,
+                label: itemLabel || itemValue || '',
                 color: value[entry.itemColor],
                 selected: !!value?.[entry.itemSelected]
             };
         }
         return {
-            value
+            value,
+            label: value
         };
     };
 
@@ -158,13 +162,13 @@ const ResourceCardMetadataValue = tooltip(({
                 {...props}
                 className={`ms-tag ms-resource-card-tag-button${properties.selected ? ' selected' : ''}`}
                 style={getTagColorVariables(properties.color)}
-                title={properties.value}
+                title={properties.label}
                 onClick={(event) => {
                     event.stopPropagation();
                     entry.onClick(properties.value, event);
                 }}
             >
-                {properties.value}
+                {properties.label}
             </Button>
         );
     }
@@ -184,7 +188,7 @@ const ResourceCardMetadataValue = tooltip(({
         >
             {entry.type === 'date' && entry.format && properties.value
                 ? moment(properties.value).format(entry.format)
-                : properties.value}
+                : properties.label}
         </ALink>
     );
 });