CB-5070 refactor: forms design

webapp/packages/core-blocks/src/Containers/Container.tsx

@@ -14,16 +14,21 @@ import { filterContainerFakeProps, getContainerProps } from './filterContainerFa
 import type { IContainerProps } from './IContainerProps';
 import elementsSizeStyle from './shared/ElementsSize.m.css';
 
-export const Container = forwardRef<HTMLDivElement, IContainerProps & React.HTMLAttributes<HTMLDivElement>>(function Container(
-  { className, ...rest },
+interface Props {
+  as?: 'div' | 'header' | 'footer' | 'section' | 'aside' | 'main' | 'nav';
+}
+
+export const Container = forwardRef<HTMLDivElement, Props & IContainerProps & React.HTMLAttributes<HTMLDivElement>>(function Container(
+  { as = 'div', className, ...rest },
   ref,
 ) {
   const styles = useS(style, elementsSizeStyle);
   const divProps = filterContainerFakeProps(rest);
   const containerProps = getContainerProps(rest);
+  const Element = as;
 
   return (
-    <div
+    <Element
       ref={ref}
       {...divProps}
       className={s(

webapp/packages/core-blocks/src/Containers/Group.m.css

@@ -12,6 +12,10 @@
 .surface {
   composes: theme-background-surface theme-text-on-surface from global;
 }
+.border {
+  composes: theme-border-color-background from global;
+  border: 1px solid;
+}
 .group {
   align-content: baseline;
   box-sizing: border-box;

webapp/packages/core-blocks/src/Containers/Group.tsx

@@ -20,12 +20,13 @@ interface Props extends IContainerProps {
   secondary?: boolean;
   center?: boolean;
   box?: boolean;
+  border?: boolean;
   hideOverflow?: boolean;
   boxNoOverflow?: boolean;
 }
 
 export const Group = forwardRef<HTMLDivElement, Props & React.HTMLAttributes<HTMLDivElement>>(function Group(
-  { form, center, box, secondary, boxNoOverflow, hideOverflow, className, ...rest },
+  { form, center, box, border, secondary, boxNoOverflow, hideOverflow, className, ...rest },
   ref,
 ) {
   const styles = useS(style, containerStyles, elementsSizeStyles);
@@ -51,6 +52,7 @@ export const Group = forwardRef<HTMLDivElement, Props & React.HTMLAttributes<HTM
           boxNoOverflow,
           hideOverflow,
           box,
+          border,
         },
         className,
       )}

webapp/packages/core-blocks/src/Table/TableHeader.m.css

@@ -1,7 +1,15 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 .tableHeader.fixed {
   background: var(--theme-surface);
   position: sticky;
   top: 0;
+  /* TODO: place TableHeader after TableBody and remove z-index */
   z-index: 1;
 
   & > tr {

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/CreateTeam.tsx

@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { Container, Group, GroupTitle, s, Translate, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { Container, Group, GroupTitle, Loader, s, Translate, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 
 import style from './CreateTeam.m.css';
@@ -24,12 +24,14 @@ export const CreateTeam: React.FC = observer(function CreateTeam() {
   }
 
   return (
-    <Group aria-label={translate('administration_teams_team_creation')} className={s(styles, { box: true })} box boxNoOverflow vertical noWrap>
+    <Group aria-label={translate('administration_teams_team_creation')} className={s(styles, { box: true })} gap vertical noWrap>
       <GroupTitle header keepSize>
         <Translate token="administration_teams_team_creation" />
       </GroupTitle>
-      <Container overflow>
-        <TeamForm state={service.data} onCancel={service.cancelCreate} onSave={service.cancelCreate} />
+      <Container overflow vertical>
+        <Loader suspense>
+          <TeamForm state={service.data} onCancel={service.cancelCreate} onSave={service.cancelCreate} />
+        </Loader>
       </Container>
     </Group>
   );

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.m.css

@@ -1,28 +1,15 @@
-.group {
-  position: relative;
-}
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
 
-.group,
-.container,
-.tableContainer {
+.group {
   height: 100%;
-}
 
-.container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+  & .header {
+    flex: 0 0 auto;
+  }
 }
-
-.tableContainer {
-  overflow: auto;
-}
-
-.grantedConnectionsTableHeader {
-  flex: 0 0 auto;
-}
-
-.table {
-  composes: theme-background-surface theme-text-on-surface from global;
-  width: 100%;
-}

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/ConnectionList.tsx

@@ -11,6 +11,7 @@ import { useCallback, useState } from 'react';
 
 import {
   Button,
+  Container,
   getComputed,
   getSelectedItems,
   Group,
@@ -26,11 +27,11 @@ import {
 import { Connection, DBDriverResource } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 
+import styles from './ConnectionList.m.css';
 import { getFilteredConnections } from './getFilteredConnections';
 import { GrantedConnectionsTableHeader, IFilterState } from './GrantedConnectionsTableHeader/GrantedConnectionsTableHeader';
 import { GrantedConnectionsTableInnerHeader } from './GrantedConnectionsTableHeader/GrantedConnectionsTableInnerHeader';
 import { GrantedConnectionsTableItem } from './GrantedConnectionsTableItem';
-import styles from './ConnectionList.m.css';
 
 interface Props {
   connectionList: Connection[];
@@ -60,40 +61,40 @@ export const ConnectionList = observer<Props>(function ConnectionList({ connecti
   const keys = connections.map(connection => connection.id);
 
   return (
-    <Group className={s(style, { group: true })} box medium overflow>
-      <div className={s(style, { container: true })}>
-        <GrantedConnectionsTableHeader filterState={filterState} disabled={disabled}>
+    <Group className={s(style, { group: true })} box border medium overflow vertical>
+      <GrantedConnectionsTableHeader filterState={filterState} disabled={disabled}>
+        <Container keepSize>
           <Button disabled={disabled || !selected} mod={['unelevated']} onClick={grant}>
             {translate('ui_add')}
           </Button>
-        </GrantedConnectionsTableHeader>
-        <div className={s(style, { tableContainer: true })}>
-          <Table className={s(style, { table: true })} keys={keys} selectedItems={selectedSubjects} isItemSelectable={item => !grantedSubjects.includes(item)} size="big">
-            <GrantedConnectionsTableInnerHeader className={s(style, { grantedConnectionsTableHeader: true })} disabled={disabled} />
-            <TableBody>
-              {!connections.length && filterState.filterValue && (
-                <TableItem item="tableInfo" selectDisabled>
-                  <TableColumnValue colSpan={5}>{translate('ui_search_no_result_placeholder')}</TableColumnValue>
-                </TableItem>
-              )}
-              {connections.map(connection => {
-                const driver = driversResource.get(connection.driverId);
-                return (
-                  <GrantedConnectionsTableItem
-                    key={connection.id}
-                    id={connection.id}
-                    name={connection.name}
-                    tooltip={connection.name}
-                    host={`${connection.host || ''}${connection.host && connection.port ? ':' + connection.port : ''}`}
-                    icon={driver?.icon}
-                    disabled={disabled}
-                  />
-                );
-              })}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
+        </Container>
+      </GrantedConnectionsTableHeader>
+      <Container overflow>
+        <Table keys={keys} selectedItems={selectedSubjects} isItemSelectable={item => !grantedSubjects.includes(item)}>
+          <GrantedConnectionsTableInnerHeader className={s(style, { header: true })} disabled={disabled} />
+          <TableBody>
+            {!connections.length && filterState.filterValue && (
+              <TableItem item="tableInfo" selectDisabled>
+                <TableColumnValue colSpan={5}>{translate('ui_search_no_result_placeholder')}</TableColumnValue>
+              </TableItem>
+            )}
+            {connections.map(connection => {
+              const driver = driversResource.get(connection.driverId);
+              return (
+                <GrantedConnectionsTableItem
+                  key={connection.id}
+                  id={connection.id}
+                  name={connection.name}
+                  tooltip={connection.name}
+                  host={`${connection.host || ''}${connection.host && connection.port ? ':' + connection.port : ''}`}
+                  icon={driver?.icon}
+                  disabled={disabled}
+                />
+              );
+            })}
+          </TableBody>
+        </Table>
+      </Container>
     </Group>
   );
 });

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnections.tsx

@@ -8,7 +8,6 @@
 import { observer } from 'mobx-react-lite';
 
 import {
-  ColoredContainer,
   Container,
   getComputed,
   Group,
@@ -76,7 +75,7 @@ export const GrantedConnections: TabContainerPanelComponent<ITeamFormProps> = ob
   return (
     <Loader className={s(styles, { loader: true })} state={[state.state]}>
       {() => (
-        <ColoredContainer className={s(styles, { box: true })} parent gap vertical>
+        <Container className={s(styles, { box: true })} parent gap vertical>
           {!connections.length ? (
             <Group className={s(styles, { placeholderBox: true })} large>
               <TextPlaceholder>{translate('administration_teams_team_granted_connections_empty')}</TextPlaceholder>
@@ -102,7 +101,7 @@ export const GrantedConnections: TabContainerPanelComponent<ITeamFormProps> = ob
               </Container>
             </>
           )}
-        </ColoredContainer>
+        </Container>
       )}
     </Loader>
   );

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.m.css

@@ -1,28 +1,15 @@
-.box {
-  position: relative;
-}
-
-.box,
-.innerBox,
-.tableBox {
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+.group {
   height: 100%;
-}
-
-.innerBox {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.header {
-  flex: 0 0 auto;
-}
-
-.tableBox {
-  overflow: auto;
-}
 
-.table {
-  composes: theme-background-surface theme-text-on-surface from global;
-  width: 100%;
+  & .header {
+    flex: 0 0 auto;
+  }
 }

webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/GrantedConnections/GrantedConnectionsList.tsx

@@ -11,6 +11,7 @@ import { useCallback, useState } from 'react';
 
 import {
   Button,
+  Container,
   getComputed,
   getSelectedItems,
   Group,
@@ -70,43 +71,45 @@ export const GrantedConnectionList = observer<Props>(function GrantedConnectionL
   }
 
   return (
-    <Group className={s(styles, { box: true })} box medium overflow>
-      <div className={s(styles, { innerBox: true })}>
-        <GrantedConnectionsTableHeader className={s(styles, { header: true })} filterState={filterState} disabled={disabled}>
+    <Group className={s(styles, { group: true })} box border medium overflow vertical>
+      <GrantedConnectionsTableHeader className={s(styles, { header: true })} filterState={filterState} disabled={disabled}>
+        <Container keepSize>
           <Button disabled={disabled || !selected} mod={['outlined']} onClick={revoke}>
             {translate('ui_delete')}
           </Button>
+        </Container>
+        <Container keepSize>
           <Button disabled={disabled} mod={['unelevated']} onClick={props.onEdit}>
             {translate('ui_edit')}
           </Button>
-        </GrantedConnectionsTableHeader>
-        <div className={s(styles, { tableBox: true })}>
-          <Table className={s(styles, { table: true })} keys={keys} selectedItems={selectedSubjects} size="big">
-            <GrantedConnectionsTableInnerHeader disabled={disabled} />
-            <TableBody>
-              {tableInfoText && (
-                <TableItem item="tableInfo" selectDisabled>
-                  <TableColumnValue colSpan={5}>{translate(tableInfoText)}</TableColumnValue>
-                </TableItem>
-              )}
-              {connections.map(connection => {
-                const driver = driversResource.get(connection.driverId);
-                return (
-                  <GrantedConnectionsTableItem
-                    key={connection.id}
-                    id={connection.id}
-                    name={connection.name}
-                    tooltip={connection.name}
-                    host={`${connection.host || ''}${connection.port ? ':' + connection.port : ''}`}
-                    icon={driver?.icon}
-                    disabled={disabled}
-                  />
-                );
-              })}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
+        </Container>
+      </GrantedConnectionsTableHeader>
+      <Container overflow>
+        <Table keys={keys} selectedItems={selectedSubjects}>
+          <GrantedConnectionsTableInnerHeader disabled={disabled} />
+          <TableBody>
+            {tableInfoText && (
+              <TableItem item="tableInfo" selectDisabled>
+                <TableColumnValue colSpan={5}>{translate(tableInfoText)}</TableColumnValue>
+              </TableItem>
+            )}
+            {connections.map(connection => {
+              const driver = driversResource.get(connection.driverId);
+              return (
+                <GrantedConnectionsTableItem
+                  key={connection.id}
+                  id={connection.id}
+                  name={connection.name}
+                  tooltip={connection.name}
+                  host={`${connection.host || ''}${connection.port ? ':' + connection.port : ''}`}
+                  icon={driver?.icon}
+                  disabled={disabled}
+                />
+              );
+            })}
+          </TableBody>
+        </Table>
+      </Container>
     </Group>
   );
 });