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
  17 interface CollectionNameFieldProps {
  18     validate: Validator[];
  19 }
  20
  21 // See implementation note on declaration of ProjectNameField
  22
  23 export const CollectionNameField = connect(
  24     (state: RootState) => {
  25         return {
  26             validate: (state.auth.config.clusterConfig.Collections.ForwardSlashNameSubstitution === "" ?
  27                 COLLECTION_NAME_VALIDATION : COLLECTION_NAME_VALIDATION_ALLOW_SLASH)
  28         };
  29     })((props: CollectionNameFieldProps) =>
  30         <span data-cy='name-field'><Field
  31             name='name'
  32             component={TextField as any}
  33             validate={props.validate}
  34             label="Collection Name"
  35             autoFocus={true} /></span>
  36     );
  37
  38 export const CollectionDescriptionField = () =>
  39     <Field
  40         name='description'
  41         component={TextField as any}
  42         validate={COLLECTION_DESCRIPTION_VALIDATION}
  43         label="Description - optional" />;
  44
  45 export const CollectionProjectPickerField = (props: PickerIdProp) =>
  46     <Field
  47         name="projectUuid"
  48         pickerId={props.pickerId}
  49         component={ProjectTreePickerField}
  50         validate={COLLECTION_PROJECT_VALIDATION} />;
  51
  52 export const CollectionPickerField = (props: PickerIdProp) =>
  53     <Field
  54         name="collectionUuid"
  55         pickerId={props.pickerId}
  56         component={CollectionTreePickerField}
  57         validate={COLLECTION_PROJECT_VALIDATION} />;