feat: separate Red Hat and Community profiles for HTML report

ui/.env

@@ -1 +1,5 @@
-GENERATE_SOURCEMAP=false
+GENERATE_SOURCEMAP=false
+
+# Default branding mode when no specific profile is used
+# Options: community, redhat
+REACT_APP_BRANDING_MODE=community

ui/.env.community

@@ -0,0 +1,8 @@
+REACT_APP_BRANDING_MODE=community
+REACT_APP_BRAND_NAME=Trustify
+REACT_APP_BRAND_TITLE=Trustify Overview of security issues
+REACT_APP_REMEDIATION_TITLE=Remediations
+REACT_APP_BRAND_ICON=trustify
+REACT_APP_BRAND_URL=https://guac.sh/trustify/
+REACT_APP_EXPLORE_TITLE=Learn more about Trustify
+REACT_APP_EXPLORE_DESCRIPTION=The Trustify project is a collection of software components that enables you to store and retrieve Software Bill of Materials (SBOMs), and advisory documents.

ui/.env.redhat

@@ -0,0 +1,8 @@
+REACT_APP_BRANDING_MODE=redhat
+REACT_APP_BRAND_NAME=Red Hat
+REACT_APP_BRAND_TITLE=Red Hat Overview of security Issues
+REACT_APP_REMEDIATION_TITLE=Red Hat Remediations
+REACT_APP_BRAND_ICON=redhat
+REACT_APP_BRAND_URL=https://developers.redhat.com/products/trusted-profile-analyzer/overview
+REACT_APP_EXPLORE_TITLE=Join to explore Red Hat TPA
+REACT_APP_EXPLORE_DESCRIPTION=Check out our new Trustify to get visibility and insight into your software risk profile, for instance by exploring vulnerabilites or analyzing SBOMs.

ui/BRANDING.md

@@ -0,0 +1,65 @@
+# Branding Configuration
+
+This project supports two branding modes: **Red Hat** (enterprise) and **Community** (Trustify).
+
+## Quick Start
+
+### Prerequisites
+Install the `env-cmd` package to enable environment-specific builds:
+```bash
+npm install --save-dev env-cmd
+```
+
+### Development
+```bash
+# Start development server with Community branding (default)
+npm run start:community
+
+# Start development server with Red Hat branding
+npm run start:redhat
+```
+
+### Production Build
+```bash
+# Build Community version
+npm run build:community
+
+# Build Red Hat version
+npm run build:redhat
+```
+
+## Configuration Files
+
+### `.env.community` - Community/Trustify Version
+- Uses Trustify branding
+- Points to https://guac.sh/trustify/
+- Shows "Trustify Overview of security issues"
+- Uses Trustify icon for remediations
+
+### `.env.redhat` - Red Hat Enterprise Version
+- Uses Red Hat branding
+- Points to Red Hat developer portal
+- Shows "Red Hat Overview of security Issues"
+- Uses Red Hat icon for remediations
+- Includes "from Red Hat" in remediation text
+
+## How It Works
+
+1. **Environment Variables**: Different `.env` files define branding configuration
+2. **Branding Config**: `src/config/branding.ts` reads environment variables and provides typed configuration
+3. **Conditional Rendering**: Components use `getBrandingConfig()` to conditionally render content based on branding mode
+
+## Customizing Branding
+
+To modify branding, edit the respective `.env` file:
+
+```bash
+REACT_APP_BRANDING_MODE=community|redhat
+REACT_APP_BRAND_NAME=Your Brand Name
+REACT_APP_BRAND_TITLE=Your Overview Title
+REACT_APP_REMEDIATION_TITLE=Your Remediation Title
+REACT_APP_BRAND_ICON=icon_name
+REACT_APP_BRAND_URL=https://your-url.com
+REACT_APP_EXPLORE_TITLE=Your Explore Title
+REACT_APP_EXPLORE_DESCRIPTION=Your description text
+```

ui/package.json

@@ -26,7 +26,11 @@
   },
   "scripts": {
     "start": "craco start",
+    "start:community": "env-cmd -f .env.community craco start",
+    "start:redhat": "env-cmd -f .env.redhat craco start",
     "build": "craco build && yarn copy:js:main && yarn copy:js:vendor && yarn copy:css:main && yarn copy:css:vendor",
+    "build:community": "env-cmd -f .env.community craco build && yarn copy:js:main && yarn copy:js:vendor && yarn copy:css:main && yarn copy:css:vendor",
+    "build:redhat": "env-cmd -f .env.redhat craco build && yarn copy:js:main && yarn copy:js:vendor && yarn copy:css:main && yarn copy:css:vendor",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "copy:js:main": "cp build/static/js/main.js ../src/main/resources/freemarker/templates/generated/main.js",
@@ -60,6 +64,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-destructuring": "^7.25.9",
     "@craco/craco": "^7.1.0",
+    "env-cmd": "^10.1.0",
     "prettier": "^3.0.1"
   }
 }

ui/src/components/SummaryCard.tsx

@@ -20,10 +20,12 @@ import {
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import {ChartCard} from './ChartCard';
 import {getSourceName, getSources, Report} from '../api/report';
-import RedhatIcon from "@patternfly/react-icons/dist/esm/icons/redhat-icon";
 import SecurityCheckIcon from '../images/security-check.svg';
+import TrustifyIcon from '../images/trustify.png';
+import RedhatIcon from "@patternfly/react-icons/dist/esm/icons/redhat-icon";
 import {constructImageName, imageRemediationLink} from '../utils/utils';
 import {useAppContext} from "../App";
+import {getBrandingConfig} from '../config/branding';
 
 const hasTrustifyProvider = (obj: any): boolean => {
   return obj && typeof obj === 'object' && 'rhtpa' in obj;
@@ -32,13 +34,14 @@ const hasTrustifyProvider = (obj: any): boolean => {
 export const SummaryCard = ({report, isReportMap, purl}: { report: Report, isReportMap?: boolean, purl?: string }) => {
   const appContext = useAppContext();
   const showTrustifyCard = hasTrustifyProvider(appContext.report.providers);
+  const brandingConfig = getBrandingConfig();
 
   return (
     <Grid hasGutter>
       <Title headingLevel="h3" size={TitleSizes['2xl']} style={{paddingLeft: '15px'}}>
         <Icon isInline status="info">
           <ExclamationTriangleIcon style={{fill: "#f0ab00"}}/>
-        </Icon>&nbsp;Red Hat Overview of security Issues
+        </Icon>&nbsp;{brandingConfig.title}
       </Title>
       <Divider/>
       <GridItem>
@@ -91,9 +94,13 @@ export const SummaryCard = ({report, isReportMap, purl}: { report: Report, isRep
             <CardTitle component="h4">
               <DescriptionListTerm style={{fontSize: "large"}}>
                 <Icon isInline status="info">
-                  <RedhatIcon style={{fill: "#cc0000"}}/>
+                  {brandingConfig.mode === 'redhat' ? (
+                    <RedhatIcon style={{fill: "#cc0000"}}/>
+                  ) : (
+                    <img src={TrustifyIcon} alt="Trustify Icon" style={{width: "16px", height: "16px"}}/>
+                  )}
                 </Icon>&nbsp;
-                Red Hat Remediations
+                {brandingConfig.remediationTitle}
               </DescriptionListTerm>
             </CardTitle>
             <CardBody>
@@ -102,7 +109,7 @@ export const SummaryCard = ({report, isReportMap, purl}: { report: Report, isRep
                   <List isPlain>
                     <ListItem>
                       Switch to UBI 9 for enhanced security and enterprise-grade stability in your containerized
-                      applications, backed by Red Hat's support and compatibility assurance.
+                      applications, backed by {brandingConfig.mode === 'redhat' ? "Red Hat's support" : "enterprise-grade support"} and compatibility assurance.
                     </ListItem>
                     <ListItem>
                       <a href={purl ? imageRemediationLink(purl, report, appContext.imageMapping) : '###'}
@@ -127,7 +134,7 @@ export const SummaryCard = ({report, isReportMap, purl}: { report: Report, isRep
                           <ListItem>
                             <Icon isInline status="success">
                               <img src={SecurityCheckIcon} alt="Security Check Icon"/>
-                            </Icon>&nbsp;{source.report.summary.remediations} remediations are available from Red Hat
+                            </Icon>&nbsp;{source.report.summary.remediations} remediations are available{brandingConfig.mode === 'redhat' ? ' from Red Hat' : ''}
                             for {remediationsSrc}
                           </ListItem>
                         )
@@ -137,7 +144,7 @@ export const SummaryCard = ({report, isReportMap, purl}: { report: Report, isRep
                           <Icon isInline status="success">
                             <img src={SecurityCheckIcon} alt="Security Check Icon"/>
                           </Icon>&nbsp;
-                          There are no available Red Hat remediations for your SBOM at this time for {source.provider}
+                          There are no available{brandingConfig.mode === 'redhat' ? ' Red Hat' : ''} remediations for your SBOM at this time for {source.provider}
                         </ListItem>
                       )
                     })
@@ -155,18 +162,17 @@ export const SummaryCard = ({report, isReportMap, purl}: { report: Report, isRep
           <DescriptionListGroup>
             <CardTitle component="h4">
               <DescriptionListTerm style={{fontSize: "large"}}>
-                Join to explore Red Hat TPA
+{brandingConfig.exploreTitle}
               </DescriptionListTerm>
             </CardTitle>
             <CardBody>
               <DescriptionListDescription>
                 <List isPlain>
                   <ListItem>
-                    Check out our new Trustify to get visibility and insight into your software risk
-                    profile, for instance by exploring vulnerabilites or analyzing SBOMs.
+{brandingConfig.exploreDescription}
                   </ListItem>
                   <ListItem>
-                    <a href="https://developers.redhat.com/products/trusted-profile-analyzer/overview" target="_blank"
+                    <a href={brandingConfig.url} target="_blank"
                        rel="noopener noreferrer">
                       <Button variant="primary" size="sm">
                         Take me there

ui/src/config/branding.ts

@@ -0,0 +1,49 @@
+export interface BrandingConfig {
+  mode: 'redhat' | 'community';
+  brandName: string;
+  title: string;
+  remediationTitle: string;
+  icon: string;
+  url: string;
+  exploreTitle: string;
+  exploreDescription: string;
+}
+
+export const getBrandingConfig = (): BrandingConfig => {
+  const mode = (process.env.REACT_APP_BRANDING_MODE as 'redhat' | 'community') || 'community';
+
+  // Define defaults based on mode
+  const defaults = {
+    community: {
+      brandName: 'Trustify',
+      title: 'Trustify Overview of security issues',
+      remediationTitle: 'Remediations',
+      icon: 'trustify',
+      url: 'https://guac.sh/trustify/',
+      exploreTitle: 'Learn more about Trustify',
+      exploreDescription: 'The Trustify project is a collection of software components that enables you to store and retrieve Software Bill of Materials (SBOMs), and advisory documents.'
+    },
+    redhat: {
+      brandName: 'Red Hat',
+      title: 'Red Hat Overview of security Issues',
+      remediationTitle: 'Red Hat Remediations',
+      icon: 'redhat',
+      url: 'https://developers.redhat.com/products/trusted-profile-analyzer/overview',
+      exploreTitle: 'Join to explore Red Hat TPA',
+      exploreDescription: 'Check out our new Trustify to get visibility and insight into your software risk profile, for instance by exploring vulnerabilites or analyzing SBOMs.'
+    }
+  };
+
+  const modeDefaults = defaults[mode];
+
+  return {
+    mode,
+    brandName: process.env.REACT_APP_BRAND_NAME || modeDefaults.brandName,
+    title: process.env.REACT_APP_BRAND_TITLE || modeDefaults.title,
+    remediationTitle: process.env.REACT_APP_REMEDIATION_TITLE || modeDefaults.remediationTitle,
+    icon: process.env.REACT_APP_BRAND_ICON || modeDefaults.icon,
+    url: process.env.REACT_APP_BRAND_URL || modeDefaults.url,
+    exploreTitle: process.env.REACT_APP_EXPLORE_TITLE || modeDefaults.exploreTitle,
+    exploreDescription: process.env.REACT_APP_EXPLORE_DESCRIPTION || modeDefaults.exploreDescription
+  };
+};