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

Display workflow visualizer on show page (#6894)

Browse Source 
- Removed the route I previously used to visualize workflows
- Created another tab in the `<ShowPageRightContainer />` component in
which we display the visualizer

Questions:

- Should I use a feature flag to hide the feature?

Closes #6858
This commit is contained in:
Baptiste Devessier
2024-09-05 16:41:36 +02:00
committed by GitHub
parent 78d8df6a68
commit cddc92c00f
7 changed files with 71 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/twenty-front/src/modules/ui/layout/hooks/__tests__/useShowAuthModal.test.tsx
View File

@ -254,17 +254,6 @@ const testCases = [
{ loc: AppPath.Impersonate, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.InviteTeam, res: true },
{ loc: AppPath.Impersonate, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.Completed, res: false },
{ loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PlanRequired, res: true },
{ loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.Completed, res: false },
{ loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.Completed, res: false },
{ loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.PastDue, onboardingStatus: OnboardingStatus.Completed, res: false },
{ loc: AppPath.WorkflowShowPage, isLogged: false, subscriptionStatus: undefined, onboardingStatus: undefined, res: true },
{ loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.WorkspaceActivation, res: true },
{ loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.ProfileCreation, res: true },
{ loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.SyncEmail, res: true },
{ loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.InviteTeam, res: true },
{ loc: AppPath.WorkflowShowPage, isLogged: true, subscriptionStatus: SubscriptionStatus.Active, onboardingStatus: OnboardingStatus.Completed, res: false },
{ loc: AppPath.Authorize, isLogged: true, subscriptionStatus: undefined, onboardingStatus: OnboardingStatus.PlanRequired, res: true },
{ loc: AppPath.Authorize, isLogged: true, subscriptionStatus: SubscriptionStatus.Canceled, onboardingStatus: OnboardingStatus.Completed, res: false },
{ loc: AppPath.Authorize, isLogged: true, subscriptionStatus: SubscriptionStatus.Unpaid, onboardingStatus: OnboardingStatus.Completed, res: false },

27
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
View File

@ -7,6 +7,7 @@ import {
IconMail,
IconNotes,
IconPaperclip,
IconSettings,
IconTimelineEvent,
} from 'twenty-ui';
@ -22,6 +23,8 @@ import { ShowPageActivityContainer } from '@/ui/layout/show-page/components/Show
import { TabList } from '@/ui/layout/tab/components/TabList';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { Workflow } from '@/workflow/components/Workflow';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>`
display: flex;
@ -95,6 +98,12 @@ export const ShowPageRightContainer = ({
CoreObjectNameSingular.Person,
].includes(targetObjectNameSingular);
const isWorkflowEnabled = useIsFeatureEnabled('IS_WORKFLOW_ENABLED');
const isWorkflow =
isWorkflowEnabled &&
targetableObject.targetObjectNameSingular ===
CoreObjectNameSingular.Workflow;
const shouldDisplayCalendarTab = isCompanyOrPerson;
const shouldDisplayEmailsTab = emails && isCompanyOrPerson;
@ -122,7 +131,7 @@ export const ShowPageRightContainer = ({
id: 'timeline',
title: 'Timeline',
Icon: IconTimelineEvent,
hide: !timeline || isInRightDrawer,
hide: !timeline || isInRightDrawer || isWorkflow,
},
{
id: 'tasks',
@ -133,7 +142,8 @@ export const ShowPageRightContainer = ({
targetableObject.targetObjectNameSingular ===
CoreObjectNameSingular.Note ||
targetableObject.targetObjectNameSingular ===
CoreObjectNameSingular.Task,
CoreObjectNameSingular.Task ||
isWorkflow,
},
{
id: 'notes',
@ -144,13 +154,14 @@ export const ShowPageRightContainer = ({
targetableObject.targetObjectNameSingular ===
CoreObjectNameSingular.Note ||
targetableObject.targetObjectNameSingular ===
CoreObjectNameSingular.Task,
CoreObjectNameSingular.Task ||
isWorkflow,
},
{
id: 'files',
title: 'Files',
Icon: IconPaperclip,
hide: !notes,
hide: !notes || isWorkflow,
},
{
id: 'emails',
@ -164,6 +175,12 @@ export const ShowPageRightContainer = ({
Icon: IconCalendarEvent,
hide: !shouldDisplayCalendarTab,
},
{
id: 'workflow',
title: 'Workflow',
Icon: IconSettings,
hide: !isWorkflow,
},
];
const renderActiveTabContent = () => {
switch (activeTabId) {
@ -202,6 +219,8 @@ export const ShowPageRightContainer = ({
return <EmailThreads targetableObject={targetableObject} />;
case 'calendar':
return <Calendar targetableObject={targetableObject} />;
case 'workflow':
return <Workflow targetableObject={targetableObject} />;
default:
return <></>;
}