feat: add InfluxQL as a language type in script editor (#6616)

* feat: add InfluxQL as a LanguageType

* feat: add DEFAULT_INFLUXQL_EDITOR_TEXT

* chore: update sidebar and schema sync with influxql

Author: appletreeisyellow

src/dataExplorer/components/ResultsPane.tsx

@@ -23,6 +23,7 @@ import {
   PersistanceContext,
   DEFAULT_FLUX_EDITOR_TEXT,
   DEFAULT_SQL_EDITOR_TEXT,
+  DEFAULT_INFLUXQL_EDITOR_TEXT,
 } from 'src/dataExplorer/context/persistance'
 
 // Components
@@ -59,8 +60,15 @@ const FluxMonacoEditor = lazy(
 
 const fakeNotify = notify
 
-const isDefaultText = text => {
-  return text == DEFAULT_FLUX_EDITOR_TEXT || text == DEFAULT_SQL_EDITOR_TEXT
+const isDefaultText = (text: string) => {
+  return (
+    [
+      DEFAULT_FLUX_EDITOR_TEXT,
+      DEFAULT_SQL_EDITOR_TEXT,
+      DEFAULT_INFLUXQL_EDITOR_TEXT,
+    ].filter((defaultEditorText: string) => text === defaultEditorText).length >
+    0
+  )
 }
 
 const ResultsPane: FC = () => {

src/dataExplorer/components/SchemaBrowserHeading.tsx

@@ -51,8 +51,15 @@ const SchemaBrowserHeading: FC = () => {
     return null
   }
 
-  const label =
-    resource?.language === LanguageType.SQL ? 'SQL Sync' : 'Flux Sync'
+  let label: string = 'Flux Sync'
+  switch (resource?.language) {
+    case LanguageType.SQL:
+      label = 'SQL Sync'
+      break
+    case LanguageType.INFLUXQL:
+      label = 'InfluxQL Sync'
+      break
+  }
 
   return (
     <FlexBox

src/dataExplorer/components/ScriptQueryBuilder.tsx

@@ -160,6 +160,21 @@ const ScriptQueryBuilder: FC = () => {
                               {option}
                             </Dropdown.Item>
                           ))}
+                        {isFlagEnabled('influxqlUI') ? (
+                          <Dropdown.Item
+                            className={`script-dropdown__${LanguageType.INFLUXQL}`}
+                            key={LanguageType.INFLUXQL}
+                            onClick={() =>
+                              handleSelectDropdown(LanguageType.INFLUXQL)
+                            }
+                            selected={
+                              resource?.language === LanguageType.INFLUXQL
+                            }
+                            testID={`script-dropdown__${LanguageType.INFLUXQL}`}
+                          >
+                            {LanguageType.INFLUXQL}
+                          </Dropdown.Item>
+                        ) : null}
                       </Dropdown.Menu>
                     )}
                     button={(active, onClick) => (

src/dataExplorer/components/Sidebar.tsx

@@ -114,13 +114,18 @@ const Sidebar: FC = () => {
     </FlexBox.Child>
   )
 
+  const shouldNotShowSidebar =
+    [LanguageType.SQL, LanguageType.INFLUXQL].filter(
+      (language: LanguageType) => resource?.language === language
+    ).length > 0
+
   return (
     <FlexBox
       direction={FlexDirection.Column}
       justifyContent={JustifyContent.FlexStart}
       className="container-right-side-bar"
     >
-      {isIoxOrg && resource?.language === LanguageType.SQL ? null : (
+      {isIoxOrg && shouldNotShowSidebar ? null : (
         <>
           {resultOptions}
           {fluxLibrary}

src/dataExplorer/components/resources/TemplatePage.tsx

@@ -13,6 +13,7 @@ import {
   PersistanceProvider,
   DEFAULT_FLUX_EDITOR_TEXT,
   DEFAULT_SQL_EDITOR_TEXT,
+  DEFAULT_INFLUXQL_EDITOR_TEXT,
 } from 'src/dataExplorer/context/persistance'
 import {LanguageType} from 'src/dataExplorer/components/resources'
 import {getLanguage} from 'src/dataExplorer/shared/utils'
@@ -42,8 +43,13 @@ const Template: FC = () => {
     const language = getLanguage()
     let flux = DEFAULT_FLUX_EDITOR_TEXT
 
-    if (language === LanguageType.SQL) {
-      flux = DEFAULT_SQL_EDITOR_TEXT
+    switch (language) {
+      case LanguageType.SQL:
+        flux = DEFAULT_SQL_EDITOR_TEXT
+        break
+      case LanguageType.INFLUXQL:
+        flux = DEFAULT_INFLUXQL_EDITOR_TEXT
+        break
     }
 
     setLoading(RemoteDataState.Loading)

src/dataExplorer/components/resources/index.ts

@@ -7,6 +7,7 @@ export const SCRIPT_EDITOR_PARAMS = '?fluxScriptEditor'
 export enum LanguageType {
   FLUX = 'flux',
   SQL = 'sql',
+  INFLUXQL = 'influxql',
 }
 export interface ResourceConnectedQuery<T> {
   type: ResourceType

src/dataExplorer/components/resources/types/script/index.ts

@@ -4,6 +4,7 @@ import {CLOUD} from 'src/shared/constants'
 import {
   DEFAULT_FLUX_EDITOR_TEXT,
   DEFAULT_SQL_EDITOR_TEXT,
+  DEFAULT_INFLUXQL_EDITOR_TEXT,
 } from 'src/dataExplorer/context/persistance'
 import {LanguageType} from 'src/dataExplorer/components/resources'
 import {getLanguage} from 'src/dataExplorer/shared/utils'
@@ -25,8 +26,13 @@ export const scriptResourceRegistration = () => {
         const language = getLanguage()
         let flux = DEFAULT_FLUX_EDITOR_TEXT
 
-        if (language === LanguageType.SQL) {
-          flux = DEFAULT_SQL_EDITOR_TEXT
+        switch (language) {
+          case LanguageType.SQL:
+            flux = DEFAULT_SQL_EDITOR_TEXT
+            break
+          case LanguageType.INFLUXQL:
+            flux = DEFAULT_INFLUXQL_EDITOR_TEXT
+            break
         }
 
         return Promise.resolve({

src/dataExplorer/context/persistance.tsx

@@ -110,6 +110,8 @@ export const DEFAULT_SELECTION: CompositionSelection = {
 export const DEFAULT_FLUX_EDITOR_TEXT =
   '// Start by selecting data from the schema browser or typing flux here'
 export const DEFAULT_SQL_EDITOR_TEXT = '/* Start by typing SQL here */'
+export const DEFAULT_INFLUXQL_EDITOR_TEXT =
+  '/* Start by typing InfluxQL here */'
 
 const DEFAULT_CONTEXT = {
   hasChanged: false,