Merge branch 'devel' into CB-4654-migrate-plugin-authentication-to-cs…

…s-modules
dbeaver · Mar 21, 2024 · f3a7abc · f3a7abc
2 parents 674bf79 + a591122
commit f3a7abc
Show file tree

Hide file tree

Showing 13 changed files with 268 additions and 215 deletions.
diff --git a/.gitignore b/.gitignore
@@ -40,6 +40,7 @@ server/test/io.cloudbeaver.test.platform/workspace/.data/
 .classpath
 .settings/
 
+workspace-dev-ce/
 deploy/cloudbeaver
 server/**/target
 apps/**/target
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -21,7 +21,8 @@
     {
       "type": "java",
       "name": "CloudBeaver CE",
-      "cwd": "${workspaceFolder}/../opt/cbce",
+      "cwd": "${workspaceFolder}/workspace-dev-ce",
+      "preLaunchTask": "Generate dev proprties for CBCE",
       "request": "launch",
       "mainClass": "org.jkiss.dbeaver.launcher.DBeaverLauncher",
       "windows": {
@@ -75,8 +76,10 @@
           "-arch",
           "aarch64",
           "-nl",
-          "en_US",
-          "-showsplash"
+          "en",
+          "-showsplash",
+          "-web-config",
+          "conf/cloudbeaver.conf"
         ],
         "vmArgs": [
           "-XX:+IgnoreUnrecognizedVMOptions",

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -33,6 +33,35 @@
         "cwd": "${workspaceFolder}/webapp/packages/product-default"
       }
     },
+    {
+      "label": "Generate dev proprties for CBCE",
+      "type": "shell",
+      "command": "mvn",
+      "osx": {
+        "args": [
+          "package",
+          "-q",
+          "exec:java",
+          "-Dexec.args=-config ${workspaceFolder}/../idea-workspace-dbeaver/rcp-gen.properties -productFile ${workspaceFolder}/server/product/web-server/CloudbeaverServer.product -projectsFolder ${workspaceFolder}/../ -eclipse ${workspaceFolder}/../eclipse/Eclipse.app/Contents/Eclipse -output ${workspaceFolder}/../eclipse/workspace/.metadata/.plugins/org.eclipse.pde.core/CloudbeaverServer.product"
+        ]
+      },
+      "windows": {
+        "args": [
+          "package",
+          "-q",
+          "exec:java",
+          "-Dexec.args=-config ${workspaceFolder}/../idea-workspace-dbeaver/rcp-gen.properties -productFile ${workspaceFolder}/server/product/web-server/CloudbeaverServer.product -projectsFolder ${workspaceFolder}/../ -eclipse ${workspaceFolder}/../eclipse/eclipse -output ${workspaceFolder}/../eclipse/workspace/.metadata/.plugins/org.eclipse.pde.core/CloudbeaverServer.product"
+        ]
+      },
+      "options": {
+        "cwd": "${workspaceFolder}/../idea-rcp-launch-config-generator"
+      },
+      "presentation": {
+        "reveal": "silent",
+        "close": true,
+        "clear": false
+      }
+    },
     {
       "label": "Build CE",
       "type": "shell",

diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.m.css b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.m.css
@@ -0,0 +1,108 @@
+.container,
+.button {
+  composes: theme-ripple from global;
+}
+
+.container {
+  box-sizing: border-box;
+  display: inline-flex;
+  padding: 0px 1px;
+}
+
+.name,
+.value {
+  composes: theme-typography--caption from global;
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex: 1;
+  padding: 4px 0;
+
+  & .shadowInput {
+    height: 24px;
+    padding: 0 36px 0 12px;
+  }
+}
+
+.value,
+.name {
+  margin-left: 24px;
+}
+
+.name {
+  flex: 0 0 auto;
+  width: 276px;
+}
+
+.remove {
+  position: relative;
+  flex: 0 0 auto;
+  align-items: center;
+  display: flex;
+  opacity: 0;
+}
+
+.select {
+  flex: 0 0 auto;
+  align-items: center;
+  display: flex;
+}
+
+.container:hover .remove {
+  opacity: 1;
+}
+
+.shadowInput {
+  composes: theme-background-surface from global;
+}
+
+.name .shadowInput,
+.value .shadowInput {
+  box-sizing: border-box;
+  font: inherit;
+  color: inherit;
+  width: 100%;
+  outline: none;
+
+  &.edited {
+    font-weight: 600;
+  }
+
+  &:global([readonly]),
+  &:not(:focus):not([data-focus='true']) {
+    background: transparent !important;
+    border: solid 2px transparent !important;
+  }
+}
+
+.icon,
+.iconOrImage {
+  height: 16px;
+  display: block;
+}
+
+.select .icon,
+.select .iconOrImage {
+  &.focus {
+    transform: rotate(180deg);
+  }
+}
+
+.button {
+  background: transparent;
+  outline: none;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.button,
+.propertyValueSelector {
+  composes: theme-form-element-radius from global;
+  margin: 2px;
+  overflow: hidden;
+}
+
+.error {
+  composes: theme-text-error from global;
+}
diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx
@@ -7,111 +7,17 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import styled, { css, use } from 'reshadow';
 
 import { ShadowInput } from '../FormControls/ShadowInput';
 import { Icon } from '../Icon';
 import { IconOrImage } from '../IconOrImage';
 import { useTranslate } from '../localization/useTranslate';
+import { s } from '../s';
+import { useS } from '../useS';
 import type { IProperty } from './IProperty';
+import classes from './PropertyItem.m.css';
 import { PropertyValueSelector } from './PropertyValueSelector';
 
-const styles = css`
-  [|error] {
-    composes: theme-text-error from global;
-  }
-  property-item,
-  button {
-    composes: theme-ripple from global;
-  }
-  property-item {
-    box-sizing: border-box;
-    display: inline-flex;
-    padding: 0px 1px;
-  }
-  property-name,
-  property-value {
-    composes: theme-typography--caption from global;
-    position: relative;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    flex: 1;
-    padding: 4px 0;
-
-    & ShadowInput {
-      height: 24px;
-      padding: 0 36px 0 12px;
-    }
-  }
-  property-value,
-  property-name {
-    margin-left: 24px;
-  }
-  property-name {
-    flex: 0 0 auto;
-    width: 276px;
-  }
-  property-remove {
-    position: relative;
-    flex: 0 0 auto;
-    align-items: center;
-    display: flex;
-    opacity: 0;
-  }
-  property-select {
-    flex: 0 0 auto;
-    align-items: center;
-    display: flex;
-  }
-  property-item:hover property-remove {
-    opacity: 1;
-  }
-  ShadowInput {
-    composes: theme-background-surface from global;
-  }
-  property-name ShadowInput,
-  property-value ShadowInput {
-    box-sizing: border-box;
-    font: inherit;
-    color: inherit;
-    width: 100%;
-    outline: none;
-
-    &[|edited] {
-      font-weight: 600;
-    }
-    &:global([readonly]),
-    &:not(:focus):not([|focus]) {
-      background: transparent !important;
-      border: solid 2px transparent !important;
-    }
-  }
-  Icon,
-  IconOrImage {
-    height: 16px;
-    display: block;
-  }
-  property-select Icon,
-  property-select IconOrImage {
-    &[|focus] {
-      transform: rotate(180deg);
-    }
-  }
-  button {
-    background: transparent;
-    outline: none;
-    padding: 4px;
-    cursor: pointer;
-  }
-  button,
-  PropertyValueSelector {
-    composes: theme-form-element-radius from global;
-    margin: 2px;
-    overflow: hidden;
-  }
-`;
-
 interface Props {
   property: IProperty;
   value?: string;
@@ -123,6 +29,7 @@ interface Props {
 }
 
 export const PropertyItem = observer<Props>(function PropertyItem({ property, value, onNameChange, onValueChange, onRemove, error, readOnly }) {
+  const styles = useS(classes);
   const translate = useTranslate();
   const isDeletable = !readOnly && !property.displayName;
   const edited = value !== undefined && value !== property.defaultValue;
@@ -148,11 +55,12 @@ export const PropertyItem = observer<Props>(function PropertyItem({ property, va
   const keyPlaceholder = String(property.keyPlaceholder);
   const valuePlaceholder = String(property.valuePlaceholder);
 
-  return styled(styles)(
-    <property-item>
-      <property-name title={property.description} {...use({ error })}>
+  return (
+    <div className={s(styles, { container: true })}>
+      <div className={s(styles, { name: true, error })} title={property.description}>
         <ShadowInput
           ref={keyInputRef}
+          className={s(styles, { shadowInput: true })}
           type="text"
           name={property.id}
           placeholder={keyPlaceholder}
@@ -162,48 +70,49 @@ export const PropertyItem = observer<Props>(function PropertyItem({ property, va
         >
           {property.displayName || property.key}
         </ShadowInput>
-      </property-name>
-      <property-value ref={setValueRef} title={String(propertyValue)}>
+      </div>
+      <div ref={setValueRef} className={s(styles, { value: true })} title={String(propertyValue)}>
         <ShadowInput
+          className={s(styles, { shadowInput: true, edited })}
           type="text"
           name={`${property.id}_value`}
           placeholder={valuePlaceholder}
           autoComplete="none"
           readOnly={readOnly}
           data-focus={focus}
           onChange={handleValueChange}
-          {...use({ focus, edited })}
         >
           {propertyValue}
         </ShadowInput>
         {edited && !isDeletable && (
-          <property-remove title={translate('core_blocks_properties_table_item_reset')}>
-            <button type="button" onClick={handleRevert}>
-              <IconOrImage icon="/icons/data_revert_all_sm.svg" viewBox="0 0 16 16" />
+          <div className={s(styles, { remove: true })} title={translate('core_blocks_properties_table_item_reset')}>
+            <button className={s(styles, { button: true })} type="button" onClick={handleRevert}>
+              <IconOrImage className={s(styles, { iconOrImage: true })} icon="/icons/data_revert_all_sm.svg" viewBox="0 0 16 16" />
             </button>
-          </property-remove>
+          </div>
         )}
         {isDeletable && (
-          <property-remove title={translate('core_blocks_properties_table_item_remove')}>
-            <button type="button" onClick={handleRemove}>
-              <Icon name="reject" viewBox="0 0 11 11" />
+          <div className={s(styles, { remove: true })} title={translate('core_blocks_properties_table_item_remove')}>
+            <button className={s(styles, { button: true })} type="button" onClick={handleRemove}>
+              <Icon className={s(styles, { icon: true })} name="reject" viewBox="0 0 11 11" />
             </button>
-          </property-remove>
+          </div>
         )}
         {!readOnly && property.validValues && property.validValues.length > 0 && (
-          <property-select>
+          <div className={s(styles, { select: true })}>
             <PropertyValueSelector
+              className={s(styles, { propertyValueSelector: true })}
               propertyName={property.id}
               values={property.validValues}
               container={valueRef}
               onSelect={handleValueChange}
               onSwitch={setMenuOpen}
             >
-              <Icon name="arrow" viewBox="0 0 16 16" {...use({ focus })} />
+              <Icon className={s(styles, { icon: true, focus })} name="arrow" viewBox="0 0 16 16" />
             </PropertyValueSelector>
-          </property-select>
+          </div>
         )}
-      </property-value>
-    </property-item>,
+      </div>
+    </div>
   );
 });
diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertyValueSelector.m.css b/webapp/packages/core-blocks/src/PropertiesTable/PropertyValueSelector.m.css
@@ -0,0 +1,7 @@
+.menuButton {
+  composes: theme-ripple from global;
+  background: transparent;
+  outline: none;
+  padding: 4px;
+  cursor: pointer;
+}