datim-user-management-ng

React based user management for PEPFAR/DATIM

================

Building

Prerequisites

Make sure you have at least the following versions of node/npm, yarn and prettier:

$ node -v
v8.10.0

$ npm -v
5.6.0

$ yarn -v
1.5.1

$ yarn -v prettier
1.9.4

Getting started

Clone the repository from github with the following command

git clone [email protected]:pepfar-datim/datim-user-management-ng.git

Install the node dependencies

yarn

To set up your DHIS2 instance to work with the development service you will need to add the development servers address to the CORS whitelist. You can do this within the DHIS2 Settings app under the access tab. On the access tab add http://localhost:3000 to the CORS Whitelist.

The starter app will look for a DHIS 2 development instance configuration in $DHIS2_HOME/config. So for example if your DHIS2_HOME environment variable is set to ~/.dhis2, the starter app will look for ~/.dhis2/config.js and then ~/.dhis2/config.json and load the first one it can find.

The config should export an object with the properties baseUrl and authorization, where authorization is the base64 encoding of your username and password. You can obtain this value by opening the console in your browser and typing btoa('user:pass').

If no config is found, the default baseUrl is http://localhost:8080/dhis and the default username and password is admin and district, respectively.

See webpack.config.js for details and config.json.example for an example.

This should enable you to run the following node commands:

To run the development server

yarn start

or

DHIS2_HOME=./ && npm start

Testing

To run the tests including coverage

npm test

To run the tests continuously on file changes (for your BDD workflow)

npm run test-watch

Distributing

To make a DHIS2 app zip file, run:

npm run-script dist

• Rename the file build/user-management.zip with versioning, e.g. user-management_29_0_1.zip
• Then load the zip file to your DHIS2 instance.
• NOTE: If you already have the app installed, make sure to remove it first to prevent caching issues.

Crossing the Streams

If it becomes necessary to modify the list of streams (groups) available to users, you will need to edit src/actions/config.js. Locate the const configuration section and then select the userType that will need the new stream. Streams are built after the following pattern:

NEWSTREAM: {    // The displayed name of the stream. User "Double Quotes" if the name contains a space      
  accessLevels: {     // Only 2 properties are valid here: "View Data" and "Enter Data"
                      // "Enter Data" will automatically include the rights of "View Data"
                      // By default the "No Access" button will be displayed
    "View Data": {
      groupName: "New Stream access",     // DHIS2 name of the group
      groupUID: "gRoUp123456",          // User group UID
      impliedRoles: [                   // Array of required user roles, can be omitted otherwise
        {
          name: "Data Entry Aggregate",
          roleUID: "rOLe1234567",
        },
      ],
      locked: 0,                        // 0 = selectable, 1 = mandatory
      preSelected: 0,                   // If you want to helpfully pick the role for them
      selectWhenUA: 1,                  // Should a "User Manager" automatically get this group
    },
  },
  sortOrder: 2,                         // Display order on the page
},

Insert that into the streams section of whichever usertypes need it.

Helpful Tools

• React Developer Tools Chrome Plugin Very helpful for inspecting the UI
• Redux DevTools Chrome Plugin Very helpful for inspecting the state

Contributing

git checkout master
git pull origin master
git branch my-branch
git checkout my-branch
   <do your changes>
npm test
git add <your files>
git commit -m "descriptive and atomic commit message"
git push origin my-branch
git checkout master
git merge my-branch