change Your Products header

bcgov · Jun 5, 2024 · 7d83ab8 · 7d83ab8
1 parent d1dc8c5
commit 7d83ab8
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 7 deletions.
diff --git a/src/nextapp/components/page-header/page-header.tsx b/src/nextapp/components/page-header/page-header.tsx
@@ -15,16 +15,18 @@ interface PageHeaderProps {
   breadcrumb?: { href?: string; text: string }[];
   children?: React.ReactNode;
   title: React.ReactNode;
+  apiDirectoryNav?: boolean;
 }
 
 const PageHeader: React.FC<PageHeaderProps> = ({
   actions,
   breadcrumb,
   children,
   title,
+  apiDirectoryNav
 }) => {
   return (
-    <Box pt={!breadcrumb ? 10 : 4} pb={4}>
+    <Box pt={!breadcrumb && !apiDirectoryNav ? 10 : 4} pb={4}>
       <Box as="header" display="flex" flexDirection="column" mb={4}>
         {breadcrumb && (
           <Box as="hgroup" mb={2}>

diff --git a/src/nextapp/pages/devportal/api-directory/your-products.tsx b/src/nextapp/pages/devportal/api-directory/your-products.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import ApiDirectoryNav from '@/components/api-directory-nav';
-import { Box, Button, Container, Text } from '@chakra-ui/react';
+import { Box, Button, Container, Flex, Icon, Skeleton, Text, Tooltip } from '@chakra-ui/react';
 import EmptyPane from '@/components/empty-pane';
+import { FaCheckCircle } from 'react-icons/fa';
 import Head from 'next/head';
 import PageHeader from '@/components/page-header';
 import { restApi } from '@/shared/services/api';
@@ -25,6 +26,38 @@ const ApiDiscoveryPage: React.FC = () => {
     )
   );
   const namespace = useCurrentNamespace();
+  const hasNamespace = !!user?.namespace;
+  const title = (
+    <>
+      {(namespace.isFetching || namespace.isLoading) && (
+        <Skeleton width="400px" height="20px" mt={4} />
+      )}
+      {namespace.isSuccess && !namespace.isFetching && (
+        <>
+          <Flex align="center" gridGap={4}>
+            {namespace.data?.currentNamespace?.displayName}
+            {namespace.data?.currentNamespace?.orgEnabled && (
+              <Tooltip
+                hasArrow
+                label={`${user.namespace} is enabled to publish APIs to the directory`}
+              >
+                <Box display="flex">
+                  <Icon
+                    as={FaCheckCircle}
+                    color="bc-success"
+                    boxSize="0.65em"
+                  />
+                </Box>
+              </Tooltip>
+            )}
+          </Flex>
+          <Text fontSize="xl" pt={1}>
+            {namespace?.data.currentNamespace?.name}
+          </Text>
+        </>
+      )}
+    </>
+  )
 
   return (
     <>
@@ -34,16 +67,14 @@ const ApiDiscoveryPage: React.FC = () => {
       <PreviewBanner />
       <Container maxW="6xl">
         <ApiDirectoryNav />
-        <PageHeader
-          title={namespace.data.currentNamespace?.displayName ? `${namespace.data.currentNamespace?.displayName} Products` : 'Draft Products'}
-        >
+        <PageHeader apiDirectoryNav={true} title={hasNamespace ? title : ''}>
           <Text>
             {user &&
-              'A list of the published and unpublished products under your namespace'}
+              'A list of the published and unpublished products under your gateway.'}
             {!user && 'You must be signed in to view this page'}
           </Text>
         </PageHeader>
-        <Box my={8}>
+        <Box my={2}>
           {data?.length === 0 && (
             <Box bgColor="white">
               <EmptyPane