Add Side Navigation to Event Dashboard (PalisadoesFoundation#981)

* Create left drawer for event dashboard

* Add basic styles to the event dashboard

* Fix button styling

* Add testing

* Add testing for the left event drawer

* Add 100% line coverage for all components

* Increase timeout for tests

src/GraphQl/Queries/Queries.ts

@@ -95,6 +95,7 @@ export const USER_LIST = gql`
 export const EVENT_DETAILS = gql`
   query Event($id: ID!) {
     event(id: $id) {
+      _id
       title
       description
       startDate

src/components/CheckIn/CheckInWrapper.module.css

@@ -0,0 +1,13 @@
+button .iconWrapper {
+  width: 32px;
+  padding-right: 4px;
+  margin-right: 4px;
+  transform: translateY(4px);
+}
+
+button .iconWrapperSm {
+  width: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/CheckIn/CheckInWrapper.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { CheckInModal } from './CheckInModal';
 import { Button } from 'react-bootstrap';
+import IconComponent from 'components/IconComponent/IconComponent';
+import styles from './CheckInWrapper.module.css';
 
 type PropType = {
   eventId: string;
@@ -12,14 +14,19 @@ export const CheckInWrapper = (props: PropType): JSX.Element => {
   return (
     <>
       <Button
-        type="button"
-        className="mt-3"
-        variant="success"
-        aria-label="checkInAttendees"
+        variant="light"
+        className="text-secondary"
+        aria-label="checkInRegistrants"
         onClick={(): void => {
           setShowModal(true);
         }}
       >
+        <div className={styles.iconWrapper}>
+          <IconComponent
+            name="Check In Registrants"
+            fill="var(--bs-secondary)"
+          />
+        </div>
         Check In Registrants
       </Button>
       {showModal && (

src/components/EventRegistrantsModal/EventRegistrantsWrapper.module.css

@@ -0,0 +1,13 @@
+button .iconWrapper {
+  width: 36px;
+  padding-right: 4px;
+  margin-right: 4px;
+  transform: translateY(4px);
+}
+
+button .iconWrapperSm {
+  width: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/EventRegistrantsModal/EventRegistrantsWrapper.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { EventRegistrantsModal } from './EventRegistrantsModal';
 import { Button } from 'react-bootstrap';
+import IconComponent from 'components/IconComponent/IconComponent';
+import styles from './EventRegistrantsWrapper.module.css';
 
 type PropType = {
   eventId: string;
@@ -13,17 +15,23 @@ export const EventRegistrantsWrapper = (props: PropType): JSX.Element => {
   return (
     <>
       <Button
-        type="button"
-        className="mt-3"
-        variant="success"
+        variant="light"
+        className="text-secondary"
         aria-label="showAttendees"
         onClick={(): void => {
           setShowModal(true);
         }}
       >
+        <div className={styles.iconWrapper}>
+          <IconComponent
+            name="List Event Registrants"
+            fill="var(--bs-secondary)"
+          />
+        </div>
         Show Registrants
       </Button>
-      {showModal ? (
+
+      {showModal && (
         <EventRegistrantsModal
           show={showModal}
           handleClose={(): void => {
@@ -32,7 +40,7 @@ export const EventRegistrantsWrapper = (props: PropType): JSX.Element => {
           eventId={props.eventId}
           orgId={props.orgId}
         />
-      ) : null}
+      )}
     </>
   );
 };

src/components/EventStats/EventStatsWrapper.module.css

@@ -0,0 +1,13 @@
+button .iconWrapper {
+  width: 32px;
+  padding-right: 4px;
+  margin-right: 4px;
+  transform: translateY(4px);
+}
+
+button .iconWrapperSm {
+  width: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/EventStats/EventStatsWrapper.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { EventStats } from './EventStats';
 import { Button } from 'react-bootstrap';
+import IconComponent from 'components/IconComponent/IconComponent';
+import styles from './EventStatsWrapper.module.css';
 
 type PropType = {
   eventId: string;
@@ -12,23 +14,24 @@ export const EventStatsWrapper = (props: PropType): JSX.Element => {
   return (
     <>
       <Button
-        type="button"
-        className="mt-3"
-        variant="success"
-        aria-label="eventStatistics"
+        variant="light"
+        className="text-secondary"
+        aria-label="checkInRegistrants"
         onClick={(): void => {
           setShowModal(true);
         }}
       >
+        <div className={styles.iconWrapper}>
+          <IconComponent name="Event Stats" fill="var(--bs-secondary)" />
+        </div>
         View Event Statistics
       </Button>
-      {showModal && (
-        <EventStats
-          show={showModal}
-          handleClose={(): void => setShowModal(false)}
-          eventId={props.eventId}
-        />
-      )}
+      <EventStats
+        show={showModal}
+        handleClose={(): void => setShowModal(false)}
+        key={props.eventId || 'eventStatsDetails'}
+        eventId={props.eventId}
+      />
     </>
   );
 };

src/components/IconComponent/IconComponent.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import IconComponent from './IconComponent';
 
-const screenTestIdMap = {
+const screenTestIdMap: Record<string, Record<string, string>> = {
   Dashboard: {
     name: 'Dashboard',
     testId: 'Icon-Component-DashboardIcon',
@@ -35,65 +35,35 @@ const screenTestIdMap = {
     name: 'All Organizations',
     testId: 'Icon-Component-AllOrganizationsIcon',
   },
+  EventProject: {
+    name: 'Add Event Project',
+    testId: 'Icon-Component-Add-Event-Project',
+  },
+  ListEventRegistrant: {
+    name: 'List Event Registrants',
+    testId: 'Icon-Component-List-Event-Registrants',
+  },
+  CheckInRegistrants: {
+    name: 'Check In Registrants',
+    testId: 'Icon-Component-Check-In-Registrants',
+  },
+  EventStats: {
+    name: 'Event Stats',
+    testId: 'Icon-Component-Event-Stats',
+  },
   default: {
     name: 'default',
     testId: 'Icon-Component-DefaultIcon',
   },
 };
 
-describe('Testing CollapsibleDropdown component', () => {
-  it('renders the Dashboard icon', () => {
-    render(<IconComponent name="Dashboard" />);
-    expect(
-      screen.getByTestId(`${screenTestIdMap.Dashboard.testId}`)
-    ).toBeInTheDocument();
-  });
-  it('renders the People icon', () => {
-    render(<IconComponent name="People" />);
-    expect(
-      screen.getByTestId(`${screenTestIdMap.People.testId}`)
-    ).toBeInTheDocument();
-  });
-  it('renders the Events icon', () => {
-    render(<IconComponent name="Events" />);
-    expect(
-      screen.getByTestId(`${screenTestIdMap.Events.testId}`)
-    ).toBeInTheDocument();
-  });
-  it('renders the Posts icon', () => {
-    render(<IconComponent name="Posts" />);
-    expect(
-      screen.getByTestId(`${screenTestIdMap.Posts.testId}`)
-    ).toBeInTheDocument();
-  });
-  it('renders the Block/Unblock icon', () => {
-    render(<IconComponent name="Block/Unblock" />);
-    expect(
-      screen.getByTestId(`${screenTestIdMap.BlockUnblock.testId}`)
-    ).toBeInTheDocument();
-  });
-  it('renders the Plugins icon', () => {
-    render(<IconComponent name="Plugins" />);
-    expect(
-      screen.getByTestId(`${screenTestIdMap.Plugins.testId}`)
-    ).toBeInTheDocument();
-  });
-  it('renders the Settings icon', () => {
-    render(<IconComponent name="Settings" />);
-    expect(
-      screen.getByTestId(`${screenTestIdMap.Settings.testId}`)
-    ).toBeInTheDocument();
-  });
-  it('renders the All Organizations icon', () => {
-    render(<IconComponent name="All Organizations" />);
-    expect(
-      screen.getByTestId(`${screenTestIdMap.AllOrganizations.testId}`)
-    ).toBeInTheDocument();
-  });
-  it('renders the default icon', () => {
-    render(<IconComponent name="default" />);
-    expect(
-      screen.getByTestId(`${screenTestIdMap.default.testId}`)
-    ).toBeInTheDocument();
+describe('Testing Collapsible Dropdown component', () => {
+  it('Renders the correct icon according to the component', () => {
+    for (const component in screenTestIdMap) {
+      render(<IconComponent name={screenTestIdMap[component].name} />);
+      expect(
+        screen.getByTestId(screenTestIdMap[component].testId)
+      ).toBeInTheDocument();
+    }
   });
 });

src/components/IconComponent/IconComponent.tsx

@@ -8,6 +8,10 @@ import { ReactComponent as PeopleIcon } from 'assets/svgs/people.svg';
 import { ReactComponent as PluginsIcon } from 'assets/svgs/plugins.svg';
 import { ReactComponent as PostsIcon } from 'assets/svgs/posts.svg';
 import { ReactComponent as SettingsIcon } from 'assets/svgs/settings.svg';
+import { ReactComponent as AddEventProjectIcon } from 'assets/svgs/addEventProject.svg';
+import { ReactComponent as ListEventRegistrantsIcon } from 'assets/svgs/listEventRegistrants.svg';
+import { ReactComponent as CheckInRegistrantsIcon } from 'assets/svgs/checkInRegistrants.svg';
+import { ReactComponent as EventStatsIcon } from 'assets/svgs/eventStats.svg';
 
 export interface InterfaceIconComponent {
   name: string;
@@ -56,6 +60,34 @@ const iconComponent = (props: InterfaceIconComponent): JSX.Element => {
           data-testid="Icon-Component-AllOrganizationsIcon"
         />
       );
+    case 'Add Event Project':
+      return (
+        <AddEventProjectIcon
+          data-testid="Icon-Component-Add-Event-Project"
+          stroke={props.fill}
+        />
+      );
+    case 'List Event Registrants':
+      return (
+        <ListEventRegistrantsIcon
+          data-testid="Icon-Component-List-Event-Registrants"
+          stroke={props.fill}
+        />
+      );
+    case 'Check In Registrants':
+      return (
+        <CheckInRegistrantsIcon
+          data-testid="Icon-Component-Check-In-Registrants"
+          stroke={props.fill}
+        />
+      );
+    case 'Event Stats':
+      return (
+        <EventStatsIcon
+          data-testid="Icon-Component-Event-Stats"
+          stroke={props.fill}
+        />
+      );
     default:
       return (
         <QuestionMarkOutlined

src/components/LeftDrawer/LeftDrawer.tsx

@@ -143,7 +143,7 @@ const leftDrawer = ({
                 <img src={userImage} alt={`profile picture`} />
               ) : (
                 <img
-                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName} ${lastName}`}
+                  src={`https://api.dicebear.com/5.x/initials/svg?seed=${firstName}%20${lastName}`}
                   alt={`dummy picture`}
                 />
               )}