chore: add data-cy attributes for Cypress

Author: mohammad-alisafaee

client/src/components/buttons/Button.tsx

@@ -125,6 +125,7 @@ interface ButtonWithMenuV2Props {
   children?: React.ReactNode;
   className?: string;
   color?: string;
+  dataCy?: string;
   default: React.ReactNode;
   direction?: "up" | "down" | "start" | "end";
   disabled?: boolean;
@@ -139,6 +140,7 @@ export function SplitButtonWithMenu({
   children,
   className,
   color,
+  dataCy,
   default: defaultButton,
   direction,
   disabled,
@@ -168,7 +170,7 @@ export function SplitButtonWithMenu({
         className={cx("border-start-0", "dropdown-toggle-split")}
         data-bs-toggle="dropdown"
         color={color ?? "primary"}
-        data-cy="button-with-menu-dropdown"
+        data-cy={dataCy ?? "button-with-menu-dropdown"}
         disabled={isDisabledDropdownToggle ?? disabled}
       />
       <DropdownMenu end>{children}</DropdownMenu>

client/src/features/ProjectPageV2/ProjectPageContent/ProjectInformation/ProjectInformation.tsx

@@ -160,7 +160,9 @@ export default function ProjectInformation({
         title="Namespace:"
       >
         <p className="mb-0">
-          <Link to={namespaceUrl}>{namespaceName}</Link>
+          <Link data-cy="project-namespace-link" to={namespaceUrl}>
+            {namespaceName}
+          </Link>
         </p>
       </ProjectInformationBox>
       <ProjectInformationBox icon={<Eye className="bi" />} title="Visibility:">

client/src/features/dashboardV2/DashboardV2.tsx

@@ -347,6 +347,7 @@ function UserDashboard() {
           <Link
             to={userPageUrl}
             className={cx("link-primary", "stretched-link")}
+            data-cy="user-namespace-link"
           >
             @{userInfo.username ?? "unknown"}
           </Link>

client/src/features/dataConnectorsV2/components/DataConnectorActions.tsx

@@ -490,6 +490,7 @@ function DataConnectorActionsInner({
     ) : (
       <ButtonWithMenuV2
         color="outline-primary"
+        dataCy="data-connector-menu-dropdown"
         default={
           <Button
             color="outline-primary"

client/src/features/session/components/SessionsList.tsx

@@ -353,7 +353,7 @@ export function SessionRowResourceRequests({
     ) : null;
 
   return (
-    <div>
+    <div data-cy="session-view-resource-class-description">
       {resourceClassName && (
         <span key="name">
           <span className="text-nowrap">{resourceClassName}</span>

client/src/features/sessionsV2/DeleteSessionLauncherModal.tsx

@@ -69,7 +69,12 @@ export default function DeleteSessionLauncherModal({
       size="lg"
       toggle={toggle}
     >
-      <ModalHeader className="text-danger" tag="h2" toggle={toggle}>
+      <ModalHeader
+        className="text-danger"
+        data-cy="delete-session-launcher-modal-title"
+        tag="h2"
+        toggle={toggle}
+      >
         Delete session launcher
       </ModalHeader>
       <ModalBody>
@@ -107,6 +112,7 @@ export default function DeleteSessionLauncherModal({
         </Button>
         <Button
           color="danger"
+          data-cy="delete-session-launcher-modal-button"
           disabled={result.isLoading}
           onClick={onDelete}
           type="button"

client/src/features/sessionsV2/SessionView/SessionView.tsx

@@ -409,7 +409,7 @@ export function SessionView({
           )}
           <div>
             <div className={cx("d-flex", "justify-content-between", "mb-2")}>
-              <h3 className="my-auto">Default Resource Class</h3>
+              <h3 className="my-auto" data-cy="session-view-resource-class-heading">Default Resource Class</h3>
               {launcher && (
                 <PermissionsGuard
                   disabled={null}
@@ -421,6 +421,7 @@ export function SessionView({
                         onClick={toggleModifyResources}
                         size="sm"
                         tabIndex={0}
+                        data-cy="session-view-resource-class-edit-button"
                       >
                         <Pencil className="bi" />
                       </Button>

client/src/features/sessionsV2/SessionsV2.tsx

@@ -211,6 +211,7 @@ export function SessionV2Actions({
             <>
               <ButtonWithMenuV2
                 color="outline-primary"
+                dataCy="session-launcher-menu-dropdown"
                 default={defaultAction}
                 preventPropagation
                 size="sm"

client/src/features/sessionsV2/components/SessionModals/ModifyResourcesLauncher.tsx

@@ -168,15 +168,15 @@ export function ModifyResourcesLauncherModal({
       size="lg"
       toggle={toggleModal}
     >
-      <ModalHeader tag="h2" toggle={toggleModal}>
+      <ModalHeader tag="h2" toggle={toggleModal} data-cy="set-resource-class-modal-header">
         Set default resource class
       </ModalHeader>
       <ModalBody>
         {result.error && (
           <ErrorOrNotAvailableResourcePools title="Error modifying resources" />
         )}
         {result.isSuccess && (
-          <SuccessAlert dismissible={false}>
+          <SuccessAlert dismissible={false} data-cy="set-resource-class-modal-success-alert">
             <h3 className={cx("fs-6", "fw-bold")}>
               Default resource class updated
             </h3>
@@ -269,7 +269,7 @@ export function ModifyResourcesLauncherModal({
         )}
       </ModalBody>
       <ModalFooter>
-        <Button color="outline-primary" onClick={toggleModal}>
+        <Button color="outline-primary" onClick={toggleModal} data-cy="set-resource-class-modal-cancel-button">
           <XLg className={cx("bi", "me-1")} />
           Cancel
         </Button>
@@ -284,6 +284,7 @@ export function ModifyResourcesLauncherModal({
           }
           onClick={onSubmit}
           type="submit"
+          data-cy="set-resource-class-modal-submit-button"
         >
           {result.isLoading ? (
             <Loader className="me-1" inline size={16} />