From fd22d6e26ec31f871810ccec86c58e9fa8b0dc0b Mon Sep 17 00:00:00 2001 From: Kerry Date: Tue, 29 Aug 2023 12:07:48 +1200 Subject: [PATCH] Browser session UI (#1616) * tweak blocklist spacing * use same session design for browser sessions * remove change to session * remove unused class --- .../src/components/Block/Block.module.css | 2 +- .../components/BlockList/BlockList.module.css | 1 + frontend/src/components/BrowserSession.tsx | 29 ++------ .../components/UserHome/UserHome.module.css | 7 -- frontend/src/components/UserHome/UserHome.tsx | 70 +++++++++---------- .../__snapshots__/UserHome.test.tsx.snap | 12 ++-- 6 files changed, 49 insertions(+), 72 deletions(-) diff --git a/frontend/src/components/Block/Block.module.css b/frontend/src/components/Block/Block.module.css index 59e4d608..34949172 100644 --- a/frontend/src/components/Block/Block.module.css +++ b/frontend/src/components/Block/Block.module.css @@ -15,7 +15,7 @@ .block { color: var(--cpd-color-text-primary); - padding: var(--cpd-space-5x) 0; + padding-bottom: var(--cpd-space-5x); border-bottom: 1px solid var(--cpd-color-border-interactive-secondary); &:last-child { diff --git a/frontend/src/components/BlockList/BlockList.module.css b/frontend/src/components/BlockList/BlockList.module.css index e78e1bc9..8e0f533d 100644 --- a/frontend/src/components/BlockList/BlockList.module.css +++ b/frontend/src/components/BlockList/BlockList.module.css @@ -17,4 +17,5 @@ display: flex; flex-direction: column; align-content: flex-start; + gap: var(--cpd-space-5x); } \ No newline at end of file diff --git a/frontend/src/components/BrowserSession.tsx b/frontend/src/components/BrowserSession.tsx index f150b887..89b83529 100644 --- a/frontend/src/components/BrowserSession.tsx +++ b/frontend/src/components/BrowserSession.tsx @@ -12,8 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import IconWebBrowser from "@vector-im/compound-design-tokens/icons/web-browser.svg"; -import { Body, Button } from "@vector-im/compound-web"; +import { Button } from "@vector-im/compound-web"; import { atom, useSetAtom } from "jotai"; import { atomFamily } from "jotai/utils"; import { atomWithMutation } from "jotai-urql"; @@ -22,8 +21,7 @@ import { useTransition } from "react"; import { currentBrowserSessionIdAtom, currentUserIdAtom } from "../atoms"; import { FragmentType, graphql, useFragment } from "../gql"; -import styles from "./BrowserSession.module.css"; -import DateTime from "./DateTime"; +import Session from "./Session/Session"; const FRAGMENT = graphql(/* GraphQL */ ` fragment BrowserSession_session on BrowserSession { @@ -91,34 +89,19 @@ const BrowserSession: React.FC = ({ session, isCurrent }) => { }); }; - return ( -
- -
- - {isCurrent ? ( - <> - Current browser session - - ) : ( - <>Browser Session - )} - - - Signed in - -
+ const sessionName = isCurrent ? "Current browser session" : "Browser session"; + return ( + -
+ ); }; diff --git a/frontend/src/components/UserHome/UserHome.module.css b/frontend/src/components/UserHome/UserHome.module.css index dcb27334..5ec66e54 100644 --- a/frontend/src/components/UserHome/UserHome.module.css +++ b/frontend/src/components/UserHome/UserHome.module.css @@ -13,13 +13,6 @@ * limitations under the License. */ -.session-list { - margin-top: var(--cpd-space-4x); - display: flex; - flex-direction: column; - gap: var(--cpd-space-2x); -} - .session-list-block { display: flex; flex-direction: row; diff --git a/frontend/src/components/UserHome/UserHome.tsx b/frontend/src/components/UserHome/UserHome.tsx index 6bc019d8..fbfcc1b2 100644 --- a/frontend/src/components/UserHome/UserHome.tsx +++ b/frontend/src/components/UserHome/UserHome.tsx @@ -18,6 +18,7 @@ import { useState } from "react"; import { Link } from "../../Router"; import { FragmentType, graphql, useFragment } from "../../gql"; import Block from "../Block/Block"; +import BlockList from "../BlockList/BlockList"; import styles from "./UserHome.module.css"; @@ -72,7 +73,7 @@ const UserHome: React.FC<{ // compatibility sessions -> Regular apps return ( - <> + {data.unverifiedEmails.totalCount > 0 && !dismiss && ( You have {data.unverifiedEmails.totalCount} unverified email @@ -80,40 +81,39 @@ const UserHome: React.FC<{ )} {/* This is a short term solution, so I won't bother extracting these blocks into components */} -
-

Where you're signed in

- -
-
Browser
- - {data.browserSessions.totalCount} active{" "} - {pluraliseSession(data.browserSessions.totalCount)} - -
- View all - - -
-
New apps
- - {data.oauth2Sessions.totalCount} active{" "} - {pluraliseSession(data.oauth2Sessions.totalCount)} - -
- View all - - -
-
Regular apps
- - {data.compatSessions.totalCount} active{" "} - {pluraliseSession(data.compatSessions.totalCount)} - -
- View all - -
- + +

Where you're signed in

+ +
+
Browser
+ + {data.browserSessions.totalCount} active{" "} + {pluraliseSession(data.browserSessions.totalCount)} + +
+ View all + + +
+
New apps
+ + {data.oauth2Sessions.totalCount} active{" "} + {pluraliseSession(data.oauth2Sessions.totalCount)} + +
+ View all + + +
+
Regular apps
+ + {data.compatSessions.totalCount} active{" "} + {pluraliseSession(data.compatSessions.totalCount)} + +
+ View all + + ); }; diff --git a/frontend/src/components/UserHome/__snapshots__/UserHome.test.tsx.snap b/frontend/src/components/UserHome/__snapshots__/UserHome.test.tsx.snap index 5b13fb35..b5755480 100644 --- a/frontend/src/components/UserHome/__snapshots__/UserHome.test.tsx.snap +++ b/frontend/src/components/UserHome/__snapshots__/UserHome.test.tsx.snap @@ -1,8 +1,8 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`UserHome > render a with sessions 1`] = ` -

render a with sessions 1`] = ` View all -

+ `; exports[`UserHome > render an simple 1`] = ` -

render an simple 1`] = ` View all -

+ `;