add filters section

src/components/ActionItemsContainer/ActionItemsContainer.tsx

@@ -192,7 +192,7 @@ function actionItemsContainer({
                   {actionItem.actionItemCategory.name}
                 </Col>
                 <Col
-                  className="d-none d-lg-block align-self-center fw-semibold text-body-secondary"
+                  className="p-0 d-none d-lg-block align-self-center fw-semibold text-body-secondary"
                   md={4}
                   lg={3}
                 >

src/screens/OrganizationActionItems/OrganizationActionItems.module.css

@@ -4,15 +4,15 @@
 
 .btnsContainer {
   display: flex;
-  justify-content: space-between;
+  gap: 10px;
 }
 
 .btnsContainer .btnsBlock {
   display: flex;
   gap: 10px;
 }
 
-.btnsContainer .btnsBlock button {
+.btnsContainer button {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,6 +22,12 @@
   min-height: 100vh;
 }
 
+.createActionItemButton {
+  position: absolute;
+  top: 1.3rem;
+  right: 2rem;
+}
+
 .datediv {
   display: flex;
   flex-direction: row;
@@ -47,6 +53,7 @@
 
 .dropdownToggle {
   margin-bottom: 0;
+  display: flex;
 }
 
 .dropdownModalToggle {
@@ -115,6 +122,10 @@ hr {
   flex-direction: column;
 }
 
+.organizationActionItemsContainer h2 {
+  margin: 0.6rem 0;
+}
+
 .preview {
   display: flex;
   flex-direction: row;
@@ -123,6 +134,10 @@ hr {
   color: rgb(80, 80, 80);
 }
 
+.removeFilterIcon {
+  cursor: pointer;
+}
+
 .searchForm {
   display: inline;
 }
@@ -147,21 +162,21 @@ hr {
 @media (max-width: 767px) {
   .btnsContainer {
     margin-bottom: 0;
-    flex-direction: column-reverse;
+    display: flex;
+    flex-direction: column;
   }
 
-  .btnsContainer .btnsBlock {
-    display: block;
-    margin-top: 1rem;
-    margin-right: 0;
+  .btnsContainer .btnsBlock .dropdownToggle {
+    flex-grow: 1;
   }
 
-  .btnsContainer .btnsBlock button {
-    margin-bottom: 1rem;
+  .btnsContainer button {
     width: 100%;
   }
 
-  .dropdown {
-    width: 100%;
+  .createActionItemButton {
+    position: absolute;
+    top: 1rem;
+    right: 2rem;
   }
 }

src/screens/OrganizationActionItems/OrganizationActionItems.test.tsx

@@ -216,6 +216,126 @@ describe('Testing Action Item Categories Component', () => {
     });
   });
 
+  test('applies and then clears filters one by one', async () => {
+    window.location.assign('/organizationActionItems/id=123');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrganizationActionItems />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sortActionItems')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('sortActionItems'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('earliest')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('earliest'));
+
+    // all the action items ordered by earliest first
+    await waitFor(() => {
+      expect(screen.getByTestId('sortActionItems')).toHaveTextContent(
+        translations.earliest
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemStatus')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('selectActionItemStatus'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('activeActionItems')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('activeActionItems'));
+
+    // all the action items that are active
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
+        translations.active
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemStatus')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('selectActionItemStatus'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('completedActionItems')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('completedActionItems'));
+
+    // all the action items that are completed
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
+        translations.completed
+      );
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('selectActionItemCategory')
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('selectActionItemCategory'));
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('actionItemCategory')[0]
+      ).toBeInTheDocument();
+    });
+    userEvent.click(screen.getAllByTestId('actionItemCategory')[0]);
+
+    // action items belonging to this action item category
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemCategory')).toHaveTextContent(
+        'ActionItemCategory 1'
+      );
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('clearActionItemCategoryFilter')
+      ).toBeInTheDocument();
+    });
+    // remove the action item category filter
+    userEvent.click(screen.getByTestId('clearActionItemCategoryFilter'));
+
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId('clearActionItemCategoryFilter')
+      ).not.toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByTestId('clearActionItemStatusFilter')
+      ).toBeInTheDocument();
+    });
+    // remove the action item status filter
+    userEvent.click(screen.getByTestId('clearActionItemStatusFilter'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('selectActionItemStatus')).toHaveTextContent(
+        translations.status
+      );
+      expect(screen.getByTestId('selectActionItemCategory')).toHaveTextContent(
+        translations.actionItemCategory
+      );
+    });
+  });
+
   test('applies and then clears all the filters', async () => {
     window.location.assign('/organizationActionItems/id=123');
     render(
@@ -297,7 +417,7 @@ describe('Testing Action Item Categories Component', () => {
     });
     userEvent.click(screen.getAllByTestId('actionItemCategory')[0]);
 
-    // action items belonging to this category
+    // action items belonging to this action item category
     await waitFor(() => {
       expect(screen.getByTestId('selectActionItemCategory')).toHaveTextContent(
         'ActionItemCategory 1'