Fixes PalisadoesFoundation#1380 by simplifying the modal closure mech…

…anism in the 'Manage Features' modal. (PalisadoesFoundation#1393)

* Fix:
Addressed the issue of UI redundancy as discussed in Issue PalisadoesFoundation#1380.

What:
- Removed the 'Cancel' button, and added the 'Manage Features' header for the Modal leaving the 'X' icon as the sole close option.

Impact:
- Simplifies the modal interface, enhancing the overall user experience and reducing potential confusion.

Tests:
- Tested the individual file by running this command: `npm run test --watchAll=false /path/to/test/file`
- Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx`

* reverted changes made to package-lock.json file

* Fix:Replacing Modal Buttons with Bootstrap buttons.

Changes Made:
-Replaced existing buttons in the OrgList component with Bootstrap buttons for a more consistent and modern UI.
-Removed unused CSS classes (greenredbtn, cancel, secondbtn) from OrgList.module.css.
-Added new CSS classes enableEverythingBtn and pluginStoreBtn for specific button styling.
-Implemented a new test to verify the functionality of the 'Go to Plugin Store' button.

Tests:
- Tested the individual file by running this command: `npm run test --watchAll=false  /src/screens/OrgList/OrgList.test.tsx`
- Tested code coverage for this file with : `npm run test -- --collectCoverageFrom="src/screens/OrgList/*" /src/screens/OrgList/OrgList.test.tsx`

* fixed redundant test id- modalOrganisationHeader
replaced with pluginNotificationHeader
accodrdingly fixed tests

* Update OrgList.test.tsx

src/screens/OrgList/OrgList.module.css

@@ -12,6 +12,25 @@
   border: None;
 }
 
+.enableEverythingBtn {
+  width: 100%;
+  border: None;
+}
+
+.pluginStoreBtn {
+  width: 100%;
+  background-color: white;
+  color: #31bb6b;
+  border: 0.5px solid #31bb6b;
+}
+
+.pluginStoreBtn:hover,
+.pluginStoreBtn:focus {
+  background-color: #dfe1e2 !important;
+  color: #31bb6b !important;
+  border-color: #31bb6b !important;
+}
+
 .line::before {
   content: '';
   display: inline-block;
@@ -241,13 +260,6 @@ form > input {
   margin-bottom: 0.8rem;
 }
 
-.cancel > i {
-  margin-top: 5px;
-  transform: scale(1.2);
-  cursor: pointer;
-  color: #707070;
-}
-
 .modalbody {
   width: 50px;
 }
@@ -257,51 +269,12 @@ form > input {
   gap: 1rem;
 }
 
-.greenregbtn {
-  margin: 1rem 0 0;
-  margin-top: 10px;
-  border: 1px solid #e8e5e5;
-  box-shadow: 0 2px 2px #e8e5e5;
-  padding: 10px 10px;
-  border-radius: 5px;
-  background-color: #31bb6b;
-  width: 100%;
-  font-size: 16px;
-  color: white;
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-  width: 100%;
-}
-
 .itemCard .loadingWrapper .innerContainer .content h6[title='Location'] {
   display: block;
   width: 45%;
   height: 18px;
 }
 
-.secondbtn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 1rem 0 0;
-  margin-top: 10px;
-  border: 1px solid #d0cfcf;
-  box-shadow: 0 2px 2px #d0cfcf;
-  padding: 10px 10px;
-  border-radius: 5px;
-  background-color: white;
-  width: 100%;
-  font-size: 16px;
-  color: #31bb6b;
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-  width: 100%;
-}
-
 .itemCard .loadingWrapper .innerContainer .content h6 {
   display: block;
   width: 30%;

src/screens/OrgList/OrgList.test.tsx

@@ -273,7 +273,9 @@ describe('Organisations Page testing as SuperAdmin', () => {
         screen.queryByText(/Congratulation the Organization is created/i)
       ).toBeInTheDocument()
     );
+    await screen.findByTestId(/pluginNotificationHeader/i);
     userEvent.click(screen.getByTestId(/enableEverythingForm/i));
+    userEvent.click(screen.getByTestId(/goToStore/i));
   });
 
   test('Testing create sample organization working properly', async () => {
@@ -331,7 +333,6 @@ describe('Organisations Page testing as Admin', () => {
 
   test('Create organization modal should not be present in the page for Admin', async () => {
     localStorage.setItem('id', '123');
-
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -343,11 +344,10 @@ describe('Organisations Page testing as Admin', () => {
         </BrowserRouter>
       </MockedProvider>
     );
-
-    await wait();
-    expect(screen.queryByText(/Create Organization/i)).toBeNull();
+    await waitFor(() => {
+      expect(screen.queryByText(/Create Organization/i)).toBeNull();
+    });
   });
-
   test('Testing sort latest and oldest toggle', async () => {
     await act(async () => {
       render(

src/screens/OrgList/OrgList.tsx

@@ -509,53 +509,40 @@ function orgList(): JSX.Element {
         />
         {/* Plugin Notification Modal after Org is Created */}
         <Modal show={dialogModalisOpen} onHide={toggleDialogModal}>
+          <Modal.Header
+            className="bg-primary"
+            closeButton
+            data-testid="pluginNotificationHeader"
+          >
+            <Modal.Title className="text-white">
+              {t('manageFeatures')}
+            </Modal.Title>
+          </Modal.Header>
           <Modal.Body>
             <section id={styles.grid_wrapper}>
               <div>
-                <div className={styles.flexdir}>
-                  <p className={styles.titlemodal}>{t('manageFeatures')}</p>
-                  <a
-                    onClick={toggleDialogModal}
-                    className={styles.cancel}
-                    data-testid="closeOrganizationModal"
-                  >
-                    <i
-                      className="fa fa-times"
-                      style={{
-                        cursor: 'pointer',
-                      }}
-                    ></i>
-                  </a>
-                  <Button
-                    variant="secondary"
-                    onClick={toggleModal}
-                    data-testid="cancelOrganizationModal"
-                  >
-                    {t('cancel')}
-                  </Button>
-                </div>
                 <h4 className={styles.titlemodaldialog}>
                   {t('manageFeaturesInfo')}
                 </h4>
 
                 <div className={styles.pluginStoreBtnContainer}>
                   <Link
-                    className={styles.secondbtn}
+                    className={`btn btn-primary ${styles.pluginStoreBtn}`}
                     data-testid="goToStore"
                     to={`orgstore/id=${dialogRedirectOrgId}`}
                   >
                     {t('goToStore')}
                   </Link>
                   {/* </button> */}
-                  <button
+                  <Button
                     type="submit"
-                    className={styles.greenregbtn}
+                    className={styles.enableEverythingBtn}
                     onClick={closeDialogModal}
                     value="invite"
                     data-testid="enableEverythingForm"
                   >
                     {t('enableEverything')}
-                  </button>
+                  </Button>
                 </div>
               </div>
             </section>