Merge pull request #6942 from defaultbr/fix-big-names-in-explore-plugin

handle big names in explore plugin

plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.test.tsx

@@ -33,7 +33,7 @@ describe('<GroupsDiagram />', () => {
     });
   });
 
-  it('shows groups', async () => {
+  it('show single group', async () => {
     const catalogApi: Partial<CatalogApi> = {
       getEntities: () =>
         Promise.resolve({
@@ -66,7 +66,6 @@ describe('<GroupsDiagram />', () => {
         },
       },
     );
-
-    expect(getByText('Group A')).toBeInTheDocument();
+    expect(getByText('Group A', { selector: 'div' })).toBeInTheDocument();
   });
 });

plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx

@@ -50,8 +50,33 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
     fill: 'yellowgreen',
     stroke: theme.palette.border,
   },
+  centeredContent: {
+    padding: '10px',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'black',
+  },
+  textWrapper: {
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: 2,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: '20px',
+  },
 }));
 
+const dimensions = {
+  nodeWidth: 180,
+  nodeHeight: 90,
+  nodeCornerRadius: 20,
+  nodeAligmentShift: 5,
+};
+
 function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
   const classes = useStyles();
   const catalogEntityRoute = useRouteRef(entityRouteRef);
@@ -60,20 +85,20 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
     return (
       <g>
         <rect
-          width={180}
-          height={80}
-          rx={20}
+          width={dimensions.nodeWidth}
+          height={dimensions.nodeHeight}
+          rx={dimensions.nodeCornerRadius}
           className={classes.organizationNode}
         />
-        <text
-          x={90}
-          y={45}
-          textAnchor="middle"
-          alignmentBaseline="baseline"
-          style={{ fontWeight: 'bold' }}
+        <title>{props.node.name}</title>
+        <foreignObject
+          width={dimensions.nodeWidth}
+          height={dimensions.nodeHeight}
         >
-          {props.node.name}
-        </text>
+          <div className={classes.centeredContent}>
+            <div className={classes.textWrapper}>{props.node.name}</div>
+          </div>
+        </foreignObject>
       </g>
     );
   }
@@ -82,7 +107,14 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
 
   return (
     <g>
-      <rect width={180} height={80} rx={20} className={classes.groupNode} />
+      <rect
+        width={dimensions.nodeWidth}
+        height={dimensions.nodeHeight}
+        rx={dimensions.nodeCornerRadius}
+        className={classes.groupNode}
+      />
+      <title>{props.node.name}</title>
+
       <Link
         to={catalogEntityRoute({
           kind: ref.kind,
@@ -90,15 +122,14 @@ function RenderNode(props: DependencyGraphTypes.RenderNodeProps<any>) {
           name: ref.name,
         })}
       >
-        <text
-          x={90}
-          y={45}
-          textAnchor="middle"
-          alignmentBaseline="baseline"
-          style={{ fontWeight: 'bold' }}
+        <foreignObject
+          width={dimensions.nodeWidth}
+          height={dimensions.nodeHeight}
         >
-          {props.node.name}
-        </text>
+          <div className={classes.centeredContent}>
+            <div className={classes.textWrapper}>{props.node.name}</div>
+          </div>
+        </foreignObject>
       </Link>
     </g>
   );

plugins/explore/src/components/GroupsExplorerContent/GroupsExplorerContent.test.tsx

@@ -79,7 +79,9 @@ describe('<GroupsExplorerContent />', () => {
     );
 
     await waitFor(() => {
-      expect(getByText('my-namespace/group-a')).toBeInTheDocument();
+      expect(
+        getByText('my-namespace/group-a', { selector: 'div' }),
+      ).toBeInTheDocument();
     });
   });
 
@@ -93,7 +95,9 @@ describe('<GroupsExplorerContent />', () => {
       mountedRoutes,
     );
 
-    await waitFor(() => expect(getByText('Our Teams')).toBeInTheDocument());
+    await waitFor(() =>
+      expect(getByText('Our Teams', { selector: 'h2' })).toBeInTheDocument(),
+    );
   });
 
   it('renders a friendly error if it cannot collect domains', async () => {