diff --git a/webapp/packages/core-app/src/shared/ToolsPanel/LogViewer/LogViewerInfoPanel.tsx b/webapp/packages/core-app/src/shared/ToolsPanel/LogViewer/LogViewerInfoPanel.tsx index 78329a55fa..bc32a951ca 100644 --- a/webapp/packages/core-app/src/shared/ToolsPanel/LogViewer/LogViewerInfoPanel.tsx +++ b/webapp/packages/core-app/src/shared/ToolsPanel/LogViewer/LogViewerInfoPanel.tsx @@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite'; import { useCallback } from 'react'; import styled, { css } from 'reshadow'; -import { Button, TextareaNew, useClipboard } from '@cloudbeaver/core-blocks'; +import { Button, Textarea, useClipboard } from '@cloudbeaver/core-blocks'; import { useTranslate } from '@cloudbeaver/core-localization'; import type { ILogEntry } from './ILogEntry'; @@ -53,7 +53,7 @@ const styles = css` type, message { margin-bottom: 12px; } - TextareaNew { + Textarea { flex: 1; } `; @@ -91,7 +91,7 @@ export const LogViewerInfoPanel = observer(function LogViewerInfoPanel({ {typeInfo} {selectedItem.message} - = function CheckboxM style ) )( - - + + - + - + {ripple && ( - + )} {label && (id || rest.name) && {label}} diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx index 9e2cf2b8bf..b919b4f57f 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx @@ -14,10 +14,25 @@ import { baseFormControlStyles } from '../baseFormControlStyles'; import { isControlPresented } from '../isControlPresented'; import { Checkbox, CheckboxBaseProps, CheckboxType, ICheckboxControlledProps, ICheckboxObjectProps } from './Checkbox'; -const fieldCheckboxStyles = css` +const style = css` Checkbox { margin: -10px; } + field { + display: flex; + align-items: flex-end; + white-space: pre-wrap; + } + field-label { + composes: theme-typography--body2 from global; + cursor: pointer; + user-select: none; + padding-left: 10px; + line-height: 16px; + } + Checkbox[disabled] + field-label { + cursor: auto; + } `; export const FieldCheckbox: CheckboxType = function FieldCheckbox({ @@ -25,16 +40,22 @@ export const FieldCheckbox: CheckboxType = function FieldCheckbox({ className, ...rest }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { - const styles = useStyles(baseFormControlStyles, fieldCheckboxStyles); + const styles = useStyles(baseFormControlStyles, style); if (rest.autoHide && !isControlPresented(rest.name, rest.state)) { return null; } return styled(styles)( - - {children} + + + {children} + ); }; diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx deleted file mode 100644 index 0c6050096c..0000000000 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 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 styled, { css } from 'reshadow'; - -import { useStyles } from '@cloudbeaver/core-theming'; - -import { baseFormControlStylesNew } from '../baseFormControlStylesNew'; -import { isControlPresented } from '../isControlPresented'; -import { Checkbox, CheckboxBaseProps, CheckboxType, ICheckboxControlledProps, ICheckboxObjectProps } from './Checkbox'; - -const fieldCheckboxStyles = css` - Checkbox { - margin: -10px; - } - field { - display: flex; - align-items: flex-end; - white-space: pre-wrap; - } - field-label { - composes: theme-typography--body2 from global; - cursor: pointer; - user-select: none; - padding-left: 10px; - line-height: 16px; - } - Checkbox[disabled] + field-label { - cursor: auto; - } -`; - -export const FieldCheckboxNew: CheckboxType = function FieldCheckboxNew({ - children, - className, - ...rest -}: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { - const styles = useStyles(baseFormControlStylesNew, fieldCheckboxStyles); - - if (rest.autoHide && !isControlPresented(rest.name, rest.state)) { - return null; - } - - return styled(styles)( - - - - {children} - - - ); -}; diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx index 67e3dee19a..09b630f321 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx @@ -11,6 +11,7 @@ import styled, { css } from 'reshadow'; import { useStyles, composes } from '@cloudbeaver/core-theming'; +import { filterLayoutFakeProps } from '../../Containers/filterLayoutFakeProps'; import { baseFormControlStyles } from '../baseFormControlStyles'; import { isControlPresented } from '../isControlPresented'; import type { ICheckboxControlledProps, ICheckboxObjectProps } from './Checkbox'; @@ -18,34 +19,39 @@ import { useCheckboxState } from './useCheckboxState'; const switchStyles = composes( css` - switch-control { - composes: theme-switch from global; - } - switch-control-track { - composes: theme-switch__track from global; - } - switch-input { - composes: theme-switch_native-control from global; - } - switch-control-underlay { - composes: theme-switch__thumb-underlay from global; - } - switch-control-thumb { - composes: theme-switch__thumb from global; - } - radio-ripple { - composes: theme-radio_ripple from global; - } + switch-control { + composes: theme-switch from global; + } + switch-control-track { + composes: theme-switch__track from global; + } + switch-input { + composes: theme-switch_native-control from global; + } + switch-control-underlay { + composes: theme-switch__thumb-underlay from global; + } + switch-control-thumb { + composes: theme-switch__thumb from global; + } + radio-ripple { + composes: theme-radio_ripple from global; + } `, css` - field { - max-width: 450px; + switch-body { + display: flex; + align-items: center; } - field label { - width: auto; - } - switch-control { - margin-left: 2px; + field-label { + composes: theme-typography--body1 from global; + cursor: pointer; + user-select: none; + display: block; + padding-left: 18px; + min-width: 50px; + white-space: pre-wrap; + font-weight: 500; } ` ); @@ -79,7 +85,7 @@ const switchState = { interface IBaseProps { mod?: Array; - description?: string; + description?: React.ReactNode; } interface SwitchType { @@ -91,7 +97,6 @@ export const Switch: SwitchType = observer(function Switch({ name, value, defaultValue, - label, description, state, checked, @@ -113,6 +118,7 @@ export const Switch: SwitchType = observer(function Switch({ name, onChange, }); + rest = filterLayoutFakeProps(rest); const styles = useStyles( baseFormControlStyles, switchStyles, @@ -126,27 +132,28 @@ export const Switch: SwitchType = observer(function Switch({ } return styled(styles)( - - {children} - - - - - - - - - {description} + + + + + + + + + + {children} + + {description} ); }); diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx deleted file mode 100644 index 4745f7131d..0000000000 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx +++ /dev/null @@ -1,159 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 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 { observer } from 'mobx-react-lite'; -import styled, { css } from 'reshadow'; - -import { useStyles, composes } from '@cloudbeaver/core-theming'; - -import { filterLayoutFakeProps } from '../../Containers/filterLayoutFakeProps'; -import { baseFormControlStylesNew } from '../baseFormControlStylesNew'; -import { isControlPresented } from '../isControlPresented'; -import type { ICheckboxControlledProps, ICheckboxObjectProps } from './Checkbox'; -import { useCheckboxState } from './useCheckboxState'; - -const switchStyles = composes( - css` - switch-control { - composes: theme-switch from global; - } - switch-control-track { - composes: theme-switch__track from global; - } - switch-input { - composes: theme-switch_native-control from global; - } - switch-control-underlay { - composes: theme-switch__thumb-underlay from global; - } - switch-control-thumb { - composes: theme-switch__thumb from global; - } - radio-ripple { - composes: theme-radio_ripple from global; - } - `, - css` - switch-body { - display: flex; - align-items: center; - } - field-label { - composes: theme-typography--body1 from global; - cursor: pointer; - user-select: none; - display: block; - padding-left: 18px; - min-width: 50px; - white-space: pre-wrap; - font-weight: 500; - } - ` -); - -const switchMod = { - primary: composes( - css` - switch-control { - composes: theme-switch_primary from global; - } - ` - ), -}; - -const switchState = { - disabled: composes( - css` - switch-control { - composes: theme-switch--disabled from global; - } - ` - ), - checked: composes( - css` - switch-control { - composes: theme-switch--checked from global; - } - ` - ), -}; - -interface IBaseProps { - mod?: Array; - description?: React.ReactNode; -} - -interface SwitchType { - (props: IBaseProps & ICheckboxControlledProps): React.ReactElement | null; - (props: IBaseProps & ICheckboxObjectProps): React.ReactElement | null; -} - -export const SwitchNew: SwitchType = observer(function SwitchNew({ - name, - value, - defaultValue, - description, - state, - checked, - defaultChecked, - className, - children, - onChange, - mod = [], - autoHide, - disabled, - ...rest -}: IBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { - const checkboxState = useCheckboxState({ - value, - defaultValue, - checked, - defaultChecked, - state, - name, - onChange, - }); - rest = filterLayoutFakeProps(rest); - const styles = useStyles( - baseFormControlStylesNew, - switchStyles, - ...mod.map(mod => switchMod[mod]), - disabled && switchState.disabled, - checkboxState.checked && switchState.checked - ); - - if (autoHide && !isControlPresented(name, state)) { - return null; - } - - return styled(styles)( - - - - - - - - - - {children} - - {description} - - ); -}); diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx index 232ec9dfd9..73a03c2818 100644 --- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx @@ -8,7 +8,7 @@ import { observer } from 'mobx-react-lite'; import { - useLayoutEffect, useCallback, useState, useRef, useContext + useLayoutEffect, useCallback, useState, useRef, useContext, useEffect } from 'react'; import { useMenuState, @@ -20,6 +20,8 @@ import styled, { css, use } from 'reshadow'; import { useStyles, composes } from '@cloudbeaver/core-theming'; +import { filterLayoutFakeProps } from '../Containers/filterLayoutFakeProps'; +import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps'; import { Icon } from '../Icon'; import { IconButton } from '../IconButton'; import { baseFormControlStyles } from './baseFormControlStyles'; @@ -30,7 +32,7 @@ const styles = composes( Menu { composes: theme-text-on-surface theme-background-surface from global; } - MenuItem, MenuButton { + MenuItem { composes: theme-ripple from global; } `, @@ -38,11 +40,25 @@ const styles = composes( field input { margin: 0; } + field-label { + display: block; + padding-bottom: 10px; + composes: theme-typography--body1 from global; + font-weight: 500; + } + input { + padding-right: 12px !important; + } MenuButton { + position: absolute; + right: 0; background: transparent; outline: none; padding: 4px; cursor: pointer; + &:hover { + opacity: 0.7; + } } Menu { @@ -59,7 +75,7 @@ const styles = composes( & MenuItem { background: transparent; display: block; - padding: 4px 36px; + padding: 4px 12px; text-align: left; outline: none; color: inherit; @@ -82,12 +98,11 @@ const styles = composes( ` ); -type BaseProps = Omit, 'onChange' | 'onSelect' | 'name' | 'value'> & { +type BaseProps = Omit, 'onChange' | 'onSelect' | 'name' | 'value' | 'defaultValue'> & ILayoutSizeProps & { propertyName?: string; items: TValue[]; - mod?: 'surface'; - long?: boolean; searchable?: boolean; + defaultValue?: string; keySelector: (item: TValue) => TKey; valueSelector: (item: TValue) => string; onSwitch?: (state: boolean) => void; @@ -98,7 +113,6 @@ type ControlledProps = BaseProps & { value?: string; onSelect?: (value: TKey, name: string | undefined, prev: TKey) => void; onChange?: (value: string, name: string | undefined) => any; - state?: never; }; @@ -107,7 +121,6 @@ type ObjectProps = BaseProps void; onChange?: (value: string, name: TKey | undefined) => any; - value?: never; }; @@ -118,6 +131,7 @@ interface ComboboxType { export const Combobox: ComboboxType = observer(function Combobox({ value: controlledValue, + defaultValue, name, state, propertyName, @@ -125,10 +139,9 @@ export const Combobox: ComboboxType = observer(function Combobox({ children, title, className, - mod, - long, searchable, readOnly, + disabled, keySelector = v => v, valueSelector = v => v, onChange = () => {}, @@ -136,6 +149,7 @@ export const Combobox: ComboboxType = observer(function Combobox({ onSwitch, ...rest }: ControlledProps | ObjectProps) { + rest = filterLayoutFakeProps(rest); const context = useContext(FormContext); const ref = useRef(null); const menu = useMenuState({ @@ -143,15 +157,19 @@ export const Combobox: ComboboxType = observer(function Combobox({ currentId: null, gutter: 4, }); - const [searchValue, setSearchValue] = useState(''); - let value: string | number | readonly string[] | undefined = controlledValue; + const [searchValue, setSearchValue] = useState(null); + let value: string | number | readonly string[] | undefined = controlledValue ?? defaultValue ?? undefined; - if (state) { - if (name in state) { - value = state[name]; - } else if (rest.defaultValue !== undefined) { - value = rest.defaultValue; - } + if (state && name !== undefined && name in state) { + value = state[name]; + } + + const selectedItem = items.find(item => keySelector(item) === value); + + let inputValue = (selectedItem ? valueSelector(selectedItem) : searchValue) ?? ''; + + if (searchValue !== null && selectedItem && valueSelector(selectedItem) !== searchValue) { + inputValue = searchValue; } const handleChange = useCallback( @@ -175,7 +193,7 @@ export const Combobox: ComboboxType = observer(function Combobox({ if (context) { context.change(null, name); } - setSearchValue(''); + setSearchValue(null); }, [value, state, name, menu, context, onSelect] ); @@ -193,55 +211,55 @@ export const Combobox: ComboboxType = observer(function Combobox({ if (context) { context.change(id, name); } + setSearchValue(null); }, [value, state, name, menu, context, onSelect] ); + useEffect(() => { + if (ref.current === document.activeElement && inputValue === searchValue) { + menu.show(); + } + }); + useLayoutEffect(() => onSwitch?.(menu.visible), [onSwitch, menu.visible]); - const selectedItem = items.find(item => keySelector(item) === value); const filteredItems = items.filter( - item => selectedItem || !searchValue || valueSelector(item).toUpperCase().includes(searchValue.toUpperCase()) + item => !searchValue || valueSelector(item).toUpperCase().includes(searchValue.toUpperCase()) ); - if (ref.current === document.activeElement && !selectedItem && searchValue) { - menu.show(); - } - return styled(useStyles(baseFormControlStyles, styles))( - - {children} - + + {children}{rest.required && ' *'} + {(selectedItem && !readOnly && searchable) && ( )} - {!readOnly && ( - <> - - - {filteredItems.map(item => ( - - {valueSelector(item)} - - ))} - - - )} + + + {filteredItems.map(item => ( + + {valueSelector(item)} + + ))} + ); diff --git a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx deleted file mode 100644 index f9a05750c6..0000000000 --- a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx +++ /dev/null @@ -1,266 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 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 { observer } from 'mobx-react-lite'; -import { - useLayoutEffect, useCallback, useState, useRef, useContext, useEffect -} from 'react'; -import { - useMenuState, - Menu, - MenuItem, - MenuButton -} from 'reakit/Menu'; -import styled, { css, use } from 'reshadow'; - -import { useStyles, composes } from '@cloudbeaver/core-theming'; - -import { filterLayoutFakeProps } from '../Containers/filterLayoutFakeProps'; -import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps'; -import { Icon } from '../Icon'; -import { IconButton } from '../IconButton'; -import { baseFormControlStylesNew } from './baseFormControlStylesNew'; -import { FormContext } from './FormContext'; - -const styles = composes( - css` - Menu { - composes: theme-text-on-surface theme-background-surface from global; - } - MenuItem { - composes: theme-ripple from global; - } - `, - css` - field input { - margin: 0; - } - field-label { - display: block; - padding-bottom: 10px; - composes: theme-typography--body1 from global; - font-weight: 500; - } - input { - padding-right: 12px !important; - } - MenuButton { - position: absolute; - right: 0; - background: transparent; - outline: none; - padding: 4px; - cursor: pointer; - &:hover { - opacity: 0.7; - } - } - - Menu { - composes: theme-typography--caption theme-elevation-z3 from global; - display: flex; - flex-direction: column; - width: 100%; - max-height: 150px; - overflow: auto; - outline: none; - padding: 4px 0; - z-index: 999; - - & MenuItem { - background: transparent; - display: block; - padding: 4px 12px; - text-align: left; - outline: none; - color: inherit; - cursor: pointer; - } - } - Icon { - height: 16px; - display: block; - } - MenuButton Icon[|focus] { - transform: rotate(180deg); - } - input-box { - flex: 1; - position: relative; - display: flex; - align-items: center; - } - ` -); - -type BaseProps = Omit, 'onChange' | 'onSelect' | 'name' | 'value' | 'defaultValue'> & ILayoutSizeProps & { - propertyName?: string; - items: TValue[]; - searchable?: boolean; - defaultValue?: string; - keySelector: (item: TValue) => TKey; - valueSelector: (item: TValue) => string; - onSwitch?: (state: boolean) => void; -}; - -type ControlledProps = BaseProps & { - name?: string; - value?: string; - onSelect?: (value: TKey, name: string | undefined, prev: TKey) => void; - onChange?: (value: string, name: string | undefined) => any; - state?: never; -}; - -type ObjectProps = BaseProps & { - name: TKey; - state: TState; - onSelect?: (value: TState[TKey], name: TKey | undefined, prev: TState[TKey]) => void; - onChange?: (value: string, name: TKey | undefined) => any; - value?: never; -}; - -interface ComboboxType { - (props: ControlledProps): JSX.Element; - (props: ObjectProps): JSX.Element; -} - -export const ComboboxNew: ComboboxType = observer(function ComboboxNew({ - value: controlledValue, - defaultValue, - name, - state, - propertyName, - items, - children, - title, - className, - searchable, - readOnly, - disabled, - keySelector = v => v, - valueSelector = v => v, - onChange = () => {}, - onSelect, - onSwitch, - ...rest -}: ControlledProps | ObjectProps) { - rest = filterLayoutFakeProps(rest); - const context = useContext(FormContext); - const ref = useRef(null); - const menu = useMenuState({ - placement: 'bottom-end', - currentId: null, - gutter: 4, - }); - const [searchValue, setSearchValue] = useState(null); - let value: string | number | readonly string[] | undefined = controlledValue ?? defaultValue ?? undefined; - - if (state && name !== undefined && name in state) { - value = state[name]; - } - - const selectedItem = items.find(item => keySelector(item) === value); - - let inputValue = (selectedItem ? valueSelector(selectedItem) : searchValue) ?? ''; - - if (searchValue !== null && selectedItem && valueSelector(selectedItem) !== searchValue) { - inputValue = searchValue; - } - - const handleChange = useCallback( - (event: React.ChangeEvent) => { - const value = event.target.value; - onChange(value, name); - setSearchValue(value); - }, - [name, onChange] - ); - - const handleRemove = useCallback( - () => { - menu.hide(); - if (state) { - state[name] = null; - } - if (onSelect) { - onSelect(null, name, value); - } - if (context) { - context.change(null, name); - } - setSearchValue(null); - }, - [value, state, name, menu, context, onSelect] - ); - - const handleMenuSelect = useCallback( - (event: React.MouseEvent) => { - menu.hide(); - const id = event.currentTarget.id; - if (state) { - state[name] = id; - } - if (onSelect) { - onSelect(id, name, value); - } - if (context) { - context.change(id, name); - } - setSearchValue(null); - }, - [value, state, name, menu, context, onSelect] - ); - - useEffect(() => { - if (ref.current === document.activeElement && inputValue === searchValue) { - menu.show(); - } - }); - - useLayoutEffect(() => onSwitch?.(menu.visible), [onSwitch, menu.visible]); - - const filteredItems = items.filter( - item => !searchValue || valueSelector(item).toUpperCase().includes(searchValue.toUpperCase()) - ); - - return styled(useStyles(baseFormControlStylesNew, styles))( - - {children}{rest.required && ' *'} - - - {(selectedItem && !readOnly && searchable) && ( - - )} - - - {filteredItems.map(item => ( - - {valueSelector(item)} - - ))} - - - - ); -}); diff --git a/webapp/packages/core-blocks/src/FormControls/Filter.tsx b/webapp/packages/core-blocks/src/FormControls/Filter.tsx index ce3017bf13..f76ad946ce 100644 --- a/webapp/packages/core-blocks/src/FormControls/Filter.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Filter.tsx @@ -14,7 +14,7 @@ import { composes, useStyles } from '@cloudbeaver/core-theming'; import { IconButton } from '../IconButton'; import { useFocus } from '../useFocus'; -import { InputFieldNew } from './InputFieldNew'; +import { InputField } from './InputField'; const styles = css` filter-container { @@ -22,7 +22,7 @@ const styles = css` min-width: 24px; min-height: 24px; } - InputFieldNew { + InputField { display: none; width: 300px; &[|max] { @@ -148,7 +148,7 @@ export const Filter = observer>(functio return styled(useStyles(styles, toggleMode && toggleModeButtonStyle))( - = function FormFieldDescription({ label, - long, - short, - raw, + title, children, className, }) { - return styled(useStyles(baseFormControlStyles))( - + const styles = useStyles(baseFormControlStyles, style); + + return styled(styles)( + {label && {label}} - + {children} diff --git a/webapp/packages/core-blocks/src/FormControls/FormFieldDescriptionNew.tsx b/webapp/packages/core-blocks/src/FormControls/FormFieldDescriptionNew.tsx deleted file mode 100644 index d562f1c668..0000000000 --- a/webapp/packages/core-blocks/src/FormControls/FormFieldDescriptionNew.tsx +++ /dev/null @@ -1,45 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 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 styled from 'reshadow'; -import { css } from 'reshadow'; - -import { useStyles } from '@cloudbeaver/core-theming'; - -import { baseFormControlStylesNew } from './baseFormControlStylesNew'; - -const formFieldDescriptionNewStyles = css` - field-label { - composes: theme-typography--body1 from global; - font-weight: 500; - } -`; - -interface Props { - label?: string; - title?: string; - className?: string; -} - -export const FormFieldDescriptionNew: React.FC = function FormFieldDescriptionNew({ - label, - title, - children, - className, -}) { - const styles = useStyles(baseFormControlStylesNew, formFieldDescriptionNewStyles); - - return styled(styles)( - - {label && {label}} - - {children} - - - ); -}; diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx index ef82d0a25e..eeda9371d0 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx @@ -7,26 +7,73 @@ */ import { observer } from 'mobx-react-lite'; -import { useCallback, useContext } from 'react'; -import styled, { use } from 'reshadow'; +import { useCallback, useContext, useState } from 'react'; +import styled, { use, css } from 'reshadow'; -import { useStyles } from '@cloudbeaver/core-theming'; +import { useTranslate } from '@cloudbeaver/core-localization'; +import { ComponentStyle, composes, useStyles } from '@cloudbeaver/core-theming'; +import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps'; +import { Icon } from '../Icon'; import { baseFormControlStyles } from './baseFormControlStyles'; import { FormContext } from './FormContext'; import { isControlPresented } from './isControlPresented'; -type BaseProps = Omit, 'onChange' | 'name' | 'value'> & { +const INPUT_FIELD_STYLES = composes( + css` + Icon { + composes: theme-text-on-secondary from global; + } +`, + css` + field-label { + display: block; + composes: theme-typography--body1 from global; + font-weight: 500; + } + field-label:not(:empty) { + padding-bottom: 10px; + } + input-container { + position: relative; + } + icon-container { + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + display: flex; + width: 24px; + height: 24px; + cursor: pointer; + & Icon { + width: 100%; + height: 100%; + } + } + input[disabled] + icon-container { + cursor: auto; + opacity: 0.8; + } + input:not(:only-child) { + padding-right: 32px !important; + } +`); + +type BaseProps = Omit, 'onChange' | 'name' | 'value'> & ILayoutSizeProps & { description?: string; mod?: 'surface'; - long?: boolean; - short?: boolean; + ref?: React.Ref; + style?: ComponentStyle; + onCustomCopy?: () => void; }; type ControlledProps = BaseProps & { name?: string; - value?: string; - onChange?: (value: string, name?: string) => any; + value?: string | number; + mapState?: (value: string | number) => string | number; + mapValue?: (value: string | number) => string | number; + onChange?: (value: string | number, name?: string) => any; state?: never; autoHide?: never; }; @@ -34,7 +81,9 @@ type ControlledProps = BaseProps & { type ObjectProps = BaseProps & { name: TKey; state: TState; - onChange?: (value: string, name: TKey) => any; + mapState?: (value: TState[TKey]) => TState[TKey] | string | number; + mapValue?: (value: TState[TKey]) => TState[TKey]; + onChange?: (value: TState[TKey], name: TKey) => any; autoHide?: boolean; value?: never; }; @@ -46,61 +95,107 @@ interface InputFieldType { export const InputField: InputFieldType = observer(function InputField({ name, + style, value: valueControlled, defaultValue, required, state, + mapState, + mapValue, children, className, description, mod, - long, - short, + fill, + small, + medium, + large, + tiny, autoHide, onChange, + onCustomCopy, ...rest -}: ControlledProps | ObjectProps) { - const styles = useStyles(baseFormControlStyles); +}: ControlledProps | ObjectProps, ref: React.Ref) { + const [passwordRevealed, setPasswordRevealed] = useState(false); + const translate = useTranslate(); + const styles = useStyles(baseFormControlStyles, INPUT_FIELD_STYLES, style); const context = useContext(FormContext); + const revealPassword = useCallback(() => { + if (rest.disabled) { + return; + } + + setPasswordRevealed(prev => !prev); + }, [rest.disabled]); + const handleChange = useCallback((event: React.ChangeEvent) => { + const value = mapValue?.(event.target.value) ?? event.target.value; + if (state) { - state[name] = event.target.value; + state[name] = value; } if (onChange) { - onChange(event.target.value, name); + onChange(value, name); } if (context) { - context.change(event.target.value, name); + context.change(value, name); } }, [state, name, context, onChange]); + if (autoHide && !isControlPresented(name, state, defaultValue)) { + return null; + } + let value: any = valueControlled ?? defaultValue ?? undefined; if (state && name !== undefined && name in state) { value = state[name]; } - if (autoHide && !isControlPresented(name, state, defaultValue)) { - return null; + if (mapState) { + value = mapState(value); } + const showRevealPasswordButton = rest.type === 'password' && !rest.readOnly; + return styled(styles)( - - {children} {required && '*'} - + + {children}{required && ' *'} + + + {showRevealPasswordButton && ( + + + + )} + {onCustomCopy && ( + + + + )} + {description && ( - + {description} )} ); -}); +}, { forwardRef: true }); diff --git a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx deleted file mode 100644 index 55f2a57fc6..0000000000 --- a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx +++ /dev/null @@ -1,201 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 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 { observer } from 'mobx-react-lite'; -import { useCallback, useContext, useState } from 'react'; -import styled, { use, css } from 'reshadow'; - -import { useTranslate } from '@cloudbeaver/core-localization'; -import { ComponentStyle, composes, useStyles } from '@cloudbeaver/core-theming'; - -import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps'; -import { Icon } from '../Icon'; -import { baseFormControlStylesNew } from './baseFormControlStylesNew'; -import { FormContext } from './FormContext'; -import { isControlPresented } from './isControlPresented'; - -const INPUT_FIELD_STYLES = composes( - css` - Icon { - composes: theme-text-on-secondary from global; - } -`, - css` - field-label { - display: block; - composes: theme-typography--body1 from global; - font-weight: 500; - } - field-label:not(:empty) { - padding-bottom: 10px; - } - input-container { - position: relative; - } - icon-container { - position: absolute; - right: 8px; - top: 50%; - transform: translateY(-50%); - display: flex; - width: 24px; - height: 24px; - cursor: pointer; - & Icon { - width: 100%; - height: 100%; - } - } - input[disabled] + icon-container { - cursor: auto; - opacity: 0.8; - } - input:not(:only-child) { - padding-right: 32px !important; - } -`); - -type BaseProps = Omit, 'onChange' | 'name' | 'value'> & ILayoutSizeProps & { - description?: string; - mod?: 'surface'; - ref?: React.Ref; - style?: ComponentStyle; - onCustomCopy?: () => void; -}; - -type ControlledProps = BaseProps & { - name?: string; - value?: string | number; - mapState?: (value: string | number) => string | number; - mapValue?: (value: string | number) => string | number; - onChange?: (value: string | number, name?: string) => any; - state?: never; - autoHide?: never; -}; - -type ObjectProps = BaseProps & { - name: TKey; - state: TState; - mapState?: (value: TState[TKey]) => TState[TKey] | string | number; - mapValue?: (value: TState[TKey]) => TState[TKey]; - onChange?: (value: TState[TKey], name: TKey) => any; - autoHide?: boolean; - value?: never; -}; - -interface InputFieldType { - (props: ControlledProps): React.ReactElement | null; - (props: ObjectProps): React.ReactElement | null; -} - -export const InputFieldNew: InputFieldType = observer(function InputFieldNew({ - name, - style, - value: valueControlled, - defaultValue, - required, - state, - mapState, - mapValue, - children, - className, - description, - mod, - fill, - small, - medium, - large, - tiny, - autoHide, - onChange, - onCustomCopy, - ...rest -}: ControlledProps | ObjectProps, ref: React.Ref) { - const [passwordRevealed, setPasswordRevealed] = useState(false); - const translate = useTranslate(); - const styles = useStyles(baseFormControlStylesNew, INPUT_FIELD_STYLES, style); - const context = useContext(FormContext); - - const revealPassword = useCallback(() => { - if (rest.disabled) { - return; - } - - setPasswordRevealed(prev => !prev); - }, [rest.disabled]); - - const handleChange = useCallback((event: React.ChangeEvent) => { - const value = mapValue?.(event.target.value) ?? event.target.value; - - if (state) { - state[name] = value; - } - if (onChange) { - onChange(value, name); - } - if (context) { - context.change(value, name); - } - }, [state, name, context, onChange]); - - if (autoHide && !isControlPresented(name, state, defaultValue)) { - return null; - } - - let value: any = valueControlled ?? defaultValue ?? undefined; - - if (state && name !== undefined && name in state) { - value = state[name]; - } - - if (mapState) { - value = mapState(value); - } - - const showRevealPasswordButton = rest.type === 'password' && !rest.readOnly; - - return styled(styles)( - - {children}{required && ' *'} - - - {showRevealPasswordButton && ( - - - - )} - {onCustomCopy && ( - - - - )} - - {description && ( - - {description} - - )} - - ); -}, { forwardRef: true }); diff --git a/webapp/packages/core-blocks/src/FormControls/InputGroup.tsx b/webapp/packages/core-blocks/src/FormControls/InputGroup.tsx deleted file mode 100644 index 059adb315c..0000000000 --- a/webapp/packages/core-blocks/src/FormControls/InputGroup.tsx +++ /dev/null @@ -1,52 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 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 styled, { css, use } from 'reshadow'; - -import { useStyles, composes } from '@cloudbeaver/core-theming'; - -import { baseFormControlStyles } from './baseFormControlStyles'; - -const styles = composes( - css` - field-label { - composes: theme-border-color-background from global; - } - `, - css` - field-label { - composes: theme-typography--body2 from global; - margin-left: 180px; - text-align: left; - font-weight: initial; - padding-bottom: 8px; - border-bottom: solid 1px #dedede; - width: 100%; - - &[|long] { - margin-left: 200px; - } - } - ` -); -interface Props { - className?: string; - long?: boolean; -} - -export const InputGroup: React.FC = function InputGroup({ - children, - className, - long, -}) { - return styled(useStyles(baseFormControlStyles, styles))( - - {children} - - ); -}; diff --git a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx index 31f2315fb6..7a58070bf8 100644 --- a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx @@ -10,8 +10,9 @@ import { observer } from 'mobx-react-lite'; import { useCallback, useContext } from 'react'; import styled, { css, use } from 'reshadow'; -import { useStyles } from '@cloudbeaver/core-theming'; +import { ComponentStyle, useStyles } from '@cloudbeaver/core-theming'; +import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps'; import { baseFormControlStyles } from './baseFormControlStyles'; import { FormContext } from './FormContext'; @@ -19,18 +20,39 @@ const styles = css` textarea { line-height: 19px; } + field[|embedded] { + height: 100%; + display: flex; + flex-direction: column; + + & textarea { + border-radius: 0 !important; + height: 100%; + resize: none !important; + } + } + field-label { + display: block; + padding-bottom: 10px; + composes: theme-typography--body1 from global; + font-weight: 500; + + &:empty { + display: none; + } + } `; -type BaseProps = Omit, 'onChange'> & { +type BaseProps = Omit, 'onChange' | 'style'> & ILayoutSizeProps & { mod?: 'surface'; - long?: boolean; + style?: ComponentStyle; + embedded?: boolean; }; type ControlledProps = BaseProps & { name?: string; value?: string; onChange?: (value: string, name?: string) => any; - state?: never; }; @@ -38,7 +60,6 @@ type ObjectProps = BaseProps & { name: TKey; state: TState; onChange?: (value: string, name: TKey) => any; - value?: never; }; @@ -49,12 +70,18 @@ interface TextareaType { export const Textarea: TextareaType = observer(function Textarea({ name, + style, value: controlledValue, state, children, className, + fill, + tiny, + small, + medium, + large, mod, - long, + embedded, onChange = () => {}, ...rest }: ControlledProps | ObjectProps) { @@ -74,13 +101,15 @@ export const Textarea: TextareaType = observer(function Textarea({ const value = state ? state[name] : controlledValue; - return styled(useStyles(baseFormControlStyles, styles))( - - {children} + return styled(useStyles(baseFormControlStyles, styles, style))( + + {children} ); } return ( - (function RenderField({ className={className} > {property.displayName ?? ''} - + ); } if (state !== undefined) { return ( - (function RenderField({ onFocus={onFocus} > {property.displayName} - + ); } return ( - (function RenderField({ onFocus={onFocus} > {property.displayName} - + ); }); diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/formStyles.ts b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/formStyles.ts deleted file mode 100644 index 43bc0b8e40..0000000000 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/formStyles.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 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 { css } from 'reshadow'; - -export const formStyles = css` - form-body { - flex: 1; - box-sizing: border-box; - display: flex; - flex-direction: column; - } -`; diff --git a/webapp/packages/core-blocks/src/SanitizedHTML/ReactSanitizedHTML.tsx b/webapp/packages/core-blocks/src/SanitizedHTML/ReactSanitizedHTML.tsx deleted file mode 100644 index 99d3419099..0000000000 --- a/webapp/packages/core-blocks/src/SanitizedHTML/ReactSanitizedHTML.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 DBeaver Corp and others - * - * Licensed under the Apache License, Version 2.0. - * you may not use this file except in compliance with the License. - */ - -// eslint-disable-next-line @typescript-eslint/triple-slash-reference -/// - -import Sanitized from 'react-sanitized-html'; - -export interface SanitizedHTMLProps { - html: string; -} - -const allowedTags = ['h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol', - 'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div', - 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre']; - -const nonTextTags = ['title', 'style', 'script', 'textarea', 'noscript']; - -export function ReactSanitizedHTML({ html }: SanitizedHTMLProps) { - return ( - - ); -} diff --git a/webapp/packages/core-blocks/src/SanitizedHTML/SanitizedHTML.tsx b/webapp/packages/core-blocks/src/SanitizedHTML/SanitizedHTML.tsx deleted file mode 100644 index a529aede36..0000000000 --- a/webapp/packages/core-blocks/src/SanitizedHTML/SanitizedHTML.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 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 { ComplexLoader, createComplexLoader, Loader } from '@cloudbeaver/core-blocks'; - -const loader = createComplexLoader(async function loader() { - const { ReactSanitizedHTML } = await import('./ReactSanitizedHTML'); - return { ReactSanitizedHTML }; -}); - -interface Props { - html: string; -} - -export const SanitizedHTML: React.FC = function SanitizedHTML({ html }) { - return ( - } - > - {({ ReactSanitizedHTML }) => ( - - )} - - ); -}; diff --git a/webapp/packages/core-blocks/src/SanitizedHTML/react-sanitized-html.d.ts b/webapp/packages/core-blocks/src/SanitizedHTML/react-sanitized-html.d.ts deleted file mode 100644 index 1f65e01b4b..0000000000 --- a/webapp/packages/core-blocks/src/SanitizedHTML/react-sanitized-html.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -declare module 'react-sanitized-html' { - - import { Component } from 'react'; - - interface ReactSanitizedHtmlProps { - html: string; - // see https://github.com/apostrophecms/sanitize-html documentation - allowedTags?: string[]; - nonTextTags?: string[]; - } - - export default class ReactSanitizedHtml extends Component { - } -} diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts index 446ad9034c..77427b7da7 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -16,7 +16,6 @@ export * from './layout/AppLogo'; export * from './layout/TopAppBar'; export * from './Loader/Loader'; export * from './ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm'; -export * from './ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew'; export * from './ObjectPropertyInfo/useObjectPropertyCategories'; export * from './Placeholder/Placeholder'; @@ -25,7 +24,6 @@ export * from './Placeholder/PlaceholderContainer'; export * from './PropertiesTable/PropertiesTable'; export * from './PropertiesTable/IProperty'; -export * from './SanitizedHTML/SanitizedHTML'; export * from './Slide/SlideBox'; export * from './Slide/SlideBoxStyles'; export * from './Slide/SlideElement'; @@ -98,10 +96,8 @@ export * from './ToolsPanel/ToolsAction'; export * from './ToolsPanel/ToolsPanel'; export * from './FormControls/Checkboxes/Checkbox'; export * from './FormControls/Checkboxes/FieldCheckbox'; -export * from './FormControls/Checkboxes/FieldCheckboxNew'; export * from './FormControls/Checkboxes/CheckboxMarkup'; export * from './FormControls/Checkboxes/Switch'; -export * from './FormControls/Checkboxes/SwitchNew'; export * from './FormControls/Checkboxes/useCheckboxState'; export * from './FormControls/FormBox'; export * from './FormControls/Filter'; @@ -117,21 +113,16 @@ export * from './Containers/IContainerProps'; export * from './Containers/ILayoutSizeProps'; export * from './FormControls/FormBoxElement'; export * from './FormControls/Combobox'; -export * from './FormControls/ComboboxNew'; export * from './FormControls/FormContext'; export * from './FormControls/FormFieldDescription'; -export * from './FormControls/FormFieldDescriptionNew'; export * from './FormControls/FormGroup'; export * from './FormControls/InputField'; -export * from './FormControls/InputFieldNew'; -export * from './FormControls/InputGroup'; export * from './FormControls/Radio'; export * from './FormControls/RadioGroup'; export * from './FormControls/RadioGroupContext'; export * from './FormControls/ShadowInput'; export * from './FormControls/SubmittingForm'; export * from './FormControls/Textarea'; -export * from './FormControls/TextareaNew'; export * from './Link'; export * from './Cell'; export * from './ErrorMessage'; @@ -143,6 +134,7 @@ export * from './IconOrImage'; export * from './StaticImage'; export * from './TextPlaceholder'; export * from './InfoItem'; +export * from './Iframe'; export * from './useClickEvents'; export * from './useClipboard'; export * from './useDataResource'; diff --git a/webapp/packages/core-cli/configs/webpack.product.config.js b/webapp/packages/core-cli/configs/webpack.product.config.js index b1cf866d20..8b40e7d8ed 100644 --- a/webapp/packages/core-cli/configs/webpack.product.config.js +++ b/webapp/packages/core-cli/configs/webpack.product.config.js @@ -24,8 +24,6 @@ const excludedFromVendor = [ 'backbone', 'lodash', 'canvg', - 'sanitize-html', - 'react-sanitized-html', 'dagre', 'svg-pathdata', '@emotion', diff --git a/webapp/packages/core-connections/src/ConnectionAuthentication/ConnectionAuthenticationForm.tsx b/webapp/packages/core-connections/src/ConnectionAuthentication/ConnectionAuthenticationForm.tsx index c932046ca0..391fc2b634 100644 --- a/webapp/packages/core-connections/src/ConnectionAuthentication/ConnectionAuthenticationForm.tsx +++ b/webapp/packages/core-connections/src/ConnectionAuthentication/ConnectionAuthenticationForm.tsx @@ -9,7 +9,7 @@ import { observer } from 'mobx-react-lite'; import styled from 'reshadow'; -import { BASE_CONTAINERS_STYLES, Container, FieldCheckboxNew, Group, GroupTitle, ObjectPropertyInfoFormNew, TextPlaceholder, useMapResource } from '@cloudbeaver/core-blocks'; +import { BASE_CONTAINERS_STYLES, Container, FieldCheckbox, Group, GroupTitle, ObjectPropertyInfoForm, TextPlaceholder, useMapResource } from '@cloudbeaver/core-blocks'; import { useTranslate } from '@cloudbeaver/core-localization'; import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk'; import { useStyles } from '@cloudbeaver/core-theming'; @@ -48,14 +48,14 @@ export const ConnectionAuthenticationForm = observer(function ConnectionA {properties ? ( <> {!!networkHandlers?.length && {translate('connections_database_authentication')}} - {allowSaveCredentials && ( - (function NetworkHandlerAut return styled(useStyles(BASE_CONTAINERS_STYLES))( <> {handler.data?.label || translate(`connections_network_handler_${id}_title`, 'connections_network_handler_default_title')} - (function NetworkHandlerAut mod='surface' > {translate(`connections_network_handler_${id}_user`, 'connections_network_handler_default_user')} - - + (function NetworkHandlerAut mod='surface' > {translate(`connections_network_handler_${id}_password`, 'connections_network_handler_default_password')} - + {allowSaveCredentials && ( - = observe - = observe fill > {translate('connections_connection_driver')} - - + = observe fill > {translate('connections_connection_name')} - + {JDBC ? ( - = observe mod='surface' > {translate('customConnection_url_JDBC')} - + ) : ( - = observe /> )} {admin && originLocal && ( - = observe // autoHide={} // maybe better to use autoHide > {translate('connections_connection_template')} - + )} - = observe readOnly={readonly} > {translate('connections_connection_description')} - + @@ -197,7 +197,7 @@ export const Options: TabContainerPanelComponent = observe {translate('connections_connection_edit_authentication')} - = observe /> {credentialsSavingEnabled && ( - {translate('connections_connection_edit_save_credentials')} - + )} )} @@ -223,7 +223,7 @@ export const Options: TabContainerPanelComponent = observe {translate('connections_connection_edit_settings')} {booleanProviderProperties && booleanProviderProperties.length > 0 && ( - = observe )} {providerPropertiesWithoutBoolean && ( - (function ParametersForm({ config, embedded, disabled, readOnly, + originLocal, }) { const translate = useTranslate(); - return styled(useStyles(parametersFormStyles))( - <> + return styled(useStyles(BASE_CONTAINERS_STYLES))( + {!embedded && ( - - - - {translate('customConnection_custom_host')} - {translate('customConnection_custom_obligatory')} - - - - - {translate('customConnection_custom_port')} - - - + + + {translate('customConnection_custom_host')} + + + {translate('customConnection_custom_port')} + + )} - - - {translate('customConnection_custom_database')} - - - + + {translate('customConnection_custom_database')} + + ); }); diff --git a/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx b/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx deleted file mode 100644 index f63982bf92..0000000000 --- a/webapp/packages/core-connections/src/ConnectionForm/Options/ParametersFormNew.tsx +++ /dev/null @@ -1,72 +0,0 @@ -/* - * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2021 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 { observer } from 'mobx-react-lite'; -import styled from 'reshadow'; - -import { BASE_CONTAINERS_STYLES, Container, InputFieldNew } from '@cloudbeaver/core-blocks'; -import { useTranslate } from '@cloudbeaver/core-localization'; -import type { ConnectionConfig } from '@cloudbeaver/core-sdk'; -import { useStyles } from '@cloudbeaver/core-theming'; - -interface Props { - config: ConnectionConfig; - disabled?: boolean; - embedded?: boolean; - readOnly?: boolean; - originLocal?: boolean; -} - -export const ParametersFormNew = observer(function ParametersFormNew({ - config, - embedded, - disabled, - readOnly, - originLocal, -}) { - const translate = useTranslate(); - - return styled(useStyles(BASE_CONTAINERS_STYLES))( - - {!embedded && ( - - - {translate('customConnection_custom_host')} - - - {translate('customConnection_custom_port')} - - - )} - - {translate('customConnection_custom_database')} - - - ); -}); diff --git a/webapp/packages/core-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx b/webapp/packages/core-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx index 4280f1e38e..ab8563f638 100644 --- a/webapp/packages/core-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx +++ b/webapp/packages/core-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx @@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite'; import styled, { css } from 'reshadow'; import { UserInfoResource } from '@cloudbeaver/core-authentication'; -import { TextPlaceholder, useTab, Loader, useTabState, ExceptionMessage, useMapResource, ColoredContainer, Group, ObjectPropertyInfoFormNew, BASE_CONTAINERS_STYLES } from '@cloudbeaver/core-blocks'; +import { TextPlaceholder, useTab, Loader, useTabState, ExceptionMessage, useMapResource, ColoredContainer, Group, ObjectPropertyInfoForm, BASE_CONTAINERS_STYLES } from '@cloudbeaver/core-blocks'; import type { TabContainerPanelComponent } from '@cloudbeaver/core-blocks'; import { useService } from '@cloudbeaver/core-di'; import { useTranslate } from '@cloudbeaver/core-localization'; @@ -103,7 +103,7 @@ export const OriginInfo: TabContainerPanelComponent = obse return styled(styles)( - = observer(fu - {translate('connections_network_handler_ssh_tunnel_enable')} - + - = observer(fu small > {translate('connections_network_handler_ssh_tunnel_host')} - - + = observer(fu tiny > {translate('connections_network_handler_ssh_tunnel_port')} - + - = observer(fu tiny > {translate('connections_network_handler_ssh_tunnel_user')} - - + = observer(fu tiny > {translate('connections_network_handler_ssh_tunnel_password')} - + {credentialsSavingEnabled && ( - {translate('connections_connection_edit_save_credentials')} - + )}