Frontend cleanups

Including: - use a readonly field for the email list - use the MFA control - compound upgrade - stopped using deprecated compound exports/components
matrix-org · Oct 27, 2023 · 5c7ab48 · 5c7ab48
1 parent 8a40eb3
commit 5c7ab48
Show file tree

Hide file tree

Showing 21 changed files with 262 additions and 294 deletions.
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
@@ -99,8 +99,8 @@
     },
     "session": {
       "current_badge": "Current",
-      "finished_date": "Finished <1/>",
-      "signed_in_date": "Signed in <1/>"
+      "finished_date": "Finished <datetime/>",
+      "signed_in_date": "Signed in <datetime/>"
     },
     "session_detail": {
       "alert": {
@@ -141,12 +141,20 @@
       "heading": "Where you're signed in"
     },
     "verify_email": {
+      "code_field_error": "Code not recognised",
       "code_field_label": "6-digit code",
-      "enter_code_prompt": "Enter the 6-digit code sent to <2>{{email}}</2>",
+      "code_field_wrong_shape": "Code must be 6 digits",
+      "email_sent_alert": {
+        "description": "Enter the new code below.",
+        "title": "New code sent"
+      },
+      "enter_code_prompt": "Enter the 6-digit code sent to: <email>{{email}}</email>",
       "heading": "Verify your email",
-      "invalid_code_alert": "Invalid code",
-      "resend_email": "Resend email",
-      "sent": "Sent!",
+      "invalid_code_alert": {
+        "description": "Check the code sent to your email and update the fields below to continue.",
+        "title": "You entered the wrong code"
+      },
+      "resend_code": "Resend code",
       "unknown_email": "Unknown email"
     }
   }

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -26,8 +26,8 @@
     "@urql/exchange-graphcache": "^6.3.3",
     "@urql/exchange-refocus": "^1.0.2",
     "@urql/exchange-request-policy": "^1.0.2",
-    "@vector-im/compound-design-tokens": "^0.0.6",
-    "@vector-im/compound-web": "^0.6.0",
+    "@vector-im/compound-design-tokens": "^0.0.7",
+    "@vector-im/compound-web": "^0.6.1",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "graphql": "^16.8.1",

diff --git a/frontend/src/components/BlockList/BlockList.stories.tsx b/frontend/src/components/BlockList/BlockList.stories.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Meta, StoryObj } from "@storybook/react";
-import { H2, Body } from "@vector-im/compound-web";
+import { H2, Text } from "@vector-im/compound-web";
 
 import Block from "../Block";
 
@@ -33,11 +33,11 @@ export const Basic: Story = {
     <BlockList {...args}>
       <Block>
         <H2>Block 1</H2>
-        <Body>Body 1</Body>
+        <Text>Body 1</Text>
       </Block>
       <Block>
         <H2>Block 2</H2>
-        <Body>Body 2</Body>
+        <Text>Body 2</Text>
       </Block>
     </BlockList>
   ),

diff --git a/frontend/src/components/BrowserSession.tsx b/frontend/src/components/BrowserSession.tsx
@@ -20,7 +20,6 @@ import { useCallback } from "react";
 
 import { currentBrowserSessionIdAtom, currentUserIdAtom } from "../atoms";
 import { FragmentType, graphql, useFragment } from "../gql";
-import Link from "../routing/Link";
 import {
   parseUserAgent,
   sessionNameFromDeviceInformation,
@@ -114,19 +113,17 @@ const BrowserSession: React.FC<Props> = ({ session }) => {
   const sessionName =
     sessionNameFromDeviceInformation(deviceInformation) || "Browser session";
 
-  const name = (
-    <Link route={{ type: "browser-session", id: data.id }}>{sessionName}</Link>
-  );
   return (
     <Session
       id={data.id}
-      name={name}
+      name={sessionName}
       createdAt={createdAt}
       finishedAt={finishedAt}
       isCurrent={isCurrent}
       deviceType={deviceInformation?.deviceType}
       lastActiveIp={data.lastActiveIp || undefined}
       lastActiveAt={lastActiveAt}
+      link={{ type: "browser-session", id: data.id }}
     >
       {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}
     </Session>

diff --git a/frontend/src/components/CompatSession.tsx b/frontend/src/components/CompatSession.tsx
@@ -18,7 +18,6 @@ import { atomFamily } from "jotai/utils";
 import { atomWithMutation } from "jotai-urql";
 
 import { FragmentType, graphql, useFragment } from "../gql";
-import { Link } from "../routing";
 
 import { Session } from "./Session";
 import EndSessionButton from "./Session/EndSessionButton";
@@ -93,10 +92,6 @@ const CompatSession: React.FC<{
     await endCompatSession();
   };
 
-  const sessionName = (
-    <Link route={{ type: "session", id: data.deviceId }}>{data.deviceId}</Link>
-  );
-
   const clientName = data.ssoLogin?.redirectUri
     ? simplifyUrl(data.ssoLogin.redirectUri)
     : undefined;
@@ -110,12 +105,13 @@ const CompatSession: React.FC<{
   return (
     <Session
       id={data.id}
-      name={sessionName}
+      name={data.deviceId}
       createdAt={createdAt}
       finishedAt={finishedAt}
       clientName={clientName}
       lastActiveIp={data.lastActiveIp || undefined}
       lastActiveAt={lastActiveAt}
+      link={{ type: "session", id: data.deviceId }}
     >
       {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}
     </Session>

diff --git a/frontend/src/components/Layout/Layout.tsx b/frontend/src/components/Layout/Layout.tsx
@@ -63,7 +63,7 @@ const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
         </>
       )}
 
-      <main>{children}</main>
+      {children}
 
       <Footer
         imprint={appConfig.branding?.imprint}

diff --git a/frontend/src/components/OAuth2Session.tsx b/frontend/src/components/OAuth2Session.tsx
@@ -19,7 +19,6 @@ import { atomWithMutation } from "jotai-urql";
 
 import { FragmentType, graphql, useFragment } from "../gql";
 import { Oauth2ApplicationType } from "../gql/graphql";
-import { Link } from "../routing";
 import { getDeviceIdFromScope } from "../utils/deviceIdFromScope";
 import { DeviceType } from "../utils/parseUserAgent";
 
@@ -94,9 +93,9 @@ const OAuth2Session: React.FC<Props> = ({ session }) => {
 
   const deviceId = getDeviceIdFromScope(data.scope);
 
-  const name = deviceId && (
-    <Link route={{ type: "session", id: deviceId }}>{deviceId}</Link>
-  );
+  const link = deviceId
+    ? { type: "session" as const, id: deviceId }
+    : undefined;
 
   const createdAt = parseISO(data.createdAt);
   const finishedAt = data.finishedAt ? parseISO(data.finishedAt) : undefined;
@@ -111,14 +110,15 @@ const OAuth2Session: React.FC<Props> = ({ session }) => {
   return (
     <Session
       id={data.id}
-      name={name}
+      name={deviceId}
       createdAt={createdAt}
       finishedAt={finishedAt}
       clientName={data.client.clientName || data.client.clientId || undefined}
       clientLogoUri={data.client.logoUri || undefined}
       deviceType={deviceType}
       lastActiveIp={data.lastActiveIp || undefined}
       lastActiveAt={lastActiveAt}
+      link={link}
     >
       {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}
     </Session>

diff --git a/frontend/src/components/Session/Session.tsx b/frontend/src/components/Session/Session.tsx
@@ -12,10 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { H6, Body, Badge } from "@vector-im/compound-web";
-import { ReactNode } from "react";
+import { H6, Text, Badge } from "@vector-im/compound-web";
 import { Trans, useTranslation } from "react-i18next";
 
+import { Route, Link } from "../../routing";
 import { DeviceType } from "../../utils/parseUserAgent";
 import Block from "../Block";
 import DateTime from "../DateTime";
@@ -25,13 +25,13 @@ import DeviceTypeIcon from "./DeviceTypeIcon";
 import LastActive from "./LastActive";
 import styles from "./Session.module.css";
 
-const SessionMetadata: React.FC<React.ComponentProps<typeof Body>> = (
+const SessionMetadata: React.FC<React.ComponentProps<typeof Text>> = (
   props,
-) => <Body {...props} size="sm" className={styles.sessionMetadata} />;
+) => <Text {...props} size="sm" className={styles.sessionMetadata} />;
 
 type SessionProps = {
   id: string;
-  name?: string | ReactNode;
+  name?: string;
   createdAt: Date;
   finishedAt?: Date;
   clientName?: string;
@@ -40,7 +40,9 @@ type SessionProps = {
   deviceType?: DeviceType;
   lastActiveIp?: string;
   lastActiveAt?: Date;
+  link?: Route;
 };
+
 const Session: React.FC<React.PropsWithChildren<SessionProps>> = ({
   id,
   name,
@@ -53,6 +55,7 @@ const Session: React.FC<React.PropsWithChildren<SessionProps>> = ({
   isCurrent,
   children,
   deviceType,
+  link,
 }) => {
   const { t } = useTranslation();
 
@@ -64,18 +67,20 @@ const Session: React.FC<React.PropsWithChildren<SessionProps>> = ({
           <Badge kind="success">{t("frontend.session.current_badge")}</Badge>
         )}
         <H6 className={styles.sessionName} title={id}>
-          {name || id}
+          {link ? <Link route={link}>{name || id}</Link> : name || id}
         </H6>
         <SessionMetadata weight="semibold">
-          <Trans i18nKey="frontend.session.signed_in_date">
-            Signed in <DateTime datetime={createdAt} />
-          </Trans>
+          <Trans
+            i18nKey="frontend.session.signed_in_date"
+            components={{ datetime: <DateTime datetime={createdAt} /> }}
+          />
         </SessionMetadata>
         {!!finishedAt && (
           <SessionMetadata weight="semibold" data-finished={true}>
-            <Trans i18nKey="frontend.session.finished_date">
-              Finished <DateTime datetime={finishedAt} />
-            </Trans>
+            <Trans
+              i18nKey="frontend.session.finished_date"
+              components={{ datetime: <DateTime datetime={finishedAt} /> }}
+            />
           </SessionMetadata>
         )}
         {!!lastActiveAt && (

diff --git a/frontend/src/components/Session/__snapshots__/SelectableSession.test.tsx.snap b/frontend/src/components/Session/__snapshots__/SelectableSession.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`<SelectableSession /> > renders an unselected session 1`] = `
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M9.55003 17.575C9.4167 17.575 9.2917 17.5542 9.17503 17.5125C9.05836 17.4709 8.95003 17.4 8.85003 17.3L4.55003 13C4.3667 12.8167 4.2792 12.5792 4.28753 12.2875C4.29586 11.9959 4.3917 11.7584 4.57503 11.575C4.75836 11.3917 4.9917 11.3 5.27503 11.3C5.55836 11.3 5.7917 11.3917 5.97503 11.575L9.55003 15.15L18.025 6.67502C18.2084 6.49169 18.4459 6.40002 18.7375 6.40002C19.0292 6.40002 19.2667 6.49169 19.45 6.67502C19.6334 6.85836 19.725 7.09586 19.725 7.38752C19.725 7.67919 19.6334 7.91669 19.45 8.10002L10.25 17.3C10.15 17.4 10.0417 17.4709 9.92503 17.5125C9.80836 17.5542 9.68336 17.575 9.55003 17.575Z"
+            d="M9.54991 17.5749C9.41658 17.5749 9.29158 17.5541 9.17491 17.5124C9.05824 17.4707 8.94991 17.3999 8.84991 17.2999L4.54991 12.9999C4.36658 12.8166 4.27908 12.5791 4.28741 12.2874C4.29574 11.9957 4.39158 11.7582 4.57491 11.5749C4.75824 11.3916 4.99158 11.2999 5.27491 11.2999C5.55824 11.2999 5.79158 11.3916 5.97491 11.5749L9.54991 15.1499L18.0249 6.6749C18.2082 6.49157 18.4457 6.3999 18.7374 6.3999C19.0291 6.3999 19.2666 6.49157 19.4499 6.6749C19.6332 6.85824 19.7249 7.09574 19.7249 7.3874C19.7249 7.67907 19.6332 7.91657 19.4499 8.0999L10.2499 17.2999C10.1499 17.3999 10.0416 17.4707 9.92491 17.5124C9.80824 17.5541 9.68324 17.5749 9.54991 17.5749Z"
             fill="currentColor"
           />
         </svg>

diff --git a/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap
@@ -108,7 +108,7 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
             <span
               title="Sat, 29 Jul 2023, 03:35"
             >
-              Active Sat, 29 Jul 2023, 03:35
+              Inactive for 90+ days
             </span>
           </p>
         </li>
@@ -305,7 +305,7 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
             <span
               title="Sat, 29 Jul 2023, 03:35"
             >
-              Active Sat, 29 Jul 2023, 03:35
+              Inactive for 90+ days
             </span>
           </p>
         </li>

diff --git a/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap b/frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap
@@ -108,7 +108,7 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
             <span
               title="Sat, 29 Jul 2023, 03:35"
             >
-              Active Sat, 29 Jul 2023, 03:35
+              Inactive for 90+ days
             </span>
           </p>
         </li>
-Original file line number
+Diff line change
@@ Expand Up @@
             </>
           )}
-          <main>{children}</main>
+          {children}
           <Footer
             imprint={appConfig.branding?.imprint}
@@ Expand Down @@