From 3d4a509aad7c714c9953439ec0e97571a404de33 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Fri, 9 Aug 2024 11:57:24 +0100 Subject: [PATCH 01/10] Handle UIA fallback authDone API for cross signing reset unlock --- .../src/routes/reset-cross-signing.lazy.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/frontend/src/routes/reset-cross-signing.lazy.tsx b/frontend/src/routes/reset-cross-signing.lazy.tsx index eb04b1233..9f37cd360 100644 --- a/frontend/src/routes/reset-cross-signing.lazy.tsx +++ b/frontend/src/routes/reset-cross-signing.lazy.tsx @@ -28,6 +28,15 @@ import { graphql } from "../gql"; import { CURRENT_VIEWER_QUERY } from "./reset-cross-signing"; +declare global { + interface Window { + // Synapse may fling the user here via UIA fallback, + // this is part of the API to signal completion to the calling client + // https://spec.matrix.org/v1.11/client-server-api/#fallback + onAuthDone?(): void; + } +} + const ALLOW_CROSS_SIGING_RESET_MUTATION = graphql(/* GraphQL */ ` mutation AllowCrossSigningReset($userId: ID!) { allowUserCrossSigningReset(input: { userId: $userId }) { @@ -52,8 +61,18 @@ function ResetCrossSigning(): React.ReactNode { const [result, allowReset] = useMutation(ALLOW_CROSS_SIGING_RESET_MUTATION); - const onClick = (): void => { - allowReset({ userId }); + const onClick = async (): Promise => { + await allowReset({ userId }); + setTimeout(() => { + // Synapse may fling the user here via UIA fallback, + // this is part of the API to signal completion to the calling client + // https://spec.matrix.org/v1.11/client-server-api/#fallback + if (window.onAuthDone) { + window.onAuthDone(); + } else if (window.opener && window.opener.postMessage) { + window.opener.postMessage("authDone", "*"); + } + }); }; return ( From 6c4c7add27c3b53914b09f6e198b8ab4d4e00340 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 13 Aug 2024 10:22:55 +0100 Subject: [PATCH 02/10] Extract VisualList into a more reusable component --- .../SessionDetail/SessionDetails.module.css | 22 -------- .../SessionDetail/SessionDetails.tsx | 12 ++--- .../VisualList/VisualList.module.css | 36 +++++++++++++ .../src/components/VisualList/VisualList.tsx | 50 +++++++++++++++++++ 4 files changed, 90 insertions(+), 30 deletions(-) create mode 100644 frontend/src/components/VisualList/VisualList.module.css create mode 100644 frontend/src/components/VisualList/VisualList.tsx diff --git a/frontend/src/components/SessionDetail/SessionDetails.module.css b/frontend/src/components/SessionDetail/SessionDetails.module.css index ab72b91c3..101f31392 100644 --- a/frontend/src/components/SessionDetail/SessionDetails.module.css +++ b/frontend/src/components/SessionDetail/SessionDetails.module.css @@ -39,25 +39,3 @@ 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: var(--cpd-space-3x) var(--cpd-space-5x); - display: flex; - align-items: center; - gap: var(--cpd-space-3x); -} - -.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 4027abdf9..ed4df3add 100644 --- a/frontend/src/components/SessionDetail/SessionDetails.tsx +++ b/frontend/src/components/SessionDetail/SessionDetails.tsx @@ -25,6 +25,7 @@ import { useTranslation } from "react-i18next"; import Block from "../Block/Block"; import DateTime from "../DateTime"; import LastActive from "../Session/LastActive"; +import { VisualList, VisualListItem } from "../VisualList/VisualList"; import styles from "./SessionDetails.module.css"; @@ -68,12 +69,7 @@ const Scope: React.FC<{ scope: string }> = ({ scope }) => { return ( <> {mappedScopes.map(([Icon, text], i) => ( -
  • - - - {text} - -
    • + ))} ); @@ -153,11 +149,11 @@ const SessionDetails: React.FC = ({ + {scopes.map((scope) => ( ))} - + } /> )} diff --git a/frontend/src/components/VisualList/VisualList.module.css b/frontend/src/components/VisualList/VisualList.module.css new file mode 100644 index 000000000..a9107572a --- /dev/null +++ b/frontend/src/components/VisualList/VisualList.module.css @@ -0,0 +1,36 @@ +/* Copyright 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. + * 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. + */ + +.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: var(--cpd-space-3x) var(--cpd-space-5x); + display: flex; + align-items: center; + gap: var(--cpd-space-3x); +} + +.scope svg { + inline-size: var(--cpd-space-6x); + block-size: var(--cpd-space-6x); + flex-shrink: 0; +} diff --git a/frontend/src/components/VisualList/VisualList.tsx b/frontend/src/components/VisualList/VisualList.tsx new file mode 100644 index 000000000..d42c29579 --- /dev/null +++ b/frontend/src/components/VisualList/VisualList.tsx @@ -0,0 +1,50 @@ +// Copyright 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. +// 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 { Text } from "@vector-im/compound-web"; +import { + FC, + ForwardRefExoticComponent, + ReactNode, + RefAttributes, + SVGProps, +} from "react"; + +import styles from "./VisualList.module.css"; + +type Props = { + children: ReactNode; +}; + +export const VisualListItem: FC<{ + Icon: ForwardRefExoticComponent< + Omit, "ref" | "children"> & + RefAttributes + >; + iconColor?: string; + label: string; +}> = ({ Icon, iconColor, label }) => { + return ( +
  • + + + {label} + +
    • + ); +}; + +export const VisualList: React.FC = ({ children }) => { + return
      {children}
    ; +}; From 56fcd0d6f179403f43d013b9d103e8941dc16131 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 13 Aug 2024 12:57:31 +0100 Subject: [PATCH 03/10] Redesign cross signing reset unlock flow --- frontend/locales/en.json | 27 ++- .../PageHeading/PageHeading.module.css | 2 +- .../src/routes/reset-cross-signing.lazy.tsx | 177 +++++++++++++----- 3 files changed, 153 insertions(+), 53 deletions(-) diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 79bf8ee91..b8384ed9d 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -185,17 +185,28 @@ } }, "reset_cross_signing": { - "button": "Allow crypto identity reset", - "description": "If you are not signed in anywhere else, and have forgotten or lost all recovery options you’ll need to reset your crypto identity. This means you will lose your existing message history, other users will see that you have reset your identity and you will need to verify your existing devices again.", + "button": "Reset identity", + "description": "If you're not signed in to any other devices and you've lost your recovery key, then you'll need to reset your identity to continue using the app.", "failure": { - "description": "This might be a temporary problem, so please try again later. If the problem persists, please contact your server administrator.", - "title": "Failed to allow crypto identity" + "heading": "Failed to allow crypto identity reset", + "description": "This might be a temporary problem, so please try again later. If the problem persists, please contact your server administrator." }, - "heading": "Reset crypto identity", + "heading": "Reset your identity in case you can't confirm another way", "success": { - "description": "A client can now temporarily reset your account crypto identity. Follow the instructions in your client to complete the process.", - "title": "Crypto identity reset temporarily allowed" - } + "heading": "Identity reset successfully. Go back to the app to finish the process.", + "description": "The identity reset has been approved for the next {{minutes}} minutes. You can close this window and go back to the app to continue." + }, + "cancelled": { + "heading": "Identity reset cancelled.", + "description_1": "You can close this window and go back to the app to continue.", + "description_2": "If you're signed out everywhere and don't remember your recovery code, you'll still need to reset your identity." + }, + "effect_list": { + "positive_1": "Your account details, contacts, preferences, and chat list will be kept", + "negative_1": "You will lose your existing message history", + "negative_2": "You will need to verify all your existing devices and contacts again" + }, + "warning": "Only reset your identity if you don't have access to another signed-in device and you've lost your recovery key." }, "session": { "client_id_label": "Client ID", diff --git a/frontend/src/components/PageHeading/PageHeading.module.css b/frontend/src/components/PageHeading/PageHeading.module.css index 3e043364c..7aa64941d 100644 --- a/frontend/src/components/PageHeading/PageHeading.module.css +++ b/frontend/src/components/PageHeading/PageHeading.module.css @@ -63,7 +63,7 @@ text-align: center; & .title { - font: var(--cpd-font-heading-lg-semibold); + font: var(--cpd-font-heading-md-semibold); letter-spacing: var(--cpd-font-letter-spacing-heading-xl); color: var(--cpd-color-text-primary); text-wrap: balance; diff --git a/frontend/src/routes/reset-cross-signing.lazy.tsx b/frontend/src/routes/reset-cross-signing.lazy.tsx index 9f37cd360..1616beefa 100644 --- a/frontend/src/routes/reset-cross-signing.lazy.tsx +++ b/frontend/src/routes/reset-cross-signing.lazy.tsx @@ -13,9 +13,19 @@ // limitations under the License. import { createLazyFileRoute, notFound } from "@tanstack/react-router"; -import IconArrowLeft from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left"; -import IconKey from "@vector-im/compound-design-tokens/assets/web/icons/key"; -import { Alert, Button, Text } from "@vector-im/compound-web"; +import IconCheck from "@vector-im/compound-design-tokens/assets/web/icons/check"; +import IconCheckCircleSolid from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid"; +import IconClose from "@vector-im/compound-design-tokens/assets/web/icons/close"; +import IconError from "@vector-im/compound-design-tokens/assets/web/icons/error"; +import IconKeyOffSolid from "@vector-im/compound-design-tokens/assets/web/icons/key-off-solid"; +import { Button, Text } from "@vector-im/compound-web"; +import { + ForwardRefExoticComponent, + RefAttributes, + SVGProps, + useState, + MouseEvent, +} from "react"; import { useTranslation } from "react-i18next"; import { useMutation, useQuery } from "urql"; @@ -24,6 +34,10 @@ import { ButtonLink } from "../components/ButtonLink"; import Layout from "../components/Layout"; import LoadingSpinner from "../components/LoadingSpinner"; import PageHeading from "../components/PageHeading"; +import { + VisualList, + VisualListItem, +} from "../components/VisualList/VisualList"; import { graphql } from "../gql"; import { CURRENT_VIEWER_QUERY } from "./reset-cross-signing"; @@ -51,6 +65,10 @@ export const Route = createLazyFileRoute("/reset-cross-signing")({ component: ResetCrossSigning, }); +// This value comes from Synapse and we have no way to query it from here +// https://github.com/element-hq/synapse/blob/34b758644611721911a223814a7b35d8e14067e6/synapse/rest/admin/users.py#L1335 +const CROSS_SIGNING_REPLACEMENT_PERIOD_MS = 10 * 60 * 1000; // 10 minutes + function ResetCrossSigning(): React.ReactNode { const { deepLink } = Route.useSearch(); const { t } = useTranslation(); @@ -60,6 +78,8 @@ function ResetCrossSigning(): React.ReactNode { const userId = viewer.data.viewer.id; const [result, allowReset] = useMutation(ALLOW_CROSS_SIGING_RESET_MUTATION); + const success = !!result.data && !result.error; + const error = !success && result.error; const onClick = async (): Promise => { await allowReset({ userId }); @@ -75,53 +95,122 @@ function ResetCrossSigning(): React.ReactNode { }); }; + const [cancelled, setCancelled] = useState(false); + + let cancelButton; + if (!deepLink) { + cancelButton = ( + + {t("action.back")} + + ); + } else if (!success && !error && !cancelled) { + // Only show the back button for a deep link if the user hasn't yet completed the interaction + cancelButton = ( + + ); + } + + let Icon: ForwardRefExoticComponent< + Omit, "ref" | "children"> & + RefAttributes + >; + let title: string; + let body: JSX.Element; + + if (cancelled) { + Icon = IconKeyOffSolid; + title = t("frontend.reset_cross_signing.cancelled.heading"); + body = ( + <> + + {t("frontend.reset_cross_signing.cancelled.description_1")} + + + {t("frontend.reset_cross_signing.cancelled.description_2")} + + + ); + } else if (success) { + Icon = IconCheckCircleSolid; + title = t("frontend.reset_cross_signing.success.heading"); + body = ( + + {t("frontend.reset_cross_signing.success.description", { + minutes: CROSS_SIGNING_REPLACEMENT_PERIOD_MS / (60 * 1000), + })} + + ); + } else if (error) { + Icon = IconError; + title = t("frontend.reset_cross_signing.failure.heading"); + body = ( + + {t("frontend.reset_cross_signing.failure.description")} + + ); + } else { + Icon = IconError; + title = t("frontend.reset_cross_signing.heading"); + body = ( + <> + + {t("frontend.reset_cross_signing.description")} + + + + + + + + {t("frontend.reset_cross_signing.warning")} + + + + ); + } + return ( - {!result.data && !result.error && ( - <> - - {t("frontend.reset_cross_signing.description")} - - - - )} - {result.data && ( - - {t("frontend.reset_cross_signing.success.description")} - - )} - {result.error && ( - - {t("frontend.reset_cross_signing.failure.description")} - - )} - - {!deepLink && ( - - {t("action.back")} - - )} + {body} + {cancelButton} ); From 682a6cee8945b0ae67cbe563bfd7ce0630c992f4 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 13 Aug 2024 15:07:35 +0100 Subject: [PATCH 04/10] Fix block gap --- frontend/src/components/BlockList/BlockList.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/BlockList/BlockList.module.css b/frontend/src/components/BlockList/BlockList.module.css index 644deeec9..ffaa3099f 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-8x); + gap: var(--cpd-space-6x); } From ea18cbaf3cb6b48aff5d11bc4311671c1d170564 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 13 Aug 2024 15:18:08 +0100 Subject: [PATCH 05/10] Hide reset x-signing flow on account view under a collapsible heading --- frontend/locales/en.json | 3 +- frontend/package-lock.json | 198 ++++++++++++++++++ frontend/package.json | 1 + .../Collapsible/Collapsible.module.css | 32 +++ .../components/Collapsible/Collapsible.tsx | 50 +++++ frontend/src/components/Collapsible/index.ts | 15 ++ frontend/src/routes/_account.index.lazy.tsx | 35 ++-- 7 files changed, 318 insertions(+), 16 deletions(-) create mode 100644 frontend/src/components/Collapsible/Collapsible.module.css create mode 100644 frontend/src/components/Collapsible/Collapsible.tsx create mode 100644 frontend/src/components/Collapsible/index.ts diff --git a/frontend/locales/en.json b/frontend/locales/en.json index b8384ed9d..955d1ffbe 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -24,7 +24,8 @@ "next": "Next", "previous": "Previous", "saved": "Saved", - "saving": "Saving…" + "saving": "Saving…", + "e2ee": "End-to-end encryption" }, "frontend": { "account": { diff --git a/frontend/package-lock.json b/frontend/package-lock.json index c6872cc53..e45132233 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@fontsource/inconsolata": "^5.0.18", "@fontsource/inter": "^5.0.20", + "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-dialog": "^1.0.5", "@tanstack/react-router": "^1.46.4", "@urql/core": "^5.0.5", @@ -5195,6 +5196,203 @@ } } }, + "node_modules/@radix-ui/react-collapsible": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz", + "integrity": "sha512-zQY7Epa8sTL0mq4ajSJpjgn2YmCgyrG7RsQgLp3C0LQVkG7+Tf6Pv1CeNWZLyqMjhdPkBa5Lx7wYBeSu7uCSTA==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/primitive": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz", + "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==", + "license": "MIT" + }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", + "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz", + "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-id": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz", + "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-presence": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz", + "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-use-layout-effect": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", + "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-slot": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", + "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", + "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", + "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-use-callback-ref": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", + "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 161384164..1019ec0e7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,6 +19,7 @@ "dependencies": { "@fontsource/inconsolata": "^5.0.18", "@fontsource/inter": "^5.0.20", + "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-dialog": "^1.0.5", "@tanstack/react-router": "^1.46.4", "@urql/core": "^5.0.5", diff --git a/frontend/src/components/Collapsible/Collapsible.module.css b/frontend/src/components/Collapsible/Collapsible.module.css new file mode 100644 index 000000000..98124d33f --- /dev/null +++ b/frontend/src/components/Collapsible/Collapsible.module.css @@ -0,0 +1,32 @@ +/* Copyright 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. + * 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. + */ + +.trigger { + display: flex; + width: 100%; +} + +.trigger-title { + flex-grow: 1; + text-align: start; +} + +[data-state="closed"] .trigger-icon { + transform: rotate(180deg); +} + +.content { + margin-top: var(--cpd-space-2x); +} \ No newline at end of file diff --git a/frontend/src/components/Collapsible/Collapsible.tsx b/frontend/src/components/Collapsible/Collapsible.tsx new file mode 100644 index 000000000..b1c651cba --- /dev/null +++ b/frontend/src/components/Collapsible/Collapsible.tsx @@ -0,0 +1,50 @@ +// Copyright 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. +// 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 * as Collapsible from "@radix-ui/react-collapsible"; +import IconChevronUp from "@vector-im/compound-design-tokens/assets/web/icons/chevron-up"; +import classNames from "classnames"; + +import styles from "./Collapsible.module.css"; + +export const Trigger: React.FC< + React.ComponentProps +> = ({ children, className, ...props }) => { + return ( + +
    {children}
    + +     + ); +}; + +export const Content: React.FC< + React.ComponentProps +> = ({ className, ...props }) => { + return ( + + ); +}; + +export const Root = Collapsible.Root; diff --git a/frontend/src/components/Collapsible/index.ts b/frontend/src/components/Collapsible/index.ts new file mode 100644 index 000000000..6d8244333 --- /dev/null +++ b/frontend/src/components/Collapsible/index.ts @@ -0,0 +1,15 @@ +// Copyright 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. +// 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. + +export * from "./Collapsible"; diff --git a/frontend/src/routes/_account.index.lazy.tsx b/frontend/src/routes/_account.index.lazy.tsx index 02f24578d..bbe919297 100644 --- a/frontend/src/routes/_account.index.lazy.tsx +++ b/frontend/src/routes/_account.index.lazy.tsx @@ -17,15 +17,15 @@ import { notFound, useNavigate, } from "@tanstack/react-router"; -import IconKey from "@vector-im/compound-design-tokens/assets/web/icons/key"; -import { Alert, Separator } from "@vector-im/compound-web"; +import { Alert, Heading, Separator, Text } from "@vector-im/compound-web"; import { Suspense } from "react"; import { useTranslation } from "react-i18next"; import { useQuery } from "urql"; import AccountManagementPasswordPreview from "../components/AccountManagementPasswordPreview"; -import BlockList from "../components/BlockList/BlockList"; +import BlockList from "../components/BlockList"; import { ButtonLink } from "../components/ButtonLink"; +import * as Collapsible from "../components/Collapsible"; import LoadingSpinner from "../components/LoadingSpinner"; import UserEmail from "../components/UserEmail"; import AddEmailForm from "../components/UserProfile/AddEmailForm"; @@ -78,23 +78,28 @@ function Index(): React.ReactElement { )} - - {siteConfig.passwordLoginEnabled && ( )} - - - - {t("frontend.reset_cross_signing.heading")} - + + + + {t("common.e2ee")} + + + + + + {t("frontend.reset_cross_signing.description")} + + + {t("frontend.reset_cross_signing.button")} + + + + ); From 3cba999c7c2ea473a8a99b238f8cee6cadf24255 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 13 Aug 2024 15:42:28 +0100 Subject: [PATCH 06/10] i18n --- frontend/locales/en.json | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 955d1ffbe..4d30b7e28 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -20,12 +20,12 @@ } }, "common": { + "e2ee": "End-to-end encryption", "loading": "Loading…", "next": "Next", "previous": "Previous", "saved": "Saved", - "saving": "Saving…", - "e2ee": "End-to-end encryption" + "saving": "Saving…" }, "frontend": { "account": { @@ -187,25 +187,25 @@ }, "reset_cross_signing": { "button": "Reset identity", - "description": "If you're not signed in to any other devices and you've lost your recovery key, then you'll need to reset your identity to continue using the app.", - "failure": { - "heading": "Failed to allow crypto identity reset", - "description": "This might be a temporary problem, so please try again later. If the problem persists, please contact your server administrator." - }, - "heading": "Reset your identity in case you can't confirm another way", - "success": { - "heading": "Identity reset successfully. Go back to the app to finish the process.", - "description": "The identity reset has been approved for the next {{minutes}} minutes. You can close this window and go back to the app to continue." - }, "cancelled": { - "heading": "Identity reset cancelled.", "description_1": "You can close this window and go back to the app to continue.", - "description_2": "If you're signed out everywhere and don't remember your recovery code, you'll still need to reset your identity." + "description_2": "If you're signed out everywhere and don't remember your recovery code, you'll still need to reset your identity.", + "heading": "Identity reset cancelled." }, + "description": "If you're not signed in to any other devices and you've lost your recovery key, then you'll need to reset your identity to continue using the app.", "effect_list": { - "positive_1": "Your account details, contacts, preferences, and chat list will be kept", "negative_1": "You will lose your existing message history", - "negative_2": "You will need to verify all your existing devices and contacts again" + "negative_2": "You will need to verify all your existing devices and contacts again", + "positive_1": "Your account details, contacts, preferences, and chat list will be kept" + }, + "failure": { + "description": "This might be a temporary problem, so please try again later. If the problem persists, please contact your server administrator.", + "heading": "Failed to allow crypto identity reset" + }, + "heading": "Reset your identity in case you can't confirm another way", + "success": { + "description": "The identity reset has been approved for the next {{minutes}} minutes. You can close this window and go back to the app to continue.", + "heading": "Identity reset successfully. Go back to the app to finish the process." }, "warning": "Only reset your identity if you don't have access to another signed-in device and you've lost your recovery key." }, From f9be76d909f4cc973c360681ac28fab83922b22b Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 13 Aug 2024 15:55:10 +0100 Subject: [PATCH 07/10] Iterate --- .../Collapsible/Collapsible.module.css | 14 ++++---- .../CompatSessionDetail.test.tsx.snap | 33 ++++++++++++------- .../OAuth2SessionDetail.test.tsx.snap | 22 ++++++++----- 3 files changed, 42 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/Collapsible/Collapsible.module.css b/frontend/src/components/Collapsible/Collapsible.module.css index 98124d33f..299daaf6d 100644 --- a/frontend/src/components/Collapsible/Collapsible.module.css +++ b/frontend/src/components/Collapsible/Collapsible.module.css @@ -14,19 +14,19 @@ */ .trigger { - display: flex; - width: 100%; + display: flex; + width: 100%; } .trigger-title { - flex-grow: 1; - text-align: start; + flex-grow: 1; + text-align: start; } [data-state="closed"] .trigger-icon { - transform: rotate(180deg); + transform: rotate(180deg); } .content { - margin-top: var(--cpd-space-2x); -} \ No newline at end of file + margin-top: var(--cpd-space-2x); +} diff --git a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap index 6d4f1eabe..2cf1edc5c 100644 --- a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap +++ b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap @@ -109,12 +109,13 @@ exports[` > renders a compatability session details 1`] = ` Scopes
    • > renders a compatability session details 1`] = `

    • > renders a compatability session details 1`] = `

    • > renders a compatability session without an ssoL Scopes
      • > renders a compatability session without an ssoL

      • > renders a compatability session without an ssoL

      • > renders a finished compatability session detail Scopes
        • > renders a finished compatability session detail

        • > renders a finished compatability session detail

        • > renders a finished session details 1`] = ` Scopes
          • > renders a finished session details 1`] = `

          • > renders a finished session details 1`] = `

          • > renders session details 1`] = ` Scopes
            • > renders session details 1`] = `

            • > renders session details 1`] = `

            • Date: Thu, 15 Aug 2024 11:09:57 +0100 Subject: [PATCH 08/10] Downgrade Radix react-collapsible --- frontend/package-lock.json | 196 +++---------------------------------- frontend/package.json | 2 +- 2 files changed, 16 insertions(+), 182 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d6da830d4..c515439b5 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@fontsource/inconsolata": "^5.0.18", "@fontsource/inter": "^5.0.20", - "@radix-ui/react-collapsible": "^1.1.0", + "@radix-ui/react-collapsible": "1.0.3", "@radix-ui/react-dialog": "^1.0.5", "@tanstack/react-router": "^1.46.7", "@urql/core": "^5.0.5", @@ -5197,126 +5197,26 @@ } }, "node_modules/@radix-ui/react-collapsible": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz", - "integrity": "sha512-zQY7Epa8sTL0mq4ajSJpjgn2YmCgyrG7RsQgLp3C0LQVkG7+Tf6Pv1CeNWZLyqMjhdPkBa5Lx7wYBeSu7uCSTA==", - "license": "MIT", - "dependencies": { - "@radix-ui/primitive": "1.1.0", - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-context": "1.1.0", - "@radix-ui/react-id": "1.1.0", - "@radix-ui/react-presence": "1.1.0", - "@radix-ui/react-primitive": "2.0.0", - "@radix-ui/react-use-controllable-state": "1.1.0", - "@radix-ui/react-use-layout-effect": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/primitive": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz", - "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==", - "license": "MIT" - }, - "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-compose-refs": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", - "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==", - "license": "MIT", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz", - "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==", - "license": "MIT", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-id": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz", - "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==", - "license": "MIT", - "dependencies": { - "@radix-ui/react-use-layout-effect": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-presence": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz", - "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==", - "license": "MIT", - "dependencies": { - "@radix-ui/react-compose-refs": "1.1.0", - "@radix-ui/react-use-layout-effect": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz", - "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz", + "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==", "license": "MIT", "dependencies": { - "@radix-ui/react-slot": "1.1.0" + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", - "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" }, "peerDependenciesMeta": { "@types/react": { @@ -5327,72 +5227,6 @@ } } }, - "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-slot": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", - "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", - "license": "MIT", - "dependencies": { - "@radix-ui/react-compose-refs": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz", - "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==", - "license": "MIT", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-controllable-state": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz", - "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==", - "license": "MIT", - "dependencies": { - "@radix-ui/react-use-callback-ref": "1.1.0" - }, - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz", - "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==", - "license": "MIT", - "peerDependencies": { - "@types/react": "*", - "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 9d6754704..22496666e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,7 +19,7 @@ "dependencies": { "@fontsource/inconsolata": "^5.0.18", "@fontsource/inter": "^5.0.20", - "@radix-ui/react-collapsible": "^1.1.0", + "@radix-ui/react-collapsible": "1.0.3", "@radix-ui/react-dialog": "^1.0.5", "@tanstack/react-router": "^1.46.7", "@urql/core": "^5.0.5", From 6a6ea3318207cf51077073658caeaeb17024fbb5 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 15 Aug 2024 11:11:23 +0100 Subject: [PATCH 09/10] Fix class names --- frontend/src/components/VisualList/VisualList.module.css | 6 +++--- frontend/src/components/VisualList/VisualList.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/VisualList/VisualList.module.css b/frontend/src/components/VisualList/VisualList.module.css index a9107572a..cc0ec9012 100644 --- a/frontend/src/components/VisualList/VisualList.module.css +++ b/frontend/src/components/VisualList/VisualList.module.css @@ -13,7 +13,7 @@ * limitations under the License. */ -.scope-list { +.list { display: flex; flex-direction: column; gap: var(--cpd-space-scale); @@ -21,7 +21,7 @@ overflow: hidden; } -.scope { +.item { background: var(--cpd-color-bg-subtle-secondary); padding: var(--cpd-space-3x) var(--cpd-space-5x); display: flex; @@ -29,7 +29,7 @@ gap: var(--cpd-space-3x); } -.scope svg { +.item svg { inline-size: var(--cpd-space-6x); block-size: var(--cpd-space-6x); flex-shrink: 0; diff --git a/frontend/src/components/VisualList/VisualList.tsx b/frontend/src/components/VisualList/VisualList.tsx index d42c29579..46369fe61 100644 --- a/frontend/src/components/VisualList/VisualList.tsx +++ b/frontend/src/components/VisualList/VisualList.tsx @@ -36,7 +36,7 @@ export const VisualListItem: FC<{ label: string; }> = ({ Icon, iconColor, label }) => { return ( -
            • +
            • {label} @@ -46,5 +46,5 @@ export const VisualListItem: FC<{ }; export const VisualList: React.FC = ({ children }) => { - return
                {children}
              ; + return
                {children}
              ; }; From aa1e12739c1f5c66b6f0bae02f68e5564617a49d Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 15 Aug 2024 11:23:52 +0100 Subject: [PATCH 10/10] Update snapshots --- .../CompatSessionDetail.test.tsx.snap | 24 +++++++++---------- .../OAuth2SessionDetail.test.tsx.snap | 16 ++++++------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap index 2cf1edc5c..a62e60cc5 100644 --- a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap +++ b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap @@ -109,10 +109,10 @@ exports[` > renders a compatability session details 1`] = ` Scopes
              • > renders a compatability session details 1`] = `

              • > renders a compatability session details 1`] = `

              • > renders a compatability session without an ssoL Scopes
                • > renders a compatability session without an ssoL

                • > renders a compatability session without an ssoL

                • > renders a finished compatability session detail Scopes
                  • > renders a finished compatability session detail

                  • > renders a finished compatability session detail

                  • > renders a finished session details 1`] = ` Scopes
                    • > renders a finished session details 1`] = `

                    • > renders a finished session details 1`] = `

                    • > renders session details 1`] = ` Scopes
                      • > renders session details 1`] = `

                      • > renders session details 1`] = `