Merge pull request #1444 from merico-dev/jc-1386-configure-connection-ux-updates

klesh · web-flow · commit aced2a604f61 · 2022-04-02T22:19:58.000+08:00
`fix` `v0.9.2` data integrations - configure connection form ux updates
diff --git a/config-ui/src/components/validation/InputValidationError.jsx 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
+    ? (
+      <div className='inline-input-error' style={{ outline: 'none', cursor: 'pointer', margin: '5px 5px 3px 5px' }}>
+        <Popover
+          position={position}
+          usePortal={true}
+          openOnTargetFocus={true}
+          intent={Intent.WARNING}
+          interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
+        >
+          <Icon icon='warning-sign' size={12} color={Colors.RED5} style={{ outline: 'none' }} />
+          <div style={{ outline: 'none', padding: '5px', borderTop: `2px solid ${Colors.RED5}` }}>{error}</div>
+        </Popover>
+      </div>
+      )
+    : null
+}
+
+export default InputValidationError
diff --git 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
@@ -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 () {
                     </div>
                     {activeConnection && (
                       <>
-                        <h2 style={{ margin: 0 }}>{activeConnection.name}</h2>
+                        {activeProvider.id === Providers.JIRA &&
+                        (<h2 style={{ margin: 0 }}>#{activeConnection.ID} {activeConnection.name}</h2>)}
                         <p className='page-description'>Manage settings and options for this connection.</p>
                       </>
                     )}
@@ -246,6 +249,7 @@ export default function ConfigureConnection () {
                         <div className='editConnection' style={{ display: 'flex' }}>
                           <ConnectionForm
                             isValid={isValidForm}
+                            validationErrors={validationErrors}
                             activeProvider={activeProvider}
                             name={name}
                             endpointUrl={endpointUrl}
@@ -285,9 +289,9 @@ export default function ConfigureConnection () {
                           </p>
                         </>
                         )}
-                    {validationErrors.length > 0 && (
+                    {/* {validationErrors.length > 0 && (
                       <FormValidationErrors errors={validationErrors} />
-                    )}
+                    )} */}
                   </Card>
                   <div style={{ marginTop: '30px' }}>
                     {renderProviderSettings(providerId, activeProvider)}
diff --git 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'
           >
-            <Label style={{ display: 'inline' }}>
+            <Label style={{ display: 'inline', marginRight: 0 }}>
               {labels
                 ? labels.name
                 : (
@@ -176,9 +189,15 @@ export default function ConnectionForm (props) {
               placeholder={placeholders ? placeholders.name : 'Enter Instance Name'}
               value={name}
               onChange={(e) => onNameChange(e.target.value)}
-              className='input connection-name-input'
+              className={`input connection-name-input ${fieldHasError('Connection Source') ? 'invalid-field' : ''}`}
               leftIcon={[Providers.GITHUB, Providers.GITLAB, Providers.JENKINS].includes(activeProvider.id) ? 'lock' : null}
-              fill
+              inline={true}
+              rightElement={(
+                <InputValidationError
+                  error={getFieldError('Connection Source')}
+                />
+              )}
+              // fill
             />
           </FormGroup>
         </div>
@@ -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={(
+                <InputValidationError
+                  error={getFieldError('Endpoint')}
+                />
+              )}
             />
             {/* <a href='#' style={{ margin: '5px 0 5px 5px' }}><Icon icon='info-sign' size='16' /></a> */}
           </FormGroup>
@@ -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={(
+                  <InputValidationError
+                    error={getFieldError('Auth')}
+                  />
+                )}
               />
               {
                 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={(
+                    <InputValidationError
+                      error={getFieldError('Username')}
+                    />
+                  )}
                 />
               </FormGroup>
             </div>
@@ -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={(
+                    <InputValidationError
+                      error={getFieldError('Password')}
+                    />
+                  )}
                 />
               </FormGroup>
             </div>
@@ -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={(
+                  <InputValidationError
+                    error={getFieldError('Proxy')}
+                  />
+                )}
               />
             </FormGroup>
           </div>
@@ -383,6 +427,14 @@ export default function ConnectionForm (props) {
             />
           </div>
           <div style={{ display: 'flex' }}>
+            <div style={{ justifyContent: 'center', padding: '8px' }}>
+              {validationErrors.length > 0 && (
+                <Popover interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}>
+                  <Icon icon='warning-sign' size={16} color={Colors.RED5} style={{ outline: 'none' }} />
+                  <div style={{ padding: '5px' }}><FormValidationErrors errors={validationErrors} /></div>
+                </Popover>
+              )}
+            </div>
             <Button className='btn-cancel' icon='remove' text='Cancel' onClick={onCancel} disabled={isSaving || isTesting} />
             <Button
               className='btn-save'
diff --git a/config-ui/src/styles/integration.scss b/config-ui/src/styles/integration.scss
@@ -114,4 +114,29 @@ table.connections-table {
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 12px 12px;
+}
+
+.configureConnection {
+  min-width: 690px;
+  max-width: 860px;
+  margin-right: auto;
+
+  .bp3-input-group {
+    &.connection-name-input, &.username-input, &.password-input {
+      min-width: 320px;
+      width: auto;
+      max-width: 460px;
+    }
+  }
+}
+
+.bp3-input-group {
+  &.invalid-field {
+    + label { font-weight: bold }
+    > input {
+      box-shadow: rgb(232, 28, 28) 0px 0px 0px 1px, rgba(232, 71, 28, 0.3) 0px 0px 0px 3px, rgba(16, 22, 26, 0.2) 0px 1px 1px 0px inset;
+      box-sizing: border-box;
+      background-color: #ffeeee;
+    }
+  }
 }
