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 = ({