Merge pull request #3843 from dlabrecq/wrapping

Platform projects table wraps names incorrectly
project-koku · May 6, 2024 · 508b6f5 · 508b6f5
2 parents 7365125 + a34871d
commit 508b6f5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/src/routes/components/dataTable/dataTable.tsx b/src/routes/components/dataTable/dataTable.tsx
@@ -155,6 +155,7 @@ class DataTable extends React.Component<DataTableProps, any> {
                   {row.cells.map((item, cellIndex) =>
                     cellIndex === 0 && isSelectable ? (
                       <Td
+                        className={item.className}
                         dataLabel={columns[cellIndex].name}
                         key={`cell-${cellIndex}-${rowIndex}`}
                         modifier="nowrap"
@@ -169,6 +170,7 @@ class DataTable extends React.Component<DataTableProps, any> {
                       />
                     ) : (
                       <Td
+                        className={item.className}
                         dataLabel={columns[cellIndex].name}
                         key={`cell-${rowIndex}-${cellIndex}`}
                         modifier="nowrap"

diff --git a/src/routes/settings/platformProjects/platformProjects.scss b/src/routes/settings/platformProjects/platformProjects.scss
@@ -0,0 +1,10 @@
+@media only screen and (min-width: 1450px) {
+  .pf-v5-c-table__td {
+     &.defaultColumn {
+       width: 70%;
+     }
+     &.groupColumn {
+       width: 20%;
+     }
+  }
+}
diff --git a/src/routes/settings/platformProjects/platformProjects.styles.ts b/src/routes/settings/platformProjects/platformProjects.styles.ts
@@ -6,21 +6,12 @@ export const styles = {
   action: {
     marginLeft: global_spacer_md.var,
   },
-  defaultColumn: {
-    width: '20%',
-  },
   descContainer: {
     backgroundColor: global_BackgroundColor_light_100.value,
     paddingLeft: global_spacer_md.value,
     paddingRight: global_spacer_md.value,
     paddingTop: global_spacer_md.value,
   },
-  groupColumn: {
-    width: '20%',
-  },
-  nameColumn: {
-    width: '1%',
-  },
   pagination: {
     backgroundColor: global_BackgroundColor_light_100.value,
     paddingBottom: global_spacer_md.value,

diff --git a/src/routes/settings/platformProjects/platformProjectsTable.tsx b/src/routes/settings/platformProjects/platformProjectsTable.tsx
@@ -1,4 +1,5 @@
 import 'routes/components/dataTable/dataTable.scss';
+import './platformProjects.scss';
 
 import { Label } from '@patternfly/react-core';
 import type { Settings, SettingsData } from 'api/settings';
@@ -8,8 +9,6 @@ import { useIntl } from 'react-intl';
 import { Cluster } from 'routes/components/cluster';
 import { DataTable } from 'routes/components/dataTable';
 
-import { styles } from './platformProjects.styles';
-
 interface PlatformProjectsTableOwnProps {
   canWrite?: boolean;
   filterBy?: any;
@@ -75,17 +74,17 @@ const PlatformProjectsTable: React.FC<PlatformProjectsTableProps> = ({
           {}, // Empty cell for row selection
           {
             value: item.project ? item.project : '',
-            style: styles.nameColumn,
           },
           {
+            className: 'defaultColumn',
             value: item.default ? <Label color="green">{intl.formatMessage(messages.default)}</Label> : null,
           },
           {
+            className: 'groupColumn',
             value:
               item.group === 'Platform' ? <Label color="green">{intl.formatMessage(messages.platform)}</Label> : null,
-            style: styles.defaultColumn,
           },
-          { value: <Cluster clusters={item.clusters} groupBy="clusters" />, style: styles.groupColumn },
+          { value: <Cluster clusters={item.clusters} groupBy="clusters" /> },
         ],
         item,
         selected: selectedItems && selectedItems.find(val => val.project === item.project) !== undefined,