upgrade

app/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.10",
   "private": true,
   "dependencies": {
-    "@2fd/ant-design-icons": "^2.5.0",
-    "@ant-design/icons": "^4.2.2",
+    "@2fd/ant-design-icons": "^2.6.0",
+    "@ant-design/icons": "^5.1.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
@@ -34,7 +34,6 @@
     "@opensrp/inventory": "^0.0.9",
     "@opensrp/keycloak-service": "^0.0.17",
     "@opensrp/location-management": "^0.0.15",
-    "@opensrp/server-settings": "^0.0.1",
     "@opensrp/notifications": "^0.0.5",
     "@opensrp/pkg-config": "^0.0.9",
     "@opensrp/plan-form": "^0.0.4",
@@ -46,12 +45,13 @@
     "@opensrp/reports": "^0.0.0",
     "@opensrp/server-logout": "^0.0.2",
     "@opensrp/server-service": "^0.0.16",
+    "@opensrp/server-settings": "^0.0.1",
     "@opensrp/store": "^0.0.10",
     "@opensrp/team-management": "^0.0.9",
     "@opensrp/user-management": "^0.1.19",
     "@sentry/react": "^5.27.4",
     "@smile-cdr/fhirts": "1.2.5",
-    "antd": "^4.6.3",
+    "antd": "^5.5.2",
     "bootstrap": "^4.5.2",
     "client-oauth2": "^4.3.3",
     "connected-react-router": "^6.8.0",

app/src/App/App.css

@@ -1,4 +1,4 @@
-@import '~antd/dist/antd.css';
+@import 'antd/dist/reset.css';
 @import '~bootstrap/dist/css/bootstrap.min.css';
 
 h2.page-title {

new

@@ -0,0 +1,2 @@
+yarn run v1.18.0
+$ jest packages/fhir-group-management/src/components/GroupList/tests/index.test.tsx .txt

new.txt

@@ -0,0 +1,3 @@
+yarn run v1.18.0
+$ jest packages/plan-form
+info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

package.json

@@ -32,6 +32,7 @@
       "eslint"
     ]
   },
+
   "devDependencies": {
     "@babel/cli": "^7.16.8",
     "@babel/eslint-parser": "^7.17.0",
@@ -91,7 +92,7 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-sonarjs": "^0.12.0",
     "flush-promises": "^1.0.2",
-    "glob": "^8.0.1",
+    "glob": "^8.0.1", 
     "husky": "^8.0.0",
     "i18next-parser": "^5.4.0",
     "jest": "27.5.1",
@@ -106,6 +107,7 @@
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.5.1",
+    "antd": "^5.5.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",

packages/card-support/package.json

@@ -32,16 +32,17 @@
     "url": "https://github.com/opensrp/web/issues"
   },
   "peerDependencies": {
+    "@opensrp/i18n": "^0.0.1",
     "@opensrp/store": "^0.0.10",
-    "antd": "^4.6.3",
+    "antd": "^5.5.1",
     "react": "^16.18.1",
     "react-query": "^3.15.1",
     "react-router": "^5.2.1",
-    "react-router-dom": "^5.2.1",
-    "@opensrp/i18n": "^0.0.1"
+    "react-router-dom": "^5.2.1"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.2.2",
+    "@ant-design/icons": "^5.1.4",
+    "@ant-design/pro-layout": "^7.14.3",
     "@onaio/redux-reducer-registry": "^0.0.9",
     "@onaio/session-reducer": "^0.0.13",
     "@onaio/utils": "^0.0.1",

packages/card-support/src/components/DownloadClientData/index.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import moment from 'moment';
-import { Button, Card, Form, Select, TreeSelect, DatePicker, Tooltip, PageHeader } from 'antd';
+import  dayjs from 'dayjs';
+import { Button, Card, Form, Select, TreeSelect, DatePicker, Tooltip } from 'antd';
+import { PageHeader } from '@ant-design/pro-layout';
+import type { RangePickerProps } from 'antd/es/date-picker';
 import { DownloadOutlined } from '@ant-design/icons';
 import { OpenSRPService } from '@opensrp/react-utils';
 import {
@@ -87,9 +89,10 @@ const DownloadClientData: React.FC<DownloadClientDataProps> = (props: DownloadCl
     },
   };
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const disabledDate = (current: moment.Moment) => {
+  // const disabledDate = (current: moment.Moment) => {
+    const disabledDate: RangePickerProps['disabledDate'] = (current) => {
     // Can not select days after
-    return current > moment().startOf('day');
+    return current > dayjs().startOf('day');
   };
 
   interface DefaultLocation {
@@ -217,7 +220,7 @@ const DownloadClientData: React.FC<DownloadClientDataProps> = (props: DownloadCl
                 htmlType="submit"
                 disabled={!cardOrderDate[0] || !cardOrderDate[1]}
               >
-                <DownloadOutlined />
+                <DownloadOutlined rev={undefined} />
                 {isSubmitting ? t('Downloading...') : t('Download CSV')}
               </Button>
             </Tooltip>

packages/error-boundary-fallback/package.json

@@ -28,7 +28,7 @@
     ]
   },
   "peerDependencies": {
-    "antd": "^4.6.3",
+    "antd": "^5.5.1",
     "react": "^16.13.1",
     "@opensrp/i18n": "^0.0.1"
   },

packages/fhir-care-team/package.json

@@ -31,30 +31,30 @@
   "author": "OpenSRP Engineering",
   "license": "Apache-2.0",
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
+    "@ant-design/icons": "^5.1.4",
     "@onaio/utils": "^0.0.1",
     "@opensrp/notifications": "^0.0.5",
     "@opensrp/pkg-config": "^0.0.9",
+    "@opensrp/react-utils": "^0.0.12",
     "@opensrp/reducer-factory": "^0.0.13",
     "@opensrp/server-service": "^0.0.17",
-    "@opensrp/react-utils": "^0.0.12",
     "@smile-cdr/fhirts": "^1.2.5",
-    "antd": "^4.19.5",
-    "lodash": "^4.17.21",
+    "antd": "^5.5.2",
     "fhirclient": "^2.4.0",
+    "lodash": "^4.17.21",
     "uuid": "^8.3.1"
   },
   "devDependencies": {
     "@types/uuid": "8.3.0",
     "nock": "^13.0.6"
   },
   "peerDependencies": {
+    "@opensrp/i18n": "^0.0.1",
     "@opensrp/store": "^0.0.10",
     "react": "^16.13.1",
     "react-query": "^3.15.1",
     "react-redux": "^7.1.22",
     "react-router": "^5.2.1",
-    "react-router-dom": "^5.2.1",
-    "@opensrp/i18n": "^0.0.1"
+    "react-router-dom": "^5.2.1"
   }
 }

packages/fhir-care-team/src/components/CreateEditCareTeam/Form.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router';
-import { Button, Col, Row, Form, Input, Radio, Select, PageHeader } from 'antd';
+import { Button, Col, Row, Form, Input, Radio, Select } from 'antd';
+import { PageHeader } from '@ant-design/pro-layout';
 import { sendErrorNotification } from '@opensrp/notifications';
 import {
   FormFields,
@@ -84,6 +85,7 @@ const CareTeamForm: React.FC<CareTeamFormProps> = (props: CareTeamFormProps) =>
           <Form.Item
             name={name}
             id="name"
+            className='name'
             label={t('Name')}
             rules={[{ required: true, message: t('Name is Required') }]}
           >
@@ -102,7 +104,7 @@ const CareTeamForm: React.FC<CareTeamFormProps> = (props: CareTeamFormProps) =>
 
           <Form.Item
             data-testid="practitioners"
-            name={practitionerParticipants}
+            name={practitionerParticipants} 
             id="practitionerParticipants"
             label={t('Practitioner Participant')}
           >

packages/fhir-care-team/src/components/CreateEditCareTeam/tests/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,8 @@
 
 exports[`renders correctly for create care team: name field 1`] = `
 <input
-  class="ant-input"
+  aria-required="true"
+  class="ant-input css-dev-only-do-not-override-k7429z"
   id="name"
   type="text"
   value=""
@@ -11,7 +12,7 @@ exports[`renders correctly for create care team: name field 1`] = `
 
 exports[`renders correctly for create care team: uuid field 1`] = `
 <input
-  class="ant-input"
+  class="ant-input css-dev-only-do-not-override-k7429z"
   id="uuid"
   type="text"
   value=""
@@ -20,7 +21,8 @@ exports[`renders correctly for create care team: uuid field 1`] = `
 
 exports[`renders correctly for edit care team: name field 1`] = `
 <input
-  class="ant-input"
+  aria-required="true"
+  class="ant-input css-dev-only-do-not-override-k7429z"
   id="name"
   type="text"
   value="Care Team One"
@@ -29,7 +31,7 @@ exports[`renders correctly for edit care team: name field 1`] = `
 
 exports[`renders correctly for edit care team: uuid field 1`] = `
 <input
-  class="ant-input"
+  class="ant-input css-dev-only-do-not-override-k7429z"
   id="uuid"
   type="text"
   value="93bc9c3d-6321-41b0-9b93-1275d7114e22"

packages/fhir-care-team/src/components/CreateEditCareTeam/tests/form.test.tsx

@@ -62,10 +62,13 @@ describe('components/forms/CreateTeamForm', () => {
     await act(async () => {
       await flushPromises();
     });
-    wrapper.update();
 
+    wrapper.update();
+    console.log(wrapper.debug());
     // name is required and has no default
-    expect(wrapper.find('FormItem#name').text()).toMatchInlineSnapshot(`"NameName is Required"`);
+    expect(wrapper.find('.ant-form-item.name').text()).toMatchInlineSnapshot(
+      `"NameName is Required"`
+    );
     wrapper.unmount();
   });
 

packages/fhir-care-team/src/components/ListView/index.tsx

@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Row, Col, PageHeader, Button, Divider, Dropdown, Menu, Popconfirm } from 'antd';
+import { Row, Col, Button, Divider, Dropdown, Menu, Popconfirm } from 'antd';
+import type { MenuProps } from 'antd';
+import { PageHeader } from '@ant-design/pro-layout';
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
 import { RouteComponentProps, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -100,7 +102,7 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
           </Link>
           <Divider type="vertical" />
           <Dropdown
-            overlay={
+            menu={(
               <Menu className="menu">
                 <Menu.Item key="delete">
                   <Popconfirm
@@ -121,12 +123,12 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
                   <Link to={`${URL_CARE_TEAM}/${record.id}`}>View Details</Link>
                 </Menu.Item>
               </Menu>
-            }
+            ) as MenuProps}
             placement="bottomRight"
             arrow
             trigger={['click']}
           >
-            <MoreOutlined className="more-options" data-testid="action-dropdown" />
+            <MoreOutlined className="more-options" data-testid="action-dropdown" rev={undefined} />
           </Dropdown>
         </span>
       ),
@@ -152,7 +154,7 @@ export const CareTeamList: React.FC<CareTeamListPropTypes> = (props: CareTeamLis
             <SearchForm {...searchFormProps} />
             <Link to={URL_CREATE_CARE_TEAM}>
               <Button type="primary">
-                <PlusOutlined />
+                <PlusOutlined rev={undefined} />
                 {t('Create Care Team')}
               </Button>
             </Link>

packages/fhir-care-team/src/components/ListView/tests/index.test.tsx

@@ -108,17 +108,17 @@ describe('Care Teams list view', () => {
     });
 
     wrapper.update();
-    wrapper.find('.more-options').at(0).simulate('click');
+    wrapper.find('.ant-dropdown.more-options').at(0).simulate('click');
     wrapper.update();
-    wrapper.find('Button').at(2).simulate('click');
-    expect(wrapper.find('Button').at(2).text()).toEqual('Delete');
+    wrapper.find('.ant-btn').at(2).simulate('click');
+    expect(wrapper.find('.ant-btn').at(2).text()).toEqual('Delete');
     wrapper.update();
     // check pop up text
     expect(wrapper.find('.ant-popover-content').at(0).text()).toMatchInlineSnapshot(
       `"Are you sure you want to delete this Care Team?NoYes"`
     );
     const popconfirm = wrapper.find('.ant-popover-content').at(0);
-    popconfirm.find('Button').at(1).simulate('click');
+    popconfirm.find('.ant-btn').at(1).simulate('click');
 
     await act(async () => {
       await flushPromises();

packages/fhir-care-team/src/components/ViewDetails/index.tsx

@@ -152,7 +152,7 @@ const ViewDetails = (props: ViewDetailsProps) => {
       <div className="flex-right">
         <Button
           data-test-id="cancel"
-          icon={<CloseOutlined />}
+          icon={<CloseOutlined rev={undefined} />}
           shape="circle"
           type="text"
           onClick={() => history.push(URL_CARE_TEAM)}
@@ -167,7 +167,7 @@ const ViewDetails = (props: ViewDetailsProps) => {
               description={t('Fetching Care team')}
               type="info"
               showIcon
-              icon={<SyncOutlined spin />}
+              icon={<SyncOutlined spin rev={undefined} />}
             ></Alert>
           ) : careTeam ? (
             renderObjectAsKeyvalue(careTeamKeyValues)

packages/fhir-client/package.json

@@ -41,7 +41,7 @@
   "peerDependencies": {
     "@opensrp/store": "^0.0.10",
     "@opensrp/i18n": "^0.0.1",
-    "antd": "^4.6.3",
+    "antd": "^5.5.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-query": "^3.15.1",

packages/fhir-client/src/components/PatientsList/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { Row, Col, PageHeader } from 'antd';
+import { Row, Col } from 'antd';
+import { PageHeader } from '@ant-design/pro-layout';
 import { Column, TableLayout } from '@opensrp/react-utils';
 import { BrokenPage, SearchForm } from '@opensrp/react-utils';
 import { useSimpleTabularView } from '@opensrp/react-utils';

packages/fhir-group-management/src/components/BaseComponents/BaseGroupsListView/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Row, Col, PageHeader, Button } from 'antd';
+import { Row, Col, Button } from 'antd';
+import { PageHeader } from '@ant-design/pro-layout';
 import { parseGroup, ViewDetailsProps, ViewDetailsWrapper } from '../GroupDetail';
 import { PlusOutlined } from '@ant-design/icons';
 import { groupResourceType } from '../../../constants';
@@ -89,7 +90,7 @@ export const BaseListView = (props: BaseListViewProps) => {
             {createButtonUrl && (
               <Link to={createButtonUrl}>
                 <Button type="primary">
-                  <PlusOutlined />
+                  <PlusOutlined rev={undefined} />
                   {createButtonLabel}
                 </Button>
               </Link>

packages/fhir-group-management/src/components/BaseComponents/GroupDetail/index.tsx

@@ -111,7 +111,7 @@ export const ViewDetailsWrapper = (props: ViewDetailsWrapperProps) => {
       <div className="flex-right">
         <Button
           data-testid="close-button"
-          icon={<CloseOutlined />}
+          icon={<CloseOutlined rev={undefined} />}
           shape="circle"
           type="text"
           onClick={() => removeParam(viewDetailsQuery)}