Merge remote-tracking branch 'origin/devel' into dbeaver-infra#2-rene…

…w-certificates

config/sample-databases/DefaultConfiguration/cloudbeaver.conf

@@ -94,6 +94,9 @@
             "h2:h2_embedded",
             "h2:h2_embedded_v2",
             "clickhouse:yandex_clickhouse"
+        ],
+        disabledBetaFeatures: [
+
         ]
 
     }

config/sample-databases/SQLiteConfiguration/cloudbeaver.conf

@@ -89,6 +89,9 @@
             "h2:h2_embedded",
             "h2:h2_embedded_v2",
             "clickhouse:yandex_clickhouse"
+        ],
+        disabledBetaFeatures: [
+
         ]
 
     }

server/bundles/io.cloudbeaver.model/src/io/cloudbeaver/model/app/BaseWebAppConfiguration.java

@@ -33,11 +33,14 @@ public abstract class BaseWebAppConfiguration implements WebAppConfiguration {
     protected boolean resourceManagerEnabled;
     protected boolean showReadOnlyConnectionInfo;
     protected String[] enabledFeatures;
+    protected String[] disabledBetaFeatures;
+
 
     public BaseWebAppConfiguration() {
         this.plugins = new LinkedHashMap<>();
         this.resourceManagerEnabled = true;
         this.enabledFeatures = null;
+        this.disabledBetaFeatures = new String[0];
         this.showReadOnlyConnectionInfo = false;
     }
 
@@ -46,6 +49,7 @@ public BaseWebAppConfiguration(BaseWebAppConfiguration src) {
         this.defaultUserTeam = src.defaultUserTeam;
         this.resourceManagerEnabled = src.resourceManagerEnabled;
         this.enabledFeatures = src.enabledFeatures;
+        this.disabledBetaFeatures = src.disabledBetaFeatures;
         this.showReadOnlyConnectionInfo = src.showReadOnlyConnectionInfo;
     }
 
@@ -104,4 +108,8 @@ public void setEnabledFeatures(String[] enabledFeatures) {
     public boolean isShowReadOnlyConnectionInfo() {
         return showReadOnlyConnectionInfo;
     }
+
+    public String[] getDisabledBetaFeatures() {
+        return disabledBetaFeatures;
+    }
 }

server/bundles/io.cloudbeaver.server/schema/service.core.graphqls

@@ -153,6 +153,7 @@ type ServerConfig {
     distributed: Boolean!
 
     enabledFeatures: [ID!]!
+    disabledBetaFeatures: [ID!] @since(version: "24.0.5")
     enabledAuthProviders: [ID!]!
     supportedLanguages: [ ServerLanguage! ]!
     services: [ WebServiceConfig ]

server/bundles/io.cloudbeaver.server/src/io/cloudbeaver/model/WebServerConfig.java

@@ -21,6 +21,7 @@
 import io.cloudbeaver.server.CBApplication;
 import io.cloudbeaver.server.CBPlatform;
 import io.cloudbeaver.service.security.PasswordPolicyConfiguration;
+import org.jkiss.code.Nullable;
 import org.jkiss.dbeaver.model.meta.Property;
 import org.jkiss.dbeaver.model.navigator.DBNBrowseSettings;
 import org.jkiss.dbeaver.registry.language.PlatformLanguageDescriptor;
@@ -155,6 +156,12 @@ public String[] getEnabledFeatures() {
         return application.getAppConfiguration().getEnabledFeatures();
     }
 
+    @Property
+    @Nullable
+    public String[] getDisabledBetaFeatures() {
+        return application.getAppConfiguration().getDisabledBetaFeatures();
+    }
+
     @Property
     public String[] getEnabledAuthProviders() {
         return application.getAppConfiguration().getEnabledAuthProviders();

webapp/packages/core-blocks/src/ClickableLoader.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+import { importLazyComponent } from './importLazyComponent';
+
+export const Clickable = importLazyComponent(() => import('./Clickable').then(m => m.Clickable));

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/DisplayError.tsx

@@ -29,7 +29,7 @@ export const DisplayError = observer<Props>(function DisplayError({ root, childr
   const stack = errorInfo?.componentStack || error?.stack;
 
   return (
-    <div className={s(styles, { error: true, root }, className)}>
+    <div role="alert" tabIndex={0} className={s(styles, { error: true, root }, className)}>
       <div className={s(styles, { errorInnerBlock: true })}>
         <NotificationMark className={s(styles, { notificationMark: true })} type={ENotificationType.Error} />
         <p>Something went wrong.</p>

webapp/packages/core-blocks/src/ErrorMessage.tsx

@@ -6,13 +6,13 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+
 import { Button } from './Button';
+import styles from './ErrorMessage.m.css';
 import { IconOrImage } from './IconOrImage';
 import { useTranslate } from './localization/useTranslate';
-import { useS } from './useS';
-
-import styles from './ErrorMessage.m.css';
 import { s } from './s';
+import { useS } from './useS';
 
 interface Props {
   hasDetails?: boolean;
@@ -26,9 +26,11 @@ export const ErrorMessage = observer<Props>(function ErrorMessage({ text, classN
   const style = useS(styles);
 
   return (
-    <div className={s(style, { message: true }, className)}>
+    <div role="status" tabIndex={0} aria-label={text} className={s(style, { message: true }, className)}>
       <IconOrImage className={s(style, { errorIcon: true })} icon="/icons/error_icon_sm.svg" />
-      <div className={s(style, { messageBody: true })} title={text}>{text}</div>
+      <div className={s(style, { messageBody: true })} title={text}>
+        {text}
+      </div>
       <div className={s(style, { messageActions: true })}>
         {hasDetails && (
           <Button type="button" mod={['outlined']} onClick={onShowDetails}>

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/core-blocks/src/index.ts

@@ -236,3 +236,4 @@ export * from './useMergeRefs';
 export * from './usePasswordValidation';
 export * from './manifest';
 export * from './importLazyComponent';
+export * from './ClickableLoader';

webapp/packages/core-root/src/ServerConfigResource.ts

@@ -157,6 +157,10 @@ export class ServerConfigResource extends CachedDataResource<ServerConfig | null
     return this.update.resourceManagerEnabled ?? this.data?.resourceManagerEnabled ?? false;
   }
 
+  isBetaFeatureDisabled(feature: string): boolean {
+    return this.data?.disabledBetaFeatures?.includes(feature) || false;
+  }
+
   isFeatureEnabled(feature: string, serverSide = false): boolean {
     if (serverSide) {
       return this.data?.enabledFeatures.includes(feature) || false;

webapp/packages/core-sdk/src/queries/session/serverConfig.gql

@@ -30,6 +30,7 @@ query serverConfig {
     distributed
 
     enabledFeatures
+    disabledBetaFeatures
     enabledAuthProviders
     supportedLanguages {
       isoCode

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>
   );
 });