Update pages to use body layout component

onaio · May 8, 2024 · 46b4c2e · 46b4c2e
1 parent 55e412b
commit 46b4c2e
Show file tree

Hide file tree

Showing 55 changed files with 1,106 additions and 817 deletions.
diff --git a/packages/fhir-care-team/src/components/CreateEditCareTeam/Form.tsx b/packages/fhir-care-team/src/components/CreateEditCareTeam/Form.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router';
 import { Button, Col, Row, Form, Input, Radio, Select } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { sendErrorNotification } from '@opensrp/notifications';
 import {
   FormFields,
@@ -51,105 +51,109 @@ const CareTeamForm: React.FC<CareTeamFormProps> = (props: CareTeamFormProps) =>
     { label: t('Inactive'), value: 'inactive' },
   ];
 
-  return (
-    <Row className="content-section user-group">
-      {/** If email is provided render edit group otherwise add group */}
-      <SimplePageHeader
-        title={
-          initialValues.id
-            ? t('Edit Care Team | {{name}}', { name: initialValues.name })
-            : t('Create Care Team')
-        }
-      />
+  const pageTitle = initialValues.id
+    ? t('Edit Care Team | {{name}}', { name: initialValues.name })
+    : t('Create Care Team');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
-      <Col className="bg-white p-3" span={24}>
-        <Form
-          {...formItemLayout}
-          form={form}
-          initialValues={initialValues}
-          onFinish={(values: FormFields) => {
-            setIsSubmitting(true);
-            submitForm(values, initialValues, fhirBaseURL, organizations, practitioners, t)
-              .catch(() => {
-                if (initialValues.id) {
-                  sendErrorNotification(t('There was a problem updating the Care Team'));
-                } else {
-                  sendErrorNotification(t('There was a problem creating the Care Team'));
-                }
-              })
-              .finally(() => setIsSubmitting(false));
-          }}
-        >
-          <Form.Item id={'id'} hidden={true} name={id} label={t('ID')}>
-            <Input />
-          </Form.Item>
+  return (
+    <BodyLayout headerProps={headerProps}>
+      <Row className="user-group">
+        {/** If email is provided render edit group otherwise add group */}
+        <Col className="bg-white p-3" span={24}>
+          <Form
+            {...formItemLayout}
+            form={form}
+            initialValues={initialValues}
+            onFinish={(values: FormFields) => {
+              setIsSubmitting(true);
+              submitForm(values, initialValues, fhirBaseURL, organizations, practitioners, t)
+                .catch(() => {
+                  if (initialValues.id) {
+                    sendErrorNotification(t('There was a problem updating the Care Team'));
+                  } else {
+                    sendErrorNotification(t('There was a problem creating the Care Team'));
+                  }
+                })
+                .finally(() => setIsSubmitting(false));
+            }}
+          >
+            <Form.Item id={'id'} hidden={true} name={id} label={t('ID')}>
+              <Input />
+            </Form.Item>
 
-          <Form.Item id={'uuid'} hidden={true} name={uuid} label={t('UUID')}>
-            <Input />
-          </Form.Item>
+            <Form.Item id={'uuid'} hidden={true} name={uuid} label={t('UUID')}>
+              <Input />
+            </Form.Item>
 
-          <Form.Item
-            name={name}
-            id="name"
-            label={t('Name')}
-            rules={[{ required: true, message: t('Name is Required') }]}
-          >
-            <Input />
-          </Form.Item>
+            <Form.Item
+              name={name}
+              id="name"
+              label={t('Name')}
+              rules={[{ required: true, message: t('Name is Required') }]}
+            >
+              <Input />
+            </Form.Item>
 
-          <Form.Item id="status" name={status} label={t('Status')}>
-            <Radio.Group name="status">
-              {statusOptions.map((e) => (
-                <Radio name="status" key={e.label} value={e.value}>
-                  {e.label}
-                </Radio>
-              ))}
-            </Radio.Group>
-          </Form.Item>
+            <Form.Item id="status" name={status} label={t('Status')}>
+              <Radio.Group name="status">
+                {statusOptions.map((e) => (
+                  <Radio name="status" key={e.label} value={e.value}>
+                    {e.label}
+                  </Radio>
+                ))}
+              </Radio.Group>
+            </Form.Item>
 
-          <Form.Item
-            data-testid="practitioners"
-            name={practitionerParticipants}
-            id="practitionerParticipants"
-            label={t('Practitioner Participant')}
-          >
-            <Select
-              placeholder={t('Select practitioners to assign to this Care Team')}
-              allowClear
-              mode="multiple"
-              showSearch
-              options={practOptions}
-              filterOption={selectFilterFunction}
-            />
-          </Form.Item>
+            <Form.Item
+              data-testid="practitioners"
+              name={practitionerParticipants}
+              id="practitionerParticipants"
+              label={t('Practitioner Participant')}
+            >
+              <Select
+                placeholder={t('Select practitioners to assign to this Care Team')}
+                allowClear
+                mode="multiple"
+                showSearch
+                options={practOptions}
+                filterOption={selectFilterFunction}
+              />
+            </Form.Item>
 
-          <Form.Item
-            name={managingOrganizations}
-            id="managingOrganizations"
-            label={t('Managing organizations')}
-            tooltip={t('Select one or more managing organizations')}
-          >
-            <Select
-              options={orgOptions}
-              mode="multiple"
-              allowClear
-              showSearch
-              placeholder={t('Select a managing Organization')}
-              filterOption={selectFilterFunction}
-            />
-          </Form.Item>
+            <Form.Item
+              name={managingOrganizations}
+              id="managingOrganizations"
+              label={t('Managing organizations')}
+              tooltip={t('Select one or more managing organizations')}
+            >
+              <Select
+                options={orgOptions}
+                mode="multiple"
+                allowClear
+                showSearch
+                placeholder={t('Select a managing Organization')}
+                filterOption={selectFilterFunction}
+              />
+            </Form.Item>
 
-          <Form.Item {...tailLayout}>
-            <Button type="primary" htmlType="submit" className="create-group">
-              {isSubmitting ? t('Saving') : t('Save')}
-            </Button>
-            <Button onClick={() => history.push(URL_CARE_TEAM)} className="cancel-care-team">
-              {t('Cancel')}
-            </Button>
-          </Form.Item>
-        </Form>
-      </Col>
-    </Row>
+            <Form.Item {...tailLayout}>
+              <Button type="primary" htmlType="submit" className="create-group">
+                {isSubmitting ? t('Saving') : t('Save')}
+              </Button>
+              <Button onClick={() => history.push(URL_CARE_TEAM)} className="cancel-care-team">
+                {t('Cancel')}
+              </Button>
+            </Form.Item>
+          </Form>
+        </Col>
+      </Row>
+    </BodyLayout>
   );
 };
 

diff --git a/packages/fhir-care-team/src/components/ListView/index.tsx b/packages/fhir-care-team/src/components/ListView/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col, Button, Divider, Dropdown, Popconfirm } from 'antd';
 import type { MenuProps } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
 import { RouteComponentProps } from 'react-router';
 import { useHistory, Link } from 'react-router-dom';
@@ -174,13 +174,19 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
     loading: isFetching || isLoading,
     pagination: tablePaginationProps,
   };
+  const pageTitle = t('FHIR Care Team');
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <div className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
-        <title>{t('FHIR Care Team')}</title>
+        <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={t('FHIR Care Team')} />
       <Row className="list-view">
         <Col className="main-content">
           <div className="main-content__header">
@@ -198,6 +204,6 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
         </Col>
         {resourceId && <ViewDetails careTeamId={resourceId} fhirBaseURL={fhirBaseURL} />}
       </Row>
-    </div>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-client/src/components/PatientsList/index.tsx b/packages/fhir-client/src/components/PatientsList/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col } from 'antd';
-import { SimplePageHeader } from '@opensrp/react-utils';
+import { BodyLayout } from '@opensrp/react-utils';
 import { Column, TableLayout } from '@opensrp/react-utils';
 import { BrokenPage, SearchForm } from '@opensrp/react-utils';
 import { useSimpleTabularView } from '@opensrp/react-utils';
@@ -82,13 +82,19 @@ export const PatientsList = (props: PatientListProps) => {
       }
     },
   };
+  const pageTitle = 'Patients';
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <div className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{t('Patients')}</title>
       </Helmet>
-      <SimplePageHeader title={t('Patients')} />
       <Row className="list-view">
         <Col className={'main-content'} span={24}>
           <div className="main-content__header">
@@ -97,6 +103,6 @@ export const PatientsList = (props: PatientListProps) => {
           <TableLayout {...tableProps} />
         </Col>
       </Row>
-    </div>
+    </BodyLayout>
   );
 };
diff --git a/packages/fhir-client/src/components/PatientsList/tests/__snapshots__/index.test.tsx.snap b/packages/fhir-client/src/components/PatientsList/tests/__snapshots__/index.test.tsx.snap
@@ -1,11 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly in list view: Header title 1`] = `
-<h4
-  class="ant-typography page-header css-dev-only-do-not-override-k7429z"
+<div
+  class="ant-page-header site-page-header ant-page-header-ghost"
 >
-  Patients
-</h4>
+  <div
+    class="ant-page-header-heading "
+  >
+    <div
+      class="ant-page-header-heading-left"
+    >
+      <span
+        class="ant-page-header-heading-title"
+        title="Patients"
+      >
+        Patients
+      </span>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`renders correctly in list view: table row 1 page 1 1`] = `

diff --git a/packages/fhir-client/src/components/PatientsList/tests/index.test.tsx b/packages/fhir-client/src/components/PatientsList/tests/index.test.tsx
@@ -117,7 +117,7 @@ test('renders correctly in list view', async () => {
 
   await waitForElementToBeRemoved(document.querySelector('.ant-spin'));
 
-  expect(document.querySelector('.page-header')).toMatchSnapshot('Header title');
+  expect(document.querySelector('.site-page-header')).toMatchSnapshot('Header title');
 
   document.querySelectorAll('tr').forEach((tr, idx) => {
     tr.querySelectorAll('td').forEach((td) => {

diff --git a/packages/fhir-group-management/src/components/BaseComponents/BaseGroupsListView/index.tsx b/packages/fhir-group-management/src/components/BaseComponents/BaseGroupsListView/index.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Helmet } from 'react-helmet';
 import { Row, Col, Button } from 'antd';
-import { SimplePageHeader, useSimpleTabularView } from '@opensrp/react-utils';
+import { BodyLayout, useSimpleTabularView } from '@opensrp/react-utils';
 import { parseGroup, ViewDetailsProps, ViewDetailsWrapper } from '../GroupDetail';
 import { PlusOutlined } from '@ant-design/icons';
 import { groupResourceType } from '../../../constants';
@@ -97,13 +97,18 @@ export function BaseListView<TableData extends ExtendableTableData = DefaultTabl
     loading: isFetching || isLoading,
     pagination: tablePaginationProps,
   };
+  const headerProps = {
+    pageHeaderProps: {
+      title: pageTitle,
+      onBack: undefined,
+    },
+  };
 
   return (
-    <div className="content-section">
+    <BodyLayout headerProps={headerProps}>
       <Helmet>
         <title>{pageTitle}</title>
       </Helmet>
-      <SimplePageHeader title={pageTitle} />
       <Row className="list-view">
         <Col className="main-content">
           <div className="main-content__header">
@@ -127,6 +132,6 @@ export function BaseListView<TableData extends ExtendableTableData = DefaultTabl
           />
         )}
       </Row>
-    </div>
+    </BodyLayout>
   );
 }