feat(sub): edit form field validation (#5039)

Author: Gene Hynson

src/writeData/subscriptions/components/BrokerDetails.tsx

@@ -28,6 +28,7 @@ import BrokerFormContent from 'src/writeData/subscriptions/components/BrokerForm
 import {getOrg} from 'src/organizations/selectors'
 import {event} from 'src/cloud/utils/reporting'
 import {AppSettingContext} from 'src/shared/contexts/app'
+import {checkRequiredFields} from 'src/writeData/subscriptions/utils/form'
 
 // Types
 import {SUBSCRIPTIONS, LOAD_DATA} from 'src/shared/constants/routes'
@@ -60,6 +61,7 @@ const BrokerDetails: FC<Props> = ({
   const history = useHistory()
   const org = useSelector(getOrg)
   const {navbarMode} = useContext(AppSettingContext)
+  const requiredFields = checkRequiredFields(currentSubscription)
   const navbarOpen = navbarMode === 'expanded'
 
   return (
@@ -106,10 +108,8 @@ const BrokerDetails: FC<Props> = ({
                   testID="update-sub-form--cancel"
                 />
                 <Button
-                  text="Edit"
-                  color={
-                    edit ? ComponentColor.Success : ComponentColor.Secondary
-                  }
+                  text={edit ? 'Cancel' : 'Edit'}
+                  color={ComponentColor.Secondary}
                   onClick={() => {
                     event('edit button clicked', {}, {feature: 'subscriptions'})
                     setEdit(!edit)
@@ -127,6 +127,11 @@ const BrokerDetails: FC<Props> = ({
                       saveForm(currentSubscription)
                     }}
                     testID="update-sub-form--submit"
+                    status={
+                      requiredFields
+                        ? ComponentStatus.Default
+                        : ComponentStatus.Disabled
+                    }
                   />
                 ) : (
                   <Button

src/writeData/subscriptions/components/BrokerFormContent.tsx

@@ -184,6 +184,11 @@ const BrokerFormContent: FC<Props> = ({
               validationFunc={() =>
                 handleValidation('Broker Host', formContent.brokerHost)
               }
+              helpText={
+                edit
+                  ? 'Changing the hostname will require you to provide your password again.'
+                  : ''
+              }
             >
               {status => (
                 <Input
@@ -196,6 +201,11 @@ const BrokerFormContent: FC<Props> = ({
                     updateForm({
                       ...formContent,
                       brokerHost: e.target.value,
+                      // clear the password field if broker host is edited
+                      brokerPassword:
+                        className === 'create'
+                          ? formContent?.brokerPassword
+                          : '',
                     })
                   }}
                   onBlur={() =>