admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 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 ? (
<>