Feature: Add aggregated negative findings summary list to org details (…

…#5812) * add relayStylePagination for negative finding summaries * add query * add new summary view on org details page * change label on guidance tag details to 'Findings' * add translations * add tests * update query * use client-side pagination * update tests * return only loading message when loading * get finding category from tagId * fix display limit * remove relay style pagination and unused prop
canada-ca · Oct 22, 2024 · 1987679 · 1987679
1 parent 3d2189e
commit 1987679
Show file tree

Hide file tree

Showing 7 changed files with 431 additions and 85 deletions.
diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js
@@ -734,6 +734,32 @@ export const GET_HISTORICAL_ORG_SUMMARIES = gql`
   ${Summary.fragments.requiredFields}
 `
 
+export const ORG_NEGATIVE_FINDINGS = gql`
+  query OrgAggregatedNegativeGuidance($orgSlug: Slug!) {
+    findOrganizationBySlug(orgSlug: $orgSlug) {
+      summaries {
+        negativeFindings(orderBy: { direction: DESC, field: TAG_COUNT }) {
+          guidanceTags {
+            tagId
+            tagName
+            guidance
+            refLinks {
+              description
+              refLink
+            }
+            refLinksTech {
+              description
+              refLink
+            }
+            count
+          }
+          totalCount
+        }
+      }
+    }
+  }
+`
+
 export const PAGINATED_ORG_DOMAINS = gql`
   query OrgDomainsNext(
     $slug: Slug!

diff --git a/frontend/src/guidance/GuidanceTagDetails.js b/frontend/src/guidance/GuidanceTagDetails.js
@@ -21,6 +21,16 @@ export function GuidanceTagDetails({ guidanceTag, tagType }) {
     negative: t`Negative`,
   }
 
+  const tagTypeColor = {
+    positive: 'strong',
+    informative: 'info',
+    negative: 'weak',
+  }
+
+  const getTagCategoryFromId = (tagId) => {
+    return tagId.split(/[0-9]/)[0].toUpperCase()
+  }
+
   const cccsGuidance =
     guidanceTag.refLinks[0]?.description !== null && guidanceTag.refLinks.length !== 0 ? (
       <Stack isInline={guidanceTag.refLinks.length <= 1}>
@@ -67,17 +77,16 @@ export function GuidanceTagDetails({ guidanceTag, tagType }) {
 
   return (
     <AccordionItem>
-      <Flex
-        align="center"
-        color={tagType === 'negative' ? 'weak' : tagType === 'positive' ? 'strong' : 'info'}
-        fontWeight="bold"
-        as={AccordionButton}
-        fontSize="lg"
-      >
+      <Flex align="center" color={tagTypeColor[tagType]} fontWeight="bold" as={AccordionButton} fontSize="lg">
         {tagIcon()}
-        <Text ml="2">{guidanceTag.tagName}</Text>
+        <Text ml="2">
+          {guidanceTag?.count && `${getTagCategoryFromId(guidanceTag.tagId)}: `}
+          {guidanceTag.tagName}
+        </Text>
         <AccordionIcon />
-        <Text ml="auto">{tagTypeList[tagType]?.toUpperCase()}</Text>
+        <Text ml="auto">
+          {guidanceTag?.count ? <Trans>{guidanceTag?.count} Findings</Trans> : tagTypeList[tagType]?.toUpperCase()}
+        </Text>
       </Flex>
       <AccordionPanel>
         <Box>