From 4f47760524c1577ae6bf8f306007f293779191a9 Mon Sep 17 00:00:00 2001 From: Julien Chinapen Date: Sat, 2 Apr 2022 08:15:24 -0400 Subject: [PATCH] fix: enhance field behavior on connection settings --- .../validation/InputValidationError.jsx | 31 ++++++++ config-ui/src/data/Providers.js | 52 ++++++------- .../connections/ConfigureConnection.jsx | 10 ++- .../configure/connections/ConnectionForm.jsx | 76 ++++++++++++++++--- config-ui/src/styles/integration.scss | 25 ++++++ 5 files changed, 153 insertions(+), 41 deletions(-) create mode 100644 config-ui/src/components/validation/InputValidationError.jsx diff --git a/config-ui/src/components/validation/InputValidationError.jsx b/config-ui/src/components/validation/InputValidationError.jsx new file mode 100644 index 00000000000..3eb8f57e40b --- /dev/null +++ b/config-ui/src/components/validation/InputValidationError.jsx @@ -0,0 +1,31 @@ +import React from 'react' +import { + Colors, + Icon, + Popover, + PopoverInteractionKind, + Intent, + Position +} from '@blueprintjs/core' + +const InputValidationError = (props) => { + const { error, position = Position.TOP } = props + return error + ? ( +
+ + +
{error}
+ +
+ ) + : null +} + +export default InputValidationError diff --git a/config-ui/src/data/Providers.js b/config-ui/src/data/Providers.js index 75acee0eabc..5747fdca4ef 100644 --- a/config-ui/src/data/Providers.js +++ b/config-ui/src/data/Providers.js @@ -91,44 +91,44 @@ const ProviderFormLabels = { const ProviderFormPlaceholders = { null: { - name: 'Enter Instance Name', - endpoint: 'Enter Endpoint URL eg. https://null-api.localhost', - proxy: 'Enter Proxy URL eg. http://proxy.localhost:8080', - token: 'Enter Auth Token eg. 3f5cda2a23ff410792e0', + name: 'eg. Enter Instance Name', + endpoint: 'eg. https://null-api.localhost', + proxy: 'eg. http://proxy.localhost:8080', + token: 'eg. 3f5cda2a23ff410792e0', username: 'Enter Username / E-mail', password: 'Enter Password' }, gitlab: { - name: 'Enter Instance Name', - endpoint: 'Enter Endpoint URL eg. https://gitlab.com/api/v4', - proxy: 'Enter Proxy URL eg. http://proxy.localhost:8080', - token: 'Enter Auth Token eg. ff9d1ad0e5c04f1f98fa', + name: 'eg. GitLab', + endpoint: 'eg. https://gitlab.com/api/v4', + proxy: 'eg. http://proxy.localhost:8080', + token: 'eg. ff9d1ad0e5c04f1f98fa', username: 'Enter Username / E-mail', password: 'Enter Password' }, jenkins: { - name: 'Enter Instance Name', - endpoint: 'Enter Endpoint URL eg. https://api.jenkins.io', - proxy: 'Enter Proxy URL eg. http://proxy.localhost:8080', - token: 'Enter Auth Token eg. 6b057ffe68464c93a057', - username: 'Enter Username / E-mail', - password: 'Enter Password' + name: 'eg. Jenkins', + endpoint: 'URL eg. https://api.jenkins.io', + proxy: 'eg. http://proxy.localhost:8080', + token: 'eg. 6b057ffe68464c93a057', + username: 'eg. admin', + password: 'eg. ************' }, jira: { - name: 'Enter Instance Name', - endpoint: 'Enter Endpoint URL eg. https://your-domain.atlassian.net/rest/', - proxy: 'Enter Proxy URL eg. http://proxy.localhost:8080', - token: 'Enter Auth Token eg. 8c06a7cc50b746bfab30', - username: 'Enter Username / E-mail', - password: 'Enter Password' + name: 'eg. JIRA', + endpoint: 'eg. https://your-domain.atlassian.net/rest/', + proxy: 'eg. http://proxy.localhost:8080', + token: 'eg. 8c06a7cc50b746bfab30', + username: 'eg. admin', + password: 'eg. ************' }, github: { - name: 'Enter Instance Name', - endpoint: 'Enter Endpoint URL eg. https://api.github.com', - proxy: 'Enter Proxy URL eg. http://proxy.localhost:8080', - token: 'Enter Auth Token(s) eg. 4c5cbdb62c165e2b3d18, 40008ebccff9837bb8d2', - username: 'Enter Username / E-mail', - password: 'Enter Password' + name: 'eg. GitHub', + endpoint: 'eg. https://api.github.com', + proxy: 'eg. http://proxy.localhost:8080', + token: 'eg. 4c5cbdb62c165e2b3d18, 40008ebccff9837bb8d2', + username: 'eg. admin', + password: 'eg. ************' } } diff --git a/config-ui/src/pages/configure/connections/ConfigureConnection.jsx b/config-ui/src/pages/configure/connections/ConfigureConnection.jsx index 5a67de27c3b..71665e4098f 100644 --- a/config-ui/src/pages/configure/connections/ConfigureConnection.jsx +++ b/config-ui/src/pages/configure/connections/ConfigureConnection.jsx @@ -10,6 +10,8 @@ import { Intent, Card, Elevation, + Popover, + Colors, } from '@blueprintjs/core' import Nav from '@/components/Nav' import Sidebar from '@/components/Sidebar' @@ -218,7 +220,8 @@ export default function ConfigureConnection () { {activeConnection && ( <> -

{activeConnection.name}

+ {activeProvider.id === Providers.JIRA && + (

#{activeConnection.ID} {activeConnection.name}

)}

Manage settings and options for this connection.

)} @@ -246,6 +249,7 @@ export default function ConfigureConnection () {
)} - {validationErrors.length > 0 && ( + {/* {validationErrors.length > 0 && ( - )} + )} */}
{renderProviderSettings(providerId, activeProvider)} diff --git a/config-ui/src/pages/configure/connections/ConnectionForm.jsx b/config-ui/src/pages/configure/connections/ConnectionForm.jsx index f20f6ab0001..836df2defdc 100644 --- a/config-ui/src/pages/configure/connections/ConnectionForm.jsx +++ b/config-ui/src/pages/configure/connections/ConnectionForm.jsx @@ -7,11 +7,15 @@ import { Tag, Elevation, Popover, + // PopoverInteractionKind, Position, - Intent + Intent, + PopoverInteractionKind } from '@blueprintjs/core' import { Providers } from '@/data/Providers' import GenerateTokenForm from '@/pages/configure/connections/GenerateTokenForm' +import FormValidationErrors from '@/components/messages/FormValidationErrors' +import InputValidationError from '@/components/validation/InputValidationError' import '@/styles/integration.scss' import '@/styles/connections.scss' @@ -20,6 +24,7 @@ export default function ConnectionForm (props) { const { isLocked = false, isValid = true, + validationErrors = [], activeProvider, name, endpointUrl, @@ -83,6 +88,14 @@ export default function ConnectionForm (props) { setShowTokenCreator(isOpen) } + const fieldHasError = (fieldId) => { + return validationErrors.some(e => e.includes(fieldId)) + } + + const getFieldError = (fieldId) => { + return validationErrors.find(e => e.includes(fieldId)) + } + useEffect(() => { if (!allowedAuthTypes.includes(authType)) { console.log('INVALID AUTH TYPE!') @@ -158,10 +171,10 @@ export default function ConnectionForm (props) { label='' inline={true} labelFor='connection-name' - className='formGroup' + className='formGroup-inline' contentClassName='formGroupContent' > -
@@ -206,8 +225,13 @@ export default function ConnectionForm (props) { placeholder={placeholders ? placeholders.endpoint : 'Enter Endpoint URL'} value={endpointUrl} onChange={(e) => onEndpointChange(e.target.value)} - className='input' + className={`input endpoint-url-input ${fieldHasError('Endpoint') ? 'invalid-field' : ''}`} fill + rightElement={( + + )} /> {/* */} @@ -237,9 +261,14 @@ export default function ConnectionForm (props) { placeholder={placeholders ? placeholders.token : 'Enter Auth Token eg. EJrLG8DNeXADQcGOaaaX4B47'} value={token} onChange={(e) => onTokenChange(e.target.value)} - className='input' + className={`input auth-input ${fieldHasError('Auth') ? 'invalid-field' : ''}`} fill required + rightElement={( + + )} /> { activeProvider.id === Providers.JIRA && @@ -305,8 +334,13 @@ export default function ConnectionForm (props) { placeholder='Enter Username' defaultValue={username} onChange={(e) => onUsernameChange(e.target.value)} - className='input' - style={{ maxWidth: '300px' }} + className={`input username-input ${fieldHasError('Username') ? 'invalid-field' : ''}`} + // style={{ maxWidth: '300px' }} + rightElement={( + + )} />
@@ -334,8 +368,13 @@ export default function ConnectionForm (props) { placeholder='Enter Password' defaultValue={password} onChange={(e) => onPasswordChange(e.target.value)} - className='input' - style={{ maxWidth: '300px' }} + className={`input password-input ${fieldHasError('Password') ? 'invalid-field' : ''}`} + // style={{ maxWidth: '300px' }} + rightElement={( + + )} /> @@ -363,7 +402,12 @@ export default function ConnectionForm (props) { defaultValue={proxy} onChange={(e) => onProxyChange(e.target.value)} disabled={isTesting || isSaving || isLocked} - className='input' + className={`input input-proxy ${fieldHasError('Proxy') ? 'invalid-field' : ''}`} + rightElement={( + + )} /> @@ -383,6 +427,14 @@ export default function ConnectionForm (props) { />
+
+ {validationErrors.length > 0 && ( + + +
+ + )} +