Feature: Add aggregated negative findings summary list to org details

frontend/src/client.js

@@ -47,6 +47,11 @@ export function createCache() {
           domains: relayStylePagination(),
         },
       },
+      OrganizationSummary: {
+        fields: {
+          negativeFindings: relayStylePagination(),
+        },
+      },
       MyTrackerResult: {
         fields: {
           domains: relayStylePagination(),

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!

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>