From 3b021cf5569338db5038d8ed231a810a0fa909f3 Mon Sep 17 00:00:00 2001
From: henrikmv <110386561+henrikmv@users.noreply.github.com>
Date: Mon, 21 Oct 2024 09:10:50 +0200
Subject: [PATCH] feat: [DHIS2-16992] Fixed size for changelog modal and
 columns (#3834)

* feat: temp

* feat: fixed size table and columns

* fix: remove console log

* fix: fixed size improvement
---
 i18n/en.pot                                   |  6 +++
 .../common/Changelog/Changelog.component.js   |  4 +-
 .../ChangelogCells/ChangelogChangeCell.js     | 43 +++++++++++++++++
 .../ChangelogValueCell.js}                    | 39 +++++++++------
 .../ChangelogTable/ChangelogCells/index.js    |  4 ++
 .../ChangelogTable/ChangelogTableHeader.js    | 17 ++++---
 .../ChangelogTable/ChangelogTableRow.js       | 48 +++++++++++--------
 .../common/ChangelogTable/index.js            |  1 -
 8 files changed, 118 insertions(+), 44 deletions(-)
 create mode 100644 src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogChangeCell.js
 rename src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/{ChangelogChangeCell.js => ChangelogCells/ChangelogValueCell.js} (60%)
 create mode 100644 src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/index.js

diff --git a/i18n/en.pot b/i18n/en.pot
index 2a3f2311c9..597bd6f35a 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -1498,6 +1498,9 @@ msgstr "Changelog"
 msgid "No changes to display"
 msgstr "No changes to display"
 
+msgid "Updated"
+msgstr "Updated"
+
 msgid "Created"
 msgstr "Created"
 
@@ -1516,6 +1519,9 @@ msgstr "Data item"
 msgid "Change"
 msgstr "Change"
 
+msgid "Value"
+msgstr "Value"
+
 msgid "New {{trackedEntityTypeName}} relationship"
 msgstr "New {{trackedEntityTypeName}} relationship"
 
diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.component.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.component.js
index 9f853a80e1..d43b9a0620 100644
--- a/src/core_modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.component.js
+++ b/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'}
+                layout="fixed"
             >
                 <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}
diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogChangeCell.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogChangeCell.js
new file mode 100644
index 0000000000..6f9a273d67
--- /dev/null
+++ b/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} />
+    );
+};
+
diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogChangeCell.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell.js
similarity index 60%
rename from src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogChangeCell.js
rename to src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell.js
index 1ec493edff..246c7c2651 100644
--- a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogChangeCell.js
+++ b/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>,
@@ -15,14 +14,16 @@ type Props = {
         container: string,
         previousValue: string,
         currentValue: string,
+        updatePreviousValue: string,
+        updateCurrentValue: string,
+        updateArrow: string,
     }
 }
 
 const styles = {
     container: {
-        display: 'flex',
         alignItems: 'center',
-        gap: spacers.dp4,
+        display: 'flex',
     },
     previousValue: {
         color: colors.grey700,
@@ -30,19 +31,31 @@ const styles = {
     currentValue: {
         color: colors.grey900,
     },
+    updatePreviousValue: {
+        color: colors.grey700,
+        maxWidth: '45%',
+    },
+    updateCurrentValue: {
+        color: colors.grey900,
+        maxWidth: '45%',
+    },
+    updateArrow: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        margin: `${spacers.dp4}`,
+    },
 };
 
 const Updated = ({ previousValue, currentValue, classes }) => (
     <div className={classes.container}>
-        <span className={classes.previousValue}>{previousValue}</span>
-        <span><IconArrowRight16 /></span>
-        <span className={classes.currentValue}>{currentValue}</span>
+        <span className={classes.updatePreviousValue}>{previousValue}</span>
+        <span className={classes.updateArrow}><IconArrowRight16 /></span>
+        <span className={classes.updateCurrentValue}>{currentValue}</span>
     </div>
 );
 
 const Created = ({ currentValue, classes }) => (
     <div className={classes.container}>
-        <Tag>{i18n.t('Created')}</Tag>
         <span className={classes.currentValue}>{currentValue}</span>
     </div>
 );
@@ -50,8 +63,6 @@ const Created = ({ currentValue, classes }) => (
 const Deleted = ({ previousValue, classes }) => (
     <div className={classes.container}>
         <span className={classes.previousValue}>{previousValue}</span>
-        <span><IconArrowRight16 /></span>
-        <Tag negative>{i18n.t('Deleted')}</Tag>
     </div>
 );
 
@@ -61,7 +72,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 +89,4 @@ const ChangelogChangeCellPlain = ({ changeType, currentValue, previousValue, cla
     );
 };
 
-export const ChangelogChangeCell = withStyles(styles)(ChangelogChangeCellPlain);
+export const ChangelogValueCell = withStyles(styles)(ChangelogValueCellPlain);
diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/index.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/index.js
new file mode 100644
index 0000000000..d5f9ff3167
--- /dev/null
+++ b/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';
diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableHeader.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableHeader.js
index 9c3ebd671a..26dc592540 100644
--- a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableHeader.js
+++ b/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" width="275px">
+                {i18n.t('Value')}
+            </DataTableColumnHeader>
         </DataTableRow>
     </DataTableHead>
 );
diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js
index 31c9a1ddbb..e93571cbf2 100644
--- a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js
+++ b/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);
diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/index.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/index.js
index 6f2fa32294..f18acb8934 100644
--- a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/index.js
+++ b/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';