feat(compliance): add compliance name, version and framework in title detailed page

api/src/backend/api/compliance.py

@@ -221,7 +221,6 @@ def generate_compliance_overview_template(prowler_compliance: dict):
 
                 # Add requirement to compliance requirements
                 compliance_requirements[requirement.Id] = requirement_dict
-
             # Build compliance dictionary
             compliance_dict = {
                 "framework": compliance_data.Framework,

ui/CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 - Support for Markdown and AdditionalURLs in findings detail page [(#8704)](https://github.com/prowler-cloud/prowler/pull/8704)
 - `Prowler Hub` menu item with tooltip [(#8692)] (https://github.com/prowler-cloud/prowler/pull/8692)
 - Copy link button to finding detail page [(#8685)] (https://github.com/prowler-cloud/prowler/pull/8685)
+- Add compliance details in compliance specific view [(#8742)](https://github.com/prowler-cloud/prowler/pull/8742)
 
 ### 🔄 Changed
 

ui/app/(prowler)/compliance/[compliancetitle]/page.tsx

@@ -89,11 +89,6 @@ export default async function ComplianceDetail({
   );
   const searchParamsKey = JSON.stringify(paramsForKey);
 
-  const formattedTitle = compliancetitle.split("-").join(" ");
-  const pageTitle = version
-    ? `Compliance Details: ${formattedTitle} - ${version}`
-    : `Compliance Details: ${formattedTitle}`;
-
   let selectedScan: ScanEntity | null = null;
 
   if (scanData) {
@@ -102,12 +97,22 @@ export default async function ComplianceDetail({
 
   const selectedScanId = scanId || selectedScan?.id || null;
 
-  const metadataInfoData = await getComplianceOverviewMetadataInfo({
-    filters: {
-      "filter[scan_id]": selectedScanId,
-    },
-  });
+  const [metadataInfoData, attributesData] = await Promise.all([
+    getComplianceOverviewMetadataInfo({
+      filters: {
+        "filter[scan_id]": selectedScanId,
+      },
+    }),
+    complianceId ? getComplianceAttributes(complianceId) : Promise.resolve(null),
+  ]);
+
   const uniqueRegions = metadataInfoData?.data?.attributes?.regions || [];
+  const complianceName = attributesData?.data?.[0]?.attributes?.compliance_name;
+  const formattedTitle = compliancetitle.split("-").join(" ");
+
+  const pageTitle = complianceName
+    ? (version ? `${complianceName} - ${version}` : complianceName)
+    : (version ? `Compliance Details: ${formattedTitle} - ${version}` : `Compliance Details: ${formattedTitle}`);
 
   return (
     <ContentLayout
@@ -155,6 +160,7 @@ export default async function ComplianceDetail({
           region={regionFilter}
           filter={cisProfileFilter}
           logoPath={logoPath}
+          attributesData={attributesData}
         />
       </Suspense>
     </ContentLayout>
@@ -167,21 +173,20 @@ const SSRComplianceContent = async ({
   region,
   filter,
   logoPath,
+  attributesData,
 }: {
   complianceId: string;
   scanId: string;
   region?: string;
   filter?: string;
   logoPath?: string;
+  attributesData: any;
 }) => {
-  const [attributesData, requirementsData] = await Promise.all([
-    getComplianceAttributes(complianceId),
-    getComplianceRequirements({
-      complianceId,
-      scanId,
-      region,
-    }),
-  ]);
+  const requirementsData = await getComplianceRequirements({
+    complianceId,
+    scanId,
+    region,
+  });
   const type = requirementsData?.data?.[0]?.type;
 
   if (!scanId || type === "tasks") {