Prompt user to create root location if its not uploaded yet. (#1303)

* Add Root location creation wizard

* Allow to pass query options to locationHierarchy useQuery

* Integrate root location wizard and test it

* Add Rbac check on the create root location

* Internationalize root location wizard

packages/fhir-location-management/src/components/LocationUnitList/index.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../ducks/location-tree-state';
 import { useTranslation } from '../../mls';
 import { RbacCheck } from '@opensrp/rbac';
+import { RootLocationWizard } from '../RootLocationWizard';
 
 reducerRegistry.register(reducerName, reducer);
 
@@ -68,6 +69,7 @@ export const LocationUnitList: React.FC<LocationUnitListProps> = (props: Locatio
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const history = useHistory();
+  const [showWizard, setShowWizard] = useState(false);
 
   // get the root locations. the root node is the opensrp root location, its immediate children
   // are the user-defined root locations.
@@ -76,12 +78,23 @@ export const LocationUnitList: React.FC<LocationUnitListProps> = (props: Locatio
     isLoading: treeIsLoading,
     error: treeError,
     isFetching: treeIsFetching,
-  } = useGetLocationHierarchy(fhirBaseURL, fhirRootLocationId);
+  } = useGetLocationHierarchy(fhirBaseURL, fhirRootLocationId, {
+    enabled: !showWizard,
+    onError: (error) => {
+      if (error.statusCode === 404) {
+        setShowWizard(true);
+      }
+    },
+  });
 
   if (treeIsLoading) {
     return <Spin size="large" className="custom-spinner" />;
   }
 
+  if (showWizard) {
+    return <RootLocationWizard fhirBaseUrl={fhirBaseURL} rootLocationId={fhirRootLocationId} />;
+  }
+
   if (treeError && !treeData) {
     return <BrokenPage errorMessage={`${treeError.message}`} />;
   }

packages/fhir-location-management/src/components/LocationUnitList/tests/index.test.tsx

@@ -21,8 +21,9 @@ import { RoleContext } from '@opensrp/rbac';
 import { superUserRole } from '@opensrp/react-utils';
 import { locationHierarchyResourceType } from '../../../constants';
 import { locationResourceType } from '../../../constants';
-import { locationSData } from '../../../ducks/tests/fixtures';
 import userEvent from '@testing-library/user-event';
+import { rootlocationFixture } from '../../RootLocationWizard/tests/fixtures';
+import * as notifications from '@opensrp/notifications';
 
 const history = createBrowserHistory();
 
@@ -84,8 +85,8 @@ describe('location-management/src/components/LocationUnitList', () => {
     );
   });
 
-  nock.cleanAll();
   afterEach(() => {
+    nock.cleanAll();
     cleanup();
   });
 
@@ -208,14 +209,9 @@ describe('location-management/src/components/LocationUnitList', () => {
 
   it('Passes selected node as the parent location when adding location clicked', async () => {
     nock(props.fhirBaseURL)
-      .get(`/${locationResourceType}/_search`)
-      .query({ _summary: 'count' })
-      .reply(200, { total: 1000 });
-
-    nock(props.fhirBaseURL)
-      .get(`/${locationResourceType}/_search`)
-      .query({ _count: 1000 })
-      .reply(200, locationSData)
+      .get(`/${locationHierarchyResourceType}/_search`)
+      .query({ _id: props.fhirRootLocationId })
+      .reply(200, fhirHierarchy)
       .persist();
 
     render(<AppWrapper {...props} />);
@@ -239,4 +235,57 @@ describe('location-management/src/components/LocationUnitList', () => {
     // check where we redirected to
     expect(history.location.search).toEqual('?parentId=Location%2F303');
   });
+
+  it('Root location wizard works correclty', async () => {
+    const notificationSuccessMock = jest.spyOn(notifications, 'sendSuccessNotification');
+
+    nock(props.fhirBaseURL)
+      .get(`/${locationHierarchyResourceType}/_search`)
+      .query({ _id: props.fhirRootLocationId })
+      .reply(404, {
+        resourceType: 'OperationOutcome',
+        issue: [
+          {
+            severity: 'error',
+            code: 'processing',
+            diagnostics: `HAPI-2001: Resource Location/${props.fhirRootLocationId} is not known`,
+          },
+        ],
+      });
+
+    nock(props.fhirBaseURL)
+      .get(`/${locationResourceType}/_search`)
+      .query({ _summary: 'count' })
+      .reply(200, { total: 0 })
+      .persist();
+
+    nock(props.fhirBaseURL)
+      .put(`/Location/${rootlocationFixture.id}`, rootlocationFixture)
+      .reply(201, {})
+      .persist();
+
+    render(<AppWrapper {...props} />);
+
+    await waitForElementToBeRemoved(document.querySelector('.ant-spin'));
+
+    expect(screen.getByText(/Location Unit Management/)).toBeInTheDocument();
+    expect(screen.getByText(/Root location was not found/)).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.queryByText(/No locations have been uploaded yet./)).toBeInTheDocument();
+    });
+
+    const locationCreate = screen.getByRole('button', { name: 'Create root location.' });
+
+    fireEvent.click(locationCreate);
+
+    expect(screen.getByText(/This action will create a new location with id/)).toBeInTheDocument();
+    const confirmBtn = screen.getByRole('button', { name: 'Proceed' });
+
+    fireEvent.click(confirmBtn);
+
+    await waitFor(() => {
+      expect(notificationSuccessMock).toHaveBeenCalledWith('Root location uploaded to the server.');
+    });
+  });
 });

packages/fhir-location-management/src/components/RootLocationWizard/index.tsx

@@ -0,0 +1,198 @@
+/** Give users option to crete root location if one with configured id is not found. */
+import React from 'react';
+import { Alert, Button, Card, Col, Popconfirm, Row, Space, Spin, Typography } from 'antd';
+import { Helmet } from 'react-helmet';
+import { PageHeader, loadAllResources } from '@opensrp/react-utils';
+import { useTranslation } from '../../mls';
+import { URL_LOCATION_UNIT, locationResourceType } from '../../constants';
+import { useHistory } from 'react-router';
+import { postPutLocationUnit } from '../LocationForm/utils';
+import { ILocation } from '@smile-cdr/fhirts/dist/FHIR-R4/interfaces/ILocation';
+import { useQuery } from 'react-query';
+import { sendErrorNotification, sendSuccessNotification } from '@opensrp/notifications';
+import { RbacCheck } from '@opensrp/rbac';
+import { Trans } from '@opensrp/i18n';
+
+const { Text } = Typography;
+
+export interface RootLocationWizardProps {
+  rootLocationId: string;
+  fhirBaseUrl: string;
+}
+
+export const RootLocationWizard = (props: RootLocationWizardProps) => {
+  const { rootLocationId, fhirBaseUrl } = props;
+  const { t } = useTranslation();
+
+  const {
+    data: LocationCount,
+    error,
+    isLoading,
+  } = useQuery(
+    [locationResourceType],
+    () => {
+      return loadAllResources(fhirBaseUrl, locationResourceType, { _summary: 'count' });
+    },
+    {
+      select: (res) => res.total,
+    }
+  );
+
+  const pageTitle = t('Location Unit Management');
+
+  return (
+    <section className="content-section">
+      <Helmet>
+        <title>{pageTitle}</title>
+      </Helmet>
+      <PageHeader title={pageTitle} />
+
+      <Row className="list-view">
+        <Col className="main-content">
+          <Card title={t('Root location was not found')} style={{ minHeight: '60vh' }}>
+            <p>
+              {t(`Root location with id: {{rootLocationId}} was not found on the server.`, {
+                rootLocationId,
+              })}
+            </p>
+
+            <CardBodyContent
+              fetching={isLoading}
+              locationNum={LocationCount}
+              fhirBaseUrl={fhirBaseUrl}
+              rootLocationId={rootLocationId}
+              error={error}
+            />
+          </Card>
+        </Col>
+      </Row>
+    </section>
+  );
+};
+
+interface CardBodyContentProps {
+  fetching: boolean;
+  locationNum?: number;
+  fhirBaseUrl: string;
+  rootLocationId: string;
+  error?: unknown;
+}
+
+const CardBodyContent = ({
+  fetching,
+  locationNum,
+  fhirBaseUrl,
+  rootLocationId,
+  error,
+}: CardBodyContentProps) => {
+  const { t } = useTranslation();
+  const createRootConfirmProps = {
+    fhirBaseUrl,
+    rootLocationId,
+  };
+
+  if (fetching) {
+    return (
+      <Trans i18nKey="LookingForUploadedLocations" t={t}>
+        <Spin size="small" /> Looking for uploaded locations on the server.
+      </Trans>
+    );
+  } else if (error || locationNum === undefined) {
+    return (
+      <Space direction="vertical">
+        <Alert type="error" message={t('Unable to check if the server has any locations.')} />
+        <CreateRootConfirm {...createRootConfirmProps} />
+      </Space>
+    );
+  } else if (locationNum === 0) {
+    return (
+      <Space direction="vertical">
+        <Text>{t('No locations have been uploaded yet.')}</Text>
+        <CreateRootConfirm {...createRootConfirmProps} />
+      </Space>
+    );
+  } else {
+    return (
+      <Space direction="vertical">
+        <Trans i18nKey={'locationsOnServer'} t={t} locationNum={locationNum}>
+          <Text>There exists {{ locationNum }} locations on the server.</Text>
+          <Text> One of these could be the intended but wrongly configured, root location. </Text>
+          <Text> If you are not sure, kindly reach out to the web administrator for help.</Text>
+        </Trans>
+        <CreateRootConfirm {...createRootConfirmProps} />
+      </Space>
+    );
+  }
+};
+
+interface CreateRootConfirmProps {
+  fhirBaseUrl: string;
+  rootLocationId: string;
+}
+
+const CreateRootConfirm = (props: CreateRootConfirmProps) => {
+  const { fhirBaseUrl, rootLocationId } = props;
+  const history = useHistory();
+  const { t } = useTranslation();
+
+  const onOk = () => history.push(URL_LOCATION_UNIT);
+
+  const rootLocationPayload = {
+    ...rootLocationTemplate,
+    id: rootLocationId,
+    identifier: [
+      {
+        use: 'official',
+        value: rootLocationId,
+      },
+    ],
+  } as ILocation;
+
+  return (
+    <RbacCheck
+      permissions={['Location.create']}
+      fallback={<Text type="warning">Missing required permissions to create locations</Text>}
+    >
+      <Popconfirm
+        title={t(
+          `This action will create a new location with id {{rootLocationId}}. The web application will then use the created location as the root location.`,
+          { rootLocationId }
+        )}
+        okText={t('Proceed')}
+        cancelText={t('Cancel')}
+        onConfirm={async () => {
+          await postPutLocationUnit(rootLocationPayload, fhirBaseUrl)
+            .then(() => {
+              sendSuccessNotification(t('Root location uploaded to the server.'));
+              onOk();
+            })
+            .catch(() => {
+              sendErrorNotification(
+                t('Could not upload the root location at this time, please try again later.')
+              );
+            });
+        }}
+      >
+        <Button type="primary">{t('Create root location.')}</Button>
+      </Popconfirm>
+    </RbacCheck>
+  );
+};
+
+const rootLocationTemplate = {
+  resourceType: 'Location',
+  status: 'active',
+  name: 'Root FHIR Location',
+  alias: ['Root Location'],
+  description:
+    'This is the Root Location that all other locations are part of. Any locations that are directly part of this should be displayed as the root location.',
+  physicalType: {
+    coding: [
+      {
+        system: 'http://terminology.hl7.org/CodeSystem/location-physical-type',
+        code: 'jdn',
+        display: 'Jurisdiction',
+      },
+    ],
+  },
+};

packages/fhir-location-management/src/components/RootLocationWizard/tests/fixtures.ts

@@ -0,0 +1,24 @@
+export const rootlocationFixture = {
+  id: 'eff94f33-c356-4634-8795-d52340706ba9',
+  identifier: [
+    {
+      use: 'official',
+      value: 'eff94f33-c356-4634-8795-d52340706ba9',
+    },
+  ],
+  resourceType: 'Location',
+  status: 'active',
+  name: 'Root FHIR Location',
+  alias: ['Root Location'],
+  description:
+    'This is the Root Location that all other locations are part of. Any locations that are directly part of this should be displayed as the root location.',
+  physicalType: {
+    coding: [
+      {
+        system: 'http://terminology.hl7.org/CodeSystem/location-physical-type',
+        code: 'jdn',
+        display: 'Jurisdiction',
+      },
+    ],
+  },
+};