feat(sub): certificates coming soon + bug fix (#5052)

Author: Gene Hynson

src/dashboards/selectors/index.test.ts

@@ -113,6 +113,7 @@ describe('Dashboards.Selector', () => {
         theme: 'dark',
         versionInfo: {version: '', commit: ''},
         flowsCTA: {explorer: true, alerts: true, tasks: true},
+        subscriptionsCertificateInterest: false,
       },
     }
 
@@ -137,6 +138,7 @@ describe('Dashboards.Selector', () => {
         theme: 'dark',
         versionInfo: {version: '', commit: ''},
         flowsCTA: {explorer: true, alerts: true, tasks: true},
+        subscriptionsCertificateInterest: false,
       },
     }
 
@@ -169,6 +171,7 @@ describe('Dashboards.Selector', () => {
         theme: 'dark',
         versionInfo: {version: '', commit: ''},
         flowsCTA: {explorer: true, alerts: true, tasks: true},
+        subscriptionsCertificateInterest: false,
       },
     }
 
@@ -201,6 +204,7 @@ describe('Dashboards.Selector', () => {
         theme: 'dark',
         versionInfo: {version: '', commit: ''},
         flowsCTA: {explorer: true, alerts: true, tasks: true},
+        subscriptionsCertificateInterest: false,
       },
     }
 
@@ -229,6 +233,7 @@ describe('Dashboards.Selector', () => {
         theme: 'dark',
         versionInfo: {version: '', commit: ''},
         flowsCTA: {explorer: true, alerts: true, tasks: true},
+        subscriptionsCertificateInterest: false,
       },
     }
 

src/mockState.tsx

@@ -35,6 +35,7 @@ export const localState: LocalStorage = {
         commit: '',
       },
       flowsCTA: {alerts: true, explorer: true, tasks: true},
+      subscriptionsCertificateInterest: false,
     },
   },
   flags: {

src/shared/actions/app.ts

@@ -11,6 +11,7 @@ export enum ActionTypes {
   TemplateControlBarVisibilityToggled = 'TemplateControlBarVisibilityToggledAction',
   SetFlowsCTA = 'SET_FLOWS_CTA',
   Noop = 'NOOP',
+  SetSubscriptionsCertificateInterest = 'SET_SUB_CERT_INTEREST',
 }
 
 export type Action =
@@ -23,6 +24,7 @@ export type Action =
   | ReturnType<typeof setTheme>
   | ReturnType<typeof setVersionInfo>
   | ReturnType<typeof setFlowsCTA>
+  | ReturnType<typeof setSubscriptionsCertificateInterest>
 
 // ephemeral state action creators
 
@@ -77,3 +79,8 @@ export const setFlowsCTA = (flowsCTA: FlowsCTA) =>
     type: ActionTypes.SetFlowsCTA,
     payload: {flowsCTA},
   } as const)
+
+export const setSubscriptionsCertificateInterest = () =>
+  ({
+    type: ActionTypes.SetSubscriptionsCertificateInterest,
+  } as const)

src/shared/contexts/app.tsx

@@ -9,6 +9,7 @@ import {
   enablePresentationMode,
   disablePresentationMode,
   setFlowsCTA as setFlowsCTAAction,
+  setSubscriptionsCertificateInterest as setSubscriptionsCertificateInterestAction,
 } from 'src/shared/actions/app'
 import {
   timeZone as timeZoneFromState,
@@ -17,12 +18,14 @@ import {
   fluxQueryBuilder as fluxQueryBuilderFromState,
   navbarMode as navbarModeFromState,
   getFlowsCTA,
+  getSubscriptionsCertificateInterest,
 } from 'src/shared/selectors/app'
 import {notify} from 'src/shared/actions/notifications'
 import {PRESENTATION_MODE_ANIMATION_DELAY} from 'src/shared/constants'
 import {presentationMode as presentationModeCopy} from 'src/shared/copy/notifications'
 
 import {AppState, TimeZone, Theme, NavBarState, FlowsCTA} from 'src/types'
+import {event} from 'src/cloud/utils/reporting'
 
 interface AppSettingContextType {
   timeZone: TimeZone
@@ -31,13 +34,15 @@ interface AppSettingContextType {
   fluxQueryBuilder: boolean
   navbarMode: NavBarState
   flowsCTA: FlowsCTA
+  subscriptionsCertificateInterest: boolean
 
   setTimeZone: (zone: TimeZone) => void
   setTheme: (theme: Theme) => void
   setPresentationMode: (active: boolean) => void
   setFluxQueryBuilder: (active: boolean) => void
   setNavbarMode: (mode: NavBarState) => void
   setFlowsCTA: (flowsCTA: FlowsCTA) => void
+  setSubscriptionsCertificateInterest: () => void
 }
 
 const DEFAULT_CONTEXT: AppSettingContextType = {
@@ -47,13 +52,15 @@ const DEFAULT_CONTEXT: AppSettingContextType = {
   fluxQueryBuilder: false,
   navbarMode: 'collapsed' as NavBarState,
   flowsCTA: {alerts: true, explorer: true, tasks: true} as FlowsCTA,
+  subscriptionsCertificateInterest: false,
 
   setTimeZone: (_zone: TimeZone) => {},
   setTheme: (_theme: Theme) => {},
   setPresentationMode: (_active: boolean) => {},
   setFluxQueryBuilder: (_active: boolean) => {},
   setNavbarMode: (_mode: NavBarState) => {},
   setFlowsCTA: (_flowsCTA: FlowsCTA) => {},
+  setSubscriptionsCertificateInterest: () => {},
 }
 
 export const AppSettingContext = React.createContext<AppSettingContextType>(
@@ -68,13 +75,17 @@ export const AppSettingProvider: FC = ({children}) => {
     fluxQueryBuilder,
     navbarMode,
     flowsCTA,
+    subscriptionsCertificateInterest,
   } = useSelector((state: AppState) => ({
     timeZone: timeZoneFromState(state),
     theme: themeFromState(state),
     presentationMode: presentationModeFromState(state),
     fluxQueryBuilder: fluxQueryBuilderFromState(state),
     navbarMode: navbarModeFromState(state),
     flowsCTA: getFlowsCTA(state),
+    subscriptionsCertificateInterest: getSubscriptionsCertificateInterest(
+      state
+    ),
   }))
   const dispatch = useDispatch()
 
@@ -121,6 +132,10 @@ export const AppSettingProvider: FC = ({children}) => {
     },
     [dispatch]
   )
+  const setSubscriptionsCertificateInterest = useCallback(() => {
+    event('certificate auth interest', {}, {feature: 'subscriptions'})
+    dispatch(setSubscriptionsCertificateInterestAction())
+  }, [dispatch])
 
   return (
     <AppSettingContext.Provider
@@ -131,13 +146,15 @@ export const AppSettingProvider: FC = ({children}) => {
         fluxQueryBuilder,
         navbarMode,
         flowsCTA,
+        subscriptionsCertificateInterest,
 
         setTimeZone,
         setTheme,
         setPresentationMode,
         setFluxQueryBuilder,
         setNavbarMode,
         setFlowsCTA,
+        setSubscriptionsCertificateInterest,
       }}
     >
       {children}

src/shared/reducers/app.test.ts

@@ -24,6 +24,7 @@ describe('Shared.Reducers.appReducer', () => {
       theme: 'dark',
       versionInfo: {version: '', commit: ''},
       flowsCTA: {explorer: true, tasks: true, alerts: true},
+      subscriptionsCertificateInterest: false,
     },
   }
 

src/shared/reducers/app.ts

@@ -18,6 +18,7 @@ export interface AppState {
     theme: Theme
     versionInfo: VersionInfo
     flowsCTA: FlowsCTA
+    subscriptionsCertificateInterest: boolean
   }
 }
 
@@ -34,6 +35,7 @@ const initialState: AppState = {
     fluxQueryBuilder: false,
     versionInfo: {version: '', commit: ''},
     flowsCTA: {explorer: true, tasks: true, alerts: true},
+    subscriptionsCertificateInterest: false,
   },
 }
 
@@ -117,6 +119,13 @@ const appPersistedReducer = (
       }
     }
 
+    case ActionTypes.SetSubscriptionsCertificateInterest: {
+      return {
+        ...state,
+        subscriptionsCertificateInterest: true,
+      }
+    }
+
     default:
       return state
   }

src/shared/selectors/app.ts

@@ -32,3 +32,6 @@ export const getFlowsCTA = (state: AppState): FlowsCTA =>
 
 export const getAllFluxFunctions = (state: AppState): FluxFunction[] =>
   state.fluxDocs.fluxDocs
+
+export const getSubscriptionsCertificateInterest = (state: AppState): boolean =>
+  state.app.persisted.subscriptionsCertificateInterest || false

src/writeData/subscriptions/components/BrokerForm.tsx

@@ -82,7 +82,7 @@ const BrokerForm: FC<Props> = ({
           <div
             className="create-broker-form__fixed"
             style={{
-              width: navbarOpen ? 'calc(75% - 235px)' : 'calc(100% - 374px)',
+              width: navbarOpen ? 'calc(75% - 225px)' : 'calc(75% - 85px)',
             }}
           >
             <FlexBox

src/writeData/subscriptions/components/BrokerFormContent.tsx

@@ -21,6 +21,7 @@ import {
   ComponentStatus,
 } from '@influxdata/clockface'
 import UserInput from 'src/writeData/subscriptions/components/UserInput'
+import CertificateInput from 'src/writeData/subscriptions/components/CertificateInput'
 
 // Utils
 import {handleValidation} from 'src/writeData/subscriptions/utils/form'
@@ -191,7 +192,7 @@ const BrokerFormContent: FC<Props> = ({
                 handleValidation('Broker Host', formContent.brokerHost)
               }
               helpText={
-                edit
+                className !== 'create' && edit
                   ? 'Changing the hostname will require you to provide your password again.'
                   : ''
               }
@@ -323,24 +324,27 @@ const BrokerFormContent: FC<Props> = ({
               titleText="User"
               disabled={!edit}
             >
-              User
+              Basic
+            </SelectGroup.Option>
+            <SelectGroup.Option
+              name="certificate"
+              id="certificate"
+              testID="certificate--button"
+              active={security === 'certificate'}
+              onClick={() => {
+                event(
+                  'broker security toggle',
+                  {method: 'certificate', step: 'broker'},
+                  {feature: 'subscriptions'}
+                )
+                setSecurity('certificate')
+              }}
+              value="certificate"
+              titleText="Certificate"
+              disabled={!edit}
+            >
+              Certificate
             </SelectGroup.Option>
-            {/* For a later iteration */}
-            {/* <SelectGroup.Option
-            name="user"
-            id="user"
-            testID="user--button"
-            active={security === 'certificate'}
-            onClick={() => {
-              event('broker security toggle', {method: 'certificate'}, {feature: 'subscriptions'})
-              setSecurity('certificate')
-            }}
-            value={'certificate'}
-            titleText="Certificate"
-            disabled={false}
-          >
-            Certificate
-          </SelectGroup.Option> */}
           </SelectGroup>
           {security === 'user' && (
             <UserInput
@@ -350,6 +354,7 @@ const BrokerFormContent: FC<Props> = ({
               edit={edit}
             />
           )}
+          {security === 'certificate' && <CertificateInput />}
         </Grid.Column>
       </Grid.Row>
     </Grid>

src/writeData/subscriptions/components/CertificateInput.tsx

@@ -0,0 +1,54 @@
+// Libraries
+import React, {FC, useContext} from 'react'
+
+// Contexts
+import {AppSettingContext} from 'src/shared/contexts/app'
+
+// Components
+import {
+  AlignItems,
+  ComponentSize,
+  FlexDirection,
+  FlexBox,
+  InputLabel,
+  Button,
+  Icon,
+  IconFont,
+} from '@influxdata/clockface'
+
+const CertificateInput: FC = () => {
+  const {
+    subscriptionsCertificateInterest,
+    setSubscriptionsCertificateInterest,
+  } = useContext(AppSettingContext)
+  return (
+    <FlexBox
+      alignItems={AlignItems.Center}
+      direction={FlexDirection.Column}
+      margin={ComponentSize.Large}
+    >
+      <InputLabel size={ComponentSize.Large} style={{fontWeight: 'bold'}}>
+        Coming soon!
+      </InputLabel>
+      <InputLabel size={ComponentSize.Medium}>
+        Interested in using certificates to authenticate with your broker? Let
+        us know so we can notify you when it's available.
+      </InputLabel>
+      {!subscriptionsCertificateInterest && (
+        <Button
+          text="Notify me"
+          onClick={() => setSubscriptionsCertificateInterest()}
+        />
+      )}
+      {subscriptionsCertificateInterest && (
+        <InputLabel size={ComponentSize.Large}>
+          <div>
+            <Icon glyph={IconFont.Checkmark_New} />
+            {" You're on the list!"}
+          </div>
+        </InputLabel>
+      )}
+    </FlexBox>
+  )
+}
+export default CertificateInput