refactor(ui): use locally generated client for buckets and orgs

ui/src/authorizations/containers/TokensIndex.tsx

@@ -13,8 +13,7 @@ import GetResources, {ResourceTypes} from 'src/shared/components/GetResources'
 import TokensTab from 'src/authorizations/components/TokensTab'
 
 // Types
-import {Organization} from '@influxdata/influx'
-import {AppState} from 'src/types'
+import {AppState, Organization} from 'src/types'
 
 interface StateProps {
   org: Organization

ui/src/buckets/containers/BucketsIndex.tsx

@@ -14,8 +14,7 @@ import GetResources, {ResourceTypes} from 'src/shared/components/GetResources'
 import GetAssetLimits from 'src/cloud/components/GetAssetLimits'
 
 // Types
-import {Organization} from '@influxdata/influx'
-import {AppState} from 'src/types'
+import {AppState, Organization} from 'src/types'
 
 interface StateProps {
   org: Organization

ui/src/dashboards/components/DashboardHeader.tsx

@@ -27,8 +27,8 @@ import {
 // Types
 import * as AppActions from 'src/types/actions/app'
 import * as QueriesModels from 'src/types/queries'
-import {Dashboard, Organization} from '@influxdata/influx'
-import {AutoRefresh, AutoRefreshStatus} from 'src/types'
+import {Dashboard} from '@influxdata/influx'
+import {AutoRefresh, AutoRefreshStatus, Organization} from 'src/types'
 
 interface Props {
   org: Organization

ui/src/dashboards/components/DashboardPage.tsx

@@ -49,6 +49,7 @@ import {
   AppState,
   AutoRefresh,
   AutoRefreshStatus,
+  Organization,
 } from 'src/types'
 import {RemoteDataState} from 'src/types'
 import {WithRouterProps} from 'react-router'
@@ -57,7 +58,6 @@ import {Location} from 'history'
 import * as AppActions from 'src/types/actions/app'
 import * as ColorsModels from 'src/types/colors'
 import {toggleShowVariablesControls} from 'src/userSettings/actions'
-import {Organization} from '@influxdata/influx'
 import {LimitStatus} from 'src/cloud/actions/limits'
 
 interface StateProps {

ui/src/labels/containers/LabelsIndex.tsx

@@ -13,8 +13,7 @@ import LabelsTab from 'src/labels/components/LabelsTab'
 import GetResources, {ResourceTypes} from 'src/shared/components/GetResources'
 
 // Types
-import {Organization} from '@influxdata/influx'
-import {AppState} from 'src/types'
+import {AppState, Organization} from 'src/types'
 
 interface StateProps {
   org: Organization

ui/src/members/actions/index.ts

@@ -3,6 +3,7 @@ import _ from 'lodash'
 
 // API
 import {client} from 'src/utils/api'
+import * as api from 'src/client'
 
 // Types
 import {RemoteDataState, GetState} from 'src/types'
@@ -88,11 +89,23 @@ export const getMembers = () => async (
     } = getState()
     dispatch(setMembers(RemoteDataState.Loading))
 
-    const [owners, members] = await Promise.all([
-      client.organizations.owners(id),
-      client.organizations.members(id),
+    const [ownersResp, membersResp] = await Promise.all([
+      api.getOrgsOwners({orgID: id}),
+      api.getOrgsMembers({orgID: id}),
     ])
 
+    if (ownersResp.status !== 200) {
+      throw new Error(ownersResp.data.message)
+    }
+
+    if (membersResp.status !== 200) {
+      throw new Error(membersResp.data.message)
+    }
+
+    const owners = ownersResp.data.users
+
+    const members = membersResp.data.users
+
     const users = [...owners, ...members]
 
     dispatch(setMembers(RemoteDataState.Done, users))
@@ -113,7 +126,13 @@ export const addNewMember = (member: AddResourceMemberRequestBody) => async (
       },
     } = getState()
 
-    const newMember = await client.organizations.addMember(id, member)
+    const resp = await api.postOrgsMember({orgID: id, data: member})
+
+    if (resp.status !== 201) {
+      throw new Error(resp.data.message)
+    }
+
+    const newMember = resp.data
 
     dispatch(addMember(newMember))
     dispatch(notify(memberAddSuccess(member.name)))
@@ -136,7 +155,12 @@ export const deleteMember = (member: Member) => async (
       },
     } = getState()
 
-    await client.organizations.removeMember(id, member.id)
+    const resp = await api.deleteOrgsMember({orgID: id, userID: member.id})
+
+    if (resp.status !== 204) {
+      throw new Error(resp.data.message)
+    }
+
     dispatch(removeMember(member.id))
 
     dispatch(notify(memberRemoveSuccess(member.name)))

ui/src/members/containers/MembersIndex.tsx

@@ -13,8 +13,7 @@ import GetResources, {ResourceTypes} from 'src/shared/components/GetResources'
 import Members from 'src/members/components/Members'
 
 // Types
-import {Organization} from '@influxdata/influx'
-import {AppState} from 'src/types'
+import {AppState, Organization} from 'src/types'
 
 interface StateProps {
   org: Organization

ui/src/onboarding/components/CompletionAdvancedButton.tsx

@@ -8,7 +8,7 @@ import {Button, ComponentColor, ComponentSize} from '@influxdata/clockface'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Types
-import {Organization} from '@influxdata/influx'
+import {Organization} from 'src/types'
 
 interface OwnProps {
   orgs: Organization[]

ui/src/onboarding/components/CompletionStep.tsx

@@ -21,6 +21,7 @@ import {QUICKSTART_DASHBOARD_NAME} from 'src/onboarding/constants'
 import {getDashboards} from 'src/organizations/apis'
 import {client} from 'src/utils/api'
 import {createDashboardFromTemplate as createDashboardFromTemplateAJAX} from 'src/templates/api'
+import * as api from 'src/client'
 
 // Types
 import {
@@ -30,8 +31,8 @@ import {
   Columns,
   Grid,
 } from '@influxdata/clockface'
-import {DashboardTemplate} from 'src/types'
-import {Organization, Dashboard, ScraperTargetRequest} from '@influxdata/influx'
+import {DashboardTemplate, Organization} from 'src/types'
+import {Dashboard, ScraperTargetRequest} from '@influxdata/influx'
 import {OnboardingStepProps} from 'src/onboarding/containers/OnboardingWizard'
 import {QUICKSTART_SCRAPER_TARGET_URL} from 'src/dataLoaders/constants/pluginConfigs'
 
@@ -40,7 +41,14 @@ interface Props extends OnboardingStepProps {
   bucketID: string
 }
 
-const getOrganizations = () => client.organizations.getAll()
+const getOrganizations = async () => {
+  const resp = await api.getOrgs({})
+  if (resp.status !== 200) {
+    throw new Error(resp.data.message)
+  }
+
+  return resp.data.orgs
+}
 
 @ErrorHandling
 class CompletionStep extends PureComponent<Props> {

ui/src/organizations/actions/orgs.ts

@@ -4,6 +4,7 @@ import {push, RouterAction} from 'react-router-redux'
 
 // APIs
 import {client, getErrorMessage} from 'src/utils/api'
+import * as api from 'src/client'
 
 // Actions
 import {notify} from 'src/shared/actions/notifications'
@@ -22,8 +23,12 @@ import {
 } from 'src/shared/copy/notifications'
 
 // Types
-import {Bucket} from '@influxdata/influx'
-import {Organization, RemoteDataState, NotificationAction} from 'src/types'
+import {
+  Organization,
+  RemoteDataState,
+  NotificationAction,
+  Bucket,
+} from 'src/types'
 
 export enum ActionTypes {
   SetOrgs = 'SET_ORGS',
@@ -132,9 +137,17 @@ export const getOrganizations = () => async (
   try {
     dispatch(setOrgsStatus(RemoteDataState.Loading))
 
-    const organizations = await client.organizations.getAll()
-    dispatch(setOrgs(organizations, RemoteDataState.Done))
-    return organizations
+    const resp = await api.getOrgs({})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    const {orgs} = resp.data
+
+    dispatch(setOrgs(orgs, RemoteDataState.Done))
+
+    return orgs
   } catch (e) {
     console.error(e)
     dispatch(setOrgs(null, RemoteDataState.Error))
@@ -150,7 +163,12 @@ export const createOrgWithBucket = (
   let createdOrg: Organization
 
   try {
-    createdOrg = await client.organizations.create(org)
+    const orgResp = await api.postOrg({data: org})
+    if (orgResp.status !== 201) {
+      throw new Error(orgResp.data.message)
+    }
+    createdOrg = orgResp.data
+
     await client.templates.create({
       ...defaultTemplates.systemTemplate(),
       orgID: createdOrg.id,
@@ -168,10 +186,13 @@ export const createOrgWithBucket = (
     dispatch(addOrg(createdOrg))
     dispatch(push(`/orgs/${createdOrg.id}`))
 
-    await client.buckets.create({
-      ...bucket,
-      orgID: createdOrg.id,
-    })
+    bucket.orgID = createdOrg.id
+
+    const bucketResp = await api.postBucket({data: bucket})
+
+    if (bucketResp.status !== 201) {
+      throw new Error(bucketResp.data.message)
+    }
 
     dispatch(notify(bucketCreateSuccess()))
   } catch (e) {
@@ -189,7 +210,14 @@ export const createOrg = (org: Organization) => async (
   dispatch: Dispatch<Actions | RouterAction | NotificationAction>
 ): Promise<void> => {
   try {
-    const createdOrg = await client.organizations.create(org)
+    const resp = await api.postOrg({data: org})
+
+    if (resp.status !== 201) {
+      throw new Error(resp.data.message)
+    }
+
+    const createdOrg = resp.data
+
     await client.templates.create({
       ...defaultTemplates.systemTemplate(),
       orgID: createdOrg.id,
@@ -209,7 +237,12 @@ export const deleteOrg = (org: Organization) => async (
   dispatch: Dispatch<RemoveOrg>
 ): Promise<void> => {
   try {
-    await client.organizations.delete(org.id)
+    const resp = await api.deleteOrg({orgID: org.id})
+
+    if (resp.status !== 204) {
+      throw new Error(resp.data.message)
+    }
+
     dispatch(removeOrg(org))
   } catch (e) {
     console.error(e)
@@ -220,8 +253,16 @@ export const updateOrg = (org: Organization) => async (
   dispatch: Dispatch<EditOrg | NotificationAction>
 ) => {
   try {
-    const updatedOrg = await client.organizations.update(org.id, org)
+    const resp = await api.patchOrg({orgID: org.id, data: org})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    const updatedOrg = resp.data
+
     dispatch(editOrg(updatedOrg))
+
     dispatch(notify(orgEditSuccess()))
   } catch (e) {
     dispatch(notify(orgEditFailed()))
@@ -233,8 +274,16 @@ export const renameOrg = (originalName: string, org: Organization) => async (
   dispatch: Dispatch<EditOrg | NotificationAction>
 ) => {
   try {
-    const updatedOrg = await client.organizations.update(org.id, org)
+    const resp = await api.patchOrg({orgID: org.id, data: org})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    const updatedOrg = resp.data
+
     dispatch(editOrg(updatedOrg))
+
     dispatch(notify(orgRenameSuccess(updatedOrg.name)))
   } catch (e) {
     dispatch(notify(orgRenameFailed(originalName)))

ui/src/organizations/apis/index.ts

@@ -4,8 +4,7 @@ import _ from 'lodash'
 import {client} from 'src/utils/api'
 
 // Types
-import {Organization} from '@influxdata/influx'
-import {Dashboard} from 'src/types'
+import {Dashboard, Organization} from 'src/types'
 
 // CRUD APIs for Organizations and Organization resources
 // i.e. Organization Members, Buckets, Dashboards etc

ui/src/organizations/components/CreateOrgOverlay.tsx

@@ -9,8 +9,7 @@ import _ from 'lodash'
 import {Form, Input, Button, Overlay} from '@influxdata/clockface'
 
 // Types
-import {Organization} from '@influxdata/influx'
-import {Bucket} from 'src/types'
+import {Bucket, Organization} from 'src/types'
 import {
   ButtonType,
   ComponentColor,

ui/src/organizations/components/RenameOrgForm.tsx

@@ -24,9 +24,8 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 import {renameOrg} from 'src/organizations/actions/orgs'
 
 // Types
-import {Organization} from '@influxdata/influx'
 import {ComponentStatus} from '@influxdata/clockface'
-import {AppState} from 'src/types'
+import {AppState, Organization} from 'src/types'
 
 interface StateProps {
   startOrg: Organization

ui/src/organizations/containers/OrgProfilePage.tsx

@@ -12,8 +12,7 @@ import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSecti
 import {Grid, Columns} from '@influxdata/clockface'
 
 // Types
-import {Organization} from '@influxdata/influx'
-import {AppState} from 'src/types'
+import {AppState, Organization} from 'src/types'
 import OrgProfileTab from '../components/OrgProfileTab'
 
 interface StateProps {

ui/src/pageLayout/components/AccountNavSubItem.tsx

@@ -4,10 +4,12 @@ import {Link} from 'react-router'
 
 // Components
 import {NavMenu} from '@influxdata/clockface'
-import {Organization} from '@influxdata/influx'
 import SortingHat from 'src/shared/components/sorting_hat/SortingHat'
 import CloudExclude from 'src/shared/components/cloud/CloudExclude'
 
+// Types
+import {Organization} from 'src/types'
+
 interface Props {
   orgs: Organization[]
   isShowingOrganizations: boolean

ui/src/pageLayout/containers/Nav.tsx

@@ -16,9 +16,8 @@ import {FeatureFlag} from 'src/shared/utils/featureFlag'
 import {getNavItemActivation} from 'src/pageLayout/utils'
 
 // Types
-import {AppState} from 'src/types'
+import {AppState, Organization} from 'src/types'
 import {IconFont} from '@influxdata/clockface'
-import {Organization} from '@influxdata/influx'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'

ui/src/scrapers/containers/ScrapersIndex.tsx

@@ -15,8 +15,7 @@ import Scrapers from 'src/scrapers/components/Scrapers'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Types
-import {Organization} from '@influxdata/influx'
-import {AppState} from 'src/types'
+import {AppState, Organization} from 'src/types'
 
 interface StateProps {
   org: Organization