fix: feature available check

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-02-06T15:05:36.774Z\n"
-"PO-Revision-Date: 2025-02-06T15:05:36.774Z\n"
+"POT-Creation-Date: 2025-02-10T14:42:07.458Z\n"
+"PO-Revision-Date: 2025-02-10T14:42:07.458Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1587,18 +1587,18 @@ msgstr "Created"
 msgid "Deleted"
 msgstr "Deleted"
 
-msgid "Sort by date"
-msgstr "Sort by date"
-
 msgid "Date"
 msgstr "Date"
 
-msgid "Sort by username"
-msgstr "Sort by username"
+msgid "Sort by date"
+msgstr "Sort by date"
 
 msgid "User"
 msgstr "User"
 
+msgid "Sort by username"
+msgstr "Sort by username"
+
 msgid "Sort by data item"
 msgstr "Sort by data item"
 

src/core_modules/capture-core-utils/featuresSupport/support.js

@@ -6,6 +6,7 @@ export const FEATURES = Object.freeze({
     newTransferQueryParam: 'newTransferQueryParam',
     exportablePayload: 'exportablePayload',
     changelogs: 'changelogs',
+    changelogsV2: 'changelogsV2',
     trackerImageEndpoint: 'trackerImageEndpoint',
     trackerFileEndpoint: 'trackerFileEndpoint',
     trackedEntitiesCSV: 'trackedEntitiesCSV',
@@ -25,6 +26,7 @@ const MINOR_VERSION_SUPPORT = Object.freeze({
     [FEATURES.trackerFileEndpoint]: 41,
     [FEATURES.newTransferQueryParam]: 41,
     [FEATURES.changelogs]: 41,
+    [FEATURES.changelogsV2]: 42,
     [FEATURES.trackedEntitiesCSV]: 40,
     [FEATURES.newUIDsSeparator]: 41,
     [FEATURES.newEntityFilterQueryParam]: 41,

src/core_modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.component.js

@@ -28,6 +28,7 @@ export const ChangelogComponent = ({
     setColumnToSortBy,
     attributeToFilterBy,
     setAttributeToFilterBy,
+    supportsChangelogV2,
     entityType,
     filterValue,
     setFilterValue,
@@ -45,6 +46,7 @@ export const ChangelogComponent = ({
     >
         <ModalTitle>{i18n.t('Changelog')}</ModalTitle>
         <ModalContent>
+            {supportsChangelogV2 && (
             <ChangelogFilterBar
                 attributeToFilterBy={attributeToFilterBy}
                 setAttributeToFilterBy={setAttributeToFilterBy}
@@ -53,13 +55,15 @@ export const ChangelogComponent = ({
                 dataItemDefinitions={dataItemDefinitions}
                 entityType={entityType}
             />
+            )}
             <DataTable fixed dataTest={'changelog-data-table'} layout={'fixed'}>
                 <ChangelogTableHeader
                     columnToSortBy={columnToSortBy}
                     setColumnToSortBy={setColumnToSortBy}
                     sortDirection={sortDirection}
                     setSortDirection={setSortDirection}
                     entityType={entityType}
+                    supportsChangelogV2={supportsChangelogV2}
                 />
                 {records && records.length > 0 ? (
                     <DataTableBody dataTest={'changelog-data-table-body'}>

src/core_modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.container.js

@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import { Modal } from '@dhis2/ui';
+import { FEATURES, featureAvailable } from 'capture-core-utils';
 import { useChangelogData, useListDataValues } from '../hooks';
 import { ChangelogComponent } from './Changelog.component';
 import { CHANGELOG_ENTITY_TYPES } from './Changelog.constants';
@@ -66,6 +67,8 @@ export const Changelog = ({
             </Modal>
         );
     }
+
+    const supportsChangelogV2 = featureAvailable(FEATURES.changelogsV2);
 
     return (
         <ChangelogComponent
@@ -85,6 +88,7 @@ export const Changelog = ({
             attributeToFilterBy={attributeToFilterBy}
             setAttributeToFilterBy={setAttributeToFilterBy}
             dataItemDefinitions={dataItemDefinitions}
+            supportsChangelogV2={supportsChangelogV2}
         />
     );
 };

src/core_modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.types.js

@@ -77,4 +77,5 @@ export type ChangelogProps = {
     setFilterValue: (any) => void,
     dataItemDefinitions: ItemDefinitions,
     entityType: $Values<typeof CHANGELOG_ENTITY_TYPES>,
+    supportsChangelogV2: boolean,
 };

src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableHeader.js

@@ -1,8 +1,16 @@
 // @flow
 import React from 'react';
 import i18n from '@dhis2/d2-i18n';
-import { DataTableColumnHeader, DataTableHead, DataTableRow } from '@dhis2/ui';
-import { SORT_DIRECTIONS, SORT_TARGETS, CHANGELOG_ENTITY_TYPES } from '../Changelog/Changelog.constants';
+import {
+    DataTableColumnHeader,
+    DataTableHead,
+    DataTableRow,
+} from '@dhis2/ui';
+import {
+    SORT_DIRECTIONS,
+    SORT_TARGETS,
+    CHANGELOG_ENTITY_TYPES,
+} from '../Changelog/Changelog.constants';
 import type { SortDirection } from '../Changelog/Changelog.types';
 
 type Props = {
@@ -11,8 +19,17 @@ type Props = {
     setSortDirection: (SortDirection) => void,
     setColumnToSortBy: (column: string) => void,
     entityType: $Values<typeof CHANGELOG_ENTITY_TYPES>,
+    supportsChangelogV2: boolean,
 };
 
+type ColumnConfig = {|
+    label: string,
+    width: string,
+    isSortable: boolean,
+    name?: string,
+    sortIconTitle?: string,
+|};
+
 const getCurrentSortDirection = (
     columnName: string,
     currentColumn: string,
@@ -26,6 +43,7 @@ export const ChangelogTableHeader = ({
     setSortDirection,
     setColumnToSortBy,
     entityType,
+    supportsChangelogV2,
 }: Props) => {
     const handleSortIconClick = ({ name, direction }) => {
         setSortDirection(direction);
@@ -36,64 +54,71 @@ export const ChangelogTableHeader = ({
         ? SORT_TARGETS.ATTRIBUTE
         : SORT_TARGETS.DATA_ITEM;
 
+        const columns: Array<ColumnConfig> = [
+            {
+            name: SORT_TARGETS.DATE,
+            label: i18n.t('Date'),
+            sortIconTitle: i18n.t('Sort by date'),
+            width: '140px',
+            isSortable: true,
+        },
+        {
+            name: SORT_TARGETS.USERNAME,
+            label: i18n.t('User'),
+            sortIconTitle: i18n.t('Sort by username'),
+            width: '125px',
+            isSortable: supportsChangelogV2,
+        },
+        {
+            name: sortTargetDataItem,
+            label: i18n.t('Data item'),
+            sortIconTitle: i18n.t('Sort by data item'),
+            width: '125px',
+            isSortable: supportsChangelogV2,
+        },
+        {
+            label: i18n.t('Change'),
+            width: '85px',
+            isSortable: false,
+        },
+        {
+            label: i18n.t('Value'),
+            width: '275px',
+            isSortable: false,
+        },
+    ];
+
     return (
         <DataTableHead>
             <DataTableRow>
-                <DataTableColumnHeader
-                    name={SORT_TARGETS.DATE}
-                    sortDirection={getCurrentSortDirection(
-                        SORT_TARGETS.DATE,
-                        columnToSortBy,
-                        sortDirection,
-                    )}
-                    onSortIconClick={handleSortIconClick}
-                    sortIconTitle={i18n.t('Sort by date')}
-                    fixed
-                    top="0"
-                    width="140px"
-                >
-                    {i18n.t('Date')}
-                </DataTableColumnHeader>
-
-                <DataTableColumnHeader
-                    name={SORT_TARGETS.USERNAME}
-                    sortDirection={getCurrentSortDirection(
-                        SORT_TARGETS.USERNAME,
-                        columnToSortBy,
-                        sortDirection,
-                    )}
-                    onSortIconClick={handleSortIconClick}
-                    sortIconTitle={i18n.t('Sort by username')}
-                    fixed
-                    top="0"
-                    width="125px"
-                >
-                    {i18n.t('User')}
-                </DataTableColumnHeader>
-
-                <DataTableColumnHeader
-                    name={sortTargetDataItem}
-                    sortDirection={getCurrentSortDirection(
-                        sortTargetDataItem,
-                        columnToSortBy,
-                        sortDirection,
-                    )}
-                    onSortIconClick={handleSortIconClick}
-                    sortIconTitle={i18n.t('Sort by data item')}
-                    fixed
-                    top="0"
-                    width="125px"
-                >
-                    {i18n.t('Data item')}
-                </DataTableColumnHeader>
-
-                <DataTableColumnHeader fixed top="0" width="85px">
-                    {i18n.t('Change')}
-                </DataTableColumnHeader>
-
-                <DataTableColumnHeader fixed top="0" width="275px">
-                    {i18n.t('Value')}
-                </DataTableColumnHeader>
+                {columns.map(({
+                    name,
+                    label,
+                    sortIconTitle,
+                    width,
+                    isSortable,
+                }) => (
+                    <DataTableColumnHeader
+                        key={label}
+                        fixed
+                        top="0"
+                        width={width}
+                        name={isSortable ? name : undefined}
+                        sortDirection={
+                            isSortable && name
+                                ? getCurrentSortDirection(name, columnToSortBy, sortDirection)
+                                : undefined
+                        }
+                        onSortIconClick={
+                            isSortable && name
+                                ? handleSortIconClick
+                                : undefined
+                        }
+                        sortIconTitle={isSortable ? sortIconTitle : undefined}
+                    >
+                        {label}
+                    </DataTableColumnHeader>
+                ))}
             </DataTableRow>
         </DataTableHead>
     );