From 8bd4fca4874102e009452a005f299e3388b34a04 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Sun, 8 Dec 2024 12:18:02 +0200
Subject: [PATCH 01/10] fix: refactor

---
 .../src/components/primitives/card.tsx        |   6 +-
 .../src/components/primitives/container.tsx   |   5 +
 .../primitives/help-tooltip-indicator.tsx     |  24 +++
 .../components/settings/setting-section.tsx   |  23 +++
 .../src/components/shared/external-link.tsx   |  11 +-
 apps/dashboard/src/pages/api-keys.tsx         | 184 ++++++++++++------
 6 files changed, 184 insertions(+), 69 deletions(-)
 create mode 100644 apps/dashboard/src/components/primitives/container.tsx
 create mode 100644 apps/dashboard/src/components/primitives/help-tooltip-indicator.tsx
 create mode 100644 apps/dashboard/src/components/settings/setting-section.tsx

diff --git a/apps/dashboard/src/components/primitives/card.tsx b/apps/dashboard/src/components/primitives/card.tsx
index bd9cfec1d6c..4a00b9acc61 100644
--- a/apps/dashboard/src/components/primitives/card.tsx
+++ b/apps/dashboard/src/components/primitives/card.tsx
@@ -9,7 +9,11 @@ Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+    <div
+      ref={ref}
+      className={cn('flex flex-col space-y-1.5 bg-neutral-50 p-4 text-sm font-medium', className)}
+      {...props}
+    />
   )
 );
 CardHeader.displayName = 'CardHeader';
diff --git a/apps/dashboard/src/components/primitives/container.tsx b/apps/dashboard/src/components/primitives/container.tsx
new file mode 100644
index 00000000000..517da98c7b5
--- /dev/null
+++ b/apps/dashboard/src/components/primitives/container.tsx
@@ -0,0 +1,5 @@
+import { cn } from '../../utils/ui';
+
+export const Container = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+  return <div className={cn('mx-auto w-full max-w-[1152px] px-14 py-14', className)}>{children}</div>;
+};
diff --git a/apps/dashboard/src/components/primitives/help-tooltip-indicator.tsx b/apps/dashboard/src/components/primitives/help-tooltip-indicator.tsx
new file mode 100644
index 00000000000..b712a1de004
--- /dev/null
+++ b/apps/dashboard/src/components/primitives/help-tooltip-indicator.tsx
@@ -0,0 +1,24 @@
+import { RiInformation2Line } from 'react-icons/ri';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+import { cn } from '../../utils/ui';
+
+interface HelpTooltipIndicatorProps {
+  text: string;
+  className?: string;
+  size?: '4' | '5';
+}
+
+export function HelpTooltipIndicator({ text, className, size = '5' }: HelpTooltipIndicatorProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className={cn('text-foreground-400 hover:cursor inline-block', className)}>
+          <RiInformation2Line className={`size-${size}`} />
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{text}</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/apps/dashboard/src/components/settings/setting-section.tsx b/apps/dashboard/src/components/settings/setting-section.tsx
new file mode 100644
index 00000000000..c4fa87bed21
--- /dev/null
+++ b/apps/dashboard/src/components/settings/setting-section.tsx
@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Card, CardContent, CardHeader } from '@/components/primitives/card';
+
+interface SettingSectionProps {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}
+
+export function SettingSection({ title, description, children }: SettingSectionProps) {
+  return (
+    <Card className="w-full overflow-hidden shadow-none">
+      <CardHeader>
+        {title}
+        {description && <p className="text-foreground-600 mt-1 text-xs">{description}</p>}
+      </CardHeader>
+
+      <CardContent className="rounded-b-xl border-t bg-neutral-50 bg-white p-3">
+        <div className="space-y-4 p-3">{children}</div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/dashboard/src/components/shared/external-link.tsx b/apps/dashboard/src/components/shared/external-link.tsx
index 798b8d6e01d..44081b36ea4 100644
--- a/apps/dashboard/src/components/shared/external-link.tsx
+++ b/apps/dashboard/src/components/shared/external-link.tsx
@@ -1,21 +1,24 @@
-import { RiExternalLinkLine } from 'react-icons/ri';
+import { RiBookMarkedLine, RiBookmarkLine, RiExternalLinkLine } from 'react-icons/ri';
 import { cn } from '@/utils/ui';
 
 interface ExternalLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   children: React.ReactNode;
   iconClassName?: string;
+  variant?: 'default' | 'documentation';
 }
 
-export function ExternalLink({ children, className, iconClassName, ...props }: ExternalLinkProps) {
+export function ExternalLink({ children, className, variant = 'default', iconClassName, ...props }: ExternalLinkProps) {
   return (
     <a
       target="_blank"
       rel="noopener noreferrer"
-      className={cn('inline-flex items-center gap-1 hover:underline', className)}
+      className={cn('text-foreground-600 inline-flex items-center gap-1 hover:underline', className)}
       {...props}
     >
+      {variant === 'documentation' && <RiBookMarkedLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
+      {variant === 'default' && <RiExternalLinkLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
+
       {children}
-      <RiExternalLinkLine className={cn('size-4', iconClassName)} aria-hidden="true" />
     </a>
   );
 }
diff --git a/apps/dashboard/src/pages/api-keys.tsx b/apps/dashboard/src/pages/api-keys.tsx
index 4c4d4f1453e..0d9cff934de 100644
--- a/apps/dashboard/src/pages/api-keys.tsx
+++ b/apps/dashboard/src/pages/api-keys.tsx
@@ -1,8 +1,8 @@
-import { useState } from 'react';
+import { useState, ReactNode } from 'react';
 import { RiKey2Line, RiEyeLine, RiEyeOffLine } from 'react-icons/ri';
 import { useEnvironment } from '@/context/environment/hooks';
 import { CopyButton } from '@/components/primitives/copy-button';
-import { Card, CardContent } from '@/components/primitives/card';
+import { Card, CardContent, CardHeader } from '@/components/primitives/card';
 import { Button } from '@/components/primitives/button';
 import { Input, InputField } from '@/components/primitives/input';
 import { Form } from '@/components/primitives/form/form';
@@ -11,6 +11,63 @@ import { DashboardLayout } from '../components/dashboard-layout';
 import { PageMeta } from '@/components/page-meta';
 import { useFetchApiKeys } from '../hooks/use-fetch-api-keys';
 import { ExternalLink } from '@/components/shared/external-link';
+import { Container } from '../components/primitives/container';
+import { HelpTooltipIndicator } from '../components/primitives/help-tooltip-indicator';
+
+interface SettingFieldProps {
+  label: string;
+  tooltip?: string;
+  children: ReactNode;
+}
+
+function SettingField({ label, tooltip, children }: SettingFieldProps) {
+  return (
+    <div className="grid grid-cols-[1fr,400px] items-start gap-3">
+      <label className={`text-foreground-950 text-xs font-medium`}>
+        {label}
+        {tooltip && <HelpTooltipIndicator text={tooltip} className="relative top-[5px] ml-1" />}
+      </label>
+      <div className="space-y-2">{children}</div>
+    </div>
+  );
+}
+
+interface SettingSecretFieldProps extends Omit<SettingFieldProps, 'children'> {
+  value: string;
+  onCopy: (value: string) => void;
+}
+
+function SettingSecretField({ label, tooltip, value, onCopy }: SettingSecretFieldProps) {
+  const [showSecret, setShowSecret] = useState(false);
+
+  const toggleSecretVisibility = () => {
+    setShowSecret(!showSecret);
+  };
+
+  const maskSecret = (secret: string) => {
+    return `${'•'.repeat(28)} ${secret.slice(-4)}`;
+  };
+
+  return (
+    <SettingField label={label} tooltip={tooltip}>
+      <div className="flex items-center gap-2">
+        <InputField className="flex overflow-hidden pr-0">
+          <Input className="cursor-default" value={showSecret ? value : maskSecret(value)} readOnly />
+          <CopyButton size="input-right" valueToCopy={value} />
+        </InputField>
+
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={toggleSecretVisibility}
+          aria-label={showSecret ? 'Hide Secret' : 'Show Secret'}
+        >
+          {showSecret ? <RiEyeOffLine className="size-4" /> : <RiEyeLine className="size-4" />}
+        </Button>
+      </div>
+    </SettingField>
+  );
+}
 
 interface ApiKeysFormData {
   apiKey: string;
@@ -21,7 +78,6 @@ interface ApiKeysFormData {
 export function ApiKeysPage() {
   const apiKeysQuery = useFetchApiKeys();
   const { currentEnvironment } = useEnvironment();
-  const [showApiKey, setShowApiKey] = useState(false);
   const apiKeys = apiKeysQuery.data?.data;
 
   const form = useForm<ApiKeysFormData>({
@@ -36,79 +92,79 @@ export function ApiKeysPage() {
     return null;
   }
 
-  const toggleApiKeyVisibility = () => {
-    setShowApiKey(!showApiKey);
-  };
-
-  const maskApiKey = (key: string) => {
-    return `${'•'.repeat(28)} ${key.slice(-4)}`;
-  };
-
   return (
     <>
       <PageMeta title={`API Keys for ${currentEnvironment?.name} environment`} />
       <DashboardLayout headerStartItems={<h1 className="text-foreground-950">API Keys</h1>}>
-        <div className="flex flex-col gap-6 p-6">
-          <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr,500px]">
-            <Form {...form}>
-              <Card className="shadow-none">
-                <CardContent className="p-6">
-                  <div className="space-y-4">
-                    <div className="space-y-2">
-                      <label className="text-foreground-600 text-sm font-medium">Secret Key</label>
-                      <div className="flex items-center gap-2">
-                        <InputField className="flex overflow-hidden pr-0">
-                          <Input
-                            className="cursor-default"
-                            value={showApiKey ? form.getValues('apiKey') : maskApiKey(form.getValues('apiKey'))}
-                            readOnly
-                          />
-                          <CopyButton size="input-right" valueToCopy={form.getValues('apiKey')} />
-                        </InputField>
-
-                        <Button
-                          variant="outline"
-                          size="icon"
-                          onClick={toggleApiKeyVisibility}
-                          aria-label={showApiKey ? 'Hide API Key' : 'Show API Key'}
-                        >
-                          {showApiKey ? <RiEyeOffLine className="size-4" /> : <RiEyeLine className="size-4" />}
-                        </Button>
-                      </div>
-                      <p className="text-foreground-600 text-xs">
-                        Use this key to authenticate your API requests. Keep it secure and never share it publicly.
-                      </p>
-                    </div>
-
-                    <div className="space-y-2">
-                      <label className="text-foreground-600 text-sm font-medium">Application Identifier</label>
-                      <div className="flex items-center gap-2">
-                        <InputField className="flex overflow-hidden pr-0">
-                          <Input className="cursor-default" value={form.getValues('identifier')} readOnly />
-                          <CopyButton size="input-right" valueToCopy={form.getValues('identifier')} />
-                        </InputField>
-                      </div>
-                      <p className="text-foreground-600 text-xs">
-                        The public application identifier used for the Inbox component
-                      </p>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </Form>
+        <Container>
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-[224px,1fr]">
             <div className="column flex gap-2 p-6 pt-0">
               <div className="flex flex-col gap-2">
-                <RiKey2Line className="h-10 w-10" />
-                <h2 className="text-foreground-950 text-lg font-medium">Environment Keys</h2>
-                <p className="text-foreground-400 text-md">Copy and manage your public and private keys</p>
+                <RiKey2Line className="h-8 w-8" />
+                <h2 className="text-foreground-950 text-md font-medium">Environment Keys</h2>
+                <p className="text-foreground-400 text-xs">Copy and manage your public and private keys</p>
 
-                <ExternalLink href="https://docs.novu.co/sdks/overview" className="text-sm">
+                <ExternalLink variant="documentation" href="https://docs.novu.co/sdks/overview" className="text-sm">
                   Read about our SDKs
                 </ExternalLink>
               </div>
             </div>
+            <div className="flex flex-col gap-6">
+              <Form {...form}>
+                <Card className="w-full overflow-hidden shadow-none">
+                  <CardHeader>Application</CardHeader>
+
+                  <CardContent className="rounded-b-xl border-t bg-neutral-50 bg-white p-3">
+                    <div className="space-y-4 p-3">
+                      <SettingField label="API URL" tooltip="The base URL for making API requests to Novu">
+                        <div className="flex items-center gap-2">
+                          <InputField className="flex overflow-hidden pr-0">
+                            <Input className="cursor-default" value={form.getValues('identifier')} readOnly />
+                            <CopyButton size="input-right" valueToCopy={form.getValues('identifier')} />
+                          </InputField>
+                        </div>
+                      </SettingField>
+
+                      <SettingField
+                        label="Application Identifier"
+                        tooltip="This is a unique identifier for the current environment, used to initialize the Inbox component"
+                        alignTop
+                      >
+                        <div className="flex items-center gap-2">
+                          <InputField className="flex overflow-hidden pr-0">
+                            <Input className="cursor-default" value={form.getValues('identifier')} readOnly />
+                            <CopyButton size="input-right" valueToCopy={form.getValues('identifier')} />
+                          </InputField>
+                        </div>
+                      </SettingField>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card className="w-full overflow-hidden shadow-none">
+                  <CardHeader>
+                    Secret Keys
+                    <p className="text-foreground-600 mt-1 text-xs">
+                      Use this key to authenticate your API requests. Keep it secure and never share it publicly.
+                    </p>
+                  </CardHeader>
+
+                  <CardContent className="rounded-b-xl border-t bg-neutral-50 bg-white p-3">
+                    <div className="space-y-4 p-3">
+                      <SettingSecretField
+                        label="Secret Key"
+                        tooltip="Use this key to authenticate your API requests. Keep it secure and never share it publicly."
+                        value={form.getValues('apiKey')}
+                        onCopy={(value) => {}}
+                        alignTop
+                      />
+                    </div>
+                  </CardContent>
+                </Card>
+              </Form>
+            </div>
           </div>
-        </div>
+        </Container>
       </DashboardLayout>
     </>
   );

From 984f8415bbc9366ab192270530efa9470a35cf7c Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Sun, 8 Dec 2024 12:22:20 +0200
Subject: [PATCH 02/10] fix: styling

---
 apps/dashboard/src/pages/api-keys.tsx | 116 ++++++++++++--------------
 1 file changed, 55 insertions(+), 61 deletions(-)

diff --git a/apps/dashboard/src/pages/api-keys.tsx b/apps/dashboard/src/pages/api-keys.tsx
index 0d9cff934de..bae1710cf95 100644
--- a/apps/dashboard/src/pages/api-keys.tsx
+++ b/apps/dashboard/src/pages/api-keys.tsx
@@ -13,61 +13,7 @@ import { useFetchApiKeys } from '../hooks/use-fetch-api-keys';
 import { ExternalLink } from '@/components/shared/external-link';
 import { Container } from '../components/primitives/container';
 import { HelpTooltipIndicator } from '../components/primitives/help-tooltip-indicator';
-
-interface SettingFieldProps {
-  label: string;
-  tooltip?: string;
-  children: ReactNode;
-}
-
-function SettingField({ label, tooltip, children }: SettingFieldProps) {
-  return (
-    <div className="grid grid-cols-[1fr,400px] items-start gap-3">
-      <label className={`text-foreground-950 text-xs font-medium`}>
-        {label}
-        {tooltip && <HelpTooltipIndicator text={tooltip} className="relative top-[5px] ml-1" />}
-      </label>
-      <div className="space-y-2">{children}</div>
-    </div>
-  );
-}
-
-interface SettingSecretFieldProps extends Omit<SettingFieldProps, 'children'> {
-  value: string;
-  onCopy: (value: string) => void;
-}
-
-function SettingSecretField({ label, tooltip, value, onCopy }: SettingSecretFieldProps) {
-  const [showSecret, setShowSecret] = useState(false);
-
-  const toggleSecretVisibility = () => {
-    setShowSecret(!showSecret);
-  };
-
-  const maskSecret = (secret: string) => {
-    return `${'•'.repeat(28)} ${secret.slice(-4)}`;
-  };
-
-  return (
-    <SettingField label={label} tooltip={tooltip}>
-      <div className="flex items-center gap-2">
-        <InputField className="flex overflow-hidden pr-0">
-          <Input className="cursor-default" value={showSecret ? value : maskSecret(value)} readOnly />
-          <CopyButton size="input-right" valueToCopy={value} />
-        </InputField>
-
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={toggleSecretVisibility}
-          aria-label={showSecret ? 'Hide Secret' : 'Show Secret'}
-        >
-          {showSecret ? <RiEyeOffLine className="size-4" /> : <RiEyeLine className="size-4" />}
-        </Button>
-      </div>
-    </SettingField>
-  );
-}
+import { API_HOSTNAME } from '../config';
 
 interface ApiKeysFormData {
   apiKey: string;
@@ -119,8 +65,8 @@ export function ApiKeysPage() {
                       <SettingField label="API URL" tooltip="The base URL for making API requests to Novu">
                         <div className="flex items-center gap-2">
                           <InputField className="flex overflow-hidden pr-0">
-                            <Input className="cursor-default" value={form.getValues('identifier')} readOnly />
-                            <CopyButton size="input-right" valueToCopy={form.getValues('identifier')} />
+                            <Input className="cursor-default" value={API_HOSTNAME} readOnly />
+                            <CopyButton size="input-right" valueToCopy={API_HOSTNAME} />
                           </InputField>
                         </div>
                       </SettingField>
@@ -128,7 +74,6 @@ export function ApiKeysPage() {
                       <SettingField
                         label="Application Identifier"
                         tooltip="This is a unique identifier for the current environment, used to initialize the Inbox component"
-                        alignTop
                       >
                         <div className="flex items-center gap-2">
                           <InputField className="flex overflow-hidden pr-0">
@@ -151,12 +96,11 @@ export function ApiKeysPage() {
 
                   <CardContent className="rounded-b-xl border-t bg-neutral-50 bg-white p-3">
                     <div className="space-y-4 p-3">
-                      <SettingSecretField
+                      <SettingField
                         label="Secret Key"
                         tooltip="Use this key to authenticate your API requests. Keep it secure and never share it publicly."
                         value={form.getValues('apiKey')}
-                        onCopy={(value) => {}}
-                        alignTop
+                        secret
                       />
                     </div>
                   </CardContent>
@@ -169,3 +113,53 @@ export function ApiKeysPage() {
     </>
   );
 }
+
+interface SettingFieldProps {
+  label: string;
+  tooltip?: string;
+  children?: ReactNode;
+  value?: string;
+  secret?: boolean;
+}
+
+function SettingField({ label, tooltip, children, value, secret = false }: SettingFieldProps) {
+  const [showSecret, setShowSecret] = useState(false);
+
+  const toggleSecretVisibility = () => {
+    setShowSecret(!showSecret);
+  };
+
+  const maskSecret = (secret: string) => {
+    return `${'•'.repeat(28)} ${secret.slice(-4)}`;
+  };
+
+  return (
+    <div className="grid grid-cols-[1fr,400px] items-start gap-3">
+      <label className={`text-foreground-950 text-xs font-medium`}>
+        {label}
+        {tooltip && <HelpTooltipIndicator text={tooltip} className="relative top-[5px] ml-1" />}
+      </label>
+      <div className="space-y-2">
+        {secret && value ? (
+          <div className="flex items-center gap-2">
+            <InputField className="flex overflow-hidden pr-0">
+              <Input className="cursor-default" value={showSecret ? value : maskSecret(value)} readOnly />
+              <CopyButton size="input-right" valueToCopy={value} />
+            </InputField>
+
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={toggleSecretVisibility}
+              aria-label={showSecret ? 'Hide Secret' : 'Show Secret'}
+            >
+              {showSecret ? <RiEyeOffLine className="size-4" /> : <RiEyeLine className="size-4" />}
+            </Button>
+          </div>
+        ) : (
+          children
+        )}
+      </div>
+    </div>
+  );
+}

From 84b4d5bd6ba21a2ef344db6dd428b60e6f6410b3 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Sun, 8 Dec 2024 12:31:07 +0200
Subject: [PATCH 03/10] fix: reuse

---
 apps/dashboard/src/pages/api-keys.tsx | 81 ++++++++++++++++-----------
 1 file changed, 47 insertions(+), 34 deletions(-)

diff --git a/apps/dashboard/src/pages/api-keys.tsx b/apps/dashboard/src/pages/api-keys.tsx
index bae1710cf95..e5f7965296f 100644
--- a/apps/dashboard/src/pages/api-keys.tsx
+++ b/apps/dashboard/src/pages/api-keys.tsx
@@ -14,6 +14,7 @@ import { ExternalLink } from '@/components/shared/external-link';
 import { Container } from '../components/primitives/container';
 import { HelpTooltipIndicator } from '../components/primitives/help-tooltip-indicator';
 import { API_HOSTNAME } from '../config';
+import { Skeleton } from '@/components/primitives/skeleton';
 
 interface ApiKeysFormData {
   apiKey: string;
@@ -25,6 +26,7 @@ export function ApiKeysPage() {
   const apiKeysQuery = useFetchApiKeys();
   const { currentEnvironment } = useEnvironment();
   const apiKeys = apiKeysQuery.data?.data;
+  const isLoading = apiKeysQuery.isLoading;
 
   const form = useForm<ApiKeysFormData>({
     values: {
@@ -62,26 +64,18 @@ export function ApiKeysPage() {
 
                   <CardContent className="rounded-b-xl border-t bg-neutral-50 bg-white p-3">
                     <div className="space-y-4 p-3">
-                      <SettingField label="API URL" tooltip="The base URL for making API requests to Novu">
-                        <div className="flex items-center gap-2">
-                          <InputField className="flex overflow-hidden pr-0">
-                            <Input className="cursor-default" value={API_HOSTNAME} readOnly />
-                            <CopyButton size="input-right" valueToCopy={API_HOSTNAME} />
-                          </InputField>
-                        </div>
-                      </SettingField>
+                      <SettingField
+                        label="API URL"
+                        tooltip="The base URL for making API requests to Novu"
+                        value={API_HOSTNAME}
+                      />
 
                       <SettingField
                         label="Application Identifier"
                         tooltip="This is a unique identifier for the current environment, used to initialize the Inbox component"
-                      >
-                        <div className="flex items-center gap-2">
-                          <InputField className="flex overflow-hidden pr-0">
-                            <Input className="cursor-default" value={form.getValues('identifier')} readOnly />
-                            <CopyButton size="input-right" valueToCopy={form.getValues('identifier')} />
-                          </InputField>
-                        </div>
-                      </SettingField>
+                        value={form.getValues('identifier')}
+                        isLoading={isLoading}
+                      />
                     </div>
                   </CardContent>
                 </Card>
@@ -101,6 +95,7 @@ export function ApiKeysPage() {
                         tooltip="Use this key to authenticate your API requests. Keep it secure and never share it publicly."
                         value={form.getValues('apiKey')}
                         secret
+                        isLoading={isLoading}
                       />
                     </div>
                   </CardContent>
@@ -117,12 +112,20 @@ export function ApiKeysPage() {
 interface SettingFieldProps {
   label: string;
   tooltip?: string;
-  children?: ReactNode;
   value?: string;
   secret?: boolean;
+  isLoading?: boolean;
+  readOnly?: boolean;
 }
 
-function SettingField({ label, tooltip, children, value, secret = false }: SettingFieldProps) {
+function SettingField({
+  label,
+  tooltip,
+  value,
+  secret = false,
+  isLoading = false,
+  readOnly = true,
+}: SettingFieldProps) {
   const [showSecret, setShowSecret] = useState(false);
 
   const toggleSecretVisibility = () => {
@@ -139,25 +142,35 @@ function SettingField({ label, tooltip, children, value, secret = false }: Setti
         {label}
         {tooltip && <HelpTooltipIndicator text={tooltip} className="relative top-[5px] ml-1" />}
       </label>
-      <div className="space-y-2">
-        {secret && value ? (
-          <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2">
+        {isLoading ? (
+          <>
+            <Skeleton className="h-[38px] flex-1 rounded-lg" />
+            {secret && <Skeleton className="h-[38px] w-[38px] rounded-lg" />}
+          </>
+        ) : (
+          <>
             <InputField className="flex overflow-hidden pr-0">
-              <Input className="cursor-default" value={showSecret ? value : maskSecret(value)} readOnly />
-              <CopyButton size="input-right" valueToCopy={value} />
+              <Input
+                className="cursor-default"
+                value={secret ? (showSecret ? value : maskSecret(value ?? '')) : value}
+                readOnly={readOnly}
+              />
+              <CopyButton size="input-right" valueToCopy={value ?? ''} />
             </InputField>
 
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={toggleSecretVisibility}
-              aria-label={showSecret ? 'Hide Secret' : 'Show Secret'}
-            >
-              {showSecret ? <RiEyeOffLine className="size-4" /> : <RiEyeLine className="size-4" />}
-            </Button>
-          </div>
-        ) : (
-          children
+            {secret && (
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={toggleSecretVisibility}
+                disabled={isLoading}
+                aria-label={showSecret ? 'Hide Secret' : 'Show Secret'}
+              >
+                {showSecret ? <RiEyeOffLine className="size-4" /> : <RiEyeLine className="size-4" />}
+              </Button>
+            )}
+          </>
         )}
       </div>
     </div>

From bc7dd4adc2ca5c4f151dac0edd23e997fa595084 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Sun, 8 Dec 2024 12:35:04 +0200
Subject: [PATCH 04/10] fix: wudth

---
 .../src/components/header-navigation/header-navigation.tsx   | 5 ++++-
 apps/dashboard/src/pages/api-keys.tsx                        | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/components/header-navigation/header-navigation.tsx b/apps/dashboard/src/components/header-navigation/header-navigation.tsx
index 19c2e376e0e..263026c64bc 100644
--- a/apps/dashboard/src/components/header-navigation/header-navigation.tsx
+++ b/apps/dashboard/src/components/header-navigation/header-navigation.tsx
@@ -13,7 +13,10 @@ export const HeaderNavigation = (props: HeaderNavigationProps) => {
   const { startItems, hideBridgeUrl = false, className, ...rest } = props;
   return (
     <div
-      className={cn('bg-background flex h-12 w-full items-center justify-between border-b px-2.5 py-1.5', className)}
+      className={cn(
+        'bg-background flex h-12 w-full items-center justify-between border-b border-b-neutral-100 px-2.5 py-1.5',
+        className
+      )}
       {...rest}
     >
       {startItems}
diff --git a/apps/dashboard/src/pages/api-keys.tsx b/apps/dashboard/src/pages/api-keys.tsx
index e5f7965296f..7bb9d740a9e 100644
--- a/apps/dashboard/src/pages/api-keys.tsx
+++ b/apps/dashboard/src/pages/api-keys.tsx
@@ -46,7 +46,7 @@ export function ApiKeysPage() {
       <DashboardLayout headerStartItems={<h1 className="text-foreground-950">API Keys</h1>}>
         <Container>
           <div className="grid grid-cols-1 gap-6 lg:grid-cols-[224px,1fr]">
-            <div className="column flex gap-2 p-6 pt-0">
+            <div className="column flex gap-2 pt-0">
               <div className="flex flex-col gap-2">
                 <RiKey2Line className="h-8 w-8" />
                 <h2 className="text-foreground-950 text-md font-medium">Environment Keys</h2>
@@ -57,7 +57,7 @@ export function ApiKeysPage() {
                 </ExternalLink>
               </div>
             </div>
-            <div className="flex flex-col gap-6">
+            <div className="ml-auto flex w-full max-w-[700px] flex-col gap-6">
               <Form {...form}>
                 <Card className="w-full overflow-hidden shadow-none">
                   <CardHeader>Application</CardHeader>

From 1ff70169a774731d5f8aa9c1a9ebbbd2f61a4523 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Sun, 8 Dec 2024 12:44:50 +0200
Subject: [PATCH 05/10] fix: pr review

---
 .../components/settings/setting-section.tsx   | 23 --------
 .../src/components/shared/external-link.tsx   |  6 +--
 apps/dashboard/src/pages/api-keys.tsx         | 53 +++++++++++--------
 3 files changed, 35 insertions(+), 47 deletions(-)
 delete mode 100644 apps/dashboard/src/components/settings/setting-section.tsx

diff --git a/apps/dashboard/src/components/settings/setting-section.tsx b/apps/dashboard/src/components/settings/setting-section.tsx
deleted file mode 100644
index c4fa87bed21..00000000000
--- a/apps/dashboard/src/components/settings/setting-section.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ReactNode } from 'react';
-import { Card, CardContent, CardHeader } from '@/components/primitives/card';
-
-interface SettingSectionProps {
-  title: string;
-  description?: string;
-  children: ReactNode;
-}
-
-export function SettingSection({ title, description, children }: SettingSectionProps) {
-  return (
-    <Card className="w-full overflow-hidden shadow-none">
-      <CardHeader>
-        {title}
-        {description && <p className="text-foreground-600 mt-1 text-xs">{description}</p>}
-      </CardHeader>
-
-      <CardContent className="rounded-b-xl border-t bg-neutral-50 bg-white p-3">
-        <div className="space-y-4 p-3">{children}</div>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/apps/dashboard/src/components/shared/external-link.tsx b/apps/dashboard/src/components/shared/external-link.tsx
index 44081b36ea4..ade6bb1ecd4 100644
--- a/apps/dashboard/src/components/shared/external-link.tsx
+++ b/apps/dashboard/src/components/shared/external-link.tsx
@@ -1,10 +1,10 @@
-import { RiBookMarkedLine, RiBookmarkLine, RiExternalLinkLine } from 'react-icons/ri';
+import { RiBookMarkedLine, RiExternalLinkLine, RiQuestionLine } from 'react-icons/ri';
 import { cn } from '@/utils/ui';
 
 interface ExternalLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   children: React.ReactNode;
   iconClassName?: string;
-  variant?: 'default' | 'documentation';
+  variant?: 'default' | 'documentation' | 'tip';
 }
 
 export function ExternalLink({ children, className, variant = 'default', iconClassName, ...props }: ExternalLinkProps) {
@@ -17,7 +17,7 @@ export function ExternalLink({ children, className, variant = 'default', iconCla
     >
       {variant === 'documentation' && <RiBookMarkedLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
       {variant === 'default' && <RiExternalLinkLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
-
+      {variant === 'tip' && <RiQuestionLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
       {children}
     </a>
   );
diff --git a/apps/dashboard/src/pages/api-keys.tsx b/apps/dashboard/src/pages/api-keys.tsx
index 7bb9d740a9e..13d8729d15f 100644
--- a/apps/dashboard/src/pages/api-keys.tsx
+++ b/apps/dashboard/src/pages/api-keys.tsx
@@ -1,5 +1,5 @@
 import { useState, ReactNode } from 'react';
-import { RiKey2Line, RiEyeLine, RiEyeOffLine } from 'react-icons/ri';
+import { RiKey2Line, RiEyeLine, RiEyeOffLine, RiQuestionLine } from 'react-icons/ri';
 import { useEnvironment } from '@/context/environment/hooks';
 import { CopyButton } from '@/components/primitives/copy-button';
 import { Card, CardContent, CardHeader } from '@/components/primitives/card';
@@ -15,6 +15,7 @@ import { Container } from '../components/primitives/container';
 import { HelpTooltipIndicator } from '../components/primitives/help-tooltip-indicator';
 import { API_HOSTNAME } from '../config';
 import { Skeleton } from '@/components/primitives/skeleton';
+import { HelpCircle } from 'lucide-react';
 
 interface ApiKeysFormData {
   apiKey: string;
@@ -80,26 +81,36 @@ export function ApiKeysPage() {
                   </CardContent>
                 </Card>
 
-                <Card className="w-full overflow-hidden shadow-none">
-                  <CardHeader>
-                    Secret Keys
-                    <p className="text-foreground-600 mt-1 text-xs">
-                      Use this key to authenticate your API requests. Keep it secure and never share it publicly.
-                    </p>
-                  </CardHeader>
-
-                  <CardContent className="rounded-b-xl border-t bg-neutral-50 bg-white p-3">
-                    <div className="space-y-4 p-3">
-                      <SettingField
-                        label="Secret Key"
-                        tooltip="Use this key to authenticate your API requests. Keep it secure and never share it publicly."
-                        value={form.getValues('apiKey')}
-                        secret
-                        isLoading={isLoading}
-                      />
-                    </div>
-                  </CardContent>
-                </Card>
+                <div>
+                  <Card className="w-full overflow-hidden shadow-none">
+                    <CardHeader>
+                      Secret Keys
+                      <p className="text-foreground-600 mt-1 text-xs">
+                        Use this key to authenticate your API requests. Keep it secure and never share it publicly.
+                      </p>
+                    </CardHeader>
+
+                    <CardContent className="rounded-b-xl border-t bg-neutral-50 bg-white p-3">
+                      <div className="space-y-4 p-3">
+                        <SettingField
+                          label="Secret Key"
+                          tooltip="Use this key to authenticate your API requests. Keep it secure and never share it publicly."
+                          value={form.getValues('apiKey')}
+                          secret
+                          isLoading={isLoading}
+                        />
+                      </div>
+                    </CardContent>
+                  </Card>
+                  <ExternalLink
+                    variant="tip"
+                    iconClassName="text-neutral-400"
+                    href="https://docs.novu.co/sdks/overview"
+                    className="mt-2 text-xs text-neutral-600"
+                  >
+                    Learn more about APIs in Novu
+                  </ExternalLink>
+                </div>
               </Form>
             </div>
           </div>

From d94d7852ffa3964148185ec6c5260c8c4810e43d Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Sun, 8 Dec 2024 12:45:13 +0200
Subject: [PATCH 06/10] fix:

---
 apps/dashboard/src/pages/api-keys.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/pages/api-keys.tsx b/apps/dashboard/src/pages/api-keys.tsx
index 13d8729d15f..4ad6b0062a0 100644
--- a/apps/dashboard/src/pages/api-keys.tsx
+++ b/apps/dashboard/src/pages/api-keys.tsx
@@ -1,5 +1,5 @@
-import { useState, ReactNode } from 'react';
-import { RiKey2Line, RiEyeLine, RiEyeOffLine, RiQuestionLine } from 'react-icons/ri';
+import { useState } from 'react';
+import { RiKey2Line, RiEyeLine, RiEyeOffLine } from 'react-icons/ri';
 import { useEnvironment } from '@/context/environment/hooks';
 import { CopyButton } from '@/components/primitives/copy-button';
 import { Card, CardContent, CardHeader } from '@/components/primitives/card';
@@ -15,7 +15,6 @@ import { Container } from '../components/primitives/container';
 import { HelpTooltipIndicator } from '../components/primitives/help-tooltip-indicator';
 import { API_HOSTNAME } from '../config';
 import { Skeleton } from '@/components/primitives/skeleton';
-import { HelpCircle } from 'lucide-react';
 
 interface ApiKeysFormData {
   apiKey: string;

From 385908765e1d73c3baa95131fb6210f0908f1d59 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Sun, 8 Dec 2024 12:48:59 +0200
Subject: [PATCH 07/10] fix: link

---
 apps/dashboard/src/pages/api-keys.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/pages/api-keys.tsx b/apps/dashboard/src/pages/api-keys.tsx
index 4ad6b0062a0..9821dfa1441 100644
--- a/apps/dashboard/src/pages/api-keys.tsx
+++ b/apps/dashboard/src/pages/api-keys.tsx
@@ -104,10 +104,10 @@ export function ApiKeysPage() {
                   <ExternalLink
                     variant="tip"
                     iconClassName="text-neutral-400"
-                    href="https://docs.novu.co/sdks/overview"
+                    href="https://docs.novu.co/api-reference/overview"
                     className="mt-2 text-xs text-neutral-600"
                   >
-                    Learn more about APIs in Novu
+                    Learn more about our APIs
                   </ExternalLink>
                 </div>
               </Form>

From 0acb8707a36a6b6e6e6f4cd2ff056aac1794ee42 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Sun, 8 Dec 2024 12:50:32 +0200
Subject: [PATCH 08/10] fix: add telemtry

---
 .../src/components/shared/external-link.tsx   | 22 ++++++++++++++++++-
 apps/dashboard/src/utils/telemetry.ts         |  1 +
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/components/shared/external-link.tsx b/apps/dashboard/src/components/shared/external-link.tsx
index ade6bb1ecd4..483c083a4af 100644
--- a/apps/dashboard/src/components/shared/external-link.tsx
+++ b/apps/dashboard/src/components/shared/external-link.tsx
@@ -1,5 +1,7 @@
 import { RiBookMarkedLine, RiExternalLinkLine, RiQuestionLine } from 'react-icons/ri';
 import { cn } from '@/utils/ui';
+import { useTelemetry } from '@/hooks/use-telemetry';
+import { TelemetryEvent } from '@/utils/telemetry';
 
 interface ExternalLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   children: React.ReactNode;
@@ -7,12 +9,30 @@ interface ExternalLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement
   variant?: 'default' | 'documentation' | 'tip';
 }
 
-export function ExternalLink({ children, className, variant = 'default', iconClassName, ...props }: ExternalLinkProps) {
+export function ExternalLink({
+  children,
+  className,
+  variant = 'default',
+  iconClassName,
+  href,
+  ...props
+}: ExternalLinkProps) {
+  const telemetry = useTelemetry();
+
+  const handleClick = () => {
+    telemetry(TelemetryEvent.EXTERNAL_LINK_CLICKED, {
+      href,
+      variant,
+    });
+  };
+
   return (
     <a
       target="_blank"
       rel="noopener noreferrer"
       className={cn('text-foreground-600 inline-flex items-center gap-1 hover:underline', className)}
+      href={href}
+      onClick={handleClick}
       {...props}
     >
       {variant === 'documentation' && <RiBookMarkedLine className={cn('size-4', iconClassName)} aria-hidden="true" />}
diff --git a/apps/dashboard/src/utils/telemetry.ts b/apps/dashboard/src/utils/telemetry.ts
index 2e7642e8618..0212716ce5d 100644
--- a/apps/dashboard/src/utils/telemetry.ts
+++ b/apps/dashboard/src/utils/telemetry.ts
@@ -22,4 +22,5 @@ export enum TelemetryEvent {
   INBOX_EMBED_SUCCESS_PAGE_VIEWED = 'Inbox embed success page viewed - [Onboarding]',
   WORKFLOW_PREFERENCES_OVERRIDE_USED = 'Workflow preferences override used',
   EXPORT_TO_CODE_BANNER_REACTION = 'Export to Code banner reaction - [Promotional]',
+  EXTERNAL_LINK_CLICKED = 'External link clicked',
 }

From 4a5fd89fe09e5efc7445c389db4465e5e0fff0a8 Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Sun, 8 Dec 2024 12:51:36 +0200
Subject: [PATCH 09/10] fix: navigation

---
 .../src/components/side-navigation/side-navigation.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/components/side-navigation/side-navigation.tsx b/apps/dashboard/src/components/side-navigation/side-navigation.tsx
index 2795bc5800f..cdafcf23875 100644
--- a/apps/dashboard/src/components/side-navigation/side-navigation.tsx
+++ b/apps/dashboard/src/components/side-navigation/side-navigation.tsx
@@ -70,7 +70,7 @@ export const SideNavigation = () => {
                 <RiStore3Line className="size-4" />
                 <span>Integration Store</span>
               </NavigationLink>
-              <NavigationLink to={ROUTES.API_KEYS}>
+              <NavigationLink to={buildRoute(ROUTES.API_KEYS, { environmentSlug: currentEnvironment?.slug ?? '' })}>
                 <RiKey2Line className="size-4" />
                 <span>API Keys</span>
               </NavigationLink>

From 16243a287fd5fab62d9965f8467cd44ac95c240d Mon Sep 17 00:00:00 2001
From: Dima Grossman <dima@grossman.io>
Date: Sun, 8 Dec 2024 15:00:57 +0200
Subject: [PATCH 10/10] Update apps/dashboard/src/pages/api-keys.tsx

Co-authored-by: George Djabarov <39195835+djabarovgeorge@users.noreply.github.com>
---
 apps/dashboard/src/pages/api-keys.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/dashboard/src/pages/api-keys.tsx b/apps/dashboard/src/pages/api-keys.tsx
index 9821dfa1441..033d68ee3a4 100644
--- a/apps/dashboard/src/pages/api-keys.tsx
+++ b/apps/dashboard/src/pages/api-keys.tsx
@@ -50,7 +50,7 @@ export function ApiKeysPage() {
               <div className="flex flex-col gap-2">
                 <RiKey2Line className="h-8 w-8" />
                 <h2 className="text-foreground-950 text-md font-medium">Environment Keys</h2>
-                <p className="text-foreground-400 text-xs">Copy and manage your public and private keys</p>
+                <p className="text-foreground-400 text-xs">Manage your public and private keys</p>
 
                 <ExternalLink variant="documentation" href="https://docs.novu.co/sdks/overview" className="text-sm">
                   Read about our SDKs