fix: disable form if not pay as you go or free flag customer (#5357)

Author: helenosheaa

src/buckets/components/CreateBucketButton.tsx

@@ -3,7 +3,12 @@ import React, {FC, useEffect} from 'react'
 import {connect, ConnectedProps, useDispatch} from 'react-redux'
 
 // Components
-import {Button, IconFont, ComponentColor} from '@influxdata/clockface'
+import {
+  Button,
+  IconFont,
+  ComponentColor,
+  ComponentStatus,
+} from '@influxdata/clockface'
 import AssetLimitButton from 'src/cloud/components/AssetLimitButton'
 
 // Actions
@@ -25,6 +30,7 @@ type ReduxProps = ConnectedProps<typeof connector>
 type CreateButtonProps = {
   useSimplifiedBucketForm?: boolean
   callbackAfterBucketCreation?: (bucket: OwnBucket) => void
+  disabled?: boolean
 }
 
 type Props = ReduxProps & CreateButtonProps
@@ -35,6 +41,7 @@ const CreateBucketButton: FC<Props> = ({
   onDismissOverlay,
   useSimplifiedBucketForm = false,
   callbackAfterBucketCreation = () => {},
+  disabled = false,
 }) => {
   const dispatch = useDispatch()
   useEffect(() => {
@@ -63,6 +70,7 @@ const CreateBucketButton: FC<Props> = ({
       titleText="Click to create a bucket"
       onClick={handleItemClick}
       testID="Create Bucket"
+      status={disabled ? ComponentStatus.Disabled : ComponentStatus.Default}
     />
   )
 }

src/writeData/components/WriteDataHelperBuckets.tsx

@@ -22,11 +22,13 @@ import {
 interface Props {
   className?: string
   useSimplifiedBucketForm?: boolean
+  disabled?: boolean
 }
 
 const WriteDataHelperBuckets: FC<Props> = ({
   className = 'write-data--details-widget-title',
   useSimplifiedBucketForm = false,
+  disabled = false,
 }) => {
   const {bucket, buckets, changeBucket} = useContext(WriteDataDetailsContext)
   const isSelected = (bucketID: string): boolean => {
@@ -74,6 +76,7 @@ const WriteDataHelperBuckets: FC<Props> = ({
       >
         {filteredBuckets.map(b => (
           <List.Item
+            disabled={disabled}
             size={ComponentSize.Small}
             key={b.id}
             selected={isSelected(b.id)}
@@ -96,6 +99,7 @@ const WriteDataHelperBuckets: FC<Props> = ({
         <CreateBucketButton
           useSimplifiedBucketForm={useSimplifiedBucketForm}
           callbackAfterBucketCreation={changeBucket}
+          disabled={disabled}
         />
       </Heading>
       {body}

src/writeData/subscriptions/components/BrokerForm.scss

@@ -47,35 +47,19 @@
     -webkit-appearance: none;
     margin: 0;
   }
-  &__upgrade-button {
-    background: linear-gradient(45deg, #0098f0 0%, $c-pulsar 100%) !important;
-    color: $cf-white;
-    padding: 0 $cf-space-xs;
-    height: 40px;
-    font-weight: 500;
-    font-family: 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif;
-    border-style: solid;
-    border-width: 0;
-    text-decoration: none;
-    transition: background-color 200ms cubic-bezier(0.18, 0.16, 0.2, 1),
-      box-shadow 200ms cubic-bezier(0.18, 0.16, 0.2, 1),
-      color 200ms cubic-bezier(0.18, 0.16, 0.2, 1);
-    outline: none;
-    border-radius: 2px;
-    white-space: nowrap;
-    position: relative;
-    z-index: 1;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
   &__header {
     text-transform: uppercase;
     margin: $cf-space-l 0;
   }
   &__text {
     color: $cf-grey-95;
   }
+  &__upgrade-text {
+    background: -webkit-linear-gradient(45deg, #34bb55 0%, $c-pool 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 700;
+  }
   &__container {
     .cf-flex-box__margin-lg.cf-flex-box__row.cf-flex-box__justify-flex-start
       > * {

src/writeData/subscriptions/components/BrokerForm.tsx

@@ -24,18 +24,15 @@ import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
 
 // Utils
 import {getOrg} from 'src/organizations/selectors'
-import {
-  shouldGetCredit250Experience,
-  shouldShowUpgradeButton,
-} from 'src/me/selectors'
+import {shouldGetCredit250Experience} from 'src/me/selectors'
 import {event} from 'src/cloud/utils/reporting'
 import {checkRequiredFields} from 'src/writeData/subscriptions/utils/form'
-import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {
   getDataLayerIdentity,
   getExperimentVariantId,
 } from 'src/cloud/utils/experiments'
 import {AppSettingContext} from 'src/shared/contexts/app'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Constants
 import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
@@ -52,20 +49,18 @@ interface Props {
   updateForm: (any) => void
   saveForm: (any) => void
   onFocus?: (any) => void
+  showUpgradeButton: boolean
 }
 
 const BrokerForm: FC<Props> = ({
   formContent,
   updateForm,
   saveForm,
   onFocus,
+  showUpgradeButton,
 }) => {
   const history = useHistory()
   const org = useSelector(getOrg)
-  // enabled for PAYG accounts and specific free accounts where a flag is enabled
-  const showUpgradeButton =
-    useSelector(shouldShowUpgradeButton) &&
-    !isFlagEnabled('enableFreeSubscriptions')
   const isCredit250ExperienceActive = useSelector(shouldGetCredit250Experience)
   const requiredFields = checkRequiredFields(formContent)
   const {navbarMode} = useContext(AppSettingContext)
@@ -108,7 +103,6 @@ const BrokerForm: FC<Props> = ({
               />
               {showUpgradeButton ? (
                 <CloudUpgradeButton
-                  className="create-broker-form__upgrade-button"
                   metric={() => {
                     const experimentVariantId = getExperimentVariantId(
                       CREDIT_250_EXPERIMENT_ID
@@ -164,9 +158,17 @@ const BrokerForm: FC<Props> = ({
               weight={FontWeight.Regular}
               className="create-broker-form__text"
             >
-              {showUpgradeButton
-                ? 'Upgrade Now to create a new connection to collect data from an MQTT broker and parse messages into metrics.'
-                : 'Create a new connection to collect data from an MQTT broker and parse messages into metrics.'}
+              {showUpgradeButton ? (
+                <p>
+                  <strong className="create-broker-form__upgrade-text">
+                    Upgrade Now
+                  </strong>{' '}
+                  to create a new connection to collect data from an MQTT broker
+                  and parse messages into metrics.
+                </p>
+              ) : (
+                'Create a new connection to collect data from an MQTT broker and parse messages into metrics.'
+              )}
             </Heading>
             <p className="create-broker-form__text">
               See our{' '}
@@ -190,7 +192,7 @@ const BrokerForm: FC<Props> = ({
               updateForm={updateForm}
               formContent={formContent}
               className="create"
-              edit={true}
+              edit={showUpgradeButton ? false : true}
             />
           </Overlay.Body>
           <div className="create-broker-form__line"></div>

src/writeData/subscriptions/components/CreateSubscriptionPage.tsx

@@ -38,7 +38,7 @@ import {
 
 // Utils
 import {getAll} from 'src/resources/selectors'
-import {getQuartzMe} from 'src/me/selectors'
+import {getQuartzMe, shouldShowUpgradeButton} from 'src/me/selectors'
 import {event} from 'src/cloud/utils/reporting'
 import {
   DEFAULT_COMPLETED_STEPS,
@@ -47,6 +47,7 @@ import {
   getFormStatus,
   SUBSCRIPTION_NAVIGATION_STEPS,
 } from 'src/writeData/subscriptions/utils/form'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Styles
 import 'src/writeData/subscriptions/components/CreateSubscriptionPage.scss'
@@ -111,6 +112,11 @@ const CreateSubscriptionPage: FC = () => {
     })
   }
 
+  // enabled for PAYG accounts and specific free accounts where a flag is enabled
+  const showUpgradeButton =
+    useSelector(shouldShowUpgradeButton) &&
+    !isFlagEnabled('enableFreeSubscriptions')
+
   return (
     <GetResources resources={[ResourceType.Buckets]}>
       <Page>
@@ -138,18 +144,21 @@ const CreateSubscriptionPage: FC = () => {
               updateForm={updateForm}
               saveForm={saveForm}
               onFocus={() => setFormActive(Steps.BrokerForm)}
+              showUpgradeButton={showUpgradeButton}
             />
             <SubscriptionForm
               formContent={formContent}
               updateForm={updateForm}
               buckets={buckets}
               bucket={bucket}
               onFocus={() => setFormActive(Steps.SubscriptionForm)}
+              showUpgradeButton={showUpgradeButton}
             />
             <ParsingForm
               formContent={formContent}
               updateForm={updateForm}
               onFocus={() => setFormActive(Steps.ParsingForm)}
+              showUpgradeButton={showUpgradeButton}
             />
           </Page.Contents>
         </SpinnerContainer>

src/writeData/subscriptions/components/JsonParsingForm.tsx

@@ -232,7 +232,7 @@ const JsonParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
                   formContent.jsonMeasurementKey.name
                 )
               }}
-              placeholder="nonDescriptName"
+              placeholder="measurement_name"
               name="name"
               onChange={e => {
                 updateForm({

src/writeData/subscriptions/components/JsonPathInput.tsx

@@ -111,7 +111,7 @@ const JsonPathInput: FC<Props> = ({
                   : formContent.jsonFieldKeys[itemNum].name
               )
             }
-            placeholder="nonDescriptName"
+            placeholder={`${name}_name`.toLowerCase()}
             name={`${name}=name`}
             onChange={e => {
               let newArr

src/writeData/subscriptions/components/ParsingForm.tsx

@@ -25,9 +25,15 @@ interface Props {
   formContent: Subscription
   updateForm: (any) => void
   onFocus?: (any) => void
+  showUpgradeButton: boolean
 }
 
-const ParsingForm: FC<Props> = ({formContent, updateForm, onFocus}) =>
+const ParsingForm: FC<Props> = ({
+  formContent,
+  updateForm,
+  onFocus,
+  showUpgradeButton,
+}) =>
   formContent && (
     <div
       className={
@@ -58,20 +64,23 @@ const ParsingForm: FC<Props> = ({formContent, updateForm, onFocus}) =>
                 className="create"
               />
               {formContent.dataFormat === 'lineprotocol' && (
-                <LineProtocolForm edit={true} formContent={formContent} />
+                <LineProtocolForm
+                  edit={showUpgradeButton ? false : true}
+                  formContent={formContent}
+                />
               )}
               {formContent.dataFormat === 'json' && (
                 <JsonParsingForm
                   formContent={formContent}
                   updateForm={updateForm}
-                  edit={true}
+                  edit={showUpgradeButton ? false : true}
                 />
               )}
               {formContent.dataFormat === 'string' && (
                 <StringParsingForm
                   formContent={formContent}
                   updateForm={updateForm}
-                  edit={true}
+                  edit={showUpgradeButton ? false : true}
                 />
               )}
             </Grid.Row>

src/writeData/subscriptions/components/StringParsingForm.tsx

@@ -225,7 +225,7 @@ const StringParsingForm: FC<Props> = ({formContent, updateForm, edit}) => {
                 formContent.stringMeasurement.name
               )
             }}
-            placeholder="nonDescriptName"
+            placeholder="measurement_name"
             name="name"
             onChange={e => {
               updateForm({

src/writeData/subscriptions/components/StringPatternInput.tsx

@@ -98,7 +98,7 @@ const StringPatternInput: FC<Props> = ({
                 : formContent.stringFields[itemNum].name
             )
           }
-          placeholder="nonDescriptName"
+          placeholder={`${name}_name`.toLowerCase()}
           onChange={e => {
             let newArr
             if (tagType) {