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>
This commit is contained in:
Родитель
b5a0e23ac0
Коммит
4cdee87b78
|
@ -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>
|
||||
|
|
|
@ -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 () => {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
После Ширина: | Высота: | Размер: 794 B |
|
@ -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",
|
||||
|
|
Загрузка…
Ссылка в новой задаче