feat: improve experiment recommendation and disable Snowflake warehouse (#7940)

Author: Zaimwa9

frontend/web/components/experiments/results/ExperimentRecommendation.tsx

@@ -0,0 +1,48 @@
+import { FC, useMemo } from 'react'
+import Icon from 'components/icons/Icon'
+import { colorTextSuccess } from 'common/theme/tokens'
+import { BayesianResultsSummary, Experiment } from 'common/types/responses'
+import { deriveSummary } from './ExperimentSummaryScorecard'
+import VariantName from './VariantName'
+
+type ExperimentRecommendationProps = {
+  experiment: Experiment
+  results?: BayesianResultsSummary
+}
+
+const ExperimentRecommendation: FC<ExperimentRecommendationProps> = ({
+  experiment,
+  results,
+}) => {
+  const summary = useMemo(
+    () => (results ? deriveSummary(experiment, results) : null),
+    [experiment, results],
+  )
+
+  if (!summary) return null
+
+  return (
+    <div className='alert alert-success experiment-recommendation mb-3'>
+      <div className='d-flex align-items-center gap-2 mb-2'>
+        <Icon name='checkmark-circle' width={20} fill={colorTextSuccess} />
+        <span className='text-success fw-semibold'>
+          {summary.chanceToBest} Winner Probability Confirmed
+        </span>
+      </div>
+      <div>
+        <VariantName name={summary.winnerName} colour={summary.winnerColour} />{' '}
+        is outperforming{' '}
+        <VariantName name='Control' colour={summary.controlColour} /> by{' '}
+        {summary.liftVsControl} with {summary.chanceToBest} probability of being
+        the best variant.
+      </div>
+      <div className='mt-2'>
+        Consider rolling out{' '}
+        <VariantName name={summary.winnerName} colour={summary.winnerColour} />{' '}
+        to all users.
+      </div>
+    </div>
+  )
+}
+
+export default ExperimentRecommendation

frontend/web/components/experiments/results/ExperimentSummaryScorecard.tsx

@@ -1,7 +1,5 @@
 import { FC, useMemo } from 'react'
-import Icon from 'components/icons/Icon'
 import InfoMessage from 'components/InfoMessage'
-import { colorTextSuccess } from 'common/theme/tokens'
 import { BayesianResultsSummary, Experiment } from 'common/types/responses'
 import { getPrimaryMetric } from 'components/experiments/constants'
 import {
@@ -19,14 +17,16 @@ type ExperimentSummaryScorecardProps = {
   results?: BayesianResultsSummary
 }
 
-type SummaryStats = {
+export type SummaryStats = {
   winnerName: string
+  winnerColour: string
+  controlColour: string
   chanceToBest: string
   liftVsControl: string
   liftFavourable: boolean
 }
 
-const deriveSummary = (
+export const deriveSummary = (
   experiment: Experiment,
   results: BayesianResultsSummary,
 ): SummaryStats | null => {
@@ -39,13 +39,18 @@ const deriveSummary = (
   const winner = getWinningVariant(metricResult, identities)
   if (!winner) return null
 
+  const winnerIdentity = identities.find((v) => v.key === winner.key)
+  const controlIdentity = identities.find((v) => v.isControl)
+
   return {
     chanceToBest: `${Math.round(winner.chanceToWin * 100)}%`,
+    controlColour: controlIdentity?.colour ?? '',
     liftFavourable: isLiftFavourable(
       winner.inference.lift,
       metric.expected_direction,
     ),
     liftVsControl: formatLiftPct(winner.inference.lift),
+    winnerColour: winnerIdentity?.colour ?? '',
     winnerName: winner.name,
   }
 }
@@ -63,25 +68,11 @@ const ExperimentSummaryScorecard: FC<ExperimentSummaryScorecardProps> = ({
 
   return (
     <>
-      {summary ? (
-        <div className='alert alert-success mb-3'>
-          <div className='d-flex align-items-center gap-2 mb-1'>
-            <Icon name='checkmark-circle' width={20} fill={colorTextSuccess} />
-            <span className='text-success fw-normal'>Recommendation</span>
-          </div>
-          <div>
-            <strong>{summary.winnerName}</strong> is outperforming{' '}
-            <strong>Control</strong> with {summary.chanceToBest} probability of
-            being the best variant.
-          </div>
-        </div>
-      ) : (
-        hasResults && (
-          <InfoMessage title='Collecting data'>
-            The experiment is still gathering data. Results will appear once
-            there is enough traffic for statistically meaningful analysis.
-          </InfoMessage>
-        )
+      {!summary && hasResults && (
+        <InfoMessage title='Collecting data'>
+          The experiment is still gathering data. Results will appear once there
+          is enough traffic for statistically meaningful analysis.
+        </InfoMessage>
       )}
       <div className='row g-3 mb-4'>
         <div className='col-md-3'>

frontend/web/components/experiments/results/VariantName.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react'
+import ColorSwatch from 'components/ColorSwatch'
+
+type VariantNameProps = {
+  name: string
+  colour: string
+}
+
+const VariantName: FC<VariantNameProps> = ({ colour, name }) => (
+  <span>
+    <ColorSwatch
+      color={colour}
+      shape='circle'
+      size='sm'
+      className='me-1 align-middle'
+    />
+    <strong>{name}</strong>
+  </span>
+)
+
+export default VariantName

frontend/web/components/experiments/results/results.scss

@@ -2,6 +2,10 @@
   align-items: flex-start;
 }
 
+.experiment-recommendation {
+  font-size: 16px;
+}
+
 .experiment-results {
   &__legend-row {
     display: flex;

frontend/web/components/pages/ExperimentDetailPage.tsx

@@ -9,6 +9,7 @@ import {
 import { getHeadlineTotal } from 'components/experiments/results/derive'
 import ExperimentDetailHeader from 'components/experiments/results/ExperimentDetailHeader'
 import ExperimentConfiguration from 'components/experiments/results/ExperimentConfiguration'
+import ExperimentRecommendation from 'components/experiments/results/ExperimentRecommendation'
 import ExperimentSummaryScorecard from 'components/experiments/results/ExperimentSummaryScorecard'
 import ExperimentMetricScorecard from 'components/experiments/results/ExperimentMetricScorecard'
 import ExperimentExposuresPanel from 'components/experiments/results/ExperimentExposuresPanel'
@@ -85,6 +86,9 @@ const ExperimentDetailPage: FC = () => {
         environmentId={environmentId}
         experiment={experiment}
       />
+      {experiment.status !== 'created' && (
+        <ExperimentRecommendation experiment={experiment} results={results} />
+      )}
       <ExperimentConfiguration
         experiment={experiment}
         environmentId={environmentId}

frontend/web/components/pages/environment-settings/tabs/warehouse-tab/WarehouseSetup.tsx

@@ -15,7 +15,7 @@ type WarehouseSetupProps = {
 
 type WarehouseTypeOption = WarehouseType | 'bigquery' | 'databricks'
 
-const CONFIGURABLE_TYPES: WarehouseTypeOption[] = ['flagsmith', 'snowflake']
+const CONFIGURABLE_TYPES: WarehouseTypeOption[] = ['flagsmith']
 
 const WarehouseSetup: FC<WarehouseSetupProps> = ({
   isCreating,
@@ -51,9 +51,11 @@ const WarehouseSetup: FC<WarehouseSetupProps> = ({
               icon={<Icon name='flash' width={20} />}
               title='Snowflake'
               description='Cloud data warehouse'
-              selected={selectedType === 'snowflake'}
-              onClick={() => setSelectedType('snowflake')}
+              selected={false}
+              onClick={() => {}}
+              disabled
             />
+            <span className='warehouse-setup__coming-soon'>Coming Soon</span>
           </div>
           <div className='warehouse-setup__type-card'>
             <SelectableCard