feat: add certificate support for subscriptions (#5369)

* feat: add certificate support for subscriptions

* chore: update form to validate certificate fields

* chore: update modal to be wrapped in ClickOutside component

* chore: remove extra fragment

* chore: cert provided timestamp param name

* chore: add placeholders for certificate textareas

* chore: update per product feedback

* chore: update import path

* chore: update per review

Co-authored-by: Subir Jolly <sjolly@influxdata.com>

Author: subirjolly

src/overlays/components/OverlayController.tsx

@@ -46,6 +46,7 @@ import ConfirmationOverlay from 'src/support/components/ConfirmationOverlay'
 
 // Actions
 import {dismissOverlay} from 'src/overlays/actions/overlays'
+import {ReplaceCertificateOverlay} from 'src/writeData/subscriptions/components/CertificateInput'
 
 export interface OverlayContextType {
   onClose: () => void
@@ -163,6 +164,9 @@ export const OverlayController: FunctionComponent = () => {
       case 'help-bar-confirmation':
         activeOverlay.current = <ConfirmationOverlay onClose={onClose} />
         break
+      case 'subscription-replace-certificate':
+        activeOverlay.current = <ReplaceCertificateOverlay onClose={onClose} />
+        break
       default:
         activeOverlay.current = null
         break

src/overlays/reducers/overlays.ts

@@ -34,6 +34,7 @@ export type OverlayID =
   | 'free-account-support'
   | 'feedback-questions'
   | 'help-bar-confirmation'
+  | 'subscription-replace-certificate'
 
 export interface OverlayState {
   id: OverlayID | null

src/types/subscriptions.ts

@@ -1,5 +1,7 @@
 import {SubwayNavModel} from '@influxdata/clockface'
 
+export type BrokerAuthType = 'none' | 'user' | 'certificate'
+
 export interface Subscription {
   id?: string
   name?: string
@@ -33,6 +35,11 @@ export interface Subscription {
   flowVersion?: number
   timestampPrecision?: string
   notebookID?: string
+  brokerClientKey?: string
+  brokerClientCert?: string
+  brokerCACert?: string
+  authType: BrokerAuthType
+  certProvidedAt?: string
 }
 
 export interface SubscriptionStatus {

src/writeData/subscriptions/components/BrokerFormContent.tsx

@@ -40,7 +40,7 @@ import {event} from 'src/cloud/utils/reporting'
 
 interface Props {
   formContent: Subscription
-  updateForm: (any) => void
+  updateForm: (any: Subscription) => void
   className: string
   edit: boolean
 }
@@ -54,7 +54,7 @@ const BrokerFormContent: FC<Props> = ({
   const mqttProtocol = 'MQTT'
   const protocolList = [mqttProtocol]
   const [protocol, setProtocol] = useState(mqttProtocol)
-  const [security, setSecurity] = useState('none')
+
   useEffect(() => {
     updateForm({...formContent, protocol: protocol.toLowerCase()})
   }, [protocol])
@@ -68,11 +68,6 @@ const BrokerFormContent: FC<Props> = ({
     })
   }, [])
 
-  useEffect(() => {
-    if (formContent.brokerUsername) {
-      setSecurity('user')
-    }
-  }, [])
   return (
     <Grid>
       <Grid.Row>
@@ -199,7 +194,7 @@ const BrokerFormContent: FC<Props> = ({
               }
               helpText={
                 className !== 'create' && edit
-                  ? 'Changing the hostname will require you to provide your password again.'
+                  ? 'Changing the hostname will require you to provide your security credentials again.'
                   : ''
               }
             >
@@ -301,16 +296,22 @@ const BrokerFormContent: FC<Props> = ({
               name="no-security"
               id="none"
               testID={`${className}-broker-form-no-security--button`}
-              active={security === 'none'}
+              active={formContent.authType === 'none'}
               onClick={() => {
                 event(
                   'broker security toggle',
                   {method: 'none', step: 'broker'},
                   {feature: 'subscriptions'}
                 )
-                setSecurity('none')
-                formContent.brokerUsername = null
-                formContent.brokerPassword = null
+                updateForm({
+                  ...formContent,
+                  authType: 'none',
+                  brokerUsername: null,
+                  brokerPassword: null,
+                  brokerCACert: null,
+                  brokerClientCert: null,
+                  brokerClientKey: null,
+                })
               }}
               value="none"
               titleText="None"
@@ -322,14 +323,20 @@ const BrokerFormContent: FC<Props> = ({
               name="user"
               id="user"
               testID={`${className}-broker-form--user--button`}
-              active={security === 'user'}
+              active={formContent.authType === 'user'}
               onClick={() => {
                 event(
                   'broker security toggle',
                   {method: 'user', step: 'broker'},
                   {feature: 'subscriptions'}
                 )
-                setSecurity('user')
+                updateForm({
+                  ...formContent,
+                  authType: 'user',
+                  brokerCACert: null,
+                  brokerClientCert: null,
+                  brokerClientKey: null,
+                })
               }}
               value="user"
               titleText="User"
@@ -341,14 +348,19 @@ const BrokerFormContent: FC<Props> = ({
               name="certificate"
               id="certificate"
               testID="certificate--button"
-              active={security === 'certificate'}
+              active={formContent.authType === 'certificate'}
               onClick={() => {
                 event(
                   'broker security toggle',
                   {method: 'certificate', step: 'broker'},
                   {feature: 'subscriptions'}
                 )
-                setSecurity('certificate')
+                updateForm({
+                  ...formContent,
+                  brokerUsername: null,
+                  brokerPassword: null,
+                  authType: 'certificate',
+                })
               }}
               value="certificate"
               titleText="Certificate"
@@ -357,15 +369,21 @@ const BrokerFormContent: FC<Props> = ({
               Certificate
             </SelectGroup.Option>
           </SelectGroup>
-          {security === 'user' && (
+          {formContent.authType === 'user' && (
             <UserInput
               formContent={formContent}
               updateForm={updateForm}
               className={className}
               edit={edit}
             />
           )}
-          {security === 'certificate' && <CertificateInput />}
+          {formContent.authType === 'certificate' && (
+            <CertificateInput
+              subscription={formContent}
+              updateForm={updateForm}
+              edit={edit}
+            />
+          )}
         </Grid.Column>
       </Grid.Row>
     </Grid>

src/writeData/subscriptions/components/CertificateInput.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC, useContext} from 'react'
+import React, {FC, useCallback, useContext} from 'react'
 
 // Contexts
 import {AppSettingContext} from 'src/shared/contexts/app'
@@ -14,9 +14,89 @@ import {
   Button,
   Icon,
   IconFont,
+  JustifyContent,
+  ComponentColor,
+  ButtonType,
+  Overlay,
+  FlexBoxChild,
+  ClickOutside,
 } from '@influxdata/clockface'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import TextAreaWithLabel from 'src/writeData/subscriptions/components/TextAreaWithLabel'
+import {event} from 'src/cloud/utils/reporting'
+import {useDispatch} from 'react-redux'
+import {dismissOverlay, showOverlay} from 'src/overlays/actions/overlays'
+import {Subscription} from 'src/types'
+import {OverlayContext} from 'src/overlays/components/OverlayController'
 
-const CertificateInput: FC = () => {
+interface OwnProps {
+  edit?: boolean
+  updateForm: (_: Subscription) => void
+  subscription: Subscription
+}
+
+const NewCertificateInput: FC<OwnProps> = ({updateForm, subscription}) => {
+  const handleUpdateCACert = useCallback(
+    e => {
+      updateForm({...subscription, brokerCACert: e.target.value})
+    },
+    [subscription, updateForm]
+  )
+  const handleUpdatePrivateKey = useCallback(
+    e => {
+      updateForm({...subscription, brokerClientKey: e.target.value})
+    },
+    [subscription, updateForm]
+  )
+  const handleUpdateCert = useCallback(
+    e => {
+      updateForm({...subscription, brokerClientCert: e.target.value})
+    },
+    [subscription, updateForm]
+  )
+
+  return (
+    <FlexBox
+      alignItems={AlignItems.FlexStart}
+      justifyContent={JustifyContent.Center}
+      direction={FlexDirection.Column}
+      margin={ComponentSize.Large}
+    >
+      <InputLabel size={ComponentSize.Medium}>
+        Enable secure communication for your subscription with SSL and TLS
+        <br />
+        certificates by configuring the following certificate information:
+      </InputLabel>
+      <TextAreaWithLabel
+        name="Certificate"
+        label="Certificate authority"
+        onChange={handleUpdateCACert}
+        value={subscription?.brokerCACert ?? ''}
+        placeholder={CertificatePlaceholders.caCert}
+        rows={4}
+        required
+      />
+      <TextAreaWithLabel
+        name="PrivateKey"
+        label="Private Key"
+        onChange={handleUpdatePrivateKey}
+        placeholder={CertificatePlaceholders.clientKey}
+        value={subscription?.brokerClientKey ?? ''}
+        rows={4}
+      />
+      <TextAreaWithLabel
+        name="CertificateAuthority"
+        label="Certificate"
+        onChange={handleUpdateCert}
+        value={subscription?.brokerClientCert ?? ''}
+        placeholder={CertificatePlaceholders.clientCert}
+        rows={4}
+      />
+    </FlexBox>
+  )
+}
+
+const OldCertificateInput: FC = () => {
   const {
     subscriptionsCertificateInterest,
     setSubscriptionsCertificateInterest,
@@ -51,4 +131,119 @@ const CertificateInput: FC = () => {
     </FlexBox>
   )
 }
+
+const CertificatePlaceholders = {
+  caCert: `-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----`,
+  clientCert: `-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----`,
+  clientKey: `-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----`,
+}
+
+interface ReplaceCertificateModalProps {
+  onClose: () => void
+}
+export const ReplaceCertificateOverlay: FC<ReplaceCertificateModalProps> = () => {
+  const {
+    onClose,
+    params: {subscription, updateForm},
+  } = useContext(OverlayContext)
+  const handleReplaceCert = useCallback(() => {
+    updateForm({...subscription, certProvidedAt: null})
+    onClose()
+  }, [subscription, updateForm, onClose])
+  return (
+    <Overlay visible={true} className="subscription-replace-cert-overlay">
+      <ClickOutside onClickOutside={onClose}>
+        <div>
+          <Overlay.Container maxWidth={450} style={{paddingTop: '20px'}}>
+            <Overlay.Body>
+              <FlexBox
+                direction={FlexDirection.Row}
+                stretchToFitWidth={true}
+                justifyContent={JustifyContent.SpaceBetween}
+                alignItems={AlignItems.Center}
+              >
+                <div>
+                  Are you sure you want to replace your certificate? Once you
+                  save your changes, we cannot retrieve the previous
+                  certificate.
+                </div>
+                <Button
+                  color={ComponentColor.Primary}
+                  text="Yes, Continue"
+                  onClick={handleReplaceCert}
+                  testID="subs-replace-cert-confirm-btn"
+                />
+              </FlexBox>
+            </Overlay.Body>
+          </Overlay.Container>
+        </div>
+      </ClickOutside>
+    </Overlay>
+  )
+}
+
+const CertificateDetails: FC<OwnProps> = ({subscription, updateForm, edit}) => {
+  const dispatch = useDispatch()
+  return (
+    <FlexBox
+      direction={FlexDirection.Row}
+      margin={ComponentSize.Large}
+      stretchToFitWidth={true}
+      justifyContent={JustifyContent.SpaceBetween}
+      alignItems={AlignItems.Center}
+    >
+      <FlexBoxChild>
+        <FlexBox
+          direction={FlexDirection.Column}
+          alignItems={AlignItems.Stretch}
+          justifyContent={JustifyContent.Center}
+        >
+          <InputLabel size={ComponentSize.Medium} style={{fontWeight: 'bold'}}>
+            Certificate
+          </InputLabel>
+          <InputLabel size={ComponentSize.Small}>
+            {subscription.certProvidedAt}
+          </InputLabel>
+        </FlexBox>
+      </FlexBoxChild>
+      {edit && (
+        <Button
+          text="Replace Certificate"
+          color={ComponentColor.Secondary}
+          onClick={() => {
+            event('replace certificate clicked', {}, {feature: 'subscriptions'})
+            dispatch(
+              showOverlay(
+                'subscription-replace-certificate',
+                {subscription, updateForm},
+                () => dispatch(dismissOverlay)
+              )
+            )
+          }}
+          type={ButtonType.Button}
+          titleText="Edit"
+          testID="update-sub-form--edit"
+        />
+      )}
+    </FlexBox>
+  )
+}
+
+const CertificateInput: FC<OwnProps> = ({subscription, updateForm, edit}) => {
+  if (subscription.authType === 'certificate' && subscription.certProvidedAt) {
+    return (
+      <CertificateDetails
+        subscription={subscription}
+        updateForm={updateForm}
+        edit={edit}
+      />
+    )
+  }
+
+  return isFlagEnabled('enableCertificateSupport') ? (
+    <NewCertificateInput subscription={subscription} updateForm={updateForm} />
+  ) : (
+    <OldCertificateInput />
+  )
+}
 export default CertificateInput