From 669bba47c98cc2e78bdcac0ef8dab23902869a35 Mon Sep 17 00:00:00 2001
From: Yatharth Bhargava <52095139+yatharth-b@users.noreply.github.com>
Date: Tue, 12 Mar 2024 00:00:17 +0530
Subject: [PATCH] CSS Selectors (#310)

### Summary

CSS Selectors for Google Analytics
---
 src/components/AccountDropdown/index.tsx |  3 +++
 src/components/Button/index.tsx          |  8 +++++++-
 src/components/EventAdd/index.tsx        |  1 +
 src/components/HeaderActionBar/index.tsx |  3 +++
 src/components/HeaderDisplay/index.tsx   |  1 +
 src/components/Select/index.tsx          | 10 ++++++++--
 6 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/AccountDropdown/index.tsx b/src/components/AccountDropdown/index.tsx
index 08f87e6f..6ec7d0eb 100644
--- a/src/components/AccountDropdown/index.tsx
+++ b/src/components/AccountDropdown/index.tsx
@@ -55,11 +55,13 @@ export default function AccountDropdown({
       items = [
         {
           label: <SignedInLabel state={state} />,
+          id: 'signed-in-label',
         },
         {
           label: 'Sign out',
           icon: faSignOutAlt,
           onClick: (): void => state.signOut(),
+          id: 'sign-out-dropdown',
         },
       ];
       circleContent = <UserInitials state={state} />;
@@ -73,6 +75,7 @@ export default function AccountDropdown({
           onClick: (): void => {
             setLoginOpen(true);
           },
+          id: 'sign-in-button-dropdown',
         },
       ];
       circleContent = (
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 7c1ed46c..39bbd897 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -10,6 +10,7 @@ export type ButtonProps = {
   href?: string;
   onClick?: (e: React.SyntheticEvent<HTMLDivElement>) => void;
   children?: React.ReactNode;
+  id?: string;
 };
 
 export default function Button({
@@ -18,10 +19,13 @@ export default function Button({
   href,
   onClick,
   children,
+  id,
 }: ButtonProps): React.ReactElement {
   if (disabled)
     return (
-      <div className={classes('Button', 'disabled', className)}>{children}</div>
+      <div className={classes('Button', 'disabled', className)} id={id}>
+        {children}
+      </div>
     );
 
   if (href != null)
@@ -31,6 +35,7 @@ export default function Button({
         href={href}
         rel="noopener noreferrer"
         target="_blank"
+        id={id}
       >
         {children}
       </a>
@@ -46,6 +51,7 @@ export default function Button({
         if (event.key === 'Enter' && onClick != null) onClick(event);
       }}
       role="button"
+      id={id}
     >
       {children}
     </div>
diff --git a/src/components/EventAdd/index.tsx b/src/components/EventAdd/index.tsx
index 3bb7fabb..6a6597b9 100644
--- a/src/components/EventAdd/index.tsx
+++ b/src/components/EventAdd/index.tsx
@@ -266,6 +266,7 @@ export default function EventAdd({
                   className="button"
                   disabled={submitDisabled}
                   onClick={onSubmit}
+                  id="event-add-button"
                 >
                   {event?.id ? 'Save' : 'Add'}
                 </Button>
diff --git a/src/components/HeaderActionBar/index.tsx b/src/components/HeaderActionBar/index.tsx
index 14196fd0..7e4ca2ee 100644
--- a/src/components/HeaderActionBar/index.tsx
+++ b/src/components/HeaderActionBar/index.tsx
@@ -68,6 +68,7 @@ export default function HeaderActionBar({
       label: 'Download image',
       icon: faDownload,
       onClick: onDownloadCalendar,
+      id: 'export-download',
     });
   }
   if (enableExportCalendar) {
@@ -75,6 +76,7 @@ export default function HeaderActionBar({
       label: 'ICS (Calendar) file',
       icon: faCalendarAlt,
       onClick: onExportCalendar,
+      id: 'export-calendar',
     });
   }
   if (enableCopyCrns) {
@@ -82,6 +84,7 @@ export default function HeaderActionBar({
       label: 'Copy CRNs to clipboard',
       icon: faPaste,
       onClick: onCopyCrns,
+      id: 'export-copy-crn',
     });
   }
 
diff --git a/src/components/HeaderDisplay/index.tsx b/src/components/HeaderDisplay/index.tsx
index 5ae7aafb..864c2088 100644
--- a/src/components/HeaderDisplay/index.tsx
+++ b/src/components/HeaderDisplay/index.tsx
@@ -277,6 +277,7 @@ function VersionSelector({ state }: VersionSelectorProps): React.ReactElement {
             true
           );
         }}
+        id="version-selector-dropdown"
       />
 
       <Modal
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
index 1433942e..3c16eebb 100644
--- a/src/components/Select/index.tsx
+++ b/src/components/Select/index.tsx
@@ -31,6 +31,7 @@ export type SelectProps<Id extends string | number> = {
 
   // Ignored if `onClickNew` is not provided.
   newLabel?: string;
+  id?: string;
 };
 
 export interface SelectOption<Id extends string | number> {
@@ -93,6 +94,7 @@ export default function Select<Id extends string | number>({
   desiredItemWidth = null,
   onClickNew,
   newLabel = 'New',
+  id,
 }: SelectProps<Id>): React.ReactElement {
   const [opened, setOpened] = useState(false);
 
@@ -169,6 +171,7 @@ export default function Select<Id extends string | number>({
       className={classes('Button', 'Select', className, `anchor-${menuAnchor}`)}
       onClick={(): void => trySetOpened(!opened)}
       style={style}
+      id={id}
     >
       <div className="text">{label}</div>
       <FontAwesomeIcon fixedWidth icon={faCaretDown} />
@@ -295,7 +298,7 @@ export default function Select<Id extends string | number>({
             </div>
           ))}
           {onClickNew !== undefined && (
-            <div className="option">
+            <div className="option" id={id ? `${id}-new-button` : undefined}>
               <Button className="option__button" onClick={onClickNew}>
                 <FontAwesomeIcon
                   fixedWidth
@@ -347,6 +350,7 @@ export type DropdownMenuProps = {
 export interface DropdownMenuAction {
   label: React.ReactNode;
   icon?: IconDefinition;
+  id?: string;
   onClick?: () => void;
 }
 
@@ -377,6 +381,7 @@ export function DropdownMenu({
         if (!disabled) setOpened(!opened);
       }}
       style={style}
+      id="export-button"
     >
       {children}
       {opened && (
@@ -384,10 +389,11 @@ export function DropdownMenu({
       )}
       {opened && (
         <div className="option-container">
-          {items.map(({ label, icon, onClick }, i) => (
+          {items.map(({ label, icon, onClick, id }, i) => (
             <div
               className={classes('option', onClick == null && 'option--text')}
               key={i}
+              id={id}
             >
               {onClick != null ? (
                 <Button className="option__button" onClick={onClick}>