fix: experiment form UX fixes (#8251)

Author: Zaimwa9

frontend/web/components/PageTitle.tsx

@@ -20,7 +20,7 @@ const PageTitle: FC<PageTitleType> = ({ children, className, cta, title }) => {
             </Row>
           )}
         </div>
-        {!!cta && <div className='float-end ms-lg-2'>{cta}</div>}
+        {!!cta && <div className='float-end'>{cta}</div>}
       </div>
       <hr className='mb-0 mt-3' />
     </div>

frontend/web/components/experiments/EventNameSelect/EventNameSelect.tsx

@@ -1,5 +1,6 @@
-import { FC, useMemo } from 'react'
+import { FC, useMemo, useState } from 'react'
 import CreatableSelect from 'react-select/creatable'
+import { InputActionMeta } from 'react-select'
 import {
   useGetWarehouseConnectionEventsQuery,
   useGetWarehouseConnectionsQuery,
@@ -33,6 +34,22 @@ const EventNameSelect: FC<EventNameSelectProps> = ({ onChange, value }) => {
   )
   const options = useMemo(() => buildEventOptions(data?.events), [data?.events])
   const showWarning = isSuccess && isUnknownEvent(value, data?.events)
+  const [inputValue, setInputValue] = useState('')
+
+  // Keep the typed text on blur (react-select discards it by default) so
+  // clicking outside commits the value instead of clearing it.
+  const handleInputChange = (val: string, meta: InputActionMeta) => {
+    if (meta.action === 'input-change') setInputValue(val)
+  }
+  const handleChange = (option: EventOption | null) => {
+    setInputValue('')
+    onChange(option?.value ?? '')
+  }
+  const handleBlur = () => {
+    if (!inputValue) return
+    onChange(inputValue)
+    setInputValue('')
+  }
 
   return (
     <div className='event-name-select'>
@@ -42,11 +59,14 @@ const EventNameSelect: FC<EventNameSelectProps> = ({ onChange, value }) => {
         classNamePrefix='react-select'
         isClearable
         isLoading={isLoading}
+        inputValue={inputValue}
+        onInputChange={handleInputChange}
+        onBlur={handleBlur}
         maxMenuHeight={200}
         menuPlacement='auto'
         options={options}
         value={value ? { label: value, value } : null}
-        onChange={(option: EventOption | null) => onChange(option?.value ?? '')}
+        onChange={handleChange}
         placeholder='e.g. checkout_completed'
         formatCreateLabel={(input: string) => `Use "${input}"`}
         noOptionsMessage={() => 'Type to add a new event'}

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

@@ -51,16 +51,12 @@ const ExperimentSummaryScorecard: FC<ExperimentSummaryScorecardProps> = ({
             loading={!hasResults}
             value={
               summary?.winnerName ? (
-                <span
-                  className={summary.controlWins ? undefined : 'text-success'}
-                >
-                  <VariantName
-                    fit
-                    colour={summary.winnerColour}
-                    fontSize={24}
-                    name={summary.winnerName}
-                  />
-                </span>
+                <VariantName
+                  fit
+                  colour={summary.winnerColour}
+                  fontSize={24}
+                  name={summary.winnerName}
+                />
               ) : undefined
             }
           />

frontend/web/components/experiments/steps/SetupStep.tsx

@@ -45,7 +45,7 @@ const SetupStep: FC<SetupStepProps> = ({
         search: search || undefined,
         type: 'MULTIVARIATE',
       },
-      { skip: !numericEnvId },
+      { refetchOnMountOrArgChange: true, skip: !numericEnvId },
     )
 
   const multivariateFeatures = featureList?.results ?? []