scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-30 04:12:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix workspace favorites in storybook (#8519)

Browse Source 
- create mock page when user not logged in
- add mocks when user logged in

Reset password story
<img width="1073" alt="Capture d’écran 2024-11-15 à 16 49 31"
src="https://github.com/user-attachments/assets/5d70d587-8094-47ad-8029-d8c729bd298d">

Record Index page story
<img width="1073" alt="Capture d’écran 2024-11-15 à 16 49 58"
src="https://github.com/user-attachments/assets/421772a9-62ee-4563-b492-5158db31fb9b">

Reset password page
<img width="1031" alt="Capture d’écran 2024-11-15 à 16 50 18"
src="https://github.com/user-attachments/assets/2d1cb119-5e34-49d0-9cfa-2b856a96f39c">
This commit is contained in:
Thomas Trompette
2024-11-18 12:08:05 +01:00
committed by GitHub
parent 0f1cf0e4e9
commit a0200e6d91
4 changed files with 180 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx Normal file
View File

@@ -0,0 +1,75 @@
import { SupportDropdown } from '@/support/components/SupportDropdown';
import {
NavigationDrawer,
NavigationDrawerProps,
} from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
import { NavigationDrawerSectionForObjectMetadataItems } from '@/object-metadata/components/NavigationDrawerSectionForObjectMetadataItems';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection';
import styled from '@emotion/styled';
import { IconSearch, IconSettings, useIsMobile } from 'twenty-ui';
import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
const StyledMainSection = styled(NavigationDrawerSection)`
min-height: fit-content;
`;
const WORKSPACE_FAVORITES = [
'person',
'company',
'opportunity',
'task',
'note',
];
export type SignInAppNavigationDrawerMockProps = {
className?: string;
};
export const SignInAppNavigationDrawerMock = ({
className,
}: SignInAppNavigationDrawerMockProps) => {
const isMobile = useIsMobile();
const children = (
<>
{!isMobile && (
<StyledMainSection>
<NavigationDrawerItem
label="Search"
Icon={IconSearch}
onClick={() => {}}
keyboard={['⌘', 'K']}
/>
<NavigationDrawerItem
label="Settings"
to={'/settings/profile'}
onClick={() => {}}
Icon={IconSettings}
/>
</StyledMainSection>
)}
<NavigationDrawerSectionForObjectMetadataItems
sectionTitle={'Workspace'}
isRemote={false}
objectMetadataItems={generatedMockObjectMetadataItems.filter((item) =>
WORKSPACE_FAVORITES.includes(item.nameSingular),
)}
/>
</>
);
const footer = <SupportDropdown />;
const drawerProps: NavigationDrawerProps = {
children,
footer,
};
return (
<NavigationDrawer className={className} footer={drawerProps.footer}>
{drawerProps.children}
</NavigationDrawer>
);
};

11
packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
View File

@@ -6,6 +6,7 @@ import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer
import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar';
import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
import { SignInAppNavigationDrawerMock } from '@/sign-in-background-mock/components/SignInAppNavigationDrawerMock';
import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
@@ -52,6 +53,10 @@ const StyledAppNavigationDrawer = styled(AppNavigationDrawer)`
flex-shrink: 0;
`;
const StyledAppNavigationDrawerMock = styled(SignInAppNavigationDrawerMock)`
flex-shrink: 0;
`;
const StyledMainContainer = styled.div`
display: flex;
flex: 0 1 100%;
@@ -93,7 +98,11 @@ export const DefaultLayout = () => {
duration: theme.animation.duration.normal,
}}
>
<StyledAppNavigationDrawer />
{showAuthModal ? (
<StyledAppNavigationDrawerMock />
) : (
<StyledAppNavigationDrawer />
)}
<StyledMainContainer>
{showAuthModal ? (
<>

94
packages/twenty-front/src/testing/mock-data/favorite.ts
View File

@@ -1,5 +1,6 @@
import { companiesQueryResult } from '~/testing/mock-data/companies';
import { mockedWorkspaceMemberData } from '~/testing/mock-data/users';
import { mockedViewsData } from '~/testing/mock-data/views';
export const mockedFavoritesData = [
{
@@ -33,4 +34,97 @@ export const mockedFavoritesData = [
note: null,
__typename: 'Favorite',
},
{
id: '20202020-dede-koko-873b-de4264d89026',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
deletedAt: null,
position: 1,
recordId: null,
workflowId: null,
workflow: null,
workflowRunId: null,
workflowRun: null,
workflowVersionId: null,
workflowVersion: null,
workspaceMemberId: null,
workspaceMember: null,
companyId: null,
company: null,
viewId: mockedViewsData[0].id,
view: mockedViewsData[0],
taskId: null,
task: null,
rocketId: null,
rocket: null,
personId: null,
person: null,
opportunityId: null,
opportunity: null,
noteId: null,
note: null,
__typename: 'Favorite',
},
{
id: '20202020-dede-koko-873b-de4264d89026',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
deletedAt: null,
position: 1,
recordId: null,
workflowId: null,
workflow: null,
workflowRunId: null,
workflowRun: null,
workflowVersionId: null,
workflowVersion: null,
workspaceMemberId: null,
workspaceMember: null,
companyId: null,
company: null,
viewId: mockedViewsData[1].id,
view: mockedViewsData[1],
taskId: null,
task: null,
rocketId: null,
rocket: null,
personId: null,
person: null,
opportunityId: null,
opportunity: null,
noteId: null,
note: null,
__typename: 'Favorite',
},
{
id: '20202020-dede-koko-873b-de4264d89026',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
deletedAt: null,
position: 1,
recordId: null,
workflowId: null,
workflow: null,
workflowRunId: null,
workflowRun: null,
workflowVersionId: null,
workflowVersion: null,
workspaceMemberId: null,
workspaceMember: null,
companyId: null,
company: null,
viewId: mockedViewsData[1].id,
view: mockedViewsData[1],
taskId: null,
task: null,
rocketId: null,
rocket: null,
personId: null,
person: null,
opportunityId: null,
opportunity: null,
noteId: null,
note: null,
__typename: 'Favorite',
},
];

2
packages/twenty-front/src/testing/mock-data/views.ts
View File

@@ -67,7 +67,7 @@ export const mockedViewsData = [
objectMetadataId: companyObjectMetadata?.id,
type: 'table',
icon: 'IconSkyline',
key: 'INDEX',
key: null,
kanbanFieldMetadataId: null,
position: 0,
createdAt: '2021-09-01T00:00:00.000Z',