fix: separate widget components

src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js

@@ -40,6 +40,8 @@ const getStyles = () => ({
     },
     actionsContainer: {
         flexShrink: 0,
+        display: 'flex',
+        gap: spacers.dp4,
     },
     button: {
         whiteSpace: 'nowrap',

src/core_modules/capture-core/components/WidgetEventEdit/EventChangelogWrapper/EventChangelogWrapper.component.js

@@ -3,13 +3,10 @@ import React, { useMemo } from 'react';
 import type { DataElement } from '../../../metaData';
 import { dataElementTypes } from '../../../metaData';
 import type { Props } from './EventChangelogWrapper.types';
-import { Changelog, CHANGELOG_ENTITY_TYPES } from '../../WidgetsChangelog';
+import { WidgetEventChangelog } from '../../WidgetsChangelog';
 
 export const EventChangelogWrapper = ({ formFoundation, eventId, ...passOnProps }: Props) => {
-    const {
-        dataItemDefinitions,
-        metadataItemDefinitions,
-    } = useMemo(() => {
+    const dataItemDefinitions = useMemo(() => {
         const elements = formFoundation.getElements();
         const contextLabels = formFoundation.getLabels();
 
@@ -46,18 +43,16 @@ export const EventChangelogWrapper = ({ formFoundation, eventId, ...passOnProps
         }, {});
 
         return {
-            dataItemDefinitions: fieldElementsById,
-            metadataItemDefinitions: fieldElementsContext,
+            ...fieldElementsById,
+            ...fieldElementsContext,
         };
     }, [formFoundation]);
 
     return (
-        <Changelog
+        <WidgetEventChangelog
             {...passOnProps}
-            entityId={eventId}
-            entityType={CHANGELOG_ENTITY_TYPES.EVENT}
+            eventId={eventId}
             dataItemDefinitions={dataItemDefinitions}
-            metadataItemDefinitions={metadataItemDefinitions}
         />
     );
 };

src/core_modules/capture-core/components/WidgetProfile/TrackedEntityChangelogWrapper/TrackedEntityChangelogWrapper.component.js

@@ -4,15 +4,12 @@ import { dataElementTypes, RenderFoundation } from '../../../metaData';
 import { useFormFoundation } from '../DataEntry/hooks';
 import type { DataElement } from '../../../metaData';
 import type { Props } from './TrackedEntityChangelogWrapper.types';
-import { Changelog, CHANGELOG_ENTITY_TYPES } from '../../WidgetsChangelog';
+import { WidgetTrackedEntityChangelog } from '../../WidgetsChangelog';
 
 export const TrackedEntityChangelogWrapper = ({ programAPI, teiId, ...passOnProps }: Props) => {
     const formFoundation: RenderFoundation = useFormFoundation(programAPI);
 
-    const {
-        dataItemDefinitions,
-        metadataItemDefinitions,
-    } = useMemo(() => {
+    const dataItemDefinitions = useMemo(() => {
         if (!Object.keys(formFoundation)?.length) return {};
         const elements = formFoundation.getElements();
         const contextLabels = formFoundation.getLabels();
@@ -50,18 +47,17 @@ export const TrackedEntityChangelogWrapper = ({ programAPI, teiId, ...passOnProp
         }, {});
 
         return {
-            dataItemDefinitions: fieldElementsById,
-            metadataItemDefinitions: fieldElementsContext,
+            ...fieldElementsById,
+            ...fieldElementsContext,
         };
     }, [formFoundation]);
 
     return (
-        <Changelog
+        <WidgetTrackedEntityChangelog
             {...passOnProps}
-            entityType={CHANGELOG_ENTITY_TYPES.TRACKED_ENTITY}
-            entityId={teiId}
+            teiId={teiId}
+            programId={programAPI.id}
             dataItemDefinitions={dataItemDefinitions}
-            metadataItemDefinitions={metadataItemDefinitions}
         />
     );
 };

src/core_modules/capture-core/components/WidgetsChangelog/WidgetEventChangelog/WidgetEventChangelog.js

@@ -0,0 +1,22 @@
+// @flow
+import React from 'react';
+import type { ItemDefinitions } from '../common/Changelog/Changelog.types';
+import { Changelog, CHANGELOG_ENTITY_TYPES } from '../common/Changelog';
+
+type Props = {
+    eventId: string,
+    dataItemDefinitions: ItemDefinitions,
+    isOpen: boolean,
+    setIsOpen: (boolean | boolean => boolean) => void,
+}
+
+export const WidgetEventChangelog = ({
+    eventId,
+    ...passOnProps
+}: Props) => (
+    <Changelog
+        {...passOnProps}
+        entityId={eventId}
+        entityType={CHANGELOG_ENTITY_TYPES.EVENT}
+    />
+);

src/core_modules/capture-core/components/WidgetsChangelog/WidgetEventChangelog/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { WidgetEventChangelog } from './WidgetEventChangelog';

src/core_modules/capture-core/components/WidgetsChangelog/WidgetTrackedEntityChangelog/WidgetTrackedEntityChangelog.js

@@ -0,0 +1,24 @@
+// @flow
+import React from 'react';
+import type { ItemDefinitions } from '../common/Changelog/Changelog.types';
+import { Changelog, CHANGELOG_ENTITY_TYPES } from '../common/Changelog';
+
+type Props = {
+    teiId: string,
+    programId?: string,
+    dataItemDefinitions: ItemDefinitions,
+    isOpen: boolean,
+    setIsOpen: (boolean | boolean => boolean) => void,
+}
+
+export const WidgetTrackedEntityChangelog = ({
+    teiId,
+    programId,
+    ...passOnProps
+}: Props) => (
+    <Changelog
+        {...passOnProps}
+        entityId={teiId}
+        entityType={CHANGELOG_ENTITY_TYPES.TRACKED_ENTITY}
+    />
+);

src/core_modules/capture-core/components/WidgetsChangelog/WidgetTrackedEntityChangelog/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { WidgetTrackedEntityChangelog } from './WidgetTrackedEntityChangelog';

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

@@ -11,7 +11,7 @@ import {
     ModalTitle, Pagination,
 } from '@dhis2/ui';
 import React from 'react';
-import { ChangelogTableHeader, ChangelogTableRow } from '../common/ChangelogTable';
+import { ChangelogTableHeader, ChangelogTableRow } from '../ChangelogTable';
 import type { ChangelogProps } from './Changelog.types';
 
 export const ChangelogComponent = ({

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

@@ -1,10 +1,10 @@
 // @flow
 import React from 'react';
 import { Modal } from '@dhis2/ui';
-import { useChangelogData } from '../common/hooks';
+import { useChangelogData } from '../hooks';
 import { ChangelogComponent } from './Changelog.component';
 import { CHANGELOG_ENTITY_TYPES } from './index';
-import { LoadingMaskElementCenter } from '../../LoadingMasks';
+import { LoadingMaskElementCenter } from '../../../LoadingMasks';
 import type { ItemDefinitions } from './Changelog.types';
 
 type Props = {
@@ -13,16 +13,16 @@ type Props = {
     isOpen: boolean,
     setIsOpen: (boolean | boolean => boolean) => void,
     dataItemDefinitions: ItemDefinitions,
-    metadataItemDefinitions: ItemDefinitions,
+    programId?: string,
 }
 
 export const Changelog = ({
     entityId,
     entityType,
+    programId,
     isOpen,
     setIsOpen,
     dataItemDefinitions,
-    metadataItemDefinitions,
 }: Props) => {
     const {
         records,
@@ -35,8 +35,8 @@ export const Changelog = ({
     } = useChangelogData({
         entityId,
         entityType,
+        programId,
         dataItemDefinitions,
-        metadataItemDefinitions,
     });
 
     if (isLoading) {

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

@@ -1,6 +1,6 @@
 // @flow
 import { CHANGE_TYPES } from './Changelog.constants';
-import { dataElementTypes } from '../../../metaData';
+import { dataElementTypes } from '../../../../metaData';
 
 type CreatedChange = {|
     type: typeof CHANGE_TYPES.CREATED,

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

@@ -4,7 +4,7 @@ import log from 'loglevel';
 import { colors, IconArrowRight16, spacers, Tag } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core/styles';
-import { CHANGE_TYPES } from '../../Changelog/Changelog.constants';
+import { CHANGE_TYPES } from '../Changelog/Changelog.constants';
 import { errorCreator } from '../../../../../capture-core-utils';
 
 type Props = {

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

@@ -2,7 +2,7 @@
 import i18n from '@dhis2/d2-i18n';
 import { DataTableColumnHeader, DataTableHead, DataTableRow } from '@dhis2/ui';
 import React from 'react';
-import type { SetSortDirection, SortDirection } from '../../Changelog/Changelog.types';
+import type { SetSortDirection, SortDirection } from '../Changelog/Changelog.types';
 
 type Props = {
     sortDirection: SortDirection,

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

@@ -2,7 +2,7 @@
 import React from 'react';
 import { DataTableCell, DataTableRow } from '@dhis2/ui';
 import { ChangelogChangeCell } from './ChangelogChangeCell';
-import type { ChangelogRecord } from '../../Changelog/Changelog.types';
+import type { ChangelogRecord } from '../Changelog/Changelog.types';
 
 type Props = {|
     record: ChangelogRecord,

src/core_modules/capture-core/components/WidgetsChangelog/common/hooks/useChangelogData.js

@@ -4,16 +4,16 @@ import { v4 as uuid } from 'uuid';
 import { useMemo, useState } from 'react';
 import { useTimeZoneConversion } from '@dhis2/app-runtime';
 import { useApiDataQuery } from '../../../../utils/reactQueryHelpers';
-import { CHANGELOG_ENTITY_TYPES, QUERY_KEYS_BY_ENTITY_TYPE } from '../../Changelog/Changelog.constants';
-import type { Change, ChangelogRecord, ItemDefinitions, SortDirection } from '../../Changelog/Changelog.types';
+import { CHANGELOG_ENTITY_TYPES, QUERY_KEYS_BY_ENTITY_TYPE } from '../Changelog/Changelog.constants';
+import type { Change, ChangelogRecord, ItemDefinitions, SortDirection } from '../Changelog/Changelog.types';
 import { convertServerToClient } from '../../../../converters';
 import { convert } from '../../../../converters/clientToList';
 
 type Props = {
     entityId: string,
+    programId?: string,
     entityType: $Values<typeof CHANGELOG_ENTITY_TYPES>,
     dataItemDefinitions: ItemDefinitions,
-    metadataItemDefinitions: ItemDefinitions,
 }
 
 const DEFAULT_PAGE_SIZE = 10;
@@ -23,15 +23,10 @@ const getMetadataItemDefinition = (
     elementKey: string,
     change: Change,
     dataItemDefinitions: ItemDefinitions,
-    metadataItemDefinitions: ItemDefinitions,
 ) => {
     const { dataElement, trackedEntityAttribute } = change;
-    let metadataElement = metadataItemDefinitions[elementKey];
     const fieldId = dataElement ?? trackedEntityAttribute;
-
-    if (!metadataElement && fieldId) {
-        metadataElement = dataItemDefinitions[fieldId];
-    }
+    const metadataElement = fieldId ? dataItemDefinitions[fieldId] : dataItemDefinitions[elementKey];
 
     return { metadataElement, fieldId };
 };
@@ -40,7 +35,6 @@ export const useChangelogData = ({
     entityId,
     entityType,
     dataItemDefinitions,
-    metadataItemDefinitions,
 }: Props) => {
     const [page, setPage] = useState<number>(1);
     const [pageSize, setPageSize] = useState<number>(DEFAULT_PAGE_SIZE);
@@ -75,7 +69,6 @@ export const useChangelogData = ({
                 elementKey,
                 change,
                 dataItemDefinitions,
-                metadataItemDefinitions,
             );
             if (!metadataElement) return null;
 
@@ -105,7 +98,7 @@ export const useChangelogData = ({
                 currentValue,
             };
         }).filter(Boolean);
-    }, [data, dataItemDefinitions, fromServerDate, metadataItemDefinitions]);
+    }, [data, dataItemDefinitions, fromServerDate]);
 
     return {
         records,

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

@@ -1,2 +1,4 @@
 // @flow
-export { CHANGELOG_ENTITY_TYPES, Changelog } from './Changelog';
+export { CHANGELOG_ENTITY_TYPES } from './common/Changelog';
+export { WidgetEventChangelog } from './WidgetEventChangelog';
+export { WidgetTrackedEntityChangelog } from './WidgetTrackedEntityChangelog';