feat(core-blocks): add select all checkbox to big tables

webapp/packages/core-blocks/src/Table/TableColumnHeader.tsx

@@ -13,15 +13,21 @@ import { useStyles } from '@cloudbeaver/core-theming';
 interface Props {
   title?: string;
   min?: boolean;
+  flex?: boolean;
+  centerContent?: boolean;
   className?: string;
 }
 
 export const TableColumnHeader: React.FC<Props> = function TableColumnHeader({
-  title, children, min, className,
+  title, min, flex, centerContent, className, children,
 }) {
   return styled(useStyles())(
-    <th title={title} className={className} {...use({ min })}>
-      {children}
+    <th
+      title={title}
+      className={className}
+      {...use({ min, centerContent })}
+    >
+      {flex ? <th-flex className={className}>{children}</th-flex> : children}
     </th>
   );
 };

webapp/packages/core-blocks/src/Table/TableSelect.tsx

@@ -8,19 +8,27 @@
 
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
+import styled, { css } from 'reshadow';
 
 import { useTranslate } from '@cloudbeaver/core-localization';
 
 import { Checkbox } from '../FormControls/Checkboxes/Checkbox';
 import { TableContext } from './TableContext';
 
 interface Props {
-  id: string;
+  id?: string;
   disabled?: boolean;
   tooltip?: string;
   className?: string;
 }
 
+const styles = css`
+  Checkbox {
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+`;
+
 export const TableSelect = observer<Props>(function TableSelect({ id, disabled, tooltip, className }) {
   const tableContext = useContext(TableContext);
   const translate = useTranslate();
@@ -29,7 +37,7 @@ export const TableSelect = observer<Props>(function TableSelect({ id, disabled,
     throw new Error('Context must be provided');
   }
 
-  return (
+  return styled(styles)(
     <Checkbox
       id={id}
       className={className}

webapp/packages/core-connections/src/Administration/Connections/ConnectionsTable/ConnectionsTable.tsx

@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
 import styled, { css, use } from 'reshadow';
 
 import {
-  Table, TableHeader, TableColumnHeader, TableBody
+  Table, TableHeader, TableColumnHeader, TableBody, TableSelect
 } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles, composes } from '@cloudbeaver/core-theming';
@@ -46,11 +46,14 @@ export const ConnectionsTable = observer<Props>(function ConnectionsTable({
   expandedItems,
 }) {
   const translate = useTranslate();
+  const keys = connections.map(connection => connection.id);
 
   return styled(useStyles(styles))(
-    <Table selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
+    <Table keys={keys} selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
       <TableHeader>
-        <TableColumnHeader min />
+        <TableColumnHeader min flex centerContent>
+          <TableSelect />
+        </TableColumnHeader>
         <TableColumnHeader min />
         <TableColumnHeader min />
         <TableColumnHeader>{translate('connections_connection_name')}</TableColumnHeader>

webapp/packages/core-theming/src/styles/_table.scss

@@ -77,6 +77,15 @@
       width: 28px;
     }
 
+    &[use|centerContent] > th-flex {
+      align-items: center;
+      justify-content: center;
+    }
+
+    > th-flex {
+      display: flex;
+    }
+
     &:last-child {
       border-right: none;
     }

webapp/packages/plugin-authentication/src/Administration/IdentityProviders/AuthConfigurationsTable/AuthConfigurationsTable.tsx

@@ -9,7 +9,7 @@
 import { observer } from 'mobx-react-lite';
 import styled, { css, use } from 'reshadow';
 
-import { Table, TableHeader, TableColumnHeader, TableBody } from '@cloudbeaver/core-blocks';
+import { Table, TableHeader, TableColumnHeader, TableBody, TableSelect } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import type { AdminAuthProviderConfiguration } from '@cloudbeaver/core-sdk';
 import { useStyles } from '@cloudbeaver/core-theming';
@@ -30,10 +30,14 @@ interface Props {
 
 export const AuthConfigurationsTable = observer<Props>(function AuthConfigurationsTable({ configurations, selectedItems, expandedItems }) {
   const translate = useTranslate();
+  const keys = configurations.map(configuration => configuration.id);
+
   return styled(useStyles(styles))(
-    <Table selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
+    <Table keys={keys} selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
       <TableHeader>
-        <TableColumnHeader min />
+        <TableColumnHeader min flex centerContent>
+          <TableSelect />
+        </TableColumnHeader>
         <TableColumnHeader min />
         <TableColumnHeader min />
         <TableColumnHeader>{translate('administration_identity_providers_provider_configuration_name')}</TableColumnHeader>

webapp/packages/plugin-authentication/src/Administration/Roles/RolesTable/RolesTable.tsx

@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
 import styled, { css, use } from 'reshadow';
 
 import type { RoleInfo } from '@cloudbeaver/core-authentication';
-import { Table, TableHeader, TableColumnHeader, TableBody } from '@cloudbeaver/core-blocks';
+import { Table, TableHeader, TableColumnHeader, TableBody, TableSelect } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles } from '@cloudbeaver/core-theming';
 
@@ -30,10 +30,14 @@ interface Props {
 
 export const RolesTable = observer<Props>(function RolesTable({ roles, selectedItems, expandedItems }) {
   const translate = useTranslate();
+  const keys = roles.map(role => role.roleId);
+
   return styled(useStyles(styles))(
-    <Table selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
+    <Table keys={keys} selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
       <TableHeader>
-        <TableColumnHeader min />
+        <TableColumnHeader min flex centerContent>
+          <TableSelect />
+        </TableColumnHeader>
         <TableColumnHeader min />
         <TableColumnHeader>{translate('administration_roles_role_id')}</TableColumnHeader>
         <TableColumnHeader>{translate('administration_roles_role_name')}</TableColumnHeader>

webapp/packages/plugin-authentication/src/Administration/Users/UsersTable/UsersTable.tsx

@@ -11,7 +11,7 @@ import styled, { css, use } from 'reshadow';
 
 import type { AdminUser } from '@cloudbeaver/core-authentication';
 import {
-  Table, TableHeader, TableColumnHeader, TableBody
+  Table, TableHeader, TableColumnHeader, TableBody, TableSelect
 } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles } from '@cloudbeaver/core-theming';
@@ -33,10 +33,16 @@ interface Props {
 
 export const UsersTable = observer<Props>(function UsersTable({ users, selectedItems, expandedItems, selectable }) {
   const translate = useTranslate();
+  const keys = users.map(user => user.userId);
+
   return styled(useStyles(styles))(
-    <Table selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
+    <Table keys={keys} selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
       <TableHeader>
-        {selectable && <TableColumnHeader min />}
+        {selectable && (
+          <TableColumnHeader min flex centerContent>
+            <TableSelect />
+          </TableColumnHeader>
+        )}
         <TableColumnHeader min />
         <TableColumnHeader>{translate('authentication_user_name')}</TableColumnHeader>
         <TableColumnHeader>{translate('authentication_user_role')}</TableColumnHeader>