From 9710bf24d2c35752285433b6bf39bdd3cd0ff97a Mon Sep 17 00:00:00 2001 From: Kerry Archibald Date: Thu, 21 Sep 2023 12:47:39 +1200 Subject: [PATCH] pass back buttn route to session header, go back to browser list from browser sessions --- .../SessionDetail/BrowserSessionDetail.tsx | 4 +- .../SessionDetail/CompatSessionDetail.tsx | 8 ++- .../SessionDetail/OAuth2SessionDetail.tsx | 8 ++- .../SessionDetail/SessionHeader.stories.tsx | 49 +++++++++++++++++++ .../SessionDetail/SessionHeader.test.tsx | 30 ++++++++++++ .../SessionDetail/SessionHeader.tsx | 14 +++--- .../__snapshots__/SessionHeader.test.tsx.snap | 34 +++++++++++++ 7 files changed, 138 insertions(+), 9 deletions(-) create mode 100644 frontend/src/components/SessionDetail/SessionHeader.stories.tsx create mode 100644 frontend/src/components/SessionDetail/SessionHeader.test.tsx create mode 100644 frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap diff --git a/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx b/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx index 0d9fd1b6c..60af2bd64 100644 --- a/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx +++ b/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx @@ -74,7 +74,9 @@ const BrowserSessionDetail: React.FC = ({ session }) => { Current )} - {sessionName} + + {sessionName} + {!data.finishedAt && } diff --git a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx index 4761b5357..d20fec7f4 100644 --- a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx +++ b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx @@ -69,7 +69,13 @@ const CompatSessionDetail: React.FC = ({ session }) => { return ( - {data.deviceId || data.id} + + {data.deviceId || data.id} + {clientDetails.length > 0 ? ( diff --git a/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx b/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx index 2b925048e..3bd98fa7a 100644 --- a/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx +++ b/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx @@ -92,7 +92,13 @@ const OAuth2SessionDetail: React.FC = ({ session }) => { return ( - {deviceId || data.id} + + {deviceId || data.id} + {!data.finishedAt && } diff --git a/frontend/src/components/SessionDetail/SessionHeader.stories.tsx b/frontend/src/components/SessionDetail/SessionHeader.stories.tsx new file mode 100644 index 000000000..b8db01d4c --- /dev/null +++ b/frontend/src/components/SessionDetail/SessionHeader.stories.tsx @@ -0,0 +1,49 @@ +// Copyright 2023 The Matrix.org Foundation C.I.C. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import type { Meta, StoryObj } from "@storybook/react"; +import { PropsWithChildren } from "react"; + +import { Route } from "../../routing/routes"; +import { WithLocation } from "../../test-utils/WithLocation"; + +import SessionHeader from "./SessionHeader"; + +type Props = PropsWithChildren<{ + backToRoute: Route; +}>; + +const Template: React.FC = ({ backToRoute, children }) => { + return ( + + {children} + + ); +}; + +const meta = { + title: "UI/Session/Session Detail/Header", + component: Template, + tags: ["autodocs"], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Basic: Story = { + args: { + backToRoute: { type: "sessions-overview" }, + children: <>Chrome on iOS, + }, +}; diff --git a/frontend/src/components/SessionDetail/SessionHeader.test.tsx b/frontend/src/components/SessionDetail/SessionHeader.test.tsx new file mode 100644 index 000000000..f202a2565 --- /dev/null +++ b/frontend/src/components/SessionDetail/SessionHeader.test.tsx @@ -0,0 +1,30 @@ +// Copyright 2023 The Matrix.org Foundation C.I.C. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +// @vitest-environment happy-dom + +import { composeStory } from "@storybook/react"; +import { render, cleanup } from "@testing-library/react"; +import { describe, it, expect, afterEach } from "vitest"; + +import Meta, { Basic } from "./SessionHeader.stories"; + +describe("", () => { + afterEach(cleanup); + it("renders a session header", () => { + const Component = composeStory(Basic, Meta); + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/frontend/src/components/SessionDetail/SessionHeader.tsx b/frontend/src/components/SessionDetail/SessionHeader.tsx index 20e760094..b65542a5a 100644 --- a/frontend/src/components/SessionDetail/SessionHeader.tsx +++ b/frontend/src/components/SessionDetail/SessionHeader.tsx @@ -17,14 +17,13 @@ import { H3, IconButton } from "@vector-im/compound-web"; import { PropsWithChildren } from "react"; import { useNavigationLink } from "../../routing"; +import { Route } from "../../routing/routes"; import LoadingSpinner from "../LoadingSpinner"; import styles from "./SessionHeader.module.css"; -const BackButton: React.FC = () => { - const { onClick, pending } = useNavigationLink({ - type: "sessions-overview", - }); +const BackButton: React.FC<{ backToRoute: Route }> = ({ backToRoute }) => { + const { onClick, pending } = useNavigationLink(backToRoute); return ( @@ -33,9 +32,12 @@ const BackButton: React.FC = () => { ); }; -const SessionHeader: React.FC = ({ children }) => ( +const SessionHeader: React.FC> = ({ + children, + backToRoute, +}) => (
- +

{children}

); diff --git a/frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap new file mode 100644 index 000000000..808d8bfb5 --- /dev/null +++ b/frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap @@ -0,0 +1,34 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[` > renders a session header 1`] = ` +
+
+ +

+ Chrome on iOS +

+
+
+`;