refactor: move some Settings components to @/settings

twentyhq · Mar 25, 2024 · 78ef812 · 78ef812
1 parent 18254f2
commit 78ef812
Show file tree

Hide file tree

Showing 12 changed files with 162 additions and 167 deletions.
diff --git a/...ttings/accounts/SettingsAccountLoader.tsx → ...unts/components/SettingsAccountLoader.tsx b/...ttings/accounts/SettingsAccountLoader.tsx → ...unts/components/SettingsAccountLoader.tsx
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx b/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>
+  );
+};
diff --git a/...rs/components/ReadDocumentationButton.tsx → ...nents/SettingsReadDocumentationButton.tsx b/...rs/components/ReadDocumentationButton.tsx → ...nents/SettingsReadDocumentationButton.tsx
@@ -1,7 +1,7 @@
 import { IconBook2 } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
 
-export const ReadDocumentationButton = () => {
+export const SettingsReadDocumentationButton = () => {
   return (
     <Button
       title="Read documentation"

diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsWebhooksTable.tsx b/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>
+  );
+};
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
@@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil';
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { SettingsAccountLoader } from '@/settings/accounts/components/SettingsAccountLoader';
 import { SettingsAccountsConnectedAccountsSection } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsSection';
 import { SettingsAccountsEmailsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistSection';
 import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
@@ -11,7 +12,6 @@ import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { SettingsAccountLoader } from '~/pages/settings/accounts/SettingsAccountLoader';
 
 export const SettingsAccounts = () => {
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);

diff --git a/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx b/packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
@@ -1,23 +1,70 @@
+import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';
+
 import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
-import { IconSettings } from '@/ui/display/icon';
+import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
+import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
+import { SettingsWebhooksTable } from '@/settings/developers/components/SettingsWebhooksTable';
+import { IconPlus, IconSettings } from '@/ui/display/icon';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Button } from '@/ui/input/button/components/Button';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
+import { Section } from '@/ui/layout/section/components/Section';
 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';
+const StyledButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding-top: ${({ theme }) => theme.spacing(2)};
+`;
 
 export const SettingsDevelopers = () => {
+  const navigate = useNavigate();
+
   return (
     <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
       <SettingsPageContainer>
         <SettingsHeaderContainer>
           <Breadcrumb links={[{ children: 'Developers' }]} />
-          <ReadDocumentationButton />
+          <SettingsReadDocumentationButton />
         </SettingsHeaderContainer>
-        <SettingsDevelopersApiKeys />
-        <SettingsDevelopersWebhooks />
+        <Section>
+          <H2Title
+            title="API keys"
+            description="Active APIs keys created by you or your team."
+          />
+          <SettingsApiKeysTable />
+          <StyledButtonContainer>
+            <Button
+              Icon={IconPlus}
+              title="Create API key"
+              size="small"
+              variant="secondary"
+              onClick={() => {
+                navigate('/settings/developers/api-keys/new');
+              }}
+            />
+          </StyledButtonContainer>
+        </Section>
+        <Section>
+          <H2Title
+            title="Webhooks"
+            description="Establish Webhook endpoints for notifications on asynchronous events."
+          />
+          <SettingsWebhooksTable />
+          <StyledButtonContainer>
+            <Button
+              Icon={IconPlus}
+              title="Create Webhook"
+              size="small"
+              variant="secondary"
+              onClick={() => {
+                navigate('/settings/developers/webhooks/new');
+              }}
+            />
+          </StyledButtonContainer>
+        </Section>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );

diff --git a/...ttingsDevelopersApiKeysDetail.stories.tsx → ...ttingsDevelopersApiKeysDetail.stories.tsx b/...ttingsDevelopersApiKeysDetail.stories.tsx → ...ttingsDevelopersApiKeysDetail.stories.tsx
diff --git a/.../SettingsDevelopersApiKeysNew.stories.tsx → .../SettingsDevelopersApiKeysNew.stories.tsx b/.../SettingsDevelopersApiKeysNew.stories.tsx → .../SettingsDevelopersApiKeysNew.stories.tsx
diff --git a/...tingsDevelopersWebhooksDetail.stories.tsx → ...tingsDevelopersWebhooksDetail.stories.tsx b/...tingsDevelopersWebhooksDetail.stories.tsx → ...tingsDevelopersWebhooksDetail.stories.tsx
@@ -10,7 +10,7 @@ import {
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
-  title: 'Pages/Settings/Developers/SettingsDevelopersWebhooksDetail',
+  title: 'Pages/Settings/Developers/Webhooks/SettingsDevelopersWebhooksDetail',
   component: SettingsDevelopersWebhooksDetail,
   decorators: [PageDecorator],
   args: {

diff --git a/...SettingsDevelopersWebhooksNew.stories.tsx → ...SettingsDevelopersWebhooksNew.stories.tsx b/...SettingsDevelopersWebhooksNew.stories.tsx → ...SettingsDevelopersWebhooksNew.stories.tsx
@@ -9,7 +9,7 @@ import {
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 const meta: Meta<PageDecoratorArgs> = {
-  title: 'Pages/Settings/Developers/SettingsDevelopersWebhooksNew',
+  title: 'Pages/Settings/Developers/Webhooks/SettingsDevelopersWebhooksNew',
   component: SettingsDevelopersWebhooksNew,
   decorators: [PageDecorator],
   args: { routePath: '/settings/developers' },

diff --git a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx
diff --git a/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooks.tsx b/packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooks.tsx