From f560bad2888b1f112dd604c48c41946bad02ba6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romaric=20Philog=C3=A8ne?= <rphilogene@qovery.com>
Date: Sat, 6 Jan 2024 19:16:25 +0100
Subject: [PATCH] wip(frontend): refactor SelfService inner components into
 multiple components

---
 .../components/self-service/SelfService.tsx   | 56 ++----------------
 .../self-service/SelfServiceTabRun.tsx        | 15 +++++
 .../self-service/SelfServiceTabService.tsx    | 59 +++++++++++++++++++
 3 files changed, 78 insertions(+), 52 deletions(-)
 create mode 100644 frontend/src/components/self-service/SelfServiceTabRun.tsx
 create mode 100644 frontend/src/components/self-service/SelfServiceTabService.tsx

diff --git a/frontend/src/components/self-service/SelfService.tsx b/frontend/src/components/self-service/SelfService.tsx
index 9d37770..d641345 100644
--- a/frontend/src/components/self-service/SelfService.tsx
+++ b/frontend/src/components/self-service/SelfService.tsx
@@ -1,11 +1,7 @@
-import EmptyState from "@/components/common/EmptyState.tsx";
-import SelfServiceCard from "@/components/self-service/SelfServiceCard.tsx";
-import {TargetIcon} from "lucide-react";
-import SelfServiceSlideOver from "@/components/self-service/SelfServiceSlideOver.tsx";
 import {useState} from "react";
-import {Transition} from "@headlessui/react";
-import {TrashIcon} from "@heroicons/react/24/outline";
 import {classNames} from "@/lib/utils.ts";
+import SelfServiceTabService from "@/components/self-service/SelfServiceTabService.tsx";
+import SelfServiceTabRun from "@/components/self-service/SelfServiceTabRun.tsx";
 
 const tabs = [
   {name: 'Services', href: '#', current: true},
@@ -17,20 +13,9 @@ interface Props {
   services: any[]
 }
 
-function getIcon(icon?: string): JSX.Element {
-  switch (icon?.toLowerCase()) {
-    case 'target':
-      return <TargetIcon className="h-6 w-6" aria-hidden="true"/>
-    case 'trash':
-      return <TrashIcon className="h-6 w-6" aria-hidden="true"/>
-    default:
-      return <TargetIcon className="h-6 w-6" aria-hidden="true"/>
-  }
-}
 
 export default function SelfService({catalogSlug, services}: Props) {
   const [activeTab, setActiveTab] = useState(tabs[0])
-  const [showSideOver, setShowSideOver] = useState({show: false, service: {}}) // pass service
 
   return <>
     <div className="border-b border-gray-200">
@@ -61,46 +46,13 @@ export default function SelfService({catalogSlug, services}: Props) {
       </div>
     </div>
 
-    {
-      activeTab.name === 'Services' && services.length === 0 &&
-      <div className="my-5">
-        <EmptyState text="No Services" subText="This catalog has no services."/>
-      </div>
-    }
 
     {
-      activeTab.name === 'Services' && services.length > 0 && <>
-        <div className="my-5 divide-y divide-gray-200 overflow-hidden rounded-lg bg-gray-200 shadow sm:grid sm:grid-cols-3 sm:gap-px sm:divide-y-0">
-          {
-            services.map((service, idx) => {
-              return <SelfServiceCard
-                key={service.name}
-                title={service.name}
-                description={service.description}
-                icon={getIcon(service.icon)}
-                index={idx}
-                totalCards={services.length}
-                onClick={() => {
-                  setShowSideOver({show: true, service: service})
-                }}/>
-            })
-          }
-        </div>
-        <Transition show={showSideOver.show}>
-          <SelfServiceSlideOver service={showSideOver.service} onClose={() => setShowSideOver({
-            show: false,
-            service: showSideOver.service
-          })} catalogSlug={catalogSlug}/>
-        </Transition>
-      </>
+      activeTab.name === 'Services' && <SelfServiceTabService catalogSlug={catalogSlug} services={services}/>
     }
 
     {
-      activeTab.name === 'Runs' && <>
-        <div className="my-5">
-          <EmptyState text="No Runs" subText="This catalog has no runs"/>
-        </div>
-      </>
+      activeTab.name === 'Runs' && <SelfServiceTabRun catalogSlug={catalogSlug}/>
     }
 
   </>
diff --git a/frontend/src/components/self-service/SelfServiceTabRun.tsx b/frontend/src/components/self-service/SelfServiceTabRun.tsx
new file mode 100644
index 0000000..ad11674
--- /dev/null
+++ b/frontend/src/components/self-service/SelfServiceTabRun.tsx
@@ -0,0 +1,15 @@
+import EmptyState from "@/components/common/EmptyState.tsx";
+
+interface Props {
+  catalogSlug: string
+}
+
+export default function SelfServiceTabRun({catalogSlug}: Props) {
+  console.log(catalogSlug);
+
+  return <>
+    <div className="my-5">
+      <EmptyState text="No Runs" subText="This catalog has no runs"/>
+    </div>
+  </>
+}
diff --git a/frontend/src/components/self-service/SelfServiceTabService.tsx b/frontend/src/components/self-service/SelfServiceTabService.tsx
new file mode 100644
index 0000000..4e17d66
--- /dev/null
+++ b/frontend/src/components/self-service/SelfServiceTabService.tsx
@@ -0,0 +1,59 @@
+import {useState} from "react";
+import {TargetIcon} from "lucide-react";
+import {TrashIcon} from "@heroicons/react/24/outline";
+import EmptyState from "@/components/common/EmptyState.tsx";
+import SelfServiceCard from "@/components/self-service/SelfServiceCard.tsx";
+import {Transition} from "@headlessui/react";
+import SelfServiceSlideOver from "@/components/self-service/SelfServiceSlideOver.tsx";
+
+
+function getIcon(icon?: string): JSX.Element {
+  switch (icon?.toLowerCase()) {
+    case 'target':
+      return <TargetIcon className="h-6 w-6" aria-hidden="true"/>
+    case 'trash':
+      return <TrashIcon className="h-6 w-6" aria-hidden="true"/>
+    default:
+      return <TargetIcon className="h-6 w-6" aria-hidden="true"/>
+  }
+}
+
+interface Props {
+  catalogSlug: string
+  services: any[]
+}
+
+export default function SelfServiceTabService({catalogSlug, services}: Props) {
+  const [showSideOver, setShowSideOver] = useState({show: false, service: {}}) // pass service
+
+  if (services.length === 0) {
+    return <div className="my-5">
+      <EmptyState text="No Fields" subText="This service has no fields."/>
+    </div>
+  }
+
+  return <>
+    <div className="my-5 divide-y divide-gray-200 overflow-hidden rounded-lg bg-gray-200 shadow sm:grid sm:grid-cols-3 sm:gap-px sm:divide-y-0">
+      {
+        services.map((service, idx) => {
+          return <SelfServiceCard
+            key={service.name}
+            title={service.name}
+            description={service.description}
+            icon={getIcon(service.icon)}
+            index={idx}
+            totalCards={services.length}
+            onClick={() => {
+              setShowSideOver({show: true, service: service})
+            }}/>
+        })
+      }
+    </div>
+    <Transition show={showSideOver.show}>
+      <SelfServiceSlideOver service={showSideOver.service} onClose={() => setShowSideOver({
+        show: false,
+        service: showSideOver.service
+      })} catalogSlug={catalogSlug}/>
+    </Transition>
+  </>
+}