feat: add Settings/Accounts/New section with empty state (#3000)

* feat: add Settings/Accounts/New section with empty state * fix: added label for Empty State Card * On RecordTable, if I have no records, the Record Table Layout is not broken (#2911) * On RecordTable, if I have no records, the Record Table Layout is not broken Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Revert scrollbar changes Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * fix + button Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Revert unwanted changes Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Merge main Co-authored-by: Thiago Nascimbeni <[email protected]> Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> * On RecordTable, if I have no records, the Record Table Layout is not broken Co-authored-by: v1b3m <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Add bottom border Co-authored-by: v1b3m <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Always show + button Co-authored-by: v1b3m <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Refactor according to review Co-authored-by: v1b3m <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]> Co-authored-by: RubensRafael <[email protected]> * Fix according to PR --------- Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> Co-authored-by: Charles Bochet <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]> Co-authored-by: Lucas Bordeau <[email protected]> * Add jest tests for twenty-front (#2983) * Add jest tests for twenty-front Co-authored-by: v1b3m <[email protected]> * Fix tests --------- Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: v1b3m <[email protected]> Co-authored-by: Charles Bochet <[email protected]> * feat: select default Unit for Currency field (#2996) Closes #2347 Co-authored-by: Thais GUIGON <[email protected]> * Remaining UI docs (#2997) * remaining UI docs * completed ui component docs --------- Co-authored-by: Charles Bochet <[email protected]> * Fix CIs (#3004) * Fix CIs * Fix docs * Fix eslint-build * Move file * Move back * Fix server ci * Fix server ci * Fix server ci * Fix server ci * Deactivate e2e tests * Fix front * Fix front * Fix front * Add twenty-zapier and twenty-utils to the yarn project * fix * fix * Remove pull_request trigger * Fix ExceptionHandler requiring httpAdapter (#3021) * Disable chromatic CI * Disable Danger CI on push trigger (#3024) Disable Danger CI on main * feat: add Show Page Emails tab (#2962) * feat: add Show Page Emails tab Closes #2926, Closes #2927 * feat: review - disable Emails tab if messaging not enabled * refactor: review - add FeatureFlagKey type --------- Co-authored-by: Thais GUIGON <[email protected]> * 2880 timebox create a poc to fetch emails from the gmail api (#2993) * create empty service * getting threads is working * insert message channel * save threads in the db * clean * fetch messages * create a service to fetch a batch of messages * batch messages * use httpService instead * parse batch * base 64 decoding working * solve parsing bug * saving messages is working * bug to fix in fetchAllByBatches * fetching all messages is working but not saving yet * fecth 500 messages and threads is working * remove unused package and console log * set direction to incoming * fix bug after merging main * Fix modified files DangerCI (#3025) - fix modified files * feat: add Show Page Emails preview (#2964) * feat: add Show Page Emails preview Closes #2928 * refactor: review - rename StyledContainer to StyledCardContent * 2915 rest api documentation (#3020) * Init rest-api page * Add ugly form to fetch open api schema * Clean code * Make the form design more acceptable * Update doc * Use local storage * Update design * Add isLoading * Fix typo * Fix long lines * Code review returns * Remove staging and local url from servers * 2982-feat: Clear SelectableList reset scoped state (#2987) * 2982-feat: Clear SelectableList reset scoped state * State fixes as suggested in pr * State fixes as suggested in pr --------- Co-authored-by: Lucas Bordeau <[email protected]> Co-authored-by: Charles Bochet <[email protected]> * Fix docusaurus style overriden by spotlight/element (rest api playground) (#3033) * Fix docusaurus style overriden by spotlight/element (rest api playground) * Fix spacing * Fix spacing * Fix: keep the filter edition open if it is empty (#2986) Co-authored-by: 曹志浩 <[email protected]> Co-authored-by: Charles Bochet <[email protected]> --------- Co-authored-by: Lakshay saini <[email protected]> Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: gitstart-twenty <[email protected]> Co-authored-by: v1b3m <[email protected]> Co-authored-by: RubensRafael <[email protected]> Co-authored-by: Charles Bochet <[email protected]> Co-authored-by: Thiago Nascimbeni <[email protected]> Co-authored-by: Lucas Bordeau <[email protected]> Co-authored-by: Thaïs <[email protected]> Co-authored-by: Thais GUIGON <[email protected]> Co-authored-by: Nimra Ahmed <[email protected]> Co-authored-by: Charles Bochet <[email protected]> Co-authored-by: bosiraphael <[email protected]> Co-authored-by: brendanlaschke <[email protected]> Co-authored-by: martmull <[email protected]> Co-authored-by: Kanav Arora <[email protected]> Co-authored-by: Cao Z.H <[email protected]> Co-authored-by: 曹志浩 <[email protected]>
twentyhq · Dec 19, 2023 · b1ec3bd · b1ec3bd
1 parent ffcdace
commit b1ec3bd
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/.../twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx b/.../twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmptyStateCard.tsx
@@ -20,7 +20,13 @@ const StyledBody = styled(CardContent)`
   justify-content: center;
 `;
 
-export const SettingsAccountsEmptyStateCard = () => {
+type SettingsAccountsEmptyStateCardProps = {
+  label?: string;
+};
+
+export const SettingsAccountsEmptyStateCard = ({
+  label,
+}: SettingsAccountsEmptyStateCardProps) => {
   const [generateTransientToken] = useGenerateTransientTokenMutation();
 
   const handleGmailLogin = useCallback(async () => {
@@ -36,7 +42,7 @@ export const SettingsAccountsEmptyStateCard = () => {
 
   return (
     <Card>
-      <StyledHeader>No connected account</StyledHeader>
+      <StyledHeader>{label || 'No connected account'}</StyledHeader>
       <StyledBody>
         <Button
           Icon={IconGoogle}

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx
@@ -0,0 +1,15 @@
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Section } from '@/ui/layout/section/components/Section';
+import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
+
+export const SettingsNewAccountSection = () => {
+  return (
+    <Section>
+      <H2Title
+        title="New account"
+        description="Connect a new account to your workspace"
+      />
+      <SettingsAccountsEmptyStateCard label="Connect a Google account" />
+    </Section>
+  );
+};
diff --git a/packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx b/packages/twenty-front/src/pages/settings/accounts/SettingsNewAccount.tsx
@@ -1,3 +1,4 @@
+import { SettingsNewAccountSection } from '@/settings/accounts/components/SettingsNewAccountSection';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { IconSettings } from '@/ui/display/icon';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
@@ -13,6 +14,7 @@ export const SettingsNewAccount = () => {
             { children: `New` },
           ]}
         />
+        <SettingsNewAccountSection />
       </SettingsPageContainer>
     </SubMenuTopBarContainer>
   );