Added a 'Read documentation' button in the Developers tab in settings (#4249)

packages/twenty-front/src/modules/ui/display/icon/index.ts

@@ -17,6 +17,7 @@ export {
   IconBaselineDensitySmall,
   IconBell,
   IconBolt,
+  IconBook2,
   IconBox,
   IconBrandGithub,
   IconBrandGoogle,

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>

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>
+  );
+};