fix(ui/relationships): add tests for vars exports (#13106)

ui/src/shared/utils/resourceToTemplate.test.ts

@@ -6,6 +6,7 @@ import {
 } from 'src/shared/utils/resourceToTemplate'
 import {TemplateType, Variable} from '@influxdata/influx'
 import {Label, Task, TaskStatus} from 'src/types'
+import {createVariable} from 'src/variables/mocks'
 
 const myfavelabel: Label = {
   id: '1',
@@ -41,7 +42,7 @@ const myVariable: Variable = {
   arguments: {
     type: 'query',
     values: {
-      query: 'test!',
+      query: 'f(x: v.a)',
       language: 'flux',
     },
   },
@@ -77,7 +78,10 @@ describe('resourceToTemplate', () => {
 
   describe('variableToTemplate', () => {
     it('converts a variable to a template', () => {
-      const actual = variableToTemplate(myVariable, [])
+      const a = createVariable('a', 'x.b + 1')
+      const b = createVariable('b', '9000')
+      const dependencies = [a, b]
+      const actual = variableToTemplate(myVariable, dependencies)
       const expected = {
         meta: {
           version: '1',
@@ -93,7 +97,7 @@ describe('resourceToTemplate', () => {
               arguments: {
                 type: 'query',
                 values: {
-                  query: 'test!',
+                  query: 'f(x: v.a)',
                   language: 'flux',
                 },
               },
@@ -101,11 +105,51 @@ describe('resourceToTemplate', () => {
             },
             relationships: {
               variable: {
-                data: [],
+                data: [
+                  {
+                    id: 'a',
+                    type: 'variable',
+                  },
+                  {
+                    id: 'b',
+                    type: 'variable',
+                  },
+                ],
               },
             },
           },
-          included: [],
+          included: [
+            {
+              type: 'variable',
+              id: 'a',
+              attributes: {
+                name: 'a',
+                arguments: {
+                  type: 'query',
+                  values: {
+                    query: 'x.b + 1',
+                    language: 'flux',
+                  },
+                },
+                selected: [],
+              },
+            },
+            {
+              type: 'variable',
+              id: 'b',
+              attributes: {
+                name: 'b',
+                arguments: {
+                  type: 'query',
+                  values: {
+                    query: '9000',
+                    language: 'flux',
+                  },
+                },
+                selected: [],
+              },
+            },
+          ],
         },
         labels: [],
       }
@@ -168,7 +212,7 @@ describe('resourceToTemplate', () => {
                 arguments: {
                   type: 'query',
                   values: {
-                    query: 'test!',
+                    query: 'f(x: v.a)',
                     language: 'flux',
                   },
                 },

ui/src/variables/actions/index.ts

@@ -23,7 +23,7 @@ import {createVariableFromTemplate as createVariableFromTemplateAJAX} from 'src/
 import {getValueSelections, getVariablesForOrg} from 'src/variables/selectors'
 import {WrappedCancelablePromise, CancellationError} from 'src/types/promises'
 import {variableToTemplate} from 'src/shared/utils/resourceToTemplate'
-import {exportVariables} from 'src/variables/utils/exportVariables'
+import {findDepedentVariables} from 'src/variables/utils/exportVariables'
 
 // Constants
 import * as copy from 'src/shared/copy/notifications'
@@ -285,7 +285,7 @@ export const convertToTemplate = (variableID: string) => async (
     const variable = await client.variables.get(variableID)
     const allVariables = await client.variables.getAll()
 
-    const dependencies = exportVariables([variable], allVariables)
+    const dependencies = findDepedentVariables(variable, allVariables)
     const variableTemplate = variableToTemplate(variable, dependencies)
     const orgID = variable.orgID // TODO remove when org is implicit app state
 

ui/src/variables/utils/exportVariables.ts

@@ -8,7 +8,7 @@ import {
 // Types
 import {Variable} from '@influxdata/influx'
 
-export const findDependentVariables = (
+const getDescendantsFromGraph = (
   variable: Variable,
   varGraph: VariableNode[]
 ): Variable[] => {
@@ -16,6 +16,14 @@ export const findDependentVariables = (
   return collectDescendants(node).map(n => n.variable)
 }
 
+export const findDepedentVariables = (
+  variable: Variable,
+  allVariables: Variable[]
+) => {
+  const varGraph = createVariableGraph(allVariables)
+  return getDescendantsFromGraph(variable, varGraph)
+}
+
 export const exportVariables = (
   variables: Variable[],
   allVariables: Variable[]
@@ -29,7 +37,7 @@ export const exportVariables = (
     }
 
     varSet.add(v)
-    for (const d of findDependentVariables(v, varGraph)) {
+    for (const d of getDescendantsFromGraph(v, varGraph)) {
       varSet.add(d)
     }
   }