From d5374545f79f04a72010afa8599447cb87a464f1 Mon Sep 17 00:00:00 2001
From: Eden Kirin <eden@ekirin.com>
Date: Wed, 24 Jan 2024 22:43:12 +0100
Subject: [PATCH] Service card

---
 src/components/dashboard/EnvironmentList.tsx |  7 +++-
 src/components/dashboard/ServiceCard.tsx     | 39 ++++++++++++++++++++
 src/components/dashboard/ServiceList.tsx     | 18 +++++----
 src/components/dashboard/TenantList.tsx      |  2 +-
 src/scss/_common.scss                        |  1 +
 src/types.tsx                                |  2 +-
 6 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 src/components/dashboard/ServiceCard.tsx

diff --git a/src/components/dashboard/EnvironmentList.tsx b/src/components/dashboard/EnvironmentList.tsx
index 391f674..915cb11 100644
--- a/src/components/dashboard/EnvironmentList.tsx
+++ b/src/components/dashboard/EnvironmentList.tsx
@@ -11,8 +11,11 @@ interface EnvironmentListProps {
 export default function EnvironmentList({ environments }: EnvironmentListProps) {
     const envItems = environments.map((env) => {
         return (
-            <Box className="environment">
-                <Typography component={"h1"} key={env.name} className="title">
+            <Box className="environment" sx={{ marginBottom: "2rem" }}>
+                <Typography variant={"h2"} key={env.name} className="title">
+                    <Typography component="span" variant={"h5"} key={env.name} sx={{ marginRight: "1rem" }}>
+                        environment:
+                    </Typography>
                     {env.name}
                 </Typography>
                 <TenantList tenants={env.tenants} />
diff --git a/src/components/dashboard/ServiceCard.tsx b/src/components/dashboard/ServiceCard.tsx
new file mode 100644
index 0000000..77e80bd
--- /dev/null
+++ b/src/components/dashboard/ServiceCard.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { Service, Node } from "../../types";
+import Typography from "@mui/material/Typography";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import Grid from "@mui/material/Unstable_Grid2";
+
+interface ServiceCardProps {
+    service: Service;
+}
+
+function normalizeServiceName(name: string): string {
+    // convert ugly CLOUD_INTEGRATION_SERVICE to Cloud Integration Service
+    return name
+        .replaceAll("_", " ")
+        .toLowerCase()
+        .replace(/\b\w/g, (s) => s.toUpperCase());
+}
+
+function ServiceNode(node: Node) {
+    return <Typography variant="h6">{node.name}</Typography>;
+}
+
+export default function ServiceCard({ service }: ServiceCardProps) {
+    const nodes = service.nodes.map((node) => {
+        return ServiceNode(node);
+    });
+
+    return (
+        <Card className="service-card" sx={{ width: "400px" }}>
+            <CardContent>
+                <Typography variant="h5" component="div">
+                    {normalizeServiceName(service.name)}
+                </Typography>
+                {nodes}
+            </CardContent>
+        </Card>
+    );
+}
diff --git a/src/components/dashboard/ServiceList.tsx b/src/components/dashboard/ServiceList.tsx
index d1a15f8..a4ea8be 100644
--- a/src/components/dashboard/ServiceList.tsx
+++ b/src/components/dashboard/ServiceList.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Service } from "../../types";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
+import Grid from "@mui/material/Unstable_Grid2";
+import ServiceCard from "./ServiceCard";
 
 interface ServiceListProps {
     services: Service[];
@@ -10,13 +10,15 @@ interface ServiceListProps {
 export default function ServiceList({ services }: ServiceListProps) {
     const serviceItems = services.map((service) => {
         return (
-            <Box className="service-card">
-                <Typography component={"h1"} key={service.name} className="service-name">
-                    {service.name}
-                </Typography>
-            </Box>
+            <Grid key={service.name} sx={{ display: "flex" }}>
+                <ServiceCard service={service} />
+            </Grid>
         );
     });
 
-    return <Box className="service-list">{serviceItems}</Box>;
+    return (
+        <Grid container rowSpacing={2} columnSpacing={2} className="service-list" sx={{ marginBottom: "1rem" }}>
+            {serviceItems}
+        </Grid>
+    );
 }
diff --git a/src/components/dashboard/TenantList.tsx b/src/components/dashboard/TenantList.tsx
index 669d701..33873b3 100644
--- a/src/components/dashboard/TenantList.tsx
+++ b/src/components/dashboard/TenantList.tsx
@@ -13,7 +13,7 @@ export default function TenantList({ tenants: tenants }: TenantListProps) {
         const tenantName = tenant.name !== "default" ? `Tenant: ${tenant.name}` : "Multitenant";
         return (
             <Box className="tenant">
-                <Typography component={"h1"} key={tenant.name} className="tenant-name">
+                <Typography variant={"h3"} key={tenant.name} className="tenant-name" sx={{ marginBottom: "1rem" }}>
                     {tenantName}
                 </Typography>
                 <ServiceList services={tenant.services} />
diff --git a/src/scss/_common.scss b/src/scss/_common.scss
index 699a279..5de6906 100644
--- a/src/scss/_common.scss
+++ b/src/scss/_common.scss
@@ -1,3 +1,4 @@
 body {
     margin: 0;
+    background-color: whitesmoke;
 }
diff --git a/src/types.tsx b/src/types.tsx
index 37dfd2b..f20bdcf 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -19,7 +19,7 @@ type AppDetails = {
     template_version: string | null;
 };
 
-type Node = {
+export type Node = {
     name: string;
     url: string;
     app_details: AppDetails | null;