Skip to content

Commit 5f94197

Browse files
appletreeisyellowappletreeisyellow
authored
feat: make InfluxQL available to TSM orgs (#6657)
1 parent 14ded3c commit 5f94197

File tree

3 files changed

+114
-67
lines changed

3 files changed

+114
-67
lines changed

‎src/dataExplorer/components/SaveAsScript.tsx‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1+
// Libraries
12
import React, {FC, useContext, useCallback, ChangeEvent, useState} from 'react'
3+
import {useHistory} from 'react-router-dom'
4+
import {useDispatch, useSelector} from 'react-redux'
5+
6+
// Components
27
import {
38
Button,
49
ButtonShape,
@@ -13,30 +18,37 @@ import {
1318
Overlay,
1419
SquareButton,
1520
} from '@influxdata/clockface'
16-
import {useHistory} from 'react-router-dom'
21+
import OpenScript from 'src/dataExplorer/components/OpenScript'
22+
import {DeleteScript} from 'src/dataExplorer/components/DeleteScript'
23+
import {LanguageType} from 'src/dataExplorer/components/resources'
24+
import {SCRIPT_EDITOR_PARAMS} from 'src/dataExplorer/components/resources'
25+
import CopyToClipboard from 'src/shared/components/CopyToClipboard'
26+
27+
// Contexts
1728
import {QueryContext} from 'src/shared/contexts/query'
1829
import {ResultsContext} from 'src/dataExplorer/context/results'
1930
import {PersistanceContext} from 'src/dataExplorer/context/persistance'
31+
import {ResultsViewContext} from 'src/dataExplorer/context/resultsView'
32+
33+
// Types
2034
import {RemoteDataState} from 'src/types'
21-
import './SaveAsScript.scss'
2235
import {OverlayType} from './ScriptQueryBuilder'
23-
import {useDispatch, useSelector} from 'react-redux'
36+
37+
// Utils
2438
import {notify} from 'src/shared/actions/notifications'
2539
import {
2640
scriptSaveFail,
2741
scriptSaveSuccess,
2842
} from 'src/shared/copy/notifications/categories/scripts'
2943
import {getOrg, isOrgIOx} from 'src/organizations/selectors'
30-
import OpenScript from 'src/dataExplorer/components/OpenScript'
31-
import {DeleteScript} from 'src/dataExplorer/components/DeleteScript'
32-
import {LanguageType} from 'src/dataExplorer/components/resources'
33-
import {SCRIPT_EDITOR_PARAMS} from 'src/dataExplorer/components/resources'
34-
import CopyToClipboard from 'src/shared/components/CopyToClipboard'
3544
import {
3645
copyToClipboardFailed,
3746
copyToClipboardSuccess,
3847
} from 'src/shared/copy/notifications'
39-
import {ResultsViewContext} from 'src/dataExplorer/context/resultsView'
48+
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
49+
50+
import './SaveAsScript.scss'
51+
4052
interface Props {
4153
language: LanguageType
4254
onClose: () => void
@@ -99,7 +111,7 @@ const SaveAsScript: FC<Props> = ({language, onClose, setOverlayType, type}) => {
99111
setResult(null)
100112
clearViewOptions()
101113

102-
if (isIoxOrg) {
114+
if (isIoxOrg || isFlagEnabled('influxqlUI')) {
103115
history.replace(
104116
`/orgs/${org.id}/data-explorer/from/script?language=${language}&${SCRIPT_EDITOR_PARAMS}`
105117
)

‎src/dataExplorer/components/ScriptQueryBuilder.tsx‎

Lines changed: 90 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
ComponentStatus,
1919
} from '@influxdata/clockface'
2020
import {ResultsPane} from 'src/dataExplorer/components/ResultsPane'
21-
import Sidebar from 'src/dataExplorer/components/Sidebar'
21+
import {Sidebar} from 'src/dataExplorer/components/Sidebar'
2222
import {Schema} from 'src/dataExplorer/components/Schema'
2323
import SaveAsScript from 'src/dataExplorer/components/SaveAsScript'
2424

@@ -39,7 +39,7 @@ import {
3939
import {QueryContext} from 'src/shared/contexts/query'
4040
import {DBRPContext, DBRPProvider} from 'src/shared/contexts/dbrps'
4141

42-
// Utilies
42+
// Utils
4343
import {getOrg, isOrgIOx} from 'src/organizations/selectors'
4444
import {SCRIPT_EDITOR_PARAMS} from 'src/dataExplorer/components/resources'
4545
import {selectIsNewIOxOrg} from 'src/shared/selectors/app'
@@ -126,6 +126,91 @@ const ScriptQueryBuilder: FC = () => {
126126
const filterOutFluxInIOx = option =>
127127
isNewIOxOrg ? option !== LanguageType.FLUX : true
128128

129+
const menuIOx = (onCollapse: () => void) => (
130+
<Dropdown.Menu onCollapse={onCollapse}>
131+
{[LanguageType.FLUX, LanguageType.SQL]
132+
.filter(filterOutFluxInIOx)
133+
.map(option => (
134+
<Dropdown.Item
135+
className={`script-dropdown__${option}`}
136+
key={option}
137+
onClick={() => handleSelectDropdown(option)}
138+
selected={resource?.language === option}
139+
testID={`script-dropdown__${option}`}
140+
>
141+
{option}
142+
</Dropdown.Item>
143+
))}
144+
{isFlagEnabled('influxqlUI') && hasDBRPs() ? (
145+
<Dropdown.Item
146+
className={`script-dropdown__${LanguageType.INFLUXQL}`}
147+
key={LanguageType.INFLUXQL}
148+
onClick={() => handleSelectDropdown(LanguageType.INFLUXQL)}
149+
selected={resource?.language === LanguageType.INFLUXQL}
150+
testID={`script-dropdown__${LanguageType.INFLUXQL}`}
151+
>
152+
{LanguageType.INFLUXQL}
153+
</Dropdown.Item>
154+
) : null}
155+
</Dropdown.Menu>
156+
)
157+
158+
const menuTSM = (onCollapse: () => void) => (
159+
<Dropdown.Menu onCollapse={onCollapse}>
160+
{[LanguageType.FLUX].map(option => (
161+
<Dropdown.Item
162+
className={`script-dropdown__${option}`}
163+
key={option}
164+
onClick={() => handleSelectDropdown(option)}
165+
selected={resource?.language === option}
166+
testID={`script-dropdown__${option}`}
167+
>
168+
{option}
169+
</Dropdown.Item>
170+
))}
171+
{isFlagEnabled('influxqlUI') && hasDBRPs() ? (
172+
<Dropdown.Item
173+
className={`script-dropdown__${LanguageType.INFLUXQL}`}
174+
key={LanguageType.INFLUXQL}
175+
onClick={() => handleSelectDropdown(LanguageType.INFLUXQL)}
176+
selected={resource?.language === LanguageType.INFLUXQL}
177+
testID={`script-dropdown__${LanguageType.INFLUXQL}`}
178+
>
179+
{LanguageType.INFLUXQL}
180+
</Dropdown.Item>
181+
) : null}
182+
</Dropdown.Menu>
183+
)
184+
185+
const button = (active: boolean, onClick) => (
186+
<Dropdown.Button
187+
active={active}
188+
onClick={onClick}
189+
testID="script-query-builder--new-script"
190+
>
191+
<>
192+
<Icon glyph={IconFont.Plus_New} />
193+
&nbsp;New Script
194+
</>
195+
</Dropdown.Button>
196+
)
197+
198+
const tsmNewScriptDropDown =
199+
isFlagEnabled('influxqlUI') && hasDBRPs() ? (
200+
<Dropdown
201+
menu={menuTSM}
202+
button={button}
203+
testID="select-option-dropdown"
204+
/>
205+
) : (
206+
<Button
207+
onClick={handleNewScript}
208+
text="New Script"
209+
icon={IconFont.Plus_New}
210+
testID="script-query-builder--new-script"
211+
/>
212+
)
213+
129214
return (
130215
<EditorProvider>
131216
<SidebarProvider>
@@ -154,59 +239,12 @@ const ScriptQueryBuilder: FC = () => {
154239
<div style={{display: 'flex'}}>
155240
{isIoxOrg ? (
156241
<Dropdown
157-
menu={onCollapse => (
158-
<Dropdown.Menu onCollapse={onCollapse}>
159-
{[LanguageType.FLUX, LanguageType.SQL]
160-
.filter(filterOutFluxInIOx)
161-
.map(option => (
162-
<Dropdown.Item
163-
className={`script-dropdown__${option}`}
164-
key={option}
165-
onClick={() => handleSelectDropdown(option)}
166-
selected={resource?.language === option}
167-
testID={`script-dropdown__${option}`}
168-
>
169-
{option}
170-
</Dropdown.Item>
171-
))}
172-
{isFlagEnabled('influxqlUI') && hasDBRPs() ? (
173-
<Dropdown.Item
174-
className={`script-dropdown__${LanguageType.INFLUXQL}`}
175-
key={LanguageType.INFLUXQL}
176-
onClick={() =>
177-
handleSelectDropdown(LanguageType.INFLUXQL)
178-
}
179-
selected={
180-
resource?.language === LanguageType.INFLUXQL
181-
}
182-
testID={`script-dropdown__${LanguageType.INFLUXQL}`}
183-
>
184-
{LanguageType.INFLUXQL}
185-
</Dropdown.Item>
186-
) : null}
187-
</Dropdown.Menu>
188-
)}
189-
button={(active, onClick) => (
190-
<Dropdown.Button
191-
active={active}
192-
onClick={onClick}
193-
testID="script-query-builder--new-script"
194-
>
195-
<>
196-
<Icon glyph={IconFont.Plus_New} />
197-
&nbsp;New Script
198-
</>
199-
</Dropdown.Button>
200-
)}
242+
menu={menuIOx}
243+
button={button}
201244
testID="select-option-dropdown"
202245
/>
203246
) : (
204-
<Button
205-
onClick={handleNewScript}
206-
text="New Script"
207-
icon={IconFont.Plus_New}
208-
testID="script-query-builder--new-script"
209-
/>
247+
tsmNewScriptDropDown
210248
)}
211249
{CLOUD && (
212250
<>

‎src/dataExplorer/components/Sidebar.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, {FC, useContext, useCallback} from 'react'
2-
import {useSelector} from 'react-redux'
32

43
// Components
54
import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
@@ -18,7 +17,6 @@ import {
1817
import {SidebarContext} from 'src/dataExplorer/context/sidebar'
1918
import {EditorContext} from 'src/shared/contexts/editor'
2019
import {PersistanceContext} from 'src/dataExplorer/context/persistance'
21-
import {isOrgIOx} from 'src/organizations/selectors'
2220

2321
// Types
2422
import {FluxFunction, FluxToolbarFunction} from 'src/types'
@@ -38,7 +36,6 @@ const Sidebar: FC = () => {
3836
const {injectFunction} = useContext(EditorContext)
3937
const {visible, menu, clear} = useContext(SidebarContext)
4038
const {resource} = useContext(PersistanceContext)
41-
const isIoxOrg = useSelector(isOrgIOx)
4239

4340
const inject = useCallback(
4441
(fn: FluxFunction | FluxToolbarFunction) => {
@@ -125,7 +122,7 @@ const Sidebar: FC = () => {
125122
justifyContent={JustifyContent.FlexStart}
126123
className="container-right-side-bar"
127124
>
128-
{isIoxOrg && shouldNotShowSidebar ? null : (
125+
{shouldNotShowSidebar ? null : (
129126
<>
130127
{resultOptions}
131128
{fluxLibrary}
@@ -135,4 +132,4 @@ const Sidebar: FC = () => {
135132
)
136133
}
137134

138-
export default Sidebar
135+
export {Sidebar}

0 commit comments

Comments
 (0)