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