src/views-components/dialog-forms/setup-shell-account-dialog.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4 import React from 'react';
   5 import { compose } from "redux";
   6 import { reduxForm, InjectedFormProps, Field } from 'redux-form';
   7 import { withDialog, WithDialogProps } from "store/dialog/with-dialog";
   8 import { FormDialog } from 'components/form-dialog/form-dialog';
   9 import { TextField } from 'components/text-field/text-field';
  10 import { VirtualMachinesResource } from 'models/virtual-machines';
  11 import { CHOOSE_VM_VALIDATION } from 'validators/validators';
  12 import { InputLabel } from '@material-ui/core';
  13 import { NativeSelectField } from 'components/select-field/select-field';
  14 import { SETUP_SHELL_ACCOUNT_DIALOG, setupUserVM } from 'store/users/users-actions';
  15 import { UserResource } from 'models/user';
  16 import { VIRTUAL_MACHINE_ADD_LOGIN_USER_FIELD, VIRTUAL_MACHINE_ADD_LOGIN_VM_FIELD, VIRTUAL_MACHINE_ADD_LOGIN_GROUPS_FIELD, AddLoginFormData } from 'store/virtual-machines/virtual-machines-actions';
  17 import { GroupArrayInput } from 'views-components/virtual-machines-dialog/group-array-input';
  18
  19 export const SetupShellAccountDialog = compose(
  20     withDialog(SETUP_SHELL_ACCOUNT_DIALOG),
  21     reduxForm<AddLoginFormData>({
  22         form: SETUP_SHELL_ACCOUNT_DIALOG,
  23         onSubmit: (data, dispatch) => {
  24             dispatch(setupUserVM(data));
  25         }
  26     })
  27 )(
  28     (props: SetupShellAccountDialogComponentProps) =>
  29         <FormDialog
  30             dialogTitle='Setup shell account'
  31             formFields={SetupShellAccountFormFields}
  32             submitLabel='Submit'
  33             {...props}
  34         />
  35 );
  36
  37 interface VirtualMachinesProps {
  38     data: {
  39         items: VirtualMachinesResource[];
  40     };
  41 }
  42 interface DataProps {
  43     user: UserResource;
  44     items: VirtualMachinesResource[];
  45 }
  46
  47 const UserNameField = () =>
  48     <span>
  49         <InputLabel>VM Login</InputLabel>
  50         <Field
  51             name={`${VIRTUAL_MACHINE_ADD_LOGIN_USER_FIELD}.username`}
  52             component={TextField as any}
  53             disabled /></span>;
  54
  55 const UserVirtualMachineField = ({ data }: VirtualMachinesProps) =>
  56     <div style={{ marginBottom: '21px' }}>
  57         <InputLabel>Virtual Machine</InputLabel>
  58         <Field
  59             name={VIRTUAL_MACHINE_ADD_LOGIN_VM_FIELD}
  60             component={NativeSelectField as any}
  61             validate={CHOOSE_VM_VALIDATION}
  62             items={getVirtualMachinesList(data.items)} />
  63     </div>;
  64
  65 const UserGroupsVirtualMachineField = () =>
  66     <GroupArrayInput
  67         name={VIRTUAL_MACHINE_ADD_LOGIN_GROUPS_FIELD}
  68         input={{id:"Add groups to VM login (eg: docker, sudo)", disabled:false}}
  69         required={false}
  70     />
  71
  72 const getVirtualMachinesList = (virtualMachines: VirtualMachinesResource[]) =>
  73     [{ key: "", value: "" }].concat(virtualMachines.map(it => ({ key: it.uuid, value: it.hostname })));
  74
  75 type SetupShellAccountDialogComponentProps = WithDialogProps<{}> & InjectedFormProps<AddLoginFormData>;
  76
  77 const SetupShellAccountFormFields = (props: SetupShellAccountDialogComponentProps) =>
  78     <>
  79         <UserNameField />
  80         <UserVirtualMachineField data={props.data as DataProps} />
  81         <UserGroupsVirtualMachineField />
  82     </>;