feat: add build mode banner (#25)

* feat: add build mode banner

* fix: ts import

kontrol-frontend/src/components/Banner/Banner.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Banner from ".";
+
+const meta: Meta<typeof Banner> = {
+  component: Banner,
+};
+
+export default meta;
+type Story = StoryObj<typeof Banner>;
+
+export const Example: Story = {
+  args: {},
+};

kontrol-frontend/src/components/Banner/index.tsx

@@ -0,0 +1,68 @@
+import { useNavigationContext } from "@/contexts/NavigationContext";
+import { Box, Flex, Text, CloseButton } from "@chakra-ui/react";
+
+const Banner = () => {
+  const { isBannerVisible, setIsBannerVisible } = useNavigationContext();
+
+  if (!isBannerVisible) {
+    return null;
+  }
+
+  return (
+    <Box bg="orange.100" borderRadius={12} p={4} mb={"32px"}>
+      <Flex justifyContent="space-between">
+        <Flex gap={"10px"}>
+          <Flex
+            alignItems="center"
+            justifyContent="center"
+            borderRadius={8}
+            w={"40px"}
+            h={"40px"}
+            background={"white"}
+            flexShrink={0}
+          >
+            <Text style={{ fontSize: 25 }}>🚧</Text>
+          </Flex>
+          <Box>
+            <Text fontWeight="bold" color="orange.500">
+              WELCOME! KARDINAL IS STILL IN BUILD MODE
+            </Text>
+            <Text fontSize="sm" color={"gray.700"}>
+              The features you see in the UI might differ from the CLI, we're
+              currently working towards feature parity. <br /> If you have
+              comments or suggestions, please{" "}
+              <Text
+                as="a"
+                textDecoration="underline"
+                cursor="pointer"
+                href="https://github.com/kurtosis-tech/kardinal/issues"
+                target="_blank"
+              >
+                open a github issue
+              </Text>{" "}
+              or{" "}
+              <Text
+                as="a"
+                textDecoration="underline"
+                cursor="pointer"
+                href="mailto:[email protected]"
+              >
+                reach out via email
+              </Text>{" "}
+              and help us shape the product!
+            </Text>
+          </Box>
+        </Flex>
+        <CloseButton
+          size="sm"
+          onClick={() => {
+            setIsBannerVisible(false);
+          }}
+          color="orange.500"
+        />
+      </Flex>
+    </Box>
+  );
+};
+
+export default Banner;

kontrol-frontend/src/components/Layout/index.tsx

@@ -1,35 +1,40 @@
 import { GridItem, Grid } from "@chakra-ui/react";
 import { ReactNode } from "react";
+import Banner from "@/components/Banner";
 
 interface Props {
   children: ReactNode[];
+  showBanner?: boolean;
 }
 
-const Layout = ({ children }: Props) => {
+const Layout = ({ children, showBanner }: Props) => {
   return (
-    <Grid
-      mt={4}
-      templateAreas={`
+    <>
+      {showBanner && <Banner />}
+      <Grid
+        mt={4}
+        templateAreas={`
         "title title"
         "a a"
         "b b"
         "c d"
         "footer footer"
       `}
-      gridTemplateRows={"64px auto auto auto 40px"}
-      gridTemplateColumns={"1fr 1fr"}
-      h="100%"
-      rowGap={8}
-      columnGap={4}
-      color="blackAlpha.700"
-      fontWeight="bold"
-    >
-      {["title", "a", "b", "c", "d", "footer"].map((area, i) => (
-        <GridItem area={area} display="flex" flexDirection={"column"}>
-          {children[i]}
-        </GridItem>
-      ))}
-    </Grid>
+        gridTemplateRows={"64px auto auto auto 40px"}
+        gridTemplateColumns={"1fr 1fr"}
+        h="100%"
+        rowGap={8}
+        columnGap={4}
+        color="blackAlpha.700"
+        fontWeight="bold"
+      >
+        {["title", "a", "b", "c", "d", "footer"].map((area, i) => (
+          <GridItem area={area} display="flex" flexDirection={"column"}>
+            {children[i]}
+          </GridItem>
+        ))}
+      </Grid>
+    </>
   );
 };
 

kontrol-frontend/src/contexts/NavigationContext.tsx

@@ -1,16 +1,19 @@
 import { createContext, useContext, useState, ReactNode } from "react";
 
-// Define the shape of your context
 interface NavigationContextType {
-  // Add your context properties here
   isSidebarCollapsed: boolean;
   setIsSidebarCollapsed: (c: boolean) => void;
+  isBannerVisible: boolean;
+  setIsBannerVisible: (c: boolean) => void;
 }
 
 // Create the context with a default value
-const NavigationContext = createContext<NavigationContextType | undefined>(
-  undefined,
-);
+const NavigationContext = createContext<NavigationContextType>({
+  isSidebarCollapsed: false,
+  setIsSidebarCollapsed: () => {},
+  isBannerVisible: true,
+  setIsBannerVisible: () => {},
+});
 
 // Create a provider component
 interface NavigationContextProviderProps {
@@ -21,12 +24,15 @@ export const NavigationContextProvider = ({
   children,
 }: NavigationContextProviderProps) => {
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [isBannerVisible, setIsBannerVisible] = useState(true);
 
   return (
     <NavigationContext.Provider
       value={{
         isSidebarCollapsed,
         setIsSidebarCollapsed,
+        isBannerVisible,
+        setIsBannerVisible,
       }}
     >
       {children}

kontrol-frontend/src/pages/FlowsCreate.tsx

@@ -125,7 +125,7 @@ const Page = () => {
   const formIsValid = formState.name.length > 0 && formState.service.length > 0;
 
   return (
-    <Layout>
+    <Layout showBanner>
       <PageTitle title="Create new flow configuration">
         Update traffic control and data isolation details below
       </PageTitle>

kontrol-frontend/src/theme.ts

@@ -23,6 +23,7 @@ export const colorOverrides: Record<string, Record<string, string>> = {
   },
   orange: {
     "500": "#FF602C",
+    "100": "#FCA0610D",
   },
   blue: {
     "50": "#F6FAFF",