feat: add ui to configuration data exchanges [DHIS2-16434] #70

tomzemp · 2024-01-29T14:12:37Z

See ticket: https://dhis2.atlassian.net/jira/software/c/projects/DHIS2/issues/DHIS2-16434
And figma mockup: https://www.figma.com/proto/7pn74aKmqiaiK2Y52XjwGN/Aggregate-Data-Exchange-Configurator

Note if you are testing, you need to use system user (or another user with ALL authority or ADD/DELETE authorities for data exchanges)

UI Differences from figma

id scheme information is hidden in advanced section (discussed with Joe, but we did not update the prototypes)
we have an extra warning + click to edit if you are editing anything within target for an external type exchange (this is because you currently need to update authentication details when making these edits)
if you open a exchange with inputIdScheme:CODE, you will get a warning that the app will convert to using inputIdScheme:UID on save (in general, we do not support defining with code when defining these exchanges in the app)

Technical implementation

Since the mockup is structured essentially as two forms (one for saving exchanges, one for saving requests), I have emulated this and nested the request form inside the exchange form (though I suppose it would be possible to structure otherwise). I considered if requests object should be a form value on exchange form but opted instead to just keep track of requests state with useReducer. The main (exchange form) which has most of the technical points of note is https://github.com/dhis2/data-exchange-app/blob/DHIS2-16434/configurations-ui/src/components/edit/exchange-update/edit-exchange.js
Requests are stored internally and will only be committed to the back end when saving an exchange. We discussed the possibility of persisting to the backend on request edit, but this would not be possible for new exchanges (i.e. the exchange needs to already exist such that you can save a request against it).
I've updated the folder structure to create pages and separate components between view/edit mode. I'm not really attached to where anything is, so I could do something else.
OrgUnit, Period, and Data Item selectors are from analytics. In order to disable calculations in the Data Item selector, I am using an alpha release of analytics.
Filters implementation is taken from the maps app (it's not exported, so I've just copy/pasted the code and done some minor adjustments, including changing waste bin icon to remove button (to be consistent with Joe's design)
the visualization open dialog is currently copied into the app from analytics (OpenFileDialog) because analytics library is exporting the FileMenu component which display File and lets you click to open the file dialog, which is not consistent with the use case here. I think it would be better to work with analytics team to export this from analytics, but there's a couple of other modifications we also will need within this app, so it seemed to just import the code directly for now.

Known issues

You cannot currently edit an external exchange without providing the authentication details again. This is a backend issue relating to problems with the patch update: https://dhis2.atlassian.net/browse/DHIS2-16440.
There are not tests at the moment (I'm thinking it would make sense to come back to write tests after the soft freeze as this a continuous release app).
David and Joe and I discussed adding the option to add a request from an existing visualization (from add/edit exchange page). I have not added this yet as there turned out to be some complexities in interpreting some of the visualization parameters into the aggregate data exchange format (e.g. when certain dimensions are filters in a visualization but need to be explicit dimensions in an aggregate data exchange). There are not big obstacles here, but I thought it would be better to submit the PR and create a ticket for the additional work on creating requests from visualizations
Data dimension selector from analytics currently allows for calculations select by default, but we do not want this enabled. Analytics team is going to soon release a new version of the component that allows enabling/disabling certain items, so I am just using the default selector until new one is implemented.

dhis2-bot · 2024-01-29T14:17:57Z

🚀 Deployed on https://pr-70--dhis2-data-exchange.netlify.app

Mohammer5

I'll review this in multiple attempts and share what I found so I don't have to keep the tab open for a long time and potentially lose everything

I created a configuration with a single request ("Foo bar baz" on play/dev). When I edit that configuration and delete the request, the request disappears and I can successfully save the configuration. When I then open the configuration again, the request is still there:

Mohammer5 · 2024-02-13T06:06:42Z

src/components/edit/shared/form-subsection.js

+    className = '',
+}) => (
+    <div className={className}>
+        <div className={styles.subtitleContainer} onClick={onTextClick}>


Needs cursor: pointer;

Mohammer5

The components in src/pages import directly from the structure inside src/components. This is something I'd argue should be done through a consisten use of index.js so pages have to import from src/components only

Mohammer5 · 2024-02-13T09:58:21Z

src/components/edit/exchange-update/edit-exchange.js

+    return error?.message
+}
+
+export const EditExchange = ({ exchangeInfo, addMode }) => {


This name is misleading as it's also used by the add-view, maybe ExchangeForm or something along those lines is better.

Updated this name and other similar names, now using ExchangeForm, ExchangeFormContents, RequestForm, RequestFormContents

tomzemp · 2024-02-13T15:12:39Z

Thanks for the review @Mohammer5 🙏!

I've updated to address your points.

Mohammer5

I didn't find anything obvious anymore, looks good to me so far.
In this case it might be good to get another review on this one as it's so much code that it's quite easy to overlook things. I'll leave that up to you

src/components/edit/exchange-update/exchange-form-contents.js

src/components/edit/exchange-update/requests-overview.js

kabaros

approved - could you please add a ticket to look at the tests after hard freeze (also generally the value of using cypress fixtures)

# [100.2.0](v100.1.6...v100.2.0) (2024-02-29) ### Features * add ui to configuration data exchanges [DHIS2-16434] ([#70](#70)) ([96f6063](96f6063))

dhis2-bot · 2024-02-29T09:01:57Z

🎉 This PR is included in version 100.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

tomzemp added 11 commits January 3, 2024 15:11

feat: initial commit configurations

cd4bde8

feat: start on crud

8ebb202

feat: filters, etc

a082cce

feat: visualization link, dx, schemes, etc.,

78ccb6c

fix: clean up

8022d4c

fix: add ability to open inputIdScheme:code requests

9c1aaf9

feat: clean up

76153c3

fix: cypress updates

1c676cb

fix: delete confirmation modal

8380af8

feat: remove non-implemented visualization request add

3cf877b

fix: css, i18n updates

d9989fa

dhis2-bot temporarily deployed to netlify January 29, 2024 14:17 Inactive

fix: move app.js file

f78d2a7

tomzemp marked this pull request as ready for review January 29, 2024 16:43

tomzemp requested review from a team as code owners January 29, 2024 16:43

dhis2-bot temporarily deployed to netlify January 29, 2024 16:45 Inactive

fix: selective disable of auth field validations

b8c634c

dhis2-bot temporarily deployed to netlify January 31, 2024 15:10 Inactive

tomzemp added 2 commits February 1, 2024 13:51

fix: handle lower case id scheme values

b4ef1fb

fix: password type on pat field

8effc27

dhis2-bot temporarily deployed to netlify February 1, 2024 12:54 Inactive

fix: limit data items selector

677e707

dhis2-bot temporarily deployed to netlify February 1, 2024 13:24 Inactive

Mohammer5 requested changes Feb 13, 2024

View reviewed changes

Mohammer5 reviewed Feb 13, 2024

View reviewed changes

fix: register state change when request is deleted

2035251

dhis2-bot temporarily deployed to netlify February 13, 2024 14:14 Inactive

fix: styling on advanced options click

ab2debc

tomzemp added 2 commits February 13, 2024 16:09

fix: updat imports

9555ec1

fix: update component names

fb6c6bf

dhis2-bot temporarily deployed to netlify February 13, 2024 15:11 Inactive

Mohammer5 approved these changes Feb 14, 2024

View reviewed changes

amcgee reviewed Feb 21, 2024

View reviewed changes

src/components/edit/exchange-update/exchange-form-contents.js Outdated Show resolved Hide resolved

amcgee reviewed Feb 21, 2024

View reviewed changes

src/components/edit/exchange-update/requests-overview.js Outdated Show resolved Hide resolved

dhis2-bot temporarily deployed to netlify February 21, 2024 15:36 Inactive

fix: update ui text

3539c4b

tomzemp force-pushed the DHIS2-16434/configurations-ui branch from 3e91cd9 to 3539c4b Compare February 21, 2024 15:42

dhis2-bot temporarily deployed to netlify February 21, 2024 15:43 Inactive

kabaros approved these changes Feb 28, 2024

View reviewed changes

fix: update empty request language

d225085

dhis2-bot temporarily deployed to netlify February 29, 2024 08:24 Inactive

Merge branch 'master' into DHIS2-16434/configurations-ui

74b23cb

dhis2-bot temporarily deployed to netlify February 29, 2024 08:27 Inactive

tomzemp merged commit 96f6063 into master Feb 29, 2024
12 checks passed

dhis2-bot added a commit that referenced this pull request Feb 29, 2024

chore(release): cut 100.2.0 [skip release]

69e13e9

# [100.2.0](v100.1.6...v100.2.0) (2024-02-29) ### Features * add ui to configuration data exchanges [DHIS2-16434] ([#70](#70)) ([96f6063](96f6063))

dhis2-bot added the released label Feb 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add ui to configuration data exchanges [DHIS2-16434] #70

feat: add ui to configuration data exchanges [DHIS2-16434] #70

tomzemp commented Jan 29, 2024 •

edited

Loading

dhis2-bot commented Jan 29, 2024 •

edited

Loading

Mohammer5 left a comment

Mohammer5 Feb 13, 2024

Mohammer5 left a comment

Mohammer5 Feb 13, 2024

tomzemp Feb 13, 2024

tomzemp commented Feb 13, 2024

Mohammer5 left a comment •

edited

Loading

kabaros left a comment

dhis2-bot commented Feb 29, 2024

feat: add ui to configuration data exchanges [DHIS2-16434] #70

feat: add ui to configuration data exchanges [DHIS2-16434] #70

Conversation

tomzemp commented Jan 29, 2024 • edited Loading

UI Differences from figma

Technical implementation

Known issues

dhis2-bot commented Jan 29, 2024 • edited Loading

Mohammer5 left a comment

Choose a reason for hiding this comment

Mohammer5 Feb 13, 2024

Choose a reason for hiding this comment

Mohammer5 left a comment

Choose a reason for hiding this comment

Mohammer5 Feb 13, 2024

Choose a reason for hiding this comment

tomzemp Feb 13, 2024

Choose a reason for hiding this comment

tomzemp commented Feb 13, 2024

Mohammer5 left a comment • edited Loading

Choose a reason for hiding this comment

kabaros left a comment

Choose a reason for hiding this comment

dhis2-bot commented Feb 29, 2024

tomzemp commented Jan 29, 2024 •

edited

Loading

dhis2-bot commented Jan 29, 2024 •

edited

Loading

Mohammer5 left a comment •

edited

Loading