services/workbench2/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, DirectoryTreePickerField } 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 import { ERROR_MESSAGE } from "validators/require";
  19
  20 interface CollectionNameFieldProps {
  21     validate: Validator[];
  22 }
  23
  24 // See implementation note on declaration of ProjectNameField
  25
  26 export const CollectionNameField = connect(
  27     (state: RootState) => {
  28         return {
  29             validate: (state.auth.config.clusterConfig.Collections.ForwardSlashNameSubstitution === "" ?
  30                 COLLECTION_NAME_VALIDATION : COLLECTION_NAME_VALIDATION_ALLOW_SLASH)
  31         };
  32     })((props: CollectionNameFieldProps) =>
  33         <span data-cy='name-field'><Field
  34             name='name'
  35             component={TextField as any}
  36             validate={props.validate}
  37             label="Collection Name"
  38             autoFocus={true} /></span>
  39     );
  40
  41 export const CollectionDescriptionField = () =>
  42     <Field
  43         name='description'
  44         component={TextField as any}
  45         validate={COLLECTION_DESCRIPTION_VALIDATION}
  46         label="Description - optional" />;
  47
  48 export const CollectionProjectPickerField = (props: PickerIdProp) =>
  49     <Field
  50         name="projectUuid"
  51         pickerId={props.pickerId}
  52         component={ProjectTreePickerField}
  53         validate={COLLECTION_PROJECT_VALIDATION} />;
  54
  55 export const CollectionPickerField = (props: PickerIdProp) =>
  56     <Field
  57         name="collectionUuid"
  58         pickerId={props.pickerId}
  59         component={CollectionTreePickerField}
  60         validate={COLLECTION_PROJECT_VALIDATION} />;
  61
  62 const validateDirectory = (val) => (val && val.uuid ? undefined : ERROR_MESSAGE);
  63
  64 export const DirectoryPickerField = (props: PickerIdProp) =>
  65     <Field
  66         name="destination"
  67         pickerId={props.pickerId}
  68         component={DirectoryTreePickerField as any}
  69         validate={validateDirectory} />;
  70
  71 interface StorageClassesProps {
  72     items: string[];
  73     defaultClasses?: string[];
  74 }
  75
  76 export const CollectionStorageClassesField = connect(
  77     (state: RootState) => {
  78         return {
  79             items: getStorageClasses(state.auth.config)
  80         };
  81     })(
  82     (props: StorageClassesProps) =>
  83         <Field
  84             name='storageClassesDesired'
  85             label='Storage classes'
  86             minSelection={1}
  87             rowLayout={true}
  88             defaultValues={props.defaultClasses}
  89             helperText='At least one class should be selected'
  90             component={MultiCheckboxField}
  91             items={props.items} />);