+const LoadingSpinner: React.FC<{ inline?: boolean; className?: string }> = ({
+ inline,
+ className,
+}) => (
+
`;
-exports[`
> renders an active session 1`] = `
-
-
-
-
- session-id
-
-
- Signed in
-
-
-
-
-`;
+exports[`
> renders an active session 1`] = `null`;
exports[`
> renders ip address 1`] = `
> renders ip address 1`] = `
className="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 _sessionName_634806"
title="session-id"
>
- session-id
+
+ session-id
+
> uses client name when truthy 1`] = `
className="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 _sessionName_634806"
title="session-id"
>
- session-id
+
+ session-id
+
> uses session name when truthy 1`] = `
className="_typography_yh5dq_162 _font-body-md-semibold_yh5dq_64 _sessionName_634806"
title="session-id"
>
- test session name
+
+ test session name
+
= ({ session }) => {
{t("frontend.browser_session_details.current_badge")}
)}
-
- {sessionName}
-
+ {sessionName}
", () => {
const { container } = render(
-
+
-
+
,
);
@@ -70,9 +70,9 @@ describe("", () => {
const { container } = render(
-
+
-
+
,
);
@@ -90,9 +90,9 @@ describe("", () => {
const { getByText, queryByText } = render(
-
+
-
+
,
);
diff --git a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx
index 8b574b49..0928153e 100644
--- a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx
+++ b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx
@@ -116,13 +116,7 @@ const CompatSessionDetail: React.FC = ({ session }) => {
return (
-
- {data.deviceId || data.id}
-
+ {data.deviceId || data.id}
", () => {
const { container } = render(
-
+
-
+
,
);
@@ -73,9 +73,9 @@ describe("", () => {
const { getByText, queryByText } = render(
-
+
-
+
,
);
diff --git a/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx b/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx
index 22564940..e440f272 100644
--- a/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx
+++ b/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx
@@ -17,10 +17,10 @@ import { useTranslation } from "react-i18next";
import { useMutation } from "urql";
import { FragmentType, graphql, useFragment } from "../../gql";
-import { Link } from "../../routing";
import { getDeviceIdFromScope } from "../../utils/deviceIdFromScope";
import BlockList from "../BlockList/BlockList";
import DateTime from "../DateTime";
+import { Link } from "../Link";
import { END_SESSION_MUTATION } from "../OAuth2Session";
import ClientAvatar from "../Session/ClientAvatar";
import EndSessionButton from "../Session/EndSessionButton";
@@ -117,7 +117,7 @@ const OAuth2SessionDetail: React.FC = ({ session }) => {
];
const clientTitle = (
-
+
{t("frontend.oauth2_session_detail.client_title")}
);
@@ -142,7 +142,11 @@ const OAuth2SessionDetail: React.FC = ({ session }) => {
{
label: t("frontend.session.uri_label"),
value: (
-
+
{data.client.clientUri}
),
@@ -151,13 +155,7 @@ const OAuth2SessionDetail: React.FC = ({ session }) => {
return (
-
- {deviceId || data.id}
-
+ {deviceId || data.id}
{t("frontend.session_detail.alert.text")}
-
- {t("frontend.session_detail.alert.button")}
-
+ {t("frontend.session_detail.alert.button")}
);
}
diff --git a/frontend/src/components/SessionDetail/SessionHeader.module.css b/frontend/src/components/SessionDetail/SessionHeader.module.css
index e9763e99..806aa192 100644
--- a/frontend/src/components/SessionDetail/SessionHeader.module.css
+++ b/frontend/src/components/SessionDetail/SessionHeader.module.css
@@ -19,4 +19,48 @@
justify-content: flex-start;
gap: var(--cpd-space-2x);
align-items: center;
-}
\ No newline at end of file
+}
+
+.back-button {
+ display: block;
+ inline-size: var(--cpd-space-8x);
+ block-size: var(--cpd-space-8x);
+
+ /* the icon is 0.75 the size of the button, so add padding to put it in the middle */
+ padding: var(--cpd-space-1x);
+ aspect-ratio: 1 / 1;
+ color: var(--cpd-color-icon-tertiary);
+ border: 0;
+ appearance: none;
+ cursor: pointer;
+ border-radius: 50%;
+ position: relative;
+ background: transparent;
+ line-height: 0px;
+}
+
+.back-button svg {
+ inline-size: var(--cpd-space-6x);
+ block-size: var(--cpd-space-6x);
+}
+
+.back-button[aria-disabled="true"] {
+ color: var(--cpd-color-icon-disabled);
+ cursor: not-allowed;
+}
+
+/**
+ * Hover state
+ */
+
+@media (hover) {
+ .back-button:not([aria-disabled="true"]):hover {
+ color: var(--cpd-color-icon-primary);
+ background: var(--cpd-color-bg-subtle-primary);
+ }
+}
+
+.back-button:not([aria-disabled="true"]):active {
+ color: var(--cpd-color-icon-primary);
+ background: var(--cpd-color-bg-subtle-primary);
+}
diff --git a/frontend/src/components/SessionDetail/SessionHeader.stories.tsx b/frontend/src/components/SessionDetail/SessionHeader.stories.tsx
index b8db01d4..2411849c 100644
--- a/frontend/src/components/SessionDetail/SessionHeader.stories.tsx
+++ b/frontend/src/components/SessionDetail/SessionHeader.stories.tsx
@@ -15,20 +15,17 @@
import type { Meta, StoryObj } from "@storybook/react";
import { PropsWithChildren } from "react";
-import { Route } from "../../routing/routes";
-import { WithLocation } from "../../test-utils/WithLocation";
+import { DummyRouter } from "../../test-utils/router";
import SessionHeader from "./SessionHeader";
-type Props = PropsWithChildren<{
- backToRoute: Route;
-}>;
+type Props = PropsWithChildren;
-const Template: React.FC = ({ backToRoute, children }) => {
+const Template: React.FC = ({ children }) => {
return (
-
- {children}
-
+
+ {children}
+
);
};
@@ -43,7 +40,6 @@ type Story = StoryObj;
export const Basic: Story = {
args: {
- backToRoute: { type: "sessions-overview" },
children: <>Chrome on iOS>,
},
};
diff --git a/frontend/src/components/SessionDetail/SessionHeader.tsx b/frontend/src/components/SessionDetail/SessionHeader.tsx
index c4f48f7a..224b933e 100644
--- a/frontend/src/components/SessionDetail/SessionHeader.tsx
+++ b/frontend/src/components/SessionDetail/SessionHeader.tsx
@@ -12,34 +12,24 @@
// See the License for the specific language governing permissions and
// limitations under the License.
+import { Link } from "@tanstack/react-router";
import IconArrowLeft from "@vector-im/compound-design-tokens/icons/arrow-left.svg?react";
-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 { H3 } from "@vector-im/compound-web";
import styles from "./SessionHeader.module.css";
-const BackButton: React.FC<{ backToRoute: Route }> = ({ backToRoute }) => {
- const { onClick, pending } = useNavigationLink(backToRoute);
-
+const SessionHeader: React.FC> = ({
+ children,
+ ...rest
+}) => {
return (
-
- {pending ? : }
-
+
);
};
-const SessionHeader: React.FC> = ({
- children,
- backToRoute,
-}) => (
-
-);
-
export default SessionHeader;
diff --git a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
index 9acc0a53..0c6f404d 100644
--- a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
+++ b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
@@ -1,6 +1,8 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[` > renders a compatability session details 1`] = `
+exports[` > renders a compatability session details 1`] = ``;
+
+exports[` > renders a compatability session without an ssoLogin 1`] = `
> renders a compatability session details 1`] = `
-
`;
-
-exports[`