Skip to content

Commit 34920a7

Browse files
drdelambredrdelambre
authored
feat: connect to resource (#5558)
1 parent 9131374 commit 34920a7

File tree

5 files changed

+168
-180
lines changed

5 files changed

+168
-180
lines changed

‎src/dataExplorer/components/DataExplorerPage.tsx‎

Lines changed: 68 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import ViewTypeDropdown from 'src/timeMachine/components/ViewTypeDropdown'
2424
import {AddAnnotationDEOverlay} from 'src/overlays/components/index'
2525
import {EditAnnotationDEOverlay} from 'src/overlays/components/index'
2626
import TemplatePage from 'src/dataExplorer/components/resources/TemplatePage'
27+
import RenamablePageTitle from 'src/pageLayout/components/RenamablePageTitle'
2728

2829
// Utils
2930
import {pageTitleSuffixer} from 'src/shared/utils/pageTitles'
@@ -35,15 +36,73 @@ import {ResourceType} from 'src/types'
3536

3637
import 'src/shared/components/cta.scss'
3738
import {AppSettingContext} from 'src/shared/contexts/app'
39+
import {
40+
PersistanceContext,
41+
PersistanceProvider,
42+
} from 'src/dataExplorer/context/persistance'
3843
import {PROJECT_NAME, PROJECT_NAME_PLURAL} from 'src/flows'
3944

45+
const DataExplorerPageHeader: FC = () => {
46+
const {fluxQueryBuilder, setFluxQueryBuilder} = useContext(AppSettingContext)
47+
const {resource, setResource} = useContext(PersistanceContext)
48+
49+
const toggleSlider = () => {
50+
event('toggled new query builder', {active: `${!fluxQueryBuilder}`})
51+
setFluxQueryBuilder(!fluxQueryBuilder)
52+
}
53+
54+
const handleRename = (name: string) => {
55+
setResource({
56+
...resource,
57+
data: {
58+
...resource.data,
59+
name,
60+
},
61+
})
62+
}
63+
64+
let pageTitle = <Page.Title title="Data Explorer" />
65+
if (fluxQueryBuilder && resource?.data?.hasOwnProperty('name')) {
66+
pageTitle = (
67+
<RenamablePageTitle
68+
onRename={handleRename}
69+
name={resource?.data?.name || ''}
70+
placeholder="Untitled Script"
71+
maxLength={100}
72+
/>
73+
)
74+
}
75+
76+
return (
77+
<Page.Header
78+
fullWidth={true}
79+
className={`${
80+
fluxQueryBuilder ? 'flux-query-builder' : 'data-explorer'
81+
}--header`}
82+
testID="data-explorer--header"
83+
>
84+
{pageTitle}
85+
<FlexBox margin={ComponentSize.Large}>
86+
<FeatureFlag name="newDataExplorer">
87+
<FlexBox margin={ComponentSize.Medium}>
88+
<InputLabel>&#10024; Try new Data Explorer</InputLabel>
89+
<SlideToggle
90+
active={fluxQueryBuilder}
91+
onChange={toggleSlider}
92+
testID="flux-query-builder-toggle"
93+
/>
94+
</FlexBox>
95+
</FeatureFlag>
96+
<RateLimitAlert location="data explorer" />
97+
</FlexBox>
98+
</Page.Header>
99+
)
100+
}
101+
40102
const DataExplorerPage: FC = () => {
41-
const {
42-
flowsCTA,
43-
fluxQueryBuilder,
44-
setFlowsCTA,
45-
setFluxQueryBuilder,
46-
} = useContext(AppSettingContext)
103+
const {flowsCTA, fluxQueryBuilder, setFlowsCTA} = useContext(
104+
AppSettingContext
105+
)
47106
useLoadTimeReporting('DataExplorerPage load start')
48107

49108
const hideFlowsCTA = () => {
@@ -60,11 +119,6 @@ const DataExplorerPage: FC = () => {
60119
}
61120
}, [])
62121

63-
const toggleSlider = () => {
64-
event('toggled new query builder', {active: `${!fluxQueryBuilder}`})
65-
setFluxQueryBuilder(!fluxQueryBuilder)
66-
}
67-
68122
return (
69123
<Page titleTag={pageTitleSuffixer(['Data Explorer'])}>
70124
<Switch>
@@ -86,28 +140,9 @@ const DataExplorerPage: FC = () => {
86140
/>
87141
</Switch>
88142
<GetResources resources={[ResourceType.Variables]}>
89-
<Page.Header
90-
fullWidth={true}
91-
className={`${
92-
fluxQueryBuilder ? 'flux-query-builder' : 'data-explorer'
93-
}--header`}
94-
testID="data-explorer--header"
95-
>
96-
<Page.Title title="Data Explorer" />
97-
<FlexBox margin={ComponentSize.Large}>
98-
<FeatureFlag name="newDataExplorer">
99-
<FlexBox margin={ComponentSize.Medium}>
100-
<InputLabel>&#10024; Try new Data Explorer</InputLabel>
101-
<SlideToggle
102-
active={fluxQueryBuilder}
103-
onChange={toggleSlider}
104-
testID="flux-query-builder-toggle"
105-
/>
106-
</FlexBox>
107-
</FeatureFlag>
108-
<RateLimitAlert location="data explorer" />
109-
</FlexBox>
110-
</Page.Header>
143+
<PersistanceProvider>
144+
<DataExplorerPageHeader />
145+
</PersistanceProvider>
111146
{flowsCTA.explorer && (
112147
<FeatureFlag name="flowsCTA">
113148
<div className="header-cta--de">

‎src/dataExplorer/components/FluxQueryBuilder.tsx‎

Lines changed: 50 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ import SaveAsScript from 'src/dataExplorer/components/SaveAsScript'
2929
// Styles
3030
import './FluxQueryBuilder.scss'
3131
import {isFlagEnabled} from 'src/shared/utils/featureFlag'
32-
import {ScriptProvider} from 'src/dataExplorer/context/scripts'
3332

3433
export enum OverlayType {
3534
NEW = 'new',
@@ -43,62 +42,60 @@ const FluxQueryBuilder: FC = () => {
4342
return (
4443
<EditorProvider>
4544
<SidebarProvider>
46-
<ScriptProvider>
47-
<Overlay visible={overlayType !== null}>
48-
<SaveAsScript
49-
type={overlayType}
50-
onClose={() => setOverlayType(null)}
51-
/>
52-
</Overlay>
53-
<FlexBox
54-
className="flux-query-builder--container"
55-
direction={FlexDirection.Column}
56-
justifyContent={JustifyContent.SpaceBetween}
57-
alignItems={AlignItems.Stretch}
45+
<Overlay visible={overlayType !== null}>
46+
<SaveAsScript
47+
type={overlayType}
48+
onClose={() => setOverlayType(null)}
49+
/>
50+
</Overlay>
51+
<FlexBox
52+
className="flux-query-builder--container"
53+
direction={FlexDirection.Column}
54+
justifyContent={JustifyContent.SpaceBetween}
55+
alignItems={AlignItems.Stretch}
56+
>
57+
<div
58+
className="flux-query-builder--menu"
59+
data-testid="flux-query-builder--menu"
5860
>
59-
<div
60-
className="flux-query-builder--menu"
61-
data-testid="flux-query-builder--menu"
62-
>
61+
<Button
62+
onClick={() => setOverlayType(OverlayType.NEW)}
63+
text="New Script"
64+
icon={IconFont.Plus_New}
65+
status={
66+
query.length === 0
67+
? ComponentStatus.Disabled
68+
: ComponentStatus.Default
69+
}
70+
/>
71+
{isFlagEnabled('saveAsScript') && (
6372
<Button
64-
onClick={() => setOverlayType(OverlayType.NEW)}
65-
text="New Script"
66-
icon={IconFont.Plus_New}
67-
status={
68-
query.length === 0
69-
? ComponentStatus.Disabled
70-
: ComponentStatus.Default
71-
}
73+
className="flux-query-builder__save-button"
74+
onClick={() => setOverlayType(OverlayType.SAVE)}
75+
text="Save Script"
76+
icon={IconFont.Save}
7277
/>
73-
{isFlagEnabled('saveAsScript') && (
74-
<Button
75-
className="flux-query-builder__save-button"
76-
onClick={() => setOverlayType(OverlayType.SAVE)}
77-
text="Save Script"
78-
icon={IconFont.Save}
79-
/>
80-
)}
81-
</div>
82-
<DraggableResizer
83-
handleOrientation={Orientation.Vertical}
84-
handlePositions={vertical}
85-
onChangePositions={setVertical}
78+
)}
79+
</div>
80+
<DraggableResizer
81+
handleOrientation={Orientation.Vertical}
82+
handlePositions={vertical}
83+
onChangePositions={setVertical}
84+
>
85+
<DraggableResizer.Panel>
86+
<Schema />
87+
</DraggableResizer.Panel>
88+
<DraggableResizer.Panel
89+
testID="flux-query-builder-middle-panel"
90+
className="new-data-explorer-rightside"
8691
>
87-
<DraggableResizer.Panel>
88-
<Schema />
89-
</DraggableResizer.Panel>
90-
<DraggableResizer.Panel
91-
testID="flux-query-builder-middle-panel"
92-
className="new-data-explorer-rightside"
93-
>
94-
<ResultsPane />
95-
</DraggableResizer.Panel>
96-
<DraggableResizer.Panel>
97-
<Sidebar />
98-
</DraggableResizer.Panel>
99-
</DraggableResizer>
100-
</FlexBox>
101-
</ScriptProvider>
92+
<ResultsPane />
93+
</DraggableResizer.Panel>
94+
<DraggableResizer.Panel>
95+
<Sidebar />
96+
</DraggableResizer.Panel>
97+
</DraggableResizer>
98+
</FlexBox>
10299
</SidebarProvider>
103100
</EditorProvider>
104101
)

0 commit comments

Comments
 (0)