Display domain as sidebar footer

Author: LauraBeatris

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

@@ -1,8 +1,8 @@
-import { useOrganization } from '@clerk/shared/react/index';
+import { useOrganization, useUser } from '@clerk/shared/react/index';
 import React from 'react';
 
 import { useEnvironment } from '@/contexts';
-import { Box, Col, Flex, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
+import { Box, Col, Flex, Hr, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
 import { ApplicationLogo } from '@/elements/ApplicationLogo';
 import { NavBar, NavbarContextProvider } from '@/elements/Navbar';
 import { BoxIcon } from '@/icons';
@@ -77,6 +77,7 @@ export const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarP
         title={localizationKeys('configureSSO.navbar.title')}
         routes={[]}
         contentRef={contentRef}
+        footer={<PrimaryEmailDomainFooter />}
       />
       {children}
     </NavbarContextProvider>
@@ -100,3 +101,31 @@ const OrganizationSidebarSubtitle = (): JSX.Element | null => {
     </Text>
   );
 };
+
+const PrimaryEmailDomainFooter = (): JSX.Element | null => {
+  const { user } = useUser();
+  const emailDomain = user?.primaryEmailAddress?.emailAddress.split('@')[1];
+
+  if (!emailDomain) {
+    return null;
+  }
+
+  return (
+    <Col
+      sx={t => ({
+        gap: t.space.$6,
+        padding: `${t.space.$none} ${t.space.$3}`,
+      })}
+    >
+      <Hr sx={{ backgroundColor: 'borderAlpha100' }} />
+
+      <Text
+        as='span'
+        truncate
+        sx={{ textDecoration: 'underline' }}
+      >
+        {emailDomain}
+      </Text>
+    </Col>
+  );
+};

packages/ui/src/elements/Navbar.tsx

@@ -50,10 +50,11 @@ type NavBarProps = {
   contentRef: React.RefObject<HTMLDivElement>;
   routes: NavbarRoute[];
   header?: React.ReactNode;
+  footer?: React.ReactNode;
 };
 
 export const NavBar = (props: NavBarProps) => {
-  const { contentRef, title, titleSx, containerSx, description, routes, header } = props;
+  const { contentRef, title, titleSx, containerSx, description, routes, header, footer } = props;
   const { close } = useNavbarContext();
   const { navigate } = useRouter();
   const { navigateToFlowStart } = useNavigateToFlowStart();
@@ -132,13 +133,15 @@ export const NavBar = (props: NavBarProps) => {
         titleSx={titleSx}
         containerSx={containerSx}
         description={description}
+        footer={footer}
       >
         {header}
         {items}
       </NavbarContainer>
       <MobileNavbarContainer>
         {header}
         {items}
+        {footer}
       </MobileNavbarContainer>
     </>
   );
@@ -150,9 +153,10 @@ const NavbarContainer = (
     titleSx?: ThemableCssProp;
     containerSx?: ThemableCssProp;
     description?: LocalizationKey | string;
+    footer?: React.ReactNode;
   }>,
 ) => {
-  const { title, titleSx, containerSx, description } = props;
+  const { title, titleSx, containerSx, description, footer } = props;
   return (
     <Col
       elementDescriptor={descriptors.navbar}
@@ -174,6 +178,7 @@ const NavbarContainer = (
       <DevModeOverlay />
 
       <Col sx={[t => ({ gap: t.space.$6, flex: `0 0 ${t.space.$60}` }), containerSx]}>
+        {footer}
         <Col
           sx={t => ({
             gap: t.space.$0x5,