From c000c282bc252eadc163edf947531aa7d03fb7ed Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Mon, 4 Sep 2023 13:48:33 +0200 Subject: [PATCH 1/3] fix: parse the ou filter correctly for all ou types --- src/components/Item/AppItem/Item.js | 24 +--- .../AppItem/__tests__/getIframeSrc.spec.js | 124 ++++++++++++++++++ src/components/Item/AppItem/getIframeSrc.js | 17 +++ 3 files changed, 146 insertions(+), 19 deletions(-) create mode 100644 src/components/Item/AppItem/__tests__/getIframeSrc.spec.js create mode 100644 src/components/Item/AppItem/getIframeSrc.js diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js index c6e50d71f..00b0ee3d4 100644 --- a/src/components/Item/AppItem/Item.js +++ b/src/components/Item/AppItem/Item.js @@ -3,27 +3,13 @@ import { Divider, colors, spacers, IconQuestion24 } from '@dhis2/ui' import PropTypes from 'prop-types' import React from 'react' import { connect } from 'react-redux' -import { FILTER_ORG_UNIT } from '../../../actions/itemFilters' -import { EDIT, isEditMode } from '../../../modules/dashboardModes' +import { EDIT, isEditMode } from '../../../modules/dashboardModes.js' import { sGetItemFiltersRoot, DEFAULT_STATE_ITEM_FILTERS, -} from '../../../reducers/itemFilters' -import ItemHeader from '../ItemHeader/ItemHeader' - -const getIframeSrc = (appDetails, item, itemFilters) => { - let iframeSrc = `${appDetails.launchUrl}?dashboardItemId=${item.id}` - - if (itemFilters[FILTER_ORG_UNIT] && itemFilters[FILTER_ORG_UNIT].length) { - const ouIds = itemFilters[FILTER_ORG_UNIT].map( - ouFilter => ouFilter.path.split('/').slice(-1)[0] - ) - - iframeSrc += `&userOrgUnit=${ouIds.join(',')}` - } - - return iframeSrc -} +} from '../../../reducers/itemFilters.js' +import ItemHeader from '../ItemHeader/ItemHeader.js' +import { getIframeSrc } from './getIframeSrc.js' const AppItem = ({ dashboardMode, item, itemFilters }) => { const { d2 } = useD2() @@ -33,7 +19,7 @@ const AppItem = ({ dashboardMode, item, itemFilters }) => { const appKey = item.appKey if (appKey) { - appDetails = d2.system.installedApps.find(app => app.key === appKey) + appDetails = d2.system.installedApps.find((app) => app.key === appKey) } const hideTitle = diff --git a/src/components/Item/AppItem/__tests__/getIframeSrc.spec.js b/src/components/Item/AppItem/__tests__/getIframeSrc.spec.js new file mode 100644 index 000000000..74f0b343f --- /dev/null +++ b/src/components/Item/AppItem/__tests__/getIframeSrc.spec.js @@ -0,0 +1,124 @@ +import { getIframeSrc } from '../getIframeSrc.js' + +const appDetails = { launchUrl: 'debug/dev' } +const dashboardItem = { id: 'rainbowdashitem' } + +describe('getIframeSrc', () => { + it('no ou filter', () => { + const ouFilter = [] + + const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) + expect(src).toEqual( + `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}` + ) + }) + + it('should return the correct iframe src', () => { + const ouFilter = [ + { + id: 'fdc6uOvgoji', + path: '/ImspTQPwCqd/fdc6uOvgoji', + name: 'Bombali', + }, + { + id: 'lc3eMKXaEfw', + path: '/ImspTQPwCqd/lc3eMKXaEfw', + name: 'Bonthe', + }, + ] + + const appDetails = { launchUrl: 'debug/dev' } + const dashboardItem = { id: 'rainbowdashitem' } + + const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) + expect(src).toEqual( + `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}&userOrgUnit=fdc6uOvgoji,lc3eMKXaEfw` + ) + }) + + it('org unit group in filter', () => { + const ouFilter = [ + { + id: 'OU_GROUP-b0EsAxm8Nge', + name: 'Western Area', + }, + { + id: 'lc3eMKXaEfw', + path: '/ImspTQPwCqd/lc3eMKXaEfw', + name: 'Bonthe', + }, + ] + + const appDetails = { launchUrl: 'debug/dev' } + const dashboardItem = { id: 'rainbowdashitem' } + + const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) + expect(src).toEqual( + `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}&userOrgUnit=OU_GROUP-b0EsAxm8Nge,lc3eMKXaEfw` + ) + }) + + it('org unit level in filter', () => { + const ouFilter = [ + { + id: 'LEVEL-m9lBJogzE95', + name: 'Facility', + }, + { + id: 'fdc6uOvgoji', + path: '/ImspTQPwCqd/fdc6uOvgoji', + name: 'Bombali', + }, + ] + + const appDetails = { launchUrl: 'debug/dev' } + const dashboardItem = { id: 'rainbowdashitem' } + + const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) + expect(src).toEqual( + `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}&userOrgUnit=LEVEL-m9lBJogzE95,fdc6uOvgoji` + ) + }) + + it('user org unit in filter', () => { + const ouFilter = [ + { + id: 'USER_ORGUNIT', + displayName: 'User organisation unit', + }, + ] + + const appDetails = { launchUrl: 'debug/dev' } + const dashboardItem = { id: 'rainbowdashitem' } + + const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) + expect(src).toEqual( + `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}&userOrgUnit=USER_ORGUNIT` + ) + }) + + it('all user org units in filter', () => { + const ouFilter = [ + { + id: 'USER_ORGUNIT_CHILDREN', + displayName: 'User sub-units', + }, + { + id: 'USER_ORGUNIT_GRANDCHILDREN', + displayName: 'User sub-x2-units', + }, + { + id: 'USER_ORGUNIT', + displayName: 'User organisation unit', + }, + ] + + const appDetails = { launchUrl: 'debug/dev' } + const dashboardItem = { id: 'rainbowdashitem' } + + const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) + expect(src).toEqual( + `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}&userOrgUnit=USER_ORGUNIT_CHILDREN,USER_ORGUNIT_GRANDCHILDREN,USER_ORGUNIT` + ) + }) +}) diff --git a/src/components/Item/AppItem/getIframeSrc.js b/src/components/Item/AppItem/getIframeSrc.js new file mode 100644 index 000000000..42fe7d4bc --- /dev/null +++ b/src/components/Item/AppItem/getIframeSrc.js @@ -0,0 +1,17 @@ +import { FILTER_ORG_UNIT } from '../../../actions/itemFilters.js' + +export const getIframeSrc = (appDetails, item, itemFilters) => { + let iframeSrc = `${appDetails.launchUrl}?dashboardItemId=${item.id}` + + console.log('jj itemfilters', itemFilters) + + if (itemFilters[FILTER_ORG_UNIT] && itemFilters[FILTER_ORG_UNIT].length) { + const ouIds = itemFilters[FILTER_ORG_UNIT].map(({ id, path }) => + path ? path.split('/').slice(-1)[0] : id + ) + + iframeSrc += `&userOrgUnit=${ouIds.join(',')}` + } + + return iframeSrc +} From b83712820140848393e74bc6b7007ee97fb893ef Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Tue, 5 Sep 2023 07:44:00 +0200 Subject: [PATCH 2/3] fix: test cleanup --- .../AppItem/__tests__/getIframeSrc.spec.js | 32 ++++--------------- src/components/Item/AppItem/getIframeSrc.js | 2 -- 2 files changed, 7 insertions(+), 27 deletions(-) diff --git a/src/components/Item/AppItem/__tests__/getIframeSrc.spec.js b/src/components/Item/AppItem/__tests__/getIframeSrc.spec.js index 74f0b343f..c6ce9d1e3 100644 --- a/src/components/Item/AppItem/__tests__/getIframeSrc.spec.js +++ b/src/components/Item/AppItem/__tests__/getIframeSrc.spec.js @@ -2,15 +2,14 @@ import { getIframeSrc } from '../getIframeSrc.js' const appDetails = { launchUrl: 'debug/dev' } const dashboardItem = { id: 'rainbowdashitem' } +const expectedSrc = `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}` describe('getIframeSrc', () => { it('no ou filter', () => { const ouFilter = [] const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) - expect(src).toEqual( - `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}` - ) + expect(src).toEqual(expectedSrc) }) it('should return the correct iframe src', () => { @@ -27,12 +26,9 @@ describe('getIframeSrc', () => { }, ] - const appDetails = { launchUrl: 'debug/dev' } - const dashboardItem = { id: 'rainbowdashitem' } - const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) expect(src).toEqual( - `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}&userOrgUnit=fdc6uOvgoji,lc3eMKXaEfw` + `${expectedSrc}&userOrgUnit=fdc6uOvgoji,lc3eMKXaEfw` ) }) @@ -49,12 +45,9 @@ describe('getIframeSrc', () => { }, ] - const appDetails = { launchUrl: 'debug/dev' } - const dashboardItem = { id: 'rainbowdashitem' } - const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) expect(src).toEqual( - `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}&userOrgUnit=OU_GROUP-b0EsAxm8Nge,lc3eMKXaEfw` + `${expectedSrc}&userOrgUnit=OU_GROUP-b0EsAxm8Nge,lc3eMKXaEfw` ) }) @@ -71,12 +64,9 @@ describe('getIframeSrc', () => { }, ] - const appDetails = { launchUrl: 'debug/dev' } - const dashboardItem = { id: 'rainbowdashitem' } - const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) expect(src).toEqual( - `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}&userOrgUnit=LEVEL-m9lBJogzE95,fdc6uOvgoji` + `${expectedSrc}&userOrgUnit=LEVEL-m9lBJogzE95,fdc6uOvgoji` ) }) @@ -88,13 +78,8 @@ describe('getIframeSrc', () => { }, ] - const appDetails = { launchUrl: 'debug/dev' } - const dashboardItem = { id: 'rainbowdashitem' } - const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) - expect(src).toEqual( - `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}&userOrgUnit=USER_ORGUNIT` - ) + expect(src).toEqual(`${expectedSrc}&userOrgUnit=USER_ORGUNIT`) }) it('all user org units in filter', () => { @@ -113,12 +98,9 @@ describe('getIframeSrc', () => { }, ] - const appDetails = { launchUrl: 'debug/dev' } - const dashboardItem = { id: 'rainbowdashitem' } - const src = getIframeSrc(appDetails, dashboardItem, { ou: ouFilter }) expect(src).toEqual( - `${appDetails.launchUrl}?dashboardItemId=${dashboardItem.id}&userOrgUnit=USER_ORGUNIT_CHILDREN,USER_ORGUNIT_GRANDCHILDREN,USER_ORGUNIT` + `${expectedSrc}&userOrgUnit=USER_ORGUNIT_CHILDREN,USER_ORGUNIT_GRANDCHILDREN,USER_ORGUNIT` ) }) }) diff --git a/src/components/Item/AppItem/getIframeSrc.js b/src/components/Item/AppItem/getIframeSrc.js index 42fe7d4bc..ae2b1c2c8 100644 --- a/src/components/Item/AppItem/getIframeSrc.js +++ b/src/components/Item/AppItem/getIframeSrc.js @@ -3,8 +3,6 @@ import { FILTER_ORG_UNIT } from '../../../actions/itemFilters.js' export const getIframeSrc = (appDetails, item, itemFilters) => { let iframeSrc = `${appDetails.launchUrl}?dashboardItemId=${item.id}` - console.log('jj itemfilters', itemFilters) - if (itemFilters[FILTER_ORG_UNIT] && itemFilters[FILTER_ORG_UNIT].length) { const ouIds = itemFilters[FILTER_ORG_UNIT].map(({ id, path }) => path ? path.split('/').slice(-1)[0] : id From 17c9595b974a66e0516550c301df11aa1708b877 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Wed, 13 Sep 2023 14:02:53 +0200 Subject: [PATCH 3/3] chore: lint --- .d2styleignore | 1 + src/components/Item/AppItem/Item.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.d2styleignore b/.d2styleignore index cc9010b2a..83af254cc 100644 --- a/.d2styleignore +++ b/.d2styleignore @@ -4,3 +4,4 @@ /src/locales/* /cypress/assets /cypress/fixtures +cypress.env.json diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js index 00b0ee3d4..5c6bc9fa6 100644 --- a/src/components/Item/AppItem/Item.js +++ b/src/components/Item/AppItem/Item.js @@ -19,7 +19,7 @@ const AppItem = ({ dashboardMode, item, itemFilters }) => { const appKey = item.appKey if (appKey) { - appDetails = d2.system.installedApps.find((app) => app.key === appKey) + appDetails = d2.system.installedApps.find(app => app.key === appKey) } const hideTitle =