♻️ Add EmptyState and Quickstart components (#245)

Author: alejsdev

frontend/src/components/Common/EmptyState.tsx

@@ -0,0 +1,32 @@
+import { Button, Heading, Text } from "@chakra-ui/react"
+import { Link as RouterLink } from "@tanstack/react-router"
+import CustomCard from "./CustomCard"
+
+interface EmptyStateProps {
+  type: string
+}
+
+const EmptyState = ({ type }: EmptyStateProps) => {
+  return (
+    <CustomCard
+      w={{ base: "100%", md: "60%" }}
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      gap="4"
+    >
+      <Heading size="sm" textAlign="center">
+        You don't have any {type} yet
+      </Heading>
+      <Text>
+        Create your first {type} to get started and deploy it to the cloud.
+      </Text>
+      <Button as={RouterLink} to="/$team/apps/new" variant="secondary">
+        Create {`${type[0].toLocaleUpperCase()}${type.slice(1)}`}
+      </Button>
+    </CustomCard>
+  )
+}
+
+export default EmptyState

frontend/src/components/Common/QuickStart.tsx

@@ -0,0 +1,33 @@
+import { Code, Heading, Link, Text, VStack } from "@chakra-ui/react"
+import CustomCard from "./CustomCard"
+
+const QuickStart = () => {
+  return (
+    <CustomCard w={{ base: "100%", md: "40%" }} data-testid="fastapi-cli">
+      <VStack spacing={4} align="flex-start">
+        <Heading size="sm">Quick Start with FastAPI CLI</Heading>
+        <Text>
+          FastAPI CLI is your primary tool for managing your apps. Before you
+          start, make sure you have FastAPI CLI installed on your machine. You
+          can install it using pip:
+        </Text>
+        <Text>
+          <Code>pip install fastapi-cli</Code>
+        </Text>
+        <Heading size="sm">Getting started:</Heading>
+        <Text>
+          1. Initialize your app: <Code>fastapi init</Code>
+        </Text>
+        <Text>
+          2. Deploy your app: <Code>fastapi deploy</Code>
+        </Text>
+        <Text>
+          You can learn more in the{" "}
+          <Link color="ui.main">FastAPI CLI documentation</Link>.
+        </Text>
+      </VStack>
+    </CustomCard>
+  )
+}
+
+export default QuickStart

frontend/src/components/Common/SidebarItems.tsx

@@ -16,11 +16,7 @@ import {
   type UseLinkPropsOptions,
 } from "@tanstack/react-router"
 import { CgOrganisation } from "react-icons/cg"
-import {
-  FaCog,
-  FaHome,
-  FaLayerGroup
-} from "react-icons/fa"
+import { FaCog, FaHome, FaLayerGroup } from "react-icons/fa"
 
 import { useCurrentUser } from "../../hooks/useAuth"
 import { Route } from "../../routes/_layout/$team"
@@ -73,7 +69,7 @@ const getSidebarItems = ({ team }: { team: string }): Array<Item> => {
       ...link({
         to: "/teams/all",
       }),
-    }
+    },
   ]
 }
 

frontend/src/routes/_layout/$team/apps/index.tsx

@@ -10,6 +10,7 @@ import {
   TableContainer,
   Tbody,
   Td,
+  Text,
   Th,
   Thead,
   Tr,
@@ -20,11 +21,13 @@ import {
   createFileRoute,
   useNavigate,
 } from "@tanstack/react-router"
-import { z } from "zod"
-
 import { useEffect } from "react"
 import { ErrorBoundary } from "react-error-boundary"
+import { z } from "zod"
+
 import { AppsService } from "../../../../client"
+import EmptyState from "../../../../components/Common/EmptyState"
+import QuickStart from "../../../../components/Common/QuickStart"
 
 const appsSearchSchema = z.object({
   page: z.number().catch(1).optional(),
@@ -93,14 +96,22 @@ function Apps() {
 
   return (
     <Container maxW="full">
-      <Heading size="md" textAlign={{ base: "center", md: "left" }} mb={6}>
+      <Heading size="md" textAlign={{ base: "center", md: "left" }} pb={2}>
         Apps
       </Heading>
-      <Flex justifyContent="end">
-        <Button as={RouterLink} to="/$team/apps/new" mb={4}>
-          Create App
-        </Button>
-      </Flex>
+      <Text>View and manage apps related to your team.</Text>
+      {(apps?.data?.length ?? 0) > 0 && (
+        <Flex justifyContent="end">
+          <Button
+            variant="secondary"
+            as={RouterLink}
+            to="/$team/apps/new"
+            mb={4}
+          >
+            Create App
+          </Button>
+        </Flex>
+      )}
       <ErrorBoundary
         fallbackRender={({ error }) => (
           <Box>Something went wrong: {error.message}</Box>
@@ -181,8 +192,10 @@ function Apps() {
             </Flex>
           </>
         ) : (
-          // TODO: Add new empty state component
-          <Box>No apps found</Box>
+          <Flex gap={4} pt={10} flexDir={{ base: "column", md: "row" }}>
+            <EmptyState type="app" />
+            <QuickStart />
+          </Flex>
         )}
       </ErrorBoundary>
     </Container>

frontend/tests/apps.spec.ts

@@ -7,27 +7,25 @@ import {
 } from "./utils/random"
 import { createTeam, logInUser, signUpNewUser } from "./utils/userUtils"
 
-// test.describe("Apps empty states", () => {
-//   test("Empty state is visible when there are no apps", async ({ page }) => {
-//     await page.goto("/admin/apps/")
-//     await expect(page.getByText("You don't have any apps yet")).toBeVisible()
-//   })
+test.describe("Apps empty states", () => {
+  test("Empty state is visible when there are no apps", async ({ page }) => {
+    await page.goto("/admin/apps/")
+    await expect(
+      page.getByRole("heading", { name: "You don't have any app yet" }),
+    ).toBeVisible()
+  })
 
-//   test("FastAPI CLI instructions are visible", async ({ page, request }) => {
-//     await page.goto("/admin/apps/")
-//     await expect(page.getByTestId("fastapi-cli")).toBeVisible()
-//   })
+  test("FastAPI CLI instructions are visible", async ({ page, request }) => {
+    await page.goto("/admin/apps/")
+    await expect(page.getByTestId("fastapi-cli")).toBeVisible()
+  })
 
-//   test("Create button is visible and navigates correctly", async ({ page }) => {
-//     await page.goto("/admin/apps/")
-//     await page
-//       .locator("div")
-//       .filter({ hasText: /^Create App$/ })
-//       .nth(1)
-//       .click()
-//     await expect(page).toHaveURL("/admin/apps/new")
-//   })
-// })
+  test("Create button is visible and navigates correctly", async ({ page }) => {
+      await page.goto("/admin/apps/")
+      await page.getByRole('link', { name: 'Create App' }).click();
+      await expect(page).toHaveURL('/admin/apps/new')
+  })
+})
 
 test.describe("User can manage apps succesfully", () => {
   test.use({ storageState: { cookies: [], origins: [] } })