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

   1 /*
   2  * SonarQube
   3  * Copyright (C) 2009-2022 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 { FormattedMessage } from 'react-intl';
  22 import { Link } from 'react-router-dom';
  23 import { ButtonLink } from '../../../../components/controls/buttons';
  24 import ValidationInput, {
  25   ValidationInputErrorPlacement
  26 } from '../../../../components/controls/ValidationInput';
  27 import { Alert } from '../../../../components/ui/Alert';
  28 import MandatoryFieldMarker from '../../../../components/ui/MandatoryFieldMarker';
  29 import { translate } from '../../../../helpers/l10n';
  30 import { AlmBindingDefinitionBase } from '../../../../types/alm-settings';
  31 import '../../styles.css';
  32
  33 export interface AlmBindingDefinitionFormFieldProps<B extends AlmBindingDefinitionBase> {
  34   autoFocus?: boolean;
  35   error?: string;
  36   help?: React.ReactNode;
  37   id: string;
  38   isInvalid?: boolean;
  39   isTextArea?: boolean;
  40   maxLength?: number;
  41   onFieldChange: (id: keyof B, value: string) => void;
  42   optional?: boolean;
  43   overwriteOnly?: boolean;
  44   propKey: keyof B;
  45   value: string;
  46   isSecret?: boolean;
  47 }
  48
  49 export function AlmBindingDefinitionFormField<B extends AlmBindingDefinitionBase>(
  50   props: AlmBindingDefinitionFormFieldProps<B>
  51 ) {
  52   const {
  53     autoFocus,
  54     error,
  55     help,
  56     id,
  57     isInvalid = false,
  58     isTextArea,
  59     maxLength,
  60     optional,
  61     overwriteOnly = false,
  62     propKey,
  63     value,
  64     isSecret
  65   } = props;
  66   const [showField, setShowField] = React.useState(!overwriteOnly);
  67
  68   return (
  69     <div className="settings-definition">
  70       <div className="settings-definition-left">
  71         <label className="h3" htmlFor={id}>
  72           {translate('settings.almintegration.form', id)}
  73         </label>
  74         {!optional && <MandatoryFieldMarker />}
  75         {help && <div className="markdown small spacer-top">{help}</div>}
  76       </div>
  77       <div className="settings-definition-right big-padded-top display-flex-column">
  78         {!showField && overwriteOnly && (
  79           <div>
  80             <p>{translate('settings.almintegration.form.secret.field')}</p>
  81             <ButtonLink
  82               onClick={() => {
  83                 props.onFieldChange(propKey, '');
  84                 setShowField(true);
  85               }}>
  86               {translate('settings.almintegration.form.secret.update_field')}
  87             </ButtonLink>
  88           </div>
  89         )}
  90
  91         {showField && isTextArea && (
  92           <textarea
  93             className="width-100"
  94             id={id}
  95             maxLength={maxLength || 2000}
  96             onChange={e => props.onFieldChange(propKey, e.currentTarget.value)}
  97             required={!optional}
  98             rows={5}
  99             value={value}
 100           />
 101         )}
 102
 103         {showField && !isTextArea && (
 104           <ValidationInput
 105             error={error}
 106             errorPlacement={ValidationInputErrorPlacement.Bottom}
 107             isValid={false}
 108             isInvalid={isInvalid}>
 109             <input
 110               className="width-100"
 111               autoFocus={autoFocus}
 112               id={id}
 113               maxLength={maxLength || 100}
 114               name={id}
 115               onChange={e => props.onFieldChange(propKey, e.currentTarget.value)}
 116               size={50}
 117               type="text"
 118               value={value}
 119             />
 120           </ValidationInput>
 121         )}
 122
 123         {showField && isSecret && (
 124           <Alert variant="info" className="spacer-top">
 125             <FormattedMessage
 126               id="settings.almintegration.form.secret.can_encrypt"
 127               defaultMessage={translate('settings.almintegration.form.secret.can_encrypt')}
 128               values={{
 129                 learn_more: (
 130                   <Link
 131                     target="_blank"
 132                     to={{
 133                       pathname:
 134                         '/documentation/instance-administration/security/#settings-encryption'
 135                     }}>
 136                     {translate('learn_more')}
 137                   </Link>
 138                 )
 139               }}
 140             />
 141           </Alert>
 142         )}
 143       </div>
 144     </div>
 145   );
 146 }