🐛 Truncate archatype description (#1634)

https://issues.redhat.com/browse/MTA-1921 Signed-off-by: ibolton336 <[email protected]>
konveyor · Dec 18, 2023 · d615512 · d615512
1 parent e4233f4
commit d615512
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
@@ -365,7 +365,10 @@ const Archetypes: React.FC = () => {
                         <Td {...getTdProps({ columnKey: "name" })}>
                           {archetype.name}
                         </Td>
-                        <Td {...getTdProps({ columnKey: "description" })}>
+                        <Td
+                          {...getTdProps({ columnKey: "description" })}
+                          modifier="truncate"
+                        >
                           <ArchetypeDescriptionColumn archetype={archetype} />
                         </Td>
                         <Td {...getTdProps({ columnKey: "tags" })}>

diff --git a/client/src/app/pages/archetypes/components/archetype-description-column.tsx b/client/src/app/pages/archetypes/components/archetype-description-column.tsx
@@ -1,11 +1,15 @@
 import React from "react";
-import { Text } from "@patternfly/react-core";
-
+import { Text, Tooltip } from "@patternfly/react-core";
 import type { Archetype } from "@app/api/models";
 
-// TODO: Truncate length and add tooltip with full text
 const ArchetypeDescriptionColumn: React.FC<{ archetype: Archetype }> = ({
   archetype,
-}) => <Text>{archetype.description}</Text>;
+}) => {
+  return (
+    <Tooltip content={archetype.description}>
+      <Text>{archetype.description}</Text>
+    </Tooltip>
+  );
+};
 
 export default ArchetypeDescriptionColumn;