CB-4657 removes reshadow from plugin-connections-administration

webapp/packages/plugin-connections-administration/package.json

@@ -35,8 +35,7 @@
     "@cloudbeaver/plugin-connections": "~0.1.0",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
-    "react": "^18.2.0",
-    "reshadow": "^0.0.1"
+    "react": "^18.2.0"
   },
   "peerDependencies": {},
   "devDependencies": {

webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/Connection.m.css

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+.staticImage {
+  display: flex;
+  width: 24px;
+
+  &:not(:last-child) {
+    margin-right: 16px;
+  }
+}
+
+.tableColumnValueExpand {
+  cursor: pointer;
+}
+
+.tableItemSelect {
+  margin-left: -10px;
+  margin-right: -10px;
+}

webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/Connection.tsx

@@ -6,33 +6,15 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
-import { Loader, Placeholder, StaticImage, TableColumnValue, TableItem, TableItemExpand, TableItemSelect } from '@cloudbeaver/core-blocks';
+import { Loader, Placeholder, s, StaticImage, TableColumnValue, TableItem, TableItemExpand, TableItemSelect, useS } from '@cloudbeaver/core-blocks';
 import { DatabaseConnection, DBDriverResource, IConnectionInfoParams } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 
 import { ConnectionsAdministrationService } from '../ConnectionsAdministrationService';
+import styles from './Connection.m.css';
 import { ConnectionEdit } from './ConnectionEdit';
 
-const styles = css`
-  StaticImage {
-    display: flex;
-    width: 24px;
-
-    &:not(:last-child) {
-      margin-right: 16px;
-    }
-  }
-  TableColumnValue[expand] {
-    cursor: pointer;
-  }
-  Checkbox {
-    margin-left: -10px;
-    margin-right: -10px;
-  }
-`;
-
 interface Props {
   connectionKey: IConnectionInfoParams;
   connection: DatabaseConnection;
@@ -43,27 +25,28 @@ export const Connection = observer<Props>(function Connection({ connectionKey, c
   const driversResource = useService(DBDriverResource);
   const connectionsAdministrationService = useService(ConnectionsAdministrationService);
   const icon = driversResource.get(connection.driverId)?.icon;
+  const style = useS(styles);
 
-  return styled(styles)(
+  return (
     <TableItem item={connectionKey} expandElement={ConnectionEdit}>
       <TableColumnValue centerContent flex>
-        <TableItemSelect />
+        <TableItemSelect className={s(style, { tableItemSelect: true })} />
       </TableColumnValue>
-      <TableColumnValue centerContent flex expand>
+      <TableColumnValue className={s(style, { tableColumnValueExpand: true })} centerContent flex expand>
         <TableItemExpand />
       </TableColumnValue>
-      <TableColumnValue centerContent flex expand>
-        <StaticImage icon={icon} />
+      <TableColumnValue className={s(style, { tableColumnValueExpand: true })} centerContent flex expand>
+        <StaticImage className={s(style, { staticImage: true })} icon={icon} />
       </TableColumnValue>
-      <TableColumnValue title={connection.name} expand ellipsis>
+      <TableColumnValue title={connection.name} className={s(style, { tableColumnValueExpand: true })} expand ellipsis>
         {connection.name}
       </TableColumnValue>
       <TableColumnValue>
         {connection.host}
         {connection.host && connection.port && `:${connection.port}`}
       </TableColumnValue>
       {projectName !== undefined && (
-        <TableColumnValue title={projectName ?? ''} expand ellipsis>
+        <TableColumnValue title={projectName ?? ''} className={s(style, { tableColumnValueExpand: true })} expand ellipsis>
           {projectName}
         </TableColumnValue>
       )}
@@ -72,6 +55,6 @@ export const Connection = observer<Props>(function Connection({ connectionKey, c
           <Placeholder container={connectionsAdministrationService.connectionDetailsPlaceholder} connection={connection} />
         </Loader>
       </TableColumnValue>
-    </TableItem>,
+    </TableItem>
   );
 });

webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/ConnectionDetailsStyles.ts → webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/ConnectionDetailsStyles.m.css

@@ -5,15 +5,12 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { css } from 'reshadow';
 
-export const CONNECTION_DETAILS_STYLES = css`
-  StaticImage {
-    width: 24px;
-    height: 24px;
-    margin-right: 10px;
-    &:last-child {
-      margin-right: 0;
-    }
+.staticImage {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  &:last-child {
+    margin-right: 0;
   }
-`;
+}

webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/Origin.tsx

@@ -6,16 +6,16 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
 
 import { AUTH_PROVIDER_LOCAL_ID } from '@cloudbeaver/core-authentication';
-import { PlaceholderComponent, StaticImage } from '@cloudbeaver/core-blocks';
+import { PlaceholderComponent, s, StaticImage, useS } from '@cloudbeaver/core-blocks';
 
 import type { IConnectionDetailsPlaceholderProps } from '../../ConnectionsAdministrationService';
-import { CONNECTION_DETAILS_STYLES } from './ConnectionDetailsStyles';
+import ConnectionDetailsStyles from './ConnectionDetailsStyles.m.css';
 
 export const Origin: PlaceholderComponent<IConnectionDetailsPlaceholderProps> = observer(function Origin({ connection }) {
   const isLocal = connection.origin?.type === AUTH_PROVIDER_LOCAL_ID;
+  const style = useS(ConnectionDetailsStyles);
 
   if (!connection.origin || isLocal) {
     return null;
@@ -24,5 +24,5 @@ export const Origin: PlaceholderComponent<IConnectionDetailsPlaceholderProps> =
   const icon = connection.origin.icon;
   const title = connection.origin.displayName;
 
-  return styled(CONNECTION_DETAILS_STYLES)(<StaticImage icon={icon} title={title} />);
+  return <StaticImage className={s(style, { staticImage: true })} icon={icon} title={title} />;
 });

webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/SSH.tsx

@@ -6,16 +6,16 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
 
-import { PlaceholderComponent, StaticImage, useResource, useTranslate } from '@cloudbeaver/core-blocks';
+import { PlaceholderComponent, s, StaticImage, useResource, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import { NetworkHandlerResource, SSH_TUNNEL_ID } from '@cloudbeaver/core-connections';
 
 import type { IConnectionDetailsPlaceholderProps } from '../../ConnectionsAdministrationService';
-import { CONNECTION_DETAILS_STYLES } from './ConnectionDetailsStyles';
+import ConnectionDetailsStyles from './ConnectionDetailsStyles.m.css';
 
 export const SSH: PlaceholderComponent<IConnectionDetailsPlaceholderProps> = observer(function SSH({ connection }) {
   const translate = useTranslate();
+  const style = useS(ConnectionDetailsStyles);
   const sshConfig = connection.networkHandlersConfig?.find(state => state.id === SSH_TUNNEL_ID);
   const applicable = sshConfig?.enabled === true;
   const handler = useResource(SSH, NetworkHandlerResource, SSH_TUNNEL_ID, { active: applicable });
@@ -24,7 +24,11 @@ export const SSH: PlaceholderComponent<IConnectionDetailsPlaceholderProps> = obs
     return null;
   }
 
-  return styled(CONNECTION_DETAILS_STYLES)(
-    <StaticImage icon="/icons/ssh_tunnel.svg" title={translate(handler.data?.label || 'connections_network_handler_ssh_tunnel_title')} />,
+  return (
+    <StaticImage
+      className={s(style, { staticImage: true })}
+      icon="/icons/ssh_tunnel.svg"
+      title={translate(handler.data?.label || 'connections_network_handler_ssh_tunnel_title')}
+    />
   );
 });

webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionDetailsInfo/Template.tsx

@@ -6,17 +6,17 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
-import styled from 'reshadow';
 
-import { PlaceholderComponent, StaticImage } from '@cloudbeaver/core-blocks';
+import { PlaceholderComponent, s, StaticImage, useS } from '@cloudbeaver/core-blocks';
 
 import type { IConnectionDetailsPlaceholderProps } from '../../ConnectionsAdministrationService';
-import { CONNECTION_DETAILS_STYLES } from './ConnectionDetailsStyles';
+import ConnectionDetailsStyles from './ConnectionDetailsStyles.m.css';
 
 export const Template: PlaceholderComponent<IConnectionDetailsPlaceholderProps> = observer(function Template({ connection }) {
+  const style = useS(ConnectionDetailsStyles);
   if (!connection.template) {
     return null;
   }
 
-  return styled(CONNECTION_DETAILS_STYLES)(<StaticImage icon="/icons/template_connection.svg" title="Template connection" />);
+  return <StaticImage className={s(style, { staticImage: true })} icon="/icons/template_connection.svg" title="Template connection" />;
 });

webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.m.css

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+.box {
+  composes: theme-background-secondary theme-text-on-secondary from global;
+  box-sizing: border-box;
+  padding-bottom: 24px;
+  display: flex;
+  flex-direction: column;
+  height: 740px;
+}
+
+.loader {
+  height: 100%;
+}

webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsTable/ConnectionEdit.tsx

@@ -7,26 +7,13 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Loader } from '@cloudbeaver/core-blocks';
+import { Loader, s, useS } from '@cloudbeaver/core-blocks';
 import { ConnectionInfoResource, IConnectionInfoParams } from '@cloudbeaver/core-connections';
 import { useService } from '@cloudbeaver/core-di';
 import { ConnectionFormLoader, useConnectionFormState } from '@cloudbeaver/plugin-connections';
 
-const styles = css`
-  box {
-    composes: theme-background-secondary theme-text-on-secondary from global;
-    box-sizing: border-box;
-    padding-bottom: 24px;
-    display: flex;
-    flex-direction: column;
-    height: 740px;
-  }
-  Loader {
-    height: 100%;
-  }
-`;
+import styles from './ConnectionEdit.m.css';
 
 interface Props {
   item: IConnectionInfoParams;
@@ -38,6 +25,7 @@ export const ConnectionEdit = observer<Props>(function ConnectionEditNew({ item
   // const collapse = useCallback(() => tableContext?.setItemExpand(item, false), [tableContext, item]);
 
   const data = useConnectionFormState(connectionInfoResource, state => state.setOptions('edit', 'admin'));
+  const style = useS(styles);
 
   const projectId = item.projectId;
   const connectionId = item.connectionId;
@@ -46,15 +34,15 @@ export const ConnectionEdit = observer<Props>(function ConnectionEditNew({ item
     data.setConfig(projectId, { connectionId });
   }, [data, projectId, connectionId]);
 
-  return styled(styles)(
-    <box>
-      <Loader suspense>
+  return (
+    <div className={s(style, { box: true })}>
+      <Loader className={s(style, { loader: true })} suspense>
         <ConnectionFormLoader
           state={data}
           // onCancel={collapse}
           // onSave={collapse}
         />
       </Loader>
-    </box>,
+    </div>
   );
 });

webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/DriverList.m.css

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}

webapp/packages/plugin-connections-administration/src/Administration/Connections/CreateConnection/Manual/DriverList.tsx

@@ -7,46 +7,39 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useMemo, useState } from 'react';
-import styled, { css } from 'reshadow';
 
-import { ItemList, ItemListSearch, useFocus, useTranslate } from '@cloudbeaver/core-blocks';
+import { ItemList, ItemListSearch, s, useFocus, useS, useTranslate } from '@cloudbeaver/core-blocks';
 import type { DBDriver } from '@cloudbeaver/core-connections';
 
 import { Driver } from './Driver';
+import styles from './DriverList.m.css';
 
 interface Props {
   drivers: DBDriver[];
   className?: string;
   onSelect: (driverId: string) => void;
 }
 
-const style = css`
-  div {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-  }
-`;
-
 export const DriverList = observer<Props>(function DriverList({ drivers, className, onSelect }) {
   const [focusedRef] = useFocus<HTMLDivElement>({ focusFirstChild: true });
   const translate = useTranslate();
   const [search, setSearch] = useState('');
+  const style = useS(styles);
   const filteredDrivers = useMemo(() => {
     if (!search) {
       return drivers;
     }
     return drivers.filter(driver => driver.name?.toUpperCase().includes(search.toUpperCase()));
   }, [search, drivers]);
 
-  return styled(style)(
-    <div ref={focusedRef}>
+  return (
+    <div ref={focusedRef} className={s(style, { container: true })}>
       <ItemListSearch value={search} placeholder={translate('connections_driver_search_placeholder')} onChange={setSearch} />
       <ItemList className={className}>
         {filteredDrivers.map(driver => (
           <Driver key={driver.id} driver={driver} onSelect={onSelect} />
         ))}
       </ItemList>
-    </div>,
+    </div>
   );
 });

webapp/packages/plugin-connections-administration/src/ConnectionForm/ConnectionAccess/ConnectionAccess.m.css

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+.coloredContainer {
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.group {
+  max-height: 100%;
+  position: relative;
+  overflow: auto !important;
+}
+
+.loader {
+  z-index: 2;
+}