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