@@ -24,32 +24,48 @@ import {
2424 useDarkMode ,
2525 WorkspaceContainer ,
2626 lighten ,
27+ Banner ,
28+ Body ,
29+ Badge ,
30+ Icon ,
2731} from '@mongodb-js/compass-components' ;
2832import { HackoladePromoBanner } from './promo-banner' ;
2933import type { configureActions } from '../actions' ;
34+ import { usePreference } from 'compass-preferences-model/provider' ;
3035
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+ } ) ;
4045
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+ } ) ;
4651
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+ } ) ;
5369
5470const minichartStyles = ( darkMode : boolean ) => {
5571 const mcBlue0 = palette . blue . light1 ;
@@ -314,6 +330,27 @@ const FieldList: React.FunctionComponent<{
314330 ) ;
315331} ;
316332
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+
317354const Schema : React . FunctionComponent < {
318355 actions : ReturnType < typeof configureActions > ;
319356 analysisState : AnalysisState ;
@@ -351,6 +388,11 @@ const Schema: React.FunctionComponent<{
351388 actions . startAnalysis ( ) ;
352389 } , [ actions ] ) ;
353390
391+ const enableHackoladeBanner = usePreference ( 'enableHackoladeBanner' ) ;
392+ const enablePerformanceAdvisorBanner = usePreference (
393+ 'enablePerformanceAdvisorBanner'
394+ ) ;
395+
354396 return (
355397 < div className = { rootStyles } >
356398 < WorkspaceContainer
@@ -366,20 +408,23 @@ const Schema: React.FunctionComponent<{
366408 />
367409 }
368410 >
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 >
383428 </ WorkspaceContainer >
384429 </ div >
385430 ) ;
0 commit comments