From 8042f9b390542845e21196290e95a8d9c9075805 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mose=20M=C3=BCller?= <mosemueller@gmail.com>
Date: Mon, 19 Feb 2024 10:19:11 +0100
Subject: [PATCH] removes card header of root component

---
 .../src/components/DataServiceComponent.tsx   | 52 ++++++++++++-------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/DataServiceComponent.tsx b/frontend/src/components/DataServiceComponent.tsx
index aede2b5..0a609ad 100644
--- a/frontend/src/components/DataServiceComponent.tsx
+++ b/frontend/src/components/DataServiceComponent.tsx
@@ -39,19 +39,16 @@ export const DataServiceComponent = React.memo(
       displayName = webSettings[fullAccessPath].displayName;
     }
 
-    return (
-      <div className="component dataServiceComponent" id={id}>
-        <Card>
-          <Card.Header
-            onClick={() => setOpen(!open)}
-            style={{ cursor: 'pointer' }} // Change cursor style on hover
-          >
-            {displayName} {open ? <ChevronDown /> : <ChevronRight />}
-          </Card.Header>
-          <Collapse in={open}>
-            <Card.Body>
-              {Object.entries(props).map(([key, value]) => {
-                return (
+    if (displayName !== '') {
+      return (
+        <div className="component dataServiceComponent" id={id}>
+          <Card>
+            <Card.Header onClick={() => setOpen(!open)} style={{ cursor: 'pointer' }}>
+              {displayName} {open ? <ChevronDown /> : <ChevronRight />}
+            </Card.Header>
+            <Collapse in={open}>
+              <Card.Body>
+                {Object.entries(props).map(([key, value]) => (
                   <GenericComponent
                     key={key}
                     attribute={value}
@@ -60,12 +57,27 @@ export const DataServiceComponent = React.memo(
                     isInstantUpdate={isInstantUpdate}
                     addNotification={addNotification}
                   />
-                );
-              })}
-            </Card.Body>
-          </Collapse>
-        </Card>
-      </div>
-    );
+                ))}
+              </Card.Body>
+            </Collapse>
+          </Card>
+        </div>
+      );
+    } else {
+      return (
+        <div className="component dataServiceComponent" id={id}>
+          {Object.entries(props).map(([key, value]) => (
+            <GenericComponent
+              key={key}
+              attribute={value}
+              name={key}
+              parentPath={fullAccessPath}
+              isInstantUpdate={isInstantUpdate}
+              addNotification={addNotification}
+            />
+          ))}
+        </div>
+      );
+    }
   }
 );