add coming soon to tests

metlo-labs · Aug 5, 2022 · 78bd1a4 · 78bd1a4
1 parent 0f35b8c
commit 78bd1a4
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 39 deletions.
diff --git a/frontend/src/components/Sidebar/SideNavLink.tsx b/frontend/src/components/Sidebar/SideNavLink.tsx
@@ -20,56 +20,73 @@ import {
 interface SideNavLinkProps extends LinkProps {
   destination: SideNavLinkDestination;
   isActive?: boolean;
+  isComingSoon?: boolean;
 }
 
 const SideNavLink: React.FC<SideNavLinkProps> = React.memo(
-  ({ isActive, destination, ...rest }) => {
+  ({ isActive, destination, isComingSoon, ...rest }) => {
     const iconColor = isActive
       ? "primary"
       : useColorModeValue("rgb(163, 165, 170)", "rgb(98, 100, 116)");
     return (
-      <NextLink href={sideNavDestinationToHref(destination)}>
-        <Link
-          display="block"
-          py={3}
-          px={4}
-          borderRadius="lg"
-          transition="all 0.15s"
-          fontWeight="medium"
-          lineHeight="1.5rem"
-          aria-current={isActive ? "page" : undefined}
-          _hover={{
-            bg: useColorModeValue("rgb(240, 240, 242)", "rgb(25, 28, 35)"),
-          }}
-          _activeLink={{
-            color: useColorModeValue("black", "white"),
-          }}
-          {...rest}
-        >
-          <Box display={{ xl: "unset", base: "none" }}>
-            <HStack spacing={4} alignItems="center">
+      <Box pointerEvents={isComingSoon ? "none" : "unset"}>
+        <NextLink href={sideNavDestinationToHref(destination)}>
+          <Link
+            display="block"
+            py={3}
+            px={4}
+            borderRadius="lg"
+            transition="all 0.15s"
+            fontWeight="medium"
+            lineHeight="1.5rem"
+            aria-current={isActive ? "page" : undefined}
+            _hover={{
+              bg: useColorModeValue("rgb(240, 240, 242)", "rgb(25, 28, 35)"),
+            }}
+            _activeLink={{
+              color: useColorModeValue("black", "white"),
+            }}
+            {...rest}
+          >
+            <Box display={{ xl: "unset", base: "none" }}>
+              <HStack justifyContent="space-between" alignItems="center">
+                <HStack spacing={4} alignItems="center">
+                  <Icon
+                    as={sideNavDestinationToIcon(destination)}
+                    boxSize="20px"
+                    color={iconColor}
+                  />
+                  <Text>{sideNavDestinationToLabel(destination)}</Text>
+                </HStack>
+                {isComingSoon ? (
+                  <Text
+                    fontSize="xs"
+                    bg="primary"
+                    textColor="white"
+                    px="2"
+                    rounded="full"
+                    fontWeight="semibold"
+                  >
+                    Coming Soon
+                  </Text>
+                ) : null}
+              </HStack>
+            </Box>
+            <Flex
+              w="full"
+              h="full"
+              display={{ xl: "none", base: "flex" }}
+              justifyContent="center"
+            >
               <Icon
                 as={sideNavDestinationToIcon(destination)}
-                boxSize="20px"
+                boxSize="22px"
                 color={iconColor}
               />
-              <Text>{sideNavDestinationToLabel(destination)}</Text>
-            </HStack>
-          </Box>
-          <Flex
-            w="full"
-            h="full"
-            display={{ xl: "none", base: "flex" }}
-            justifyContent="center"
-          >
-            <Icon
-              as={sideNavDestinationToIcon(destination)}
-              boxSize="22px"
-              color={iconColor}
-            />
-          </Flex>
-        </Link>
-      </NextLink>
+            </Flex>
+          </Link>
+        </NextLink>
+      </Box>
     );
   }
 );

diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/index.tsx
@@ -64,6 +64,7 @@ const SideNavBar: React.FC<SideNavBarProps> = React.memo(({ currentTab }) => {
         <SideNavLink
           destination={SideNavLinkDestination.Tests}
           isActive={currentTab === SideNavLinkDestination.Tests}
+          isComingSoon
         />
         <SideNavLink
           destination={SideNavLinkDestination.Alerts}