From b8d5baca180228caace69c340c924f29ca4fff67 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 4 Mar 2024 12:39:11 +0000 Subject: [PATCH 01/11] Allow passing className to LastActive component --- frontend/src/components/Session/LastActive.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Session/LastActive.tsx b/frontend/src/components/Session/LastActive.tsx index a841ca8cf..b4a7d3010 100644 --- a/frontend/src/components/Session/LastActive.tsx +++ b/frontend/src/components/Session/LastActive.tsx @@ -12,6 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. +import cx from "classnames"; import { differenceInSeconds, parseISO } from "date-fns"; import { useTranslation } from "react-i18next"; @@ -27,7 +28,8 @@ const INACTIVE_MIN_AGE = 60 * 60 * 24 * 90; const LastActive: React.FC<{ lastActive: Date | string; now?: Date | string; -}> = ({ lastActive: lastActiveProps, now: nowProps }) => { + className?: string; +}> = ({ lastActive: lastActiveProps, now: nowProps, className }) => { const { t } = useTranslation(); const lastActive = @@ -44,21 +46,21 @@ const LastActive: React.FC<{ const formattedDate = formatDate(lastActive); if (differenceInSeconds(now, lastActive) <= ACTIVE_NOW_MAX_AGE) { return ( - + {t("frontend.last_active.active_now")} ); } if (differenceInSeconds(now, lastActive) > INACTIVE_MIN_AGE) { return ( - + {t("frontend.last_active.inactive_90_days")} ); } const relativeDate = formatReadableDate(lastActive, now); return ( - + {t("frontend.last_active.active_date", { relativeDate })} ); From e472f631bf7e6b69596fdd0c9ac790add2d2f364 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 4 Mar 2024 13:19:03 +0000 Subject: [PATCH 02/11] Update session details styles to closer match latest Figma --- frontend/locales/en.json | 21 ++- .../src/components/Block/Block.module.css | 12 +- frontend/src/components/Block/Block.tsx | 11 +- .../components/BlockList/BlockList.module.css | 4 +- .../SessionDetail/BrowserSessionDetail.tsx | 60 ++----- .../SessionDetail/CompatSessionDetail.tsx | 39 +---- .../SessionDetail/OAuth2SessionDetail.tsx | 58 ++---- .../SessionDetail/SessionDetails.module.css | 59 +++++-- .../SessionDetail/SessionDetails.tsx | 165 +++++++++++++++--- .../SessionDetail/SessionHeader.module.css | 12 +- .../SessionDetail/SessionHeader.tsx | 4 +- 11 files changed, 257 insertions(+), 188 deletions(-) diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 14203caa7..929412690 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -60,7 +60,7 @@ "view_all_button": "View all" }, "compat_session_detail": { - "client_details_title": "Client", + "client_details_title": "Client info", "name": "Name", "session_details_title": "Session" }, @@ -92,7 +92,7 @@ "not_found_alert_title": "Not found.", "not_logged_in_alert": "You're not logged in.", "oauth2_client_detail": { - "details_title": "Client", + "details_title": "Client info", "id": "Client ID", "name": "Name", "policy": "Policy", @@ -100,7 +100,7 @@ }, "oauth2_session_detail": { "client_details_name": "Name", - "client_title": "Client", + "client_title": "Client info", "session_details_title": "Session" }, "pagination_controls": { @@ -121,9 +121,11 @@ }, "session": { "current": "Current", + "title": "Device details", "device_id_label": "Device ID", "finished_label": "Finished", - "id_label": "ID", + "client_id_label": "Client ID", + "id_label": "Session ID", "ip_label": "IP Address", "last_active_label": "Last Active", "last_auth_label": "Last Authentication", @@ -186,5 +188,16 @@ }, "resend_code": "Resend code" } + }, + "mas": { + "scope": { + "edit_profile": "Edit your profile and contact details", + "manage_sessions": "Manage your devices and sessions", + "mas_admin": "Administer any user on the matrix-authentication-service", + "send_messages": "Send new messages on your behalf", + "synapse_admin": "Administer the Synapse homeserver", + "view_messages": "View your existing messages and data", + "view_profile": "See your profile info and contact details" + } } } diff --git a/frontend/src/components/Block/Block.module.css b/frontend/src/components/Block/Block.module.css index 40f1e9e51..4ce50d83e 100644 --- a/frontend/src/components/Block/Block.module.css +++ b/frontend/src/components/Block/Block.module.css @@ -17,9 +17,17 @@ width: 100%; color: var(--cpd-color-text-primary); padding-bottom: var(--cpd-space-5x); - border-bottom: 1px solid var(--cpd-color-border-interactive-secondary); &:last-child { border-bottom: none; } -} \ No newline at end of file +} + +.title { + padding-bottom: var(--cpd-space-2x); + border-bottom: var(--cpd-border-width-2) solid var(--cpd-color-gray-400); + + /* Workaround compound design tokens heading style being broken */ + font-weight: var(--cpd-font-weight-semibold) !important; + font-size: var(--cpd-font-size-heading-sm) !important; +} diff --git a/frontend/src/components/Block/Block.tsx b/frontend/src/components/Block/Block.tsx index bc660248d..14782467f 100644 --- a/frontend/src/components/Block/Block.tsx +++ b/frontend/src/components/Block/Block.tsx @@ -12,18 +12,27 @@ // See the License for the specific language governing permissions and // limitations under the License. +import { Heading } from "@vector-im/compound-web"; import cx from "classnames"; +import { ReactNode } from "react"; import styles from "./Block.module.css"; type Props = React.PropsWithChildren<{ + title?: ReactNode; className?: string; highlight?: boolean; }>; -const Block: React.FC = ({ children, className, highlight }) => { +const Block: React.FC = ({ children, className, highlight, title }) => { return (
+ {title && ( + + {title} + + )} + {children}
); diff --git a/frontend/src/components/BlockList/BlockList.module.css b/frontend/src/components/BlockList/BlockList.module.css index 8e0f533d0..e024ad39d 100644 --- a/frontend/src/components/BlockList/BlockList.module.css +++ b/frontend/src/components/BlockList/BlockList.module.css @@ -17,5 +17,5 @@ display: flex; flex-direction: column; align-content: flex-start; - gap: var(--cpd-space-5x); -} \ No newline at end of file + gap: var(--cpd-space-8x); +} diff --git a/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx b/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx index 4be29d96e..b309c128e 100644 --- a/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx +++ b/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx @@ -21,7 +21,6 @@ import BlockList from "../BlockList/BlockList"; import { useEndBrowserSession } from "../BrowserSession"; import DateTime from "../DateTime"; import EndSessionButton from "../Session/EndSessionButton"; -import LastActive from "../Session/LastActive"; import styles from "./BrowserSessionDetail.module.css"; import SessionDetails from "./SessionDetails"; @@ -81,54 +80,7 @@ const BrowserSessionDetail: React.FC = ({ session, isCurrent }) => { ] : []; - const lastActiveIp = data.lastActiveIp - ? [ - { - label: t("frontend.session.ip_label"), - value: {data.lastActiveIp}, - }, - ] - : []; - - const lastActiveAt = data.lastActiveAt - ? [ - { - label: t("frontend.session.last_active_label"), - value: , - }, - ] - : []; - - const lastAuthentication = data.lastAuthentication - ? [ - { - label: t("frontend.session.last_auth_label"), - value: ( - - ), - }, - ] - : []; - - const sessionDetails = [ - { label: t("frontend.session.id_label"), value: {data.id} }, - { - label: t("frontend.session.user_id_label"), - value: {data.user.id}, - }, - { - label: t("frontend.session.username_label"), - value: {data.user.username}, - }, - { - label: t("frontend.session.signed_in_label"), - value: , - }, - ...finishedAt, - ...lastActiveAt, - ...lastActiveIp, - ...lastAuthentication, - ]; + const sessionDetails = [...finishedAt]; return ( @@ -139,7 +91,15 @@ const BrowserSessionDetail: React.FC = ({ session, isCurrent }) => { )} {sessionName} {!data.finishedAt && } diff --git a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx index 7b5d3a4f6..eae640616 100644 --- a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx +++ b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx @@ -22,7 +22,6 @@ import { END_SESSION_MUTATION, simplifyUrl } from "../CompatSession"; import DateTime from "../DateTime"; import ExternalLink from "../ExternalLink/ExternalLink"; import EndSessionButton from "../Session/EndSessionButton"; -import LastActive from "../Session/LastActive"; import SessionDetails from "./SessionDetails"; import SessionHeader from "./SessionHeader"; @@ -69,38 +68,7 @@ const CompatSessionDetail: React.FC = ({ session }) => { ] : []; - const lastActiveIp = data.lastActiveIp - ? [ - { - label: t("frontend.session.ip_label"), - value: {data.lastActiveIp}, - }, - ] - : []; - - const lastActiveAt = data.lastActiveAt - ? [ - { - label: t("frontend.session.last_active_label"), - value: , - }, - ] - : []; - - const sessionDetails = [ - { label: t("frontend.session.id_label"), value: {data.id} }, - { - label: t("frontend.session.device_id_label"), - value: {data.deviceId}, - }, - { - label: t("frontend.session.signed_in_label"), - value: , - }, - ...finishedAt, - ...lastActiveAt, - ...lastActiveIp, - ]; + const sessionDetails = [...finishedAt]; const clientDetails: { label: string; value: string | JSX.Element }[] = []; @@ -124,6 +92,11 @@ const CompatSessionDetail: React.FC = ({ session }) => { {data.deviceId || data.id} {clientDetails.length > 0 ? ( diff --git a/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx b/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx index e440f2727..d020d6c01 100644 --- a/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx +++ b/frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx @@ -24,9 +24,8 @@ import { Link } from "../Link"; import { END_SESSION_MUTATION } from "../OAuth2Session"; import ClientAvatar from "../Session/ClientAvatar"; import EndSessionButton from "../Session/EndSessionButton"; -import LastActive from "../Session/LastActive"; -import SessionDetails from "./SessionDetails"; +import SessionDetails, { Detail } from "./SessionDetails"; import SessionHeader from "./SessionHeader"; export const FRAGMENT = graphql(/* GraphQL */ ` @@ -62,8 +61,6 @@ const OAuth2SessionDetail: React.FC = ({ session }) => { const deviceId = getDeviceIdFromScope(data.scope); - const scopes = data.scope.split(" "); - const finishedAt = data.finishedAt ? [ { @@ -73,48 +70,7 @@ const OAuth2SessionDetail: React.FC = ({ session }) => { ] : []; - const lastActiveIp = data.lastActiveIp - ? [ - { - label: t("frontend.session.ip_label"), - value: {data.lastActiveIp}, - }, - ] - : []; - - const lastActiveAt = data.lastActiveAt - ? [ - { - label: t("frontend.session.last_active_label"), - value: , - }, - ] - : []; - - const sessionDetails = [ - { label: t("frontend.session.id_label"), value: {data.id} }, - { - label: t("frontend.session.device_id_label"), - value: {deviceId}, - }, - { - label: t("frontend.session.signed_in_label"), - value: , - }, - ...finishedAt, - ...lastActiveAt, - ...lastActiveIp, - { - label: t("frontend.session.scopes_label"), - value: ( - - {scopes.map((scope) => ( - {scope} - ))} - - ), - }, - ]; + const sessionDetails = [...finishedAt]; const clientTitle = ( @@ -136,7 +92,7 @@ const OAuth2SessionDetail: React.FC = ({ session }) => { ), }, { - label: t("frontend.session.id_label"), + label: t("frontend.session.client_id_label"), value: {data.client.clientId}, }, { @@ -157,7 +113,13 @@ const OAuth2SessionDetail: React.FC = ({ session }) => { {deviceId || data.id} diff --git a/frontend/src/components/SessionDetail/SessionDetails.module.css b/frontend/src/components/SessionDetail/SessionDetails.module.css index 0da69e9c7..25d608975 100644 --- a/frontend/src/components/SessionDetail/SessionDetails.module.css +++ b/frontend/src/components/SessionDetail/SessionDetails.module.css @@ -13,28 +13,51 @@ * limitations under the License. */ -.list { - display: flex; - flex-direction: column; - margin-top: var(--cpd-space-1x); - gap: var(--cpd-space-1x); +.wrapper { + display: flex; + flex-wrap: wrap; + gap: 16px; + margin-bottom: 16px; + margin-top: 32px; } -.detail-row { - display: flex; - flex-direction: row; - gap: var(--cpd-space-4x); +.wrapper h5 { + color: var(--cpd-color-text-secondary); } -.detail-label { - flex: 0 0 20%; - color: var(--cpd-color-text-secondary); +.wrapper .datum { + width: max-content; } -.detail-value { - overflow-wrap: anywhere; - display: flex; - flex-direction: row; - align-items: center; - gap: var(--cpd-space-1x); +.datum { + flex-grow: 1; + max-width: 100%; +} + +.datum-value { + font-size: var(--cpd-font-size-body-md); + text-overflow: ellipsis; + overflow: hidden; +} + +.scope-list { + display: flex; + flex-direction: column; + gap: var(--cpd-space-scale); + border-radius: var(--cpd-space-5x); + overflow: hidden; +} + +.scope { + background: var(--cpd-color-bg-subtle-secondary); + padding: 12px 20px 12px 20px; + display: flex; + align-items: center; + gap: 12px; +} + +.scope svg { + inline-size: var(--cpd-space-6x); + block-size: var(--cpd-space-6x); + color: var(--cpd-color-icon-tertiary); } diff --git a/frontend/src/components/SessionDetail/SessionDetails.tsx b/frontend/src/components/SessionDetail/SessionDetails.tsx index 0299d3918..89770fff3 100644 --- a/frontend/src/components/SessionDetail/SessionDetails.tsx +++ b/frontend/src/components/SessionDetail/SessionDetails.tsx @@ -1,4 +1,4 @@ -// Copyright 2022 The Matrix.org Foundation C.I.C. +// Copyright 2022-2024 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. @@ -12,39 +12,160 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { H6, Body } from "@vector-im/compound-web"; +import IconChat from "@vector-im/compound-design-tokens/icons/chat.svg?react"; +import IconCheckCircle from "@vector-im/compound-design-tokens/icons/check-circle.svg?react"; +import IconComputer from "@vector-im/compound-design-tokens/icons/computer.svg?react"; +import IconError from "@vector-im/compound-design-tokens/icons/error.svg?react"; +import IconInfo from "@vector-im/compound-design-tokens/icons/info.svg?react"; +import IconUserProfile from "@vector-im/compound-design-tokens/icons/user-profile.svg?react"; +import { Text } from "@vector-im/compound-web"; import { ReactNode } from "react"; +import { useTranslation } from "react-i18next"; import Block from "../Block/Block"; +import DateTime from "../DateTime"; +import LastActive from "../Session/LastActive"; import styles from "./SessionDetails.module.css"; -type Detail = { label: string; value: string | ReactNode }; +export type Detail = { label: string; value: ReactNode }; type Props = { title: string | ReactNode; - details: Detail[]; + lastActive?: Date; + signedIn?: Date; + deviceId?: string; + sessionId?: string; + ipAddress?: string; + scopes?: string[]; + details?: Detail[]; }; -const DetailRow: React.FC = ({ label, value }) => ( -
  • - - {label} - - - {value} - -
    • -); - -const SessionDetails: React.FC = ({ title, details }) => { +const Scope: React.FC<{ scope: string }> = ({ scope }) => { + const { t } = useTranslation(); + // Filter out "urn:matrix:org.matrix.msc2967.client:device:" + if (scope.startsWith("urn:matrix:org.matrix.msc2967.client:device:")) { + return null; + } + + // Needs to be manually kept in sync with /templates/components/scope.html + const scopeMap: Record = { + openid: [[IconUserProfile, t("mas.scope.view_profile")]], + "urn:mas:graphql:*": [ + [IconInfo, t("mas.scope.edit_profile")], + [IconComputer, t("mas.scope.manage_sessions")], + ], + "urn:matrix:org.matrix.msc2967.client:api:*": [ + [IconChat, t("mas.scope.view_messages")], + [IconCheckCircle, t("mas.scope.send_messages")], + ], + "urn:synapse:admin:*": [[IconError, t("mas.scope.synapse_admin")]], + "urn:mas:admin": [[IconError, t("mas.scope.mas_admin")]], + }; + + const mappedScopes: [typeof IconInfo, string][] = scopeMap[scope] ?? [ + [IconInfo, scope], + ]; + + return ( + <> + {mappedScopes.map(([Icon, text], i) => ( +
  • + + + {text} + +
    • + ))} + + ); +}; + +const Datum: React.FC<{ label: string; value: ReactNode }> = ({ + label, + value, +}) => { return ( - -
    {title}
    -
      - {details.map(({ label, value }) => ( - +
      + + {label} + + {typeof value === "string" ? ( + + {value} + + ) : ( + value + )} +
      + ); +}; + +const SessionDetails: React.FC = ({ + title, + lastActive, + signedIn, + deviceId, + sessionId, + ipAddress, + details, + scopes, +}) => { + const { t } = useTranslation(); + + return ( + +
      + {lastActive && ( + + } + /> + )} + {signedIn && ( + + } + /> + )} + {deviceId && ( + + )} + {sessionId && ( + + )} + {ipAddress && ( + {ipAddress}} + /> + )} + {details?.map(({ label, value }) => ( + ))} -
    + + + {scopes?.length && ( + + {scopes.map((scope) => ( + + ))} + + } + /> + )}     ); }; diff --git a/frontend/src/components/SessionDetail/SessionHeader.module.css b/frontend/src/components/SessionDetail/SessionHeader.module.css index 806aa192e..1c19e86a8 100644 --- a/frontend/src/components/SessionDetail/SessionHeader.module.css +++ b/frontend/src/components/SessionDetail/SessionHeader.module.css @@ -17,14 +17,14 @@ display: flex; flex-direction: row; justify-content: flex-start; - gap: var(--cpd-space-2x); + gap: var(--cpd-space-4x); align-items: center; } .back-button { display: block; - inline-size: var(--cpd-space-8x); - block-size: var(--cpd-space-8x); + inline-size: var(--cpd-space-7x); + block-size: var(--cpd-space-7x); /* the icon is 0.75 the size of the button, so add padding to put it in the middle */ padding: var(--cpd-space-1x); @@ -35,13 +35,13 @@ cursor: pointer; border-radius: 50%; position: relative; - background: transparent; + background-color: var(--cpd-color-bg-subtle-secondary); line-height: 0px; } .back-button svg { - inline-size: var(--cpd-space-6x); - block-size: var(--cpd-space-6x); + inline-size: var(--cpd-space-5x); + block-size: var(--cpd-space-5x); } .back-button[aria-disabled="true"] { diff --git a/frontend/src/components/SessionDetail/SessionHeader.tsx b/frontend/src/components/SessionDetail/SessionHeader.tsx index 224b933e7..91e41fc30 100644 --- a/frontend/src/components/SessionDetail/SessionHeader.tsx +++ b/frontend/src/components/SessionDetail/SessionHeader.tsx @@ -13,7 +13,7 @@ // limitations under the License. import { Link } from "@tanstack/react-router"; -import IconArrowLeft from "@vector-im/compound-design-tokens/icons/arrow-left.svg?react"; +import IconChevronLeft from "@vector-im/compound-design-tokens/icons/chevron-left.svg?react"; import { H3 } from "@vector-im/compound-web"; import styles from "./SessionHeader.module.css"; @@ -25,7 +25,7 @@ const SessionHeader: React.FC> = ({ return (
    - +

    {children}

    From 7f6d22b6d496c484e830fd7a94f456e398309129 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 4 Mar 2024 13:27:09 +0000 Subject: [PATCH 03/11] Remove session ID & client ID from session details --- frontend/src/components/Client/OAuth2ClientDetail.tsx | 4 ---- .../src/components/SessionDetail/BrowserSessionDetail.tsx | 1 - .../src/components/SessionDetail/CompatSessionDetail.tsx | 1 - .../src/components/SessionDetail/OAuth2SessionDetail.tsx | 3 +-- frontend/src/components/SessionDetail/SessionDetails.tsx | 5 ----- 5 files changed, 1 insertion(+), 13 deletions(-) diff --git a/frontend/src/components/Client/OAuth2ClientDetail.tsx b/frontend/src/components/Client/OAuth2ClientDetail.tsx index f25a0e946..f49f3435c 100644 --- a/frontend/src/components/Client/OAuth2ClientDetail.tsx +++ b/frontend/src/components/Client/OAuth2ClientDetail.tsx @@ -57,10 +57,6 @@ const OAuth2ClientDetail: React.FC = ({ client }) => { const details = [ { label: t("frontend.oauth2_client_detail.name"), value: data.clientName }, - { - label: t("frontend.oauth2_client_detail.id"), - value: {data.clientId}, - }, { label: t("frontend.oauth2_client_detail.terms"), value: data.tosUri && , diff --git a/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx b/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx index b309c128e..aec6dcb03 100644 --- a/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx +++ b/frontend/src/components/SessionDetail/BrowserSessionDetail.tsx @@ -98,7 +98,6 @@ const BrowserSessionDetail: React.FC = ({ session, isCurrent }) => { ? parseISO(data.lastAuthentication.createdAt) : undefined } - sessionId={data.id} ipAddress={data.lastActiveIp ?? undefined} details={sessionDetails} /> diff --git a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx index eae640616..93718585e 100644 --- a/frontend/src/components/SessionDetail/CompatSessionDetail.tsx +++ b/frontend/src/components/SessionDetail/CompatSessionDetail.tsx @@ -92,7 +92,6 @@ const CompatSessionDetail: React.FC = ({ session }) => { {data.deviceId || data.id} = ({ session }) => { lastActive={data.lastActiveAt ? parseISO(data.lastActiveAt) : undefined} signedIn={parseISO(data.createdAt)} deviceId={deviceId} - sessionId={data.id} ipAddress={data.lastActiveIp ?? undefined} scopes={data.scope.split(" ")} details={sessionDetails} diff --git a/frontend/src/components/SessionDetail/SessionDetails.tsx b/frontend/src/components/SessionDetail/SessionDetails.tsx index 89770fff3..09928e80b 100644 --- a/frontend/src/components/SessionDetail/SessionDetails.tsx +++ b/frontend/src/components/SessionDetail/SessionDetails.tsx @@ -34,7 +34,6 @@ type Props = { lastActive?: Date; signedIn?: Date; deviceId?: string; - sessionId?: string; ipAddress?: string; scopes?: string[]; details?: Detail[]; @@ -105,7 +104,6 @@ const SessionDetails: React.FC = ({ lastActive, signedIn, deviceId, - sessionId, ipAddress, details, scopes, @@ -140,9 +138,6 @@ const SessionDetails: React.FC = ({ value={deviceId} /> )} - {sessionId && ( - - )} {ipAddress && ( Date: Mon, 4 Mar 2024 13:31:45 +0000 Subject: [PATCH 04/11] i18n --- frontend/locales/en.json | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 929412690..aad058c02 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -50,8 +50,7 @@ } }, "browser_session_details": { - "current_badge": "Current", - "session_details_title": "Session" + "current_badge": "Current" }, "browser_sessions_overview": { "body:one": "{{count}} active session", @@ -93,15 +92,13 @@ "not_logged_in_alert": "You're not logged in.", "oauth2_client_detail": { "details_title": "Client info", - "id": "Client ID", "name": "Name", "policy": "Policy", "terms": "Terms of service" }, "oauth2_session_detail": { "client_details_name": "Name", - "client_title": "Client info", - "session_details_title": "Session" + "client_title": "Client info" }, "pagination_controls": { "total": "Total: {{totalCount}}" @@ -120,23 +117,19 @@ } }, "session": { + "client_id_label": "Client ID", "current": "Current", - "title": "Device details", "device_id_label": "Device ID", "finished_label": "Finished", - "client_id_label": "Client ID", - "id_label": "Session ID", "ip_label": "IP Address", "last_active_label": "Last Active", - "last_auth_label": "Last Authentication", "name_for_platform": "{{name}} for {{platform}}", "scopes_label": "Scopes", "signed_in_label": "Signed in", + "title": "Device details", "unknown_browser": "Unknown browser", "unknown_device": "Unknown device", - "uri_label": "Uri", - "user_id_label": "User ID", - "username_label": "User name" + "uri_label": "Uri" }, "session_detail": { "alert": { From 57d4404615d9067053e5a22fff72100bd0d6dca4 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 4 Mar 2024 13:32:30 +0000 Subject: [PATCH 05/11] Update snapshots --- .../OAuth2ClientDetail.test.tsx.snap | 108 ++- .../CompatSessionDetail.test.tsx.snap | 544 ++++++-------- .../OAuth2SessionDetail.test.tsx.snap | 676 +++++++++--------- .../__snapshots__/SessionHeader.test.tsx.snap | 2 +- 4 files changed, 626 insertions(+), 704 deletions(-) diff --git a/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap b/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap index ae825aed6..11ca3ecb1 100644 --- a/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap +++ b/frontend/src/components/Client/__snapshots__/OAuth2ClientDetail.test.tsx.snap @@ -17,89 +17,65 @@ exports[` > renders client details 1`] = `
    -
    - Client -
    - + client.org/policy + +
    + diff --git a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap index d6ad13fee..38d8d7340 100644 --- a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap +++ b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap @@ -21,7 +21,7 @@ exports[` > renders a compatability session details 1`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -34,148 +34,118 @@ exports[` > renders a compatability session details 1`] = `
    -
    Session -
    -
      +
      -
    • -

      - ID -

      -

      - - session-id - -

      -
      • -
    • + + Inactive for 90+ days + +
      • +
      -

      - Device ID -

      -

      - - abcd1234 - -

      - -
    • -

      Signed in -

      -

      - -

      -
      • -
    • + +
      • +
      -

      - Last Active -

      + Device ID +

      - - Inactive for 90+ days - + abcd1234

      - -
    • +
      -

      IP Address -

      -

      - - 1.2.3.4 - -

      -
      • -
    + + + 1.2.3.4 + +
    +
    -
    - Client -
    - + + + https://element.io + +
    +