Make sure mechs are done loading before displaying error. re DAT-437.…

… Version bump.

public/manifest.webapp

@@ -17,4 +17,4 @@
         "href": "*"
     }
   }
-}
+}

src/modules/action/components/action.component.tsx

@@ -6,6 +6,7 @@ import {getMechanismsInfo, getMechanismStates, performAction} from "../services/
 import Step from "./step/step.component";
 import MechanismTabs from "./mechanism/mechanismTabs.component";
 import {fetchUserOu, fetchUserType} from "../services/user.service";
+import {getLevel3OUs} from "../services/ou.service";
 import WorkflowOverview from "./workflowOverview.component";
 import {idName} from "../models/idName";
 import WorkflowPeriodService from "../../shared/services/workflowsPeriods.service";
@@ -22,7 +23,8 @@ export default class Action extends React.Component<
         userType: string,
         mechanisms: MechanismModel[],
         mechanismState: MechanismState,
-        processing: boolean
+        processing: boolean,
+        ous: []
     }
     > {
     constructor(props){
@@ -42,31 +44,44 @@ export default class Action extends React.Component<
             userOu: null,
             mechanismState: null,
             mechanisms: mechanisms,
-            processing: false
+            processing: false,
+            ous: []
         };
         this.getMechanismStatuses(this.state.workflow.id, this.state.period.id, this.state.mechanisms);
-        this.getMechanismsInfo(this.state.mechanisms);
-        this.getUserType();
-        this.getUserOu();
 
         let wfService = new WorkflowPeriodService();
         wfService.init().then(()=>{
             this.setState({period: {id: props.period, name: wfService.getPeriodNameById(props.workflow, props.period)}});
         });
     }
 
+    async componentDidMount() {
+        await this.getL3Ous();
+        this.getMechanismsInfo(this.state.mechanisms, this.state.ous);
+        this.getUserType();
+        this.getUserOu();
+    }
+
     getMechanismStatuses(workflow: string, period: string, mechanisms: MechanismModel[]){
         return getMechanismStates(workflow, period, mechanisms).then(state=>{
             this.setState({mechanismState: state});
         });
     }
 
-    getMechanismsInfo(mechanisms: MechanismModel[]){
+    getMechanismsInfo(mechanisms: MechanismModel[], ous: []){
         getMechanismsInfo(mechanisms.map(m=>m.meta.cocId)).then(mechanismsInfo=>{
             mechanismsInfo.forEach((info,i)=>{
-                mechanisms[i].info = mechanismsInfo[i];
+                //assign is necessary because of dedupe sharing mechanismInfo
+                mechanisms[i].info = Object.assign({},mechanismsInfo[i]);
+                // Dedupe fix to get the correct OU displayed
+                if (!mechanisms[i].info['ou'] && mechanisms[i].meta['ou']) {
+                    let lookup = ous.filter(f=>f['id']===mechanisms[i].meta['ou']);
+                    if (lookup[0] && lookup[0]['displayName']) {
+                        mechanisms[i].info['ou'] = lookup[0]['displayName'];
+                    }
+                }
             });
-            mechanisms = mechanisms.sort((a,b)=>a.info.name>b.info.name?1:-1)
+            mechanisms = mechanisms.sort((a,b)=>a.info.name>b.info.name?1:a.info.ou>b.info.ou?1:-1)
             this.setState({mechanisms});
         });
     };
@@ -81,6 +96,11 @@ export default class Action extends React.Component<
         fetchUserOu().then(ou=>this.setState({userOu: ou}));
     }
 
+    async getL3Ous(){
+        let ous = await getLevel3OUs();
+        this.setState({ous: ous});
+    }
+
     performAction = (action:string)=>{
         this.setState({processing: true});
         performAction(action, this.state.workflow.id, this.state.period.id, this.state.mechanisms.map(m=>m.meta), this.state.mechanismState.status).then((response)=>{

src/modules/action/components/mechanism/mechanismTabs.component.tsx

@@ -69,7 +69,7 @@ export default function MechanismTabs({workflow, period, userOu, mechanisms, mec
     return <Paper>
         <Tabs value={openTab} onChange={(event,tabIndex)=>setOpenTab(tabIndex)} variant="scrollable" onClick={()=>userClicked(clicks+1)}>
             {renderOverviewTab(mechanisms.length)}
-            {mechanisms.slice(0, 29).map(mechanism=><Tab label={mechanism.info.name} key={mechanism.meta.cocId}/>)}
+            {mechanisms.slice(0, 29).map(mechanism=><Tab label={mechanism.info.name} key={mechanism.meta.cocId+mechanism.meta.ou}/>)}
         </Tabs>
         {lengthWarning(mechanisms.length, clicks)}
         {renderMechanismInfo(openTab, workflow, period, userOu, mechanismState, mechanisms)}

src/modules/action/services/ou.service.tsx

@@ -0,0 +1,14 @@
+import api from "../../shared/services/api.service";
+
+/**
+ * get all the level 3 OUs which 
+ * @param workflow string
+ * @param period string
+ */
+ function getLevelThreeOusUrl(){
+    return `/organisationUnits/?level=3&paging=false`;
+}
+
+export function getLevel3OUs():Promise<[]>{
+    return api.get(getLevelThreeOusUrl()).then(response=>response.organisationUnits);
+}

src/modules/list/components/list.component.tsx

@@ -80,6 +80,7 @@ class List extends React.Component<
             if (!f.ou || !f.period || !f.workflow) return;
             this.setState({mechanisms: null, loading: {mechanisms: true}});
             fetchMechanisms(this.state.filters).then(mechanisms=>{
+                mechanisms.sort((a,b)=>a.info['ou']>b.info['ou']?1:-1)
                 this.setState({mechanisms: mechanisms, loading:{mechanisms: false}});
             });
         },0);
@@ -138,7 +139,7 @@ class List extends React.Component<
 
     renderResults(){
         if (this.state.loading.mechanisms || this.state.loading.filters) return <Loading message='Loading mechanisms...'/>;
-        if (!this.state.mechanisms) return (
+        if (!this.state.loading.mechanisms && !this.state.mechanisms) return (
             <Typography color="secondary">
                 There are no workflows active currently. The quarter is currently closed for data entry and will reopen at a later date, per the <a target='_blank' href='https://datim.zendesk.com/hc/en-us/articles/115001940503-PEPFAR-Data-Calendar' style={styles.link}>PEPFAR Data Calendar</a>.  If you receive this during an active data entry period, please contact <a target='_blank' href='https://datim.zendesk.com/' style={styles.link}>DATIM Support</a>.
             </Typography>);