feat(compass-web): show performance advisor banner COMPASS-7596 (#5541)

mabaasit · web-flow · commit 18d819f32623 · 2024-03-07T14:00:22.000+01:00
* setup banner without link

* fix ux

* add link todos
diff --git a/packages/compass-indexes/src/components/indexes/indexes.tsx b/packages/compass-indexes/src/components/indexes/indexes.tsx
@@ -42,10 +42,11 @@ const AtlasIndexesBanner = () => {
     <Banner variant="info">
       <Body weight="medium">Looking for search indexes?</Body>
       These indexes can be created and viewed under{' '}
+      {/* todo: COMPASS-7701 add correct link */}
+      {/* #/clusters/atlasSearch/{clusterName} */}
       <Link href={'#/clusters/atlasSearch'} target="_blank" hideExternalIcon>
-        Atlas Search
+        Atlas Search.
       </Link>
-      .
     </Banner>
   );
 };
diff --git a/packages/compass-preferences-model/src/preferences-schema.ts b/packages/compass-preferences-model/src/preferences-schema.ts
@@ -54,6 +54,8 @@ export type UserConfigurablePreferences = PermanentFeatureFlags &
     enableImportExport: boolean;
     enableAggregationBuilderRunPipeline: boolean;
     enableAggregationBuilderExtraOptions: boolean;
+    enableHackoladeBanner: boolean;
+    enablePerformanceAdvisorBanner: boolean;
   };
 
 export type InternalUserPreferences = {
@@ -703,6 +705,29 @@ export const storedUserPreferencesProps: Required<{
     type: 'boolean',
   },
 
+  enableHackoladeBanner: {
+    ui: true,
+    cli: true,
+    global: true,
+    description: {
+      short:
+        'Show Hackolade banner to users for data modeling and schema design',
+    },
+    validator: z.boolean().default(true),
+    type: 'boolean',
+  },
+
+  enablePerformanceAdvisorBanner: {
+    ui: true,
+    cli: true,
+    global: true,
+    description: {
+      short: 'Show performance advisor banner to users for performance tuning',
+    },
+    validator: z.boolean().default(false),
+    type: 'boolean',
+  },
+
   ...allFeatureFlagsProps,
 };
 
diff --git a/packages/compass-schema/src/components/compass-schema.tsx b/packages/compass-schema/src/components/compass-schema.tsx
@@ -24,32 +24,48 @@ import {
   useDarkMode,
   WorkspaceContainer,
   lighten,
+  Banner,
+  Body,
+  Badge,
+  Icon,
 } from '@mongodb-js/compass-components';
 import { HackoladePromoBanner } from './promo-banner';
 import type { configureActions } from '../actions';
+import { usePreference } from 'compass-preferences-model/provider';
 
-const rootStyles = css`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  flex-grow: 1;
-  flex-shrink: 1;
-`;
+const rootStyles = css({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  flexGrow: 1,
+  flexShrink: 1,
+});
 
-const loaderStyles = css`
-  height: 100%;
-  display: flex;
-  justify-content: center;
-`;
+const loaderStyles = css({
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+});
 
-const schemaStyles = css`
-  width: 100%;
-  padding: 0 ${spacing[3]}px;
-  flex-grow: 1;
-  overflow: auto;
-`;
+const schemaStyles = css({
+  width: '100%',
+  flexGrow: 1,
+  overflow: 'auto',
+});
+
+const contentStyles = css({
+  paddingLeft: spacing[3],
+  paddingRight: spacing[3],
+  display: 'flex',
+  flexDirection: 'column',
+  gap: spacing[3],
+});
+
+const insightsBadgeStyles = css({
+  verticalAlign: 'middle',
+});
 
 const minichartStyles = (darkMode: boolean) => {
   const mcBlue0 = palette.blue.light1;
@@ -314,6 +330,27 @@ const FieldList: React.FunctionComponent<{
   );
 };
 
+const nbsp = '\u00a0';
+const PerformanceAdvisorBanner = () => {
+  return (
+    <Banner variant="info">
+      <Body weight="medium">Looking for schema anti-patterns?</Body>
+      In its place, you may refer to Data Explorer’s performance insights{' '}
+      <Badge className={insightsBadgeStyles} variant="blue">
+        <Icon glyph="Bulb" size="small" />
+        Insight
+      </Badge>
+      {nbsp}or{nbsp}
+      {/* todo: COMPASS-7701 add correct link */}
+      {/* #/metrics/replicaSet/{clusterId}/advisor */}
+      {/* #/serverless/advisor/{clusterName}/createIndexes */}
+      <Link href="#/" target="_blank" hideExternalIcon>
+        Atlas’ Performance Advisor.
+      </Link>
+    </Banner>
+  );
+};
+
 const Schema: React.FunctionComponent<{
   actions: ReturnType<typeof configureActions>;
   analysisState: AnalysisState;
@@ -351,6 +388,11 @@ const Schema: React.FunctionComponent<{
     actions.startAnalysis();
   }, [actions]);
 
+  const enableHackoladeBanner = usePreference('enableHackoladeBanner');
+  const enablePerformanceAdvisorBanner = usePreference(
+    'enablePerformanceAdvisorBanner'
+  );
+
   return (
     <div className={rootStyles}>
       <WorkspaceContainer
@@ -366,20 +408,23 @@ const Schema: React.FunctionComponent<{
           />
         }
       >
-        <HackoladePromoBanner></HackoladePromoBanner>
-        {analysisState === ANALYSIS_STATE_INITIAL && (
-          <InitialScreen onApplyClicked={onApplyClicked} />
-        )}
-        {analysisState === ANALYSIS_STATE_ANALYZING && (
-          <AnalyzingScreen onCancelClicked={onCancelClicked} />
-        )}
-        {analysisState === ANALYSIS_STATE_COMPLETE && (
-          <FieldList
-            schema={schema}
-            analysisState={analysisState}
-            actions={actions}
-          />
-        )}
+        <div className={contentStyles}>
+          {enablePerformanceAdvisorBanner && <PerformanceAdvisorBanner />}
+          {enableHackoladeBanner && <HackoladePromoBanner />}
+          {analysisState === ANALYSIS_STATE_INITIAL && (
+            <InitialScreen onApplyClicked={onApplyClicked} />
+          )}
+          {analysisState === ANALYSIS_STATE_ANALYZING && (
+            <AnalyzingScreen onCancelClicked={onCancelClicked} />
+          )}
+          {analysisState === ANALYSIS_STATE_COMPLETE && (
+            <FieldList
+              schema={schema}
+              analysisState={analysisState}
+              actions={actions}
+            />
+          )}
+        </div>
       </WorkspaceContainer>
     </div>
   );
diff --git a/packages/compass-schema/src/components/promo-banner.tsx b/packages/compass-schema/src/components/promo-banner.tsx
@@ -21,11 +21,6 @@ const bannerBodyStyles = css({
   paddingLeft: spacing[3],
   paddingRight: spacing[3],
   borderRadius: '12px',
-  marginLeft: spacing[3],
-  marginRight: spacing[3],
-  '&:not(:last-child)': {
-    marginBottom: spacing[4],
-  },
 });
 
 const bannerBodyLightModeStyles = css({
diff --git a/packages/compass-web/src/index.tsx b/packages/compass-web/src/index.tsx
@@ -220,6 +220,8 @@ const CompassWeb = ({
       enableAtlasSearchIndexes: false,
       enableImportExport: false,
       enableGenAIFeatures: false,
+      enableHackoladeBanner: false,
+      enablePerformanceAdvisorBanner: true,
       cloudFeatureRolloutAccess: {
         GEN_AI_COMPASS: false,
       },
