Use password for OCI `private_key_passphrase`

Renders the OCI's `private_key_passphrase` field as a password input in
endpoint new / edit modal and as a password value in endpoint details
page.
Also adds the ability to specify custom password field names in the
`EndpointStore` file.
If the password field names must be configurable, the array should be
moved in the config file.

src/components/organisms/Endpoint/Endpoint.jsx

@@ -30,7 +30,7 @@ import LoadingButton from '../../molecules/LoadingButton'
 import type { Endpoint as EndpointType } from '../../../types/Endpoint'
 import type { Field } from '../../../types/Field'
 import notificationStore from '../../../stores/NotificationStore'
-import endpointStore from '../../../stores/EndpointStore'
+import endpointStore, { passwordFields } from '../../../stores/EndpointStore'
 import providerStore from '../../../stores/ProviderStore'
 import ObjectUtils from '../../../utils/ObjectUtils'
 import Palette from '../../styleUtils/Palette'
@@ -387,6 +387,7 @@ class Endpoint extends React.Component<Props, State> {
           validating: this.state.validating,
           disabled: this.state.validating,
           cancelButtonText: this.props.cancelButtonText,
+          passwordFields,
           getFieldValue: field => this.getFieldValue(field),
           highlightRequired: () => this.highlightRequired(),
           handleFieldChange: (field, value) => { if (field) this.handleFieldsChange([{ field, value }]) },

src/components/organisms/EndpointDetailsContent/EndpointDetailsContent.jsx

@@ -88,6 +88,7 @@ type Props = {
   onDeleteClick: () => void,
   onValidateClick: () => void,
   onEditClick: () => void,
+  passwordFields?: string[],
 }
 @observer
 class EndpointDetailsContent extends React.Component<Props> {
@@ -137,7 +138,7 @@ class EndpointDetailsContent extends React.Component<Props> {
 
       let valueClass = null
 
-      if (key === 'password') {
+      if (this.props.passwordFields && this.props.passwordFields.find(fn => fn === key)) {
         valueClass = <PasswordValue value={value} data-test-id="edContent-connPassword" />
       } else {
         valueClass = this.renderValue(value, `connValue-${key}`)

src/components/organisms/EndpointDetailsContent/test.jsx

@@ -62,7 +62,7 @@ describe('EndpointDetailsContent Component', () => {
   })
 
   it('renders simple connection info', () => {
-    let wrapper = wrap({ item, connectionInfo })
+    let wrapper = wrap({ item, connectionInfo, passwordFields: ['password'] })
     expect(wrapper.find('connValue-username').prop('value')).toBe(connectionInfo.username)
     expect(wrapper.find('connPassword').prop('value')).toBe(connectionInfo.password)
     expect(wrapper.find('connValue-details').prop('value')).toBe(connectionInfo.details)

src/components/pages/EndpointDetailsPage/EndpointDetailsPage.jsx

@@ -27,7 +27,7 @@ import Modal from '../../molecules/Modal'
 import EndpointValidation from '../../organisms/EndpointValidation'
 import Endpoint from '../../organisms/Endpoint'
 
-import endpointStore from '../../../stores/EndpointStore'
+import endpointStore, { passwordFields } from '../../../stores/EndpointStore'
 import migrationStore from '../../../stores/MigrationStore'
 import replicaStore from '../../../stores/ReplicaStore'
 import userStore from '../../../stores/UserStore'
@@ -201,6 +201,7 @@ class EndpointDetailsPage extends React.Component<Props, State> {
           />}
           contentComponent={<EndpointDetailsContent
             item={endpoint}
+            passwordFields={passwordFields}
             usage={this.state.endpointUsage}
             loading={endpointStore.connectionInfoLoading || endpointStore.loading}
             connectionInfo={endpointStore.connectionInfo}

src/plugins/endpoint/default/ContentPlugin.jsx

@@ -52,6 +52,7 @@ type Props = {
   cancelButtonText: string,
   validating: boolean,
   onRef: (contentPlugin: any) => void,
+  passwordFields?: string[],
 }
 class ContentPlugin extends React.Component<Props> {
   componentDidMount() {
@@ -79,12 +80,13 @@ class ContentPlugin extends React.Component<Props> {
     let lastField
     let i = 0
     this.props.connectionInfoSchema.forEach((field, schemaIndex) => {
+      let isPassword = this.props.passwordFields && this.props.passwordFields.find(fn => fn === field.name)
       const currentField = (
         <FieldStyled
           {...field}
           large
           disabled={this.props.disabled}
-          password={field.name === 'password'}
+          password={isPassword}
           highlight={this.props.invalidFields.findIndex(fn => fn === field.name) > -1}
           value={this.props.getFieldValue(field)}
           onChange={value => { this.props.handleFieldChange(field, value) }}

src/stores/EndpointStore.js

@@ -17,6 +17,8 @@ import { observable, action } from 'mobx'
 import type { Endpoint, Validation } from '../types/Endpoint'
 import EndpointSource from '../sources/EndpointSource'
 
+export const passwordFields = ['password', 'private_key_passphrase']
+
 const updateEndpoint = (endpoint, endpoints) => endpoints.map(e => {
   if (e.id === endpoint.id) {
     return { ...endpoint }