@@ -24,32 +24,48 @@ import {
24
24
useDarkMode ,
25
25
WorkspaceContainer ,
26
26
lighten ,
27
+ Banner ,
28
+ Body ,
29
+ Badge ,
30
+ Icon ,
27
31
} from '@mongodb-js/compass-components' ;
28
32
import { HackoladePromoBanner } from './promo-banner' ;
29
33
import type { configureActions } from '../actions' ;
34
+ import { usePreference } from 'compass-preferences-model/provider' ;
30
35
31
- const rootStyles = css `
32
- width : 100% ;
33
- height : 100% ;
34
- display : flex;
35
- flex-direction : column;
36
- align-items : stretch;
37
- flex-grow : 1 ;
38
- flex-shrink : 1 ;
39
- ` ;
36
+ const rootStyles = css ( {
37
+ width : ' 100%' ,
38
+ height : ' 100%' ,
39
+ display : ' flex' ,
40
+ flexDirection : ' column' ,
41
+ alignItems : ' stretch' ,
42
+ flexGrow : 1 ,
43
+ flexShrink : 1 ,
44
+ } ) ;
40
45
41
- const loaderStyles = css `
42
- height : 100% ;
43
- display : flex;
44
- justify-content : center;
45
- ` ;
46
+ const loaderStyles = css ( {
47
+ height : ' 100%' ,
48
+ display : ' flex' ,
49
+ justifyContent : ' center' ,
50
+ } ) ;
46
51
47
- const schemaStyles = css `
48
- width : 100% ;
49
- padding : 0 ${ spacing [ 3 ] } px;
50
- flex-grow : 1 ;
51
- overflow : auto;
52
- ` ;
52
+ const schemaStyles = css ( {
53
+ width : '100%' ,
54
+ flexGrow : 1 ,
55
+ overflow : 'auto' ,
56
+ } ) ;
57
+
58
+ const contentStyles = css ( {
59
+ paddingLeft : spacing [ 3 ] ,
60
+ paddingRight : spacing [ 3 ] ,
61
+ display : 'flex' ,
62
+ flexDirection : 'column' ,
63
+ gap : spacing [ 3 ] ,
64
+ } ) ;
65
+
66
+ const insightsBadgeStyles = css ( {
67
+ verticalAlign : 'middle' ,
68
+ } ) ;
53
69
54
70
const minichartStyles = ( darkMode : boolean ) => {
55
71
const mcBlue0 = palette . blue . light1 ;
@@ -314,6 +330,27 @@ const FieldList: React.FunctionComponent<{
314
330
) ;
315
331
} ;
316
332
333
+ const nbsp = '\u00a0' ;
334
+ const PerformanceAdvisorBanner = ( ) => {
335
+ return (
336
+ < Banner variant = "info" >
337
+ < Body weight = "medium" > Looking for schema anti-patterns?</ Body >
338
+ In its place, you may refer to Data Explorer’s performance insights{ ' ' }
339
+ < Badge className = { insightsBadgeStyles } variant = "blue" >
340
+ < Icon glyph = "Bulb" size = "small" />
341
+ Insight
342
+ </ Badge >
343
+ { nbsp } or{ nbsp }
344
+ { /* todo: COMPASS-7701 add correct link */ }
345
+ { /* #/metrics/replicaSet/{clusterId}/advisor */ }
346
+ { /* #/serverless/advisor/{clusterName}/createIndexes */ }
347
+ < Link href = "#/" target = "_blank" hideExternalIcon >
348
+ Atlas’ Performance Advisor.
349
+ </ Link >
350
+ </ Banner >
351
+ ) ;
352
+ } ;
353
+
317
354
const Schema : React . FunctionComponent < {
318
355
actions : ReturnType < typeof configureActions > ;
319
356
analysisState : AnalysisState ;
@@ -351,6 +388,11 @@ const Schema: React.FunctionComponent<{
351
388
actions . startAnalysis ( ) ;
352
389
} , [ actions ] ) ;
353
390
391
+ const enableHackoladeBanner = usePreference ( 'enableHackoladeBanner' ) ;
392
+ const enablePerformanceAdvisorBanner = usePreference (
393
+ 'enablePerformanceAdvisorBanner'
394
+ ) ;
395
+
354
396
return (
355
397
< div className = { rootStyles } >
356
398
< WorkspaceContainer
@@ -366,20 +408,23 @@ const Schema: React.FunctionComponent<{
366
408
/>
367
409
}
368
410
>
369
- < HackoladePromoBanner > </ HackoladePromoBanner >
370
- { analysisState === ANALYSIS_STATE_INITIAL && (
371
- < InitialScreen onApplyClicked = { onApplyClicked } />
372
- ) }
373
- { analysisState === ANALYSIS_STATE_ANALYZING && (
374
- < AnalyzingScreen onCancelClicked = { onCancelClicked } />
375
- ) }
376
- { analysisState === ANALYSIS_STATE_COMPLETE && (
377
- < FieldList
378
- schema = { schema }
379
- analysisState = { analysisState }
380
- actions = { actions }
381
- />
382
- ) }
411
+ < div className = { contentStyles } >
412
+ { enablePerformanceAdvisorBanner && < PerformanceAdvisorBanner /> }
413
+ { enableHackoladeBanner && < HackoladePromoBanner /> }
414
+ { analysisState === ANALYSIS_STATE_INITIAL && (
415
+ < InitialScreen onApplyClicked = { onApplyClicked } />
416
+ ) }
417
+ { analysisState === ANALYSIS_STATE_ANALYZING && (
418
+ < AnalyzingScreen onCancelClicked = { onCancelClicked } />
419
+ ) }
420
+ { analysisState === ANALYSIS_STATE_COMPLETE && (
421
+ < FieldList
422
+ schema = { schema }
423
+ analysisState = { analysisState }
424
+ actions = { actions }
425
+ />
426
+ ) }
427
+ </ div >
383
428
</ WorkspaceContainer >
384
429
</ div >
385
430
) ;
0 commit comments