admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

3811 add accounts loader (#3829)

Browse Source 
* rename exports

* rename exports

* fix css

* done

* updating image
This commit is contained in:
bosiraphael
2024-02-09 15:29:11 +01:00
committed by GitHub
parent 11d1c4c161
commit 917fc5bd4d
18 changed files with 198 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/twenty-front/src/pages/not-found/NotFound.tsx
View File

@ -5,11 +5,11 @@ import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/S
import { AppPath } from '@/types/AppPath';
import { MainButton } from '@/ui/input/button/components/MainButton';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import { StyledEmptyTextContainer } from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { AnimatedPlaceholderEmptyTextContainer } from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import {
StyledErrorContainer,
StyledErrorSubTitle,
StyledErrorTitle,
AnimatedPlaceholderErrorContainer,
AnimatedPlaceholderErrorSubTitle,
AnimatedPlaceholderErrorTitle,
} from '@/ui/layout/animated-placeholder/components/ErrorPlaceholderStyled';
const StyledBackDrop = styled.div`
@ -37,15 +37,17 @@ export const NotFound = () => {
return (
<>
<StyledBackDrop>
<StyledErrorContainer>
<AnimatedPlaceholderErrorContainer>
<AnimatedPlaceholder type="error404" />
<StyledEmptyTextContainer>
<StyledErrorTitle>Off the beaten path</StyledErrorTitle>
<StyledErrorSubTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderErrorTitle>
Off the beaten path
</AnimatedPlaceholderErrorTitle>
<AnimatedPlaceholderErrorSubTitle>
The page you're seeking is either gone or never was. Let's get you
back on track
</StyledErrorSubTitle>
</StyledEmptyTextContainer>
</AnimatedPlaceholderErrorSubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<StyledButtonContainer>
<MainButton
title="Back to content"
@ -53,7 +55,7 @@ export const NotFound = () => {
onClick={() => navigate(AppPath.Index)}
/>
</StyledButtonContainer>
</StyledErrorContainer>
</AnimatedPlaceholderErrorContainer>
</StyledBackDrop>
<SignInBackgroundMockPage />
</>

19
packages/twenty-front/src/pages/settings/accounts/SettingsAccountLoader.tsx Normal file
View File

@ -0,0 +1,19 @@
import { Loader } from '@/ui/feedback/loader/components/Loader';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
export const SettingsAccountLoader = () => (
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="loadingAccounts" />
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
Loading account(s)
</AnimatedPlaceholderEmptyTitle>
<Loader />
</AnimatedPlaceholderEmptyTextContainer>
</AnimatedPlaceholderEmptyContainer>
);

36
packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
View File

@ -1,17 +1,47 @@
import { useRecoilValue } from 'recoil';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsAccountsConnectedAccountsSection } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsSection';
import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { IconSettings } from '@/ui/display/icon';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { SettingsAccountLoader } from '~/pages/settings/accounts/SettingsAccountLoader';
export const SettingsAccounts = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const { records: accounts, loading } = useFindManyRecords<ConnectedAccount>({
objectNameSingular: 'connectedAccount',
filter: {
accountOwnerId: {
eq: currentWorkspaceMember?.id,
},
},
});
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<SettingsPageContainer
style={
loading
? { height: '100%', boxSizing: 'border-box', width: '100%' }
: {}
}
>
<Breadcrumb links={[{ children: 'Accounts' }]} />
<SettingsAccountsConnectedAccountsSection />
<SettingsAccountsSettingsSection />
{loading ? (
<SettingsAccountLoader />
) : (
<>
<SettingsAccountsConnectedAccountsSection accounts={accounts} />
<SettingsAccountsSettingsSection />
</>
)}
</SettingsPageContainer>
</SubMenuTopBarContainer>
);