mirror of
https://github.com/dbeaver/cloudbeaver.git
synced 2026-09-24 16:04:36 +08:00
chore: linter improvements
This commit is contained in:
Wroud
@@ -18,14 +18,17 @@ module.exports = {
|
||||
'import/parsers': {
|
||||
'@typescript-eslint/parser': ['.ts', '.tsx'],
|
||||
},
|
||||
|
||||
'import/resolver': {
|
||||
typescript: {
|
||||
alwaysTryTypes: true,
|
||||
},
|
||||
},
|
||||
|
||||
typescript: {
|
||||
directory: './',
|
||||
},
|
||||
|
||||
react: {
|
||||
createClass: 'createReactClass',
|
||||
pragma: 'React',
|
||||
@@ -42,6 +45,39 @@ module.exports = {
|
||||
'react/display-name': 'off',
|
||||
'react/jsx-no-literals': 'off',
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'react/jsx-max-props-per-line': [1, { "when": "multiline" }],
|
||||
'react/jsx-closing-bracket-location': 'error',
|
||||
'react/jsx-closing-tag-location': 'error',
|
||||
'react/jsx-tag-spacing': ['error', {
|
||||
"closingSlash": "never",
|
||||
"beforeSelfClosing": "always",
|
||||
"afterOpening": "never",
|
||||
"beforeClosing": "never"
|
||||
}],
|
||||
'react/jsx-boolean-value': 'error',
|
||||
'react/jsx-wrap-multilines': ['error', {
|
||||
"declaration": "parens-new-line",
|
||||
"assignment": "parens-new-line",
|
||||
"return": "parens-new-line",
|
||||
"arrow": "parens-new-line",
|
||||
"condition": "parens-new-line",
|
||||
"logical": "parens-new-line",
|
||||
"prop": "parens-new-line"
|
||||
}],
|
||||
'react/self-closing-comp': ["error"],
|
||||
'react/jsx-sort-props': ['error', {
|
||||
"callbacksLast": true,
|
||||
"shorthandLast": true,
|
||||
"ignoreCase": true,
|
||||
"noSortAlphabetically": true,
|
||||
"reservedFirst": true,
|
||||
}],
|
||||
'react/destructuring-assignment': ['error'],
|
||||
'react/jsx-curly-brace-presence': ['error', "never"],
|
||||
'react/jsx-curly-newline': ['error'],
|
||||
'react/jsx-curly-spacing': ['error', { "when": "never", "children": true }],
|
||||
'react/jsx-equals-spacing': ['error', 'never'],
|
||||
'react/jsx-first-prop-new-line': ['warn', 'multiline'],
|
||||
'brace-style': 'off', // prefer 1tbs or stroustrup styles, avoid allman style
|
||||
'operator-linebreak': 'warn',
|
||||
'consistent-return': 'off',
|
||||
|
||||
@@ -88,9 +88,9 @@ export const Administration = observer(function Administration({
|
||||
<DrawerItem
|
||||
key={item.name}
|
||||
item={item}
|
||||
onSelect={onItemSelect}
|
||||
configurationWizard={configurationWizard}
|
||||
style={[verticalTabStyles, tabsStyles]}
|
||||
onSelect={onItemSelect}
|
||||
/>
|
||||
))}
|
||||
</TabList>
|
||||
|
||||
@@ -21,11 +21,13 @@ export const DrawerItem = observer(function DrawerItem({
|
||||
|
||||
const disabled = configurationWizard && !configurationWizardService.isStepAvailable(item.name);
|
||||
|
||||
return <Component
|
||||
item={item}
|
||||
onSelect={onSelect}
|
||||
configurationWizard={configurationWizard}
|
||||
style={style}
|
||||
disabled={disabled}
|
||||
/>;
|
||||
return (
|
||||
<Component
|
||||
item={item}
|
||||
configurationWizard={configurationWizard}
|
||||
style={style}
|
||||
disabled={disabled}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
+1
-1
@@ -21,7 +21,7 @@ import { AdministrationTopAppBar } from './AdministrationTopAppBar/Administratio
|
||||
export const AdministrationScreen = observer(function AdministrationScreen() {
|
||||
const administrationScreenService = useService(AdministrationScreenService);
|
||||
if (!usePermission(EAdminPermission.admin)) {
|
||||
return <Translate token='root_permission_denied'/>;
|
||||
return <Translate token='root_permission_denied' />;
|
||||
}
|
||||
|
||||
const handleSelect = useCallback(
|
||||
|
||||
+2
-2
@@ -24,7 +24,7 @@ export const ConfigurationWizardScreen = observer(function ConfigurationWizardSc
|
||||
const administrationItemService = useService(AdministrationItemService);
|
||||
const administrationScreenService = useService(AdministrationScreenService);
|
||||
if (!usePermission(EAdminPermission.admin)) {
|
||||
return <Translate token='root_permission_denied'/>;
|
||||
return <Translate token='root_permission_denied' />;
|
||||
}
|
||||
|
||||
const handleSelect = useCallback(
|
||||
@@ -39,10 +39,10 @@ export const ConfigurationWizardScreen = observer(function ConfigurationWizardSc
|
||||
<>
|
||||
<WizardTopAppBar />
|
||||
<Administration
|
||||
configurationWizard={true}
|
||||
activeItem={administrationScreenService.activeItem}
|
||||
activeItemSub={administrationScreenService.activeItemSub}
|
||||
activeItemSubParam={administrationScreenService.activeItemSubParam}
|
||||
configurationWizard
|
||||
onItemSelect={handleSelect}
|
||||
>
|
||||
<WizardStepper />
|
||||
|
||||
+3
-3
@@ -25,12 +25,12 @@ export const FinishPageDrawerItem = observer(function FinishPageDrawerItem({
|
||||
return styled(useStyles(...style))(
|
||||
<Tab
|
||||
tabId={item.name}
|
||||
onOpen={() => onSelect(item.name)}
|
||||
disabled={disabled
|
||||
|| (item.configurationWizardOptions?.isDisabled && item.configurationWizardOptions.isDisabled())}
|
||||
onOpen={() => onSelect(item.name)}
|
||||
>
|
||||
<TabIcon icon='/icons/confirmation.svg' viewBox='0 0 16 16'/>
|
||||
<TabTitle><Translate token='administration_configuration_wizard_finish'/></TabTitle>
|
||||
<TabIcon icon='/icons/confirmation.svg' viewBox='0 0 16 16' />
|
||||
<TabTitle><Translate token='administration_configuration_wizard_finish' /></TabTitle>
|
||||
</Tab>
|
||||
);
|
||||
});
|
||||
|
||||
+2
-2
@@ -18,9 +18,9 @@ export function ServerConfigurationDrawerItem({
|
||||
item, onSelect, style, disabled,
|
||||
}: AdministrationItemDrawerProps) {
|
||||
return styled(useStyles(...style))(
|
||||
<Tab tabId={item.name} onOpen={() => onSelect(item.name)} disabled={disabled}>
|
||||
<Tab tabId={item.name} disabled={disabled} onOpen={() => onSelect(item.name)}>
|
||||
<TabIcon icon='/icons/cog-outline.svg' />
|
||||
<TabTitle><Translate token='administration_configuration_wizard_configuration'/></TabTitle>
|
||||
<TabTitle><Translate token='administration_configuration_wizard_configuration' /></TabTitle>
|
||||
</Tab>
|
||||
);
|
||||
}
|
||||
|
||||
+2
-2
@@ -70,7 +70,7 @@ export const ServerConfigurationForm = observer(function ServerConfigurationForm
|
||||
}, [service]);
|
||||
|
||||
return styled(useStyles(formStyles, boxStyles))(
|
||||
<SubmittingForm onSubmit={onSave} name='server_config' ref={focusedRef}>
|
||||
<SubmittingForm ref={focusedRef} name='server_config' onSubmit={onSave}>
|
||||
<box as="div">
|
||||
<box-element as='div'>
|
||||
<group as="div">
|
||||
@@ -135,9 +135,9 @@ export const ServerConfigurationForm = observer(function ServerConfigurationForm
|
||||
name="authenticationEnabled"
|
||||
state={serverConfig}
|
||||
description={translate('administration_configuration_wizard_configuration_authentication_description')}
|
||||
onChange={onChange}
|
||||
mod={['primary']}
|
||||
long
|
||||
onChange={onChange}
|
||||
>
|
||||
{translate('administration_configuration_wizard_configuration_authentication')}
|
||||
</Switch>
|
||||
|
||||
+3
-3
@@ -18,9 +18,9 @@ export function WelcomeDrawerItem({
|
||||
item, onSelect, style, disabled,
|
||||
}: AdministrationItemDrawerProps) {
|
||||
return styled(useStyles(...style))(
|
||||
<Tab tabId={item.name} onOpen={() => onSelect(item.name)} disabled={disabled}>
|
||||
<TabIcon icon='/icons/welcome_bold.svg' viewBox='0 0 16 16'/>
|
||||
<TabTitle><Translate token='administration_configuration_wizard_welcome'/></TabTitle>
|
||||
<Tab tabId={item.name} disabled={disabled} onOpen={() => onSelect(item.name)}>
|
||||
<TabIcon icon='/icons/welcome_bold.svg' viewBox='0 0 16 16' />
|
||||
<TabTitle><Translate token='administration_configuration_wizard_welcome' /></TabTitle>
|
||||
</Tab>
|
||||
);
|
||||
}
|
||||
|
||||
+3
-3
@@ -52,9 +52,9 @@ export function WelcomePage() {
|
||||
<layout-grid as="div">
|
||||
<layout-grid-inner as="div">
|
||||
<layout-grid-cell as='div' {...use({ span: 12 })}>
|
||||
<h3><Translate token='administration_configuration_wizard_welcome_title'/></h3>
|
||||
<p><Translate token='administration_configuration_wizard_welcome_message'/></p>
|
||||
<note as='div'><Translate token='administration_configuration_wizard_welcome_note'/></note>
|
||||
<h3><Translate token='administration_configuration_wizard_welcome_title' /></h3>
|
||||
<p><Translate token='administration_configuration_wizard_welcome_message' /></p>
|
||||
<note as='div'><Translate token='administration_configuration_wizard_welcome_note' /></note>
|
||||
</layout-grid-cell>
|
||||
</layout-grid-inner>
|
||||
</layout-grid>
|
||||
|
||||
+1
-1
@@ -70,8 +70,8 @@ export const WizardStepper = observer(function WizardStepper() {
|
||||
<Button
|
||||
type="button"
|
||||
mod={['outlined']}
|
||||
onClick={() => service.back()}
|
||||
disabled={service.currentStepIndex === 0}
|
||||
onClick={() => service.back()}
|
||||
>
|
||||
{translate('ui_stepper_back')}
|
||||
</Button>
|
||||
|
||||
@@ -46,7 +46,7 @@ export function Main() {
|
||||
return styled(useStyles(mainStyles, splitStyles))(
|
||||
<space as="main">
|
||||
<Split sticky={30}>
|
||||
<Pane main={true}>
|
||||
<Pane main>
|
||||
<NavigationTree />
|
||||
</Pane>
|
||||
<ResizerControls />
|
||||
|
||||
@@ -46,7 +46,7 @@ export const RightArea = observer(function RightArea() {
|
||||
<NavigationTabsBar />
|
||||
</Pane>
|
||||
{controller.isActive && <ResizerControls />}
|
||||
<Pane main={true}>
|
||||
<Pane main>
|
||||
<LogViewTab />
|
||||
</Pane>
|
||||
</Split>
|
||||
|
||||
@@ -37,7 +37,7 @@ export const Body = observer(function Body() {
|
||||
});
|
||||
|
||||
return styled(useStyles(bodyStyles))(
|
||||
<theme as="div" ref={ref}>
|
||||
<theme ref={ref} as="div">
|
||||
{Screen && <Screen />}
|
||||
<DialogsPortal />
|
||||
<Notifications />
|
||||
|
||||
@@ -59,7 +59,7 @@ export const NavigationTree = observer(function NavigationTree() {
|
||||
if (nodeChildren.isLoading) {
|
||||
return styled(navigationTreeStyles)(
|
||||
<center as="div">
|
||||
<tree as="div"><Loader/></tree>
|
||||
<tree as="div"><Loader /></tree>
|
||||
</center>
|
||||
);
|
||||
}
|
||||
@@ -68,7 +68,7 @@ export const NavigationTree = observer(function NavigationTree() {
|
||||
<center as="div">
|
||||
<tree as="div">
|
||||
<message as="div">
|
||||
No connections.<br/>
|
||||
No connections.<br />
|
||||
Use the top menu to setup connection to your database.
|
||||
</message>
|
||||
</tree>
|
||||
@@ -77,9 +77,9 @@ export const NavigationTree = observer(function NavigationTree() {
|
||||
}
|
||||
|
||||
return styled(navigationTreeStyles)(
|
||||
<tree as="div" tabIndex={0} ref={ref}>
|
||||
<tree ref={ref} as="div" tabIndex={0}>
|
||||
{nodeChildren.children.map(id => (
|
||||
<NavigationTreeNode key={id} id={id} parentId={ROOT_NODE_PATH}/>
|
||||
<NavigationTreeNode key={id} id={id} parentId={ROOT_NODE_PATH} />
|
||||
))}
|
||||
</tree>
|
||||
);
|
||||
|
||||
+1
-1
@@ -75,10 +75,10 @@ export const NavigationNode = observer(function NavigationNode({
|
||||
<control
|
||||
tabIndex={0}
|
||||
aria-selected={controller.isSelected}
|
||||
as="div"
|
||||
onClick={handleSelect}
|
||||
onKeyDown={handleEnter}
|
||||
onDoubleClick={controller.handleDoubleClick}
|
||||
as="div"
|
||||
>
|
||||
<arrow as="div" hidden={!controller.isExpandable} onClick={handleExpand}>
|
||||
{controller.isLoading && <Loader small />}
|
||||
|
||||
+1
-1
@@ -33,7 +33,7 @@ export const NavigationNodeChildren = observer(function NavigationNodeChildren({
|
||||
return (
|
||||
<>
|
||||
{children.map(id => (
|
||||
<NavigationNodeChild id={id} parentId={parentId} key={id} />
|
||||
<NavigationNodeChild key={id} id={id} parentId={parentId} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
+2
-1
@@ -33,7 +33,8 @@ export const NavigationTreeNode = observer(function NavigationTreeNodeFn({
|
||||
<NavigationNode node={node} isLoaded={isLoaded} isLoading={isLoading} isOutdated={isOutdated}>
|
||||
<NavigationNodeChildren
|
||||
parentId={id}
|
||||
component={NavigationTreeNode} />
|
||||
component={NavigationTreeNode}
|
||||
/>
|
||||
</NavigationNode>
|
||||
);
|
||||
});
|
||||
|
||||
+1
-1
@@ -53,7 +53,7 @@ export const ConnectionSelector = observer(function ConnectionSelector() {
|
||||
|
||||
return styled(useStyles(style))(
|
||||
<connection-selector as="div" {...use({ isVisible: controller.isConnectionSelectorVisible })}>
|
||||
<ConnectionMenu menuItem={controller.connectionMenu} style={[menuStyles, connectionMenu]}/>
|
||||
<ConnectionMenu menuItem={controller.connectionMenu} style={[menuStyles, connectionMenu]} />
|
||||
{controller.isObjectContainerSelectorVisible && (
|
||||
<SchemaOrCatalogMenu
|
||||
menuItem={controller.objectContainerMenu}
|
||||
|
||||
@@ -21,5 +21,5 @@ export const Logo = observer(function Logo() {
|
||||
|
||||
const title = `Frontend: ${version}\nBackend: ${serverService.config.data?.version}`;
|
||||
|
||||
return <AppLogo title={title} onClick={() => screenService.navigateToRoot()}/>;
|
||||
return <AppLogo title={title} onClick={() => screenService.navigateToRoot()} />;
|
||||
});
|
||||
|
||||
@@ -33,7 +33,7 @@ export const MainMenu = observer(function MainMenu() {
|
||||
return styled(styles)(
|
||||
<menu-wrapper as="div">
|
||||
{mainMenuService.getMainMenu().map((topItem, i) => (
|
||||
<TopMenuItem key={i} menuItem={topItem}/>
|
||||
<TopMenuItem key={i} menuItem={topItem} />
|
||||
))}
|
||||
</menu-wrapper>
|
||||
);
|
||||
|
||||
@@ -56,9 +56,11 @@ export const TopMenuItem = observer(function TopMenuItem({ menuItem, style = [],
|
||||
if (!menuItem.panel) {
|
||||
return styled(useStyles(buttonStyle))(
|
||||
<Button
|
||||
as="button" {...props}
|
||||
as="button"
|
||||
{...props}
|
||||
disabled={menuItem.isDisabled}
|
||||
onClick={() => menuItem.onClick && menuItem.onClick()}>
|
||||
onClick={() => menuItem.onClick && menuItem.onClick()}
|
||||
>
|
||||
<div>{translate(menuItem.title)}</div>
|
||||
</Button>
|
||||
);
|
||||
@@ -70,7 +72,7 @@ export const TopMenuItem = observer(function TopMenuItem({ menuItem, style = [],
|
||||
panel={menuItem.panel}
|
||||
disabled={menuItem.isDisabled}
|
||||
style={[...style, topMenuStyles]}
|
||||
placement={'bottom-end'}
|
||||
placement="bottom-end"
|
||||
>
|
||||
{menuItem.icon && (
|
||||
<menu-trigger-icon as="div">
|
||||
|
||||
@@ -51,7 +51,6 @@ export const EditorDialog: DialogComponent<string, string> = observer(
|
||||
return styled(useStyles(styles))(
|
||||
<CommonDialogWrapper
|
||||
title={translate('app_shared_inlineEditor_dialog_title')}
|
||||
onReject={props.rejectDialog}
|
||||
footer={(
|
||||
<controls as="div">
|
||||
<Button type="button" mod={['unelevated']} onClick={handleApply}>
|
||||
@@ -62,8 +61,9 @@ export const EditorDialog: DialogComponent<string, string> = observer(
|
||||
</Button>
|
||||
</controls>
|
||||
)}
|
||||
onReject={props.rejectDialog}
|
||||
>
|
||||
<textarea value={value} onChange={handleChange} ref={textareaRef}/>
|
||||
<textarea ref={textareaRef} value={value} onChange={handleChange} />
|
||||
</CommonDialogWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -96,15 +96,15 @@ export const InlineEditor = observer(function InlineEditor({
|
||||
<editor as="div" className={className}>
|
||||
<editor-container as="div">
|
||||
<input
|
||||
ref={inputRef}
|
||||
name={name}
|
||||
type={type}
|
||||
value={value}
|
||||
tabIndex={tabIndex}
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
ref={inputRef}
|
||||
placeholder={placeholder}
|
||||
autoComplete="off"
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</editor-container>
|
||||
<editor-actions as="div" {...use({ position: controlsPosition })}>
|
||||
|
||||
+2
-2
@@ -58,13 +58,13 @@ export const NavigationTabsBar = observer(function NavigationTabsBar() {
|
||||
|
||||
return styled(style)(
|
||||
<TabsBox
|
||||
ref={ref}
|
||||
currentTabId={navigation.currentTabId}
|
||||
tabs={navigation.tabIdList.map(tabId => (
|
||||
<TabHandlerTab key={tabId} tabId={tabId} onSelect={handleSelect} onClose={handleClose} style={stylesArray}/>
|
||||
<TabHandlerTab key={tabId} tabId={tabId} style={stylesArray} onSelect={handleSelect} onClose={handleClose} />
|
||||
))}
|
||||
style={stylesArray}
|
||||
tabIndex={0}
|
||||
ref={ref}
|
||||
>
|
||||
{navigation.tabIdList.map(tabId => (
|
||||
<TabPanel key={tabId} tabId={tabId}>
|
||||
|
||||
+1
-1
@@ -27,5 +27,5 @@ export const TabHandlerTab = observer(function TabHandlerTab({
|
||||
const handler = useTabHandler(tab.handlerId);
|
||||
|
||||
const TabHandlerTab = handler.getTabComponent();
|
||||
return <TabHandlerTab tab={tab} handler={handler} onSelect={onSelect} onClose={onClose} style={style} />;
|
||||
return <TabHandlerTab tab={tab} handler={handler} style={style} onSelect={onSelect} onClose={onClose} />;
|
||||
});
|
||||
|
||||
+1
-1
@@ -39,7 +39,7 @@ export const LogEntryDetailsDialog: DialogComponent<ILogEntry, null> = observer(
|
||||
<message as="div">
|
||||
{props.payload.message}
|
||||
</message>
|
||||
<textarea value={props.payload.stackTrace} readOnly/>
|
||||
<textarea value={props.payload.stackTrace} readOnly />
|
||||
</CommonDialogWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -75,6 +75,6 @@ export function Button({
|
||||
}: ButtonProps) {
|
||||
const Button = tag;
|
||||
return styled(useStyles(buttonStyles, ...(mod || []).map(mod => buttonMod[mod])))(
|
||||
<Button {...rest}><ripple as="div"/>{children}</Button>
|
||||
<Button {...rest}><ripple as="div" />{children}</Button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -96,8 +96,8 @@ export const Checkbox: CheckboxType = observer(function Checkbox({
|
||||
name={name}
|
||||
id={value || name}
|
||||
type='checkbox'
|
||||
onChange={handleChange}
|
||||
checked={checked}
|
||||
onChange={handleChange}
|
||||
{...use({ mod })}
|
||||
/>
|
||||
<label htmlFor={value || name}>{checkboxLabel}</label>
|
||||
|
||||
@@ -210,9 +210,9 @@ export const Combobox: ComboboxType = observer(function Combobox({
|
||||
<input
|
||||
ref={ref}
|
||||
name={name}
|
||||
onChange={handleChange}
|
||||
value={selectedItem ? valueSelector(selectedItem) : searchValue}
|
||||
readOnly={!!selectedItem || readOnly}
|
||||
onChange={handleChange}
|
||||
{...use({ mod })}
|
||||
{...rest}
|
||||
/>
|
||||
|
||||
@@ -74,9 +74,9 @@ export const InputField: InputFieldType = observer(function InputField({
|
||||
<field-label as='label'>{children} {required && '*'}</field-label>
|
||||
<input
|
||||
{...rest}
|
||||
onChange={handleChange}
|
||||
name={name}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
{...use({ mod })}
|
||||
required={required}
|
||||
/>
|
||||
|
||||
@@ -144,10 +144,10 @@ export const Radio: RadioType = observer(function Radio({
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<radio-background as="div">
|
||||
<radio-outer-circle as="div"/>
|
||||
<radio-inner-circle as="div"/>
|
||||
<radio-outer-circle as="div" />
|
||||
<radio-inner-circle as="div" />
|
||||
</radio-background>
|
||||
<radio-ripple as="div"/>
|
||||
<radio-ripple as="div" />
|
||||
</radio>
|
||||
<label htmlFor={id}>{children}</label>
|
||||
</field>
|
||||
|
||||
@@ -21,9 +21,10 @@ export const ShadowInput = React.forwardRef(function ShadowInput({
|
||||
}: ShadowInputProps, ref: React.Ref<HTMLInputElement>) {
|
||||
return (
|
||||
<input
|
||||
ref={ref}
|
||||
value={children}
|
||||
onChange={e => onChange && onChange(e.target.value)}
|
||||
ref={ref}
|
||||
{...rest}/>
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -33,7 +33,7 @@ export const SubmittingForm = forwardRef<HTMLFormElement, FormDetailedProps>(fun
|
||||
const context = useMemo(() => ({ onChange }), [onChange]);
|
||||
|
||||
return (
|
||||
<form {...rest} onSubmit={handleSubmit} ref={ref}>
|
||||
<form {...rest} ref={ref} onSubmit={handleSubmit}>
|
||||
<FormContext.Provider value={context}>
|
||||
{children}
|
||||
</FormContext.Provider>
|
||||
|
||||
@@ -139,7 +139,7 @@ export const Switch: SwitchType = observer(function Switch({
|
||||
<field-label as="div">{children}</field-label>
|
||||
<switch-control as='div'>
|
||||
<switch-control-track as='div' />
|
||||
<switch-control-underlay as='div' >
|
||||
<switch-control-underlay as='div'>
|
||||
<switch-control-thumb as='div' />
|
||||
<switch-input
|
||||
as='input'
|
||||
@@ -147,10 +147,10 @@ export const Switch: SwitchType = observer(function Switch({
|
||||
type="checkbox"
|
||||
id={id}
|
||||
role="switch"
|
||||
onChange={handleChange}
|
||||
aria-checked={checked}
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</switch-control-underlay>
|
||||
</switch-control>
|
||||
|
||||
@@ -25,7 +25,7 @@ export const IconOrImage = function IconOrImage({ icon, className, viewBox }: Ic
|
||||
);
|
||||
|
||||
if (isStaticIcon) {
|
||||
return <StaticImage icon={icon} className={className}/>;
|
||||
return <StaticImage icon={icon} className={className} />;
|
||||
}
|
||||
|
||||
return <Icon name={icon} className={className} viewBox={viewBox || '0 0 32 32'} />;
|
||||
|
||||
@@ -20,8 +20,8 @@ export function CheckCircle(props: SVGAttributes<any>) {
|
||||
focusable="false"
|
||||
{...props}
|
||||
>
|
||||
<path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
|
||||
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
|
||||
<path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z" />
|
||||
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@ export function Configuration(props: SVGAttributes<any>) {
|
||||
d="M14.5931,9.7513 C17.4881,9.7513 19.8431,12.1063 19.8431,15.0013 C19.8431,17.8963 17.4881,20.2513 14.5931,20.2513 C11.6981,20.2513 9.3431,17.8963 9.3431,15.0013 C9.3431,12.1063 11.6981,9.7513 14.5931,9.7513 L14.5931,9.7513 Z M3.4481,13.5313 C3.3891,14.0113 3.3441,14.5063 3.3441,15.0013 C3.3441,15.4963 3.3891,15.9913 3.4481,16.4713 L0.2841,18.9453 C-0.0009,19.1703 -0.0759,19.5753 0.1041,19.9053 L3.1041,25.0953 C3.2841,25.4253 3.6891,25.5453 4.0191,25.4253 L7.7531,23.9253 C8.5331,24.5253 9.3731,25.0203 10.2881,25.3953 L10.8581,29.3703 C10.9031,29.7303 11.2181,30.0003 11.5931,30.0003 L17.5931,30.0003 C17.9681,30.0003 18.2821,29.7303 18.3271,29.3703 L18.8981,25.3953 C19.8131,25.0203 20.6531,24.5103 21.4331,23.9253 L25.1671,25.4253 C25.5121,25.5603 25.9031,25.4253 26.0821,25.0953 L29.0821,19.9053 C29.2621,19.5753 29.1871,19.1703 28.9031,18.9453 L25.7381,16.4713 C25.7971,15.9913 25.8421,15.5113 25.8421,15.0013 C25.8421,14.4913 25.7971,14.0113 25.7381,13.5313 L28.9031,11.0563 C29.1871,10.8313 29.2621,10.4263 29.0821,10.0963 L26.0821,4.9063 C25.9031,4.5763 25.4971,4.4563 25.1671,4.5763 L21.4331,6.0763 C20.6531,5.4763 19.8131,4.9813 18.8981,4.6063 L18.3271,0.6313 C18.2821,0.2723 17.9681,0.0013 17.5931,0.0013 L11.5931,0.0013 C11.2181,0.0013 10.9031,0.2723 10.8581,0.6313 L10.2881,4.6063 C9.3731,4.9813 8.5331,5.4913 7.7531,6.0763 L4.0191,4.5763 C3.6741,4.4413 3.2841,4.5763 3.1041,4.9063 L0.1041,10.0963 C-0.0909,10.4263 -0.0009,10.8313 0.2841,11.0563 L3.4481,13.5313 Z"
|
||||
fill="#338ECC"
|
||||
className="icon-fill"
|
||||
></path>
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ export function Cross(props: SVGAttributes<any>) {
|
||||
focusable="false"
|
||||
{...props}
|
||||
>
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ export function Frown(props: SVGAttributes<any>) {
|
||||
focusable="false"
|
||||
{...props}
|
||||
>
|
||||
<path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 0 0 8 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 0 0 8-8.4C667.6 600.3 597.5 533 512 533z"></path>
|
||||
<path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 0 0 8 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 0 0 8-8.4C667.6 600.3 597.5 533 512 533z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -64,9 +64,9 @@ export function ItemListSearch({
|
||||
name='search'
|
||||
placeholder={translate(placeholder || 'ui_search')}
|
||||
value={value ?? search}
|
||||
onChange={changeHandler}
|
||||
autoComplete="off"
|
||||
disabled={disabled}
|
||||
onChange={changeHandler}
|
||||
{...use({ mod: 'surface' })}
|
||||
/>
|
||||
<search-button as='div' onClick={searchHandler}><ListSearchButton name='search' /></search-button>
|
||||
|
||||
@@ -26,7 +26,7 @@ export function ListItem({
|
||||
const styles = useContext(Styles);
|
||||
|
||||
return styled(useStyles(...styles))(
|
||||
<list-item as="div" onClick={onClick} className={className}>
|
||||
<list-item as="div" className={className} onClick={onClick}>
|
||||
{children}
|
||||
</list-item>
|
||||
);
|
||||
|
||||
@@ -69,13 +69,17 @@ export function Loader({
|
||||
|
||||
return styled(style)(
|
||||
<loader as="div" className={className} {...use({ small })}>
|
||||
<icon as="div"><img src={spinnerURL}/></icon>
|
||||
<icon as="div"><img src={spinnerURL} /></icon>
|
||||
{!hideMessage && <message as="div"><Translate token='ui_processing_loading' /></message>}
|
||||
{onCancel && (
|
||||
<actions as='div'>
|
||||
<Button type="button" mod={['unelevated']}
|
||||
<Button
|
||||
type="button"
|
||||
mod={['unelevated']}
|
||||
disabled={cancelDisabled}
|
||||
onClick={onCancel}><Translate token='ui_processing_cancel' /></Button>
|
||||
onClick={onCancel}
|
||||
><Translate token='ui_processing_cancel' />
|
||||
</Button>
|
||||
</actions>
|
||||
)}
|
||||
</loader>
|
||||
|
||||
@@ -55,15 +55,15 @@ export const ObjectPropertyInfoForm = observer(function ObjectPropertyInfoForm({
|
||||
return styled(style)(
|
||||
<form-body as='div' className={className}>
|
||||
{properties.map(property => (
|
||||
<group as="div" key={property.id}>
|
||||
<group key={property.id} as="div">
|
||||
<InputField
|
||||
type={property.features.includes('password') ? 'password' : 'text'}
|
||||
name={property.id!}
|
||||
state={credentials}
|
||||
onFocus={handleFocus}
|
||||
disabled={disabled}
|
||||
autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`}
|
||||
mod='surface'
|
||||
onFocus={handleFocus}
|
||||
>
|
||||
{property.displayName}
|
||||
</InputField>
|
||||
|
||||
@@ -105,7 +105,7 @@ export const PropertiesTable = observer(function PropertiesTable({
|
||||
{translate('block_properties_table_value')}
|
||||
</properties-header-value>
|
||||
<properties-header-right as="div">
|
||||
{onAdd && <Button type='button' mod={['outlined']} onClick={() => onAdd()}>{translate('block_properties_table_add')}</Button> }
|
||||
{onAdd && <Button type='button' mod={['outlined']} onClick={() => onAdd()}>{translate('block_properties_table_add')}</Button>}
|
||||
</properties-header-right>
|
||||
</properties-header>
|
||||
<properties-list as="div">
|
||||
@@ -114,10 +114,10 @@ export const PropertiesTable = observer(function PropertiesTable({
|
||||
key={property.id}
|
||||
property={property}
|
||||
value={state[property.key]}
|
||||
error={!isKeyUnique(property.key)}
|
||||
onNameChange={changeName}
|
||||
onValueChange={changeValue}
|
||||
onRemove={removeProperty}
|
||||
error={!isKeyUnique(property.key)}
|
||||
/>
|
||||
))}
|
||||
</properties-list>
|
||||
|
||||
@@ -143,12 +143,12 @@ export const PropertyItem = observer(function PropertyItem({
|
||||
<property-item as="div">
|
||||
<property-name as='div' title={property.description} {...use({ error })}>
|
||||
<ShadowInput
|
||||
ref={keyInputRef}
|
||||
type='text'
|
||||
name={property.id}
|
||||
onChange={handleKeyChange}
|
||||
ref={keyInputRef}
|
||||
readOnly={!isKeyEditable}
|
||||
autoComplete='none'
|
||||
onChange={handleKeyChange}
|
||||
>
|
||||
{property.displayName || property.key}
|
||||
</ShadowInput>
|
||||
@@ -157,8 +157,8 @@ export const PropertyItem = observer(function PropertyItem({
|
||||
<ShadowInput
|
||||
type='text'
|
||||
name={`${property.id}_value`}
|
||||
onChange={handleValueChange}
|
||||
autoComplete='none'
|
||||
onChange={handleValueChange}
|
||||
{...use({ focus, edited })}
|
||||
>
|
||||
{value !== undefined ? value : property.defaultValue}
|
||||
|
||||
@@ -20,5 +20,5 @@ const allowedTags = ['h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul',
|
||||
const nonTextTags = ['title', 'style', 'script', 'textarea', 'noscript'];
|
||||
|
||||
export function SanitizedHTML({ html }: SanitizedHTMLProps) {
|
||||
return (<Sanitized html={html} allowedTags={allowedTags} nonTextTags={nonTextTags}/>);
|
||||
return (<Sanitized html={html} allowedTags={allowedTags} nonTextTags={nonTextTags} />);
|
||||
}
|
||||
|
||||
@@ -9,5 +9,5 @@
|
||||
import { Pane as BasePane, PaneProps } from 'go-split';
|
||||
|
||||
export function Pane(props: PaneProps) {
|
||||
return <BasePane {...props}/>;
|
||||
return <BasePane {...props} />;
|
||||
}
|
||||
|
||||
@@ -9,5 +9,5 @@
|
||||
import { SplitProps, Split as BaseSplit } from 'go-split';
|
||||
|
||||
export function Split(props: SplitProps) {
|
||||
return <BaseSplit {...props}/>;
|
||||
return <BaseSplit {...props} />;
|
||||
}
|
||||
|
||||
@@ -29,5 +29,5 @@ export function StaticImage({
|
||||
|
||||
const url = icon[0] === '/' ? icon : `${staticEndpoint}/images/${icon}`;
|
||||
|
||||
return <img className={className} src={url} title={title} onClick={onClick}/>;
|
||||
return <img className={className} src={url} title={title} onClick={onClick} />;
|
||||
}
|
||||
|
||||
@@ -79,9 +79,9 @@ export const TableItem = observer(function TableItem({
|
||||
return styled(styles)(
|
||||
<TableItemContext.Provider value={itemContext}>
|
||||
<tr
|
||||
className={className}
|
||||
onClick={handleClick}
|
||||
onDoubleClick={handleDoubleClick}
|
||||
className={className}
|
||||
{...use({ selected: isSelected, expanded: isExpanded })}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -51,7 +51,7 @@ export const TableItemExpand = observer(function TableItemExpand({
|
||||
|
||||
return styled(styles)(
|
||||
<table-item-expand-box as='div' className={className} onClick={handleClick}>
|
||||
<Icon name="angle" viewBox="0 0 15 8" {...use({ expanded: context.isExpanded() })}/>
|
||||
<Icon name="angle" viewBox="0 0 15 8" {...use({ expanded: context.isExpanded() })} />
|
||||
</table-item-expand-box>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -38,6 +38,6 @@ export const TableItemSelect = observer(function TableItemSelect({ checked, disa
|
||||
}
|
||||
|
||||
return styled(styles)(
|
||||
<input type='checkbox' checked={checked || context.isSelected()} onClick={handleClick} className={className} disabled={context.selectDisabled || disabled}/>
|
||||
<input type='checkbox' checked={checked || context.isSelected()} className={className} disabled={context.selectDisabled || disabled} onClick={handleClick} />
|
||||
);
|
||||
});
|
||||
|
||||
@@ -61,14 +61,14 @@ export function Tab({
|
||||
{...state.state}
|
||||
id={tabId}
|
||||
className={className}
|
||||
onClick={handleOpen}
|
||||
disabled={disabled}
|
||||
onClick={handleOpen}
|
||||
>
|
||||
<tab-container as='div'>
|
||||
{children}
|
||||
{onClose && (
|
||||
<tab-action as="div" onClick={handleClose}>
|
||||
<Icon name="cross-bold" viewBox="0 0 7 8"/>
|
||||
<Icon name="cross-bold" viewBox="0 0 7 8" />
|
||||
</tab-action>
|
||||
)}
|
||||
</tab-container>
|
||||
|
||||
@@ -32,7 +32,7 @@ export const TabsBox = forwardRef<HTMLDivElement, TabsBoxProps>(function TabsBox
|
||||
|
||||
return styled(useStyles(...style))(
|
||||
<TabsState currentTabId={currentTabId}>
|
||||
<tabs-box as="div" className={className} ref={ref} tabIndex={tabIndex}>
|
||||
<tabs-box ref={ref} as="div" className={className} tabIndex={tabIndex}>
|
||||
{tabs && (
|
||||
<tabs as="div">
|
||||
{tabs}
|
||||
|
||||
@@ -47,7 +47,7 @@ export const TabsBoxFromArray = observer(function TabsBoxFromArray({
|
||||
currentTabId={currentTabId}
|
||||
tabs={!hideTabs && tabIdList.map(tabId => (
|
||||
<Tab key={tabId} tabId={tabId} onOpen={onOpen} onClose={onClose}>
|
||||
<TabData tabId={tabId}/>
|
||||
<TabData tabId={tabId} />
|
||||
</Tab>
|
||||
))}
|
||||
className={className}
|
||||
@@ -55,7 +55,7 @@ export const TabsBoxFromArray = observer(function TabsBoxFromArray({
|
||||
>
|
||||
{tabIdList?.map(tabId => (
|
||||
<TabPanel key={tabId} tabId={tabId}>
|
||||
<PanelData tabId={tabId}/>
|
||||
<PanelData tabId={tabId} />
|
||||
</TabPanel>
|
||||
))}
|
||||
</TabsBox>
|
||||
|
||||
@@ -25,7 +25,7 @@ export const VerticalTabPanel = observer(function VerticalTabPanel({ tab, style
|
||||
|
||||
return styled(useStyles(verticalTabStyles, ...style))(
|
||||
<TabPanel tabId={tab.tabId}>
|
||||
<Panel/>
|
||||
<Panel />
|
||||
</TabPanel>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -34,7 +34,7 @@ export const VerticalTabs = observer(function VerticalTabs({ tabContainer, style
|
||||
))}
|
||||
</TabList>
|
||||
{tabContainer.tabs.map(tab => (
|
||||
<VerticalTabPanel key={tab.tabId} tab={tab} style={style}/>
|
||||
<VerticalTabPanel key={tab.tabId} tab={tab} style={style} />
|
||||
))}
|
||||
</vertical-tabs>
|
||||
</TabsState>
|
||||
|
||||
+7
-7
@@ -70,29 +70,29 @@ export const ConnectionAccess = observer(function ConnectionAccess({
|
||||
|
||||
return styled(style)(
|
||||
<box as='div'>
|
||||
<Table selectedItems={controller.selectedSubjects} onSelect={handleSelect} className={className}>
|
||||
<Table selectedItems={controller.selectedSubjects} className={className} onSelect={handleSelect}>
|
||||
<TableHeader>
|
||||
<TableColumnHeader min/>
|
||||
<TableColumnHeader min />
|
||||
<TableColumnHeader>{translate('connections_connection_name')}</TableColumnHeader>
|
||||
<TableColumnHeader></TableColumnHeader>
|
||||
<TableColumnHeader />
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{controller.roles.map(role => (
|
||||
<TableItem key={role.roleId} item={role.roleId} selectDisabled={disabled}>
|
||||
<TableColumnValue centerContent flex>
|
||||
<TableItemSelect disabled={disabled}/>
|
||||
<TableItemSelect disabled={disabled} />
|
||||
</TableColumnValue>
|
||||
<TableColumnValue>{role.roleName}</TableColumnValue>
|
||||
<TableColumnValue></TableColumnValue>
|
||||
<TableColumnValue />
|
||||
</TableItem>
|
||||
))}
|
||||
{controller.users.map(user => (
|
||||
<TableItem key={user.userId} item={user.userId} selectDisabled={disabled}>
|
||||
<TableColumnValue centerContent flex>
|
||||
<TableItemSelect disabled={disabled}/>
|
||||
<TableItemSelect disabled={disabled} />
|
||||
</TableColumnValue>
|
||||
<TableColumnValue>{user.userId}</TableColumnValue>
|
||||
<TableColumnValue></TableColumnValue>
|
||||
<TableColumnValue />
|
||||
</TableItem>
|
||||
))}
|
||||
</TableBody>
|
||||
|
||||
+2
-3
@@ -139,7 +139,7 @@ export const ConnectionForm = observer(function ConnectionForm({
|
||||
<TabsState selectedId='options'>
|
||||
<box as='div'>
|
||||
<TabList>
|
||||
<Tab tabId='options' >
|
||||
<Tab tabId='options'>
|
||||
<TabTitle>{translate('customConnection_options')}</TabTitle>
|
||||
</Tab>
|
||||
<Tab tabId='driver_properties' disabled={!controller.driver}>
|
||||
@@ -215,8 +215,7 @@ export const ConnectionForm = observer(function ConnectionForm({
|
||||
}}
|
||||
</TabPanel>
|
||||
</>
|
||||
)
|
||||
}
|
||||
)}
|
||||
{controller.error.responseMessage && (
|
||||
<ErrorMessage
|
||||
text={controller.error.responseMessage}
|
||||
|
||||
+2
-2
@@ -94,10 +94,10 @@ export const Options = observer(function Options({
|
||||
items={controller.drivers}
|
||||
keySelector={driver => driver.id}
|
||||
valueSelector={driver => driver?.name ?? ''}
|
||||
onSelect={controller.onSelectDriver}
|
||||
readOnly={model.editing || controller.drivers.length < 2}
|
||||
mod={'surface'}
|
||||
mod="surface"
|
||||
disabled={disabled}
|
||||
onSelect={controller.onSelectDriver}
|
||||
>
|
||||
{translate('connections_connection_driver')}
|
||||
</Combobox>
|
||||
|
||||
+1
-1
@@ -37,7 +37,7 @@ export const ParametersForm = observer(function ParametersForm({
|
||||
|
||||
return styled(useStyles(formStyles, styles))(
|
||||
<>
|
||||
{ !embedded && (
|
||||
{!embedded && (
|
||||
<layout-grid-inner as="div">
|
||||
<layout-grid-cell as='div' {...use({ 'span-tablet': 12, 'span-desktop': 7 })}>
|
||||
<InputField
|
||||
|
||||
+2
-2
@@ -86,7 +86,7 @@ export const ConnectionsAdministration = observer(function ConnectionsAdministra
|
||||
<layout-grid-cell as='div' {...use({ span: 12 })}>
|
||||
{configurationWizard && (
|
||||
<message-box as='div'>
|
||||
<p><Translate token='connections_administration_configuration_wizard_message'/></p>
|
||||
<p><Translate token='connections_administration_configuration_wizard_message' /></p>
|
||||
</message-box>
|
||||
)}
|
||||
<AdministrationTools>
|
||||
@@ -107,7 +107,7 @@ export const ConnectionsAdministration = observer(function ConnectionsAdministra
|
||||
selectedItems={controller.selectedItems}
|
||||
expandedItems={controller.expandedItems}
|
||||
/>
|
||||
{controller.isLoading && <Loader overlay/>}
|
||||
{controller.isLoading && <Loader overlay />}
|
||||
</layout-grid-cell>
|
||||
</layout-grid-inner>
|
||||
</layout-grid>
|
||||
|
||||
+2
-2
@@ -17,9 +17,9 @@ export function ConnectionsDrawerItem({
|
||||
item, onSelect, style, disabled, configurationWizard,
|
||||
}: AdministrationItemDrawerProps) {
|
||||
return styled(useStyles(...style))(
|
||||
<Tab tabId={item.name} onOpen={() => onSelect(item.name)} disabled={disabled}>
|
||||
<Tab tabId={item.name} disabled={disabled} onOpen={() => onSelect(item.name)}>
|
||||
<TabIcon icon='/icons/connection.svg' />
|
||||
<TabTitle><Translate token={configurationWizard ? 'connections_administration_configuration_wizard_step_title' : 'connections_administration_item'}/></TabTitle>
|
||||
<TabTitle><Translate token={configurationWizard ? 'connections_administration_configuration_wizard_step_title' : 'connections_administration_item'} /></TabTitle>
|
||||
</Tab>
|
||||
);
|
||||
}
|
||||
|
||||
+2
-2
@@ -56,8 +56,8 @@ export const Connection = observer(function Connection({ connection }: Props) {
|
||||
</TableColumnValue>
|
||||
<TableColumnValue expand>{connection.name}</TableColumnValue>
|
||||
<TableColumnValue>{connection.host}{connection.host && connection.port && `:${connection.port}`}</TableColumnValue>
|
||||
<TableColumnValue><input type="checkbox" checked={connection.template} disabled/></TableColumnValue>
|
||||
<TableColumnValue/>
|
||||
<TableColumnValue><input type="checkbox" checked={connection.template} disabled /></TableColumnValue>
|
||||
<TableColumnValue />
|
||||
</TableItem>
|
||||
);
|
||||
});
|
||||
|
||||
+1
-1
@@ -50,7 +50,7 @@ export const ConnectionEdit = observer(function ConnectionEdit({
|
||||
return styled(useStyles(styles))(
|
||||
<box as='div'>
|
||||
{controller.connection && (
|
||||
<ConnectionForm model={controller as IConnectionFormModel} onBack={collapse} onCancel={collapse}/>
|
||||
<ConnectionForm model={controller as IConnectionFormModel} onBack={collapse} onCancel={collapse} />
|
||||
)}
|
||||
</box>
|
||||
);
|
||||
|
||||
+5
-5
@@ -53,16 +53,16 @@ export const ConnectionsTable = observer(function ConnectionsTable({
|
||||
return styled(useStyles(styles))(
|
||||
<Table selectedItems={selectedItems} expandedItems={expandedItems} {...use({ size: 'big' })}>
|
||||
<TableHeader>
|
||||
<TableColumnHeader min/>
|
||||
<TableColumnHeader min/>
|
||||
<TableColumnHeader min/>
|
||||
<TableColumnHeader min />
|
||||
<TableColumnHeader min />
|
||||
<TableColumnHeader min />
|
||||
<TableColumnHeader>{translate('connections_connection_name')}</TableColumnHeader>
|
||||
<TableColumnHeader>{translate('connections_connection_address')}</TableColumnHeader>
|
||||
<TableColumnHeader>{translate('connections_connection_template')}</TableColumnHeader>
|
||||
<TableColumnHeader></TableColumnHeader>
|
||||
<TableColumnHeader />
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{connections.map(connection => <Connection key={connection.id} connection={connection}/>)}
|
||||
{connections.map(connection => <Connection key={connection.id} connection={connection} />)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
|
||||
+6
-6
@@ -174,7 +174,7 @@ export const CreateConnection = observer(function CreateConnection({
|
||||
return styled(style)(
|
||||
<connection-create as='div'>
|
||||
<title-bar as='div'>
|
||||
<back-button as='div'><Icon name="angle" viewBox="0 0 15 8" onClick={controller.back}/></back-button>
|
||||
<back-button as='div'><Icon name="angle" viewBox="0 0 15 8" onClick={controller.back} /></back-button>
|
||||
{controller.driver?.icon && <StaticImage icon={controller.driver.icon} />}
|
||||
{controller.driver?.name ?? translate('connections_administration_connection_create')}
|
||||
<fill as="div" />
|
||||
@@ -183,12 +183,12 @@ export const CreateConnection = observer(function CreateConnection({
|
||||
<connection-create-content as='div'>
|
||||
<ConnectionForm
|
||||
model={controller as IConnectionFormModel}
|
||||
configurationWizard={configurationWizard}
|
||||
onBack={controller.back}
|
||||
onCancel={handleConnectionCancel}
|
||||
configurationWizard={configurationWizard}
|
||||
/>
|
||||
</connection-create-content>
|
||||
<connection-create-footer as='div'/>
|
||||
<connection-create-footer as='div' />
|
||||
</connection-create>
|
||||
);
|
||||
}
|
||||
@@ -211,7 +211,7 @@ export const CreateConnection = observer(function CreateConnection({
|
||||
</TabList>
|
||||
</TabsState>
|
||||
<connection-create-content as='div'>
|
||||
{method === 'driver' && <CustomConnection onSelect={controller.onDriverSelect}/>}
|
||||
{method === 'driver' && <CustomConnection onSelect={controller.onDriverSelect} />}
|
||||
{method === 'search-database' && (
|
||||
<SearchDatabase
|
||||
databases={controller.databases}
|
||||
@@ -222,9 +222,9 @@ export const CreateConnection = observer(function CreateConnection({
|
||||
onChange={controller.onSearchChange}
|
||||
/>
|
||||
)}
|
||||
{controller.isProcessing && <Loader overlay/>}
|
||||
{controller.isProcessing && <Loader overlay />}
|
||||
</connection-create-content>
|
||||
<connection-create-footer as='div'/>
|
||||
<connection-create-footer as='div' />
|
||||
</connection-create>
|
||||
);
|
||||
});
|
||||
|
||||
+2
-2
@@ -35,8 +35,8 @@ export const CustomConnection = observer(function CustomConnection({
|
||||
)), [dbDriverResource.data]);
|
||||
|
||||
if (loading) {
|
||||
return <Loader className={className}/>;
|
||||
return <Loader className={className} />;
|
||||
}
|
||||
|
||||
return <DriverList drivers={drivers.get()} onSelect={onSelect} className={className}/>;
|
||||
return <DriverList drivers={drivers.get()} className={className} onSelect={onSelect} />;
|
||||
});
|
||||
|
||||
+1
-1
@@ -72,7 +72,7 @@ export const Database = observer(function Database({ database, onSelect }: Props
|
||||
return styled(useStyles(styles))(
|
||||
<ListItem onClick={select}>
|
||||
<ListItemIcon>
|
||||
{orderedDrivers.map(driverId => <StaticImage key={driverId} icon={drivers.get(driverId)?.icon}/>)}
|
||||
{orderedDrivers.map(driverId => <StaticImage key={driverId} icon={drivers.get(driverId)?.icon} />)}
|
||||
</ListItemIcon>
|
||||
<ListItemName>{database.host}:{database.port}</ListItemName>
|
||||
</ListItem>
|
||||
|
||||
+1
-1
@@ -34,7 +34,7 @@ export const Driver = observer(function Driver({ driver, onSelect }: Props) {
|
||||
|
||||
return styled(styles)(
|
||||
<ListItem onClick={select}>
|
||||
<ListItemIcon><StaticImage icon={driver.icon}/></ListItemIcon>
|
||||
<ListItemIcon><StaticImage icon={driver.icon} /></ListItemIcon>
|
||||
<ListItemName>{driver.name}</ListItemName>
|
||||
<ListItemDescription title={driver.description}>{driver.description}</ListItemDescription>
|
||||
</ListItem>
|
||||
|
||||
+2
-2
@@ -33,8 +33,8 @@ export const DriverList = observer(function DriverList({ drivers, className, onS
|
||||
|
||||
return (
|
||||
<ItemList className={className}>
|
||||
<ItemListSearch value={search} onChange={setSearch} placeholder={translate('connections_driver_search_placeholder')} />
|
||||
{filteredDrivers.map(driver => <Driver key={driver.id} driver={driver} onSelect={onSelect}/>)}
|
||||
<ItemListSearch value={search} placeholder={translate('connections_driver_search_placeholder')} onChange={setSearch} />
|
||||
{filteredDrivers.map(driver => <Driver key={driver.id} driver={driver} onSelect={onSelect} />)}
|
||||
</ItemList>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -39,8 +39,8 @@ export const DBAuthDialogFooter = observer(function DBAuthDialogFooter({
|
||||
<Button
|
||||
type="button"
|
||||
mod={['unelevated']}
|
||||
onClick={onLogin}
|
||||
disabled={isAuthenticating}
|
||||
onClick={onLogin}
|
||||
>
|
||||
{translate('authentication_login')}
|
||||
</Button>
|
||||
|
||||
@@ -69,19 +69,19 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({
|
||||
<CommonDialogWrapper
|
||||
title={connection.connectionInfo?.name}
|
||||
icon={driver?.icon}
|
||||
noBodyPadding
|
||||
footer={(
|
||||
<DBAuthDialogFooter
|
||||
isAuthenticating={controller.isAuthenticating}
|
||||
onLogin={controller.login}
|
||||
/>
|
||||
)}
|
||||
noBodyPadding
|
||||
onReject={options?.persistent ? undefined : rejectDialog}
|
||||
>
|
||||
{(!connection.isLoaded() || connection.isLoading())
|
||||
? <Loader />
|
||||
: (
|
||||
<SubmittingForm onSubmit={controller.login} ref={focusedRef}>
|
||||
<SubmittingForm ref={focusedRef} onSubmit={controller.login}>
|
||||
<ObjectPropertyInfoForm
|
||||
autofillToken={`section-${connection.connectionInfo?.id || ''} section-auth`}
|
||||
properties={connection.connectionInfo?.authProperties}
|
||||
|
||||
@@ -10,7 +10,7 @@ import { ValueToken } from './InjectionToken';
|
||||
import { ITypedConstructor } from './ITypedConstructor';
|
||||
|
||||
export interface IServiceCollection {
|
||||
addServiceByToken<T extends object>(token: any, value: T): void;
|
||||
addServiceByToken<T extends Record<string, any>>(token: any, value: T): void;
|
||||
addServiceByClass(ctor: IServiceConstructor<any>): void;
|
||||
}
|
||||
|
||||
|
||||
@@ -18,7 +18,9 @@ export type ValueToken<T> = () => T;
|
||||
*/
|
||||
export type InjectionToken<T> = ITypedConstructor<T> | ValueToken<T>;
|
||||
|
||||
export function createValueToken<T extends object>(obj: string | ITypedConstructor<T> | T): ValueToken<T> {
|
||||
export function createValueToken<T extends Record<string, any>>(
|
||||
obj: string | ITypedConstructor<T> | T
|
||||
): ValueToken<T> {
|
||||
|
||||
// just fake function to keep type T
|
||||
const token = () => null as unknown as T;
|
||||
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
export interface PluginManifest {
|
||||
info: {
|
||||
name: string;
|
||||
defaultSettings?: object;
|
||||
defaultSettings?: Record<string, any>;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -101,8 +101,8 @@ export class Entity {
|
||||
}
|
||||
|
||||
protected addMixin(ctor: ITypedConstructor<any>): void;
|
||||
protected addMixin<T extends object>(token: InjectionToken<T>, value: T): void;
|
||||
protected addMixin<T extends object>(ctorOrToken: InjectionToken<T>, value?: T): void {
|
||||
protected addMixin<T extends Record<string, any>>(token: InjectionToken<T>, value: T): void;
|
||||
protected addMixin<T extends Record<string, any>>(ctorOrToken: InjectionToken<T>, value?: T): void {
|
||||
this.mixins.push(ctorOrToken as InjectionToken<any>);
|
||||
if (value !== undefined) {
|
||||
this.container.addServiceByToken(ctorOrToken, value);
|
||||
@@ -117,7 +117,7 @@ export class Entity {
|
||||
|
||||
}
|
||||
|
||||
export type MixinProvider<T extends object> = ITypedConstructor<T> | {
|
||||
export type MixinProvider<T extends Record<string, any>> = ITypedConstructor<T> | {
|
||||
token: InjectionToken<T>;
|
||||
value: T;
|
||||
};
|
||||
|
||||
@@ -36,7 +36,10 @@ export const inversifyWrapper: IDiWrapper = {
|
||||
mainContainer.addServiceByClass(Ctor);
|
||||
},
|
||||
|
||||
addServiceByToken<T extends object>(token: ValueToken<T> | IServiceConstructor<T>, value: T): void {
|
||||
addServiceByToken<T extends Record<string, unknown>>(
|
||||
token: ValueToken<T> | IServiceConstructor<T>,
|
||||
value: T
|
||||
): void {
|
||||
mainContainer.addServiceByToken(token, value);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -45,28 +45,28 @@ export function ConfirmationDialog({
|
||||
<dialog className={className}>
|
||||
<header>
|
||||
<header-title as="div">
|
||||
<h1><Translate token={payload.title}/></h1>
|
||||
<h1><Translate token={payload.title} /></h1>
|
||||
<reject as="div">
|
||||
<Icon name="cross" viewBox="0 0 16 16" onClick={handleReject} />
|
||||
</reject>
|
||||
</header-title>
|
||||
</header>
|
||||
<dialog-body as="div"><Translate token={payload.message}/></dialog-body>
|
||||
<dialog-body as="div"><Translate token={payload.message} /></dialog-body>
|
||||
<footer>
|
||||
<Button
|
||||
type="button"
|
||||
mod={['outlined']}
|
||||
onClick={handleReject}
|
||||
>
|
||||
<Translate token='ui_processing_cancel'/>
|
||||
<Translate token='ui_processing_cancel' />
|
||||
</Button>
|
||||
<fill as="div"/>
|
||||
<fill as="div" />
|
||||
<Button
|
||||
type="button"
|
||||
mod={['unelevated']}
|
||||
onClick={handleResolve}
|
||||
>
|
||||
<Translate token='ui_processing_ok'/>
|
||||
<Translate token='ui_processing_ok' />
|
||||
</Button>
|
||||
</footer>
|
||||
</dialog>
|
||||
|
||||
@@ -86,7 +86,7 @@ function NestedDialog({
|
||||
return styled(styles)(
|
||||
<>
|
||||
<DialogBackdrop {...dialogState}>
|
||||
<Dialog {...dialogState} >
|
||||
<Dialog {...dialogState}>
|
||||
<DialogComponent
|
||||
payload={dialog.payload}
|
||||
options={dialog.options}
|
||||
|
||||
@@ -44,7 +44,7 @@ export function MenuTrigger({
|
||||
{children}
|
||||
</box>
|
||||
</MenuButton>
|
||||
<MenuPanel panel={panel} menu={menu} style={style}/>
|
||||
<MenuPanel panel={panel} menu={menu} style={style} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -103,12 +103,12 @@ const MenuPanelElement = observer(function MenuPanelElement({
|
||||
{...menu}
|
||||
{...use({ hidden: item.isHidden })}
|
||||
aria-label={item.id}
|
||||
onClick={onClick}
|
||||
disabled={item.isDisabled}
|
||||
menuItem={item}
|
||||
style={style}
|
||||
{...{ as: MenuInnerTrigger }}>
|
||||
</MenuItem>
|
||||
onClick={onClick}
|
||||
{...{ as: MenuInnerTrigger }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -117,9 +117,10 @@ const MenuPanelElement = observer(function MenuPanelElement({
|
||||
{...menu}
|
||||
{...use({ hidden: item.isHidden })}
|
||||
aria-label={item.id}
|
||||
disabled={item.isDisabled}
|
||||
onClick={onClick}
|
||||
disabled={item.isDisabled}>
|
||||
<MenuPanelItem menuItem={item} style={style}/>
|
||||
>
|
||||
<MenuPanelItem menuItem={item} style={style} />
|
||||
</MenuItem>
|
||||
);
|
||||
});
|
||||
@@ -148,10 +149,10 @@ export const MenuInnerTrigger = forwardRef(function MenuInnerTrigger(
|
||||
<>
|
||||
<MenuButton ref={ref} {...menu} {...rest}>
|
||||
<box as='div'>
|
||||
<MenuPanelItem menuItem={menuItem} style={style}/>
|
||||
<MenuPanelItem menuItem={menuItem} style={style} />
|
||||
</box>
|
||||
</MenuButton>
|
||||
<MenuPanel panel={panel!} menu={menu} style={style}/>
|
||||
<MenuPanel panel={panel!} menu={menu} style={style} />
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user