feat: create Integrations/IntegrationDetail page (#4574)

* feat: create Integrations/IntegrationDetail page

Closes #4546

* docs: add Settings/Integrations/Integration Detail page stories

* docs: add Settings/Billing page stories

* refactor: move some Settings components to @/settings

* refactor: move some Settings integrations components to @/settings/integrations

packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx

@@ -0,0 +1,53 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
+import { ApiFieldItem } from '@/settings/developers/types/api-key/ApiFieldItem';
+import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
+import { formatExpirations } from '@/settings/developers/utils/format-expiration';
+import { Table } from '@/spreadsheet-import/components/Table';
+import { TableBody } from '@/ui/layout/table/components/TableBody';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+
+const StyledTableBody = styled(TableBody)`
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+`;
+
+const StyledTableRow = styled(TableRow)`
+  grid-template-columns: 312px 132px 68px;
+`;
+
+export const SettingsApiKeysTable = () => {
+  const navigate = useNavigate();
+
+  const { records: apiKeys } = useFindManyRecords<ApiKey>({
+    objectNameSingular: CoreObjectNameSingular.ApiKey,
+    filter: { revokedAt: { is: 'NULL' } },
+  });
+
+  return (
+    <Table>
+      <StyledTableRow>
+        <TableHeader>Name</TableHeader>
+        <TableHeader>Expiration</TableHeader>
+        <TableHeader></TableHeader>
+      </StyledTableRow>
+      {!!apiKeys.length && (
+        <StyledTableBody>
+          {formatExpirations(apiKeys).map((fieldItem) => (
+            <SettingsApiKeysFieldItemTableRow
+              key={fieldItem.id}
+              fieldItem={fieldItem as ApiFieldItem}
+              onClick={() => {
+                navigate(`/settings/developers/api-keys/${fieldItem.id}`);
+              }}
+            />
+          ))}
+        </StyledTableBody>
+      )}
+    </Table>
+  );
+};

packages/twenty-front/src/modules/settings/developers/components/SettingsReadDocumentationButton.tsx

@@ -0,0 +1,17 @@
+import { IconBook2 } from '@/ui/display/icon';
+import { Button } from '@/ui/input/button/components/Button';
+
+export const SettingsReadDocumentationButton = () => {
+  return (
+    <Button
+      title="Read documentation"
+      variant="primary"
+      accent="default"
+      size="small"
+      Icon={IconBook2}
+      onClick={() => {
+        window.open('https://docs.twenty.com');
+      }}
+    ></Button>
+  );
+};

packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx

@@ -0,0 +1,51 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { SettingsDevelopersWebhookTableRow } from '@/settings/developers/components/SettingsDevelopersWebhookTableRow';
+import { WebhookFieldItem } from '@/settings/developers/types/webhook/WebhookFieldItem';
+import { Table } from '@/ui/layout/table/components/Table';
+import { TableBody } from '@/ui/layout/table/components/TableBody';
+import { TableHeader } from '@/ui/layout/table/components/TableHeader';
+import { TableRow } from '@/ui/layout/table/components/TableRow';
+
+const StyledTableBody = styled(TableBody)`
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+`;
+
+const StyledTableRow = styled(TableRow)`
+  grid-template-columns: 444px 68px;
+`;
+
+export const SettingsWebhooksTable = () => {
+  const navigate = useNavigate();
+
+  const { records: webhooks } = useFindManyRecords<WebhookFieldItem>({
+    objectNameSingular: CoreObjectNameSingular.Webhook,
+  });
+
+  return (
+    <Table>
+      <StyledTableRow>
+        <TableHeader>Url</TableHeader>
+        <TableHeader></TableHeader>
+      </StyledTableRow>
+      {!!webhooks.length && (
+        <StyledTableBody>
+          {webhooks.map((webhookFieldItem) => (
+            <SettingsDevelopersWebhookTableRow
+              key={webhookFieldItem.id}
+              fieldItem={webhookFieldItem}
+              onClick={() => {
+                navigate(
+                  `/settings/developers/webhooks/${webhookFieldItem.id}`,
+                );
+              }}
+            />
+          ))}
+        </StyledTableBody>
+      )}
+    </Table>
+  );
+};