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

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { Field, Validator } from "redux-form";
   7 import { TextField, RichEditorTextField } from "~/components/text-field/text-field";
   8 import { PROJECT_NAME_VALIDATION, PROJECT_NAME_VALIDATION_ALLOW_SLASH } from "~/validators/validators";
   9 import { connect } from "react-redux";
  10 import { RootState } from "~/store/store";
  11
  12 interface ProjectNameFieldProps {
  13     validate: Validator[];
  14     label?: string;
  15 }
  16
  17 // Validation behavior depends on the value of ForwardSlashNameSubstitution.
  18 //
  19 // Redux form doesn't let you pass anonymous functions to 'validate'
  20 // -- it fails with a very confusing recursive-update-exceeded error.
  21 // So we can't construct the validation function on the fly.
  22 //
  23 // As a workaround, use ForwardSlashNameSubstitution to choose between one of two const-defined validators.
  24
  25 export const ProjectNameField = connect(
  26     (state: RootState) => {
  27         return {
  28             validate: (state.auth.config.clusterConfig.Collections.ForwardSlashNameSubstitution === "" ?
  29                 PROJECT_NAME_VALIDATION : PROJECT_NAME_VALIDATION_ALLOW_SLASH)
  30         };
  31     })((props: ProjectNameFieldProps) =>
  32         <span data-cy='name-field'><Field
  33             name='name'
  34             component={TextField}
  35             validate={props.validate}
  36             label={props.label || "Project Name"}
  37             autoFocus={true} /></span>
  38     );
  39
  40 export const ProjectDescriptionField = () =>
  41     <Field
  42         name='description'
  43         component={RichEditorTextField}
  44         label="Description - optional" />;