DHIS2-2151-Sharing-UI (#508)

* Add UI for access control in tracker programs

* Improve access description, add d2-ui-sharing, general refactor

* Improve sharing of programs

* Refactor: renaming, moving components

* Use improved sharing dialog, refactor

* Add more translations

* Rearranged class functions, fix John's complaints

* Update sharing dialog to 1.0.12

* Add default publicAccess to new programs and stages

* New program access UI now works with unsaved event- and tracker programs

.gitignore

@@ -21,4 +21,8 @@ target/*
 npm-debug.log
 yarn-error.log
 stats.json
-package-lock.json
+package-lock.json
+
+.classpath
+.project
+.settings/

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+    bracketSpacing: true,
+    jsxBracketSameLine: false,
+    printWidth: 100,
+    singleQuote: true,
+    tabWidth: 4,
+    trailingComma: 'all',
+};

package.json

@@ -71,7 +71,7 @@
     "webpack-visualizer-plugin": "^0.1.5"
   },
   "dependencies": {
-    "@dhis2/d2-ui-sharing-dialog": "^1.0.10",
+    "@dhis2/d2-ui-sharing-dialog": "^1.0.12",
     "d2": "^29.1.3",
     "d2-ui": "29.0.20",
     "material-ui": "^0.17.0",

src/EditModel/event-program/EventProgramStepperContent.js

@@ -8,7 +8,7 @@ import eventProgramStore from './eventProgramStore';
 import steps from './event-program-steps';
 import AssignDataElements from './assign-data-elements/AssignDataElements';
 import EditDataEntryForm from './create-data-entry-form/CreateDataEntryForm.component';
-import AssignOrganisationUnits from './assign-organisation-units/AssignOrganisationUnits';
+import ProgramAccess from './program-access/ProgramAccess';
 import EventProgramNotifications from './notifications/EventProgramNotifications';
 import { createFieldConfigsFor } from '../formHelpers';
 import { editFieldChanged } from './actions';
@@ -52,7 +52,7 @@ const stepperConfig = () => {
         EditProgramDetailsForm: EditProgramDetailsForm,
         AssignDataElements,
         EditDataEntryForm,
-        AssignOrganisationUnits,
+        ProgramAccess,
         EventProgramNotifications,
     };
 

src/EditModel/event-program/epics.js

@@ -11,14 +11,6 @@ import {
 
 import {
     PROGRAM_STAGE_FIELD_EDIT,
-    PROGRAM_STAGE_EDIT_RESET,
-    PROGRAM_STAGE_EDIT_CANCEL,
-    PROGRAM_STAGE_EDIT_SAVE,
-    PROGRAM_STAGE_DELETE,
-    editProgramStageReset,
-    PROGRAM_STAGE_ADD,
-    PROGRAM_STAGE_EDIT,
-    editProgramStage,
 } from './tracker-program/program-stages/actions';
 
 import eventProgramStore, {
@@ -32,15 +24,9 @@ import { combineEpics } from 'redux-observable';
 import {
     get,
     getOr,
-    set,
     first,
     map,
     compose,
-    groupBy,
-    isEqual,
-    keyBy,
-    find,
-    memoize,
     values,
     flatten,
 } from 'lodash/fp';
@@ -70,13 +56,15 @@ function loadEventProgramMetadataByProgramId(programPayload) {
     if (programId === 'add') {
         const programUid = generateUid();
         const programStageUid = generateUid();
+        const publicAccess = "rw------";
 
         // A api format payload that contains a program and a programStage
         const programStages =
             programPayload.query.type === 'WITH_REGISTRATION'
                 ? []
                 : [{
                     id: programStageUid,
+                    publicAccess,
                     programStageDataElements: [],
                     notificationTemplates: [],
                     programStageSections: [],
@@ -85,6 +73,7 @@ function loadEventProgramMetadataByProgramId(programPayload) {
             programs: [
                 {
                     id: programUid,
+                    publicAccess,
                     programStages,
                     programTrackedEntityAttributes: [],
                     organisationUnits: [],
@@ -149,13 +138,15 @@ function loadEventProgramMetadataByProgramId(programPayload) {
                 return state;
             });
     }
+
     const programFields = [
         ':owner,displayName',
         'attributeValues[:all,attribute[id,name,displayName]]',
         'organisationUnits[id,path]',
         'dataEntryForm[:owner]',
         'notificationTemplates[:owner]',
         'programTrackedEntityAttributes',
+        'user[id,name]',
     ].join(',');
 
     return api$
@@ -166,7 +157,7 @@ function loadEventProgramMetadataByProgramId(programPayload) {
                         'metadata',
                         '?fields=:owner,displayName',
                         `&programs:filter=id:eq:${programId}`,
-                        `&programs:fields=${programFields},programStages[:owner,displayName,programStageDataElements[:owner,renderType,dataElement[id,displayName,valueType,optionSet]],notificationTemplates[:owner,displayName],dataEntryForm[:owner],programStageSections[:owner,displayName,dataElements[id,displayName]]]`,
+                        `&programs:fields=${programFields},programStages[:owner,user[id,name],displayName,programStageDataElements[:owner,renderType,dataElement[id,displayName,valueType,optionSet]],notificationTemplates[:owner,displayName],dataEntryForm[:owner],programStageSections[:owner,displayName,dataElements[id,displayName]]]`,
                         '&dataElements:fields=id,displayName,valueType,optionSet',
                         '&dataElements:filter=domainType:eq:TRACKER',
                         '&trackedEntityAttributes:fields=id,displayName,valueType,optionSet,unique',
@@ -329,6 +320,10 @@ export const programStageModelEdit = createModelToEditProgramStageEpic(
 );
 
 const setEventPSStage = (state) => {
+    if (state.program.programType === "WITH_REGISTRATION") {
+        return state;
+    }
+
     const ps = first(state.programStages);
     ps.name = state.program.name || state.program.id;
     return {

src/EditModel/event-program/event-program-steps.js

@@ -15,9 +15,9 @@ const steps = [
         componentName: 'EditDataEntryForm',
     },
     {
-        key: 'assign_organisation_units',
-        name: 'assign_organisation_units',
-        componentName: 'AssignOrganisationUnits',
+        key: 'access',
+        name: 'access',
+        componentName: 'ProgramAccess',
     },
     {
         key: 'notifications',

src/EditModel/event-program/program-access/ProgramAccess.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Paper from 'material-ui/Paper/Paper';
+import PropTypes from 'prop-types';
+import Heading from 'd2-ui/lib/headings/Heading.component';
+import OrganisationUnitTreeMultiSelect from '../../../forms/form-fields/orgunit-tree-multi-select';
+import ProgramStagesAccess from './ProgramStagesAccess';
+import { branch, renderComponent } from 'recompose';
+
+const styles = {
+    paper: {
+        padding: '3rem',
+    },
+    padding: {
+        paddingTop: '3rem',
+    }
+};
+
+const ProgramNotSavedMessage = () => (
+    <div>Save the program in order to access sharing settings</div>
+);
+
+const ProgramStagesAccessHOC = branch(
+    props => !props.model.dataValues.publicAccess,
+    renderComponent(ProgramNotSavedMessage)
+)(ProgramStagesAccess);
+
+const ProgramAccess = ({ modelToEdit }, { d2 }) => {
+    if (!modelToEdit) {
+        return null;
+    }
+
+    return (
+        <Paper style={styles.paper}>
+            <Heading>{d2.i18n.getTranslation("organisation_units")}</Heading>
+            <OrganisationUnitTreeMultiSelect
+                value={modelToEdit.organisationUnits}
+                model={modelToEdit}
+                modelDefinition={modelToEdit.modelDefinition}
+            />
+            <Heading style={styles.padding}>{d2.i18n.getTranslation("roles_and_access")}</Heading>
+            <ProgramStagesAccessHOC
+                model={modelToEdit}
+            />
+        </Paper>
+    );
+}
+
+ProgramAccess.contextTypes = {
+    d2: PropTypes.object,
+};
+
+export default ProgramAccess;