378 upgrade antd to v5.5.2 (#1214)

* Fix active sidebar bug * Fix active menu items * Merge team-assignment under team-management * Fix menu items behaviour * Fix menu items behaviour * upgrade * Update inter package dependency versions * Merge getActiveKey and getPathKey * Update initial collapsed keys when location changes * Fix active paths * Fix active paths * more changes * Change trigger on dropdown to click and update tests * Fix more failing tests * Update typescript * Update typescript package version * Fix ant-design icons package version in react utils * Regenerate lock file * Remove antd as a dependency in a few packages * Use extends in type generic * Fix type usage in react utils Table Layout * Remove rev prop from icon * Update antd icon version used across repo * Remove rev={undefined} prop * update lock file * Fix a few type issues * Use custom waitFor Element to be removed Instead of react testing library exported util function * update typescript * Replace PageHeader from antd with custom PageHeader * Update selectors in Update plan * Wrap links inside buttons * Update snapshots in opensrp-plans * Remove children enzyme call when simulating click * Fix lint issues in keycloak user management * Make mock implementation async * Update fixture data in opensrp/plan form * Remove fixture in package server settings * Update ant-design-icons to v4.7.0 * Remove classnames and dead code --------- Co-authored-by: Peter Muriuki <[email protected]>
onaio · Jun 30, 2023 · 4264b74 · 4264b74
1 parent fbeb24b
commit 4264b74
Show file tree

Hide file tree

Showing 207 changed files with 8,233 additions and 4,783 deletions.
diff --git a/app/package.json b/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": "^4.7.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
@@ -34,10 +34,9 @@
     "@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",
+    "@opensrp/plan-form": "^0.0.5",
     "@opensrp/plan-form-core": "^0.0.4",
     "@opensrp/plans": "^0.0.10",
     "@opensrp/product-catalogue": "^0.0.9",
@@ -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",

diff --git a/app/src/App/App.css b/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 {

diff --git a/app/src/components/Logout/tests/__snapshots__/index.test.tsx.snap b/app/src/components/Logout/tests/__snapshots__/index.test.tsx.snap
@@ -5,29 +5,37 @@ exports[`components/Logout renders logout component 1`] = `
   <Spin
     className="custom-spinner"
     size="large"
-    spinning={true}
-    wrapperClassName=""
   >
-    <div
-      className="ant-spin ant-spin-lg ant-spin-spinning custom-spinner"
+    <Empty />
+    <Spin
+      className="custom-spinner"
+      hashId="css-dev-only-do-not-override-k7429z"
+      size="large"
+      spinPrefixCls="ant-spin"
     >
-      <span
-        className="ant-spin-dot ant-spin-dot-spin"
+      <div
+        aria-busy={true}
+        aria-live="polite"
+        className="ant-spin ant-spin-lg ant-spin-spinning custom-spinner css-dev-only-do-not-override-k7429z"
       >
-        <i
-          className="ant-spin-dot-item"
-        />
-        <i
-          className="ant-spin-dot-item"
-        />
-        <i
-          className="ant-spin-dot-item"
-        />
-        <i
-          className="ant-spin-dot-item"
-        />
-      </span>
-    </div>
+        <span
+          className="ant-spin-dot ant-spin-dot-spin"
+        >
+          <i
+            className="ant-spin-dot-item"
+          />
+          <i
+            className="ant-spin-dot-item"
+          />
+          <i
+            className="ant-spin-dot-item"
+          />
+          <i
+            className="ant-spin-dot-item"
+          />
+        </span>
+      </div>
+    </Spin>
   </Spin>
 </CustomLogout>
 `;
diff --git a/app/src/components/page/Header/index.tsx b/app/src/components/page/Header/index.tsx
@@ -2,7 +2,8 @@
 import { User } from '@onaio/session-reducer';
 import * as React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
-import { Menu, Layout, Avatar, Button, Dropdown } from 'antd';
+import { Layout, Avatar, Button, Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
 import { Link } from 'react-router-dom';
 import './Header.css';
 import { URL_LOGOUT, URL_USER_EDIT } from '../../../constants';
@@ -65,21 +66,43 @@ export const HeaderComponent: React.FC<HeaderProps> = (props: HeaderProps) => {
     allLanguageOptions: languageOptions,
     supportedLanguages: SUPPORTED_LANGUAGES as LanguageCode[],
   };
+
+  const items: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (
+        <Button
+          type='link'
+          data-testid="logout"
+        >
+          <Link to={URL_LOGOUT}>
+            {t('Logout')}
+          </Link>
+        </Button>
+      )
+    },
+    {
+      key: '2',
+      label: (
+        <Button
+          type='link'
+          data-testid="manageaccount"
+        >
+          <Link to={`${URL_USER_EDIT}/${user_id}`}>
+            {t('Manage account')}
+          </Link>
+        </Button>
+      )
+    }
+  ]
+
   return (
     <Layout.Header className="app-header txt-white align-items-center justify-content-end px-1 layout-header">
       {authenticated ? (
         <Dropdown
-          overlay={
-            <Menu>
-              <Menu.Item key={URL_LOGOUT}>
-                <Link to={URL_LOGOUT}>{t('Logout')}</Link>
-              </Menu.Item>
-              <Menu.Item key={`${URL_USER_EDIT}/${user_id}`}>
-                <Link to={`${URL_USER_EDIT}/${user_id}`}>{t('Manage account')}</Link>
-              </Menu.Item>
-            </Menu>
-          }
+          menu={{ items }}
           placement="bottomRight"
+          trigger={['click', 'hover']}
         >
           <Button
             shape="circle"

diff --git a/app/src/containers/pages/Home/tests/__snapshots__/Home.test.tsx.snap b/app/src/containers/pages/Home/tests/__snapshots__/Home.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`containers/pages/Home renders Home correctly & changes Title of page 2:
   href="/card-support/download-client-data"
 >
   <button
-    class="ant-btn ant-btn-default btn-links"
+    class="ant-btn css-dev-only-do-not-override-k7429z ant-btn-default btn-links"
     color="outline"
     type="button"
   >
@@ -23,7 +23,7 @@ exports[`containers/pages/Home renders Home correctly & changes Title of page 2:
   href="/admin/form-config/releases"
 >
   <button
-    class="ant-btn ant-btn-default btn-links"
+    class="ant-btn css-dev-only-do-not-override-k7429z ant-btn-default btn-links"
     color="outline"
     type="button"
   >
@@ -40,7 +40,7 @@ exports[`containers/pages/Home renders Home correctly & changes Title of page 2:
   href="/inventory"
 >
   <button
-    class="ant-btn ant-btn-default btn-links"
+    class="ant-btn css-dev-only-do-not-override-k7429z ant-btn-default btn-links"
     color="outline"
     type="button"
   >
@@ -57,7 +57,7 @@ exports[`containers/pages/Home renders Home correctly & changes Title of page 2:
   href="/admin/location/unit"
 >
   <button
-    class="ant-btn ant-btn-default btn-links"
+    class="ant-btn css-dev-only-do-not-override-k7429z ant-btn-default btn-links"
     color="outline"
     type="button"
   >
@@ -74,7 +74,7 @@ exports[`containers/pages/Home renders Home correctly & changes Title of page 2:
   href="/missions/active"
 >
   <button
-    class="ant-btn ant-btn-default btn-links"
+    class="ant-btn css-dev-only-do-not-override-k7429z ant-btn-default btn-links"
     color="outline"
     type="button"
   >
@@ -91,7 +91,7 @@ exports[`containers/pages/Home renders Home correctly & changes Title of page 2:
   href="/admin/product-catalogue"
 >
   <button
-    class="ant-btn ant-btn-default btn-links"
+    class="ant-btn css-dev-only-do-not-override-k7429z ant-btn-default btn-links"
     color="outline"
     type="button"
   >
@@ -108,7 +108,7 @@ exports[`containers/pages/Home renders Home correctly & changes Title of page 2:
   href="/admin/teams"
 >
   <button
-    class="ant-btn ant-btn-default btn-links"
+    class="ant-btn css-dev-only-do-not-override-k7429z ant-btn-default btn-links"
     color="outline"
     type="button"
   >

diff --git a/new.txt b/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.
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
+    "antd": "^5.5.2",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "copyfiles": "^2.4.1",
     "coveralls": "^3.1.1",
@@ -118,7 +119,7 @@
     "redux-testkit": "^1.0.6",
     "redux-thunk": "^2.4.1",
     "tsd": "^0.19.1",
-    "typescript": "~4.5.4",
+    "typescript": "5.1.3",
     "vinyl": "^2.2.1",
     "vinyl-fs": "^3.0.3",
     "yargs": "^17.4.1"

diff --git a/packages/card-support/package.json b/packages/card-support/package.json
@@ -32,16 +32,16 @@
     "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": "^4.7.0",
     "@onaio/redux-reducer-registry": "^0.0.9",
     "@onaio/session-reducer": "^0.0.13",
     "@onaio/utils": "^0.0.1",

diff --git a/packages/card-support/src/components/DownloadClientData/index.tsx b/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 '@opensrp/react-utils';
+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 {
@@ -153,7 +156,7 @@ const DownloadClientData: React.FC<DownloadClientDataProps> = (props: DownloadCl
 
   return (
     <div className="content-section">
-      <PageHeader title={t('Download Client Data')} className="page-header" />
+      <PageHeader title={t('Download Client Data')} />
       <Card>
         <Form
           {...layout}

diff --git a/packages/card-support/src/components/DownloadClientData/tests/index.test.tsx b/packages/card-support/src/components/DownloadClientData/tests/index.test.tsx
@@ -191,7 +191,9 @@ describe('components/DownloadClientData', () => {
       'https://unicef-tunisia-stage.smartregister.org/opensrp/rest/location/hierarchy/e2b4a441-21b5-4d03-816b-09d45b17cad7?is_jurisdiction=true',
     ]);
 
-    expect(wrapper.find('PageHeader').text()).toMatchInlineSnapshot(`"Download Client Data"`);
+    expect(wrapper.find('.page-header').last().text()).toMatchInlineSnapshot(
+      `"Download Client Data"`
+    );
     // bug in toBeInTheDocument() assertion - https://github.com/testing-library/jest-dom/issues/313
     expect(wrapper.find('Form')).toBeTruthy();
     wrapper.unmount();

diff --git a/packages/error-boundary-fallback/package.json b/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"
   },

diff --git a/packages/fhir-care-team/package.json b/packages/fhir-care-team/package.json
@@ -35,26 +35,26 @@
     "@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",
     "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",
+    "antd": "^5.5.2",
     "@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"
   }
 }
diff --git a/packages/fhir-care-team/src/components/CreateEditCareTeam/Form.tsx b/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 '@opensrp/react-utils';
 import { sendErrorNotification } from '@opensrp/notifications';
 import {
   FormFields,
@@ -59,8 +60,8 @@ const CareTeamForm: React.FC<CareTeamFormProps> = (props: CareTeamFormProps) =>
             ? t('Edit Care Team | {{name}}', { name: initialValues.name })
             : t('Create Care Team')
         }
-        className="page-header"
       />
+
       <Col className="bg-white p-3" span={24}>
         <Form
           {...formItemLayout}