feat: enable exporting of variables using pkger (#3960)

Author: ChitlangeSahas

src/dashboards/actions/thunks.ts

@@ -7,7 +7,7 @@ import {get} from 'lodash'
 // APIs
 import * as dashAPI from 'src/dashboards/apis'
 import * as api from 'src/client'
-import {createDashboardFromPkgerTemplate} from 'src/templates/api'
+import {createResourceFromPkgerTemplate} from 'src/templates/api'
 import {createCellWithView} from 'src/cells/actions/thunks'
 
 // Schemas
@@ -296,7 +296,7 @@ export const createDashboardFromTemplate = (template: api.Template) => async (
   try {
     const org = getOrg(getState())
 
-    await createDashboardFromPkgerTemplate(template, org.id)
+    await createResourceFromPkgerTemplate(template, org.id)
 
     const resp = await api.getDashboards({query: {orgID: org.id}})
 

src/overlays/components/OverlayController.tsx

@@ -37,6 +37,7 @@ import CustomApiTokenOverlay from 'src/authorizations/components/CustomApiTokenO
 import DisplayTokenOverlay from 'src/authorizations/components/DisplayTokenOverlay'
 import NewRuleOverlay from 'src/notifications/rules/components/NewRuleOverlay'
 import CreateSecretOverlay from 'src/secrets/components/CreateSecret/CreateSecretOverlay'
+import VariableImportOverlay from 'src/variables/components/VariableImportOverlay'
 
 // Actions
 import {dismissOverlay} from 'src/overlays/actions/overlays'
@@ -121,6 +122,9 @@ export const OverlayController: FunctionComponent = () => {
       case 'create-variable':
         activeOverlay.current = <CreateVariableOverlay />
         break
+      case 'import-variable':
+        activeOverlay.current = <VariableImportOverlay />
+        break
       case 'rename-variable':
         activeOverlay.current = <RenameVariableOverlay />
         break

src/templates/api/index.ts

@@ -109,7 +109,7 @@ export const createDashboardFromTemplate = async (
   }
 }
 
-export const createDashboardFromPkgerTemplate = async (
+export const createResourceFromPkgerTemplate = async (
   template: Template,
   orgID: string
 ): Promise<void> => {

src/variables/actions/thunks.ts

@@ -19,7 +19,7 @@ import {variableSchema, arrayOfVariables} from 'src/schemas/variables'
 // APIs
 import * as api from 'src/client'
 import {hydrateVars} from 'src/variables/utils/hydrateVars'
-import {createVariableFromTemplate as createVariableFromTemplateAJAX} from 'src/templates/api'
+import {createResourceFromPkgerTemplate} from 'src/templates/api'
 
 // Utils
 import {
@@ -44,7 +44,6 @@ import {
   AppState,
   GetState,
   RemoteDataState,
-  VariableTemplate,
   Label,
   GenVariable,
   Variable,
@@ -63,6 +62,7 @@ import {
 } from 'src/shared/utils/filterUnusedVars'
 import {getActiveTimeMachine} from 'src/timeMachine/selectors'
 import {getActiveQuery} from 'src/timeMachine/selectors'
+import {getVariables as getVariablesAction} from 'src/variables/actions/thunks'
 
 type Action = VariableAction | EditorAction | NotifyAction
 
@@ -267,26 +267,28 @@ export const createVariable = (
   }
 }
 
-export const createVariableFromTemplate = (
-  template: VariableTemplate
-) => async (dispatch: Dispatch<Action>, getState: GetState) => {
+export const createVariableFromTemplate = (template: api.Template) => async (
+  dispatch: Dispatch<Action>,
+  getState: GetState
+) => {
   try {
     const state = getState()
     const org = getOrg(state)
-    const resp = await createVariableFromTemplateAJAX(template, org.id)
+    // only one variable in the exported template so we can safely just index the 0th element
+    const variableName = template[0].spec.name
+
+    await createResourceFromPkgerTemplate(template, org.id)
+
+    await getVariablesAction()(dispatch, getState)
 
-    const createdVar = normalize<Variable, VariableEntities, string>(
-      resp,
-      variableSchema
-    )
     event('variable.create.from_template.success', {
-      id: resp?.id,
-      name: resp?.name,
+      name: variableName,
     })
-    dispatch(setVariable(resp.id, RemoteDataState.Done, createdVar))
-    dispatch(notify(copy.createVariableSuccess(resp.name)))
+    dispatch(notify(copy.createVariableSuccess(variableName)))
   } catch (error) {
-    event('variable.create.from_template.failure', {template: template?.id})
+    event('variable.create.from_template.failure', {
+      template: template[0].meta.name,
+    })
     console.error(error)
     dispatch(notify(copy.createVariableFailed(error.message)))
   }

src/variables/apis/index.ts

@@ -0,0 +1,24 @@
+// Utils
+import {downloadTextFile} from 'src/shared/utils/download'
+
+import {postTemplatesExport} from 'src/client'
+
+export const downloadVariableTemplate = async (variable): Promise<void> => {
+  const resp = await postTemplatesExport({
+    data: {
+      resources: [
+        {
+          kind: 'Variable',
+          id: variable.id,
+        },
+      ],
+    },
+  })
+
+  if (resp.status === 500) {
+    throw new Error(resp.data.message)
+  }
+
+  const data = await resp.data
+  downloadTextFile(JSON.stringify(data), variable.name, '.json', 'text/json')
+}

src/variables/components/VariableCard.tsx

@@ -21,6 +21,7 @@ import {
   removeVariableLabelAsync,
 } from 'src/variables/actions/thunks'
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
+import {downloadVariableTemplate} from '../apis'
 
 interface OwnProps {
   variable: Variable
@@ -104,11 +105,8 @@ class VariableCard extends PureComponent<
   }
 
   private handleExport = () => {
-    const {history, variable, match} = this.props
-
-    history.push(
-      `/orgs/${match.params.orgID}/settings/variables/${variable.id}/export`
-    )
+    const {variable} = this.props
+    downloadVariableTemplate(variable)
   }
 
   private handleRenameVariable = () => {

src/variables/components/VariableImportOverlay.tsx

@@ -55,7 +55,7 @@ class VariableImportOverlay extends PureComponent<Props> {
     this.setState(() => ({status}))
 
   private handleImportVariable = (uploadContent: string) => {
-    const {createVariableFromTemplate, getVariables, notify} = this.props
+    const {createVariableFromTemplate, notify} = this.props
 
     let template
     this.updateOverlayStatus(ComponentStatus.Default)
@@ -68,7 +68,6 @@ class VariableImportOverlay extends PureComponent<Props> {
     }
 
     createVariableFromTemplate(template)
-    getVariables()
 
     this.onDismiss()
   }

src/variables/components/VariablesTab.tsx

@@ -71,6 +71,7 @@ class VariablesTab extends PureComponent<Props, State> {
       <AddResourceDropdown
         resourceName="Variable"
         onSelectNew={this.handleOpenCreateOverlay}
+        onSelectImport={this.handleOpenImportOverlay}
       />
     )
 
@@ -123,6 +124,7 @@ class VariablesTab extends PureComponent<Props, State> {
           <AddResourceDropdown
             resourceName="Variable"
             onSelectNew={this.handleOpenCreateOverlay}
+            onSelectImport={this.handleOpenImportOverlay}
           />
         </EmptyState>
       )
@@ -153,6 +155,12 @@ class VariablesTab extends PureComponent<Props, State> {
     const {onDeleteVariable} = this.props
     onDeleteVariable(variable.id)
   }
+
+  private handleOpenImportOverlay = () => {
+    const {history, match} = this.props
+
+    history.push(`/orgs/${match.params.orgID}/settings/variables/import`)
+  }
 }
 
 const mstp = (state: AppState) => {