|
|
|
import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
|
|
|
|
|
|
|
|
import INPUT_TYPES from '../../lib/consts/INPUT_TYPES';
|
|
|
|
|
|
|
|
import buildMapToMessageSetter from '../../lib/buildMapToMessageSetter';
|
|
|
|
import buildNumberTestBatch from '../../lib/test_input/buildNumberTestBatch';
|
|
|
|
import CheckboxWithLabel from '../CheckboxWithLabel';
|
|
|
|
import ConfirmDialog from '../ConfirmDialog';
|
|
|
|
import FlexBox from '../FlexBox';
|
|
|
|
import Grid from '../Grid';
|
|
|
|
import InputWithRef, { InputForwardedRefContent } from '../InputWithRef';
|
|
|
|
import MessageGroup, { MessageGroupForwardedRefContent } from '../MessageGroup';
|
|
|
|
import OutlinedInputWithLabel from '../OutlinedInputWithLabel';
|
|
|
|
import {
|
|
|
|
buildIPAddressTestBatch,
|
|
|
|
buildPeacefulStringTestBatch,
|
|
|
|
} from '../../lib/test_input';
|
|
|
|
import { BodyText } from '../Text';
|
|
|
|
|
|
|
|
const IT_IDS = {
|
|
|
|
dbPort: 'dbPort',
|
|
|
|
ipAddress: 'ipAddress',
|
|
|
|
password: 'password',
|
|
|
|
sshPort: 'sshPort',
|
|
|
|
user: 'user',
|
|
|
|
};
|
|
|
|
const LABEL = {
|
|
|
|
dbPort: 'DB port',
|
|
|
|
ipAddress: 'IP address',
|
|
|
|
password: 'Password',
|
|
|
|
ping: 'Ping',
|
|
|
|
sshPort: 'SSH port',
|
|
|
|
user: 'User',
|
|
|
|
};
|
|
|
|
|
|
|
|
const AddPeerDialog = forwardRef<
|
|
|
|
ConfirmDialogForwardedRefContent,
|
|
|
|
AddPeerDialogProps
|
|
|
|
>(({ formGridColumns = 2 }, ref) => {
|
|
|
|
const inputPeerDBPortRef = useRef<InputForwardedRefContent<'string'>>({});
|
|
|
|
const inputPeerIPAddressRef = useRef<InputForwardedRefContent<'string'>>({});
|
|
|
|
const inputPeerPasswordRef = useRef<InputForwardedRefContent<'string'>>({});
|
|
|
|
const inputPeerSSHPortRef = useRef<InputForwardedRefContent<'string'>>({});
|
|
|
|
const inputPeerUserRef = useRef<InputForwardedRefContent<'string'>>({});
|
|
|
|
const messageGroupRef = useRef<MessageGroupForwardedRefContent>({});
|
|
|
|
|
|
|
|
const [isEnablePingTest, setIsEnablePingTest] = useState<boolean>(false);
|
|
|
|
const [formValidity, setFormValidity] = useState<{
|
|
|
|
[inputTestID: string]: boolean;
|
|
|
|
}>({});
|
|
|
|
|
|
|
|
const buildFormValiditySetterCallback = useCallback(
|
|
|
|
(key: string, value: boolean) =>
|
|
|
|
({ [key]: toReplace, ...restPrevious }) => ({
|
|
|
|
...restPrevious,
|
|
|
|
[key]: value,
|
|
|
|
}),
|
|
|
|
[],
|
|
|
|
);
|
|
|
|
const buildInputFirstRenderFunction = useCallback(
|
|
|
|
(key: string) =>
|
|
|
|
({ isRequired }: { isRequired: boolean }) => {
|
|
|
|
setFormValidity(buildFormValiditySetterCallback(key, !isRequired));
|
|
|
|
},
|
|
|
|
[buildFormValiditySetterCallback],
|
|
|
|
);
|
|
|
|
const buildFinishInputTestBatchFunction = useCallback(
|
|
|
|
(key: string) => (result: boolean) => {
|
|
|
|
setFormValidity(buildFormValiditySetterCallback(key, result));
|
|
|
|
},
|
|
|
|
[buildFormValiditySetterCallback],
|
|
|
|
);
|
|
|
|
|
|
|
|
const isFormInvalid = useMemo(
|
|
|
|
() => Object.values(formValidity).some((isInputValid) => !isInputValid),
|
|
|
|
[formValidity],
|
|
|
|
);
|
|
|
|
const msgSetters = useMemo(
|
|
|
|
() => buildMapToMessageSetter(IT_IDS, messageGroupRef),
|
|
|
|
[],
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ConfirmDialog
|
|
|
|
actionProceedText="Add"
|
|
|
|
content={
|
|
|
|
<Grid
|
|
|
|
columns={{ xs: 1, sm: formGridColumns }}
|
|
|
|
layout={{
|
|
|
|
'add-peer-user-and-ip-address': {
|
|
|
|
children: (
|
|
|
|
<FlexBox row spacing=".3em">
|
|
|
|
<InputWithRef
|
|
|
|
input={
|
|
|
|
<OutlinedInputWithLabel
|
|
|
|
formControlProps={{
|
|
|
|
sx: { minWidth: '4.6em', width: '25%' },
|
|
|
|
}}
|
|
|
|
id="add-peer-user-input"
|
|
|
|
inputProps={{ placeholder: 'admin' }}
|
|
|
|
label={LABEL.user}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
inputTestBatch={buildPeacefulStringTestBatch(
|
|
|
|
LABEL.user,
|
|
|
|
() => {
|
|
|
|
msgSetters.user();
|
|
|
|
},
|
|
|
|
{
|
|
|
|
onFinishBatch: buildFinishInputTestBatchFunction(
|
|
|
|
IT_IDS.user,
|
|
|
|
),
|
|
|
|
},
|
|
|
|
(message) => {
|
|
|
|
msgSetters.user({ children: message });
|
|
|
|
},
|
|
|
|
)}
|
|
|
|
onFirstRender={buildInputFirstRenderFunction(IT_IDS.user)}
|
|
|
|
ref={inputPeerUserRef}
|
|
|
|
/>
|
|
|
|
<BodyText>@</BodyText>
|
|
|
|
<InputWithRef
|
|
|
|
input={
|
|
|
|
<OutlinedInputWithLabel
|
|
|
|
id="add-peer-ip-address-input"
|
|
|
|
label={LABEL.ipAddress}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
inputTestBatch={buildIPAddressTestBatch(
|
|
|
|
LABEL.ipAddress,
|
|
|
|
() => {
|
|
|
|
msgSetters.ipAddress();
|
|
|
|
},
|
|
|
|
{
|
|
|
|
onFinishBatch: buildFinishInputTestBatchFunction(
|
|
|
|
IT_IDS.ipAddress,
|
|
|
|
),
|
|
|
|
},
|
|
|
|
(message) => {
|
|
|
|
msgSetters.ipAddress({ children: message });
|
|
|
|
},
|
|
|
|
)}
|
|
|
|
onFirstRender={buildInputFirstRenderFunction(
|
|
|
|
IT_IDS.ipAddress,
|
|
|
|
)}
|
|
|
|
ref={inputPeerIPAddressRef}
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
</FlexBox>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
'add-peer-password': {
|
|
|
|
children: (
|
|
|
|
<InputWithRef
|
|
|
|
input={
|
|
|
|
<OutlinedInputWithLabel
|
|
|
|
fillRow
|
|
|
|
id="add-peer-password-input"
|
|
|
|
label={LABEL.password}
|
|
|
|
type={INPUT_TYPES.password}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
inputTestBatch={buildPeacefulStringTestBatch(
|
|
|
|
LABEL.password,
|
|
|
|
() => {
|
|
|
|
msgSetters.password();
|
|
|
|
},
|
|
|
|
{
|
|
|
|
onFinishBatch: buildFinishInputTestBatchFunction(
|
|
|
|
IT_IDS.password,
|
|
|
|
),
|
|
|
|
},
|
|
|
|
(message) => {
|
|
|
|
msgSetters.password({ children: message });
|
|
|
|
},
|
|
|
|
)}
|
|
|
|
onFirstRender={buildInputFirstRenderFunction(IT_IDS.password)}
|
|
|
|
ref={inputPeerPasswordRef}
|
|
|
|
required
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
'add-peer-db-and-ssh-port': {
|
|
|
|
children: (
|
|
|
|
<FlexBox row>
|
|
|
|
<InputWithRef
|
|
|
|
input={
|
|
|
|
<OutlinedInputWithLabel
|
|
|
|
id="add-peer-db-port-input"
|
|
|
|
inputProps={{ placeholder: '5432' }}
|
|
|
|
label={LABEL.dbPort}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
inputTestBatch={buildNumberTestBatch(
|
|
|
|
LABEL.dbPort,
|
|
|
|
() => {
|
|
|
|
msgSetters.dbPort();
|
|
|
|
},
|
|
|
|
{
|
|
|
|
onFinishBatch: buildFinishInputTestBatchFunction(
|
|
|
|
IT_IDS.dbPort,
|
|
|
|
),
|
|
|
|
},
|
|
|
|
(message) => {
|
|
|
|
msgSetters.dbPort({ children: message });
|
|
|
|
},
|
|
|
|
)}
|
|
|
|
onFirstRender={buildInputFirstRenderFunction(IT_IDS.dbPort)}
|
|
|
|
ref={inputPeerDBPortRef}
|
|
|
|
/>
|
|
|
|
<InputWithRef
|
|
|
|
input={
|
|
|
|
<OutlinedInputWithLabel
|
|
|
|
id="add-peer-ssh-port-input"
|
|
|
|
inputProps={{ placeholder: '22' }}
|
|
|
|
label={LABEL.sshPort}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
inputTestBatch={buildNumberTestBatch(
|
|
|
|
LABEL.sshPort,
|
|
|
|
() => {
|
|
|
|
msgSetters.sshPort();
|
|
|
|
},
|
|
|
|
{
|
|
|
|
onFinishBatch: buildFinishInputTestBatchFunction(
|
|
|
|
IT_IDS.sshPort,
|
|
|
|
),
|
|
|
|
},
|
|
|
|
(message) => {
|
|
|
|
msgSetters.sshPort({ children: message });
|
|
|
|
},
|
|
|
|
)}
|
|
|
|
onFirstRender={buildInputFirstRenderFunction(
|
|
|
|
IT_IDS.sshPort,
|
|
|
|
)}
|
|
|
|
ref={inputPeerSSHPortRef}
|
|
|
|
/>
|
|
|
|
</FlexBox>
|
|
|
|
),
|
|
|
|
},
|
|
|
|
'add-peer-is-ping': {
|
|
|
|
children: (
|
|
|
|
<CheckboxWithLabel
|
|
|
|
checked={isEnablePingTest}
|
|
|
|
label={LABEL.ping}
|
|
|
|
onChange={(event, isChecked) => {
|
|
|
|
setIsEnablePingTest(isChecked);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
sx: { display: 'flex' },
|
|
|
|
},
|
|
|
|
'add-peer-message-group': {
|
|
|
|
children: (
|
|
|
|
<MessageGroup
|
|
|
|
count={1}
|
|
|
|
defaultMessageType="warning"
|
|
|
|
ref={messageGroupRef}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
sm: formGridColumns,
|
|
|
|
},
|
|
|
|
}}
|
|
|
|
spacing="1em"
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
dialogProps={{ PaperProps: { sx: { minWidth: '16em' } } }}
|
|
|
|
onProceedAppend={() => {
|
|
|
|
// TODO: send the request.
|
|
|
|
}}
|
|
|
|
proceedButtonProps={{ disabled: isFormInvalid }}
|
|
|
|
ref={ref}
|
|
|
|
titleText="Add a peer"
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
AddPeerDialog.displayName = 'AddPeerDialog';
|
|
|
|
|
|
|
|
export default AddPeerDialog;
|