Merge pull request #518 from AppQuality/UN-699-fix-table-responsive

UN-699-fix-table-responsive

Author: marcbon

src/common/components/BugCard/index.tsx

@@ -95,7 +95,7 @@ const BugCardTitle = ({
 }) => {
   if (url) {
     return (
-      <Anchor className="anchor-bug-card-title" href={url} target="_blank">
+      <Anchor className="anchor-bug-card-title" href={url}>
         <MD isBold>{children}</MD>
       </Anchor>
     );

src/hooks/getCampaignStatus.ts

@@ -32,15 +32,14 @@
   "__BUGS_FILTER_VIEW_ALL_LABEL": "All filters",
   "__BUGS_FILTER_VIEW_RESET_LABEL": "Reset filters",
   "__BUGS_GROUP_BY_OPEN_MENU": "Group by",
-  "__BUGS_GROUP_BY_SEVERITY": "By Severity",
-  "__BUGS_GROUP_BY_SEVERITY_ITEM": "Severity",
   "__BUGS_GROUP_BY_UNGROUPED": "Single list",
   "__BUGS_GROUP_BY_USE_CASE": "By Use Case",
   "__BUGS_GROUP_BY_USE_CASE_ITEM": "Use Case",
   "__BUGS_ORDER_BY": "Order by",
   "__BUGS_ORDER_HIGHEST_TO_LOWEST": "By highest to lowest",
   "__BUGS_ORDER_LOWEST_TO_HIGHEST": "By lowest to highest",
   "__BUGS_OS_FILTER_ITEM_NO_ITEMS": "OS",
+  "__BUGS_PAGE_BUG_CARD_DUPLICATES_LABEL": "Duplicates",
   "__BUGS_PAGE_BUG_DETAIL_ADDITIONAL_NOTES_LABEL": "Additional notes",
   "__BUGS_PAGE_BUG_DETAIL_ATTACHMENTS_DOWNLOAD_BUTTON": "Download this media",
   "__BUGS_PAGE_BUG_DETAIL_ATTACHMENTS_EXTRA_TAB_ITEM_LABEL": "File extra",
@@ -84,7 +83,6 @@
   "__BUGS_PAGE_BUG_DETAIL_TAGS_SHOW_MORE_one": "+ other {{count}}",
   "__BUGS_PAGE_BUG_DETAIL_TAGS_SHOW_MORE_other": "+ other {{count}}",
   "__BUGS_PAGE_CLOSE_DETAILS_TOOLTIP": "Close",
-  "__BUGS_PAGE_DEFAULT_SEVERITY_SORT_LABEL": "Bugs sorted by highest severity",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_ACTIONS_LABEL": "TAILORED FOR YOU",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_BUG_LABEL": "OTHER DETAILS",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_COMMON_LABEL": "MOST POPULAR",
@@ -99,6 +97,11 @@
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_SHOW_MORE_LABEL_one": "+ <2>1</2> more",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_SHOW_MORE_LABEL_other": "+ <2>{{count}}</2> more",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_TITLE": "OS",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_LESS_LABEL": "Show less",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_MORE_LABEL_one": "+ <2>1</2> more",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_MORE_LABEL_other": "+ <2>{{count}}</2> more",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITY_ALL_LABEL": "All",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITY_TITLE": "Priority",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_READ_TITLE": "Read/unread",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_REPLICABILITY_ALL_LABEL": "All",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_REPLICABILITY_SHOW_LESS_LABEL": "Show less",
@@ -110,11 +113,6 @@
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_SEVERITIES_SHOW_MORE_LABEL_other": "+ <2>{{count}}</2> more",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_SEVERITY_ALL_LABEL": "All",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_SEVERITY_TITLE": "Severity",
-  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITY_ALL_LABEL": "All",
-  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_LESS_LABEL": "Show less",
-  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_MORE_LABEL_one": "+ <2>1</2> more",
-  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_MORE_LABEL_other": "+ <2>{{count}}</2> more",
-  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITY_TITLE": "Priority",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_TAG_SHOW_LESS_LABEL": "Show less",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_TAG_SHOW_MORE_LABEL_one": "+ <2>1</2> more",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_TAG_SHOW_MORE_LABEL_other": "+ <2>{{count}}</2> more",
@@ -133,14 +131,11 @@
   "__BUGS_PAGE_FILTER_DRAWER_CONFIRM_BUTTON": "View results",
   "__BUGS_PAGE_FILTER_DRAWER_HEADER_TITLE": "All filters",
   "__BUGS_PAGE_FILTER_DRAWER_RESET_BUTTON": "Reset filters",
-  "__BUGS_PAGE_GROUPED_BY_SEVERITY_PERCENTAGE_OF_TOTAL": "<0><0>{{percentage}}%</0> of total bugs</0>",
   "__BUGS_PAGE_HEADER_UNIQUE_BUGS_ON_TOTAL": "<0><0>{{numerator}} </0><1>unique bugs</1><2>/{{denominator}} tot.</2><3> of which</3></0>",
   "__BUGS_PAGE_LIGHTBOX_TITLE": "BUG ID {{bugId}}",
   "__BUGS_PAGE_LIGHTBOX_TITLE_ATTACHMENTS_COUNT": "| Images and video attached ({{attachments}})",
   "__BUGS_PAGE_NO_USECASE": "Not a specific use case",
-  "__BUGS_PAGE_OTHER_SEVERITIES": "Other severities",
   "__BUGS_PAGE_OTHER_USE_CASES": "Other use cases",
-  "__BUGS_PAGE_SEVERITY": "Severity",
   "__BUGS_PAGE_SHARE_BUG_MODAL_CTA_ERROR_TEXT": "Something went wrong, please retry.",
   "__BUGS_PAGE_SHARE_BUG_MODAL_CTA_SUCCESS_TEXT": "Link copied",
   "__BUGS_PAGE_SHARE_BUG_MODAL_CTA_TEXT": "Copy link",
@@ -163,6 +158,7 @@
   "__BUGS_PAGE_USECASE_COMPLETION_4_TOOLTIP": "We are ready with this Use Case: view all the bugs",
   "__BUGS_PAGE_VIEW_BUG_TOOLTIP": "Open bug",
   "__BUGS_PAGE_WARNING_POSSIBLE_EMPTY_CASES": "As of now we couldn't find any more bugs in other use cases",
+  "__BUGS_PRIORITY_FILTER_ITEM_NO_ITEMS": "All priorities",
   "__BUGS_READ_FILTER_ITEM_ALL": "All bugs",
   "__BUGS_READ_FILTER_ITEM_DRAWER_ALL": "All",
   "__BUGS_READ_FILTER_ITEM_PLACEHOLDER": "Read/unread",
@@ -174,7 +170,6 @@
   "__BUGS_TABLE_DUPLICATE_HEADER_COLUMN": "Duplicates",
   "__BUGS_TABLE_PRIORITY_HEADER_COLUMN": "Priority",
   "__BUGS_TABLE_SEVERITY_HEADER_COLUMN": "Severity",
-  "__BUGS_PRIORITY_FILTER_ITEM_NO_ITEMS": "All priorities",
   "__BUGS_TABLE_TITLE_HEADER_COLUMN": "Bug",
   "__BUGS_TAGS_FILTER_ITEM_NO_ITEMS": "Tag",
   "__BUGS_TAGS_FILTER_ITEM_NO_TAGS": "No tags",
@@ -649,6 +644,8 @@
   "Devices ({{count}})_other": "Devices ({{count}})",
   "OS ({{count}})_one": "OS ({{count}})",
   "OS ({{count}})_other": "OS ({{count}})",
+  "Priority ({{count}})_one": "",
+  "Priority ({{count}})_other": "",
   "Replicability ({{count}})_one": "Replicability ({{count}})",
   "Replicability ({{count}})_other": "Replicability ({{count}})",
   "Severity ({{count}})_one": "Severity ({{count}})",

src/locales/en/translation.json

@@ -32,15 +32,14 @@
   "__BUGS_FILTER_VIEW_ALL_LABEL": "Tutti i filtri",
   "__BUGS_FILTER_VIEW_RESET_LABEL": "Cancella filtri",
   "__BUGS_GROUP_BY_OPEN_MENU": "Organizza per",
-  "__BUGS_GROUP_BY_SEVERITY": "Per gravità",
-  "__BUGS_GROUP_BY_SEVERITY_ITEM": "Gravità",
   "__BUGS_GROUP_BY_UNGROUPED": "Lista unica",
   "__BUGS_GROUP_BY_USE_CASE": "Per Use Case",
   "__BUGS_GROUP_BY_USE_CASE_ITEM": "Use Case",
   "__BUGS_ORDER_BY": "Ordina per",
   "__BUGS_ORDER_HIGHEST_TO_LOWEST": "Dalla più alta alla più bassa",
   "__BUGS_ORDER_LOWEST_TO_HIGHEST": "Dalla più bassa alla più alta",
   "__BUGS_OS_FILTER_ITEM_NO_ITEMS": "OS",
+  "__BUGS_PAGE_BUG_CARD_DUPLICATES_LABEL": "Duplicati",
   "__BUGS_PAGE_BUG_DETAIL_ADDITIONAL_NOTES_LABEL": "Altri commenti",
   "__BUGS_PAGE_BUG_DETAIL_ATTACHMENTS_DOWNLOAD_BUTTON": "Scarica questo media",
   "__BUGS_PAGE_BUG_DETAIL_ATTACHMENTS_EXTRA_TAB_ITEM_LABEL": "File extra",
@@ -88,7 +87,6 @@
   "__BUGS_PAGE_BUG_DETAIL_TAGS_SHOW_MORE_many": "",
   "__BUGS_PAGE_BUG_DETAIL_TAGS_SHOW_MORE_other": "+ altri {{count}}",
   "__BUGS_PAGE_CLOSE_DETAILS_TOOLTIP": "Chiudi",
-  "__BUGS_PAGE_DEFAULT_SEVERITY_SORT_LABEL": "Bug ordinati per gravità",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_ACTIONS_LABEL": "AZIONI FATTE DA TE",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_BUG_LABEL": "ALTRI DETTAGLI DEL BUG",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_COMMON_LABEL": "PIÙ COMUNI",
@@ -105,6 +103,12 @@
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_SHOW_MORE_LABEL_many": "Show <2>{{count}}</2> more OS",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_SHOW_MORE_LABEL_other": "+ altri <2>{{count}}</2>",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_OS_TITLE": "OS",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_LESS_LABEL": "Mostra meno",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_MORE_LABEL_one": "+ <2>1</2> altra",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_MORE_LABEL_many": "Show <2>{{count}}</2> more severities",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_MORE_LABEL_other": "+ altre <2>{{count}}</2>",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITY_ALL_LABEL": "Tutte",
+  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITY_TITLE": "Priorità",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_READ_TITLE": "Letti/non letti",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_REPLICABILITY_ALL_LABEL": "Tutte",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_REPLICABILITY_SHOW_LESS_LABEL": "Mostra meno",
@@ -118,12 +122,6 @@
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_SEVERITIES_SHOW_MORE_LABEL_other": "+ altre <2>{{count}}</2>",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_SEVERITY_ALL_LABEL": "Tutte",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_SEVERITY_TITLE": "Gravità",
-  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_LESS_LABEL": "Mostra meno",
-  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITY_ALL_LABEL": "Tutte",
-  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_MORE_LABEL_one": "+ <2>1</2> altra",
-  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_MORE_LABEL_many": "Show <2>{{count}}</2> more severities",
-  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITIES_SHOW_MORE_LABEL_other": "+ altre <2>{{count}}</2>",
-  "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_PRIORITY_TITLE": "Priorità",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_TAG_SHOW_LESS_LABEL": "Mostra meno",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_TAG_SHOW_MORE_LABEL_one": "+ <2>1</2> altro",
   "__BUGS_PAGE_FILTER_DRAWER_BODY_FILTER_TAG_SHOW_MORE_LABEL_many": "Show <2>{{count}}</2> more tags",
@@ -145,14 +143,11 @@
   "__BUGS_PAGE_FILTER_DRAWER_CONFIRM_BUTTON": "Vedi risultati",
   "__BUGS_PAGE_FILTER_DRAWER_HEADER_TITLE": "Tutti i filtri",
   "__BUGS_PAGE_FILTER_DRAWER_RESET_BUTTON": "Cancella filtri",
-  "__BUGS_PAGE_GROUPED_BY_SEVERITY_PERCENTAGE_OF_TOTAL": "<0><0>{{percentage}}%</0> dei bug totali</0>",
   "__BUGS_PAGE_HEADER_UNIQUE_BUGS_ON_TOTAL": "<0><0>{{numerator}} </0><1>bug unici</1><2>/{{denominator}} tot.</2><3> di cui</3></0>",
   "__BUGS_PAGE_LIGHTBOX_TITLE": "BUG ID {{bugId}}",
   "__BUGS_PAGE_LIGHTBOX_TITLE_ATTACHMENTS_COUNT": "| Immagini e video allegati ({{attachments}})",
   "__BUGS_PAGE_NO_USECASE": "Non un caso d'uso specifico",
-  "__BUGS_PAGE_OTHER_SEVERITIES": "Altre gravità",
   "__BUGS_PAGE_OTHER_USE_CASES": "Altri Use Case",
-  "__BUGS_PAGE_SEVERITY": "Gravità",
   "__BUGS_PAGE_SHARE_BUG_MODAL_CTA_ERROR_TEXT": "Qualcosa è andato storto, per favore riprova.",
   "__BUGS_PAGE_SHARE_BUG_MODAL_CTA_SUCCESS_TEXT": "Link copiato",
   "__BUGS_PAGE_SHARE_BUG_MODAL_CTA_TEXT": "Copia link",
@@ -175,6 +170,7 @@
   "__BUGS_PAGE_USECASE_COMPLETION_4_TOOLTIP": "Siamo pronti con lo Use Case: analizza tutti i bug raccolti",
   "__BUGS_PAGE_VIEW_BUG_TOOLTIP": "Apri il bug",
   "__BUGS_PAGE_WARNING_POSSIBLE_EMPTY_CASES": "Al momento non abbiamo trovato bug in altri Use Case oppure il test non prevede altri Use Case",
+  "__BUGS_PRIORITY_FILTER_ITEM_NO_ITEMS": "Tutte le priorità",
   "__BUGS_READ_FILTER_ITEM_ALL": "Tutti i bug",
   "__BUGS_READ_FILTER_ITEM_DRAWER_ALL": "Tutti",
   "__BUGS_READ_FILTER_ITEM_PLACEHOLDER": "Letti/non letti",
@@ -185,7 +181,6 @@
   "__BUGS_TABLE_BUG_ID_HEADER_COLUMN": "Bug ID",
   "__BUGS_TABLE_DUPLICATE_HEADER_COLUMN": "Duplicati",
   "__BUGS_TABLE_PRIORITY_HEADER_COLUMN": "Priorità",
-  "__BUGS_PRIORITY_FILTER_ITEM_NO_ITEMS": "Tutte le priorità",
   "__BUGS_TABLE_SEVERITY_HEADER_COLUMN": "Gravità",
   "__BUGS_TABLE_TITLE_HEADER_COLUMN": "Bug",
   "__BUGS_TAGS_FILTER_ITEM_NO_ITEMS": "Tag",
@@ -664,6 +659,9 @@
   "OS ({{count}})_one": "OS ({{count}})",
   "OS ({{count}})_many": "",
   "OS ({{count}})_other": "OS ({{count}})",
+  "Priority ({{count}})_one": "",
+  "Priority ({{count}})_many": "",
+  "Priority ({{count}})_other": "",
   "Replicability ({{count}})_one": "Replicabilità ({{count}})",
   "Replicability ({{count}})_many": "",
   "Replicability ({{count}})_other": "Replicabilità ({{count}})",

src/locales/it/translation.json

@@ -1,35 +1,30 @@
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch } from 'src/app/hooks';
-import { theme } from 'src/app/theme';
-import Table from 'src/common/components/Table';
-import {
-  getSelectedBugId,
-  selectBug,
-} from 'src/features/bugsPage/bugsPageSlice';
+import { theme as globalTheme } from 'src/app/theme';
+import useWindowSize from 'src/hooks/useWindowSize';
 import { TableBugType } from '../../types';
 import { InfoRow } from './components/InfoRow';
-import { mapBugsToTableData } from './utils/mapBugsToTableData';
-import { useTableColumns } from './hooks/useTableColumns';
+import UseCaseTable from './components/UseCaseTable';
+import BugCards from './components/BugCards';
 
-export const AllBugs = ({ bugs }: { bugs: TableBugType[] }) => {
-  const currentBugId = getSelectedBugId();
-  const { t } = useTranslation();
-  const { columns } = useTableColumns();
-  const dispatch = useAppDispatch();
+export const AllBugs = ({
+  campaignId,
+  bugs,
+}: {
+  campaignId: number;
+  bugs: TableBugType[];
+}) => {
+  const { width } = useWindowSize();
+
+  const breakpointMd = parseInt(globalTheme.breakpoints.md, 10);
+  const isMdBreakpoint = width < breakpointMd;
 
   return (
-    <div>
+    <>
       <InfoRow bugs={bugs} />
-      <Table
-        style={{ marginBottom: theme.space.sm, marginTop: theme.space.xs }}
-        columns={columns}
-        data={mapBugsToTableData(bugs, t)}
-        selectedRow={currentBugId ? currentBugId.toString() : null}
-        onRowClick={(bug_id) =>
-          dispatch(selectBug({ bug_id: parseInt(bug_id, 10) }))
-        }
-        isSticky
-      />
-    </div>
+      {isMdBreakpoint ? (
+        <BugCards bugs={bugs} />
+      ) : (
+        <UseCaseTable campaignId={campaignId} item={{ bugs }} />
+      )}
+    </>
   );
 };

src/pages/Bugs/Content/BugsTable/AllBugs.tsx

@@ -3,14 +3,16 @@ import { useMemo } from 'react';
 import { getSelectedFilters } from 'src/features/bugsPage/bugsPageSlice';
 import { useTranslation } from 'react-i18next';
 import { EmptyState } from './components/EmptyState';
-import SingleGroupTable from './components/SingleGroupTable';
+import UseCaseAccordion from './components/UseCaseAccordion';
 import { BugByUsecaseType } from './types';
 import { CompletionTooltip } from './components/CompletionTooltip';
 import { EmptyGroup } from './components/EmptyGroup';
 
 export const BugsByUsecase = ({
+  campaignId,
   bugsByUseCases,
 }: {
+  campaignId: number;
   bugsByUseCases: BugByUsecaseType[];
 }) => {
   const { t } = useTranslation();
@@ -45,7 +47,8 @@ export const BugsByUsecase = ({
       isBare
     >
       {useCases.map((item) => (
-        <SingleGroupTable
+        <UseCaseAccordion
+          campaignId={campaignId}
           key={item.useCase.id}
           title={
             <>

src/pages/Bugs/Content/BugsTable/BugsByUsecase.tsx

@@ -0,0 +1,75 @@
+import { Tag } from '@appquality/unguess-design-system';
+import { useTranslation } from 'react-i18next';
+import { BugCard } from 'src/common/components/BugCard';
+import { Meta } from 'src/common/components/Meta';
+import { theme as globalTheme } from 'src/app/theme';
+import { SeverityTag } from 'src/common/components/tag/SeverityTag';
+import { Bug } from 'src/features/api';
+import { getLocalizedBugUrl } from 'src/hooks/useLocalizeDashboardUrl';
+import i18n from 'src/i18n';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  margin-top: ${({ theme }) => theme.space.sm};
+`;
+
+const StyledBugCard = styled(BugCard)`
+  margin-bottom: ${({ theme }) => theme.space.base * 4}px;
+`;
+
+interface BugCardsProps {
+  bugs: (Bug & {
+    siblings: number;
+    tags?:
+      | {
+          tag_id: number;
+          tag_name: string;
+        }[]
+      | undefined;
+  })[];
+}
+
+const BugCards = ({ bugs }: BugCardsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Container>
+      {bugs.map((bug) => (
+        <StyledBugCard
+          key={bug.id}
+          severity={bug.severity.name.toLocaleLowerCase() as Severities}
+        >
+          {(severity) => (
+            <>
+              <BugCard.TopTitle>ID {bug.id}</BugCard.TopTitle>
+              <BugCard.Title
+                url={getLocalizedBugUrl(bug.campaign_id, bug.id, i18n.language)}
+              >
+                {bug.title.compact}
+              </BugCard.Title>
+              <BugCard.Footer>
+                {bug.title.context &&
+                  bug.title.context.length > 0 &&
+                  bug.title.context.map((context: string) => (
+                    <Tag key={`${bug.id}_${context}`}>{context}</Tag>
+                  ))}
+                <Tag>
+                  {t('__BUGS_PAGE_BUG_CARD_DUPLICATES_LABEL')}: {bug.siblings}
+                </Tag>
+                <Tag>{bug.type.name}</Tag>
+                {severity && <SeverityTag hasBackground severity={severity} />}
+                {!bug.read && (
+                  <Meta color={globalTheme.palette.blue[600]}>
+                    {t('__PAGE_BUGS_UNREAD_PILL', 'Unread')}
+                  </Meta>
+                )}
+              </BugCard.Footer>
+            </>
+          )}
+        </StyledBugCard>
+      ))}
+    </Container>
+  );
+};
+
+export default BugCards;