feat(sub): can specify custom client id (#6005)

Gene Hynson · web-flow · commit 6d8400a6a4cf · 2022-10-06T15:22:44.000Z
* feat(sub): can specify custom client id

* fix: use uuid instead of crypto
diff --git a/package.json b/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=b320a258a7a908662c3f36f73a9e5673d60700d5 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=97ca3ce15361c5f5b5654fd32a20df4a31c45cd7 && 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",
@@ -222,6 +222,7 @@
     "s2-geometry": "^1.2.10",
     "ts-jest": "27.0.7",
     "use-local-storage-state": "^9.0.2",
+    "uuid": "^9.0.0",
     "vscode-languageserver-protocol": "^3.16.0",
     "worker-plugin": "^5.0.1",
     "y-websocket": "^1.4.4",
diff --git a/src/types/subscriptions.ts b/src/types/subscriptions.ts
@@ -44,6 +44,7 @@ export interface Subscription {
   brokerCACert?: string
   authType: BrokerAuthTypes
   brokerCertCreationDate?: string
+  clientID?: string
 }
 
 export interface SubscriptionStatus {
diff --git a/src/writeData/subscriptions/components/BrokerDetails.scss b/src/writeData/subscriptions/components/BrokerDetails.scss
@@ -71,6 +71,7 @@
   &__example-text {
     font-style: italic;
     color: $cf-grey-55;
+    margin-bottom: $cf-space-m;
   }
   &__creds {
     .cf-form--element {
diff --git a/src/writeData/subscriptions/components/BrokerForm.scss b/src/writeData/subscriptions/components/BrokerForm.scss
@@ -1,4 +1,8 @@
 @import '@influxdata/clockface/dist/variables.scss';
+
+.no-margin-bottom {
+  margin-bottom: $cf-space-s !important;
+}
 .create-broker-form {
   float: right;
   width: 75%;
@@ -72,6 +76,7 @@
   &__example-text {
     font-style: italic;
     color: $cf-grey-55;
+    margin-bottom: $cf-space-m;
   }
   &__creds {
     .cf-form--element {
diff --git a/src/writeData/subscriptions/components/BrokerFormContent.tsx b/src/writeData/subscriptions/components/BrokerFormContent.tsx
@@ -1,5 +1,6 @@
 // Libraries
-import React, {FC, useEffect, useState} from 'react'
+import React, {FC, useEffect, useRef, useState} from 'react'
+import {v4 as uuidv4} from 'uuid'
 
 // Components
 import {
@@ -19,6 +20,9 @@ import {
   AlignItems,
   FlexDirection,
   ComponentStatus,
+  Toggle,
+  InputToggleType,
+  InputLabel,
 } from '@influxdata/clockface'
 import UserInput from 'src/writeData/subscriptions/components/UserInput'
 import CertificateInput from 'src/writeData/subscriptions/components/CertificateInput'
@@ -57,6 +61,10 @@ const BrokerFormContent: FC<Props> = ({
   const mqttProtocol = 'MQTT'
   const protocolList = [mqttProtocol]
   const [protocol, setProtocol] = useState(mqttProtocol)
+  const [useCustomClientID, setUseCustomClientID] = useState(
+    !!formContent.clientID || false
+  )
+  const randomClientID = useRef(uuidv4())
 
   useEffect(() => {
     updateForm({...formContent, protocol: protocol.toLowerCase()})
@@ -293,6 +301,69 @@ const BrokerFormContent: FC<Props> = ({
               }`}
             </Heading>
           )}
+          {isFlagEnabled('subscriptionsClientId') && (
+            <>
+              <Form.ValidationElement
+                label="Client ID"
+                value={formContent.brokerHost}
+                required={useCustomClientID}
+                validationFunc={() =>
+                  useCustomClientID &&
+                  handleValidation('Client ID', formContent.clientID)
+                }
+                helpText="We will generate a Client ID for you, but some providers require you use their Client ID. If your provider requires a specific Client ID, the connection will fail without it. Check your provider’s documentation to verify whether you need to use their Client ID."
+                className="no-margin-bottom"
+              >
+                {status => (
+                  <Input
+                    type={InputType.Text}
+                    placeholder={
+                      useCustomClientID
+                        ? 'Enter a client id'
+                        : randomClientID.current
+                    }
+                    name="clientid"
+                    autoFocus={false}
+                    value={formContent.clientID}
+                    onChange={e => {
+                      updateForm({
+                        ...formContent,
+                        clientID: e.target.value,
+                      })
+                    }}
+                    onBlur={() =>
+                      event(
+                        'completed form field',
+                        {formField: 'clientid', step: 'broker'},
+                        {feature: 'subscriptions'}
+                      )
+                    }
+                    status={
+                      edit && useCustomClientID
+                        ? status
+                        : ComponentStatus.Disabled
+                    }
+                    testID={`${className}-broker-form--clientid`}
+                    maxLength={255}
+                  />
+                )}
+              </Form.ValidationElement>
+              <Toggle
+                type={InputToggleType.Checkbox}
+                checked={useCustomClientID}
+                id="clientid-toggle"
+                size={ComponentSize.Small}
+                titleText="Use Custom Client ID"
+                onChange={() => {
+                  setUseCustomClientID(!useCustomClientID)
+                  updateForm({...formContent, clientID: ''})
+                }}
+                disabled={!edit}
+              >
+                <InputLabel>Use Custom Client ID</InputLabel>
+              </Toggle>
+            </>
+          )}
         </Grid.Column>
         <Grid.Column widthXS={Columns.Twelve}>
           <Heading
diff --git a/yarn.lock b/yarn.lock
@@ -12366,6 +12366,11 @@ uuid@^8.3.2:
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"

Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,7 @@ export interface Subscription {`
`44`	`44`	`brokerCACert?: string`
`45`	`45`	`authType: BrokerAuthTypes`
`46`	`46`	`brokerCertCreationDate?: string`
	`47`	`+ clientID?: string`
`47`	`48`	`}`
`48`	`49`
`49`	`50`	`export interface SubscriptionStatus {`
Original file line number	Diff line number	Diff line change
`@@ -71,6 +71,7 @@`
`71`	`71`	`&__example-text {`
`72`	`72`	`font-style: italic;`
`73`	`73`	`color: $cf-grey-55;`
	`74`	`+ margin-bottom: $cf-space-m;`
`74`	`75`	`}`
`75`	`76`	`&__creds {`
`76`	`77`	`.cf-form--element {`