Move writeLineProtocol API call to thunk.

Co-authored-by: Palak Bhojani <palak@influxdata.com>
Co-authored-by: Deniz Kusefoglu <deniz@influxdata.com>

ui/src/onboarding/actions/dataLoaders.ts

@@ -5,6 +5,10 @@ import {
   LineProtocolTab,
 } from 'src/types/v2/dataLoaders'
 
+import {notify} from 'src/shared/actions/notifications'
+import {writeLineProtocolFailed} from 'src/shared/copy/v2/notifications'
+import {writeLineProtocol} from 'src/onboarding/apis/index'
+
 export type Action =
   | SetDataLoadersType
   | AddTelegrafPlugin
@@ -84,3 +88,15 @@ export const setActiveLPTab = (
   type: 'SET_ACTIVE_LP_TAB',
   payload: {activeLPTab},
 })
+
+export const writeLineProtocolAction = (
+  org: string,
+  bucket: string,
+  body: string
+) => async dispatch => {
+  try {
+    await writeLineProtocol(org, bucket, body)
+  } catch (error) {
+    dispatch(notify(writeLineProtocolFailed(error)))
+  }
+}

ui/src/onboarding/apis/index.ts

@@ -137,10 +137,6 @@ export const writeLineProtocol = async (
   bucket: string,
   body: string
 ): Promise<any> => {
-  try {
-    const data = await writeAPI.writePost(org, bucket, body)
-    return data
-  } catch (error) {
-    console.error(error)
-  }
+  const data = await writeAPI.writePost(org, bucket, body)
+  return data
 }

ui/src/onboarding/components/configureStep/lineProtocol/LineProtocolTabs.tsx

@@ -7,9 +7,6 @@ import {Input, InputType, Radio, ButtonShape, Form} from 'src/clockface'
 import DragAndDrop from 'src/shared/components/DragAndDrop'
 import TextArea from 'src/clockface/components/inputs/TextArea'
 
-// Apis
-import {writeLineProtocol} from 'src/onboarding/apis/index'
-
 // Types
 import {LineProtocolTab} from 'src/types/v2/dataLoaders'
 
@@ -17,8 +14,11 @@ import {LineProtocolTab} from 'src/types/v2/dataLoaders'
 import {
   setLineProtocolText,
   setActiveLPTab,
+  writeLineProtocolAction,
 } from 'src/onboarding/actions/dataLoaders'
 
+import {AppState} from 'src/types/v2/index'
+
 // Styles
 import 'src/clockface/components/auto_input/AutoInput.scss'
 
@@ -33,6 +33,7 @@ type Props = OwnProps & DispatchProps & StateProps
 interface DispatchProps {
   setLineProtocolText: typeof setLineProtocolText
   setActiveLPTab: typeof setActiveLPTab
+  writeLineProtocolAction: typeof writeLineProtocolAction
 }
 
 interface StateProps {
@@ -126,12 +127,9 @@ export class LineProtocolTabs extends PureComponent<Props> {
     setLineProtocolText(e.target.value)
   }
 
-  private handleFileUpload = async (uploadContent: string): Promise<any> => {
-    const {bucket, org} = this.props
-    const response = await writeLineProtocol(bucket, org, uploadContent)
-    if (response.status !== 204) {
-      return
-    }
+  private handleFileUpload = async (body: string): Promise<void> => {
+    const {bucket, org, writeLineProtocolAction} = this.props
+    writeLineProtocolAction(org, bucket, body)
   }
 }
 
@@ -139,13 +137,14 @@ const mstp = ({
   onboarding: {
     dataLoaders: {lineProtocolText, activeLPTab},
   },
-}): StateProps => {
+}: AppState) => {
   return {lineProtocolText, activeLPTab}
 }
 
 const mdtp: DispatchProps = {
   setLineProtocolText,
   setActiveLPTab,
+  writeLineProtocolAction,
 }
 
 export default connect<StateProps, DispatchProps, OwnProps>(

ui/src/shared/copy/v2/notifications.ts

@@ -12,6 +12,12 @@ const defaultErrorNotification: NotificationExcludingMessage = {
   duration: TEN_SECONDS,
 }
 
+const defaultSuccessNotification: NotificationExcludingMessage = {
+  type: 'success',
+  icon: 'checkmark',
+  duration: FIVE_SECONDS,
+}
+
 export const taskNotCreated = (additionalMessage: string): Notification => ({
   ...defaultErrorNotification,
   message: `Failed to create new task: ${additionalMessage}`,
@@ -47,7 +53,7 @@ export const taskImportFailed = (
 })
 
 export const taskImportSuccess = (fileName: string): Notification => ({
-  ...defaultErrorNotification,
+  ...defaultSuccessNotification,
   duration: FIVE_SECONDS,
   message: `Successfully imported file ${fileName}.`,
 })
@@ -57,8 +63,13 @@ export const getTelegrafConfigFailed = (): Notification => ({
   message: 'Failed to get telegraf config',
 })
 
-export const savingNoteFailed = (error): Notification => ({
+export const savingNoteFailed = (error: string): Notification => ({
   ...defaultErrorNotification,
   duration: FIVE_SECONDS,
   message: `Failed to save note: ${error}`,
 })
+
+export const writeLineProtocolFailed = (error: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to write line protocol ${error}`,
+})