release 08-05-23

craco.config.js

@@ -19,5 +19,20 @@ const resolvedAliases = Object.fromEntries(
 module.exports = {
   webpack: {
     alias: resolvedAliases,
+    configure: (webpackConfig) => {
+      webpackConfig.module.rules.push({
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
+      });
+      return webpackConfig;
+    },
+  },
+  babel: {
+    presets: ['@babel/preset-env'],
+    plugins: [
+      '@babel/plugin-proposal-optional-chaining',
+      '@babel/plugin-proposal-nullish-coalescing-operator',
+    ],
   },
 };

package.json

@@ -3,7 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
-    "@appquality/unguess-design-system": "2.12.83",
+    "@appquality/unguess-design-system": "3.0.2",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",

src/app/App.tsx

@@ -1,5 +1,5 @@
 import '../i18n';
-import { GlobalStyle } from '@appquality/unguess-design-system';
+import { GlobalStyle, ToastProvider } from '@appquality/unguess-design-system';
 import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { useTranslation } from 'react-i18next';
 import Helmet from 'react-helmet';
@@ -10,6 +10,7 @@ import { store } from './store';
 
 const App = () => {
   const { t } = useTranslation();
+
   return (
     <Provider store={store}>
       <ThemeProvider theme={theme}>
@@ -22,7 +23,21 @@ const App = () => {
           <title>UNGUESS - {t('__APP_META_PAYOFF')}</title>
           <meta name="description" content={t('__APP_META_DESCRIPTION')} />
         </Helmet>
-        <Pages />
+        <ToastProvider
+          limit={5}
+          zIndex={theme.levels.modal}
+          placementProps={{
+            top: {
+              style: {
+                top:
+                  parseInt(theme.components.chrome.header.height, 10) +
+                  theme.space.base * 4,
+              },
+            },
+          }}
+        >
+          <Pages />
+        </ToastProvider>
       </ThemeProvider>
     </Provider>
   );

src/common/Pages.tsx

@@ -15,6 +15,7 @@ import Campaign from 'src/pages/Campaign';
 import Bugs from 'src/pages/Bugs';
 import { useTranslation } from 'react-i18next';
 import Bug from 'src/pages/Bug';
+import ErrorBoundaryPage from 'src/common/components/ErrorBoundary/ErrorBoundaryPage';
 import { Redirect } from './Redirect';
 
 const Pages = () => {
@@ -28,7 +29,11 @@ const Pages = () => {
         createRoutesFromElements(
           <>
             {langPathPrefixes.map((langPrefix) => (
-              <Route path={`/${langPrefix}`} key={`react-router-${langPrefix}`}>
+              <Route
+                path={`/${langPrefix}`}
+                key={`react-router-${langPrefix}`}
+                errorElement={<ErrorBoundaryPage />}
+              >
                 <Route
                   path={`/${langPrefix}/campaigns/:campaignId`}
                   element={<Campaign />}
@@ -73,6 +78,7 @@ const Pages = () => {
                   }}
                 />
               }
+              errorElement={<ErrorBoundaryPage />}
             />
             <Route
               path="/functional-customer-dashboard"
@@ -89,6 +95,7 @@ const Pages = () => {
                   }}
                 />
               }
+              errorElement={<ErrorBoundaryPage />}
             />
             <Route path="*" element={<Navigate replace to="/oops" />} />
           </>

src/common/components/BugCard/index.tsx

@@ -30,6 +30,7 @@ const BugCardContainer = styled(ContainerCard)<
 
 type BugCardArgs = React.HTMLAttributes<HTMLDivElement> & {
   children: (severity?: Severities) => React.ReactNode | React.ReactElement;
+  url?: string;
 } & (
     | {
         severity: Severities;
@@ -40,11 +41,11 @@ type BugCardArgs = React.HTMLAttributes<HTMLDivElement> & {
 /**
  * Example:
  * ```
- *  <BugCard severity="critical">
+ *  <BugCard severity="critical" url="#">
  *    {(severity) => (
  *       <>
  *         <BugCard.TopTitle>ID 123</BugCard.TopTitle>
- *         <BugCard.Title url="#">
+ *         <BugCard.Title>
  *           Title
  *         </BugCard.Title>
  *          <BugCard.Description>
@@ -64,17 +65,33 @@ type BugCardArgs = React.HTMLAttributes<HTMLDivElement> & {
  *   </BugCard>
  * ```
  */
-const BugCard = ({ children, ...props }: BugCardArgs) => (
-  <BugCardContainer
-    {...props}
-    borderColor={
-      'severity' in props
-        ? globalTheme.colors.bySeverity[props.severity as Severities]
-        : props.borderColor
-    }
-  >
-    {'severity' in props ? children(props.severity) : children()}
-  </BugCardContainer>
+
+const StyledAnchor = styled(Anchor)<{ disabled?: boolean }>`
+  ${({ disabled }) =>
+    disabled &&
+    ` 
+    pointer-events: none;
+    cursor: default;
+    `}
+
+  &:hover {
+    text-decoration: none;
+  }
+`;
+
+const BugCard = ({ children, url, ...props }: BugCardArgs) => (
+  <StyledAnchor href={url} disabled={!url}>
+    <BugCardContainer
+      {...props}
+      borderColor={
+        'severity' in props
+          ? globalTheme.colors.bySeverity[props.severity as Severities]
+          : props.borderColor
+      }
+    >
+      {'severity' in props ? children(props.severity) : children()}
+    </BugCardContainer>
+  </StyledAnchor>
 );
 
 const StyledSM = styled(SM)`
@@ -86,26 +103,16 @@ const BugCardTopTitle = ({ children }: { children: React.ReactNode }) => (
 );
 BugCard.TopTitle = BugCardTopTitle;
 
-const BugCardTitle = ({
-  children,
-  url,
-}: {
-  children: React.ReactNode;
-  url?: string;
-}) => {
-  if (url) {
-    return (
-      <Anchor className="anchor-bug-card-title" href={url}>
-        <MD isBold>{children}</MD>
-      </Anchor>
-    );
-  }
-  return (
-    <MD style={{ color: globalTheme.palette.blue[600] }} isBold>
-      {children}
-    </MD>
-  );
-};
+const BugCardTitle = ({ children }: { children: React.ReactNode }) => (
+  <MD
+    className="anchor-bug-card-title"
+    style={{ color: globalTheme.palette.blue[600] }}
+    isBold
+  >
+    {children}
+  </MD>
+);
+
 BugCard.Title = BugCardTitle;
 
 BugCard.Footer = styled.div`

src/common/components/BugDetail/AnchorButtons.tsx

@@ -1,11 +1,12 @@
 import styled from 'styled-components';
 import { Link } from 'react-scroll';
-import { IconButton } from '@appquality/unguess-design-system';
+import { IconButton, Tooltip } from '@appquality/unguess-design-system';
 import { GetCampaignsByCidBugsAndBidApiResponse } from 'src/features/api';
 import { ReactComponent as AttachmentsIcon } from 'src/assets/icons/attachments-icon.svg';
 import { ReactComponent as DetailsIcon } from 'src/assets/icons/details-icon.svg';
 import { ReactComponent as LinkIcon } from 'src/assets/icons/linked.svg';
 import { useBugPreviewContext } from 'src/pages/Bugs/Content/context/BugPreviewContext';
+import { useTranslation } from 'react-i18next';
 
 const FlexComponent = styled.div`
   width: 100%;
@@ -25,6 +26,7 @@ export const AnchorButtons = ({
 }) => {
   const { media } = bug;
   const { openAccordions, setOpenAccordions } = useBugPreviewContext();
+  const { t } = useTranslation();
 
   return (
     <FlexComponent>
@@ -36,9 +38,19 @@ export const AnchorButtons = ({
           duration={500}
           offset={-50}
         >
-          <IconButton size="small">
-            <AttachmentsIcon />
-          </IconButton>
+          <Tooltip
+            content={t('__BUGS_PREVIEW_MEDIA_TOOLTIP_TEXT')}
+            placement="bottom"
+            type="light"
+            size="medium"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <IconButton size="small">
+              <AttachmentsIcon />
+            </IconButton>
+          </Tooltip>
         </Link>
       )}
 
@@ -52,9 +64,19 @@ export const AnchorButtons = ({
           setOpenAccordions([...openAccordions, 'details']);
         }}
       >
-        <IconButton size="small">
-          <DetailsIcon />
-        </IconButton>
+        <Tooltip
+          content={t('__BUGS_PREVIEW_TAG_TOOLTIP_TEXT')}
+          placement="bottom"
+          type="light"
+          size="medium"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <IconButton size="small">
+            <DetailsIcon />
+          </IconButton>
+        </Tooltip>
       </Link>
 
       <Link
@@ -67,9 +89,19 @@ export const AnchorButtons = ({
           setOpenAccordions([...openAccordions, 'duplicates']);
         }}
       >
-        <IconButton size="small">
-          <LinkIcon />
-        </IconButton>
+        <Tooltip
+          content={t('__BUGS_PREVIEW_RELATED_BUGS_TOOLTIP_TEXT')}
+          placement="bottom"
+          type="light"
+          size="medium"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <IconButton size="small">
+            <LinkIcon />
+          </IconButton>
+        </Tooltip>
       </Link>
     </FlexComponent>
   );

src/common/components/BugDetail/BugDuplicates/BugDuplicatesList.tsx

@@ -52,6 +52,7 @@ export const BugDuplicatesList = ({
         .slice(0, isOpen ? data.siblings.length : maxSiblingSize)
         .map((item) => (
           <BugItem
+            className="bug-overview-duplicated-bug"
             key={item.id}
             campaignId={cid}
             bugId={item.id}

src/common/components/BugDetail/BugDuplicates/BugItem.tsx

@@ -22,14 +22,19 @@ export const BugItem = ({
   bugId,
   title,
   pills,
+  className,
 }: {
   isFather?: boolean;
   campaignId: number;
   bugId: number;
   title: string;
   pills: string[];
+  className?: string;
 }) => (
-  <StyledLink to={useLocalizeRoute(`campaigns/${campaignId}/bugs/${bugId}`)}>
+  <StyledLink
+    to={useLocalizeRoute(`campaigns/${campaignId}/bugs/${bugId}`)}
+    className={className}
+  >
     <BugCard borderColor={globalTheme.palette.grey[500]}>
       {() => (
         <>

src/common/components/BugDetail/BugStateDropdown.tsx

@@ -122,7 +122,7 @@ const BugStateDropdown = ({ bug }: { bug: Bug }) => {
             itemToString: (item: DropdownItem) => item && item.slug,
           }}
         >
-          <Field>
+          <Field className="bug-dropdown-custom-status">
             {bug.status.id === 4 ? (
               <Tooltip
                 appendToNode={document.body}
@@ -148,7 +148,13 @@ const BugStateDropdown = ({ bug }: { bug: Bug }) => {
               options.map((item) => (
                 <>
                   {item.slug === 'solved' && <Separator />}
-                  <StyledItem key={item.slug} value={item}>
+                  <StyledItem
+                    key={item.slug}
+                    value={item}
+                    className={`bug-dropdown-custom-status-${item.slug
+                      .toLowerCase()
+                      .replace(/\s+/g, '-')}`}
+                  >
                     {item.icon} {item.text}
                   </StyledItem>
                 </>

src/common/components/BugDetail/Extra.tsx

@@ -91,15 +91,18 @@ export default ({ items }: { items: BugMediaType[] }) => {
         ))}
       </SM>
       {items.map((item, index) => (
-        <BugCard borderColor={getFileSpecs(item.mime_type.extension).color}>
+        <BugCard
+          borderColor={getFileSpecs(item.mime_type.extension).color}
+          url={item.url}
+        >
           {() => (
             <>
               {getFileSpecs(item.mime_type.extension).icon}
               <BugCard.Info style={{ marginLeft: globalTheme.space.sm }}>
                 <BugCard.TopTitle>
                   {item.mime_type.extension.toUpperCase()}
                 </BugCard.TopTitle>
-                <BugCard.Title url={item.url}>
+                <BugCard.Title>
                   <BugCard.Content>
                     <Span>
                       {t(

src/common/components/BugDetail/ImageCard.tsx

@@ -25,12 +25,14 @@ export default ({
   index,
   url,
   onClick,
+  className,
 }: {
   index: number;
   url: string;
   onClick?: () => void;
+  className?: string;
 }) => (
-  <ImageCard onClick={onClick}>
+  <ImageCard onClick={onClick} className={className}>
     <Preview url={url} />
     <MD isBold style={{ textAlign: 'center' }}>
       {index + 1}