Browser session detail: go back to browser session list

frontend/src/components/SessionDetail/BrowserSessionDetail.tsx

@@ -74,7 +74,9 @@ const BrowserSessionDetail: React.FC<Props> = ({ session }) => {
           Current
         </Badge>
       )}
-      <SessionHeader>{sessionName}</SessionHeader>
+      <SessionHeader backToRoute={{ type: "browser-session-list" }}>
+        {sessionName}
+      </SessionHeader>
       <SessionDetails title="Session" details={sessionDetails} />
       {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}
     </BlockList>

frontend/src/components/SessionDetail/CompatSessionDetail.tsx

@@ -69,7 +69,13 @@ const CompatSessionDetail: React.FC<Props> = ({ session }) => {
 
   return (
     <BlockList>
-      <SessionHeader>{data.deviceId || data.id}</SessionHeader>
+      <SessionHeader
+        backToRoute={{
+          type: "sessions-overview",
+        }}
+      >
+        {data.deviceId || data.id}
+      </SessionHeader>
       <SessionDetails title="Session" details={sessionDetails} />
       {clientDetails.length > 0 ? (
         <SessionDetails title="Client" details={clientDetails} />

frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx

@@ -92,7 +92,13 @@ const OAuth2SessionDetail: React.FC<Props> = ({ session }) => {
 
   return (
     <BlockList>
-      <SessionHeader>{deviceId || data.id}</SessionHeader>
+      <SessionHeader
+        backToRoute={{
+          type: "sessions-overview",
+        }}
+      >
+        {deviceId || data.id}
+      </SessionHeader>
       <SessionDetails title="Session" details={sessionDetails} />
       <SessionDetails title={clientTitle} details={clientDetails} />
       {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}

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<Props> = ({ backToRoute, children }) => {
+  return (
+    <WithLocation>
+      <SessionHeader backToRoute={backToRoute}>{children}</SessionHeader>
+    </WithLocation>
+  );
+};
+
+const meta = {
+  title: "UI/Session/Session Detail/Header",
+  component: Template,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Template>;
+
+export default meta;
+type Story = StoryObj<typeof Template>;
+
+export const Basic: Story = {
+  args: {
+    backToRoute: { type: "sessions-overview" },
+    children: <>Chrome on iOS</>,
+  },
+};

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("<SessionHeader />", () => {
+  afterEach(cleanup);
+  it("renders a session header", () => {
+    const Component = composeStory(Basic, Meta);
+    const { container } = render(<Component />);
+    expect(container).toMatchSnapshot();
+  });
+});

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 (
     <IconButton type="button" onClick={onClick}>
@@ -33,9 +32,12 @@ const BackButton: React.FC = () => {
   );
 };
 
-const SessionHeader: React.FC<PropsWithChildren> = ({ children }) => (
+const SessionHeader: React.FC<PropsWithChildren<{ backToRoute: Route }>> = ({
+  children,
+  backToRoute,
+}) => (
   <header className={styles.header}>
-    <BackButton />
+    <BackButton backToRoute={backToRoute} />
     <H3>{children}</H3>
   </header>
 );

frontend/src/components/SessionDetail/__snapshots__/SessionHeader.test.tsx.snap

@@ -0,0 +1,34 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<SessionHeader /> > renders a session header 1`] = `
+<div>
+  <header
+    class="_header_92353c"
+  >
+    <button
+      class="_icon-button_9uxnz_17"
+      style="--cpd-icon-button-size: 32px;"
+      type="button"
+    >
+      <svg
+        class="cpd-icon"
+        fill="none"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12.2071 5.29289C12.5976 5.68342 12.5976 6.31658 12.2071 6.70711L7.91421 11H18.5C19.0523 11 19.5 11.4477 19.5 12C19.5 12.5523 19.0523 13 18.5 13H7.91421L12.2071 17.2929C12.5976 17.6834 12.5976 18.3166 12.2071 18.7071C11.8166 19.0976 11.1834 19.0976 10.7929 18.7071L4.79289 12.7071C4.40237 12.3166 4.40237 11.6834 4.79289 11.2929L10.7929 5.29289C11.1834 4.90237 11.8166 4.90237 12.2071 5.29289Z"
+          fill="currentColor"
+        />
+      </svg>
+    </button>
+    <h3
+      class="_font-heading-md-semibold_1jx6b_121"
+    >
+      Chrome on iOS
+    </h3>
+  </header>
+</div>
+`;