Event and Organization Action item layouts need to be the same

public/locales/en/translation.json

@@ -266,11 +266,11 @@
     "latest": "Latest",
     "noActionItems": "No Action Items",
     "options": "Options",
-    "preCompletionNotes": "Pre Completion Notes",
+    "preCompletionNotes": "Notes",
     "actionItemActive": "Active",
     "markCompletion": "Mark Completion",
     "actionItemStatus": "Action Item Status",
-    "postCompletionNotes": "Post Completion Notes",
+    "postCompletionNotes": "Completion Notes",
     "selectActionItemCategory": "Select an action item category",
     "selectAssignee": "Select an assignee",
     "status": "Status",

src/components/ActionItems/ActionItemsContainer.test.tsx

@@ -667,4 +667,34 @@ describe('Testing Action Item Categories Component', () => {
       );
     });
   });
+
+  test('Action Items loads with correct headers', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <ActionItemsContainer {...props} />
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    const actionItemHeaders = screen.getByTestId('actionItemsHeader');
+    expect(actionItemHeaders).toBeInTheDocument();
+    expect(screen.getByText(translations.assignee)).toBeInTheDocument();
+    expect(
+      screen.getByText(translations.actionItemCategory),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(translations.preCompletionNotes),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText(translations.postCompletionNotes),
+    ).toBeInTheDocument();
+    expect(screen.getByText(translations.options)).toBeInTheDocument();
+  });
 });

src/components/ActionItems/ActionItemsContainer.tsx

@@ -193,6 +193,7 @@ function actionItemsContainer({
         >
           <Row
             className={`mx-0 border border-light-subtle py-3 ${actionItemsConnection === 'Organization' ? 'rounded-top-4' : 'rounded-top-2'}`}
+            data-testid="actionItemsHeader"
           >
             <Col
               xs={7}
@@ -214,7 +215,7 @@ function actionItemsContainer({
             <Col
               className="d-none d-lg-block fw-bold align-self-center"
               md={4}
-              lg={3}
+              lg={2}
             >
               <div className="ms-1">{t('preCompletionNotes')}</div>
             </Col>
@@ -257,9 +258,9 @@ function actionItemsContainer({
                 <Col
                   className="p-0 d-none d-lg-block align-self-center text-body-secondary"
                   md={4}
-                  lg={3}
+                  lg={2}
                 >
-                  <div className="ms-3">
+                  <div className="ms-2">
                     <OverlayTrigger
                       trigger={['hover', 'focus']}
                       placement="right"

src/components/EventManagement/EventActionItems/EventActionItems.test.tsx

@@ -309,7 +309,7 @@ const UPDATE_ACTION_ITEM_ERROR_MOCK = [
   },
 ];
 
-const NO_ACTION_ITEMs_ERROR_MOCK = [
+const NO_ACTION_ITEMS_ERROR_MOCK = [
   {
     request: {
       query: ACTION_ITEM_LIST_BY_EVENTS,
@@ -329,7 +329,7 @@ const NO_ACTION_ITEMs_ERROR_MOCK = [
 const link = new StaticMockLink(MOCKS, true);
 const link2 = new StaticMockLink(CREATE_ACTION_ITEM_ERROR_MOCK, true);
 const link3 = new StaticMockLink(UPDATE_ACTION_ITEM_ERROR_MOCK, true);
-const link4 = new StaticMockLink(NO_ACTION_ITEMs_ERROR_MOCK, true);
+const link4 = new StaticMockLink(NO_ACTION_ITEMS_ERROR_MOCK, true);
 
 const translations = JSON.parse(
   JSON.stringify(
@@ -625,4 +625,40 @@ describe('Event Action Items Page', () => {
     await wait();
     expect(screen.getByText('Nothing Found !!')).toBeInTheDocument();
   });
+
+  test('Testing update action modal to have correct initial values', async () => {
+    window.location.assign('/event/111/123');
+    render(
+      <MockedProvider link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18nForTest}>
+                {<EventActionItems eventId="123" />}
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+    await wait();
+    const updateButton = screen.getByRole('button', {
+      name: /manage actions/i,
+    });
+    userEvent.click(updateButton);
+
+    expect(screen.getByText('Action Item Details')).toBeInTheDocument();
+    const assigneeDropdown = screen.getByTestId(
+      'formUpdateAssignee',
+    ) as HTMLSelectElement;
+    expect(assigneeDropdown.value).toBe('6589387e2caa9d8d69087485');
+    expect(assigneeDropdown).toHaveTextContent('Burton Sanders');
+
+    expect(screen.getByPlaceholderText('Notes')).toHaveValue(
+      'Pre Completion Note',
+    );
+    expect(screen.getByPlaceholderText('Post Completion Notes')).toHaveValue(
+      'Post Completion Note',
+    );
+  });
 });

src/components/EventManagement/EventActionItems/EventActionItems.tsx

@@ -19,6 +19,7 @@ import {
 } from 'GraphQl/Mutations/ActionItemMutations';
 import type {
   InterfaceActionItemCategoryList,
+  InterfaceActionItemInfo,
   InterfaceMembersList,
 } from 'utils/interfaces';
 import { DatePicker } from '@mui/x-date-pickers';
@@ -74,6 +75,17 @@ function eventActionItems(props: { eventId: string }): JSX.Element {
   const toggleDeleteModal = (): void => {
     setActionItemDeleteModalIsOpen(!actionItemDeleteModalIsOpen);
   };
+  const setActionItemState = (actionItem: InterfaceActionItemInfo): void => {
+    setFormState((prevState) => ({
+      ...prevState,
+      assignee: `${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`,
+      assigner: `${actionItem.assigner.firstName} ${actionItem.assigner.lastName}`,
+      assigneeId: actionItem.assignee._id,
+      preCompletionNotes: actionItem.preCompletionNotes,
+      postCompletionNotes: actionItem.postCompletionNotes,
+      isCompleted: actionItem.isCompleted,
+    }));
+  };
   const {
     data: actionItemCategoriesData,
   }: {
@@ -274,6 +286,7 @@ function eventActionItems(props: { eventId: string }): JSX.Element {
             onClick={() => {
               showUpdateModal();
               setActionItemId(params.row._id);
+              setActionItemState(params.row);
             }}
             data-testid="updateAdminModalBtn"
           >
@@ -413,12 +426,12 @@ function eventActionItems(props: { eventId: string }): JSX.Element {
               <Form.Label>Assignee</Form.Label>
               <Form.Select
                 data-testid="formUpdateAssignee"
-                defaultValue={formState.assignee}
+                defaultValue={formState.assigneeId}
                 onChange={(e) =>
                   setFormState({ ...formState, assigneeId: e.target.value })
                 }
               >
-                <option value="" disabled>
+                <option value={formState.assigneeId} disabled>
                   {formState.assignee}
                 </option>
                 {membersData?.organizations[0].members.map((member, index) => {