CB-4656 removes reshadow from plugin-connections (#2481)

Co-authored-by: s.teleshev <[email protected]> Co-authored-by: mr-anton-t <[email protected]>
dbeaver · Mar 22, 2024 · d4a9c65 · d4a9c65
1 parent 7f5fb19
commit d4a9c65
Show file tree

Hide file tree

Showing 13 changed files with 164 additions and 116 deletions.
diff --git a/webapp/packages/plugin-connections/package.json b/webapp/packages/plugin-connections/package.json
@@ -41,8 +41,7 @@
     "@cloudbeaver/plugin-top-app-bar": "~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": {

diff --git a/...pp/packages/plugin-connections/src/ConnectionForm/DriverProperties/DriverProperties.m.css b/...pp/packages/plugin-connections/src/ConnectionForm/DriverProperties/DriverProperties.m.css
@@ -0,0 +1,22 @@
+/*
+ * 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;
+  overflow: auto;
+}
+
+.group {
+  max-height: 100%;
+}
+
+.propertiesTable {
+  padding-top: 8px;
+  max-height: 100%;
+  box-sizing: border-box;
+}
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/DriverProperties/DriverProperties.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/DriverProperties/DriverProperties.tsx
@@ -8,33 +8,18 @@
 import { computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { useMemo, useState } from 'react';
-import styled, { css } from 'reshadow';
 
-import { ColoredContainer, Group, IProperty, PropertiesTable, useResource, useStyles } from '@cloudbeaver/core-blocks';
+import { ColoredContainer, Group, IProperty, PropertiesTable, s, useResource, useS } from '@cloudbeaver/core-blocks';
 import { DBDriverResource } from '@cloudbeaver/core-connections';
 import { TabContainerPanelComponent, useTab } from '@cloudbeaver/core-ui';
 import { uuid } from '@cloudbeaver/core-utils';
 
 import type { IConnectionFormProps } from '../IConnectionFormProps';
-
-const styles = css`
-  ColoredContainer {
-    flex: 1;
-    overflow: auto;
-  }
-  Group {
-    max-height: 100%;
-  }
-  PropertiesTable {
-    padding-top: 8px;
-    max-height: 100%;
-    box-sizing: border-box;
-  }
-`;
+import styles from './DriverProperties.m.css';
 
 export const DriverProperties: TabContainerPanelComponent<IConnectionFormProps> = observer(function DriverProperties({ tabId, state: formState }) {
-  const style = useStyles(styles);
   const { selected } = useTab(tabId);
+  const style = useS(styles);
 
   const [state] = useState(() => {
     const propertiesList: IProperty[] = observable([]);
@@ -93,10 +78,11 @@ export const DriverProperties: TabContainerPanelComponent<IConnectionFormProps>
     [driver.data],
   );
 
-  return styled(style)(
-    <ColoredContainer parent>
-      <Group box large>
+  return (
+    <ColoredContainer className={s(style, { coloredContainer: true })} parent>
+      <Group className={s(style, { group: true })} box large>
         <PropertiesTable
+          className={s(style, { propertiesTable: true })}
           properties={joinedProperties.get()}
           propertiesState={formState.config.properties}
           readOnly={formState.readonly}
@@ -105,6 +91,6 @@ export const DriverProperties: TabContainerPanelComponent<IConnectionFormProps>
           onRemove={state.remove}
         />
       </Group>
-    </ColoredContainer>,
+    </ColoredContainer>
   );
 });
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.m.css b/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.m.css
@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+
+.loader {
+  height: 100%;
+}
+
+.coloredContainer {
+  flex: 1;
+  overflow: auto;
+}
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx
@@ -7,7 +7,6 @@
  */
 import { runInAction } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import styled, { css } from 'reshadow';
 
 import { AUTH_PROVIDER_LOCAL_ID, AuthProvidersResource, UserInfoResource } from '@cloudbeaver/core-authentication';
 import {
@@ -16,25 +15,17 @@ import {
   Group,
   Loader,
   ObjectPropertyInfoForm,
+  s,
   TextPlaceholder,
   useResource,
-  useStyles,
+  useS,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
 import { createConnectionParam, DatabaseAuthModelsResource, DBDriverResource } from '@cloudbeaver/core-connections';
 import { TabContainerPanelComponent, useTab, useTabState } from '@cloudbeaver/core-ui';
 
 import type { IConnectionFormProps } from '../IConnectionFormProps';
-
-const style = css`
-  Loader {
-    height: 100%;
-  }
-  ColoredContainer {
-    flex: 1;
-    overflow: auto;
-  }
-`;
+import styles from './OriginInfo.m.css';
 
 export const OriginInfo: TabContainerPanelComponent<IConnectionFormProps> = observer(function OriginInfo({
   tabId,
@@ -44,7 +35,7 @@ export const OriginInfo: TabContainerPanelComponent<IConnectionFormProps> = obse
   const translate = useTranslate();
   const userInfoLoader = useResource(OriginInfo, UserInfoResource, undefined);
   const state = useTabState<Record<string, any>>();
-  const styles = useStyles(style);
+  const style = useS(styles);
   const driverLoader = useResource(OriginInfo, DBDriverResource, config.driverId ?? null);
   const authModeLoader = useResource(
     OriginInfo,
@@ -85,47 +76,47 @@ export const OriginInfo: TabContainerPanelComponent<IConnectionFormProps> = obse
   );
 
   if (connection.isLoading()) {
-    return styled(styles)(
-      <ColoredContainer>
-        <Loader key="static" />
-      </ColoredContainer>,
+    return (
+      <ColoredContainer className={s(style, { coloredContainer: true })}>
+        <Loader key="static" className={s(style, { loader: true })} />
+      </ColoredContainer>
     );
   }
 
   if (connection.exception) {
-    return styled(styles)(
-      <ColoredContainer>
+    return (
+      <ColoredContainer className={s(style, { coloredContainer: true })}>
         <ExceptionMessage exception={connection.exception} onRetry={connection.reload} />
-      </ColoredContainer>,
+      </ColoredContainer>
     );
   }
 
   if (!isAuthenticated) {
-    return styled(styles)(
-      <ColoredContainer parent>
+    return (
+      <ColoredContainer className={s(style, { coloredContainer: true })} parent>
         <TextPlaceholder>
           {translate('connections_public_connection_cloud_auth_required', undefined, {
             providerLabel: providerLoader.data?.label,
           })}
         </TextPlaceholder>
-      </ColoredContainer>,
+      </ColoredContainer>
     );
   }
 
   if (!connection.data?.origin.details || connection.data.origin.details.length === 0) {
-    return styled(styles)(
-      <ColoredContainer parent>
+    return (
+      <ColoredContainer className={s(style, { coloredContainer: true })} parent>
         <TextPlaceholder>{translate('connections_administration_connection_no_information')}</TextPlaceholder>
-      </ColoredContainer>,
+      </ColoredContainer>
     );
   }
 
-  return styled(styles)(
-    <ColoredContainer parent>
+  return (
+    <ColoredContainer className={s(style, { coloredContainer: true })} parent>
       <Group large gap>
         <ObjectPropertyInfoForm properties={connection.data.origin.details} state={state} readOnly small autoHide />
       </Group>
-      <Loader key="overlay" loading={connection.isLoading()} overlay />
-    </ColoredContainer>,
+      <Loader key="overlay" className={s(style, { loader: true })} loading={connection.isLoading()} overlay />
+    </ColoredContainer>
   );
 });
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.m.css b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.m.css
@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+.form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: auto;
+}
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx
@@ -7,7 +7,6 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback, useState } from 'react';
-import styled, { css } from 'reshadow';
 
 import {
   Button,
@@ -20,10 +19,11 @@ import {
   Group,
   GroupItem,
   InputField,
+  s,
   Switch,
   useAdministrationSettings,
   useResource,
-  useStyles,
+  useS,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
 import { NetworkHandlerResource, SSH_TUNNEL_ID } from '@cloudbeaver/core-connections';
@@ -33,17 +33,9 @@ import { isSafari } from '@cloudbeaver/core-utils';
 
 import type { IConnectionFormProps } from '../IConnectionFormProps';
 import { authTypes } from './authTypes';
+import styles from './SSH.m.css';
 import { SSHKeyUploader } from './SSHKeyUploader';
 
-const SSH_STYLES = css`
-  Form {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: auto;
-  }
-`;
-
 interface Props extends IConnectionFormProps {
   handlerState: NetworkHandlerConfigInput;
 }
@@ -73,7 +65,7 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
     setLoading(false);
   };
 
-  const styles = useStyles(SSH_STYLES);
+  const style = useS(styles);
   const translate = useTranslate();
   const disabled = formDisabled || loading;
   const enabled = handlerState.enabled || false;
@@ -91,8 +83,8 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
     handlerState.password = '';
   }, []);
 
-  return styled(styles)(
-    <Form>
+  return (
+    <Form className={s(style, { form: true })}>
       <ColoredContainer parent>
         <Group form gap keepSize large>
           <Switch id="ssh-enable-switch" name="enabled" state={handlerState} mod={['primary']} disabled={disabled || readonly}>
@@ -187,6 +179,6 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
           </GroupItem>
         </Group>
       </ColoredContainer>
-    </Form>,
+    </Form>
   );
 });
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSL/SSL.m.css b/webapp/packages/plugin-connections/src/ConnectionForm/SSL/SSL.m.css
@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+.form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: auto;
+}
diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSL/SSL.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/SSL/SSL.tsx
@@ -7,7 +7,6 @@
  */
 import { observer } from 'mobx-react-lite';
 import React from 'react';
-import styled, { css } from 'reshadow';
 
 import {
   ColoredContainer,
@@ -16,10 +15,11 @@ import {
   Group,
   GroupTitle,
   ObjectPropertyInfoForm,
+  s,
   Switch,
   useAdministrationSettings,
   useObjectPropertyCategories,
-  useStyles,
+  useS,
   useTranslate,
 } from '@cloudbeaver/core-blocks';
 import type { NetworkHandlerConfigInput, NetworkHandlerDescriptor } from '@cloudbeaver/core-sdk';
@@ -28,15 +28,7 @@ import { isSafari } from '@cloudbeaver/core-utils';
 
 import type { IConnectionFormProps } from '../IConnectionFormProps';
 import { SAVED_VALUE_INDICATOR } from './SAVED_VALUE_INDICATOR';
-
-const SSl_STYLES = css`
-  Form {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: auto;
-  }
-`;
+import styles from './SSL.m.css';
 
 interface Props extends IConnectionFormProps {
   handler: NetworkHandlerDescriptor;
@@ -48,7 +40,7 @@ export const SSL: TabContainerPanelComponent<Props> = observer(function SSL({ st
 
   const translate = useTranslate();
 
-  const styles = useStyles(SSl_STYLES);
+  const style = useS(styles);
   const { credentialsSavingEnabled } = useAdministrationSettings();
   const { categories, isUncategorizedExists } = useObjectPropertyCategories(handler.properties);
 
@@ -57,8 +49,8 @@ export const SSL: TabContainerPanelComponent<Props> = observer(function SSL({ st
   const initialHandler = info?.networkHandlersConfig?.find(h => h.id === handler.id);
   const autofillToken = isSafari ? 'section-connection-authentication-ssl section-ssl' : 'new-password';
 
-  return styled(styles)(
-    <Form>
+  return (
+    <Form className={s(style, { form: true })}>
       <ColoredContainer parent>
         <Group gap form large vertical>
           <Switch
@@ -114,6 +106,6 @@ export const SSL: TabContainerPanelComponent<Props> = observer(function SSL({ st
           )}
         </Group>
       </ColoredContainer>
-    </Form>,
+    </Form>
   );
 });