opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-10-16 06:40:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

CB-4335 create connection form uses useForm hook (first iteration)

Browse Source
This commit is contained in:
s.teleshev
2023-12-06 13:51:04 +01:00
parent 7abe6eface
commit 6c6a55cb3b
5 changed files with 63 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
+8 -8
View File
@@ -79,7 +79,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
if (controlType === 'file' && state) {
return (
<InputFileTextContent
required={property.required}
required={!property.required}
tooltip={property.description}
labelTooltip={property.displayName || property.description}
name={property.id!}
@@ -119,7 +119,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
if (state !== undefined) {
return (
<FieldCheckbox
required={property.required}
required={!property.required}
id={property.id}
name={property.id!}
state={state}
@@ -151,7 +151,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
if (state !== undefined) {
return (
<Combobox
required={property.required}
required={!property.required}
name={property.id!}
state={state}
items={property.validValues!}
@@ -171,7 +171,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
return (
<Combobox
required={property.required}
required={!property.required}
name={property.id!}
items={property.validValues!}
keySelector={value => value}
@@ -192,7 +192,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
if (state !== undefined) {
return (
<Textarea
required={property.required}
required={!property.required}
title={state[property.id!]}
labelTooltip={property.description || property.displayName}
description={description}
@@ -209,7 +209,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
return (
<Textarea
required={property.required}
required={!property.required}
title={value}
labelTooltip={property.description || property.displayName}
description={description}
@@ -227,7 +227,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
if (state !== undefined) {
return (
<InputField
required={property.required}
required={!property.required}
type={password ? 'password' : 'text'}
title={password ? property.description || property.displayName : state[property.id!]}
labelTooltip={property.description || property.displayName}
@@ -250,7 +250,7 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
return (
<InputField
required={property.required}
required={!property.required}
type={password ? 'password' : 'text'}
title={password ? property.description || property.displayName : value}
labelTooltip={property.description || property.displayName}
webapp/packages/plugin-connections/src/ConnectionForm/ConnectionForm.tsx
+44 -22
View File
@@ -9,7 +9,7 @@ import { observer } from 'mobx-react-lite';
import { useEffect } from 'react';
import styled, { css } from 'reshadow';
import { ExceptionMessage, Loader, Placeholder, StatusMessage, useExecutor, useObjectRef, useStyles } from '@cloudbeaver/core-blocks';
import { ExceptionMessage, Form, Loader, Placeholder, StatusMessage, useExecutor, useForm, useObjectRef, useStyles } from '@cloudbeaver/core-blocks';
import { useService } from '@cloudbeaver/core-di';
import { ENotificationType } from '@cloudbeaver/core-events';
import type { ConnectionConfig } from '@cloudbeaver/core-sdk';
@@ -17,7 +17,7 @@ import { BASE_TAB_STYLES, TabList, TabPanelList, TabsState, UNDERLINE_TAB_BIG_ST
import { ConnectionFormService } from './ConnectionFormService';
import { connectionConfigContext } from './Contexts/connectionConfigContext';
import type { IConnectionFormState } from './IConnectionFormProps';
import type { IConnectionFormActions, IConnectionFormState } from './IConnectionFormProps';
const tabsStyles = css`
TabList {
@@ -106,6 +106,26 @@ export const ConnectionForm = observer<ConnectionFormProps>(function ConnectionF
const style = [BASE_TAB_STYLES, tabsStyles, UNDERLINE_TAB_STYLES, UNDERLINE_TAB_BIG_STYLES];
const styles = useStyles(style, topBarStyles, formStyles);
const service = useService(ConnectionFormService);
const form = useForm({
onSubmit: event => {
if (event?.type === 'test') {
console.info('test');
state.test();
} else {
state.save();
}
},
});
const actionsContext = useObjectRef<IConnectionFormActions>(() => ({
save: () => {
form.submit(new SubmitEvent('submit'));
},
test: () => {
form.submit(new SubmitEvent('test'));
},
}));
useExecutor({
executor: state.submittingTask,
@@ -139,25 +159,27 @@ export const ConnectionForm = observer<ConnectionFormProps>(function ConnectionF
}
return styled(styles)(
<TabsState container={service.tabsContainer} localState={state.partsState} state={state} onCancel={onCancel}>
<box className={className}>
<connection-top-bar>
<connection-top-bar-tabs>
<connection-status-message>
<StatusMessage type={ENotificationType.Info} message={state.statusMessage} />
</connection-status-message>
<TabList style={style} disabled={state.disabled} />
</connection-top-bar-tabs>
<connection-top-bar-actions>
<Loader suspense inline hideMessage hideException>
<Placeholder container={service.actionsContainer} state={state} onCancel={onCancel} />
</Loader>
</connection-top-bar-actions>
</connection-top-bar>
<content-box>
<TabPanelList style={style} />
</content-box>
</box>
</TabsState>,
<Form context={form} focusFirstChild>
<TabsState actions={actionsContext} container={service.tabsContainer} localState={state.partsState} state={state} onCancel={onCancel}>
<box className={className}>
<connection-top-bar>
<connection-top-bar-tabs>
<connection-status-message>
<StatusMessage type={ENotificationType.Info} message={state.statusMessage} />
</connection-status-message>
<TabList style={style} disabled={state.disabled} />
</connection-top-bar-tabs>
<connection-top-bar-actions>
<Loader suspense inline hideMessage hideException>
<Placeholder actions={actionsContext} container={service.actionsContainer} state={state} onCancel={onCancel} />
</Loader>
</connection-top-bar-actions>
</connection-top-bar>
<content-box>
<TabPanelList style={style} />
</content-box>
</box>
</TabsState>
</Form>,
);
});
webapp/packages/plugin-connections/src/ConnectionForm/ConnectionFormBaseActions.tsx
+3 -2
View File
@@ -16,6 +16,7 @@ import type { IConnectionFormProps } from './IConnectionFormProps';
export const ConnectionFormBaseActions: PlaceholderComponent<IConnectionFormProps> = observer(function ConnectionFormBaseActions({
state,
actions,
onCancel,
}) {
const translate = useTranslate();
@@ -40,10 +41,10 @@ export const ConnectionFormBaseActions: PlaceholderComponent<IConnectionFormProp
{translate('ui_processing_cancel')}
</Button>
)}
<Button type="button" disabled={state.disabled || !authorized} mod={['outlined']} loader onClick={state.test}>
<Button type="button" disabled={state.disabled || !authorized} mod={['outlined']} loader onClick={actions.test}>
{translate('connections_connection_test')}
</Button>
<Button type="button" disabled={state.disabled || state.readonly} mod={['unelevated']} loader onClick={state.save}>
<Button type="button" disabled={state.disabled || state.readonly} mod={['unelevated']} loader onClick={actions.save}>
{translate(state.mode === 'edit' ? 'ui_processing_save' : 'ui_processing_create')}
</Button>
</>
webapp/packages/plugin-connections/src/ConnectionForm/IConnectionFormProps.ts
+6
View File
@@ -52,8 +52,14 @@ export interface IConnectionFormState {
readonly dispose: () => void;
}
export interface IConnectionFormActions {
save: VoidFunction;
test: VoidFunction;
}
export interface IConnectionFormProps {
state: IConnectionFormState;
actions: IConnectionFormActions;
onCancel?: () => void;
}
webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/ConnectionFormAuthenticationAction.tsx
+2 -1
View File
@@ -43,6 +43,7 @@ export const AuthenticationButton: PlaceholderComponent<IConnectionFormProps> =
export const ConnectionFormAuthenticationAction: PlaceholderComponent<IConnectionFormProps> = observer(function ConnectionFormAuthenticationAction({
state,
actions,
}) {
const driverMap = useResource(ConnectionFormAuthenticationAction, DBDriverResource, state.config.driverId || null);
@@ -57,5 +58,5 @@ export const ConnectionFormAuthenticationAction: PlaceholderComponent<IConnectio
return null;
}
return <AuthenticationButton state={state} />;
return <AuthenticationButton actions={actions} state={state} />;
});