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

Build message thread empty right drawer (#3585)

Browse Source 
* Trigger message thread top bar

* Rename message thread to thread

* Move all components in a directory

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Thomas Trompette
2024-01-23 10:56:31 +01:00
committed by GitHub
parent 762a56782c
commit 004c23768c
14 changed files with 226 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/twenty-front/src/modules/activities/right-drawer/components/ActivityActionBar.tsx
View File

@ -1,16 +1,14 @@
import { useRecoilState } from 'recoil';
import { useRecoilState, useRecoilValue } from 'recoil';
import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
import { IconTrash } from '@/ui/display/icon';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
type ActivityActionBarProps = {
activityId: string;
};
export const ActivityActionBar = ({ activityId }: ActivityActionBarProps) => {
export const ActivityActionBar = () => {
const viewableActivityId = useRecoilValue(viewableActivityIdState);
const [, setIsRightDrawerOpen] = useRecoilState(isRightDrawerOpenState);
const { deleteOneRecord: deleteOneActivity } = useDeleteOneRecord({
objectNameSingular: CoreObjectNameSingular.Activity,
@ -18,7 +16,9 @@ export const ActivityActionBar = ({ activityId }: ActivityActionBarProps) => {
});
const deleteActivity = () => {
deleteOneActivity?.(activityId);
if (viewableActivityId) {
deleteOneActivity?.(viewableActivityId);
}
setIsRightDrawerOpen(false);
};

26
packages/twenty-front/src/modules/activities/right-drawer/components/RightDrawerActivityTopBar.tsx Normal file
View File

@ -0,0 +1,26 @@
import styled from '@emotion/styled';
import { ActivityActionBar } from '@/activities/right-drawer/components/ActivityActionBar';
import { StyledRightDrawerTopBar } from '@/ui/layout/right-drawer/components/StyledRightDrawerTopBar';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { RightDrawerTopBarCloseButton } from '../../../ui/layout/right-drawer/components/RightDrawerTopBarCloseButton';
import { RightDrawerTopBarExpandButton } from '../../../ui/layout/right-drawer/components/RightDrawerTopBarExpandButton';
const StyledTopBarWrapper = styled.div`
display: flex;
`;
export const RightDrawerActivityTopBar = () => {
const isMobile = useIsMobile();
return (
<StyledRightDrawerTopBar>
<StyledTopBarWrapper>
<RightDrawerTopBarCloseButton />
{!isMobile && <RightDrawerTopBarExpandButton />}
</StyledTopBarWrapper>
<ActivityActionBar />
</StyledRightDrawerTopBar>
);
};

27
packages/twenty-front/src/modules/activities/right-drawer/components/__stories__/RightDrawerActivityTopBar.stories.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { RightDrawerActivityTopBar } from '../RightDrawerActivityTopBar';
const meta: Meta<typeof RightDrawerActivityTopBar> = {
title: 'Modules/Activities/RightDrawer/RightDrawerActivityTopBar',
component: RightDrawerActivityTopBar,
decorators: [
(Story) => (
<div style={{ width: '500px' }}>
<Story />
</div>
),
ComponentDecorator,
],
parameters: {
msw: graphqlMocks,
},
};
export default meta;
type Story = StoryObj<typeof RightDrawerActivityTopBar>;
export const Default: Story = {};