@dhis2-ui/organisation-unit-tree 7.16.1 → 8.0.0

package/build/cjs/organisation-unit-node/use-org-data/use-org-data.test.js

@@ -31,13 +31,7 @@ describe('OrganisationUnitTree - useOrgData', () => {
         return {
           id: 'A0000000000',
           path: '/A0000000000',
-          displayName: 'Org Unit 1',
-          children: [{
-            id: 'A0000000001',
-            path: '/A0000000000/A0000000001',
-            children: [],
-            displayName: 'Org Unit 2'
-          }]
+          displayName: 'Org Unit 1'
         };
       }
 
@@ -51,7 +45,7 @@ describe('OrganisationUnitTree - useOrgData', () => {
     data: dataProviderData
   }, children);
 
-  it('should respond with `loading: false`, `error: null` and `data: { displayName, id }` initially', () => {
+  it('should respond with `loading: true`, `error: null` and `data: { displayName, id }` initially', () => {
     const {
       result
     } = (0, _reactHooks.renderHook)(() => (0, _useOrgData.useOrgData)('A0000000000', {
@@ -84,13 +78,7 @@ describe('OrganisationUnitTree - useOrgData', () => {
       data: {
         id: 'A0000000000',
         path: '/A0000000000',
-        displayName: 'Org Unit 1',
-        children: [{
-          id: 'A0000000001',
-          path: '/A0000000000/A0000000001',
-          children: [],
-          displayName: 'Org Unit 2'
-        }]
+        displayName: 'Org Unit 1'
       }
     });
   });
@@ -123,30 +111,6 @@ describe('OrganisationUnitTree - useOrgData', () => {
       }
     });
   });
-  it('should call the onComplete callback', async () => {
-    const onComplete = jest.fn();
-    const options = {
-      onComplete,
-      displayName: 'Display name'
-    };
-    const {
-      waitForNextUpdate
-    } = (0, _reactHooks.renderHook)(() => (0, _useOrgData.useOrgData)('A0000000000', options), {
-      wrapper
-    });
-    await waitForNextUpdate();
-    expect(onComplete).toHaveBeenCalledWith({
-      id: 'A0000000000',
-      path: '/A0000000000',
-      displayName: 'Org Unit 1',
-      children: [{
-        id: 'A0000000001',
-        path: '/A0000000000/A0000000001',
-        children: [],
-        displayName: 'Org Unit 2'
-      }]
-    });
-  });
   it('should send the "isUserDataViewFallback" parameter with value "undefined"', async () => {
     const options = {
       displayName: 'Display name'
@@ -182,134 +146,4 @@ describe('OrganisationUnitTree - useOrgData', () => {
     }), expect.objectContaining({}) // contains the `signal`
     );
   });
-  it("should sort the node's children alphabetically by default", async () => {
-    const dataProviderDataWithUnsortedChildren = {
-      organisationUnits: jest.fn((type, {
-        id
-      }) => {
-        if (id === 'A0000000000') {
-          return {
-            id: 'A0000000000',
-            path: '/A0000000000',
-            displayName: 'Org Unit 1',
-            children: [{
-              id: 'A0000000002',
-              path: '/A0000000000/A0000000002',
-              children: [],
-              displayName: 'Org Unit 3'
-            }, {
-              id: 'A0000000001',
-              path: '/A0000000000/A0000000001',
-              children: [],
-              displayName: 'Org Unit 2'
-            }]
-          };
-        }
-
-        return Promise.reject(`No org unit with id "${id}"`);
-      })
-    };
-
-    const wrapperWithUnsortedChildren = ({
-      children
-    }) => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
-      data: dataProviderDataWithUnsortedChildren
-    }, children);
-
-    const {
-      result,
-      waitForNextUpdate
-    } = (0, _reactHooks.renderHook)(() => (0, _useOrgData.useOrgData)('A0000000000', {
-      displayName: 'Display name'
-    }), {
-      wrapper: wrapperWithUnsortedChildren
-    });
-    await waitForNextUpdate();
-    expect(result.current).toEqual({
-      loading: false,
-      error: null,
-      data: {
-        id: 'A0000000000',
-        path: '/A0000000000',
-        displayName: 'Org Unit 1',
-        children: [{
-          id: 'A0000000001',
-          path: '/A0000000000/A0000000001',
-          children: [],
-          displayName: 'Org Unit 2'
-        }, {
-          id: 'A0000000002',
-          path: '/A0000000000/A0000000002',
-          children: [],
-          displayName: 'Org Unit 3'
-        }]
-      }
-    });
-  });
-  it(`should not sort the node's children alphabetically when "suppressAlphabeticalSorting" is true`, async () => {
-    const dataProviderDataWithUnsortedChildren = {
-      organisationUnits: jest.fn((type, {
-        id
-      }) => {
-        if (id === 'A0000000000') {
-          return {
-            id: 'A0000000000',
-            path: '/A0000000000',
-            displayName: 'Org Unit 1',
-            children: [{
-              id: 'A0000000002',
-              path: '/A0000000000/A0000000002',
-              children: [],
-              displayName: 'Org Unit 3'
-            }, {
-              id: 'A0000000001',
-              path: '/A0000000000/A0000000001',
-              children: [],
-              displayName: 'Org Unit 2'
-            }]
-          };
-        }
-
-        return Promise.reject(`No org unit with id "${id}"`);
-      })
-    };
-
-    const wrapperWithUnsortedChildren = ({
-      children
-    }) => /*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
-      data: dataProviderDataWithUnsortedChildren
-    }, children);
-
-    const options = {
-      displayName: 'Display name',
-      suppressAlphabeticalSorting: true
-    };
-    const {
-      result,
-      waitForNextUpdate
-    } = (0, _reactHooks.renderHook)(() => (0, _useOrgData.useOrgData)('A0000000000', options), {
-      wrapper: wrapperWithUnsortedChildren
-    });
-    await waitForNextUpdate();
-    expect(result.current).toEqual({
-      loading: false,
-      error: null,
-      data: {
-        id: 'A0000000000',
-        path: '/A0000000000',
-        displayName: 'Org Unit 1',
-        children: [{
-          id: 'A0000000002',
-          path: '/A0000000000/A0000000002',
-          children: [],
-          displayName: 'Org Unit 3'
-        }, {
-          id: 'A0000000001',
-          path: '/A0000000000/A0000000001',
-          children: [],
-          displayName: 'Org Unit 2'
-        }]
-      }
-    });
-  });
 });

package/build/cjs/organisation-unit-tree/organisation-unit-tree.js

@@ -61,6 +61,7 @@ const OrganisationUnitTree = ({
   const reloadId = (0, _useForceReload.useForceReload)(forceReload);
   const [prevReloadId, setPrevReloadId] = (0, _react.useState)(reloadId);
   const {
+    called,
     loading,
     error,
     data,
@@ -90,11 +91,12 @@ const OrganisationUnitTree = ({
 
     return () => console.warn('@TODO: Why does this component unmount after a force reload?');
   }, [reloadId, prevReloadId, refetch]);
+  const isLoading = !called || loading;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest
-  }, loading && /*#__PURE__*/_react.default.createElement(_rootLoading.RootLoading, null), error && /*#__PURE__*/_react.default.createElement(_rootError.RootError, {
+  }, isLoading && /*#__PURE__*/_react.default.createElement(_rootLoading.RootLoading, null), error && /*#__PURE__*/_react.default.createElement(_rootError.RootError, {
     error: error
-  }), !error && !loading && rootIds.map(rootId => {
+  }), !error && !isLoading && rootIds.map(rootId => {
     const rootNode = data[rootId];
     return /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitNode, {
       key: rootNode.path,

package/build/cjs/organisation-unit-tree/use-root-org-data/use-root-org-data.js

@@ -19,8 +19,7 @@ const createRootQuery = ids => ids.reduce((query, id) => ({ ...query,
       isUserDataViewFallback
     }) => ({
       isUserDataViewFallback,
-      fields: ['displayName', 'path', 'id'],
-      paging: false
+      fields: ['displayName', 'path', 'id']
     })
   }
 }), {});
@@ -42,18 +41,21 @@ const useRootOrgData = (ids, {
   const variables = {
     isUserDataViewFallback
   };
+  const rootOrgUnits = (0, _appRuntime.useDataQuery)(query, {
+    variables
+  });
   const {
+    called,
     loading,
     error,
     data,
     refetch
-  } = (0, _appRuntime.useDataQuery)(query, {
-    variables
-  });
+  } = rootOrgUnits;
   const patchedData = (0, _react.useMemo)(() => {
     return data ? (0, _patchMissingDisplayName.patchMissingDisplayName)(data) : data;
   }, [data]);
   return {
+    called,
     loading,
     error: error || null,
     data: patchedData || null,

package/build/es/__e2e__/common.js

@@ -4,39 +4,60 @@ import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 export const namespace = 'OrganisationUnitTree';
 export const delayResponse = (delay, response) => () => new Promise(resolve => setTimeout(() => resolve(response), delay));
-export const getOrganisationUnitData = id => {
+
+const createResponse = ({
+  fields,
+  id,
+  path,
+  displayName,
+  children
+}) => ({ ...(fields.includes('id') ? {
+    id
+  } : {}),
+  ...(fields.includes('path') ? {
+    path
+  } : {}),
+  ...(fields.includes('displayName') ? {
+    displayName
+  } : {}),
+  ...(fields.includes('children::size') ? {
+    children: children.length
+  } : {}),
+  ...(fields.includes('children[id,path,displayName]') ? {
+    children
+  } : {})
+});
+
+export const getOrganisationUnitData = (id, {
+  fields
+}) => {
   let data;
 
   if (id === 'A0000000000') {
-    data = {
+    data = createResponse({
+      fields,
       id: 'A0000000000',
       path: '/A0000000000',
       displayName: 'Org Unit 1',
       children: [{
         id: 'A0000000001',
         path: '/A0000000000/A0000000001',
-        children: [{
-          id: 'A0000000003'
-        }, {
-          id: 'A0000000004'
-        }],
         displayName: 'Org Unit 2'
       }, {
         id: 'A0000000002',
         path: '/A0000000000/A0000000002',
-        children: [],
         displayName: 'Org Unit 3'
       }, {
         id: 'A0000000006',
         path: '/A0000000000/A0000000006',
-        children: [],
         displayName: 'Org Unit 7'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000001') {
-    data = {
+    data = createResponse({
+      fields,
       id: 'A0000000001',
       path: '/A0000000000/A0000000001',
       displayName: 'Org Unit 2',
@@ -51,20 +72,22 @@ export const getOrganisationUnitData = id => {
         children: [],
         displayName: 'Org Unit 5'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000002') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 3',
       id: 'A0000000002',
       path: '/A0000000000/A0000000002',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000003') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 4',
       id: 'A0000000003',
       path: '/A0000000000/A0000000001/A0000000003',
@@ -74,43 +97,48 @@ export const getOrganisationUnitData = id => {
         children: [],
         displayName: 'Org Unit 8'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000004') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 5',
       id: 'A0000000004',
       path: '/A0000000000/A0000000001/A0000000004',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000006') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 7',
       id: 'A0000000006',
       path: '/A0000000000/A0000000006',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000007') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 8',
       id: 'A0000000007',
       path: '/A0000000000/A0000000001/A0000000003/A0000000007',
       children: []
-    };
+    });
   }
 
   return data;
 };
 export const dataProviderData = {
   organisationUnits: (_, {
-    id
+    id,
+    params = {}
   }) => {
-    const data = getOrganisationUnitData(id);
+    console.log('id, params', id, params);
+    const data = getOrganisationUnitData(id, params);
 
     if (!data) {
       return Promise.reject(new Error('404 - Org unit not found'));

package/build/es/__e2e__/tree_api.stories.e2e.js

@@ -6,19 +6,27 @@ import { StatefulMultiSelectionWrapper, dataProviderData, namespace } from './co
 const customizedDataProviderData = {
   organisationUnits: (...args) => {
     const [, {
-      id
+      id,
+      params
     }] = args;
+    const {
+      fields
+    } = params;
 
     if (id === 'A0000000000') {
-      return dataProviderData.organisationUnits(...args).then(data => ({ ...data,
-        children: data.children.slice(0, 1)
-      }));
+      return dataProviderData.organisationUnits(...args).then(data => {
+        var _data$children;
+
+        return { ...data,
+          children: fields.includes('children::size') ? 1 : (_data$children = data.children) === null || _data$children === void 0 ? void 0 : _data$children.slice(0, 1)
+        };
+      });
     }
 
     if (id === 'A0000000001') {
       return dataProviderData.organisationUnits(...args).then(data => ({ ...data,
         path: '/A0000000001',
-        children: []
+        children: fields.includes('children::size') ? 0 : []
       }));
     }
 

package/build/es/__stories__/development-stories.js

@@ -68,9 +68,7 @@ export const DxWithRealBackend = () => /*#__PURE__*/React.createElement("div", n
 }, "Settings app / Access")), /*#__PURE__*/React.createElement(DataProvider, {
   baseUrl: "https://debug.dhis2.org/dev",
   apiVersion: ""
-}, /*#__PURE__*/React.createElement(Wrapper //initiallyExpanded={['/ImspTQPwCqd/eIQbndfxQMb']}
-, {
-  suppressAlphabeticalSorting: true,
+}, /*#__PURE__*/React.createElement(Wrapper, {
   roots: ['ImspTQPwCqd', 'O6uvpzGd5pu', 'fdc6uOvgoji']
 })));
 DxWithRealBackend.storyName = 'DX: With real backend';

package/build/es/__stories__/shared.js

@@ -6,11 +6,38 @@ export const onChange = (...args) => log && console.log('onChange', ...args);
 export const onExpand = (...args) => log && console.log('onExpand', ...args);
 export const onCollapse = (...args) => log && console.log('onCollapse', ...args);
 export const onChildrenLoaded = (...args) => log && console.log('onChildrenLoaded', ...args);
-export const getOrganisationUnitData = id => {
+
+const createResponse = ({
+  fields,
+  id,
+  path,
+  displayName,
+  children
+}) => ({ ...(fields.includes('id') ? {
+    id
+  } : {}),
+  ...(fields.includes('path') ? {
+    path
+  } : {}),
+  ...(fields.includes('displayName') ? {
+    displayName
+  } : {}),
+  ...(fields.includes('children::size') ? {
+    children: children.length
+  } : {}),
+  ...(fields.includes('children[id,path,displayName]') ? {
+    children
+  } : {})
+});
+
+export const getOrganisationUnitData = (id, {
+  fields
+}) => {
   let data;
 
   if (id === 'A0000000000') {
-    data = {
+    data = createResponse({
+      fields,
       id: 'A0000000000',
       path: '/A0000000000',
       displayName: 'Org Unit 1',
@@ -34,11 +61,12 @@ export const getOrganisationUnitData = id => {
         children: [],
         displayName: 'Org Unit 7'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000001') {
-    data = {
+    data = createResponse({
+      fields,
       id: 'A0000000001',
       path: '/A0000000000/A0000000001',
       displayName: 'Org Unit 2',
@@ -53,20 +81,22 @@ export const getOrganisationUnitData = id => {
         children: [],
         displayName: 'Org Unit 5'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000002') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 3',
       id: 'A0000000002',
       path: '/A0000000000/A0000000002',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000003') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 4',
       id: 'A0000000003',
       path: '/A0000000000/A0000000001/A0000000003',
@@ -76,43 +106,47 @@ export const getOrganisationUnitData = id => {
         children: [],
         displayName: 'Org Unit 8'
       }]
-    };
+    });
   }
 
   if (id === 'A0000000004') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 5',
       id: 'A0000000004',
       path: '/A0000000000/A0000000001/A0000000004',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000006') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 7',
       id: 'A0000000006',
       path: '/A0000000000/A0000000006',
       children: []
-    };
+    });
   }
 
   if (id === 'A0000000007') {
-    data = {
+    data = createResponse({
+      fields,
       displayName: 'Org Unit 8',
       id: 'A0000000007',
       path: '/A0000000000/A0000000001/A0000000003/A0000000007',
       children: []
-    };
+    });
   }
 
   return data;
 };
 export const customData = {
   organisationUnits: (_, {
-    id
+    id,
+    params = {}
   }) => {
-    const data = getOrganisationUnitData(id);
+    const data = getOrganisationUnitData(id, params);
 
     if (!data) {
       return Promise.reject(new Error('404 - Org unit not found'));

package/build/es/features/controlled_expanded/index.js

@@ -2,7 +2,9 @@ import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
 import { getOrganisationUnitData, namespace } from '../../__e2e__/common.js';
 
 const expectOrgUnitsToBeDisplayed = ids => {
-  const expandedLabels = ids.map(id => getOrganisationUnitData(id).displayName);
+  const expandedLabels = ids.map(id => getOrganisationUnitData(id, {
+    fields: ['displayName']
+  }).displayName);
   expandedLabels.forEach(label => {
     cy.get(`:contains("${label}")`).should('exist');
   });
@@ -10,7 +12,9 @@ const expectOrgUnitsToBeDisplayed = ids => {
 
 const expectOrgUnitsToNotBeDisplayed = ids => {
   const expandedLabels = ids.map(id => {
-    const data = getOrganisationUnitData(id);
+    const data = getOrganisationUnitData(id, {
+      fields: ['displayName']
+    });
     return data.displayName;
   });
   expandedLabels.forEach(label => {
@@ -46,7 +50,9 @@ Then('the path should close', () => {
   cy.get('@providedPaths').then(providedPaths => {
     const providedIds = providedPaths.map(path => path.match(/[^/]+$/)[0]);
     const hiddenChildrenIds = providedIds.reduce((acc, cur) => {
-      const curData = getOrganisationUnitData(cur);
+      const curData = getOrganisationUnitData(cur, {
+        fields: ['children[id,path,displayName]']
+      });
       const childrenIds = curData.children.map(({
         id
       }) => id);

package/build/es/features/tree_api/index.js

@@ -95,9 +95,10 @@ Then('the onChildrenLoaded callback gets called', () => {
 Then("the payload contains the loaded children's data", () => {
   cy.window().should(win => {
     const calls = win.onChildrenLoaded.getCalls();
-    const {
+    expect(calls).to.have.length(1);
+    const [{
       args
-    } = calls[calls.length - 1];
-    expect(args[0].id).to.equal('A0000000001');
+    }] = calls;
+    expect(args[0].id).to.equal('A0000000000');
   });
 });

package/build/es/helpers/sort-node-children-alphabetically.js

@@ -1,17 +1,2 @@
-export const sortNodeChildrenAlphabetically = node => {
-  if (!node.children) {
-    return node;
-  }
-
-  const sortedChildren = [...node.children];
-  sortedChildren.sort((left, right) => {
-    if (left.displayName === right.displayName) {
-      return 0;
-    }
-
-    return left.displayName.localeCompare(right.displayName);
-  });
-  return { ...node,
-    children: sortedChildren
-  };
-};
+// sort mutates the original
+export const sortNodeChildrenAlphabetically = children => [...children].sort((left, right) => left.displayName.localeCompare(right.displayName));

package/build/es/locales/en/translations.json

@@ -1,4 +1,5 @@
 {
-    "Could not load children": "",
-    "Error: {{ ERRORMESSAGE }}": ""
+    "No children match filter": "No children match filter",
+    "Could not load children": "Could not load children",
+    "Error: {{ ERRORMESSAGE }}": "Error: {{ ERRORMESSAGE }}"
 }