diff --git a/packages/front-end/components/Experiment/PhaseSelector.tsx b/packages/front-end/components/Experiment/PhaseSelector.tsx index 0b37ecfd5c0..97eb385e4d6 100644 --- a/packages/front-end/components/Experiment/PhaseSelector.tsx +++ b/packages/front-end/components/Experiment/PhaseSelector.tsx @@ -1,5 +1,7 @@ import { date } from "shared/dates"; +import clsx from "clsx"; import { phaseSummary } from "@/services/utils"; +import Tooltip from "@/components/Tooltip/Tooltip"; import SelectField from "../Forms/SelectField"; import { useSnapshot } from "./SnapshotProvider"; @@ -24,7 +26,15 @@ export default function PhaseSelector({ function formatPhase({ value, label }: { value: string; label: string }) { if (value === "edit") { - return
{label}
; + return ( +
+ {label} +
+ ); } const phaseIndex = parseInt(value) || 0; @@ -34,15 +44,38 @@ export default function PhaseSelector({ if (newUi) { return ( <> - {phaseOptions.length > 1 && ( - - {phaseIndex + 1}: + +
+ {phaseIndex + 1}: {phase.name} +
+
{phaseSummary(phase)}
+ + } + tipPosition="right" + className="phase-selector-with-tooltip" + > + <> + {phaseIndex + 1}: + + {date(phase.dateStarted ?? "")} —{" "} + {phase.dateEnded ? date(phase.dateEnded) : "now"} + + +
+
+ {phaseIndex + 1}: + {phase.name} +
+ + {date(phase.dateStarted ?? "")} —{" "} + {phase.dateEnded ? date(phase.dateEnded) : "now"} - )}{" "} - - {date(phase.dateStarted ?? "")} —{" "} - {phase.dateEnded ? date(phase.dateEnded) : "now"} - +
+ {phaseSummary(phase)} +
+
); } @@ -70,11 +103,11 @@ export default function PhaseSelector({ options: phaseOptions, }, { - label: "____", + label: "", value: "", options: [ { - label: "Edit Phases...", + label: "Edit Phases", value: "edit", }, ], @@ -99,7 +132,9 @@ export default function PhaseSelector({ sort={false} label={newUi ? undefined : "Phase"} labelClassName="mr-2" - containerClassName={newUi ? "select-dropdown-underline pr-5" : ""} + containerClassName={ + newUi ? "phase-selector select-dropdown-underline pr-5" : "" + } isSearchable={false} formatOptionLabel={formatPhase} /> diff --git a/packages/front-end/components/Experiment/TabbedPage/StoppedExperimentBanner.tsx b/packages/front-end/components/Experiment/TabbedPage/StoppedExperimentBanner.tsx index abbb9d4b758..d62fb3981ad 100644 --- a/packages/front-end/components/Experiment/TabbedPage/StoppedExperimentBanner.tsx +++ b/packages/front-end/components/Experiment/TabbedPage/StoppedExperimentBanner.tsx @@ -66,8 +66,8 @@ export default function StoppedExperimentBanner({
{releasedVariation && experimentHasLinkedChanges(experiment) && - !hasLiveLinkedChanges && ( -
+ hasLiveLinkedChanges && ( +
{(result === "won" || result === "lost") && winningVariation !== releasedVariation ? ( <> diff --git a/packages/front-end/styles/global.scss b/packages/front-end/styles/global.scss index 707935d0e67..9dcdeee9b81 100644 --- a/packages/front-end/styles/global.scss +++ b/packages/front-end/styles/global.scss @@ -2543,6 +2543,18 @@ html { } } } +.phase-selector { + .gb-select__single-value { + .phase-selector-select-option { + display: none; + } + } + .gb-select__menu-portal { + .phase-selector-with-tooltip { + display: none; + } + } +} #modal { position: relative;