FE: Set width for columns, fix header background color

Author: Vixtir

frontend/src/components/ConsumerGroups/List.tsx

@@ -17,7 +17,6 @@ import { useConsumerGroups } from 'lib/hooks/api/consumers';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 
-const COLUMN_SIZE = 160;
 const List = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
   const [searchParams] = useSearchParams();
@@ -53,13 +52,13 @@ const List = () => {
         id: ConsumerGroupOrdering.MEMBERS,
         header: 'Num Of Members',
         accessorKey: 'members',
-        size: COLUMN_SIZE,
+        size: 140,
       },
       {
         id: ConsumerGroupOrdering.TOPIC_NUM,
         header: 'Num Of Topics',
         accessorKey: 'topics',
-        size: COLUMN_SIZE,
+        size: 140,
       },
       {
         id: ConsumerGroupOrdering.MESSAGES_BEHIND,
@@ -68,13 +67,13 @@ const List = () => {
         cell: (args) => {
           return args.getValue() ?? 'N/A';
         },
-        size: COLUMN_SIZE,
+        size: 124,
       },
       {
         header: 'Coordinator',
         accessorKey: 'coordinator.id',
         enableSorting: false,
-        size: COLUMN_SIZE,
+        size: 104,
       },
       {
         id: ConsumerGroupOrdering.STATE,
@@ -91,7 +90,7 @@ const List = () => {
             />
           );
         },
-        size: COLUMN_SIZE,
+        size: 124,
       },
     ],
     []

frontend/src/components/Dashboard/Dashboard.tsx

@@ -17,7 +17,6 @@ import * as S from './Dashboard.styled';
 import ClusterName from './ClusterName';
 import ClusterTableActionsCell from './ClusterTableActionsCell';
 
-const COLUMN_SIZE = 100;
 const Dashboard: React.FC = () => {
   const { data } = useGetUserInfo();
   const clusters = useClusters();
@@ -39,29 +38,29 @@ const Dashboard: React.FC = () => {
   const columns = React.useMemo<ColumnDef<Cluster>[]>(() => {
     const initialColumns: ColumnDef<Cluster>[] = [
       { header: 'Cluster name', accessorKey: 'name', cell: ClusterName },
-      { header: 'Version', accessorKey: 'version', size: COLUMN_SIZE },
+      { header: 'Version', accessorKey: 'version', size: 100 },
       {
         header: 'Brokers count',
         accessorKey: 'brokerCount',
-        size: COLUMN_SIZE,
+        size: 120,
       },
       {
         header: 'Partitions',
         accessorKey: 'onlinePartitionCount',
-        size: COLUMN_SIZE,
+        size: 100,
       },
-      { header: 'Topics', accessorKey: 'topicCount', size: COLUMN_SIZE },
+      { header: 'Topics', accessorKey: 'topicCount', size: 80 },
       {
         header: 'Production',
         accessorKey: 'bytesInPerSec',
         cell: SizeCell,
-        size: COLUMN_SIZE,
+        size: 100,
       },
       {
         header: 'Consumption',
         accessorKey: 'bytesOutPerSec',
         cell: SizeCell,
-        size: COLUMN_SIZE,
+        size: 116,
       },
     ];
 
@@ -70,7 +69,7 @@ const Dashboard: React.FC = () => {
         header: '',
         id: 'actions',
         cell: ClusterTableActionsCell,
-        size: COLUMN_SIZE + 40,
+        size: 140,
       });
     }
 

frontend/src/components/NavBar/NavBar.styled.ts

@@ -15,7 +15,7 @@ export const Navbar = styled.nav(
     left: 0;
     right: 0;
     z-index: 30;
-    background-color: ${theme.menu.primary.backgroundColor.normal};
+    background-color: ${theme.menu.header.backgroundColor};
     min-height: 3.25rem;
   `
 );

frontend/src/components/Schemas/List/List.tsx

@@ -21,7 +21,6 @@ import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourceP
 
 import GlobalSchemaSelector from './GlobalSchemaSelector/GlobalSchemaSelector';
 
-const COLUMN_SIZE = 160;
 const List: React.FC = () => {
   const { isReadOnly } = React.useContext(ClusterContext);
   const { clusterName } = useAppParams<ClusterNameRoute>();
@@ -52,13 +51,13 @@ const List: React.FC = () => {
           />
         ),
       },
-      { header: 'Id', accessorKey: 'id', size: COLUMN_SIZE },
-      { header: 'Type', accessorKey: 'schemaType', size: COLUMN_SIZE },
-      { header: 'Version', accessorKey: 'version', size: COLUMN_SIZE },
+      { header: 'Id', accessorKey: 'id', size: 120 },
+      { header: 'Type', accessorKey: 'schemaType', size: 120 },
+      { header: 'Version', accessorKey: 'version', size: 120 },
       {
         header: 'Compatibility',
         accessorKey: 'compatibilityLevel',
-        size: COLUMN_SIZE,
+        size: 160,
       },
     ],
     []

frontend/src/components/Topics/List/TopicTable.tsx

@@ -13,7 +13,6 @@ import { TopicTitleCell } from './TopicTitleCell';
 import ActionsCell from './ActionsCell';
 import BatchActionsbar from './BatchActionsBar';
 
-const COLUMN_SIZE = 100;
 const TopicTable: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
   const [searchParams] = useSearchParams();
@@ -45,13 +44,13 @@ const TopicTable: React.FC = () => {
         id: TopicColumnsToSort.TOTAL_PARTITIONS,
         header: 'Partitions',
         accessorKey: 'partitionCount',
-        size: COLUMN_SIZE,
+        size: 100,
       },
       {
         id: TopicColumnsToSort.OUT_OF_SYNC_REPLICAS,
         header: 'Out of sync replicas',
         accessorKey: 'partitions',
-        size: COLUMN_SIZE,
+        size: 154,
         cell: ({ getValue }) => {
           const partitions = getValue<Topic['partitions']>();
           if (partitions === undefined || partitions.length === 0) {
@@ -67,13 +66,13 @@ const TopicTable: React.FC = () => {
         header: 'Replication Factor',
         accessorKey: 'replicationFactor',
         enableSorting: false,
-        size: COLUMN_SIZE,
+        size: 148,
       },
       {
         header: 'Number of messages',
         accessorKey: 'partitions',
         enableSorting: false,
-        size: COLUMN_SIZE,
+        size: 146,
         cell: ({ getValue }) => {
           const partitions = getValue<Topic['partitions']>();
           if (partitions === undefined || partitions.length === 0) {
@@ -88,7 +87,7 @@ const TopicTable: React.FC = () => {
         id: TopicColumnsToSort.SIZE,
         header: 'Size',
         accessorKey: 'segmentSize',
-        size: COLUMN_SIZE,
+        size: 100,
         cell: SizeCell,
       },
       {

frontend/src/components/common/NewTable/BreakableTextCell.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
 import { CellContext } from '@tanstack/react-table';
 
-import * as S from './Table.styled';
-
 const BreakableTextCell = <T,>({ getValue }: CellContext<T, unknown>) => {
-  return <S.BreakableText>{getValue<string>()}</S.BreakableText>;
+  return (
+    <div
+      style={{
+        wordBreak: 'break-word',
+        whiteSpace: 'pre-wrap',
+      }}
+    >
+      {getValue<string>()}
+    </div>
+  );
 };
 
 export default BreakableTextCell;

frontend/src/components/common/NewTable/Table.styled.ts

@@ -235,8 +235,3 @@ export const TableWrapper = styled.div<{ $disabled: boolean }>(
     `}
   `
 );
-
-export const BreakableText = styled.div`
-  word-break: 'break-word';
-  white-space: 'pre-wrap';
-`;

frontend/src/theme/theme.ts

@@ -566,6 +566,9 @@ export const theme = {
     },
   },
   menu: {
+    header: {
+      backgroundColor: Colors.brand[0],
+    },
     primary: {
       backgroundColor: {
         normal: 'transparent',
@@ -1098,6 +1101,9 @@ export const darkTheme: ThemeType = {
     },
   },
   menu: {
+    header: {
+      backgroundColor: Colors.brand[90],
+    },
     primary: {
       backgroundColor: {
         normal: 'transparent',