Release 20250519

.github/workflows/e2e.yml

@@ -16,8 +16,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        # run 3 copies of the job in parallel
-        shard: [1, 2, 3]
+        # run 4 copies of the job in parallel
+        shard: [1, 2, 3, 4]
 
     name: "Playwright Tests - pwc"
     timeout-minutes: 20

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@appquality/languages": "1.4.3",
-    "@appquality/unguess-design-system": "4.0.36",
+    "@appquality/unguess-design-system": "4.0.37",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@sentry/react": "^8.32.0",

src/common/components/inviteUsers/campaignSettings.tsx

@@ -1,12 +1,13 @@
 import {
+  AccordionNew,
   Button,
+  getColor,
   Label,
   MD,
   Modal,
   ModalClose,
   Notification,
   Span,
-  getColor,
   useToast,
 } from '@appquality/unguess-design-system';
 import { FormikHelpers } from 'formik';
@@ -35,8 +36,6 @@ import {
   FixedBody,
   FlexContainer,
   SettingsDivider,
-  StyledAccordion,
-  StyledAccordionPanel,
   UsersContainer,
   UsersLabel,
 } from './styled';
@@ -361,42 +360,36 @@ export const CampaignSettings = () => {
                 </UsersLabel>
               )}
               {projectCount > 0 && (
-                <StyledAccordion
+                <AccordionNew
+                  isCompact
                   level={3}
                   key="project_users_accordion"
-                  isAnimated
-                  isExpandable
                   defaultExpandedSections={[]}
                 >
-                  <StyledAccordion.Section>
-                    <StyledAccordion.Header>
-                      <StyledAccordion.Label style={{ padding: 0 }}>
-                        <UsersLabel>
-                          <ProjectsIcon
-                            style={{
-                              color: appTheme.palette.grey[600],
-                              marginRight: appTheme.space.xs,
-                            }}
-                          />
-                          <MD isBold>
-                            {t('__PERMISSION_SETTINGS_PROJECT_USERS')}{' '}
-                            <Span
-                              isBold={false}
-                              style={{ color: appTheme.palette.grey[600] }}
-                            >
-                              ({projectCount})
-                            </Span>
-                          </MD>
-                        </UsersLabel>
-                      </StyledAccordion.Label>
-                    </StyledAccordion.Header>
-                    <StyledAccordionPanel>
+                  <AccordionNew.Section>
+                    <AccordionNew.Header
+                      icon={
+                        <ProjectsIcon
+                          style={{
+                            color: appTheme.palette.grey[600],
+                            marginRight: appTheme.space.xs,
+                          }}
+                        />
+                      }
+                    >
+                      <AccordionNew.Label
+                        label={`${t(
+                          '__PERMISSION_SETTINGS_PROJECT_USERS'
+                        )} (${projectCount})`}
+                      />
+                    </AccordionNew.Header>
+                    <AccordionNew.Panel>
                       {projectUsers?.items.map((user) => (
                         <UserItem key={user.id} user={user} />
                       ))}
-                    </StyledAccordionPanel>
-                  </StyledAccordion.Section>
-                </StyledAccordion>
+                    </AccordionNew.Panel>
+                  </AccordionNew.Section>
+                </AccordionNew>
               )}
               {workspaceUsersError && (
                 <UsersLabel>
@@ -412,42 +405,36 @@ export const CampaignSettings = () => {
                 </UsersLabel>
               )}
               {workspaceCount > 0 && (
-                <StyledAccordion
+                <AccordionNew
+                  isCompact
                   level={3}
                   key="workspace_users_accordion"
-                  isAnimated
-                  isExpandable
                   defaultExpandedSections={[]}
                 >
-                  <StyledAccordion.Section>
-                    <StyledAccordion.Header>
-                      <StyledAccordion.Label style={{ padding: 0 }}>
-                        <UsersLabel>
-                          <WorkspacesIcon
-                            style={{
-                              color: appTheme.palette.grey[600],
-                              marginRight: appTheme.space.xs,
-                            }}
-                          />
-                          <MD isBold>
-                            {t('__PERMISSION_SETTINGS_WORKSPACE_USERS')}{' '}
-                            <Span
-                              isBold={false}
-                              style={{ color: appTheme.palette.grey[600] }}
-                            >
-                              ({workspaceCount})
-                            </Span>
-                          </MD>
-                        </UsersLabel>
-                      </StyledAccordion.Label>
-                    </StyledAccordion.Header>
-                    <StyledAccordionPanel>
+                  <AccordionNew.Section>
+                    <AccordionNew.Header
+                      icon={
+                        <ProjectsIcon
+                          style={{
+                            color: appTheme.palette.grey[600],
+                            marginRight: appTheme.space.xs,
+                          }}
+                        />
+                      }
+                    >
+                      <AccordionNew.Label
+                        label={`${t(
+                          '__PERMISSION_SETTINGS_WORKSPACE_USERS'
+                        )} (${workspaceCount})`}
+                      />
+                    </AccordionNew.Header>
+                    <AccordionNew.Panel>
                       {workspaceUsers?.items.map((user) => (
                         <UserItem key={user.id} user={user} />
                       ))}
-                    </StyledAccordionPanel>
-                  </StyledAccordion.Section>
-                </StyledAccordion>
+                    </AccordionNew.Panel>
+                  </AccordionNew.Section>
+                </AccordionNew>
               )}
             </FlexContainer>
           </Modal.Body>

src/common/components/inviteUsers/projectSettings.tsx

@@ -1,12 +1,13 @@
 import {
+  AccordionNew,
   Button,
+  getColor,
   Label,
   MD,
   Modal,
   ModalClose,
   Notification,
   Span,
-  getColor,
   useToast,
 } from '@appquality/unguess-design-system';
 import { FormikHelpers } from 'formik';
@@ -32,8 +33,6 @@ import {
   FixedBody,
   FlexContainer,
   SettingsDivider,
-  StyledAccordion,
-  StyledAccordionPanel,
   UsersContainer,
   UsersLabel,
 } from './styled';
@@ -335,42 +334,36 @@ export const ProjectSettings = () => {
                 </UsersLabel>
               )}
               {workspaceCount > 0 && (
-                <StyledAccordion
+                <AccordionNew
                   level={3}
                   key="workspace_users_accordion"
-                  isAnimated
-                  isExpandable
                   defaultExpandedSections={[]}
+                  isCompact
                 >
-                  <StyledAccordion.Section>
-                    <StyledAccordion.Header>
-                      <StyledAccordion.Label style={{ padding: 0 }}>
-                        <UsersLabel>
-                          <WorkspacesIcon
-                            style={{
-                              color: appTheme.palette.grey[600],
-                              marginRight: appTheme.space.xs,
-                            }}
-                          />
-                          <MD isBold>
-                            {t('__PERMISSION_SETTINGS_WORKSPACE_USERS')}{' '}
-                            <Span
-                              isBold={false}
-                              style={{ color: appTheme.palette.grey[600] }}
-                            >
-                              ({workspaceCount})
-                            </Span>
-                          </MD>
-                        </UsersLabel>
-                      </StyledAccordion.Label>
-                    </StyledAccordion.Header>
-                    <StyledAccordionPanel>
+                  <AccordionNew.Section>
+                    <AccordionNew.Header
+                      icon={
+                        <WorkspacesIcon
+                          style={{
+                            color: appTheme.palette.grey[600],
+                            marginRight: appTheme.space.xs,
+                          }}
+                        />
+                      }
+                    >
+                      <AccordionNew.Label
+                        label={`${t(
+                          '__PERMISSION_SETTINGS_WORKSPACE_USERS'
+                        )} (${workspaceCount})`}
+                      />
+                    </AccordionNew.Header>
+                    <AccordionNew.Panel>
                       {workspaceUsers?.items.map((user) => (
                         <UserItem key={user.id} user={user} />
                       ))}
-                    </StyledAccordionPanel>
-                  </StyledAccordion.Section>
-                </StyledAccordion>
+                    </AccordionNew.Panel>
+                  </AccordionNew.Section>
+                </AccordionNew>
               )}
             </FlexContainer>
           </Modal.Body>

src/common/components/inviteUsers/styled.tsx

@@ -1,9 +1,4 @@
-import {
-  Accordion,
-  MD,
-  Modal,
-  getColor,
-} from '@appquality/unguess-design-system';
+import { getColor, MD, Modal } from '@appquality/unguess-design-system';
 import styled from 'styled-components';
 
 export const FlexContainer = styled.div<{ isLoading?: boolean }>`
@@ -25,22 +20,6 @@ export const SettingsDivider = styled.div`
   padding-top: ${({ theme }) => theme.space.base * 6}px;
 `;
 
-export const StyledAccordion = styled(Accordion)<{
-  isDisabled?: boolean;
-}>`
-  ${({ isDisabled }) =>
-    isDisabled &&
-    `
-      opacity: 0.5;
-      pointer-events: none;
-    `}
-`;
-
-export const StyledAccordionPanel = styled(Accordion.Panel)`
-  padding: 0;
-  padding-left: ${({ theme }) => theme.space.xs};
-`;
-
 export const UsersLabel = styled(MD)`
   display: flex;
   align-items: center;

src/common/components/inviteUsers/userItem.tsx

@@ -2,10 +2,10 @@ import {
   Avatar,
   ButtonMenu,
   Ellipsis,
+  getColor,
   MD,
   SM,
   Span,
-  getColor,
 } from '@appquality/unguess-design-system';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -56,27 +56,25 @@ export const UserItem = ({
           {getInitials(user.name.length ? user.name : user.email)}
         </Avatar>
         <div>
-          <StyledEllipsis>
-            <MD
-              isBold
-              style={{
-                color: getColor(appTheme.colors.primaryHue, 600),
-              }}
-            >
+          <MD
+            isBold
+            style={{
+              color: getColor(appTheme.colors.primaryHue, 600),
+            }}
+          >
+            <StyledEllipsis>
               {user.name.length ? user.name : user.email}{' '}
               {isMe && t('__WORKSPACE_SETTINGS_CURRENT_MEMBER_YOU_LABEL')}
-            </MD>
-          </StyledEllipsis>
-          {user.name.length > 0 && (
-            <StyledEllipsis>
-              <SM
-                style={{
-                  color: appTheme.palette.grey[700],
-                }}
-              >
-                {user.email}
-              </SM>
             </StyledEllipsis>
+          </MD>
+          {user.name.length > 0 && (
+            <SM
+              style={{
+                color: appTheme.palette.grey[700],
+              }}
+            >
+              <StyledEllipsis>{user.email}</StyledEllipsis>
+            </SM>
           )}
         </div>
         {onResendInvite && onRemoveUser ? (
@@ -109,7 +107,7 @@ export const UserItem = ({
                 }}
               >
                 {user.invitationPending && (
-                  <ButtonMenu.Item value="invite" onClick={onResendInvite}>
+                  <ButtonMenu.Item value="invite">
                     {t('__WORKSPACE_SETTINGS_MEMBER_RESEND_INVITE_ACTION')}
                   </ButtonMenu.Item>
                 )}