Merge pull request #3159 from dlabrecq/data-table-column

Adjust last column padding
project-koku · May 9, 2023 · 0d0b04b · 0d0b04b
2 parents d8c510b + 4cf2a05
commit 0d0b04b
Show file tree

Hide file tree

Showing 11 changed files with 18 additions and 8 deletions.
diff --git a/src/routes/settings/tagDetails/tagTable.tsx b/src/routes/settings/tagDetails/tagTable.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
 import { DataTable } from 'routes/views/details/components/dataTable';
+import { styles } from 'routes/views/details/components/dataTable/dataTable.styles';
 import type { ComputedReportItem } from 'utils/computedReport/getComputedReportItems';
 import { getUnsortedComputedReportItems } from 'utils/computedReport/getComputedReportItems';
 import type { RouterComponentProps } from 'utils/router';
@@ -85,6 +86,7 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
         orderBy: 'source_type',
         name: intl.formatMessage(messages.sourceType),
         ...(computedItems.length && { isSortable: true }),
+        style: styles.lastItemColumn,
       },
     ];
 
@@ -104,7 +106,7 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
               </Label>
             ),
           },
-          { value: 'source type' },
+          { value: 'source type', style: styles.lastItem },
         ],
         item,
         selected: isAllSelected || (selectedItems && selectedItems.find(val => val.id === item.id) !== undefined),

diff --git a/src/routes/views/components/optimizations/optimizationsTable.tsx b/src/routes/views/components/optimizations/optimizationsTable.tsx
@@ -105,7 +105,7 @@ class OptimizationsTableBase extends React.Component<OptimizationsTableProps, Op
       {
         name: intl.formatMessage(messages.optimizationsNames, { value: 'last_reported' }),
         orderBy: 'last_reported',
-        style: styles.lastReportedColumn,
+        style: styles.lastItemColumn,
         ...(hasData && { isSortable: true }),
       },
     ];
@@ -126,7 +126,7 @@ class OptimizationsTableBase extends React.Component<OptimizationsTableProps, Op
             { value: workload },
             { value: workloadType },
             { value: cluster, hidden: groupBy === 'cluster' },
-            { value: lastReported, style: styles.lastReported },
+            { value: lastReported, style: styles.lastItem },
           ],
           optimization: {
             container: item.container,

diff --git a/src/routes/views/details/awsDetails/detailsTable.tsx b/src/routes/views/details/awsDetails/detailsTable.tsx
@@ -286,6 +286,7 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
     return (
       <DataTable
         columns={columns}
+        isActionsCell
         isLoading={isLoading}
         onSelected={onSelected}
         onSort={onSort}

diff --git a/src/routes/views/details/azureDetails/detailsTable.tsx b/src/routes/views/details/azureDetails/detailsTable.tsx
@@ -259,6 +259,7 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
     return (
       <DataTable
         columns={columns}
+        isActionsCell
         isLoading={isLoading}
         onSelected={onSelected}
         onSort={onSort}

diff --git a/src/routes/views/details/components/dataTable/dataTable.styles.ts b/src/routes/views/details/components/dataTable/dataTable.styles.ts
@@ -33,11 +33,11 @@ export const styles = {
     color: global_disabled_color_100.value,
     fontSize: global_FontSize_xs.value,
   },
-  lastReported: {
+  lastItem: {
     textAlign: 'right',
-    paddingRight: '40px',
+    paddingRight: '3.8rem',
   },
-  lastReportedColumn: {
+  lastItemColumn: {
     textAlign: 'right',
     display: 'flex',
     justifyContent: 'flex-end',

diff --git a/src/routes/views/details/components/dataTable/dataTable.tsx b/src/routes/views/details/components/dataTable/dataTable.tsx
@@ -20,6 +20,7 @@ import { styles } from './dataTable.styles';
 
 interface DataTableOwnProps {
   columns?: any[];
+  isActionsCell?: boolean;
   isLoading?: boolean;
   isOptimizations?: boolean;
   onSelected(items: ComputedReportItem[], isSelected: boolean);
@@ -129,7 +130,7 @@ class DataTable extends React.Component<DataTableProps, any> {
   };
 
   public render() {
-    const { columns, intl, isLoading, isOptimizations, rows } = this.props;
+    const { columns, intl, isActionsCell = false, isLoading, isOptimizations, rows } = this.props;
 
     return (
       <>
@@ -193,7 +194,7 @@ class DataTable extends React.Component<DataTableProps, any> {
                         dataLabel={columns[cellIndex].name}
                         key={`cell-${rowIndex}-${cellIndex}`}
                         modifier="nowrap"
-                        isActionCell={!isOptimizations && cellIndex === row.cells.length - 1}
+                        isActionCell={isActionsCell && cellIndex === row.cells.length - 1}
                         style={item.style}
                       >
                         {item.value}

diff --git a/src/routes/views/details/gcpDetails/detailsTable.tsx b/src/routes/views/details/gcpDetails/detailsTable.tsx
@@ -259,6 +259,7 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
     return (
       <DataTable
         columns={columns}
+        isActionsCell
         isLoading={isLoading}
         onSelected={onSelected}
         onSort={onSort}

diff --git a/src/routes/views/details/ibmDetails/detailsTable.tsx b/src/routes/views/details/ibmDetails/detailsTable.tsx
@@ -259,6 +259,7 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
     return (
       <DataTable
         columns={columns}
+        isActionsCell
         isLoading={isLoading}
         onSelected={onSelected}
         onSort={onSort}

diff --git a/src/routes/views/details/ociDetails/detailsTable.tsx b/src/routes/views/details/ociDetails/detailsTable.tsx
@@ -259,6 +259,7 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
     return (
       <DataTable
         columns={columns}
+        isActionsCell
         isLoading={isLoading}
         onSelected={onSelected}
         onSort={onSort}

diff --git a/src/routes/views/details/ocpDetails/detailsTable.tsx b/src/routes/views/details/ocpDetails/detailsTable.tsx
@@ -428,6 +428,7 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
     return (
       <DataTable
         columns={columns}
+        isActionsCell
         isLoading={isLoading}
         onSelected={onSelected}
         onSort={onSort}

diff --git a/src/routes/views/details/rhelDetails/detailsTable.tsx b/src/routes/views/details/rhelDetails/detailsTable.tsx
@@ -375,6 +375,7 @@ class DetailsTableBase extends React.Component<DetailsTableProps, DetailsTableSt
     return (
       <DataTable
         columns={columns}
+        isActionsCell
         isLoading={isLoading}
         onSelected={onSelected}
         onSort={onSort}