fix(bug): use path property to import nested package (#4527)

* feat(notebooks): use func.path if package is nested

* feat: use func.path to import nested package

* fix: prettier

* chore: clean up

* empty

Author: blegesse-w

src/flows/pipes/RawFluxEditor/view.tsx

@@ -82,10 +82,22 @@ const Query: FC<PipeProp> = ({Context}) => {
         text = `  |> ${fn.example}`
       }
 
+      const getHeader = fn => {
+        let importStatement = null
+
+        if (fn.package) {
+          importStatement = `import "${fn.package}"`
+          if (isFlagEnabled('fluxDynamicDocs') && fn.path.includes('/')) {
+            importStatement = `import "${fn.path}"`
+          }
+        }
+        return importStatement
+      }
+
       const options = {
         text,
         type: InjectionType.OnOwnLine,
-        header: !!fn.package ? `import "${fn.package}"` : null,
+        header: getHeader(fn),
       }
       inject(options)
     },

src/timeMachine/components/TimeMachineFluxEditor.tsx

@@ -143,7 +143,8 @@ const TimeMachineFluxEditor: FC = () => {
     ]
     const importStatement = generateImport(
       func.package,
-      editorInstance.getValue()
+      editorInstance.getValue(),
+      func as FluxFunction
     )
     if (importStatement) {
       edits.unshift({

src/timeMachine/utils/insertFunction.ts

@@ -1,6 +1,13 @@
 // Constants
+import {CLOUD} from 'src/shared/constants'
 import {FROM, UNION} from 'src/shared/constants/fluxFunctions'
 
+// Types
+import {FluxFunction} from 'src/types/shared'
+
+// Utils
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
 export const functionRequiresNewLine = (funcName: string): boolean => {
   switch (funcName) {
     case FROM.name:
@@ -14,9 +21,19 @@ export const functionRequiresNewLine = (funcName: string): boolean => {
 
 export const generateImport = (
   funcPackage: string,
-  script: string
-): false | string => {
-  const importStatement = `import "${funcPackage}"`
+  script: string,
+  func?: FluxFunction
+): false | string | FluxFunction => {
+  let importStatement
+
+  importStatement = `import "${funcPackage}"`
+
+  if (CLOUD && isFlagEnabled('fluxDynamicDocs')) {
+    // if package is nested, use func.path to import.
+    if (func.path.includes('/')) {
+      importStatement = `import "${func.path}"`
+    }
+  }
 
   if (!funcPackage || script.includes(importStatement)) {
     return false