Badge if gateway is new, and minor tweaks

bcgov · Jun 13, 2024 · f72ac55 · f72ac55
1 parent 2b99bbf
commit f72ac55
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 25 deletions.
diff --git a/src/nextapp/components/publishing-popover/publishing-popover.tsx b/src/nextapp/components/publishing-popover/publishing-popover.tsx
@@ -23,9 +23,9 @@ const PublishingPopover: React.FC<PublishingPopoverProps> = ({ status }) => {
       {status === 'disabled' && (
         <Popover trigger="hover">
           <PopoverTrigger>
-            <Center>
+            <Center p={1}>
               <Icon as={FaMinusCircle} color="#B0B0B0" mr={2} boxSize={4} />
-              <Text fontSize="sm" w={40}>
+              <Text fontSize="sm" w={36}>
                 Publishing disabled
               </Text>
             </Center>
@@ -60,9 +60,9 @@ const PublishingPopover: React.FC<PublishingPopoverProps> = ({ status }) => {
       {status === 'pending' && (
         <Popover trigger="hover">
           <PopoverTrigger>
-            <Center>
+            <Center p={1}>
               <Icon as={FaClock} color="#EE9B1F" mr={2} boxSize={4} />
-              <Text fontSize="sm" w={40}>
+              <Text fontSize="sm" w={36}>
                 Pending publishing permission
               </Text>
             </Center>
@@ -88,9 +88,9 @@ const PublishingPopover: React.FC<PublishingPopoverProps> = ({ status }) => {
       {status === 'enabled' && (
         <Popover trigger="hover">
           <PopoverTrigger>
-            <Center>
+            <Center p={1}>
               <Icon as={FaCheckCircle} color="#2E8540" mr={2} boxSize={4} />
-              <Text fontSize="sm" w={40}>
+              <Text fontSize="sm" w={36}>
                 Publishing enabled
               </Text>
             </Center>

diff --git a/src/nextapp/pages/manager/gateways/index.tsx b/src/nextapp/pages/manager/gateways/index.tsx
@@ -12,11 +12,13 @@ import {
   Spacer,
   useToast,
   Select,
+  Center,
 } from '@chakra-ui/react';
 import Head from 'next/head';
 import { gql } from 'graphql-request';
 import { FaPlus, FaLaptopCode, FaRocket, FaServer } from 'react-icons/fa';
 import { useQueryClient } from 'react-query';
+import { differenceInDays } from 'date-fns';
 
 import PageHeader from '@/components/page-header';
 import GridLayout from '@/layouts/grid';
@@ -73,6 +75,7 @@ const MyGatewaysPage: React.FC = () => {
     { query },
     { suspense: false }
   );
+  const today = new Date();
 
   // Namespace change
   const client = useQueryClient();
@@ -240,29 +243,43 @@ const MyGatewaysPage: React.FC = () => {
                   border="1px solid"
                   borderColor="#E1E1E5"
                   minH={16}
-                  px={4}
+                  px={5}
                   py={2}
                   mb={4}
                 >
                   <Box>
-                    <Icon
-                      as={FaServer}
-                      color="bc-blue"
-                      mb={0.5}
-                      mr={4}
-                      boxSize={4}
-                    />
-                    <Link
-                      fontSize="md"
-                      as="b"
-                      color="bc-blue"
-                      onClick={handleNamespaceChange(namespace)}
-                    >
-                      {namespace.displayName
-                        ? namespace.displayName
-                        : namespace.name}
-                    </Link>
-                    <Text fontSize="md" pl={8}>
+                    <Flex alignItems="center">
+                      <Icon as={FaServer} color="bc-blue" mr={4} boxSize={4} />
+                      <Link
+                        fontSize="md"
+                        as="b"
+                        color="bc-blue"
+                        mr={2}
+                        onClick={handleNamespaceChange(namespace)}
+                      >
+                        {namespace.displayName
+                          ? namespace.displayName
+                          : namespace.name}
+                      </Link>
+                      {differenceInDays(
+                        today,
+                        new Date(namespace.orgUpdatedAt)
+                      ) <= 5 && (
+                        <Center
+                          w={12}
+                          h={6}
+                          bg="#E9F0F8"
+                          borderRadius="md"
+                          border="1px solid"
+                          borderColor="#8E8E8E59"
+                        >
+                          <Text fontSize="sm" color="#333333">
+                            New
+                          </Text>
+                        </Center>
+                      )}
+                    </Flex>
+                    <Text fontSize="md" pl="33px">
                       {namespace.name}
                     </Text>
                   </Box>