1- import React , { FC , useContext , useCallback , useState } from 'react'
1+ import React , { FC , useContext , useCallback , useState , ChangeEvent } from 'react'
22import {
33 Button ,
44 ComponentColor ,
5+ ComponentStatus ,
6+ Form ,
57 Input ,
68 InputLabel ,
79 InputType ,
@@ -15,71 +17,134 @@ import {
1517} from 'src/dataExplorer/context/persistance'
1618import { RemoteDataState } from 'src/types'
1719import './SaveAsScript.scss'
20+ import { CLOUD } from 'src/shared/constants'
21+ import { ScriptContext } from 'src/dataExplorer/context/scripts'
22+ import { OverlayType } from './FluxQueryBuilder'
23+ import { useDispatch } from 'react-redux'
24+ import { notify } from 'src/shared/actions/notifications'
25+ import {
26+ scriptSaveFail ,
27+ scriptSaveSuccess ,
28+ } from 'src/shared/copy/notifications/categories/scripts'
1829
1930interface Props {
2031 onClose : ( ) => void
32+ type : OverlayType | null
2133}
2234
23- const SaveAsScript : FC < Props > = ( { onClose} ) => {
35+ const SaveAsScript : FC < Props > = ( { onClose, type} ) => {
36+ const dispatch = useDispatch ( )
2437 const { setQuery, setSelection} = useContext ( PersistanceContext )
2538 const { cancel} = useContext ( QueryContext )
39+ const { handleSave} = useContext ( ScriptContext )
40+ const [ name , setName ] = useState ( '' )
41+ const [ description , setDescription ] = useState ( '' )
2642 const { setStatus, setResult} = useContext ( ResultsContext )
27- const [ scriptName , setScriptName ] = useState ( new Date ( ) . toISOString ( ) )
43+
44+ const handleClose = useCallback ( ( ) => {
45+ setDescription ( '' )
46+ setName ( `Untitle Script: ${ new Date ( ) . toISOString ( ) } )
47+ onClose ( )
48+ } , [ onClose , setDescription , setName ] )
49+
50+ const handleUpdateDescription = ( event : ChangeEvent < HTMLInputElement > ) => {
51+ setDescription ( event . target . value )
52+ }
53+
54+ const handleUpdateName = ( event : ChangeEvent < HTMLInputElement > ) => {
55+ setName ( event . target . value )
56+ }
2857
2958 const clear = useCallback ( ( ) => {
3059 cancel ( )
3160 setStatus ( RemoteDataState . NotStarted )
3261 setResult ( null )
3362 setQuery ( '' )
3463 setSelection ( JSON . parse ( JSON . stringify ( DEFAULT_SCHEMA ) ) )
35- onClose ( )
36- } , [ onClose , setQuery , setStatus , setResult , setSelection , cancel ] )
64+ handleClose ( )
65+ } , [ handleClose , setQuery , setStatus , setResult , setSelection , cancel ] )
66+
67+ const handleSaveScript = ( ) => {
68+ try {
69+ handleSave ( name , description )
70+
71+ dispatch ( notify ( scriptSaveSuccess ( name ) ) )
3772
38- const updateScriptName = event => {
39- setScriptName ( event . target . value )
73+ if ( type === OverlayType . NEW ) {
74+ clear ( )
75+ }
76+ } catch ( error ) {
77+ dispatch ( notify ( scriptSaveFail ( name ) ) )
78+ console . error ( { error} )
79+ } finally {
80+ handleClose ( )
81+ }
82+ }
83+
84+ if ( type == null ) {
85+ return null
86+ }
87+
88+ let overlayTitle = 'Save Script'
89+
90+ if ( type === OverlayType . NEW ) {
91+ overlayTitle = 'Do you want to save your Script first?'
4092 }
4193
4294 return (
4395 < Overlay . Container maxWidth = { 500 } >
44- < Overlay . Header
45- title = "Do you want to save your Script first?"
46- onDismiss = { onClose }
47- />
96+ < Overlay . Header title = { overlayTitle } onDismiss = { handleClose } />
4897 < Overlay . Body >
49- < div className = "save-script-overlay__warning-text" >
50- "Untitled Script: { scriptName } " will be overwritten by a new one if
51- you don’t save it.
52- </ div >
53- < InputLabel > Save as</ InputLabel >
54- < Input
55- name = "scriptName"
56- type = { InputType . Text }
57- value = { scriptName }
58- onChange = { updateScriptName }
59- />
98+ { type === OverlayType . NEW && (
99+ < div className = "save-script-overlay__warning-text" >
100+ "{ name } " will be overwritten by a new one if you don’t save it.
101+ </ div >
102+ ) }
103+ < Form >
104+ < InputLabel > Save as</ InputLabel >
105+ < Input
106+ className = "save-script-name__input"
107+ name = "name"
108+ required
109+ type = { InputType . Text }
110+ value = { name }
111+ onChange = { handleUpdateName }
112+ />
113+ < InputLabel > Description</ InputLabel >
114+ < Input
115+ name = "description"
116+ required
117+ type = { InputType . Text }
118+ value = { description }
119+ onChange = { handleUpdateDescription }
120+ />
121+ </ Form >
60122 </ Overlay . Body >
61123 < Overlay . Footer >
62124 < Button
63125 color = { ComponentColor . Tertiary }
64- onClick = { onClose }
126+ onClick = { handleClose }
65127 text = "Cancel"
66- testID = "cancel-service-confirmation--button"
67- />
68- < Button
69- color = { ComponentColor . Default }
70- onClick = { clear }
71- text = "No, Delete"
72- testID = "cancel-service-confirmation--button"
73- />
74- < Button
75- color = { ComponentColor . Primary }
76- onClick = { ( ) => {
77- alert ( 'this is a WIP and will be connected soon' )
78- // TODO(ariel): hook this up
79- } }
80- text = "Yes, Save"
81- testID = "cancel-service-confirmation--button"
82128 />
129+ { type === OverlayType . NEW && (
130+ < Button
131+ color = { ComponentColor . Default }
132+ onClick = { clear }
133+ text = "No, Delete"
134+ />
135+ ) }
136+ { CLOUD && (
137+ < Button
138+ color = { ComponentColor . Primary }
139+ status = {
140+ name . length === 0 || description . length === 0
141+ ? ComponentStatus . Disabled
142+ : ComponentStatus . Default
143+ }
144+ onClick = { handleSaveScript }
145+ text = { type === OverlayType . NEW ? 'Yes, Save' : 'Save' }
146+ />
147+ ) }
83148 </ Overlay . Footer >
84149 </ Overlay . Container >
85150 )
0 commit comments