Fix/pre release

src/locales/en/translation.json

@@ -22,7 +22,8 @@
   "__BUG_SEVERITY_LOW": "low",
   "__BUG_SEVERITY_MEDIUM": "medium",
   "__CAMPAIGN_CARD_EMPTY_TITLE_LABEL": "Untitled",
-  "__CAMPAIGN_PAGE_BUTTON_DETAIL_BUG": "Go to Bug detail",
+  "__CAMPAIGN_PAGE_BUTTON_DETAIL_BUG": "Go to bug detail",
+  "__CAMPAIGN_PAGE_BUTTON_DETAIL_MEDIA": "Go to media detail",
   "__CAMPAIGN_PAGE_INFO_HEADER_DESKTOP": "Desktop",
   "__CAMPAIGN_PAGE_INFO_HEADER_FROM_DATE_TO_DATE": "<0><0>{{start_date}}</0></0> to <3><0>{{end_date}}</0></3>",
   "__CAMPAIGN_PAGE_INFO_HEADER_PLATFORM_SMARTPHONE": "Smartphone",
@@ -36,6 +37,7 @@
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_DETAILS_UNIQUE_BUGS_LABEL": "Unique bugs distribution",
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OTHER_REPORTS_LABEL": "Reports & attachments",
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OVERVIEW_LABEL": "Campaign overview",
+  "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_EXTERNAL_LINK_LABEL": "Media detail",
   "__CAMPAIGN_PAGE_REPORTS_CARDS_DOWNLOAD_LABEL": "Download now",
   "__CAMPAIGN_PAGE_REPORTS_CARDS_OPEN_LINK_LABEL": "Open link",
   "__CAMPAIGN_PAGE_REPORTS_CARDS_UPDATED_ON_LABEL": "Last edit",

src/locales/it/translation.json

@@ -25,6 +25,7 @@
   "__BUG_SEVERITY_MEDIUM": "medium",
   "__CAMPAIGN_CARD_EMPTY_TITLE_LABEL": "Senza Titolo",
   "__CAMPAIGN_PAGE_BUTTON_DETAIL_BUG": "Vai al dettaglio bug",
+  "__CAMPAIGN_PAGE_BUTTON_DETAIL_MEDIA": "Vai al dettaglio media",
   "__CAMPAIGN_PAGE_INFO_HEADER_DESKTOP": "Desktop",
   "__CAMPAIGN_PAGE_INFO_HEADER_FROM_DATE_TO_DATE": "<0><0>{{start_date}}</0></0> to <3><0>{{end_date}}</0></3>",
   "__CAMPAIGN_PAGE_INFO_HEADER_PLATFORM_SMARTPHONE": "Smartphone",
@@ -38,6 +39,7 @@
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_DETAILS_UNIQUE_BUGS_LABEL": "Distribuzione bug unici",
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OTHER_REPORTS_LABEL": "Report & allegati",
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OVERVIEW_LABEL": "Overview campagna",
+  "__CAMPAIGN_PAGE_NAVIGATION_MEDIA_EXTERNAL_LINK_LABEL": "Dettaglio media",
   "__CAMPAIGN_PAGE_REPORTS_CARDS_DOWNLOAD_LABEL": "Download now",
   "__CAMPAIGN_PAGE_REPORTS_CARDS_OPEN_LINK_LABEL": "Open link",
   "__CAMPAIGN_PAGE_REPORTS_CARDS_UPDATED_ON_LABEL": "Ultima modifica:",

src/pages/Campaign/navigation/bugs/ExternalLink.tsx

@@ -1,27 +1,29 @@
 import { Anchor } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
-import { StyledDivider } from 'src/common/components/navigation';
 import { getLocalizedFunctionalDashboardUrl } from 'src/hooks/useLocalizeDashboardUrl';
 import i18n from 'src/i18n';
+import styled from 'styled-components';
+
+const StyledAnchor = styled(Anchor)`
+  display: block;
+  margin-bottom: ${({ theme }) => theme.space.sm};
+`;
 
 export const BugsNavigationLink = ({ campaignId }: { campaignId: number }) => {
   const { t } = useTranslation();
 
   return (
-    <>
-      <StyledDivider />
-      <Anchor
-        isExternal
-        onClick={() => {
-          // eslint-disable-next-line security/detect-non-literal-fs-filename
-          window.open(
-            getLocalizedFunctionalDashboardUrl(campaignId, i18n.language),
-            '_blank'
-          );
-        }}
-      >
-        {t('__CAMPAIGN_PAGE_NAVIGATION_BUG_EXTERNAL_LINK_LABEL')}
-      </Anchor>
-    </>
+    <StyledAnchor
+      isExternal
+      onClick={() => {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
+        window.open(
+          getLocalizedFunctionalDashboardUrl(campaignId, i18n.language),
+          '_blank'
+        );
+      }}
+    >
+      {t('__CAMPAIGN_PAGE_NAVIGATION_BUG_EXTERNAL_LINK_LABEL')}
+    </StyledAnchor>
   );
 };

src/pages/Campaign/navigation/bugs/Navigation.tsx

@@ -19,10 +19,11 @@ export const BugsNavigation = () => {
       >
         {t('__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OVERVIEW_LABEL')}
       </StickyNavItem>
-      <StickyNavItemLabel>
+      <StickyNavItemLabel style={{ display: 'none' }}>
         {t('__CAMPAIGN_PAGE_NAVIGATION_BUG_GROUP_DETAILS_LABEL')}
       </StickyNavItemLabel>
       <StickyNavItem
+        style={{ display: 'none' }}
         to="unique-bug-distribution"
         containerId="main"
         spy
@@ -33,6 +34,7 @@ export const BugsNavigation = () => {
         {t('__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_DETAILS_UNIQUE_BUGS_LABEL')}
       </StickyNavItem>
       <StickyNavItem
+        style={{ display: 'none' }}
         to="devices-and-types"
         containerId="main"
         spy

src/pages/Campaign/navigation/index.tsx

@@ -2,11 +2,13 @@ import { useTranslation } from 'react-i18next';
 import {
   StickyNavItem,
   StickyNavItemLabel,
+  StyledDivider,
 } from 'src/common/components/navigation';
 import { CampaignWithOutput, Report } from 'src/features/api';
 import { StickyContainer } from 'src/common/components/StickyContainer';
 import { BugsNavigation, BugsNavigationLink } from './bugs';
 import { NavigationLoading } from './NavigationLoading';
+import { MediaNavigation, MediaNavigationLink } from './media';
 
 const Navigation = ({
   campaignId,
@@ -24,6 +26,7 @@ const Navigation = ({
   return (
     <StickyContainer>
       {outputs?.includes('bugs') && <BugsNavigation />}
+      {outputs?.includes('media') && <MediaNavigation />}
       {reports.length || isFunctional ? (
         <>
           <StickyNavItemLabel>
@@ -41,9 +44,15 @@ const Navigation = ({
           </StickyNavItem>
         </>
       ) : null}
+      {(outputs?.includes('bugs') || outputs?.includes('media')) && (
+        <StyledDivider />
+      )}
       {outputs?.includes('bugs') && (
         <BugsNavigationLink campaignId={campaignId} />
       )}
+      {outputs?.includes('media') && (
+        <MediaNavigationLink campaignId={campaignId} />
+      )}
     </StickyContainer>
   );
 };

src/pages/Campaign/navigation/media/ExternalLink.tsx

@@ -0,0 +1,29 @@
+import { Anchor } from '@appquality/unguess-design-system';
+import { useTranslation } from 'react-i18next';
+import { getLocalizedUXDashboardUrl } from 'src/hooks/useLocalizeDashboardUrl';
+import i18n from 'src/i18n';
+import styled from 'styled-components';
+
+const StyledAnchor = styled(Anchor)`
+  display: block;
+  margin-bottom: ${({ theme }) => theme.space.sm};
+`;
+
+export const MediaNavigationLink = ({ campaignId }: { campaignId: number }) => {
+  const { t } = useTranslation();
+
+  return (
+    <StyledAnchor
+      isExternal
+      onClick={() => {
+        // eslint-disable-next-line security/detect-non-literal-fs-filename
+        window.open(
+          getLocalizedUXDashboardUrl(campaignId, i18n.language),
+          '_blank'
+        );
+      }}
+    >
+      {t('__CAMPAIGN_PAGE_NAVIGATION_MEDIA_EXTERNAL_LINK_LABEL')}
+    </StyledAnchor>
+  );
+};

src/pages/Campaign/navigation/media/Navigation.tsx

@@ -0,0 +1 @@
+export const MediaNavigation = () => <div />;

src/pages/Campaign/navigation/media/index.ts

@@ -0,0 +1,4 @@
+import { MediaNavigation } from './Navigation';
+import { MediaNavigationLink } from './ExternalLink';
+
+export { MediaNavigation, MediaNavigationLink };

src/pages/Campaign/pageHeader/Pills.tsx

@@ -21,7 +21,10 @@ import { ReactComponent as IncomingIcon } from 'src/assets/icons/pill-icon-incom
 import { ReactComponent as CompletedIcon } from 'src/assets/icons/pill-icon-completed.svg';
 import { ReactComponent as GearIcon } from 'src/assets/icons/pill-icon-gear.svg';
 import { format } from 'date-fns';
-import { getLocalizedFunctionalDashboardUrl } from 'src/hooks/useLocalizeDashboardUrl';
+import {
+  getLocalizedFunctionalDashboardUrl,
+  getLocalizedUXDashboardUrl,
+} from 'src/hooks/useLocalizeDashboardUrl';
 import i18n from 'src/i18n';
 
 const Pipe = styled.span`
@@ -44,14 +47,19 @@ const FooterContainer = styled.div`
   align-items: center;
   width: 100%;
 `;
-const ButtonWrapper = styled.div``;
+const ButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+`;
 
 const PillsWrapper = styled.div`
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-direction: row;
+  flex-wrap: wrap;
 `;
 
 function capitalizeFirstLetter(string: string) {
@@ -108,6 +116,7 @@ export const Pills = ({ campaign }: { campaign: CampaignWithOutput }) => {
   }
 
   if (isLoading || isFetching) return <Skeleton width="200px" height="20px" />;
+
   return (
     <FooterContainer>
       <PillsWrapper>
@@ -178,6 +187,23 @@ export const Pills = ({ campaign }: { campaign: CampaignWithOutput }) => {
             {t('__CAMPAIGN_PAGE_BUTTON_DETAIL_BUG')}
           </Button>
         )}
+        {outputs?.includes('media') && (
+          <Button
+            isPrimary
+            isPill
+            themeColor={globalTheme.palette.water[600]}
+            onClick={() =>
+              // eslint-disable-next-line security/detect-non-literal-fs-filename
+              window.open(
+                getLocalizedUXDashboardUrl(campaign.id, i18n.language),
+                '_blank'
+              )
+            }
+            style={{ marginLeft: globalTheme.space.xs }}
+          >
+            {t('__CAMPAIGN_PAGE_BUTTON_DETAIL_MEDIA')}
+          </Button>
+        )}
       </ButtonWrapper>
     </FooterContainer>
   );