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

   1 /*
   2  * SonarQube
   3  * Copyright (C) 2009-2023 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 DocLink from '../../../../components/common/DocLink';
  23 import ValidationInput, {
  24   ValidationInputErrorPlacement,
  25 } from '../../../../components/controls/ValidationInput';
  26 import { ButtonLink } from '../../../../components/controls/buttons';
  27 import { Alert } from '../../../../components/ui/Alert';
  28 import MandatoryFieldMarker from '../../../../components/ui/MandatoryFieldMarker';
  29 import { translate, translateWithParameters } 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: Readonly<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               aria-label={translateWithParameters(
  83                 'settings.almintegration.form.secret.update_field_x',
  84                 translate('settings.almintegration.form', id),
  85               )}
  86               onClick={() => {
  87                 props.onFieldChange(propKey, '');
  88                 setShowField(true);
  89               }}
  90             >
  91               {translate('settings.almintegration.form.secret.update_field')}
  92             </ButtonLink>
  93           </div>
  94         )}
  95
  96         {showField && isTextArea && (
  97           <textarea
  98             className="width-100"
  99             id={id}
 100             maxLength={maxLength || 2000}
 101             onChange={(e) => props.onFieldChange(propKey, e.currentTarget.value)}
 102             required={!optional}
 103             rows={5}
 104             value={value}
 105           />
 106         )}
 107
 108         {showField && !isTextArea && (
 109           <ValidationInput
 110             error={error}
 111             errorPlacement={ValidationInputErrorPlacement.Bottom}
 112             isValid={false}
 113             isInvalid={isInvalid}
 114           >
 115             <input
 116               className="width-100"
 117               autoFocus={autoFocus}
 118               id={id}
 119               maxLength={maxLength || 100}
 120               name={id}
 121               onChange={(e) => props.onFieldChange(propKey, e.currentTarget.value)}
 122               size={50}
 123               type="text"
 124               value={value}
 125             />
 126           </ValidationInput>
 127         )}
 128
 129         {showField && isSecret && (
 130           <Alert variant="info" className="spacer-top">
 131             <FormattedMessage
 132               id="settings.almintegration.form.secret.can_encrypt"
 133               defaultMessage={translate('settings.almintegration.form.secret.can_encrypt')}
 134               values={{
 135                 learn_more: (
 136                   <DocLink to="/instance-administration/security/#settings-encryption">
 137                     {translate('learn_more')}
 138                   </DocLink>
 139                 ),
 140               }}
 141             />
 142           </Alert>
 143         )}
 144       </div>
 145     </div>
 146   );
 147 }