feat: add show more expandable for long descriptions

Signed-off-by: Ruben Romero Montes <[email protected]>

Author: ruromero

src/main/resources/freemarker/templates/generated/main.js

@@ -8,6 +8,7 @@ import { usePrivateIssueHelper } from "../hooks/usePrivateDataHelper";
 import { hasRemediations, VulnerabilityItem } from "../api/report";
 import { useAppContext } from '../App';
 import { VulnerabilityIdLink } from './VulnerabilityIdLink';
+import { VulnerabilityTitle } from './VulnerabilityTitle';
 
 interface VulnerabilityRowProps {
   item: VulnerabilityItem;
@@ -42,7 +43,7 @@ export const VulnerabilityRow: React.FC<VulnerabilityRowProps> = ({item, provide
               <p key={index}><VulnerabilityIdLink id={id}/></p>
             ))}
           </Td>
-          <Td>{item.vulnerability.title}</Td>
+          <Td><VulnerabilityTitle title={item.vulnerability.title}/></Td>
           <Td noPadding>
             <VulnerabilitySeverityLabel vulnerability={item.vulnerability}/>
           </Td>

src/main/resources/freemarker/templates/generated/vendor.css

@@ -0,0 +1,20 @@
+import { ExpandableSection, ExpandableSectionVariant } from '@patternfly/react-core';
+import React from 'react';
+
+export const VulnerabilityTitle = ({ title }: { title: string }) => {
+
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      variant={ExpandableSectionVariant.truncate}
+      toggleText={isExpanded ? "Show less" : "Show more"}
+      onToggle={onToggle}
+      isExpanded={isExpanded}>
+      {title}
+    </ExpandableSection>
+  );
+};