CSS Selectors (#310)

### Summary CSS Selectors for Google Analytics
gt-scheduler · Mar 11, 2024 · 669bba4 · 669bba4
1 parent ae9fbb6
commit 669bba4
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -68,20 +68,23 @@ export default function HeaderActionBar({
       label: 'Download image',
       icon: faDownload,
       onClick: onDownloadCalendar,
+      id: 'export-download',
     });
   }
   if (enableExportCalendar) {
     exportActions.push({
       label: 'ICS (Calendar) file',
       icon: faCalendarAlt,
       onClick: onExportCalendar,
+      id: 'export-calendar',
     });
   }
   if (enableCopyCrns) {
     exportActions.push({
       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
@@ -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
@@ -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,17 +381,19 @@ export function DropdownMenu({
         if (!disabled) setOpened(!opened);
       }}
       style={style}
+      id="export-button"
     >
       {children}
       {opened && (
         <div className="intercept" onClick={(): void => setOpened(false)} />
       )}
       {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}>
-Original file line number
+Diff line change
@@ Expand Up @@
                 true
               );
             }}
+            id="version-selector-dropdown"
           />
           <Modal
@@ Expand Down @@