source.dussan.org Git - sonarqube.git/blob

   1 /*
   2  * SonarQube
   3  * Copyright (C) 2009-2021 SonarSource SA
   4  * mailto:info AT sonarsource DOT com
   5  *
   6  * This program is free software; you can redistribute it and/or
   7  * modify it under the terms of the GNU Lesser General Public
   8  * License as published by the Free Software Foundation; either
   9  * version 3 of the License, or (at your option) any later version.
  10  *
  11  * This program is distributed in the hope that it will be useful,
  12  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  14  * Lesser General Public License for more details.
  15  *
  16  * You should have received a copy of the GNU Lesser General Public License
  17  * along with this program; if not, write to the Free Software Foundation,
  18  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  19  */
  20 import * as React from 'react';
  21 import { ButtonLink } from '../../../../components/controls/buttons';
  22 import HelpTooltip from '../../../../components/controls/HelpTooltip';
  23 import MandatoryFieldMarker from '../../../../components/ui/MandatoryFieldMarker';
  24 import { translate } from '../../../../helpers/l10n';
  25 import { AlmBindingDefinitionBase } from '../../../../types/alm-settings';
  26
  27 export interface AlmBindingDefinitionFormFieldProps<B extends AlmBindingDefinitionBase> {
  28   autoFocus?: boolean;
  29   help?: React.ReactNode;
  30   id: string;
  31   isTextArea?: boolean;
  32   maxLength?: number;
  33   onFieldChange: (id: keyof B, value: string) => void;
  34   optional?: boolean;
  35   overwriteOnly?: boolean;
  36   propKey: keyof B;
  37   value: string;
  38 }
  39
  40 export function AlmBindingDefinitionFormField<B extends AlmBindingDefinitionBase>(
  41   props: AlmBindingDefinitionFormFieldProps<B>
  42 ) {
  43   const {
  44     autoFocus,
  45     help,
  46     id,
  47     isTextArea,
  48     maxLength,
  49     optional,
  50     overwriteOnly = false,
  51     propKey,
  52     value
  53   } = props;
  54   const [showField, setShowField] = React.useState(!overwriteOnly);
  55
  56   return (
  57     <div className="modal-field">
  58       <label className="display-flex-center" htmlFor={id}>
  59         {translate('settings.almintegration.form', id)}
  60         {!optional && <MandatoryFieldMarker />}
  61         {help && <HelpTooltip className="spacer-left" overlay={help} placement="right" />}
  62       </label>
  63
  64       {!showField && overwriteOnly && (
  65         <div>
  66           <p>{translate('settings.almintegration.form.secret_field')}</p>
  67           <ButtonLink
  68             onClick={() => {
  69               props.onFieldChange(propKey, '');
  70               setShowField(true);
  71             }}>
  72             {translate('settings.almintegration.form.update_secret_field')}
  73           </ButtonLink>
  74         </div>
  75       )}
  76
  77       {showField && isTextArea && (
  78         <textarea
  79           className="settings-large-input"
  80           id={id}
  81           maxLength={maxLength || 2000}
  82           onChange={e => props.onFieldChange(propKey, e.currentTarget.value)}
  83           required={!optional}
  84           rows={5}
  85           value={value}
  86         />
  87       )}
  88
  89       {showField && !isTextArea && (
  90         <input
  91           autoFocus={autoFocus}
  92           className="input-super-large"
  93           id={id}
  94           maxLength={maxLength || 100}
  95           name={id}
  96           onChange={e => props.onFieldChange(propKey, e.currentTarget.value)}
  97           size={50}
  98           type="text"
  99           value={value}
 100         />
 101       )}
 102     </div>
 103   );
 104 }