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 · 4497ce8 · 4497ce8
1 parent 8a40eb3
commit 4497ce8
Show file tree

Hide file tree

Showing 20 changed files with 261 additions and 293 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/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 @@