wip(frontend): export SelfServiceCard icon color

Qovery · Jan 7, 2024 · 7c8cab1 · 7c8cab1
1 parent 71fb513
commit 7c8cab1
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 48 deletions.
diff --git a/backend/examples/config.yaml b/backend/examples/config.yaml
@@ -11,6 +11,7 @@ catalogs:
         name: New Testing Environment
         description: spin up a temporary testing environment
         icon: target
+        icon_color: teal
         fields:
           - slug: name
             title: Name
@@ -56,6 +57,7 @@ catalogs:
         name: Stop Testing Environment
         description: stop a testing environment
         icon: trash
+        icon_color: rose
         fields:
           - slug: name
             title: Name

diff --git a/backend/src/catalog/controllers.rs b/backend/src/catalog/controllers.rs
@@ -190,6 +190,7 @@ mod tests {
                             name: "Service 1".to_string(),
                             description: None,
                             icon: None,
+                            icon_color: None,
                             fields: Some(vec![
                                 CatalogFieldYamlConfig {
                                     slug: "field-1".to_string(),

diff --git a/backend/src/catalog/mod.rs b/backend/src/catalog/mod.rs
@@ -215,6 +215,7 @@ mod tests {
                     name: "Service 1".to_string(),
                     description: None,
                     icon: None,
+                    icon_color: None,
                     fields: None,
                     validate: None,
                     post_validate: None,
@@ -224,6 +225,7 @@ mod tests {
                     name: "Service 2".to_string(),
                     description: None,
                     icon: None,
+                    icon_color: None,
                     fields: None,
                     validate: None,
                     post_validate: None,

diff --git a/backend/src/yaml_config.rs b/backend/src/yaml_config.rs
@@ -52,6 +52,7 @@ pub struct CatalogServiceYamlConfig {
     pub name: String,
     pub description: Option<String>,
     pub icon: Option<String>,
+    pub icon_color: Option<String>,
     pub fields: Option<Vec<CatalogFieldYamlConfig>>,
     pub validate: Option<Vec<CatalogServiceValidateYamlConfig>>,
     pub post_validate: Option<Vec<CatalogServicePostValidateYamlConfig>>,

diff --git a/frontend/src/components/self-service/SelfServiceCard.tsx b/frontend/src/components/self-service/SelfServiceCard.tsx
@@ -1,47 +1,40 @@
 import {classNames} from "@/lib/utils.ts";
+import {TargetIcon} from "lucide-react";
+import {TrashIcon} from "@heroicons/react/24/outline";
 
-const colors = [
-  {
-    bg: 'bg-teal-50',
-    fg: 'text-teal-700',
-  },
-  {
-    bg: 'bg-purple-50',
-    fg: 'text-purple-700',
-  },
-  {
-    bg: 'bg-sky-50',
-    fg: 'text-sky-700',
-  },
-  {
-    bg: 'bg-yellow-50',
-    fg: 'text-yellow-700',
-  },
-  {
-    bg: 'bg-rose-50',
-    fg: 'text-rose-700',
-  },
-  {
-    bg: 'bg-indigo-50',
-    fg: 'text-indigo-700',
-  },
-]
-
-function getRandomColor(): { bg: string; fg: string } {
-  return colors[Math.floor(Math.random() * colors.length)]
+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 {
   title: string;
   description: string;
-  icon: JSX.Element;
+  icon: string | undefined;
+  iconColor: string | undefined;
   index: number;
   totalCards: number;
   onClick: () => void;
 }
 
-export default function SelfServiceCard({title, description, icon, index, totalCards, onClick}: Props) {
-  const {bg: iconBackground, fg: iconForeground} = getRandomColor()
+export default function SelfServiceCard({title, description, icon, iconColor, index, totalCards, onClick}: Props) {
+  let iconBackground = 'bg-indigo-50'
+  if (iconColor) {
+    iconBackground = `bg-${iconColor}-50`
+  }
+
+  let iconForeground = 'text-indigo-700'
+  if (iconColor) {
+    iconForeground = `text-${iconColor}-700`
+  }
+
+  const iconElement = getIcon(icon)
 
   return (
     <div>
@@ -63,7 +56,7 @@ export default function SelfServiceCard({title, description, icon, index, totalC
                 'inline-flex rounded-lg p-3 ring-4 ring-white'
               )}
             >
-            {icon}
+            {iconElement}
             </span>
         </div>
         <div className="mt-8">

diff --git a/frontend/src/components/self-service/SelfServiceTabService.tsx b/frontend/src/components/self-service/SelfServiceTabService.tsx
@@ -1,23 +1,9 @@
 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[]
@@ -40,7 +26,8 @@ export default function SelfServiceTabService({catalogSlug, services}: Props) {
             key={service.name}
             title={service.name}
             description={service.description}
-            icon={getIcon(service.icon)}
+            icon={service.icon}
+            iconColor={service.icon_color}
             index={idx}
             totalCards={services.length}
             onClick={() => {