diff --git a/experimenter/experimenter/nimbus-ui/src/components/AppLayoutSidebarLaunched/index.tsx b/experimenter/experimenter/nimbus-ui/src/components/AppLayoutSidebarLaunched/index.tsx
index 3dcf96912..1a294fe5a 100644
--- a/experimenter/experimenter/nimbus-ui/src/components/AppLayoutSidebarLaunched/index.tsx
+++ b/experimenter/experimenter/nimbus-ui/src/components/AppLayoutSidebarLaunched/index.tsx
@@ -10,6 +10,7 @@ import Nav from "react-bootstrap/Nav";
import Row from "react-bootstrap/Row";
import { ReactComponent as BarChart } from "src/components/AppLayoutSidebarLaunched/bar-chart.svg";
import { ReactComponent as Person } from "src/components/AppLayoutWithSidebar/person.svg";
+import { ReactComponent as Timeline } from "src/components/AppLayoutWithSidebar/timeline.svg";
import { DisabledItem } from "src/components/DisabledItem";
import LinkExternal from "src/components/LinkExternal";
import { LinkNav } from "src/components/LinkNav";
@@ -192,6 +193,16 @@ export const AppLayoutSidebarLaunched = ({
canReview={experiment.canReview}
/>
+
+
+ History
+
+
{experiment.isRollout &&
experiment.status !== "COMPLETE" &&
editPages.map((page, idx) => (
@@ -236,6 +247,7 @@ export const AppLayoutSidebarLaunched = ({
)}
)}
+
diff --git a/experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/index.test.tsx b/experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/index.test.tsx
index d26aff3b8..4b90749c9 100644
--- a/experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/index.test.tsx
+++ b/experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/index.test.tsx
@@ -34,6 +34,9 @@ describe("AppLayoutWithSidebar", () => {
"href",
`${BASE_PATH}/my-special-slug/edit/audience`,
);
+ expect(
+ screen.getByTestId("history-page-my-special-slug"),
+ ).toHaveAttribute("href", `/history/my-special-slug`);
});
it("renders information about missing experiment details", async () => {
diff --git a/experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/index.tsx b/experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/index.tsx
index 88666ce3e..ac9804ffa 100644
--- a/experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/index.tsx
+++ b/experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/index.tsx
@@ -13,6 +13,7 @@ import { ReactComponent as Cog } from "src/components/AppLayoutWithSidebar/cog.s
import "src/components/AppLayoutWithSidebar/index.scss";
import { ReactComponent as Layers } from "src/components/AppLayoutWithSidebar/layers.svg";
import { ReactComponent as Person } from "src/components/AppLayoutWithSidebar/person.svg";
+import { ReactComponent as Timeline } from "src/components/AppLayoutWithSidebar/timeline.svg";
import { LinkNav } from "src/components/LinkNav";
import LinkNavSummary from "src/components/LinkNavSummary";
import SidebarActions from "src/components/SidebarActions";
@@ -95,6 +96,16 @@ export const AppLayoutWithSidebar = ({
canReview={experiment.canReview}
/>
+
+
+ History
+
+
{hasMissingDetails && (
diff --git a/experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/timeline.svg b/experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/timeline.svg
new file mode 100644
index 000000000..241f6c462
--- /dev/null
+++ b/experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/timeline.svg
@@ -0,0 +1 @@
+
diff --git a/experimenter/experimenter/nimbus-ui/src/components/LinkNav/index.tsx b/experimenter/experimenter/nimbus-ui/src/components/LinkNav/index.tsx
index 437084e4e..6978fb128 100644
--- a/experimenter/experimenter/nimbus-ui/src/components/LinkNav/index.tsx
+++ b/experimenter/experimenter/nimbus-ui/src/components/LinkNav/index.tsx
@@ -19,6 +19,7 @@ type LinkNavProps = {
title?: string;
onClick?: () => void;
useButton?: boolean;
+ relativeToRoot?: boolean;
};
export const LinkNav = ({
@@ -31,9 +32,14 @@ export const LinkNav = ({
title,
onClick,
useButton = false,
+ relativeToRoot = false,
}: LinkNavProps) => {
const location = useLocation();
- const to = route ? `${BASE_PATH}/${route}` : BASE_PATH;
+ const to = route
+ ? relativeToRoot
+ ? `${route}`
+ : `${BASE_PATH}/${route}`
+ : BASE_PATH;
const isCurrentPage = location.pathname === to;
// If we supplied a text color, use it. Otherwise use current page colors
@@ -55,6 +61,7 @@ export const LinkNav = ({