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 }
  15
  16 // Validation behavior depends on the value of ForwardSlashNameSubstitution.
  17 //
  18 // Redux form doesn't let you pass anonymous functions to 'validate'
  19 // -- it fails with a very confusing recursive-update-exceeded error.
  20 // So we can't construct the validation function on the fly.
  21 //
  22 // As a workaround, use ForwardSlashNameSubstitution to choose between one of two const-defined validators.
  23
  24 export const ProjectNameField = connect(
  25     (state: RootState) => {
  26         return {
  27             validate: (state.auth.config.clusterConfig.Collections.ForwardSlashNameSubstitution === "" ?
  28                 PROJECT_NAME_VALIDATION : PROJECT_NAME_VALIDATION_ALLOW_SLASH)
  29         };
  30     })((props: ProjectNameFieldProps) =>
  31         <span data-cy='name-field'><Field
  32             name='name'
  33             component={TextField}
  34             validate={props.validate}
  35             label="Project Name"
  36             autoFocus={true} /></span>
  37     );
  38
  39 export const ProjectDescriptionField = () =>
  40     <Field
  41         name='description'
  42         component={RichEditorTextField}
  43         label="Description - optional" />;