Merge pull request #1401 from AppQuality/UN-1615-Aggiungere-attributi-dashboard-per-userpilot

Un 1615 aggiungere attributi dashboard per userpilot

Author: cannarocks

src/common/components/inviteUsers/campaignSettings.tsx

@@ -41,7 +41,7 @@ import {
 } from './styled';
 import { UserItem } from './userItem';
 
-export const CampaignSettings = () => {
+export const CampaignSettings = ({ dataQa }: { dataQa?: string }) => {
   const { permissionSettingsTitle, campaignId } = useAppSelector(
     (state) => state.navigation
   );
@@ -265,7 +265,11 @@ export const CampaignSettings = () => {
 
   return (
     <>
-      <Button onClick={() => setIsModalOpen(true)} isBasic>
+      <Button
+        onClick={() => setIsModalOpen(true)}
+        isBasic
+        data-qa={dataQa || 'pageHeader_shareButton'}
+      >
         <Button.StartIcon>
           <UsersIcon style={{ height: appTheme.iconSizes.lg }} />
         </Button.StartIcon>

src/common/components/inviteUsers/projectSettings.tsx

@@ -239,7 +239,11 @@ export const ProjectSettings = () => {
 
   return (
     <>
-      <Button onClick={() => setIsModalOpen(true)} isBasic>
+      <Button
+        onClick={() => setIsModalOpen(true)}
+        isBasic
+        data-qa="project_pageHeader_shareButton"
+      >
         <Button.StartIcon>
           <UsersIcon />
         </Button.StartIcon>

src/common/components/navigation/header/brandLogo.tsx

@@ -41,7 +41,10 @@ export const BrandLogo = ({
   if (size === 'full') return <LogoFullComponent onClick={handleLogoClick} />;
   return (
     <LogoIconContainer hasLogo>
-      <HeaderItemIcon onClick={handleLogoClick}>
+      <HeaderItemIcon
+        onClick={handleLogoClick}
+        data-qa="global_header_navItem_logo"
+      >
         <Logo type="icon" size={150} />
       </HeaderItemIcon>
     </LogoIconContainer>

src/common/components/navigation/header/header.tsx

@@ -50,7 +50,9 @@ export const Header = ({
     )}
     <div style={{ order: '1', display: 'flex' }}>
       <Changelog />
-      {loggedIn && <ProfileAvatar />}
+      {loggedIn && (
+        <ProfileAvatar data-qa="global_header_navItem_profile_avatar" />
+      )}
     </div>
   </UgHeader>
 );

src/common/components/navigation/sidebar/index.tsx

@@ -159,6 +159,7 @@ export const AppSidebar = (props: PropsWithChildren<SidebarProps>) => {
           isExpanded={isSidebarOpen}
           isCurrent={route === ''}
           onClick={() => navigateTo('home')}
+          data-qa="global_sidebar_navItem_myActivities"
         >
           <NavItemIcon>
             {route === '' ? <CampaignsIconActive /> : <CampaignsIcon />}
@@ -178,6 +179,7 @@ export const AppSidebar = (props: PropsWithChildren<SidebarProps>) => {
             defaultExpandedSections={[0]}
             isExpanded={isSidebarOpen}
             isAnimated={false}
+            data-qa="global_sidebar_navItem_projects"
           >
             <NavAccordionItem.Section>
               <NavAccordionItem.Header>
@@ -228,6 +230,7 @@ export const AppSidebar = (props: PropsWithChildren<SidebarProps>) => {
             isExpanded={isSidebarOpen}
             isCurrent={route === 'templates'}
             onClick={() => navigateTo('templates')}
+            data-qa="global_sidebar_navItem_templates"
           >
             <NavItemIcon>
               {route === 'templates' ? (
@@ -250,6 +253,7 @@ export const AppSidebar = (props: PropsWithChildren<SidebarProps>) => {
             isCurrent={route === `projects/${archiveId}`}
             onClick={() => navigateTo(`projects/${archiveId}`)}
             style={{ marginBottom: '16px' }}
+            data-qa="global_sidebar_navItem_archive"
           >
             <NavItemIcon isStyled>
               {route === `projects/${archiveId}` ? (

src/common/components/navigation/workspacesDropdown/index.tsx

@@ -118,12 +118,15 @@ export const WorkspacesDropdown = () => {
   if (!activeWorkspace) return null;
 
   if (isSingle)
-    return <BrandName>{`${activeWorkspace?.company}'s Workspace`}</BrandName>;
+    return (
+      <BrandName data-qa="global_header_navItem_workspace_name">{`${activeWorkspace?.company}'s Workspace`}</BrandName>
+    );
 
   return (
     <Wrapper ref={ref} isExpanded={isExpanded}>
       <DropdownFieldNew>
         <Autocomplete
+          data-qa="global_header_navItem_workspace_dropdown"
           onClick={() => {
             setIsExpanded(!isExpanded);
           }}

src/pages/Campaign/pageHeader/Meta/index.tsx

@@ -148,7 +148,7 @@ export const Metas = ({
   return (
     <>
       <FooterContainer>
-        <PageMeta>
+        <PageMeta data-qa="campaign_pageHeader_meta">
           <StatusMeta status={family.name.toLowerCase() as CampaignStatus}>
             {type.name}
           </StatusMeta>
@@ -167,7 +167,9 @@ export const Metas = ({
           ) : null}
         </PageMeta>
         <ButtonWrapper>
-          {!isArchived && hasWorkspaceAccess && <CampaignSettings />}
+          {!isArchived && hasWorkspaceAccess && (
+            <CampaignSettings dataQa="campaign_pageHeader_shareButton" />
+          )}
           {outputs?.includes('bugs') && (
             <Link to={functionalDashboardRoute}>
               <Button id="button-bugs-list-header" isPrimary isAccent>
@@ -225,7 +227,10 @@ export const Metas = ({
                   }
                 }}
                 label={(props) => (
-                  <IconButton data-qa="extra-actions-menu" {...props}>
+                  <IconButton
+                    data-qa="campaign_pageHeader_kebabMenu"
+                    {...props}
+                  >
                     <DotsIcon />
                   </IconButton>
                 )}

src/pages/Campaign/pageHeader/index.tsx

@@ -54,7 +54,7 @@ const CampaignPageHeader = ({ campaignId }: { campaignId: number }) => {
       )}
       <LayoutWrapper>
         <PageHeader>
-          <PageHeader.Breadcrumbs>
+          <PageHeader.Breadcrumbs data-qa="campaign_pageHeader_breadCrumb">
             {project.hasAccess ? (
               <Anchor
                 id="breadcrumb-parent"
@@ -67,7 +67,7 @@ const CampaignPageHeader = ({ campaignId }: { campaignId: number }) => {
             )}
           </PageHeader.Breadcrumbs>
           <PageHeader.Main mainTitle={campaign.customer_title}>
-            <PageHeader.Title>
+            <PageHeader.Title data-qa="campaign_pageHeader_title">
               <EditableTitle campaignId={campaignId} />
             </PageHeader.Title>
             <PageHeader.Meta>

src/pages/Dashboard/Counters.tsx

@@ -65,7 +65,7 @@ export const Counters = () => {
   return isLoading || isFetching ? (
     <Skeleton width="30%" height="32px" />
   ) : (
-    <PageMeta>
+    <PageMeta data-qa="project_pageHeader_counters">
       <StatusMeta counter={completed} status="completed" />
       <StatusMeta counter={running} status="running" />
       <StatusMeta counter={inComing} status="incoming" />

src/pages/Dashboard/projectPageHeader.tsx

@@ -94,7 +94,10 @@ export const ProjectPageHeader = ({ projectId }: { projectId: number }) => {
     <LayoutWrapper>
       <PageHeader>
         <PageHeader.Main mainTitle={project?.name || ''}>
-          <PageHeader.Title style={{ minHeight: '62px' }}>
+          <PageHeader.Title
+            style={{ minHeight: '62px' }}
+            data-qa="project_pageHeader_title"
+          >
             {isLoading ||
             isLoadingPlans ||
             isFetching ||
@@ -105,7 +108,10 @@ export const ProjectPageHeader = ({ projectId }: { projectId: number }) => {
               titleContent
             )}
           </PageHeader.Title>
-          <PageHeader.Description style={{ width: '100%' }}>
+          <PageHeader.Description
+            style={{ width: '100%' }}
+            data-qa="project_pageHeader_description"
+          >
             {isLoading ||
             isLoadingPlans ||
             isFetching ||