From 1620f1afffa6d2a9b6559b810478d9e3b7446339 Mon Sep 17 00:00:00 2001
From: aabedraba <aabedraba@gmail.com>
Date: Sat, 30 Dec 2023 00:02:36 +0100
Subject: [PATCH] show create api key button when there are no API keys

---
 .../react/src/components/ApiKeyManager.tsx    | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/react/src/components/ApiKeyManager.tsx b/packages/react/src/components/ApiKeyManager.tsx
index 9b92915..f9df5ba 100644
--- a/packages/react/src/components/ApiKeyManager.tsx
+++ b/packages/react/src/components/ApiKeyManager.tsx
@@ -112,30 +112,31 @@ function ApiKeyManager({
 
   const consumers = dataModel.consumers ?? [];
 
-  if (consumers.length === 0) {
-    return (
-      <div className={themeStyle}>
-        <div className={styles["no-keys-message"]}>You have no API keys</div>
-      </div>
-    );
-  }
-
   return (
     <ProviderContext.Provider value={provider}>
       <DataContext.Provider value={[dataModel, setDataModel]}>
-        <div className={themeStyle}>
-          {consumers.map((c) => {
-            return (
-              <ConsumerControl
-                key={c.name}
-                consumer={c}
-                menuItems={menuItems}
-                enableDeleteConsumer={enableDeleteConsumer}
-              />
-            );
-          })}
-        </div>
-        {enableCreateConsumer && <CreateConsumer />}
+        <>
+          {consumers.length === 0 && (
+            <div className={themeStyle}>
+              <div className={styles["no-keys-message"]}>
+                You have no API keys
+              </div>
+            </div>
+          )}
+          <div className={themeStyle}>
+            {consumers.map((c) => {
+              return (
+                <ConsumerControl
+                  key={c.name}
+                  consumer={c}
+                  menuItems={menuItems}
+                  enableDeleteConsumer={enableDeleteConsumer}
+                />
+              );
+            })}
+          </div>
+          {enableCreateConsumer && <CreateConsumer />}
+        </>
       </DataContext.Provider>
     </ProviderContext.Provider>
   );