feat(sub): add enable SSL toggle (#6084)

* feat(sub): add enable SSL toggle

* fix: flag name

* fix: remove Me import

Author: Gene Hynson

package.json

@@ -52,7 +52,7 @@
     "cy": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress open",
     "cy:dev": "source ../monitor-ci/.env && CYPRESS_dexUrl=CLOUD CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{cloud,shared}/**/*.*'",
     "cy:dev-oss": "source ../monitor-ci/.env && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{oss,shared}/**/*.*'",
-    "generate": "export SHA=97ca3ce15361c5f5b5654fd32a20df4a31c45cd7 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=f495434ca24ea945785919934e330b3138de03a7 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
     "generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
     "generate-local-cloud": "export REMOTE=../openapi/ && yarn generate-meta-cloud",
     "generate-meta": "if [ -z \"${CLOUD_URL}\" ]; then yarn generate-meta-oss; else yarn generate-meta-cloud; fi",

src/types/me.ts

@@ -1,2 +1,2 @@
 export {MeState} from 'src/me/reducers'
-export {AccountType, Me} from 'src/client/unityRoutes'
+export {AccountType} from 'src/client/unityRoutes'

src/types/subscriptions.ts

@@ -51,6 +51,7 @@ export interface Subscription {
   authType: BrokerAuthTypes
   brokerCertCreationDate?: string
   clientID?: string
+  useSSL: boolean
 }
 
 export interface SubscriptionStatus {

src/writeData/subscriptions/components/BrokerForm.scss

@@ -103,6 +103,9 @@
     margin: 0 12px;
     margin-bottom: 30px;
   }
+  &__ssl-text {
+    margin-left: $cf-space-s;
+  }
 }
 .cf-status-indicator {
   top: unset;

src/writeData/subscriptions/components/BrokerFormContent.tsx

@@ -23,6 +23,7 @@ import {
   Toggle,
   InputToggleType,
   InputLabel,
+  SlideToggle,
 } from '@influxdata/clockface'
 import UserInput from 'src/writeData/subscriptions/components/UserInput'
 import CertificateInput from 'src/writeData/subscriptions/components/CertificateInput'
@@ -283,17 +284,40 @@ const BrokerFormContent: FC<Props> = ({
               )}
             </Form.ValidationElement>
           </FlexBox>
+          {isFlagEnabled('subscriptionsSSLSupport') && (
+            <FlexBox
+              direction={FlexDirection.Row}
+              alignItems={AlignItems.Center}
+              margin={ComponentSize.Medium}
+              className="static-toggle"
+            >
+              <SlideToggle
+                active={formContent.useSSL}
+                onChange={() => {
+                  updateForm({
+                    ...formContent,
+                    useSSL: !formContent.useSSL,
+                  })
+                }}
+                disabled={!edit}
+                size={ComponentSize.Medium}
+              />
+              <Heading
+                element={HeadingElement.H4}
+                weight={FontWeight.Regular}
+                className={`${className}-broker-form__ssl-text`}
+              >
+                Enable SSL
+              </Heading>
+            </FlexBox>
+          )}
           {showHostPortExampleText && (
             <Heading
               element={HeadingElement.H5}
               weight={FontWeight.Regular}
               className={`${className}-broker-form__example-text`}
             >
-              {getSchemaFromProtocol(
-                formContent.protocol,
-                isFlagEnabled('subscriptionsCertificateSupport') &&
-                  formContent.authType === BrokerAuthTypes.Certificate
-              )}
+              {getSchemaFromProtocol(formContent.protocol, formContent)}
               {`${formContent.brokerHost}:${
                 !!formContent.brokerPort && !isNaN(formContent.brokerPort)
                   ? formContent.brokerPort
@@ -457,6 +481,7 @@ const BrokerFormContent: FC<Props> = ({
                   brokerUsername: null,
                   brokerPassword: null,
                   authType: BrokerAuthTypes.Certificate,
+                  useSSL: true,
                 })
               }}
               value="certificate"

src/writeData/subscriptions/context/subscription.create.tsx

@@ -76,6 +76,7 @@ export const DEFAULT_CONTEXT: SubscriptionCreateContextType = {
     },
     bucket: 'nifi',
     timestampPrecision: 'NS',
+    useSSL: false,
   },
   updateForm: () => {},
   loading: RemoteDataState.NotStarted,

src/writeData/subscriptions/context/subscription.update.tsx

@@ -94,6 +94,7 @@ export const DEFAULT_CONTEXT: SubscriptionUpdateContextType = {
     },
     bucket: 'nifi',
     timestampPrecision: 'NS',
+    useSSL: false,
   },
   updateForm: () => {},
   loading: RemoteDataState.NotStarted,

src/writeData/subscriptions/utils/form.ts

@@ -11,6 +11,7 @@ import {
 import jsonpath from 'jsonpath'
 import {IconFont} from '@influxdata/clockface'
 import {Bulletin} from '../context/subscription.list'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 export const DEFAULT_COMPLETED_STEPS = {
   [Steps.BrokerForm]: false,
@@ -504,10 +505,18 @@ export const handleAvroValidation = (property: string, value: string) => {
     : null
 }
 
-export const getSchemaFromProtocol = (protocol: string, isSecure: boolean) => {
+export const getSchemaFromProtocol = (
+  protocol: string,
+  formContent: Subscription
+) => {
+  const usingCertAuth =
+    isFlagEnabled('subscriptionsCertificateSupport') &&
+    formContent.authType === BrokerAuthTypes.Certificate
+  const usingSSL =
+    isFlagEnabled('subscriptionsSSLSupport') && formContent.useSSL
   switch (protocol.toLowerCase()) {
     case 'mqtt': {
-      return `mqtt${isSecure ? 's' : ''}://`
+      return `mqtt${usingCertAuth || usingSSL ? 's' : ''}://`
     }
     default: {
       return 'tcp://'