UN-802-status-tag

src/common/components/BugStateIcon.tsx

@@ -1,11 +1,10 @@
 import { ReactComponent as CircleFill } from 'src/assets/icons/circle-full-fill.svg';
 import styled from 'styled-components';
 
-export const BugStateIcon = styled(CircleFill)<{ height?: string }>`
+export const BugStateIcon = styled(CircleFill)<{ size?: 'regular' | 'small' }>`
   width: auto;
   height: 100%;
-  max-height: 11px;
-  margin: 0 2px;
+  max-height: ${(p) => (p.size === 'small' ? '9px' : '11px')};
   overflow: visible;
   stroke-width: 2;
 `;

src/common/components/utils/getBugStateLabel.ts

@@ -1,6 +1,6 @@
 import { TFunction } from 'react-i18next';
 
-export const getBugStateLabel = (state: BugState, t: TFunction): string => {
+export const getBugStateLabel = (state: string, t: TFunction): string => {
   switch (state.toLowerCase()) {
     case 'to do':
       return t('__BUG_STATE_TO_DO');

src/locales/en/translation.json

@@ -37,12 +37,13 @@
   "__BUG_STATE_TO_BE_IMPORTED": "To be imported",
   "__BUG_STATE_TO_BE_RETESTED": "To be retested",
   "__BUG_STATE_TO_DO": "To do",
+  "__BUG_STATUS": "Status",
   "__BUGS_DEVICES_FILTER_ITEM_NO_ITEMS": "Devices",
   "__BUGS_FILTER_VIEW_ALL_LABEL": "All filters",
   "__BUGS_FILTER_VIEW_RESET_LABEL": "Reset filters",
   "__BUGS_GROUP_BY_OPEN_MENU": "Group by",
   "__BUGS_GROUP_BY_STATE": "By Status",
-  "__BUGS_GROUP_BY_STATE_ITEM": "Bug Status",
+  "__BUGS_GROUP_BY_STATE_ITEM": "Status",
   "__BUGS_GROUP_BY_UNGROUPED": "Single list",
   "__BUGS_GROUP_BY_USE_CASE": "By Use Case",
   "__BUGS_GROUP_BY_USE_CASE_ITEM": "Use Case",

src/locales/it/translation.json

@@ -37,6 +37,7 @@
   "__BUG_STATE_TO_BE_IMPORTED": "To be imported",
   "__BUG_STATE_TO_BE_RETESTED": "To be retested",
   "__BUG_STATE_TO_DO": "To do",
+  "__BUG_STATUS": "Stato",
   "__BUGS_DEVICES_FILTER_ITEM_NO_ITEMS": "Dispositivi",
   "__BUGS_FILTER_VIEW_ALL_LABEL": "Tutti i filtri",
   "__BUGS_FILTER_VIEW_RESET_LABEL": "Cancella filtri",

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

@@ -2,6 +2,7 @@ import { Accordion, MD } from '@appquality/unguess-design-system';
 import { useMemo } from 'react';
 import { getSelectedFilters } from 'src/features/bugsPage/bugsPageSlice';
 import { useTranslation } from 'react-i18next';
+import { getBugStateLabel } from 'src/common/components/utils/getBugStateLabel';
 import { EmptyState } from './components/EmptyState';
 import BugStateAccordion from './components/BugStateAccordion';
 import { BugByStateType } from './types';
@@ -50,10 +51,10 @@ export const BugsByState = ({
           campaignId={campaignId}
           key={item.state.id}
           title={
-            <div style={{ textTransform: 'capitalize' }}>
-              {t('__BUG_STATUS')}: {item.state.name}
+            <>
+              {t('__BUG_STATUS')}: {getBugStateLabel(item.state.name, t)}
               <MD tag="span">{` (${item.bugs.length})`}</MD>
-            </div>
+            </>
           }
           item={item}
         />

src/pages/Bugs/Content/BugsTable/components/SingleGroupTable.tsx

@@ -7,7 +7,6 @@ import {
   getSelectedBugId,
   selectBug,
 } from 'src/features/bugsPage/bugsPageSlice';
-import { useTranslation } from 'react-i18next';
 import Table from 'src/common/components/Table';
 import { TableBugType } from 'src/pages/Bugs/types';
 import { useNavigate } from 'react-router-dom';
@@ -26,7 +25,6 @@ const SingleGroupTable = ({
   item,
   isPreview,
 }: SingleGroupTableProps) => {
-  const { t } = useTranslation();
   const { width } = useWindowSize();
   const dispatch = useAppDispatch();
   const { columns } = useTableColumns();
@@ -53,7 +51,7 @@ const SingleGroupTable = ({
       isPreview && item && item.bugs.length > 3
         ? item.bugs.slice(0, 3)
         : item.bugs;
-    return mapBugsToTableData(displayBugs, t);
+    return mapBugsToTableData(displayBugs);
   }, [isPreview, item.bugs]);
 
   return (

src/pages/Bugs/Content/BugsTable/utils/mapBugsToTableData.tsx

@@ -1,5 +1,5 @@
 import { SM, Tag, Tooltip } from '@appquality/unguess-design-system';
-import { TFunction } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { theme as globalTheme } from 'src/app/theme';
 import { SeverityTag } from 'src/common/components/tag/SeverityTag';
 import { Pipe } from 'src/common/components/Pipe';
@@ -9,6 +9,8 @@ import { Meta } from 'src/common/components/Meta';
 import styled from 'styled-components';
 import { getPriorityInfo } from 'src/common/components/utils/getPriorityInfo';
 import { TextAlign } from 'src/common/components/Table';
+import { BugStateIcon } from 'src/common/components/BugStateIcon';
+import { getBugStateLabel } from 'src/common/components/utils/getBugStateLabel';
 import { BugTitle } from '../components/BugTitle';
 import { TableBugType } from '../../../types';
 
@@ -34,8 +36,9 @@ const CustomTag = styled(Tag)`
   }
 `;
 
-export const mapBugsToTableData = (bugs: TableBugType[], t: TFunction) => {
+export const mapBugsToTableData = (bugs: TableBugType[]) => {
   const currentBugId = getSelectedBugId();
+  const { t } = useTranslation();
 
   if (!bugs) return [];
   return bugs.map((bug) => {
@@ -106,13 +109,22 @@ export const mapBugsToTableData = (bugs: TableBugType[], t: TFunction) => {
                 <Tag isRegular={!isPillBold}>{bug.type.name}</Tag>
               </>
             )}
+            <Pipe size="small" />
+            <Tag isRegular={!isPillBold} hue="rgba(0,0,0,0)">
+              <Tag.Avatar>
+                <BugStateIcon
+                  size="small"
+                  {...globalTheme.colors.byBugState[
+                    bug.custom_status.name as BugState
+                  ]}
+                />
+              </Tag.Avatar>
+              {getBugStateLabel(bug.custom_status.name, t)}
+            </Tag>
             {!bug.read && (
-              <>
-                <Pipe size="small" />
-                <Meta color={globalTheme.palette.blue[600]}>
-                  {t('__PAGE_BUGS_UNREAD_PILL', 'Unread')}
-                </Meta>
-              </>
+              <Meta color={globalTheme.palette.blue[600]}>
+                {t('__PAGE_BUGS_UNREAD_PILL')}
+              </Meta>
             )}
           </div>
         </div>