@@ -48,7 +48,6 @@ import {
48
48
49
49
import { importComponentFromFELibrary } from '@Components/common'
50
50
51
- import { ReactComponent as Close } from '../../assets/icons/ic-close.svg'
52
51
import { SERVER_MODE , ViewType } from '../../config'
53
52
import {
54
53
OutputTabs ,
@@ -59,26 +58,19 @@ import {
59
58
} from './bulkedit.utils'
60
59
import { getSeeExample , updateBulkList , updateImpactedObjectsList } from './bulkedits.service'
61
60
import { BulkEditsProps , BulkEditsState , BulkEditVersion } from './bulkEdits.type'
62
- import { OutputDivider , OutputObjectTabs , STATUS } from './constants'
61
+ import {
62
+ BULK_EDIT_RESIZE_HANDLE_CLASS ,
63
+ INITIAL_OUTPUT_PANEL_HEIGHT_PERCENTAGE ,
64
+ OutputDivider ,
65
+ OutputObjectTabs ,
66
+ ReadmeVersionOptions ,
67
+ STATUS ,
68
+ } from './constants'
69
+ import basicValidatorSchema from './schema.json'
63
70
64
71
import './bulkEdit.scss'
65
72
66
- const getBulkEditConfig = importComponentFromFELibrary ( 'getBulkEditConfig' , null , 'function' )
67
-
68
- const ReadmeVersionOptions = [
69
- ...( getBulkEditConfig
70
- ? [
71
- {
72
- label : 'v1beta2/application' ,
73
- value : BulkEditVersion . v2 ,
74
- } ,
75
- ]
76
- : [ ] ) ,
77
- {
78
- label : 'v1beta1/application' ,
79
- value : BulkEditVersion . v1 ,
80
- } ,
81
- ]
73
+ export const getBulkEditConfig = importComponentFromFELibrary ( 'getBulkEditConfig' , null , 'function' )
82
74
83
75
class BulkEdits extends Component < BulkEditsProps , BulkEditsState > {
84
76
private editorAndOutputContainerRef = createRef < HTMLDivElement > ( )
@@ -227,7 +219,7 @@ class BulkEdits extends Component<BulkEditsProps, BulkEditsState> {
227
219
const { showExamples } = this . state
228
220
229
221
return (
230
- < div className = "flex bg__primary px-20 py-8 dc__border -bottom dc__content-space" >
222
+ < div className = "flex bg__primary px-16 py-8 border__secondary- -bottom dc__content-space" >
231
223
< div className = "flexbox dc__gap-12" >
232
224
< h1 className = "m-0 fs-13 cn-9 fw-6 lh-20 dc__open-sans" > Script</ h1 >
233
225
{ ! showExamples && (
@@ -296,22 +288,25 @@ class BulkEdits extends Component<BulkEditsProps, BulkEditsState> {
296
288
const { codeEditorPayload, schema, activeOutputTab } = this . state
297
289
const { gridTemplateRows } = this . props
298
290
291
+ const isV2Schema = ( codeEditorPayload ?? '' ) . match ( 'apiVersion:\\s*batch/v1beta2' ) ?. length
292
+
293
+ const validatorSchema = isV2Schema ? schema : basicValidatorSchema
294
+
299
295
if ( activeOutputTab === 'none' ) {
300
296
return (
301
297
< div className = "dc__overflow-hidden flex-grow-1" >
302
298
< CodeEditor
299
+ key = { isV2Schema }
303
300
mode = { MODES . YAML }
304
301
height = "100%"
305
302
value = { codeEditorPayload }
306
303
onChange = { this . handleConfigChange }
307
- validatorSchema = { schema }
304
+ validatorSchema = { validatorSchema }
308
305
/>
309
306
</ div >
310
307
)
311
308
}
312
309
313
- // TODO: make sure to disable cursor selection while dragging
314
-
315
310
return (
316
311
< motion . div
317
312
className = "dc__grid flex-grow-1 dc__overflow-hidden"
@@ -320,28 +315,30 @@ class BulkEdits extends Component<BulkEditsProps, BulkEditsState> {
320
315
>
321
316
< motion . div className = "dc__overflow-hidden flex-grow-1" >
322
317
< CodeEditor
318
+ key = { isV2Schema }
323
319
mode = { MODES . YAML }
324
320
height = "100%"
325
321
value = { codeEditorPayload }
326
322
onChange = { this . handleConfigChange }
327
- validatorSchema = { schema }
323
+ validatorSchema = { validatorSchema }
328
324
/>
329
325
</ motion . div >
330
326
331
327
< Draggable
332
- handle = ".bulk-edit"
328
+ handle = { `.${ BULK_EDIT_RESIZE_HANDLE_CLASS } ` }
329
+ defaultClassNameDragging = { `${ BULK_EDIT_RESIZE_HANDLE_CLASS } --dragging` }
333
330
axis = "none"
334
331
position = { { x : 0 , y : 0 } }
335
332
bounds = { { left : 0 , right : 0 } }
336
333
onDrag = { this . handleDrag }
337
334
>
338
- < div className = "bulk-edit border__secondary flex dc__zi-10" >
335
+ < div className = { ` ${ BULK_EDIT_RESIZE_HANDLE_CLASS } border__primary--bottom flex dc__zi-10` } >
339
336
< Icon name = "ic-resize-handle" size = { 16 } color = { null } />
340
337
</ div >
341
338
</ Draggable >
342
339
343
340
< motion . div className = "bulk-output-drawer bg__primary flexbox-col dc__overflow-auto" >
344
- < div className = "bulk-output-header flex left pl-20 pr-20 pt-6 dc__border-top dc__border -bottom bg__primary" >
341
+ < div className = "bulk-output-header flex left px-16 pt-6 border__secondary- -bottom bg__primary" >
345
342
< OutputTabs
346
343
handleOutputTabs = { ( ) => this . handleOutputTab ( 'output' ) }
347
344
outputName = { activeOutputTab }
@@ -486,7 +483,7 @@ class BulkEdits extends Component<BulkEditsProps, BulkEditsState> {
486
483
const { selectedReadmeVersionOption, readmeVersionOptions } = this . state
487
484
488
485
return (
489
- < div className = "dc__border- bottom bg__primary py-8 px-20 flex dc__content-space" >
486
+ < div className = "border__secondary-- bottom bg__primary py-10 px-16 flex dc__content-space" >
490
487
< div className = "flex left dc__gap-16" >
491
488
< div className = "fw-6 cn-9" data-testid = "sample-application" >
492
489
Sample:
@@ -505,13 +502,14 @@ class BulkEdits extends Component<BulkEditsProps, BulkEditsState> {
505
502
/>
506
503
</ div >
507
504
< Button
508
- icon = { < Close /> }
505
+ icon = { < Icon name = "ic-close-large" color = { null } /> }
509
506
onClick = { this . onClickHideExamples }
510
507
dataTestId = "hide-examples-button"
511
508
variant = { ButtonVariantType . borderLess }
512
509
style = { ButtonStyleType . negativeGrey }
513
510
ariaLabel = "Hide Sample"
514
- size = { ComponentSizeType . small }
511
+ showAriaLabelInTippy = { false }
512
+ size = { ComponentSizeType . xs }
515
513
/>
516
514
</ div >
517
515
)
@@ -589,7 +587,7 @@ class BulkEdits extends Component<BulkEditsProps, BulkEditsState> {
589
587
}
590
588
591
589
const BulkEditsWithUseResizable = ( props : Pick < BulkEditsProps , 'serverMode' > ) => {
592
- const outputHeightMV = useMotionValue ( 50 )
590
+ const outputHeightMV = useMotionValue ( INITIAL_OUTPUT_PANEL_HEIGHT_PERCENTAGE )
593
591
const gridTemplateRows = useMotionTemplate `1fr 1px ${ outputHeightMV } %`
594
592
595
593
return < BulkEdits { ...{ ...props , outputHeightMV, gridTemplateRows } } />
0 commit comments