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

7339 implement contextual actions inside the commandmenu (#8000)

Browse Source 
Closes #7339


https://github.com/user-attachments/assets/b623caa4-c1b3-448e-8880-4a8301802ba8
This commit is contained in:
Raphaël Bosi
2024-10-29 15:10:45 +01:00
committed by GitHub
parent 8bb07c4a4f
commit fe2c8bb43b
30 changed files with 399 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
View File

@ -1,7 +1,8 @@
import styled from '@emotion/styled';
import { useParams } from 'react-router-dom';
import { SetMainContextStoreComponentInstanceIdEffect } from '@/context-store/components/SetMainContextStoreComponentInstanceIdEffect';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { MainContextStoreComponentInstanceIdSetterEffect } from '@/context-store/components/MainContextStoreComponentInstanceIdSetterEffect';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
@ -81,13 +82,19 @@ export const RecordIndexPage = () => {
<StyledIndexContainer>
<ContextStoreComponentInstanceContext.Provider
value={{
instanceId: 'record-index',
instanceId: `record-index-${objectMetadataItem.id}`,
}}
>
<RecordIndexContainerContextStoreObjectMetadataEffect />
<RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
<SetMainContextStoreComponentInstanceIdEffect />
<RecordIndexContainer />
<ActionMenuComponentInstanceContext.Provider
value={{
instanceId: `record-index-${objectMetadataItem.id}`,
}}
>
<RecordIndexContainerContextStoreObjectMetadataEffect />
<RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
<MainContextStoreComponentInstanceIdSetterEffect />
<RecordIndexContainer />
</ActionMenuComponentInstanceContext.Provider>
</ContextStoreComponentInstanceContext.Provider>
</StyledIndexContainer>
</PageBody>

96
packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
View File

@ -1,6 +1,9 @@
import { useParams } from 'react-router-dom';
import { RecordShowActionMenu } from '@/action-menu/components/RecordShowActionMenu';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer';
import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage';
@ -11,7 +14,6 @@ import { PageContainer } from '@/ui/layout/page/components/PageContainer';
import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
import { RecordShowPageWorkflowHeader } from '@/workflow/components/RecordShowPageWorkflowHeader';
import { RecordShowPageWorkflowVersionHeader } from '@/workflow/components/RecordShowPageWorkflowVersionHeader';
import { RecordShowPageBaseHeader } from '~/pages/object-record/RecordShowPageBaseHeader';
import { RecordShowPageHeader } from '~/pages/object-record/RecordShowPageHeader';
export const RecordShowPage = () => {
@ -38,49 +40,61 @@ export const RecordShowPage = () => {
return (
<RecordFieldValueSelectorContextProvider>
<RecordValueSetterEffect recordId={objectRecordId} />
<PageContainer>
<PageTitle title={pageTitle} />
<RecordShowPageHeader
objectNameSingular={objectNameSingular}
objectRecordId={objectRecordId}
headerIcon={headerIcon}
<ContextStoreComponentInstanceContext.Provider
value={{
instanceId: `record-show-${objectRecordId}`,
}}
>
<ActionMenuComponentInstanceContext.Provider
value={{ instanceId: `record-show-${objectRecordId}` }}
>
<>
{objectNameSingular === CoreObjectNameSingular.Workflow ? (
<RecordShowPageWorkflowHeader workflowId={objectRecordId} />
) : objectNameSingular ===
CoreObjectNameSingular.WorkflowVersion ? (
<RecordShowPageWorkflowVersionHeader
workflowVersionId={objectRecordId}
/>
) : (
<RecordShowPageBaseHeader
{...{
isFavorite,
handleFavoriteButtonClick,
record,
objectMetadataItem,
objectNameSingular,
}}
/>
)}
</>
</RecordShowPageHeader>
<PageBody>
<TimelineActivityContext.Provider
value={{
labelIdentifierValue: pageName,
}}
>
<RecordShowContainer
<RecordValueSetterEffect recordId={objectRecordId} />
<PageContainer>
<PageTitle title={pageTitle} />
<RecordShowPageHeader
objectNameSingular={objectNameSingular}
objectRecordId={objectRecordId}
loading={loading}
/>
</TimelineActivityContext.Provider>
</PageBody>
</PageContainer>
headerIcon={headerIcon}
>
<>
{objectNameSingular === CoreObjectNameSingular.Workflow ? (
<RecordShowPageWorkflowHeader workflowId={objectRecordId} />
) : objectNameSingular ===
CoreObjectNameSingular.WorkflowVersion ? (
<RecordShowPageWorkflowVersionHeader
workflowVersionId={objectRecordId}
/>
) : (
<>
<RecordShowActionMenu
{...{
isFavorite,
handleFavoriteButtonClick,
record,
objectMetadataItem,
objectNameSingular,
}}
/>
</>
)}
</>
</RecordShowPageHeader>
<PageBody>
<TimelineActivityContext.Provider
value={{
labelIdentifierValue: pageName,
}}
>
<RecordShowContainer
objectNameSingular={objectNameSingular}
objectRecordId={objectRecordId}
loading={loading}
/>
</TimelineActivityContext.Provider>
</PageBody>
</PageContainer>
</ActionMenuComponentInstanceContext.Provider>
</ContextStoreComponentInstanceContext.Provider>
</RecordFieldValueSelectorContextProvider>
);
};