Added new widget to campaign dash and some other improvements

.github/workflows/push.yml

@@ -51,18 +51,6 @@ jobs:
           echo "##[set-output name=img_tag;]$TAG"
         id: extract_image_tag
 
-      - name: Extract env name
-        shell: bash
-        run: |
-          TAG=$(echo ${{ steps.extract_repo_branch.outputs.branch }})
-          if [ "$TAG" != "master" ]; then
-              TAG="development"
-          else
-              TAG="production"
-          fi
-          echo "##[set-output name=img_env;]$TAG"
-        id: extract_env_tag
-
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@13d241b293754004c80624b5567555c4a39ffbe3
         with:
@@ -84,6 +72,9 @@ jobs:
           # Build a docker container and
           # push it to ECR so that it can
           # be deployed to ECS.
-          docker build --build-arg STRAPI_TOKEN=${{ secrets.STRAPI_TOKEN }} --build-arg STAGE_ENV=${{ steps.extract_env_tag.outputs.img_env }} -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
+          docker build \
+            --build-arg STRAPI_TOKEN=${{ secrets.STRAPI_TOKEN }} \
+            --build-arg STAGE_ENV="development" \
+            -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
           echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG"

.github/workflows/release.yml

@@ -7,8 +7,8 @@ on:
 
 env:
   ECR_REPOSITORY: unguess-react
-  DEPLOY_PROD_BUCKET: unguess-app-staging-source
-  DEPLOY_PROD_KEY: unguess-app-react-staging-pipeline/source.zip
+  DEPLOY_PROD_BUCKET: unguess-app-production-source
+  DEPLOY_PROD_KEY: unguess-app-react-production-pipeline/source.zip
   ASG_NAME: unguess-app-asg-unguess-app-react-production
   PIPELINE: unguess-app-react-production-pipeline-pipeline
 
@@ -28,15 +28,32 @@ jobs:
           echo "##[set-output name=ECR_REPOSITORY;]$ECR_REPOSITORY"
         id: extract_tag
 
-      - name: Docker ECR
-        uses: kciter/aws-ecr-action@v2
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@13d241b293754004c80624b5567555c4a39ffbe3
         with:
-          access_key_id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          account_id: ${{ secrets.AWS_ACCOUNT_ID }}
-          region: eu-west-1
-          repo: ${{ steps.extract_tag.outputs.ECR_REPOSITORY }}
-          tags: ${{ steps.extract_tag.outputs.tag }}
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: eu-west-1
+
+      - name: Login to Amazon ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@aaf69d68aa3fb14c1d5a6be9ac61fe15b48453a2
+
+      - name: Docker ECR
+        id: build-image
+        env:
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          ECR_REPOSITORY: ${{ steps.extract_tag.outputs.ECR_REPOSITORY }}
+          IMAGE_TAG: ${{ steps.extract_tag.outputs.tag }}
+        run: |
+          # Build a docker container and
+          # push it to ECR so that it can
+          # be deployed to ECS.
+          docker build \
+            --build-arg STRAPI_TOKEN=${{ secrets.STRAPI_TOKEN }} \
+            --build-arg STAGE_ENV="production" \
+            -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
+          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
 
   release-to-prod:
     name: Release to production

package.json

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

src/common/openUrl.tsx

@@ -0,0 +1,6 @@
+const openUrl = (url: string, options?: { newTab: boolean }): void => {
+  // eslint-disable-next-line security/detect-non-literal-fs-filename
+  window.open(url, options && options.newTab ? '_blank' : undefined);
+};
+
+export { openUrl };

src/features/navigation/Navigation.tsx

@@ -259,6 +259,7 @@ export const Navigation = ({
             // dispatch(setWorkspace(workspace));
             // window.location.reload();
           },
+          onClick: () => navigateTo('home'),
         }}
         avatar={{
           avatarType: user.picture ? 'image' : 'text',

src/locales/en/translation.json

@@ -27,9 +27,8 @@
   "__CAMPAIGN_PAGE_DEVICE_AND_BUG_TYPES_SECTION_SUBTITLE": "Check all the isolated bugs organized for devices and OS plus all the bug typologies",
   "__CAMPAIGN_PAGE_DEVICE_AND_BUG_TYPES_SECTION_TITLE": "Devices and bug types",
   "__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_FROM_DATE_TO_DATE": "<0><0>{{start_date}}</0></0> → <3><0>{{end_date}}</0></3>",
   "__CAMPAIGN_PAGE_INFO_HEADER_PLATFORM_SMARTPHONE": "Smartphone",
-  "__CAMPAIGN_PAGE_INFO_HEADER_PLATFORM_TABLET": "Tablet",
   "__CAMPAIGN_PAGE_INFO_HEADER_TEST_TIMING": "Test duration",
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_EXTERNAL_LINK_LABEL": "Go to bug list",
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_GROUP_DETAILS_LABEL": "Details",
@@ -69,6 +68,10 @@
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_LIST_HEADER_LABEL": "Total",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_LIST_TITLE": "{{total}} <2>total bugs</2>",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_OS_AND_DEVICE_CARD_TITLE": "Total bugs by device and OS",
+  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_TYPE_LIST_COLUMN_LEFT": "Typology",
+  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_TYPE_LIST_COLUMN_RIGHT": "Bugs tot.",
+  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_TYPE_LIST_HEADER_LABEL": "Total",
+  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_TYPE_LIST_TITLE": "{{total}} <2>total bugs</2>",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE": "others",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_CARD_TITLE": "Unique bugs by Use Case",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_CHART_HEADER": "Tot. bugs",
@@ -86,7 +89,6 @@
   "__CAMPAIGN_PAGE_WIDGET_PROGRESS_FOOTER": "Test duration: {{startDate}} to {{endDate}}",
   "__CAMPAIGN_PAGE_WIDGET_PROGRESS_TIME_BULLET_TITLE": "Time passed",
   "__CAMPAIGN_PAGE_WIDGET_PROGRESS_USECASE_BULLET_TITLE": "Use Case completion",
-  "__CAMPAIGN_PAGE_WIDGET_TITLE": "Overview",
   "__CAMPAIGN_PAGE_WIDGET_UNIQUE_BUGS_COUNT_LABEL_one": "{{count}} <bold>unique bug</bold>",
   "__CAMPAIGN_PAGE_WIDGET_UNIQUE_BUGS_COUNT_LABEL_other": "{{count}} <bold>unique bugs</bold>",
   "__CAMPAIGN_PAGE_WIDGET_UNIQUE_BUGS_REPORTED_BY": "Reported by testers:",
@@ -105,6 +107,7 @@
   "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOOLTIP": "Discover the impact of the unique bugs on your product. These indications keep in mind both the context and the conditions where testers have tracked the bug and help you understand the bug severity.",
   "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOTAL_LABEL_one": "out of <bold>{{total}}</bold> unique",
   "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOTAL_LABEL_other": "out of <bold>{{total}}</bold> unique",
+  "__CAMPAIGN_WIDGET_BUGS_BY_TYPE_HEADER": "Bug distribution by typology",
   "__CAMPAIGN_WIDGET_INCOMING_BUGS_EXTERNAL_LINK_LABEL": "Go to bug list",
   "__CAMPAIGN_WIDGET_INCOMING_BUGS_HEADER": "Incoming bugs",
   "__CAMPAIGN_WIDGET_INCOMING_BUGS_MOST_SUBMITTED_DESCRIPTION": "Le issue che si sono verificate più volte",

src/locales/it/translation.json

@@ -29,9 +29,8 @@
   "__CAMPAIGN_PAGE_DEVICE_AND_BUG_TYPES_SECTION_SUBTITLE": "Visualizza i bug unici divisi per dispositivi e sistemi operativi e le tipologie di tutti i bug segnalati",
   "__CAMPAIGN_PAGE_DEVICE_AND_BUG_TYPES_SECTION_TITLE": "Dispositivi e tipologie bug",
   "__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_FROM_DATE_TO_DATE": "<0><0>{{start_date}}</0></0> → <3><0>{{end_date}}</0></3>",
   "__CAMPAIGN_PAGE_INFO_HEADER_PLATFORM_SMARTPHONE": "Smartphone",
-  "__CAMPAIGN_PAGE_INFO_HEADER_PLATFORM_TABLET": "Tablet",
   "__CAMPAIGN_PAGE_INFO_HEADER_TEST_TIMING": "Durata test",
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_EXTERNAL_LINK_LABEL": "Vai alla lista bug",
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_GROUP_DETAILS_LABEL": "Dettagli",
@@ -41,8 +40,8 @@
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OTHER_REPORTS_LABEL": "Report & allegati",
   "__CAMPAIGN_PAGE_NAVIGATION_BUG_ITEM_OVERVIEW_LABEL": "Panoramica",
   "__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_DOWNLOAD_LABEL": "Scarica ora",
+  "__CAMPAIGN_PAGE_REPORTS_CARDS_OPEN_LINK_LABEL": "Apri link",
   "__CAMPAIGN_PAGE_REPORTS_CARDS_UPDATED_ON_LABEL": "Ultima modifica:",
   "__CAMPAIGN_PAGE_REPORTS_CARDS_UPLOADED_ON_LABEL": "Caricato il",
   "__CAMPAIGN_PAGE_REPORTS_DESCRIPTION": "Qui puoi trovare tutti i materiali relativi alla tua campagna",
@@ -66,29 +65,32 @@
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_CHART_HEADER": "Tot. bug",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_CHART_TOOLTIP_DRILLDOWN": "👉 Visualizza dettaglio di:",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_CHART_TOOLTIP_VALUE": "Bug: {{value}}",
-  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_LIST_COLUMN_LEFT": "Device",
+  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_LIST_COLUMN_LEFT": "Dispositivo",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_LIST_COLUMN_RIGHT": "Bug su tot.",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_LIST_HEADER_LABEL": "Totale",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_DEVICE_LIST_TITLE": "{{total}} <2>bug totali</2>",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_OS_AND_DEVICE_CARD_TITLE": "Bug totali per dispositivo e OS",
-  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE": "others",
+  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_TYPE_LIST_COLUMN_LEFT": "Tipologia",
+  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_TYPE_LIST_COLUMN_RIGHT": "Bug su tot.",
+  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_TYPE_LIST_HEADER_LABEL": "Distribuzione bug per tipologia",
+  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_TYPE_LIST_TITLE": "{{total}} <2>bug totali</2>",
+  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE": "altri",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_CARD_TITLE": "Bug unici per Use Case",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_CHART_HEADER": "Tot. bug",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_COLUMN_LEFT": "Use Case",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_COLUMN_RIGHT": "Bug su tot.",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_LIST_CONTENT": "bug totali",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_LIST_HEADER": "Totale",
-  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_TOOLTIP_UNIQUE_BUGS_LABEL": "Unique bugs:",
+  "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_TOOLTIP_UNIQUE_BUGS_LABEL": "Bug unici:",
   "__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_TOOLTIP_USECASE_LABEL": "Use Case: ",
   "__CAMPAIGN_PAGE_WIDGET_PROGRESS_CARD_TITLE": "Stato",
   "__CAMPAIGN_PAGE_WIDGET_PROGRESS_CARD_TOOLTIP": "Tieni sotto controllo gli use case completati dai tester, quanto tempo è passato dall’inizio della campagna e quanto manca alla fine.",
-  "__CAMPAIGN_PAGE_WIDGET_PROGRESS_DESCRIPTION_FOOTER": "over <bold>{{ expectedDuration }}</bold> expected",
+  "__CAMPAIGN_PAGE_WIDGET_PROGRESS_DESCRIPTION_FOOTER": "su un totale stimato di <bold>{{ expectedDuration }}</bold>",
   "__CAMPAIGN_PAGE_WIDGET_PROGRESS_DESCRIPTION_HEADER_ACTIVE": "La campagna è attiva da:",
   "__CAMPAIGN_PAGE_WIDGET_PROGRESS_DESCRIPTION_HEADER_FINISHED": "La campagna è stata attiva per:",
   "__CAMPAIGN_PAGE_WIDGET_PROGRESS_FOOTER": "Dal {{startDate}} al {{endDate}}",
   "__CAMPAIGN_PAGE_WIDGET_PROGRESS_TIME_BULLET_TITLE": "Tempo trascorso",
   "__CAMPAIGN_PAGE_WIDGET_PROGRESS_USECASE_BULLET_TITLE": "Avanzamento Use Case",
-  "__CAMPAIGN_PAGE_WIDGET_TITLE": "Panoramica",
   "__CAMPAIGN_PAGE_WIDGET_UNIQUE_BUGS_COUNT_LABEL_one": "{{count}} <bold>bug unico</bold>",
   "__CAMPAIGN_PAGE_WIDGET_UNIQUE_BUGS_COUNT_LABEL_many": "{{count}} <bold>bug unici</bold>",
   "__CAMPAIGN_PAGE_WIDGET_UNIQUE_BUGS_COUNT_LABEL_other": "{{count}} <bold>bug unici</bold>",
@@ -108,9 +110,10 @@
   "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_GOTOLIST_LINK": "Vai alla lista bug",
   "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_HEADER": "bug {{severity}}",
   "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOOLTIP": "Scopri l’impatto dei bug unici sull’uso del tuo prodotto. Queste indicazioni tengono conto del contesto e delle condizioni in cui i tester hanno riscontrato il problema e ti aiutano a capire la gravità del bug.",
-  "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOTAL_LABEL_one": "out of <bold>{{total}}</bold> unique",
-  "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOTAL_LABEL_many": "out of <bold>{{total}}</bold> unique",
-  "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOTAL_LABEL_other": "out of <bold>{{total}}</bold> unique",
+  "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOTAL_LABEL_one": "su <bold>{{total}}</bold> unico",
+  "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOTAL_LABEL_many": "su <bold>{{total}}</bold> unici",
+  "__CAMPAIGN_WIDGET_BUGDISTRIBUTION_TOTAL_LABEL_other": "su <bold>{{total}}</bold> unici",
+  "__CAMPAIGN_WIDGET_BUGS_BY_TYPE_HEADER": "Distribuzione bug per tipologia",
   "__CAMPAIGN_WIDGET_INCOMING_BUGS_EXTERNAL_LINK_LABEL": "Vai alla lista bug",
   "__CAMPAIGN_WIDGET_INCOMING_BUGS_HEADER": "Bug in arrivo",
   "__CAMPAIGN_WIDGET_INCOMING_BUGS_MOST_SUBMITTED_DESCRIPTION": "Le issue che si sono verificate più volte",

src/pages/Campaign/ReportRow.tsx

@@ -85,85 +85,93 @@ export const ReportRow = ({
   const { id: campaignId, customer_title } = campaign;
 
   return (
-    <Row id="reports" style={{ marginBottom: theme.space.xxl }}>
-      {(reports && reports.length) || isFunctional ? (
-        <Col xs={12}>
-          <SectionTitle
-            title={t('__CAMPAIGN_PAGE_REPORTS_TITLE')}
-            subtitle={t('__CAMPAIGN_PAGE_REPORTS_DESCRIPTION')}
-          />
-        </Col>
-      ) : null}
-      {isFunctional && (
-        <Col xs={12} md={4} lg={3}>
-          <BugsReportCard campaignId={campaignId} title={customer_title} />
-        </Col>
-      )}
-      {reports && reports.length
-        ? reports.map((report) => (
-            <Col xs={12} md={4} lg={3}>
-              <SpecialCard>
-                <SpecialCard.Meta
-                  justifyContent="start"
-                  style={{ fontSize: theme.fontSizes.sm }}
-                >
-                  {report.update_date ? (
-                    <>
-                      {t('__CAMPAIGN_PAGE_REPORTS_CARDS_UPDATED_ON_LABEL')}{' '}
-                      {format(new Date(report.update_date), 'dd/MM/yyyy')}
-                    </>
-                  ) : (
-                    <>
-                      {t('__CAMPAIGN_PAGE_REPORTS_CARDS_UPLOADED_ON_LABEL')}{' '}
-                      {format(
-                        new Date(report.creation_date ?? ''),
-                        'dd/MM/yyyy'
-                      )}
-                    </>
-                  )}
-                </SpecialCard.Meta>
+    <div style={{ minHeight: '100vh' }}>
+      <Row id="reports">
+        {(reports && reports.length) || isFunctional ? (
+          <Col xs={12}>
+            <SectionTitle
+              title={t('__CAMPAIGN_PAGE_REPORTS_TITLE')}
+              subtitle={t('__CAMPAIGN_PAGE_REPORTS_DESCRIPTION')}
+            />
+          </Col>
+        ) : null}
+        {isFunctional && (
+          <Col xs={12} md={4} lg={3}>
+            <BugsReportCard campaignId={campaignId} title={customer_title} />
+          </Col>
+        )}
+        {reports && reports.length
+          ? reports.map((report) => (
+              <Col xs={12} md={4} lg={3}>
+                <SpecialCard>
+                  <SpecialCard.Meta
+                    justifyContent="start"
+                    style={{ fontSize: theme.fontSizes.sm }}
+                  >
+                    {report.update_date ? (
+                      <>
+                        {t('__CAMPAIGN_PAGE_REPORTS_CARDS_UPDATED_ON_LABEL')}{' '}
+                        {format(new Date(report.update_date), 'dd/MM/yyyy')}
+                      </>
+                    ) : (
+                      <>
+                        {t('__CAMPAIGN_PAGE_REPORTS_CARDS_UPLOADED_ON_LABEL')}{' '}
+                        {format(
+                          new Date(report.creation_date ?? ''),
+                          'dd/MM/yyyy'
+                        )}
+                      </>
+                    )}
+                  </SpecialCard.Meta>
 
-                <SpecialCard.Thumb>
-                  {getFileTypeIcon(report.file_type?.type ?? '', report.url)}
-                </SpecialCard.Thumb>
+                  <SpecialCard.Thumb>
+                    {getFileTypeIcon(report.file_type?.type ?? '', report.url)}
+                  </SpecialCard.Thumb>
 
-                <SpecialCard.Header>
-                  <SpecialCard.Header.Label>
-                    {getFileTypeName(report.file_type?.type ?? '', report.url)}
-                  </SpecialCard.Header.Label>
-                  <SpecialCard.Header.Title>
-                    {report.title}
-                  </SpecialCard.Header.Title>
-                </SpecialCard.Header>
+                  <SpecialCard.Header>
+                    <SpecialCard.Header.Label>
+                      {getFileTypeName(
+                        report.file_type?.type ?? '',
+                        report.url
+                      )}
+                    </SpecialCard.Header.Label>
+                    <SpecialCard.Header.Title>
+                      {report.title}
+                    </SpecialCard.Header.Title>
+                  </SpecialCard.Header>
 
-                <SpecialCard.Footer direction="column" justifyContent="center">
-                  <Button
-                    className={`report-btn report-btn-${
-                      report.file_type?.type === 'link' ? 'link' : 'download'
-                    } report-btn-${report.file_type?.type ?? ''}`}
-                    isPill
-                    isStretched
-                    onClick={() => {
-                      // eslint-disable-next-line security/detect-non-literal-fs-filename
-                      window.open(report.url || '', '_blank');
-                    }}
+                  <SpecialCard.Footer
+                    direction="column"
+                    justifyContent="center"
                   >
-                    <Button.StartIcon>
-                      {report.file_type?.type === 'link' ? (
-                        <OpenLinkIcon />
-                      ) : (
-                        <DownloadIcon />
-                      )}
-                    </Button.StartIcon>
-                    {report.file_type?.type === 'link'
-                      ? t('__CAMPAIGN_PAGE_REPORTS_CARDS_OPEN_LINK_LABEL')
-                      : t('__CAMPAIGN_PAGE_REPORTS_CARDS_DOWNLOAD_LABEL')}
-                  </Button>
-                </SpecialCard.Footer>
-              </SpecialCard>
-            </Col>
-          ))
-        : null}
-    </Row>
+                    <Button
+                      className={`report-btn report-btn-${
+                        report.file_type?.type === 'link' ? 'link' : 'download'
+                      } report-btn-${report.file_type?.type ?? ''}`}
+                      isPill
+                      isStretched
+                      onClick={() => {
+                        // eslint-disable-next-line security/detect-non-literal-fs-filename
+                        window.open(report.url || '', '_blank');
+                      }}
+                    >
+                      <Button.StartIcon>
+                        {report.file_type?.type === 'link' ? (
+                          <OpenLinkIcon />
+                        ) : (
+                          <DownloadIcon />
+                        )}
+                      </Button.StartIcon>
+                      {report.file_type?.type === 'link'
+                        ? t('__CAMPAIGN_PAGE_REPORTS_CARDS_OPEN_LINK_LABEL')
+                        : t('__CAMPAIGN_PAGE_REPORTS_CARDS_DOWNLOAD_LABEL')}
+                    </Button>
+                  </SpecialCard.Footer>
+                </SpecialCard>
+              </Col>
+            ))
+          : null}
+      </Row>
+    </div>
   );
 };