Fixes #9057 feat(nimbus): added the new history page link to summary page (#9330)

Because

- there was no way to navigate to the new history page form an
experiment summary page

This commit

- adds a link to the new history page 

**Screenshots**


![image](https://github.com/mozilla/experimenter/assets/79744258/284bf2a4-1743-4690-8256-a51181900718)


![image](https://github.com/mozilla/experimenter/assets/79744258/9d0add88-d7a1-4221-a422-52c9a32fe9fa)

---------

Co-authored-by: yashikakhurana <yashikakhuranayashika@gmail.com>

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}
               />
 
+              <LinkNav
+                route={`/history/${slug}`}
+                testid={`history-page-${slug}`}
+                relativeToRoot
+                useButton
+              >
+                <Timeline className="sidebar-icon" />
+                History
+              </LinkNav>
+
               {experiment.isRollout &&
                 experiment.status !== "COMPLETE" &&
                 editPages.map((page, idx) => (
@@ -236,6 +247,7 @@ export const AppLayoutSidebarLaunched = ({
                   )}
                 </DisabledItem>
               )}
+
               <SidebarActions {...{ experiment, refetch, status, analysis }} />
             </Nav>
           </nav>

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

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}
               />
 
+              <LinkNav
+                route={`/history/${slug}`}
+                testid={`history-page-${slug}`}
+                relativeToRoot
+                useButton
+              >
+                <Timeline className="sidebar-icon" />
+                History
+              </LinkNav>
+
               {hasMissingDetails && (
                 <div className="mx-1 mb-2 d-flex text-muted font-weight-normal">
                   <div className="sidebar-icon"></div>

experimenter/experimenter/nimbus-ui/src/components/AppLayoutWithSidebar/timeline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" viewBox="0 0 640 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M128 72a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm32 97.3c28.3-12.3 48-40.5 48-73.3c0-44.2-35.8-80-80-80S48 51.8 48 96c0 32.8 19.7 61 48 73.3V224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H288v54.7c-28.3 12.3-48 40.5-48 73.3c0 44.2 35.8 80 80 80s80-35.8 80-80c0-32.8-19.7-61-48-73.3V288H608c17.7 0 32-14.3 32-32s-14.3-32-32-32H544V169.3c28.3-12.3 48-40.5 48-73.3c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 32.8 19.7 61 48 73.3V224H160V169.3zM488 96a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM320 392a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>

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 = ({
         <Button
           {...{ title }}
           variant="link"
+          href={relativeToRoot ? to : ""}
           className={classNames(
             textColor,
             "d-flex font-weight-semibold m-0 p-0 b-0 align-items-center",