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 * as 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 { USER_LENGTH_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, createUser } from '~/store/users/users-actions';
  15
  16 interface SetupShellAccountFormDialogData {
  17     email: string;
  18     virtualMachineName: string;
  19     groupVirtualMachine: string;
  20 }
  21
  22 export const SetupShellAccountDialog = compose(
  23     withDialog(SETUP_SHELL_ACCOUNT_DIALOG),
  24     reduxForm<SetupShellAccountFormDialogData>({
  25         form: SETUP_SHELL_ACCOUNT_DIALOG,
  26         onSubmit: (data, dispatch) => {
  27             dispatch(createUser(data));
  28         }
  29     })
  30 )(
  31     (props: SetupShellAccountDialogComponentProps) =>
  32         <FormDialog
  33             dialogTitle='Setup shell account'
  34             formFields={SetupShellAccountFormFields}
  35             submitLabel='Submit'
  36             {...props}
  37         />
  38 );
  39
  40 const UserEmailField = ({ data }: any) =>
  41     <Field
  42         name='email'
  43         component={TextField}
  44         disabled
  45         label={data.user.email} />;
  46
  47 const UserVirtualMachineField = ({ data }: any) =>
  48     <div style={{ marginBottom: '21px' }}>
  49         <InputLabel>Virtual Machine</InputLabel>
  50         <Field
  51             name='virtualMachine'
  52             component={NativeSelectField}
  53             validate={USER_LENGTH_VALIDATION}
  54             items={getVirtualMachinesList(data.items)} />
  55     </div>;
  56
  57 const UserGroupsVirtualMachineField = () =>
  58     <Field
  59         name='groups'
  60         component={TextField}
  61         validate={USER_LENGTH_VALIDATION}
  62         label="Groups for virtual machine (comma separated list)" />;
  63
  64 const getVirtualMachinesList = (virtualMachines: VirtualMachinesResource[]) => {
  65     const mappedVirtualMachines = virtualMachines.map(it => ({ key: it.hostname, value: it.hostname }));
  66     return mappedVirtualMachines;
  67 };
  68
  69 type SetupShellAccountDialogComponentProps = WithDialogProps<{}> & InjectedFormProps<SetupShellAccountFormDialogData>;
  70
  71 const SetupShellAccountFormFields = (props: SetupShellAccountDialogComponentProps) =>
  72     <>
  73         <UserEmailField data={props.data}/>
  74         <UserVirtualMachineField data={props.data} />
  75         <UserGroupsVirtualMachineField />
  76     </>;
  77
  78
  79