feat: add onFocus for subscription sections (#4991)

* feat: add onFocus for subscription sections

* chore: remove unused import

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

Author: subirjolly

src/writeData/subscriptions/components/BrokerDetails.tsx

@@ -44,6 +44,7 @@ interface Props {
   loading: any
   saveForm: (any) => void
   setStatus: (any) => void
+  onFocus?: () => void
 }
 
 const BrokerDetails: FC<Props> = ({
@@ -54,13 +55,20 @@ const BrokerDetails: FC<Props> = ({
   loading,
   saveForm,
   setStatus,
+  onFocus,
 }) => {
   const history = useHistory()
   const org = useSelector(getOrg)
   const {navbarMode} = useContext(AppSettingContext)
   const navbarOpen = navbarMode === 'expanded'
+
   return (
-    <div className="update-broker-form" id="broker">
+    <div
+      className="update-broker-form"
+      id="broker"
+      onFocus={onFocus}
+      tabIndex={-1}
+    >
       <SpinnerContainer spinnerComponent={<TechnoSpinner />} loading={loading}>
         <Form onSubmit={() => {}} testID="update-broker-form-overlay">
           <div

src/writeData/subscriptions/components/BrokerForm.tsx

@@ -51,9 +51,15 @@ interface Props {
   formContent: Subscription
   updateForm: (any) => void
   saveForm: (any) => void
+  onFocus?: (any) => void
 }
 
-const BrokerForm: FC<Props> = ({formContent, updateForm, saveForm}) => {
+const BrokerForm: FC<Props> = ({
+  formContent,
+  updateForm,
+  saveForm,
+  onFocus,
+}) => {
   const history = useHistory()
   const org = useSelector(getOrg)
   // enabled for PAYG accounts and specific free accounts where a flag is enabled
@@ -66,7 +72,12 @@ const BrokerForm: FC<Props> = ({formContent, updateForm, saveForm}) => {
   const navbarOpen = navbarMode === 'expanded'
   return (
     formContent && (
-      <div className="create-broker-form" id="broker">
+      <div
+        className="create-broker-form"
+        id="broker"
+        onFocus={onFocus}
+        tabIndex={-1}
+      >
         <Form onSubmit={() => {}} testID="create-broker-form-overlay">
           <div
             className="create-broker-form__fixed"

src/writeData/subscriptions/components/CreateSubscriptionPage.tsx

@@ -99,9 +99,9 @@ const CreateSubscriptionPage: FC = () => {
       {feature: 'subscriptions'}
     )
     document
-      .getElementById(stepsWithIsCompletedStatus[step - 1].type)
+      .getElementById(SUBSCRIPTION_NAVIGATION_STEPS[step - 1].type)
       ?.scrollIntoView({behavior: 'smooth', block: 'center'})
-    setFormActive(stepsWithIsCompletedStatus[step - 1].type as Steps)
+    setFormActive(SUBSCRIPTION_NAVIGATION_STEPS[step - 1].type as Steps)
     setCompletedSteps({
       [Steps.BrokerForm]: stepsStatus.brokerStepCompleted === 'true',
       [Steps.SubscriptionForm]:
@@ -136,14 +136,20 @@ const CreateSubscriptionPage: FC = () => {
               formContent={formContent}
               updateForm={updateForm}
               saveForm={saveForm}
+              onFocus={() => setFormActive(Steps.BrokerForm)}
             />
             <SubscriptionForm
               formContent={formContent}
               updateForm={updateForm}
               buckets={buckets}
               bucket={bucket}
+              onFocus={() => setFormActive(Steps.SubscriptionForm)}
+            />
+            <ParsingForm
+              formContent={formContent}
+              updateForm={updateForm}
+              onFocus={() => setFormActive(Steps.ParsingForm)}
             />
-            <ParsingForm formContent={formContent} updateForm={updateForm} />
           </Page.Contents>
         </SpinnerContainer>
       </Page>

src/writeData/subscriptions/components/DetailsSubscriptionPage.tsx

@@ -147,18 +147,21 @@ const DetailsSubscriptionPage: FC = () => {
               loading={loading}
               setStatus={setStatus}
               saveForm={saveForm}
+              onFocus={() => setFormActive(Steps.BrokerForm)}
             />
             <SubscriptionDetails
               currentSubscription={currentSubscription}
               updateForm={updateForm}
               buckets={buckets}
               bucket={bucket}
               edit={isEditEnabled}
+              onFocus={() => setFormActive(Steps.SubscriptionForm)}
             />
             <ParsingDetails
               currentSubscription={currentSubscription}
               updateForm={updateForm}
               edit={isEditEnabled}
+              onFocus={() => setFormActive(Steps.ParsingForm)}
             />
           </Page.Contents>
         </SpinnerContainer>

src/writeData/subscriptions/components/ParsingDetails.tsx

@@ -19,16 +19,24 @@ interface Props {
   currentSubscription: Subscription
   updateForm: (any) => void
   edit: boolean
+  onFocus?: () => void
 }
 
-const ParsingDetails: FC<Props> = ({currentSubscription, updateForm, edit}) => (
+const ParsingDetails: FC<Props> = ({
+  currentSubscription,
+  updateForm,
+  edit,
+  onFocus,
+}) => (
   <div
     className={
       currentSubscription.dataFormat === 'lineprotocol'
         ? 'update-parsing-form--line-protocol'
         : 'update-parsing-form'
     }
     id="parsing"
+    onFocus={onFocus}
+    tabIndex={-1}
   >
     <Form onSubmit={() => {}} testID="update-parsing-form-overlay">
       <Overlay.Header title="Define Data Parsing Rules"></Overlay.Header>

src/writeData/subscriptions/components/ParsingForm.tsx

@@ -24,9 +24,10 @@ import 'src/writeData/subscriptions/components/ParsingForm.scss'
 interface Props {
   formContent: Subscription
   updateForm: (any) => void
+  onFocus?: (any) => void
 }
 
-const ParsingForm: FC<Props> = ({formContent, updateForm}) =>
+const ParsingForm: FC<Props> = ({formContent, updateForm, onFocus}) =>
   formContent && (
     <div
       className={
@@ -35,6 +36,8 @@ const ParsingForm: FC<Props> = ({formContent, updateForm}) =>
           : 'create-parsing-form'
       }
       id="parsing"
+      onFocus={onFocus}
+      tabIndex={-1}
     >
       <Form onSubmit={() => {}} testID="create-parsing-form-overlay">
         <Overlay.Header title="Define Data Parsing Rules"></Overlay.Header>

src/writeData/subscriptions/components/SubscriptionDetails.tsx

@@ -20,6 +20,7 @@ interface Props {
   buckets: any
   bucket: any
   edit: boolean
+  onFocus?: () => void
 }
 
 const SubscriptionDetails: FC<Props> = ({
@@ -28,18 +29,26 @@ const SubscriptionDetails: FC<Props> = ({
   buckets,
   bucket,
   edit,
+  onFocus,
 }) => {
   useEffect(() => {
     event('visited subscription details page', {}, {feature: 'subscriptions'})
   }, [])
+
   useEffect(() => {
     if (edit) {
       updateForm({...currentSubscription, bucket: bucket.name})
     }
   }, [bucket])
+
   return (
     buckets && (
-      <div className="update-subscription-form" id="subscription">
+      <div
+        className="update-subscription-form"
+        id="subscription"
+        onFocus={onFocus}
+        tabIndex={-1}
+      >
         <Form
           onSubmit={() => {}}
           testID="update-subscription-form--overlay-form"

src/writeData/subscriptions/components/SubscriptionForm.tsx

@@ -22,21 +22,29 @@ interface Props {
   updateForm: (any) => void
   buckets: any
   bucket: any
+  onFocus?: (any) => void
 }
 
 const SubscriptionForm: FC<Props> = ({
   formContent,
   updateForm,
   buckets,
   bucket,
+  onFocus,
 }) => {
   useEffect(() => {
     updateForm({...formContent, bucket: bucket.name})
   }, [bucket])
+
   return (
     formContent &&
     buckets && (
-      <div className="create-subscription-form" id="subscription">
+      <div
+        className="create-subscription-form"
+        id="subscription"
+        onFocus={onFocus}
+        tabIndex={-1}
+      >
         <Form
           onSubmit={() => {}}
           testID="create-subscription-form--overlay-form"