src/views-components/form-fields/collection-form-fields.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { Field, Validator } from "redux-form";
   7 import { TextField } from "components/text-field/text-field";
   8 import {
   9     COLLECTION_NAME_VALIDATION, COLLECTION_NAME_VALIDATION_ALLOW_SLASH,
  10     COLLECTION_DESCRIPTION_VALIDATION, COLLECTION_PROJECT_VALIDATION
  11 } from "validators/validators";
  12 import { ProjectTreePickerField, CollectionTreePickerField } from "views-components/projects-tree-picker/tree-picker-field";
  13 import { PickerIdProp } from 'store/tree-picker/picker-id';
  14 import { connect } from "react-redux";
  15 import { RootState } from "store/store";
  16 import { MultiCheckboxField } from "components/checkbox-field/checkbox-field";
  17 import { getStorageClasses } from "common/config";
  18
  19 interface CollectionNameFieldProps {
  20     validate: Validator[];
  21 }
  22
  23 // See implementation note on declaration of ProjectNameField
  24
  25 export const CollectionNameField = connect(
  26     (state: RootState) => {
  27         return {
  28             validate: (state.auth.config.clusterConfig.Collections.ForwardSlashNameSubstitution === "" ?
  29                 COLLECTION_NAME_VALIDATION : COLLECTION_NAME_VALIDATION_ALLOW_SLASH)
  30         };
  31     })((props: CollectionNameFieldProps) =>
  32         <span data-cy='name-field'><Field
  33             name='name'
  34             component={TextField as any}
  35             validate={props.validate}
  36             label="Collection Name"
  37             autoFocus={true} /></span>
  38     );
  39
  40 export const CollectionDescriptionField = () =>
  41     <Field
  42         name='description'
  43         component={TextField as any}
  44         validate={COLLECTION_DESCRIPTION_VALIDATION}
  45         label="Description - optional" />;
  46
  47 export const CollectionProjectPickerField = (props: PickerIdProp) =>
  48     <Field
  49         name="projectUuid"
  50         pickerId={props.pickerId}
  51         component={ProjectTreePickerField}
  52         validate={COLLECTION_PROJECT_VALIDATION} />;
  53
  54 export const CollectionPickerField = (props: PickerIdProp) =>
  55     <Field
  56         name="collectionUuid"
  57         pickerId={props.pickerId}
  58         component={CollectionTreePickerField}
  59         validate={COLLECTION_PROJECT_VALIDATION} />;
  60
  61 interface StorageClassesProps {
  62     items: string[];
  63     defaultClasses?: string[];
  64 }
  65
  66 export const CollectionStorageClassesField = connect(
  67     (state: RootState) => {
  68         return {
  69             items: getStorageClasses(state.auth.config)
  70         };
  71     })(
  72     (props: StorageClassesProps) =>
  73         <Field
  74             name='storageClassesDesired'
  75             label='Storage classes'
  76             minSelection={1}
  77             rowLayout={true}
  78             defaultValues={props.defaultClasses}
  79             helperText='At least one class should be selected'
  80             component={MultiCheckboxField}
  81             items={props.items} />);