Add metadata to sidebar

Author: LauraBeatris

packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx

@@ -1,12 +1,14 @@
 import type { __experimental_ConfigureSSOProps } from '@clerk/shared/types';
 import React from 'react';
 
-import { withCoreUserGuard } from '@/contexts';
-import { Flow, localizationKeys } from '@/customizables';
+import { useEnvironment, withCoreUserGuard } from '@/contexts';
+import { Col, Flex, Flow, localizationKeys, Text } from '@/customizables';
+import { ApplicationLogo } from '@/elements/ApplicationLogo';
 import { withCardStateProvider } from '@/elements/contexts';
 import { NavBar, NavbarContextProvider } from '@/elements/Navbar';
 import { ProfileCard } from '@/elements/ProfileCard';
 import { Route, Switch } from '@/router';
+import { useOrganization } from '@clerk/shared/react/index';
 
 const ConfigureSSOInternal = () => {
   return (
@@ -24,13 +26,39 @@ const ConfigureSSOInternal = () => {
 
 const AuthenticatedContent = withCoreUserGuard(() => {
   const contentRef = React.useRef<HTMLDivElement>(null);
+  const { applicationName } = useEnvironment().displayConfig;
+  const { organizationSettings } = useEnvironment();
+
   return (
     <ProfileCard.Root
       sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}
     >
-      {/* TODO -> Display application + organization information */}
       <NavbarContextProvider contentRef={contentRef}>
         <NavBar
+          header={
+            <Flex
+              sx={t => ({
+                gap: t.space.$2,
+                padding: `${t.space.$none} ${t.space.$3}`,
+                maxWidth: '100%',
+              })}
+            >
+              <ApplicationLogo
+                sx={t => ({ width: t.space.$9, height: t.space.$9, borderRadius: t.radii.$md, overflow: 'hidden' })}
+              />
+
+              <Col sx={t => ({ gap: t.space.$0x5, minWidth: 0 })}>
+                <Text
+                  as='p'
+                  truncate
+                >
+                  {applicationName}
+                </Text>
+                {organizationSettings.enabled && <OrganizationSubtitle />}
+              </Col>
+            </Flex>
+          }
+          titleSx={t => ({ fontSize: t.fontSizes.$lg })}
           title={localizationKeys('configureSSO.navbar.title')}
           routes={[]}
           contentRef={contentRef}
@@ -41,5 +69,18 @@ const AuthenticatedContent = withCoreUserGuard(() => {
   );
 });
 
+const OrganizationSubtitle = () => {
+  const { organization } = useOrganization();
+  return (
+    <Text
+      as='span'
+      truncate
+      sx={t => ({ color: t.colors.$colorMutedForeground })}
+    >
+      {organization?.name}
+    </Text>
+  );
+};
+
 export const ConfigureSSO: React.ComponentType<__experimental_ConfigureSSOProps> =
   withCardStateProvider(ConfigureSSOInternal);

packages/ui/src/elements/Navbar.tsx

@@ -7,7 +7,7 @@ import type { ElementDescriptor, ElementId } from '../customizables/elementDescr
 import { useNavigateToFlowStart, usePopover } from '../hooks';
 import { Menu } from '../icons';
 import { useRouter } from '../router';
-import type { PropsOfComponent } from '../styledSystem';
+import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
 import { animations, common, mqu } from '../styledSystem';
 import { colors } from '../utils/colors';
 import { Card } from './Card';
@@ -44,14 +44,15 @@ export type NavbarRoute = {
 };
 type NavBarProps = {
   title: LocalizationKey;
+  titleSx?: ThemableCssProp;
   description?: LocalizationKey;
   contentRef: React.RefObject<HTMLDivElement>;
   routes: NavbarRoute[];
   header?: React.ReactNode;
 };
 
 export const NavBar = (props: NavBarProps) => {
-  const { contentRef, title, description, routes, header } = props;
+  const { contentRef, title, titleSx, description, routes, header } = props;
   const { close } = useNavbarContext();
   const { navigate } = useRouter();
   const { navigateToFlowStart } = useNavigateToFlowStart();
@@ -126,6 +127,7 @@ export const NavBar = (props: NavBarProps) => {
     <>
       <NavbarContainer
         title={title}
+        titleSx={titleSx}
         description={description}
       >
         {header}
@@ -140,9 +142,13 @@ export const NavBar = (props: NavBarProps) => {
 };
 
 const NavbarContainer = (
-  props: React.PropsWithChildren<{ title: LocalizationKey | string; description?: LocalizationKey | string }>,
+  props: React.PropsWithChildren<{
+    title: LocalizationKey | string;
+    titleSx?: ThemableCssProp;
+    description?: LocalizationKey | string;
+  }>,
 ) => {
-  const { title, description } = props;
+  const { title, titleSx, description } = props;
   return (
     <Col
       elementDescriptor={descriptors.navbar}
@@ -172,6 +178,7 @@ const NavbarContainer = (
         >
           <Heading
             as='h1'
+            sx={titleSx}
             localizationKey={title}
           />