Add Unit Tests for OrganizationAgendaCategory Component and Search Functionality for Agenda Item Categories

src/GraphQl/Queries/AgendaCategoryQueries.ts

@@ -8,8 +8,14 @@ import gql from 'graphql-tag';
  */
 
 export const AGENDA_ITEM_CATEGORY_LIST = gql`
-  query AgendaItemCategoriesByOrganization($organizationId: ID!) {
-    agendaItemCategoriesByOrganization(organizationId: $organizationId) {
+  query AgendaItemCategoriesByOrganization(
+    $organizationId: ID!
+    $where: AgendaItemCategoryWhereInput
+  ) {
+    agendaItemCategoriesByOrganization(
+      organizationId: $organizationId
+      where: $where
+    ) {
       _id
       name
       description

src/components/AgendaCategory/AgendaCategoryContainer.tsx

@@ -211,9 +211,9 @@ function agendaCategoryContainer({
               <div className="ms-3">{t('name')}</div>
             </Col>
             <Col
-              className="align-self-center fw-bold d-none d-md-block"
+              className={`  align-self-center  fw-bold d-none d-md-block`}
               md={6}
-              lg={2}
+              lg={6}
             >
               {t('description')}
             </Col>
@@ -242,7 +242,7 @@ function agendaCategoryContainer({
                 </Col>
                 <Col
                   md={6}
-                  lg={2}
+                  lg={6}
                   className="p-1 d-none d-md-block align-self-center text-body-secondary"
                 >
                   {agendaCategory.description}

src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Modal, Form, Button } from 'react-bootstrap';
 import type { ChangeEvent } from 'react';
-import styles from './OrganizationAgendaCategory.module.css';
-
+import styles from 'style/app.module.css';
 /**
  * InterfaceFormStateType is an object containing the form state
  */
@@ -48,12 +47,14 @@ const AgendaCategoryCreateModal: React.FC<
 }) => {
   return (
     <Modal
-      className={styles.AgendaCategoryModal}
+      className={`mt-5 ${styles.campaignModal}`}
       show={agendaCategoryCreateModalIsOpen}
       onHide={hideCreateModal}
     >
       <Modal.Header>
-        <p className={styles.titlemodal}>{t('agendaCategoryDetails')}</p>
+        <p className={styles.titlemodalOrganizationEvents}>
+          {t('agendaCategoryDetails')}
+        </p>
         <Button
           variant="danger"
           onClick={hideCreateModal}

src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal, Button } from 'react-bootstrap';
-import styles from './OrganizationAgendaCategory.module.css';
+import styles from 'style/app.module.css';
 
 /**
  * InterfaceAgendaCategoryDeleteModalProps is an object containing the props for AgendaCategoryDeleteModal component
@@ -35,7 +35,7 @@ const AgendaCategoryDeleteModal: React.FC<
     <Modal
       size="sm"
       id={`deleteAgendaCategoryModal`}
-      className={styles.agendaCategoryModal}
+      className={styles.campaignModal}
       show={agendaCategoryDeleteModalIsOpen}
       onHide={toggleDeleteModal}
       backdrop="static"

src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal, Form, Button } from 'react-bootstrap';
 
-import styles from './OrganizationAgendaCategory.module.css';
+import styles from 'style/app.module.css';
 
 /**
  * InterfaceFormStateType is an object containing the form state
@@ -47,12 +47,14 @@ const AgendaCategoryPreviewModal: React.FC<
 }) => {
   return (
     <Modal
-      className={styles.AgendaCategoryModal}
+      className={styles.campaignModal}
       show={agendaCategoryPreviewModalIsOpen}
       onHide={hidePreviewModal}
     >
       <Modal.Header>
-        <p className={styles.titlemodal}>{t('agendaCategoryDetails')}</p>
+        <p className={styles.titlemodalOrganizationEvents}>
+          {t('agendaCategoryDetails')}
+        </p>
         <Button
           onClick={hidePreviewModal}
           data-testid="previewAgendaCategoryModalCloseBtn"

src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Modal, Form, Button } from 'react-bootstrap';
 import type { ChangeEvent } from 'react';
 
-import styles from './OrganizationAgendaCategory.module.css';
+import styles from 'style/app.module.css';
 
 /**
  * InterfaceFormStateType is an object containing the form state
@@ -49,12 +49,14 @@ const AgendaCategoryUpdateModal: React.FC<
 }) => {
   return (
     <Modal
-      className={styles.AgendaCategoryModal}
+      className={styles.campaignModal}
       show={agendaCategoryUpdateModalIsOpen}
       onHide={hideUpdateModal}
     >
       <Modal.Header>
-        <p className={styles.titlemodal}>{t('updateAgendaCategory')}</p>
+        <p className={styles.titlemodalOrganizationEvents}>
+          {t('updateAgendaCategory')}
+        </p>
         <Button
           onClick={hideUpdateModal}
           data-testid="updateAgendaCategoryModalCloseBtn"