Merge pull request #292 from uselagoon/bulkdeployment-text-render-fix

fix: overflowing bulkdeployment texts
uselagoon · Aug 7, 2024 · bb2f855 · bb2f855
2 parents ee80869 + f08a6c5
commit bb2f855
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 51 deletions.
diff --git a/src/components/BulkDeployments/index.tsx b/src/components/BulkDeployments/index.tsx
@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 
 import CancelDeployment from 'components/CancelDeployment';
 import { getDeploymentDuration } from 'components/Deployment';
+import { formatString } from 'components/DeploymentsByFilter';
 import HoverTag from 'components/HoverTag';
 import DeploymentLink from 'components/link/Deployment';
 import DeploymentsLink from 'components/link/Deployments';
@@ -49,15 +50,15 @@ const BulkDeployments: FC<BulkDeploymentsProps> = ({ deployments }) => (
         <div className="data-row" key={idx} data-deployment={deployment.id}>
           <div className="project">
             <ProjectLink projectSlug={deployment.environment.project.name}>
-              {deployment.environment.project.name}
+              {formatString(deployment.environment.project.name, 'project')}
             </ProjectLink>
           </div>
           <div className="environment">
             <DeploymentsLink
               environmentSlug={deployment.environment.openshiftProjectName}
               projectSlug={deployment.environment.project.name}
             >
-              {deployment.environment.name}
+              {formatString(deployment.environment.name, 'environment')}
             </DeploymentsLink>
           </div>
           <div className="name">

diff --git a/src/components/DeploymentsByFilter/index.js b/src/components/DeploymentsByFilter/index.js
@@ -11,6 +11,55 @@ import moment from 'moment';
 import useSortableData from '../../lib/withSortedItems';
 import { Deployments, DeploymentsDataTable, DeploymentsHeader } from './StyledDeploymentsByFilter';
 
+export const formatString = (textToEdit, labelClassToQuery) => {
+  // if the string is bigger than the data-row container, then add new lines.
+  const getTextWidth = string => {
+    // gets the width of a string that *will* be rendered
+    const canvas = new OffscreenCanvas(500, 200);
+    const context = canvas.getContext('2d');
+    context.font = getComputedStyle(document.body).font;
+    return context.measureText(string).width;
+  };
+
+  const labelWidth = document.querySelector(`.data-row > .${labelClassToQuery}`)?.getBoundingClientRect().width;
+
+  const editString = string => {
+    // find all "-" or "/" and replace with line breaks prefixed by the symbol found.
+    const regex = /[-\/]/g;
+    return string.replace(regex, match => match + '\n');
+  };
+
+  const combine = strings => {
+    let combined = '';
+    let line = '';
+
+    if (strings.length === 1) return strings[0];
+
+    for (let i = 0; i < strings.length; i++) {
+      const newLine = line + strings[i];
+      const width = getTextWidth(newLine);
+
+      if (width <= labelWidth + 30) {
+        line = newLine;
+      } else {
+        combined += line + '\n';
+        line = strings[i];
+      }
+      if (i === strings.length - 1 && getTextWidth(line) <= labelWidth + 30) {
+        combined += line;
+      } else if (i === strings.length - 1) {
+        combined += '\n' + line;
+      }
+    }
+    return combined;
+  };
+
+  if (labelWidth < getTextWidth(textToEdit)) {
+    return combine(editString(textToEdit).split('\n'));
+  }
+  return textToEdit;
+};
+
 /**
  * The primary list of running deployments.
  */
@@ -22,55 +71,6 @@ const DeploymentsByFilter = ({ deployments }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [hasFilter, setHasFilter] = useState(false);
 
-  const formatString = (textToEdit, labelClassToQuery) => {
-    // if the string is bigger than the data-row container, then add new lines.
-    const getTextWidth = string => {
-      // gets the width of a string that *will* be rendered
-      const canvas = new OffscreenCanvas(500, 200);
-      const context = canvas.getContext('2d');
-      context.font = getComputedStyle(document.body).font;
-      return context.measureText(string).width;
-    };
-
-    const labelWidth = document.querySelector(`.data-row > .${labelClassToQuery}`)?.getBoundingClientRect().width;
-
-    const editString = string => {
-      // find all "-" or "/" and replace with line breaks prefixed by the symbol found.
-      const regex = /[-\/]/g;
-      return string.replace(regex, match => match + '\n');
-    };
-
-    const combine = strings => {
-      let combined = '';
-      let line = '';
-
-      if (strings.length === 1) return strings[0];
-
-      for (let i = 0; i < strings.length; i++) {
-        const newLine = line + strings[i];
-        const width = getTextWidth(newLine);
-
-        if (width <= labelWidth + 30) {
-          line = newLine;
-        } else {
-          combined += line + '\n';
-          line = strings[i];
-        }
-        if (i === strings.length - 1 && getTextWidth(line) <= labelWidth + 30) {
-          combined += line;
-        } else if (i === strings.length - 1) {
-          combined += '\n' + line;
-        }
-      }
-      return combined;
-    };
-
-    if (labelWidth < getTextWidth(textToEdit)) {
-      return combine(editString(textToEdit).split('\n'));
-    }
-    return textToEdit;
-  };
-
   const handleSearchFilterChange = event => {
     setHasFilter(false);