feat: start/stop functionality subscriptions (#4320)

Author: helenosheaa

src/shared/copy/notifications/categories/subscriptions.ts

@@ -11,3 +11,8 @@ export const subscriptionUpdateFail = (): Notification => ({
   ...defaultErrorNotification,
   message: `Failed to update Subscription, please try again.`,
 })
+
+export const subscriptionStatusUpdateFail = (): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to update Subscription status, please try again.`,
+})

src/writeData/subscriptions/components/SubscriptionDetailsPage.scss

@@ -31,11 +31,8 @@
     }
   }
   &__status {
-    width: 75%;
-    float: right;
     padding-left: 24px;
     padding-top: 64px;
-    display: flex;
     text-transform: uppercase;
 
     &--RUNNING {
@@ -58,5 +55,8 @@
       color: #4d4d60;
       margin-left: 10px;
     }
+    &--button {
+      margin-right: 24px;
+    }
   }
 }

src/writeData/subscriptions/components/SubscriptionDetailsPage.tsx

@@ -17,11 +17,14 @@ import {
   FontWeight,
   SubwayNav,
   SubwayNavModel,
+  Button,
+  ComponentColor,
+  ComponentStatus,
+  ButtonType,
 } from '@influxdata/clockface'
 import BrokerDetails from 'src/writeData/subscriptions/components/BrokerDetails'
 import ParsingDetails from 'src/writeData/subscriptions/components/ParsingDetails'
 import SubscriptionDetails from 'src/writeData/subscriptions/components/SubscriptionDetails'
-import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
 import GetResources from 'src/resources/components/GetResources'
 
 // Contexts
@@ -38,9 +41,6 @@ import {AppState, ResourceType, Bucket} from 'src/types'
 // Utils
 import {getAll} from 'src/resources/selectors'
 
-// Actions
-import {shouldShowUpgradeButton} from 'src/me/selectors'
-
 // Graphics
 import {FormLogo} from 'src/writeData/subscriptions/graphics/FormLogo'
 
@@ -82,11 +82,14 @@ const navigationSteps: SubscriptionNavigationModel[] = [
 
 const SubscriptionDetailsPage: FC = () => {
   const [active, setFormActive] = useState<Steps>(Steps.BrokerForm)
-  const {currentSubscription, loading, saveForm, updateForm} = useContext(
-    SubscriptionUpdateContext
-  )
+  const {
+    currentSubscription,
+    loading,
+    saveForm,
+    updateForm,
+    setStatus,
+  } = useContext(SubscriptionUpdateContext)
   const {change} = useContext(SubscriptionListContext)
-  const showUpgradeButton = useSelector(shouldShowUpgradeButton)
   const {id} = useParams<{id: string}>()
   const buckets = useSelector((state: AppState) =>
     getAll<Bucket>(state, ResourceType.Buckets).filter(b => b.type === 'user')
@@ -122,15 +125,6 @@ const SubscriptionDetailsPage: FC = () => {
             scrollable={true}
             className="subscription-details-page"
           >
-            {showUpgradeButton && (
-              <FlexBox
-                justifyContent={JustifyContent.FlexEnd}
-                alignItems={AlignItems.FlexEnd}
-                stretchToFitHeight={true}
-              >
-                <CloudUpgradeButton />
-              </FlexBox>
-            )}
             <div className="subscription-details-page__progress">
               <SubwayNav
                 currentStep={getActiveStep(active)}
@@ -140,21 +134,53 @@ const SubscriptionDetailsPage: FC = () => {
                 settingUpText="MQTT Connector"
               />
             </div>
-            <Heading
-              element={HeadingElement.H3}
-              weight={FontWeight.Regular}
-              className="subscription-details-page__status"
+            <FlexBox
+              justifyContent={JustifyContent.SpaceBetween}
+              alignItems={AlignItems.FlexEnd}
+              stretchToFitHeight={true}
             >
-              Status:
-              <span
-                className={
-                  currentSubscription &&
-                  `subscription-details-page__status--${currentSubscription.status}`
-                }
+              <Heading
+                element={HeadingElement.H3}
+                weight={FontWeight.Regular}
+                className="subscription-details-page__status"
               >
-                {currentSubscription && currentSubscription.status}
-              </span>
-            </Heading>
+                Status:
+                <span
+                  className={
+                    currentSubscription &&
+                    `subscription-details-page__status--${currentSubscription.status}`
+                  }
+                >
+                  {currentSubscription && currentSubscription.status}
+                </span>
+              </Heading>
+              {!(
+                currentSubscription.status === 'VALIDATING' ||
+                currentSubscription.status === 'INVALID'
+              ) && (
+                <Button
+                  text={
+                    currentSubscription.status === 'RUNNING' ? 'stop' : 'start'
+                  }
+                  color={
+                    currentSubscription.status === 'RUNNING'
+                      ? ComponentColor.Danger
+                      : ComponentColor.Success
+                  }
+                  onClick={() => {
+                    if (currentSubscription.status === 'RUNNING') {
+                      setStatus(false)
+                    } else {
+                      setStatus(true)
+                    }
+                  }}
+                  type={ButtonType.Submit}
+                  testID="subscription-details-page--status-button"
+                  status={ComponentStatus.Default}
+                  className="subscription-details-page__status--button"
+                />
+              )}
+            </FlexBox>
             {active === Steps.BrokerForm && (
               <BrokerDetails
                 setFormActive={setFormActive}

src/writeData/subscriptions/context/api.tsx

@@ -73,6 +73,7 @@ export const getByIDAPI = async (id: typeof GetBrokerSubParams) => {
   if (res.status != 200) {
     throw new Error(res.data.message)
   }
+  return res.data
 }
 
 export const getStatusAPI = async (id: typeof GetBrokerSubsStatusParams) => {

src/writeData/subscriptions/context/subscription.create.tsx

@@ -107,6 +107,7 @@ export const SubscriptionCreateProvider: FC = ({children}) => {
         history.push(`/orgs/${org.id}/${LOAD_DATA}/${SUBSCRIPTIONS}`)
       })
       .catch(() => {
+        setLoading(RemoteDataState.Done)
         dispatch(notify(subscriptionCreateFail()))
       })
   }

src/writeData/subscriptions/context/subscription.update.tsx

@@ -1,6 +1,10 @@
 // Libraries
 import React, {FC, useState, useCallback, useContext, useEffect} from 'react'
-import {updateAPI} from 'src/writeData/subscriptions/context/api'
+import {
+  updateAPI,
+  updateStatusAPI,
+  getByIDAPI,
+} from 'src/writeData/subscriptions/context/api'
 import {useHistory} from 'react-router-dom'
 import {useDispatch, useSelector} from 'react-redux'
 
@@ -13,7 +17,10 @@ import {sanitizeUpdateForm} from '../utils/form'
 // Types
 import {RemoteDataState} from 'src/types'
 import {Subscription} from 'src/types/subscriptions'
-import {subscriptionUpdateFail} from 'src/shared/copy/notifications'
+import {
+  subscriptionUpdateFail,
+  subscriptionStatusUpdateFail,
+} from 'src/shared/copy/notifications'
 
 // Contexts
 
@@ -25,6 +32,7 @@ export interface SubscriptionUpdateContextType {
   saveForm: (subscription) => void
   updateForm: (subscription) => void
   loading: RemoteDataState
+  setStatus: (isActive) => void
 }
 
 export const DEFAULT_CONTEXT: SubscriptionUpdateContextType = {
@@ -91,6 +99,7 @@ export const DEFAULT_CONTEXT: SubscriptionUpdateContextType = {
   },
   updateForm: () => {},
   loading: RemoteDataState.NotStarted,
+  setStatus: () => {},
 } as SubscriptionUpdateContextType
 
 export const SubscriptionUpdateContext = React.createContext<
@@ -125,6 +134,7 @@ export const SubscriptionUpdateProvider: FC = ({children}) => {
         history.push(`/orgs/${org.id}/${LOAD_DATA}/${SUBSCRIPTIONS}`)
       })
       .catch(() => {
+        setLoading(RemoteDataState.Done)
         dispatch(notify(subscriptionUpdateFail()))
       })
   }
@@ -144,6 +154,29 @@ export const SubscriptionUpdateProvider: FC = ({children}) => {
     update(currentSubscription)
   }
 
+  const setStatus = (isActive: boolean): any => {
+    setLoading(RemoteDataState.Loading)
+    const params = {id: currentID, data: {isActive}}
+    updateStatusAPI(params)
+      .then(() => {
+        getSubscription()
+      })
+      .catch(() => {
+        setLoading(RemoteDataState.Done)
+        dispatch(notify(subscriptionStatusUpdateFail()))
+      })
+  }
+
+  const getSubscription = async (): Promise<void> => {
+    const sub = await getByIDAPI({id: currentID})
+    if (sub) {
+      setCurrentSubscription(sub)
+      setLoading(RemoteDataState.Done)
+    } else {
+      history.push(`/orgs/${org.id}/${LOAD_DATA}/${SUBSCRIPTIONS}`)
+      setLoading(RemoteDataState.Done)
+    }
+  }
   return (
     <SubscriptionUpdateContext.Provider
       value={{
@@ -152,6 +185,7 @@ export const SubscriptionUpdateProvider: FC = ({children}) => {
         updateForm,
         saveForm,
         loading,
+        setStatus,
       }}
     >
       {children}