Some improvements

* Add recommended extensions * Better filtering * Added message when there is nothing to show
m-adawi · Aug 25, 2024 · bd4abac · bd4abac
1 parent 318cb11
commit bd4abac
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 16 deletions.
diff --git a/ui/.vscode/extensions.json b/ui/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "SonarSource.sonarlint-vscode"],
+  "unwantedRecommendations": []
+}
diff --git a/ui/README.md b/ui/README.md
@@ -1,6 +1,6 @@
 # SwarmCD UI
 
-This repository contains the code for the Swarm-CD UI, a web-based user interface for checking the deployment status. The UI is built using React and bundled by Vite for fast and efficient development and build processes.
+This repository contains the code for the SwarmCD UI, a web-based user interface for checking the deployment status. The UI is built using React and bundled by Vite for fast and efficient development and build processes.
 
 ## Installation
 
@@ -12,7 +12,7 @@ This repository contains the code for the Swarm-CD UI, a web-based user interfac
 
 ## Directory structure
 
-```
+```text
 swarm-cd-ui/
 ├── public/                # Static assets
 ├── src/                   # Source files
@@ -24,3 +24,19 @@ swarm-cd-ui/
 ├── package.json           # Project metadata and scripts
 └── vite.config.ts         # Vite configuration
 ```
+
+Recommended `.vscode/settings.json`:
+
+```json
+{
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "always",
+    "source.fixAll.eslint": "always"
+  },
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "eslint.format.enable": true,
+  "eslint.lintTask.enable": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
+```
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -11,13 +11,13 @@ function App(): React.ReactElement {
   return (
     <>
       <Container maxW="container.lg" mt={4}>
-        <HeaderBar onQueryChange={query => setSearchQuery(query)} />
-        {error !== null ? (
-          <Text fontSize="xl" align="center">
+        <HeaderBar onQueryChange={query => setSearchQuery(query)} error={error !== null} />
+        {error === null ? (
+          <StatusCardList statuses={stacks} query={searchQuery} />
+        ) : (
+          <Text fontSize="xl" align="center" color="red.500">
             {error}
           </Text>
-        ) : (
-          <StatusCardList statuses={stacks} query={searchQuery} />
         )}
       </Container>
     </>

diff --git a/ui/src/components/HeaderBar.tsx b/ui/src/components/HeaderBar.tsx
@@ -3,7 +3,13 @@ import React from "react"
 import { FaGithub } from "react-icons/fa"
 import ColorToggleButton from "./ColorToggleButton"
 
-function HeaderBar({ onQueryChange }: { onQueryChange: (query: string) => void }): React.ReactElement {
+function HeaderBar({
+  onQueryChange,
+  error
+}: Readonly<{
+  onQueryChange: (query: string) => void
+  error: boolean
+}>): React.ReactElement {
   return (
     <Box
       as="header"
@@ -30,6 +36,7 @@ function HeaderBar({ onQueryChange }: { onQueryChange: (query: string) => void }
             size="lg"
             variant="filled"
             bg={useColorModeValue("gray.200", "gray.800")}
+            disabled={error}
           />
         </Box>
 

diff --git a/ui/src/components/StatusCard.tsx b/ui/src/components/StatusCard.tsx
@@ -13,16 +13,14 @@ function StatusCard({
   repoURL: string
 }>): React.ReactElement {
   return (
-    <Box borderWidth="1px" borderRadius="sm" overflow="hidden" p={4} boxShadow="md">
+    <Box borderWidth="1px" borderRadius="sm" overflow="hidden" p={4} boxShadow="lg">
       <Grid templateColumns="auto 1fr" gap={2}>
         <Text fontWeight="bold">Name:</Text>
         <Text>{name}</Text>
 
         {error !== "" && (
           <>
-            <Text fontWeight="bold" color="red.500">
-              Error:
-            </Text>
+            <Text fontWeight="bold">Error:</Text>
             <Text color="red.500">{error}</Text>
           </>
         )}

diff --git a/ui/src/components/StatusCardList.tsx b/ui/src/components/StatusCardList.tsx
@@ -1,3 +1,4 @@
+import { Text } from "@chakra-ui/react"
 import React, { useEffect, useState } from "react"
 import { StackStatus } from "../hooks/useFetchStatuses"
 import StatusCard from "./StatusCard"
@@ -6,15 +7,23 @@ function StatusCardList({ statuses, query }: Readonly<{ statuses: StackStatus[];
   const [filteredStatuses, setFilteredStatuses] = useState<StackStatus[]>(statuses)
 
   useEffect(() => {
-    const filtered = statuses.filter(status => Object.values(status).join().toLowerCase().includes(query.toLowerCase()))
+    const filtered = statuses.filter(status =>
+      Object.values(status).some(value => value.toString().toLowerCase().includes(query.toLowerCase()))
+    )
     setFilteredStatuses(filtered)
   }, [statuses, query])
 
   return (
     <>
-      {filteredStatuses.map((item, index) => (
-        <StatusCard key={index} name={item.Name} error={item.Error} revision={item.Revision} repoURL={item.RepoURL} />
-      ))}
+      {filteredStatuses.length === 0 ? (
+        <Text fontSize="xl" align="center" mt={4}>
+          No items available
+        </Text>
+      ) : (
+        filteredStatuses.map((item, index) => (
+          <StatusCard key={index} name={item.Name} error={item.Error} revision={item.Revision} repoURL={item.RepoURL} />
+        ))
+      )}
     </>
   )
 }