From 5202e1348af05843654c0ecb3ab26acbc2a63e10 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Wed, 16 Aug 2023 16:15:43 -0300
Subject: [PATCH] feat[headerComponent]: Add api icon on header

---
 src/frontend/src/components/genericIconComponent/index.tsx | 2 +-
 src/frontend/src/components/headerComponent/index.tsx      | 6 ++++++
 src/frontend/src/utils/styleUtils.ts                       | 4 +++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx
index 86c304beb..5cb6bdeca 100644
--- a/src/frontend/src/components/genericIconComponent/index.tsx
+++ b/src/frontend/src/components/genericIconComponent/index.tsx
@@ -9,7 +9,7 @@ const ForwardedIconComponent = forwardRef(
       <TargetIcon
         strokeWidth={1.5}
         className={className}
-        style={{ color: iconColor }}
+        style={iconColor ? { color: iconColor } : {}}
         ref={ref}
       />
     );
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 3c400a860..274b4bdc3 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -146,6 +146,12 @@ export default function Header() {
               />
             </div>
           </AlertDropdown>
+          <button>
+            <IconComponent
+              name="Key"
+              className="side-bar-button-size text-muted-foreground hover:text-accent-foreground"
+            />
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 9f4ebe21d..1c2018f69 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -72,6 +72,7 @@ import {
   X,
   XCircle,
   Zap,
+  Key
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AirbyteIcon } from "../icons/Airbyte";
@@ -294,5 +295,6 @@ export const nodeIconsLucide = {
   FaApple,
   EyeOff,
   Eye,
-  UserCog2
+  UserCog2,
+  Key,
 };