All files / src/components/common RiskLevelBadge.tsx

80% Statements 32/40
75% Branches 9/12
100% Functions 2/2
80% Lines 32/40

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86    1x 1x                                                     1x 13x 13x 13x 13x 13x   13x 1x 1x   1x   1x     13x       13x   13x 13x 13x 13x   13x         2x 2x   2x 1x 1x 1x 1x 1x   1x 1x 1x                   1x  
import React from "react";
import { StatusType } from "../../types/common/StatusTypes"; // Add this import
import { getStatusBadgeForRiskLevel } from "../../utils/riskUtils";
import StatusBadge from "./StatusBadge";
 
interface RiskLevelBadgeProps {
  /**
   * Risk level to display
   */
  risk: string;
 
  /**
   * Additional class names
   */
  className?: string;
 
  /**
   * Test ID for testing
   */
  testId?: string;
 
  /**
   * Show icon along with risk level
   */
  showIcon?: boolean;
}
 
/**
 * Badge for displaying risk levels with appropriate styling
 */
const RiskLevelBadge: React.FC<RiskLevelBadgeProps> = ({
  risk,
  className = "",
  testId = "risk-level-badge",
  showIcon = false,
}) => {
  // Handle undefined risk level
  if (!risk) {
    return (
      <StatusBadge status="neutral" className={className} testId={testId}>
        Unknown
      </StatusBadge>
    );
  }
 
  // Normalize the risk level text
  const formattedRisk = risk.includes("Risk") ? risk : `${risk} Risk`;
 
  // Get the appropriate badge status based on risk level
  // Use type assertion to ensure it's recognized as a valid StatusType
  const status = getStatusBadgeForRiskLevel(risk) as StatusType;
 
  return (
    <StatusBadge status={status} className={className} testId={testId}>
      {showIcon && getRiskIcon(risk)} {formattedRisk}
    </StatusBadge>
  );
};
 
/**
 * Get appropriate icon for risk level
 */
function getRiskIcon(risk: string): string {
  const lowercaseRisk = risk.toLowerCase();
 
  if (lowercaseRisk.includes("critical") || lowercaseRisk.includes("high")) {
    return "⚠️";
  } else if (
    lowercaseRisk.includes("medium") ||
    lowercaseRisk.includes("moderate")
  ) {
    return "⚠";
  } else if (lowercaseRisk.includes("low")) {
    return "ℹ️";
  } else if (
    lowercaseRisk.includes("minimal") ||
    lowercaseRisk.includes("none")
  ) {
    return "✓";
  }
 
  return "❓";
}
 
export default RiskLevelBadge;