add client logo to session tile and detail

Author: Kerry Archibald

frontend/src/components/OAuth2Session.tsx

@@ -34,6 +34,7 @@ export const OAUTH2_SESSION_FRAGMENT = graphql(/* GraphQL */ `
       clientId
       clientName
       clientUri
+      logoUri
     }
   }
 `);
@@ -48,6 +49,7 @@ export type Oauth2SessionType = {
     clientId: string;
     clientName: string;
     clientUri: string;
+    logoUri: string | null;
   };
 };
 
@@ -103,6 +105,7 @@ const OAuth2Session: React.FC<Props> = ({ session }) => {
       createdAt={data.createdAt}
       finishedAt={data.finishedAt || undefined}
       clientName={data.client.clientName}
+      clientLogoUri={data.client.logoUri || undefined}
     >
       {!data.finishedAt && <EndSessionButton endSession={onSessionEnd} />}
     </Session>

frontend/src/components/Session/ClientAvatar.module.css

@@ -0,0 +1,23 @@
+/* Copyright 2023 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.
+ */
+
+.avatar {
+    object-fit: cover;
+    overflow: hidden;
+    aspect-ratio: 1 / 1;
+    width: var(--mas-avatar-size);
+    border-radius: 50%;
+    display: inline-block;
+}

frontend/src/components/Session/ClientAvatar.tsx

@@ -0,0 +1,51 @@
+// Copyright 2023 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 { Avatar } from "@vector-im/compound-web";
+import { CSSProperties } from "react";
+
+import styles from "./ClientAvatar.module.css";
+
+const ClientAvatar: React.FC<{
+  name: string;
+  logoUri?: string;
+  /**
+   * Render a fallback avatar using client name when truthy
+   * Otherwise return null when no logoUri
+   */
+  withFallback?: boolean;
+  size: string;
+}> = ({ name, logoUri, withFallback, size }) => {
+  // compound's lazy loading for avatars does not allow CORS requests
+  if (logoUri) {
+    return (
+      <img
+        className={styles.avatar}
+        src={logoUri}
+        alt={name}
+        style={
+          {
+            "--mas-avatar-size": size,
+          } as CSSProperties
+        }
+      />
+    );
+  }
+  if (withFallback) {
+    return <Avatar size={size} id={name} name={name} src={logoUri} />;
+  }
+  return null;
+};
+
+export default ClientAvatar;

frontend/src/components/Session/Session.module.css

@@ -21,6 +21,10 @@
 }
 
 .session-metadata {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--cpd-space-1x);
     color: var(--cpd-color-text-secondary);
 
     &[data-finished] {

frontend/src/components/Session/Session.tsx

@@ -18,6 +18,7 @@ import { ReactNode } from "react";
 import Block from "../Block";
 import DateTime from "../DateTime";
 
+import ClientAvatar from "./ClientAvatar";
 import styles from "./Session.module.css";
 
 const SessionMetadata: React.FC<React.ComponentProps<typeof Body>> = (
@@ -30,6 +31,7 @@ export type SessionProps = {
   createdAt: string;
   finishedAt?: string;
   clientName?: string;
+  clientLogoUri?: string;
   isCurrent?: boolean;
 };
 const Session: React.FC<React.PropsWithChildren<SessionProps>> = ({
@@ -38,6 +40,7 @@ const Session: React.FC<React.PropsWithChildren<SessionProps>> = ({
   createdAt,
   finishedAt,
   clientName,
+  clientLogoUri,
   isCurrent,
   children,
 }) => {
@@ -56,7 +59,6 @@ const Session: React.FC<React.PropsWithChildren<SessionProps>> = ({
       <H6 className={styles.sessionName} title={id}>
         {name || id}
       </H6>
-
       <SessionMetadata weight="semibold">
         Signed in <DateTime datetime={createdAt} />
       </SessionMetadata>
@@ -67,7 +69,11 @@ const Session: React.FC<React.PropsWithChildren<SessionProps>> = ({
       )}
       {!!clientName && (
         <SessionMetadata>
-          Client:{" "}
+          <ClientAvatar
+            size="var(--cpd-space-4x)"
+            name={clientName}
+            logoUri={clientLogoUri}
+          />{" "}
           <SessionMetadata weight="semibold" as="span">
             {clientName}
           </SessionMetadata>

frontend/src/components/Session/__snapshots__/Session.test.tsx.snap

@@ -81,7 +81,6 @@ exports[`<Session /> > uses client name when truthy 1`] = `
   <p
     className="_font-body-sm-regular_1g2sj_45 _sessionMetadata_634806"
   >
-    Client:
      
     <span
       className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"

frontend/src/components/SessionDetail/OAuth2SessionDetail.tsx

@@ -24,6 +24,7 @@ import {
   Oauth2SessionType,
   endSessionFamily,
 } from "../OAuth2Session";
+import ClientAvatar from "../Session/ClientAvatar";
 import EndSessionButton from "../Session/EndSessionButton";
 
 import SessionDetails from "./SessionDetails";
@@ -70,7 +71,19 @@ const OAuth2SessionDetail: React.FC<Props> = ({ session }) => {
   ];
 
   const clientDetails = [
-    { label: "Name", value: data.client.clientName },
+    {
+      label: "Name",
+      value: (
+        <>
+          <ClientAvatar
+            name={data.client.clientName}
+            logoUri={data.client.logoUri || undefined}
+            size="var(--cpd-space-4x)"
+          />
+          {data.client.clientName}
+        </>
+      ),
+    },
     { label: "ID", value: <code>{data.client.clientId}</code> },
     {
       label: "Uri",

frontend/src/components/SessionDetail/SessionDetails.module.css

@@ -33,4 +33,8 @@
 
 .detail-value {
     overflow-wrap: anywhere;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--cpd-space-1x);
 }

frontend/src/components/__snapshots__/CompatSession.test.tsx.snap

@@ -36,7 +36,6 @@ exports[`<CompatSession /> > renders a finished session 1`] = `
   <p
     className="_font-body-sm-regular_1g2sj_45 _sessionMetadata_634806"
   >
-    Client:
      
     <span
       className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
@@ -74,7 +73,6 @@ exports[`<CompatSession /> > renders an active session 1`] = `
   <p
     className="_font-body-sm-regular_1g2sj_45 _sessionMetadata_634806"
   >
-    Client:
      
     <span
       className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"

frontend/src/components/__snapshots__/OAuth2Session.test.tsx.snap

@@ -36,7 +36,6 @@ exports[`<OAuth2Session /> > renders a finished session 1`] = `
   <p
     className="_font-body-sm-regular_1g2sj_45 _sessionMetadata_634806"
   >
-    Client:
      
     <span
       className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"
@@ -74,7 +73,6 @@ exports[`<OAuth2Session /> > renders an active session 1`] = `
   <p
     className="_font-body-sm-regular_1g2sj_45 _sessionMetadata_634806"
   >
-    Client:
      
     <span
       className="_font-body-sm-semibold_1g2sj_49 _sessionMetadata_634806"