Incoming bugs unread

src/pages/Campaign/widgets/BugCard.tsx

@@ -27,6 +27,7 @@ const BugCardContainer = styled(ContainerCard)<
 type BugCardArgs = {
   severity: Severities;
   children: (severity: Severities) => React.ReactNode | React.ReactElement;
+  className?: string;
 };
 
 /**
@@ -56,8 +57,9 @@ type BugCardArgs = {
  *   </BugCard>
  * ```
  */
-const BugCard = ({ children, severity }: BugCardArgs) => (
+const BugCard = ({ children, severity, className }: BugCardArgs) => (
   <BugCardContainer
+    className={className}
     borderColor={globalTheme.colors.bySeverity[severity as Severities]}
   >
     {children(severity)}

src/pages/Campaign/widgets/incomingBugs/UnreadBugs/EmptyState.tsx

@@ -0,0 +1,26 @@
+import { LG } from '@appquality/unguess-design-system';
+import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+import { ReactComponent as Empty } from './assets/empty.svg';
+
+const EmptyContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+const StyledLG = styled(LG)`
+  color: ${({ theme }) => theme.colors.primaryHue};
+`;
+const EmptyState = () => {
+  const { t } = useTranslation();
+  return (
+    <EmptyContainer>
+      <Empty style={{ width: 'auto', height: '260px' }} />
+      <StyledLG isBold>{t('__CAMPAIGN_UNREAD_NO_BUGS')}</StyledLG>
+    </EmptyContainer>
+  );
+};
+
+export { EmptyState };

src/pages/Campaign/widgets/incomingBugs/UnreadBugs/index.tsx

@@ -0,0 +1,82 @@
+import { Accordion, SM } from '@appquality/unguess-design-system';
+import styled from 'styled-components';
+
+import { useTranslation } from 'react-i18next';
+
+import { useUnreadBugs } from './useUnreadBugs';
+
+import { EmptyState } from './EmptyState';
+import { BugCard } from '../../BugCard';
+
+const StyledAccordionLabel = styled(Accordion.Label)`
+  padding-right: 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
+`;
+const UseCaseLabel = styled.div`
+  display: grid;
+  grid-template-columns: 1fr fit-content(100%);
+  align-items: center;
+`;
+const StyledBugCard = styled(BugCard)`
+  margin-bottom: ${({ theme }) => theme.space.base * 4}px;
+`;
+const StyledSM = styled(SM)`
+  color: ${({ theme }) => theme.palette.grey[600]};
+  margin-bottom: ${({ theme }) => theme.space.md};
+`;
+
+const UnreadBugs = () => {
+  const { t } = useTranslation();
+  const campaignId = 4852;
+  const { data, isLoading, isError } = useUnreadBugs(campaignId);
+
+  if (isLoading) return <>Loading...</>;
+
+  if (isError) return <EmptyState />;
+
+  return (
+    <div style={{ height: '84%', overflowY: 'scroll' }}>
+      <StyledSM>{t('__CAMPAIGN_UNREAD_BUGS_DESCRIPTION')}</StyledSM>
+      <Accordion isCompact isExpandable isAnimated={false} level={1}>
+        {data.map((usecase) => (
+          <Accordion.Section>
+            <Accordion.Header>
+              <StyledAccordionLabel>
+                <UseCaseLabel>
+                  <SM isBold>{usecase.title}</SM>
+                  <SM>{`(Non letti:${usecase.unreadCount}/${usecase.totalCount})`}</SM>
+                </UseCaseLabel>
+              </StyledAccordionLabel>
+            </Accordion.Header>
+            <Accordion.Panel>
+              {usecase.bugs.map((bug) => (
+                <StyledBugCard severity={bug.severity}>
+                  {(severity) => (
+                    <>
+                      <BugCard.TopTitle>{bug.internal_id}</BugCard.TopTitle>
+                      <BugCard.Title url={bug.url}>{bug.title}</BugCard.Title>
+                      <BugCard.Footer>
+                        {bug.titleContext &&
+                          bug.titleContext.map((context) => (
+                            <BugCard.Pill>{context}</BugCard.Pill>
+                          ))}
+                        <BugCard.Separator />
+                        <BugCard.Pill>{bug.type}</BugCard.Pill>
+                        <BugCard.Pill severity={severity}>
+                          {severity}
+                        </BugCard.Pill>
+                      </BugCard.Footer>
+                    </>
+                  )}
+                </StyledBugCard>
+              ))}
+            </Accordion.Panel>
+          </Accordion.Section>
+        ))}
+      </Accordion>
+    </div>
+  );
+};
+
+export { UnreadBugs };

src/pages/Campaign/widgets/incomingBugs/UnreadBugs/useUnreadBugs.tsx

@@ -0,0 +1,121 @@
+import { useGetCampaignsByCidBugsQuery } from 'src/features/api';
+import i18n from 'src/i18n';
+import { getLocalizedFunctionalDashboardUrl } from 'src/hooks/useLocalizeDashboardUrl';
+
+const countBugsByUsecaseId = (
+  bugs: { application_section: { id?: number } }[],
+  usecaseId: number
+) =>
+  bugs.reduce((count, bug) => {
+    if (bug.application_section.id === usecaseId) {
+      return count + 1;
+    }
+    return count;
+  }, 0);
+
+const getUsecases = (
+  bugs: { application_section: { id?: number; title?: string } }[]
+) => {
+  const useCases: { [key: number]: string } = {};
+  bugs.forEach((bug) => {
+    if (
+      bug.application_section.id &&
+      bug.application_section.title &&
+      !useCases[bug.application_section.id]
+    ) {
+      useCases[bug.application_section.id] = bug.application_section.title;
+    }
+  });
+
+  return useCases;
+};
+
+const useUnreadBugs = (
+  campaignId: number
+):
+  | { isError: true; isLoading: false; data: [] }
+  | { isLoading: true; isError: false; data: [] }
+  | {
+      isLoading: false;
+      isError: false;
+      data: {
+        title: string;
+        unreadCount: number;
+        totalCount: number;
+        bugs: {
+          severity: Severities;
+          internal_id: string;
+          title: string;
+          titleContext?: string[];
+          type: string;
+          url: string;
+        }[];
+      }[];
+    } => {
+  const {
+    data: unreadBugs,
+    isLoading: unreadBugsIsLoading,
+    isFetching: unreadBugsIsFetching,
+  } = useGetCampaignsByCidBugsQuery({
+    cid: campaignId,
+    filterBy: {
+      unread: true,
+    },
+  });
+  const {
+    data: totalBugs,
+    isLoading: totalBugsIsLoading,
+    isFetching: totalBugsIsFetching,
+  } = useGetCampaignsByCidBugsQuery({
+    cid: campaignId,
+  });
+
+  if (
+    unreadBugsIsLoading ||
+    totalBugsIsLoading ||
+    totalBugsIsFetching ||
+    unreadBugsIsFetching
+  )
+    return {
+      isLoading: true,
+      isError: false,
+      data: [],
+    };
+
+  if (!unreadBugs || !unreadBugs.items || unreadBugs.items.length === 0)
+    return {
+      isError: true,
+      isLoading: false,
+      data: [],
+    };
+
+  const items = {
+    unreadBugs: unreadBugs.items,
+    totalBugs: totalBugs && totalBugs.items ? totalBugs.items : [],
+  };
+
+  const useCases = getUsecases(unreadBugs.items);
+
+  return {
+    isLoading: false,
+    isError: false,
+    data: Object.keys(useCases).map((useCaseId) => ({
+      title: useCases[Number(useCaseId)],
+      unreadCount: countBugsByUsecaseId(items.unreadBugs, Number(useCaseId)),
+      totalCount: countBugsByUsecaseId(items.totalBugs, Number(useCaseId)),
+      bugs: items.unreadBugs.map((bug) => ({
+        severity: bug.severity.name.toLowerCase() as Severities,
+        title: bug.title.compact,
+        titleContext: bug.title.context,
+        url: `${getLocalizedFunctionalDashboardUrl(
+          campaignId,
+          i18n.language
+        )}&bug_id=${bug.id}`,
+        type: bug.type.name,
+        internal_id: bug.internal_id,
+      })),
+    })),
+  };
+};
+
+export { useUnreadBugs };

src/pages/Service/ServiceTimeline.tsx

@@ -77,7 +77,7 @@ const StepTitle = styled(XXL)`
 `;
 
 const StepParagraph = styled(Paragraph)`
-  font-weight: ${({ theme }) => theme.fontWeights.semiBold};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
   margin-bottom: ${({ theme }) => theme.space.md};
 `;
 

src/styled.d.ts

@@ -0,0 +1,7 @@
+import 'styled-components';
+import { theme } from 'src/app/theme';
+
+declare module 'styled-components' {
+  const Theme = typeof theme;
+  export interface DefaultTheme extends Theme {}
+}