From 7c1d5b1cfcd59ad2ef7d6ad17ee5d621ad5a0de3 Mon Sep 17 00:00:00 2001
From: Carson <cpartee6@gmail.com>
Date: Tue, 17 Dec 2024 16:13:02 -0800
Subject: [PATCH] Ability to pass in right justified title content for
 PageSectionBoxActionRow (#14439)

GitOrigin-RevId: 4e83b8ba47e14577513bc1820dc89ed4f61bd3d6
---
 .../src/components/PageSection/PageSection.tsx  | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/PageSection/PageSection.tsx b/packages/ui/src/components/PageSection/PageSection.tsx
index 00d24b6c..c341c98b 100644
--- a/packages/ui/src/components/PageSection/PageSection.tsx
+++ b/packages/ui/src/components/PageSection/PageSection.tsx
@@ -193,6 +193,7 @@ type PageSectionBoxActionRowProps = {
   title?: string;
   titleBadge?: string | undefined;
   titleBadgeKind?: BadgeKind | undefined;
+  titleRightContent?: React.ReactNode;
   description?: string;
   separator?: boolean;
   children?: React.ReactNode;
@@ -203,6 +204,7 @@ export const PageSectionBoxActionRow = ({
   title,
   titleBadge,
   titleBadgeKind = "default",
+  titleRightContent,
   description,
   separator,
   children,
@@ -216,12 +218,15 @@ export const PageSectionBoxActionRow = ({
         smFlexColumn={Boolean(smFlexColumn)}
       >
         {title ? (
-          <div>
+          <div css={{ flex: 1 }}>
             <PageSectionBoxTitle>
-              {title}
-              {titleBadge ? (
-                <Badge content={titleBadge} ml={4} kind={titleBadgeKind} />
-              ) : null}
+              <div>
+                {title}
+                {titleBadge ? (
+                  <Badge content={titleBadge} ml={4} kind={titleBadgeKind} />
+                ) : null}
+              </div>
+              {titleRightContent}
             </PageSectionBoxTitle>
             {description ? (
               <PageSectionBoxDescription>
@@ -374,6 +379,8 @@ export const StyledPageSectionBox = styled.div`
 export const PageSectionBoxTitle = styled.div<{ lg?: boolean }>`
   display: flex;
   align-items: center;
+  width: 100%;
+  justify-content: space-between;
   font-size: ${({ lg }) => (lg ? 14 : 12)}px;
   font-weight: 600;
   line-height: ${({ lg }) =>