Disclosure of info

seek-oss · Nov 1, 2024 · 4b178ae · 4b178ae
1 parent 2e1c5fb
commit 4b178ae
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/.github/workflows/preview-site.yml b/.github/workflows/preview-site.yml
@@ -39,6 +39,7 @@ jobs:
         env:
           BASE_NAME: /braid-design-system/preview/${{ github.sha }}
           BRANCH_NAME: ${{ github.ref_name }}
+          HEAD_BRANCH_NAME: ${{ github.head_ref }}
 
       - name: Deploy preview site
         uses: JamesIves/github-pages-deploy-action@881db5376404c5c8d621010bcbec0310b58d5e29 # 4.6.0

diff --git a/site/src/App/Navigation/Navigation.tsx b/site/src/App/Navigation/Navigation.tsx
@@ -3,8 +3,9 @@ import { useLocation, Outlet } from 'react-router-dom';
 import { useWindowScroll, useInterval } from 'react-use';
 import {
   ContentBlock,
+  Disclosure,
+  IconNewWindow,
   IconRocket,
-  Strong,
   Text,
   TextLink,
 } from 'braid-src/lib/components';
@@ -53,7 +54,7 @@ export const Navigation = () => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [showStickyHeader, setShowStickyHeader] = useState(false);
   const [direction, setDirection] = useState<'up' | 'down' | null>(null);
-  const config = useConfig();
+  const { branchName, headBranchName } = useConfig();
 
   const location = useLocation();
   useEffect(() => setDirection(null), [location]);
@@ -120,7 +121,7 @@ export const Navigation = () => {
       >
         <Box paddingBottom="xxlarge" marginBottom="xxlarge">
           <Outlet />
-          {config.branchName && (
+          {branchName && (
             <Box
               position="fixed"
               zIndex="sticky"
@@ -134,13 +135,31 @@ export const Navigation = () => {
             >
               <Text icon={<IconRocket />}>
                 Branch preview:{' '}
-                <TextLink
-                  href={`https://github.com/seek-oss/braid-design-system/compare/master...${config.branchName}`}
-                  target="_blank"
-                  weight="weak"
+                <Disclosure
+                  id="preview-site-info"
+                  expandLabel={branchName}
+                  space="none"
                 >
-                  <Strong>{config.branchName}</Strong>
-                </TextLink>
+                  <TextLink
+                    href="https://seek-oss.github.io/braid-design-system/"
+                    target="_blank"
+                    weight="weak"
+                    icon={<IconNewWindow />}
+                    iconPosition="trailing"
+                  >
+                    Production site
+                  </TextLink>
+                  <br />
+                  <TextLink
+                    href={`https://github.com/seek-oss/braid-design-system/compare/${headBranchName}...${branchName}`}
+                    target="_blank"
+                    weight="weak"
+                    icon={<IconNewWindow />}
+                    iconPosition="trailing"
+                  >
+                    View diff on GitHub
+                  </TextLink>
+                </Disclosure>
               </Text>
             </Box>
           )}

diff --git a/site/src/render.tsx b/site/src/render.tsx
@@ -20,6 +20,7 @@ const skuRender: Render<RenderContext> = {
     const {
       BASE_NAME: routerBasename = '',
       BRANCH_NAME: branchName = '',
+      HEAD_BRANCH_NAME: headBranchName = 'master',
       GITHUB_SHA: prSha,
       CI,
     } = process.env;
@@ -38,6 +39,7 @@ const skuRender: Render<RenderContext> = {
       playroomUrl,
       sourceUrlPrefix,
       branchName,
+      headBranchName,
     };
 
     const today = new Date();

diff --git a/site/src/types.d.ts b/site/src/types.d.ts
@@ -10,6 +10,7 @@ export interface AppConfig {
   playroomUrl: string;
   sourceUrlPrefix: string;
   branchName?: string;
+  headBranchName?: string;
 }
 
 export interface RenderContext {