From b762be3f93c2c40fdf6019149de49607f03d8824 Mon Sep 17 00:00:00 2001
From: Sohal Kumar Singh <68388983+sohalkumar@users.noreply.github.com>
Date: Thu, 29 Feb 2024 23:30:30 +0530
Subject: [PATCH] Added a 'Read documentation' button in the Developers tab in
 settings (#4249)

---
 .../src/modules/ui/display/icon/index.ts        |  1 +
 .../settings/developers/SettingsDevelopers.tsx  |  8 +++++++-
 .../components/ReadDocumentationButton.tsx      | 17 +++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 packages/twenty-front/src/pages/settings/developers/components/ReadDocumentationButton.tsx

diff --git a/packages/twenty-front/src/modules/ui/display/icon/index.ts b/packages/twenty-front/src/modules/ui/display/icon/index.ts
index cc798c771..539cbfa1e 100644
--- a/packages/twenty-front/src/modules/ui/display/icon/index.ts
+++ b/packages/twenty-front/src/modules/ui/display/icon/index.ts
@@ -17,6 +17,7 @@ export {
   IconBaselineDensitySmall,
   IconBell,
   IconBolt,
+  IconBook2,
   IconBox,
   IconBrandGithub,
   IconBrandGoogle,
diff --git a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
index f0bf687a3..d61ebb9b6 100644
--- a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
@@ -1,3 +1,4 @@
+import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
@@ -5,11 +6,16 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { SettingsDevelopersApiKeys } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeys';
 import { SettingsDevelopersWebhooks } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhooks';
 
+import { ReadDocumentationButton } from './components/ReadDocumentationButton';
+
 export const SettingsDevelopers = () => {
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
-        <Breadcrumb links={[{ children: 'Developers' }]} />
+        <SettingsHeaderContainer>
+          <Breadcrumb links={[{ children: 'Developers' }]} />
+          <ReadDocumentationButton />
+        </SettingsHeaderContainer>
         <SettingsDevelopersApiKeys />
         <SettingsDevelopersWebhooks />
       </SettingsPageContainer>
diff --git a/packages/twenty-front/src/pages/settings/developers/components/ReadDocumentationButton.tsx b/packages/twenty-front/src/pages/settings/developers/components/ReadDocumentationButton.tsx
new file mode 100644
index 000000000..9edacf9cd
--- /dev/null
+++ b/packages/twenty-front/src/pages/settings/developers/components/ReadDocumentationButton.tsx
@@ -0,0 +1,17 @@
+import { IconBook2 } from '@/ui/display/icon';
+import { Button } from '@/ui/input/button/components/Button';
+
+export const ReadDocumentationButton = () => {
+  return (
+    <Button
+      title="Read documentation"
+      variant="primary"
+      accent="default"
+      size="small"
+      Icon={IconBook2}
+      onClick={() => {
+        window.open('https://docs.twenty.com');
+      }}
+    ></Button>
+  );
+};