From 52461e657b0054b387ba1fdb50a099addea72c35 Mon Sep 17 00:00:00 2001 From: Kevin Silva Date: Tue, 16 Jan 2024 18:54:29 +0100 Subject: [PATCH] SONAR-21419 - Encryption page adopts the new UI --- .../js/app/components/GlobalContainer.tsx | 1 + .../settings/encryption/EncryptionApp.tsx | 30 ++- .../settings/encryption/EncryptionForm.tsx | 215 +++++++++--------- .../encryption/GenerateSecretKeyForm.tsx | 191 ++++++++-------- 4 files changed, 212 insertions(+), 225 deletions(-) diff --git a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx index 1218844d96b..b0de72fd28a 100644 --- a/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx +++ b/server/sonar-web/src/main/js/app/components/GlobalContainer.tsx @@ -80,6 +80,7 @@ const TEMP_PAGELIST_WITH_NEW_BACKGROUND_WHITE = [ '/admin/background_tasks', '/admin/groups', '/admin/users', + '/admin/settings/encryption', ]; export default function GlobalContainer() { diff --git a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx index bd5f34aa4d2..f18538e6834 100644 --- a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx +++ b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionApp.tsx @@ -17,10 +17,10 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { LargeCenteredLayout, PageContentFontWrapper, Spinner, Title } from 'design-system'; import * as React from 'react'; import { Helmet } from 'react-helmet-async'; import { checkSecretKey, generateSecretKey } from '../../../api/settings'; -import Spinner from '../../../components/ui/Spinner'; import { translate } from '../../../helpers/l10n'; import EncryptionForm from './EncryptionForm'; import GenerateSecretKeyForm from './GenerateSecretKeyForm'; @@ -69,20 +69,26 @@ export default class EncryptionApp extends React.PureComponent<{}, State> { render() { const { loading, secretKey, secretKeyAvailable } = this.state; + return ( -
- -
-

{translate('property.category.security.encryption')}

- -
+ + + +
+ {translate('property.category.security.encryption')} + +
- {!loading && !secretKeyAvailable && ( - - )} + {!loading && !secretKeyAvailable && ( + + )} - {secretKeyAvailable && } -
+ {secretKeyAvailable && } + + ); } } diff --git a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.tsx b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.tsx index 5b007bf087b..f1c82578164 100644 --- a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.tsx +++ b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.tsx @@ -17,135 +17,124 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { + ButtonPrimary, + ButtonSecondary, + ClipboardIconButton, + CodeSnippet, + InputTextArea, + Spinner, +} from 'design-system'; import * as React from 'react'; +import { useCallback, useState } from 'react'; import { FormattedMessage } from 'react-intl'; import { encryptValue } from '../../../api/settings'; -import DocLink from '../../../components/common/DocLink'; -import { SubmitButton } from '../../../components/controls/buttons'; -import { ClipboardButton } from '../../../components/controls/clipboard'; -import Spinner from '../../../components/ui/Spinner'; +import DocumentationLink from '../../../components/common/DocumentationLink'; import { translate } from '../../../helpers/l10n'; interface Props { generateSecretKey: () => Promise; } -interface State { - encryptedValue?: string; - encrypting: boolean; - generating: boolean; - value: string; -} - -export default class EncryptionForm extends React.PureComponent { - mounted = false; - state: State = { encrypting: false, generating: false, value: '' }; - - componentDidMount() { - this.mounted = true; - } - - componentWillUnmount() { - this.mounted = false; - } - - handleChange = (event: React.ChangeEvent) => { - this.setState({ value: event.currentTarget.value }); - }; +export default function EncryptionForm({ generateSecretKey }: Readonly) { + const [encrypting, setEncrypting] = useState(false); + const [generating, setGenerating] = useState(false); + const [encryptedValue, setEncryptedValue] = useState(''); + const [value, setValue] = useState(''); - handleEncrypt = (event: React.FormEvent) => { - event.preventDefault(); - this.setState({ encrypting: true }); - encryptValue(this.state.value).then( - ({ encryptedValue }) => { - if (this.mounted) { - this.setState({ encryptedValue, encrypting: false }); - } - }, - () => { - if (this.mounted) { - this.setState({ encrypting: false }); - } - }, - ); - }; + const handleChange = useCallback((event: React.ChangeEvent) => { + setValue(event.currentTarget.value); + }, []); - handleGenerateSecretKey = (event: React.FormEvent) => { - event.preventDefault(); - this.setState({ generating: true }); - this.props.generateSecretKey().then(this.stopGenerating, this.stopGenerating); - }; + const handleEncrypt = useCallback( + (event: React.FormEvent) => { + event.preventDefault(); + setEncrypting(true); + encryptValue(value).then( + ({ encryptedValue }) => { + setEncryptedValue(encryptedValue); + setEncrypting(false); + }, + () => { + setEncrypting(false); + }, + ); + }, + [value], + ); - stopGenerating = () => { - if (this.mounted) { - this.setState({ generating: false }); - } - }; + const handleGenerateSecretKey = useCallback( + (event: React.FormEvent) => { + event.preventDefault(); + setGenerating(true); + generateSecretKey().then( + () => setGenerating(false), + () => setGenerating(false), + ); + }, + [generateSecretKey], + ); - render() { - const { encryptedValue, encrypting, generating } = this.state; - return ( -
-
{translate('encryption.form_intro')}
-
-