twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-27 11:03:40 +03:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 198 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/twenty-front/public/images/placeholders/background/loading_accounts_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
packages/twenty-front/public/images/placeholders/moving-image/loading_accounts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

18
packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx
View File

@ -1,17 +1,19 @@
import { Loader } from '@/ui/feedback/loader/components/Loader';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
export const EmailLoader = ({ loadingText }: { loadingText?: string }) => (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="loadingMessages" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>{loadingText || 'Loading emails'}</StyledEmptyTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
{loadingText || 'Loading emails'}
</AnimatedPlaceholderEmptyTitle>
<Loader />
</StyledEmptyTextContainer>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyTextContainer>
</AnimatedPlaceholderEmptyContainer>
);

24
packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx
View File

@ -20,10 +20,10 @@ import {
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { Card } from '@/ui/layout/card/components/Card';
import { Section } from '@/ui/layout/section/components/Section';
@ -155,15 +155,17 @@ export const EmailThreads = ({
if (!firstQueryLoading && !timelineThreads?.length) {
return (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="emptyInbox" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>Empty Inbox</StyledEmptyTitle>
<StyledEmptySubTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
Empty Inbox
</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
No email exchange has occurred with this record yet.
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
</AnimatedPlaceholderEmptyContainer>
);
}

24
packages/twenty-front/src/modules/activities/files/components/Attachments.tsx
View File

@ -11,10 +11,10 @@ import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
const StyledAttachmentsContainer = styled.div`
@ -66,14 +66,16 @@ export const Attachments = ({
onUploadFile={onUploadFile}
/>
) : (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="noFile" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>No Files</StyledEmptyTitle>
<StyledEmptySubTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
No Files
</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
There are no associated files with this record.
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<StyledFileInput
ref={inputFileRef}
onChange={handleFileChange}
@ -85,7 +87,7 @@ export const Attachments = ({
variant="secondary"
onClick={handleUploadFileClick}
/>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyContainer>
)}
</StyledDropZoneContainer>
);

24
packages/twenty-front/src/modules/activities/notes/components/Notes.tsx
View File

@ -8,10 +8,10 @@ import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
const StyledNotesContainer = styled.div`
@ -33,14 +33,16 @@ export const Notes = ({
if (notes?.length === 0) {
return (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="noNote" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>No notes</StyledEmptyTitle>
<StyledEmptySubTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
No notes
</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
There are no associated notes with this record.
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<Button
Icon={IconPlus}
title="New note"
@ -52,7 +54,7 @@ export const Notes = ({
})
}
/>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyContainer>
);
}

22
packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
View File

@ -9,10 +9,10 @@ import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
@ -58,14 +58,14 @@ export const TaskGroups = ({
(activeTabId === 'done' && completedTasks?.length === 0)
) {
return (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="noTask" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>No Task</StyledEmptyTitle>
<StyledEmptySubTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>No Task</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
There are no tasks for this user filter
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<Button
Icon={IconPlus}
title="New task"
@ -77,7 +77,7 @@ export const TaskGroups = ({
})
}
/>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyContainer>
);
}

24
packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx
View File

@ -5,10 +5,10 @@ import { useTimelineActivities } from '@/activities/timeline/hooks/useTimelineAc
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@ -46,16 +46,18 @@ export const Timeline = ({
if (showEmptyState) {
return (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="emptyTimeline" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>Add your first Activity</StyledEmptyTitle>
<StyledEmptySubTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
Add your first Activity
</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
There are no activities associated with this record.{' '}
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<TimelineCreateButtonGroup targetableObject={targetableObject} />
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyContainer>
);
}

24
packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx
View File

@ -4,10 +4,10 @@ import { Button } from 'tsup.ui.index';
import { IconRefresh } from '@/ui/display/icon';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
type GenericErrorFallbackProps = FallbackProps;
@ -17,18 +17,22 @@ export const GenericErrorFallback = ({
resetErrorBoundary,
}: GenericErrorFallbackProps) => {
return (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="errorIndex" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>Server’s on a coffee break</StyledEmptyTitle>
<StyledEmptySubTitle>{error.message}</StyledEmptySubTitle>
</StyledEmptyTextContainer>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
Server’s on a coffee break
</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
{error.message}
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<Button
Icon={IconRefresh}
title="Reload"
variant={'secondary'}
onClick={() => resetErrorBoundary()}
/>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyContainer>
);
};

24
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
View File

@ -11,10 +11,10 @@ import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
StyledEmptyContainer,
StyledEmptySubTitle,
StyledEmptyTextContainer,
StyledEmptyTitle,
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptySubTitle,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
@ -110,23 +110,23 @@ export const RecordTableWithWrappers = ({
tableBodyRef={tableBodyRef}
/>
{!isRecordTableInitialLoading && numberOfTableRows === 0 && (
<StyledEmptyContainer>
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="noRecord" />
<StyledEmptyTextContainer>
<StyledEmptyTitle>
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
Add your first {objectLabel}
</StyledEmptyTitle>
<StyledEmptySubTitle>
</AnimatedPlaceholderEmptyTitle>
<AnimatedPlaceholderEmptySubTitle>
Use our API or add your first {objectLabel} manually
</StyledEmptySubTitle>
</StyledEmptyTextContainer>
</AnimatedPlaceholderEmptySubTitle>
</AnimatedPlaceholderEmptyTextContainer>
<Button
Icon={IconPlus}
title={`Add a ${objectLabel}`}
variant={'secondary'}
onClick={createRecord}
/>
</StyledEmptyContainer>
</AnimatedPlaceholderEmptyContainer>
)}
</StyledTableContainer>
</StyledTableWithHeader>

21
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsSection.tsx
View File

@ -1,27 +1,16 @@
import { useRecoilValue } from 'recoil';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Section } from '@/ui/layout/section/components/Section';
import { SettingsAccountsCard } from './SettingsAccountsCard';
import { SettingsAccountsEmptyStateCard } from './SettingsAccountsEmptyStateCard';
export const SettingsAccountsConnectedAccountsSection = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const accounts = useFindManyRecords<ConnectedAccount>({
objectNameSingular: 'connectedAccount',
filter: {
accountOwnerId: {
eq: currentWorkspaceMember?.id,
},
},
}).records;
export const SettingsAccountsConnectedAccountsSection = ({
accounts,
}: {
accounts: ConnectedAccount[];
}) => {
const { deleteOneRecord } = useDeleteOneRecord({
objectNameSingular: 'connectedAccount',
});

16
packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
export const StyledEmptyContainer = styled.div`
const StyledEmptyContainer = styled.div`
align-items: center;
width: 100%;
height: 100%;
@ -11,7 +11,9 @@ export const StyledEmptyContainer = styled.div`
text-align: center;
`;
export const StyledEmptyTextContainer = styled.div`
export { StyledEmptyContainer as AnimatedPlaceholderEmptyContainer };
const StyledEmptyTextContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
@ -21,13 +23,17 @@ export const StyledEmptyTextContainer = styled.div`
width: 100%;
`;
export const StyledEmptyTitle = styled.div`
export { StyledEmptyTextContainer as AnimatedPlaceholderEmptyTextContainer };
const StyledEmptyTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
`;
export const StyledEmptySubTitle = styled.div`
export { StyledEmptyTitle as AnimatedPlaceholderEmptyTitle };
const StyledEmptySubTitle = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
@ -36,3 +42,5 @@ export const StyledEmptySubTitle = styled.div`
overflow: hidden;
width: 50%;
`;
export { StyledEmptySubTitle as AnimatedPlaceholderEmptySubTitle };

16
packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/ErrorPlaceholderStyled.tsx
View File

@ -1,6 +1,6 @@
import styled from '@emotion/styled';
export const StyledErrorContainer = styled.div`
const StyledErrorContainer = styled.div`
align-items: center;
width: 100%;
height: 100%;
@ -11,7 +11,9 @@ export const StyledErrorContainer = styled.div`
text-align: center;
`;
export const StyledErrorTextContainer = styled.div`
export { StyledErrorContainer as AnimatedPlaceholderErrorContainer };
const StyledErrorTextContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
@ -21,14 +23,18 @@ export const StyledErrorTextContainer = styled.div`
width: 100%;
`;
export const StyledErrorTitle = styled.div`
export { StyledErrorTextContainer as AnimatedPlaceholderErrorTextContainer };
const StyledErrorTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
line-height: ${({ theme }) => theme.text.lineHeight.lg};
`;
export const StyledErrorSubTitle = styled.div`
export { StyledErrorTitle as AnimatedPlaceholderErrorTitle };
const StyledErrorSubTitle = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.regular};
@ -36,3 +42,5 @@ export const StyledErrorSubTitle = styled.div`
max-height: 2.4em;
overflow: hidden;
`;
export { StyledErrorSubTitle as AnimatedPlaceholderErrorSubTitle };

2
packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts
View File

@ -6,6 +6,7 @@ export const Background: Record<string, string> = {
errorIndex: '/images/placeholders/background/error_index_bg.png',
emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
error404: '/images/placeholders/background/404_bg.png',
error500: '/images/placeholders/background/500_bg.png',
@ -19,6 +20,7 @@ export const MovingImage: Record<string, string> = {
errorIndex: '/images/placeholders/moving-image/error_index.png',
emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
error404: '/images/placeholders/moving-image/404.png',
error500: '/images/placeholders/moving-image/500.png',

4
packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
View File

@ -11,6 +11,7 @@ type SubMenuTopBarContainerProps = {
children: JSX.Element | JSX.Element[];
title: string;
Icon: IconComponent;
className?: string;
};
const StyledContainer = styled.div<{ isMobile: boolean }>`
@ -24,11 +25,12 @@ export const SubMenuTopBarContainer = ({
children,
title,
Icon,
className,
}: SubMenuTopBarContainerProps) => {
const isMobile = useIsMobile();
return (
<StyledContainer isMobile={isMobile}>
<StyledContainer isMobile={isMobile} className={className}>
{isMobile && <PageHeader title={title} Icon={Icon} />}
<RightDrawerContainer>{children}</RightDrawerContainer>
</StyledContainer>

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

34
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 />
{loading ? (
<SettingsAccountLoader />
) : (
<>
<SettingsAccountsConnectedAccountsSection accounts={accounts} />
<SettingsAccountsSettingsSection />
</>
)}
</SettingsPageContainer>
</SubMenuTopBarContainer>
);