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;