feat: [DHIS2-16992] Fixed size for changelog modal and columns

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: 2024-09-02T11:08:16.281Z\n"
-"PO-Revision-Date: 2024-09-02T11:08:16.281Z\n"
+"POT-Creation-Date: 2024-10-08T09:59:38.816Z\n"
+"PO-Revision-Date: 2024-10-08T09:59:38.816Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1553,6 +1553,9 @@ msgstr "Changelog"
 msgid "No changes to display"
 msgstr "No changes to display"
 
+msgid "Updated"
+msgstr "Updated"
+
 msgid "Created"
 msgstr "Created"
 
@@ -1571,6 +1574,9 @@ msgstr "Data item"
 msgid "Change"
 msgstr "Change"
 
+msgid "Value"
+msgstr "Value"
+
 msgid "New {{trackedEntityTypeName}} relationship"
 msgstr "New {{trackedEntityTypeName}} relationship"
 

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

@@ -34,7 +34,9 @@ export const ChangelogComponent = ({
 
         <ModalContent>
             <DataTable
+                fixed
                 dataTest={'changelog-data-table'}
+                width="750px"
             >
                 <ChangelogTableHeader
                     sortDirection={sortDirection}
@@ -64,7 +66,7 @@ export const ChangelogComponent = ({
                 {pager && (
                     <DataTableFoot>
                         <DataTableRow>
-                            <DataTableCell colSpan="4">
+                            <DataTableCell colSpan="5">
                                 <Pagination
                                     page={pager.page}
                                     pageSize={pager.pageSize}

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

@@ -0,0 +1,43 @@
+// @flow
+import React from 'react';
+import log from 'loglevel';
+import { Tag } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { CHANGE_TYPES } from '../../Changelog/Changelog.constants';
+import { errorCreator } from '../../../../../../capture-core-utils';
+
+type Config = {
+    label: string,
+    variant: {
+        neutral?: boolean,
+        positive?: boolean,
+        negative?: boolean,
+    },
+};
+
+const changeTypeConfigs = {
+    [CHANGE_TYPES.UPDATED]: { label: i18n.t('Updated'), variant: { neutral: true } },
+    [CHANGE_TYPES.CREATED]: { label: i18n.t('Created'), variant: { positive: true } },
+    [CHANGE_TYPES.DELETED]: { label: i18n.t('Deleted'), variant: { negative: true } },
+};
+
+const ChangelogChangeComponent = ({ label, variant }: Config) => (
+    <Tag {...variant}>
+        {label}
+    </Tag>
+);
+
+
+export const ChangelogChangeCell = ({ changeType }: Object) => {
+    const config = changeTypeConfigs[changeType];
+
+    if (!config) {
+        log.error(errorCreator('Changelog component not found')({ changeType }));
+        return null;
+    }
+
+    return (
+        <ChangelogChangeComponent {...config} />
+    );
+};
+

src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogChangeCell.js → src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell.js

@@ -1,11 +1,10 @@
 // @flow
 import React from 'react';
 import log from 'loglevel';
-import { colors, IconArrowRight16, spacers, Tag } from '@dhis2/ui';
-import i18n from '@dhis2/d2-i18n';
+import { colors, IconArrowRight16, spacers } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
-import { CHANGE_TYPES } from '../Changelog/Changelog.constants';
-import { errorCreator } from '../../../../../capture-core-utils';
+import { CHANGE_TYPES } from '../../Changelog/Changelog.constants';
+import { errorCreator } from '../../../../../../capture-core-utils';
 
 type Props = {
     changeType: $Values<typeof CHANGE_TYPES>,
@@ -26,32 +25,31 @@ const styles = {
     },
     previousValue: {
         color: colors.grey700,
+        maxWidth: '50%',
     },
     currentValue: {
         color: colors.grey900,
+        maxWidth: '50%',
     },
 };
 
 const Updated = ({ previousValue, currentValue, classes }) => (
     <div className={classes.container}>
         <span className={classes.previousValue}>{previousValue}</span>
-        <IconArrowRight16 />
+        <span><IconArrowRight16 /></span>
         <span className={classes.currentValue}>{currentValue}</span>
     </div>
 );
 
 const Created = ({ currentValue, classes }) => (
     <div className={classes.container}>
-        <Tag>{i18n.t('Created')}</Tag>
         <span className={classes.currentValue}>{currentValue}</span>
     </div>
 );
 
 const Deleted = ({ previousValue, classes }) => (
     <div className={classes.container}>
         <span className={classes.previousValue}>{previousValue}</span>
-        <IconArrowRight16 />
-        <Tag negative>{i18n.t('Deleted')}</Tag>
     </div>
 );
 
@@ -61,7 +59,7 @@ const ChangelogComponentsByType = {
     [CHANGE_TYPES.DELETED]: Deleted,
 };
 
-const ChangelogChangeCellPlain = ({ changeType, currentValue, previousValue, classes }: Props) => {
+const ChangelogValueCellPlain = ({ changeType, currentValue, previousValue, classes }: Props) => {
     const ChangelogComponent = ChangelogComponentsByType[changeType];
 
     if (!ChangelogComponent) {
@@ -78,4 +76,4 @@ const ChangelogChangeCellPlain = ({ changeType, currentValue, previousValue, cla
     );
 };
 
-export const ChangelogChangeCell = withStyles(styles)(ChangelogChangeCellPlain);
+export const ChangelogValueCell = withStyles(styles)(ChangelogValueCellPlain);

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

@@ -0,0 +1,4 @@
+// @flow
+
+export { ChangelogChangeCell } from './ChangelogChangeCell';
+export { ChangelogValueCell } from './ChangelogValueCell';

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

@@ -9,27 +9,30 @@ type Props = {
     setSortDirection: SetSortDirection,
 };
 
-export const ChangelogTableHeader = ({
-    sortDirection,
-    setSortDirection,
-}: Props) => (
+export const ChangelogTableHeader = ({ sortDirection, setSortDirection }: Props) => (
     <DataTableHead>
         <DataTableRow>
             <DataTableColumnHeader
                 onSortIconClick={({ direction }) => setSortDirection(direction)}
                 sortDirection={sortDirection}
+                fixed
+                top="0"
+                width="140px"
             >
                 {i18n.t('Date')}
             </DataTableColumnHeader>
-            <DataTableColumnHeader>
+            <DataTableColumnHeader fixed top="0" width="125px">
                 {i18n.t('User')}
             </DataTableColumnHeader>
-            <DataTableColumnHeader>
+            <DataTableColumnHeader fixed top="0" width="125px">
                 {i18n.t('Data item')}
             </DataTableColumnHeader>
-            <DataTableColumnHeader>
+            <DataTableColumnHeader fixed top="0" width="85px">
                 {i18n.t('Change')}
             </DataTableColumnHeader>
+            <DataTableColumnHeader fixed top="0">
+                {i18n.t('Value')}
+            </DataTableColumnHeader>
         </DataTableRow>
     </DataTableHead>
 );

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

@@ -1,29 +1,35 @@
 // @flow
 import React from 'react';
 import { DataTableCell, DataTableRow } from '@dhis2/ui';
-import { ChangelogChangeCell } from './ChangelogChangeCell';
-import type { ChangelogRecord } from '../Changelog/Changelog.types';
+import { withStyles } from '@material-ui/core/styles';
+import { ChangelogChangeCell, ChangelogValueCell } from './ChangelogCells';
 
-type Props = {|
-    record: ChangelogRecord,
-|}
+type Props = {
+    record: {
+        date: string,
+        user: string,
+        dataItemLabel: string,
+        changeType: string,
+    },
+    classes: {
+        dataItemColumn: string,
+        valueColumn: string,
+    },
+};
 
-export const ChangelogTableRow = ({ record }: Props) => (
-    <DataTableRow>
-        <DataTableCell>
-            {record.date}
-        </DataTableCell>
-        <DataTableCell>
-            {record.user}
-        </DataTableCell>
-        <DataTableCell>
-            {record.dataItemLabel}
-        </DataTableCell>
+const styles = {
+    dataItemColumn: { wordWrap: 'break-word', hyphens: 'auto' },
+    valueColumn: { wordWrap: 'break-word' },
+};
 
-        <DataTableCell>
-            <ChangelogChangeCell
-                {...record}
-            />
-        </DataTableCell>
+const ChangelogTableRowPlain = ({ record, classes }: Props) => (
+    <DataTableRow>
+        <DataTableCell>{record.date}</DataTableCell>
+        <DataTableCell>{record.user}</DataTableCell>
+        <DataTableCell className={classes.dataItemColumn}>{record.dataItemLabel}</DataTableCell>
+        <DataTableCell><ChangelogChangeCell changeType={record.changeType} /></DataTableCell>
+        <DataTableCell className={classes.valueColumn}><ChangelogValueCell {...record} /></DataTableCell>
     </DataTableRow>
 );
+
+export const ChangelogTableRow = withStyles(styles)(ChangelogTableRowPlain);

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

@@ -1,6 +1,5 @@
 // @flow
 
 export { ChangelogTableHeader } from './ChangelogTableHeader';
-export { ChangelogChangeCell } from './ChangelogChangeCell';
 export { ChangelogTableRow } from './ChangelogTableRow';