Upgraded react, react-dom, types/react and react-toastify to latest (#…

…2206) * upgraded apollo client * Added Dockerfile and .dockerignore * Update src/screens/OrgPost/OrgPost.tsx Lowercase primitives for consistency. Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fixed failed tests * dockerfile * Updated Dockerfile and removed redundancy Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Updated dockerignore * Remove Dockerfile and .dockerignore * partially upgraded to react18 * fixed test partially * Fixed more tests * Fixed more tests * fixed more test cases * upgraded react-toastify * fixed more tests * fixed more tests * fixed more tests * updated * updated dockerfile * fixed more tests * fixed more tests * fixed more tests * fixed more tests * fixed all tests * Upgraded react, react-dom, types/react and react-toastify to latest * Removed dockerfile * Updated package.json * Fixed errors * fixed test patch partially * Fixed CI failing of tests * Merge remote tracking branch --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: ANKIT VARSHNEY <132201033+AVtheking@users.noreply.github.com>
PalisadoesFoundation · Sep 6, 2024 · fbce25b · fbce25b
1 parent 9869bde
commit fbce25b
Show file tree

Hide file tree

Showing 147 changed files with 1,959 additions and 1,778 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,12 +35,12 @@
     "js-cookie": "^3.0.1",
     "markdown-toc": "^1.2.0",
     "prettier": "^3.3.2",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-app-rewired": "^2.2.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-bootstrap": "^2.10.4",
     "react-datepicker": "^7.3.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-google-recaptcha": "^3.1.0",
     "react-i18next": "^12.3.1",
     "react-icons": "^5.2.1",
@@ -49,7 +49,7 @@
     "react-redux": "^7.2.5",
     "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
-    "react-toastify": "^9.0.3",
+    "react-toastify": "^10.0.5",
     "react-tooltip": "^5.27.1",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
@@ -97,18 +97,18 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react": "^11.1.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/inquirer": "^9.0.7",
     "@types/jest": "^26.0.24",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.5.2",
     "@types/node-fetch": "^2.6.10",
-    "@types/react": "^17.0.14",
+    "@types/react": "^18.3.3",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-bootstrap": "^0.32.32",
     "@types/react-datepicker": "^4.1.4",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^18.3.0",
     "@types/react-google-recaptcha": "^2.1.5",
     "@types/react-router-dom": "^5.1.8",
     "@types/sanitize-html": "^2.13.0",

diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { MockedProvider } from '@apollo/react-testing';
 import { BrowserRouter } from 'react-router-dom';

diff --git a/src/App.tsx b/src/App.tsx
@@ -122,12 +122,12 @@ function app(): JSX.Element {
       ],
       index: number,
     ) => {
-      const extraComponent = plugin[1];
+      const ExtraComponent = plugin[1];
       return (
         <Route
           key={index}
           path={`/plugin/${plugin[0].toLowerCase()}`}
-          element={extraComponent}
+          element={<ExtraComponent />}
         />
       );
     },

diff --git a/src/components/ActionItems/ActionItemsContainer.tsx b/src/components/ActionItems/ActionItemsContainer.tsx
@@ -159,7 +159,7 @@ function actionItemsContainer({
 
       actionItemsRefetch();
       hideUpdateModal();
-      toast.success(t('successfulUpdation'));
+      toast.success(t('successfulUpdation') as string);
     } catch (error: unknown) {
       if (error instanceof Error) {
         toast.error(error.message);
@@ -183,7 +183,7 @@ function actionItemsContainer({
 
       actionItemsRefetch();
       toggleDeleteModal();
-      toast.success(t('successfulDeletion'));
+      toast.success(t('successfulDeletion') as string);
     } catch (error: unknown) {
       if (error instanceof Error) {
         toast.error(error.message);

diff --git a/src/components/ActionItems/ActionItemsModalBody.tsx b/src/components/ActionItems/ActionItemsModalBody.tsx
@@ -147,7 +147,7 @@ export const ActionItemsModalBody = ({
       // Refetching the action items list to update the UI
       actionItemsRefetch();
       hideCreateModal();
-      toast.success(t('successfulCreation'));
+      toast.success(t('successfulCreation') as string);
     } catch (error: unknown) {
       if (error instanceof Error) {
         toast.error(error.message);

diff --git a/src/components/ActionItems/ActionItemsWrapper.test.tsx b/src/components/ActionItems/ActionItemsWrapper.test.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { MockedProvider } from '@apollo/react-testing';
 import { ActionItemsWrapper } from './ActionItemsWrapper';
 import { BrowserRouter } from 'react-router-dom';

diff --git a/src/components/AddOn/AddOn.test.tsx b/src/components/AddOn/AddOn.test.tsx
@@ -15,6 +15,14 @@ describe('Testing Addon component', () => {
     children: 'This is a dummy text',
   };
 
+  test('should render with default props', () => {
+    const { getByTestId } = render(<AddOn />);
+    const container = getByTestId('pluginContainer');
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveClass('plugin-container');
+    expect(container).toHaveTextContent('Default text');
+  });
+
   test('should render props and text elements test for the page component', () => {
     const { getByTestId, getByText } = render(
       <MockedProvider addTypename={false} link={link}>

diff --git a/src/components/AddOn/AddOn.tsx b/src/components/AddOn/AddOn.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 interface InterfaceAddOnProps {
-  extras: any;
-  name: string;
-  children: any;
+  extras?: any;
+  name?: string;
+  children?: React.ReactNode;
 }
 
 /**
@@ -19,31 +19,26 @@ interface InterfaceAddOnProps {
  *
  * @returns The JSX element representing the AddOn component.
  */
-function addOn({ children }: InterfaceAddOnProps): JSX.Element {
+function AddOn({
+  children = 'Default text',
+  extras = {},
+  name = '',
+}: InterfaceAddOnProps): JSX.Element {
   return (
-    <>
-      <div className="plugin-container" data-testid="pluginContainer">
-        {children}
-      </div>
-    </>
+    <div className="plugin-container" data-testid="pluginContainer">
+      {children}
+    </div>
   );
 }
 
-// Default props for the AddOn component
-addOn.defaultProps = {
-  extras: {},
-  name: '',
-  children: null,
-};
-
 // PropTypes validation for the AddOn component
-addOn.propTypes = {
+AddOn.propTypes = {
   extras: PropTypes.shape({
     components: PropTypes.shape({}),
     actions: PropTypes.shape({}),
   }),
   name: PropTypes.string,
-  children: PropTypes.any,
+  children: PropTypes.node,
 };
 
-export default addOn;
+export default AddOn;
diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.test.tsx b/src/components/AddOn/core/AddOnEntry/AddOnEntry.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import AddOnEntry from './AddOnEntry';
 import {
@@ -76,6 +76,32 @@ describe('Testing AddOnEntry', () => {
     expect(getByTestId('AddOnEntry')).toBeInTheDocument();
   });
 
+  test('uses default values for title and description when not provided', () => {
+    // Render the component with only required parameters
+    const mockGetInstalledPlugins = jest.fn();
+    render(
+      <ApolloProvider client={client}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <AddOnEntry
+                id="123"
+                createdBy="user1"
+                uninstalledOrgs={['Org1']}
+                getInstalledPlugins={mockGetInstalledPlugins} // Providing an empty function
+              />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </ApolloProvider>,
+    );
+
+    const titleElement = screen.getByText('No title provided'); // This will check for the default empty string in the title
+    const descriptionElement = screen.getByText('Description not available'); // This will check for the default empty string in the description
+    expect(titleElement).toBeInTheDocument(); // Ensure the title element with default value exists
+    expect(descriptionElement).toBeInTheDocument(); // Ensure the description element with default value exists
+  });
+
   it('renders correctly', () => {
     const props = {
       id: '1',
@@ -110,6 +136,7 @@ describe('Testing AddOnEntry', () => {
     expect(getByText('Test addon description')).toBeInTheDocument();
     expect(getByText('Test User')).toBeInTheDocument();
   });
+
   it('Uninstall Button works correctly', async () => {
     const props = {
       id: '1',

diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import styles from './AddOnEntry.module.css';
 import { Button, Card, Spinner } from 'react-bootstrap';
 import { UPDATE_INSTALL_STATUS_PLUGIN_MUTATION } from 'GraphQl/Mutations/mutations';
@@ -13,12 +12,12 @@ import { Navigate, useParams } from 'react-router-dom';
  */
 interface InterfaceAddOnEntryProps {
   id: string;
-  enabled: boolean;
-  title: string;
-  description: string;
+  enabled?: boolean; // Optional props
+  title?: string; // Optional props
+  description?: string; // Optional props
   createdBy: string;
-  component: string;
-  modified: any;
+  component?: string; // Optional props
+  modified?: any; // Optional props
   uninstalledOrgs: string[];
   getInstalledPlugins: () => any;
 }
@@ -46,11 +45,14 @@ interface InterfaceAddOnEntryProps {
  */
 function addOnEntry({
   id,
-  title,
-  description,
+  title = 'No title provided', // Default parameter
+  description = 'Description not available', // Default parameter
   createdBy,
   uninstalledOrgs,
   getInstalledPlugins,
+  // enabled = false, // Default parameter
+  // component = '', // Default parameter
+  // modified = null, // Default parameter
 }: InterfaceAddOnEntryProps): JSX.Element {
   // Translation hook with namespace 'addOnEntry'
   const { t } = useTranslation('translation', { keyPrefix: 'addOnEntry' });
@@ -147,21 +149,4 @@ function addOnEntry({
   );
 }
 
-// Default prop values for the component
-addOnEntry.defaultProps = {
-  enabled: false,
-  configurable: true,
-  title: '',
-  description: '',
-  isInstalled: false,
-};
-
-addOnEntry.propTypes = {
-  enabled: PropTypes.bool,
-  configurable: PropTypes.bool,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  isInstalled: PropTypes.bool,
-};
-
 export default addOnEntry;