chore(ui): moved logic into thunk reducer (#16831)

chore(ui): moved logic into thunk reducer

ui/src/cells/actions/thunks.ts

@@ -2,8 +2,14 @@
 import {normalize} from 'normalizr'
 
 // APIs
-import * as api from 'src/client'
-import * as dashAPI from 'src/dashboards/apis'
+import {
+  getDashboard,
+  deleteDashboardsCell,
+  postDashboard,
+  postDashboardsCell,
+  putDashboardsCells,
+} from 'src/client'
+import {updateView} from 'src/dashboards/apis'
 
 // Schemas
 import {
@@ -55,7 +61,7 @@ export const deleteCell = (dashboardID: string, cellID: string) => async (
     )
 
     await Promise.all([
-      api.deleteDashboardsCell({dashboardID: dashboardID, cellID: cellID}),
+      deleteDashboardsCell({dashboardID: dashboardID, cellID: cellID}),
       dispatch(refreshDashboardVariableValues(dashboardID, views)),
     ])
 
@@ -81,7 +87,7 @@ export const createCellWithView = (
 
   try {
     if (!dashboard) {
-      const resp = await api.getDashboard({dashboardID})
+      const resp = await getDashboard({dashboardID})
       if (resp.status !== 200) {
         throw new Error(resp.data.message)
       }
@@ -98,7 +104,7 @@ export const createCellWithView = (
     const cell: NewCell = getNewDashboardCell(state, dashboard, clonedCell)
 
     // Create the cell
-    const cellResp = await api.postDashboardsCell({dashboardID, data: cell})
+    const cellResp = await postDashboardsCell({dashboardID, data: cell})
 
     if (cellResp.status !== 201) {
       throw new Error(cellResp.data.message)
@@ -107,7 +113,7 @@ export const createCellWithView = (
     const cellID = cellResp.data.id
 
     // Create the view and associate it with the cell
-    const newView = await dashAPI.updateView(dashboardID, cellID, view)
+    const newView = await updateView(dashboardID, cellID, view)
 
     const normCell = normalize<Cell, CellEntities, string>(
       {...cellResp.data, dashboardID},
@@ -129,11 +135,37 @@ export const createCellWithView = (
   }
 }
 
+export const createDashboardWithView = (
+  orgID: string,
+  dashboardName: string,
+  view: View
+) => async (dispatch): Promise<void> => {
+  try {
+    const newDashboard = {
+      orgID,
+      name: dashboardName,
+      cells: [],
+    }
+
+    const resp = await postDashboard({data: newDashboard})
+
+    if (resp.status !== 201) {
+      throw new Error(resp.data.message)
+    }
+
+    await dispatch(createCellWithView(resp.data.id, view))
+  } catch (error) {
+    console.error(error)
+    notify(copy.cellAddFailed())
+    throw error
+  }
+}
+
 export const updateCells = (dashboardID: string, cells: Cell[]) => async (
   dispatch
 ): Promise<void> => {
   try {
-    const resp = await api.putDashboardsCells({
+    const resp = await putDashboardsCells({
       dashboardID,
       data: cells,
     })

ui/src/dataExplorer/components/SaveAsCellForm.tsx

@@ -23,8 +23,10 @@ import {
 
 // Actions
 import {getDashboards} from 'src/dashboards/actions/thunks'
-import {createCellWithView} from 'src/cells/actions/thunks'
-import {postDashboard} from 'src/client'
+import {
+  createCellWithView,
+  createDashboardWithView,
+} from 'src/cells/actions/thunks'
 import {notify} from 'src/shared/actions/notifications'
 
 // Types
@@ -53,6 +55,7 @@ interface StateProps {
 interface DispatchProps {
   onGetDashboards: typeof getDashboards
   onCreateCellWithView: typeof createCellWithView
+  onCreateDashboardWithView: typeof createDashboardWithView
   notify: typeof notify
 }
 
@@ -164,7 +167,15 @@ class SaveAsCellForm extends PureComponent<Props, State> {
   }
 
   private handleSubmit = () => {
-    const {onCreateCellWithView, dashboards, view, dismiss, notify} = this.props
+    const {
+      onCreateCellWithView,
+      onCreateDashboardWithView,
+      dashboards,
+      view,
+      dismiss,
+      notify,
+      orgID,
+    } = this.props
     const {targetDashboardIDs} = this.state
 
     const cellName = this.state.cellName || DEFAULT_CELL_NAME
@@ -178,8 +189,8 @@ class SaveAsCellForm extends PureComponent<Props, State> {
         let targetDashboardName = ''
         try {
           if (dashID === DashboardTemplate.id) {
-            targetDashboardName = newDashboardName
-            this.handleCreateDashboardWithView(newDashboardName, viewWithProps)
+            targetDashboardName = newDashboardName || DEFAULT_DASHBOARD_NAME
+            onCreateDashboardWithView(orgID, newDashboardName, viewWithProps)
           } else {
             const selectedDashboard = dashboards.find(d => d.id === dashID)
             targetDashboardName = selectedDashboard.name
@@ -196,31 +207,6 @@ class SaveAsCellForm extends PureComponent<Props, State> {
     }
   }
 
-  private handleCreateDashboardWithView = async (
-    dashboardName: string,
-    view: View
-  ): Promise<void> => {
-    const {onCreateCellWithView, orgID} = this.props
-    try {
-      const newDashboard = {
-        orgID,
-        name: dashboardName || DEFAULT_DASHBOARD_NAME,
-        cells: [],
-      }
-
-      const resp = await postDashboard({data: newDashboard})
-
-      if (resp.status !== 201) {
-        throw new Error(resp.data.message)
-      }
-
-      onCreateCellWithView(resp.data.id, view)
-    } catch (error) {
-      console.error(error)
-      throw error
-    }
-  }
-
   private resetForm() {
     this.setState({
       targetDashboardIDs: [],
@@ -262,6 +248,7 @@ const mstp = (state: AppState): StateProps => {
 const mdtp: DispatchProps = {
   onGetDashboards: getDashboards,
   onCreateCellWithView: createCellWithView,
+  onCreateDashboardWithView: createDashboardWithView,
   notify,
 }