Skip to content

Commit

Permalink
fix: ui fix for header on workspace pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhetreayush
mhetreayush committed May 8, 2024
1 parent 5676dda commit 557ae4c
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 154 deletions.
87 changes: 44 additions & 43 deletions packages/features/ee/workflows/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useRouter } from "next/navigation";
import type { Dispatch, SetStateAction } from "react";
import { useState } from "react";

import Shell from "@calcom/features/shell/Shell";
import Shell, { ShellMain } from "@calcom/features/shell/Shell";
import { classNames } from "@calcom/lib";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
Expand Down Expand Up @@ -51,50 +51,51 @@ function WorkflowsPage() {
});

return (
<Shell
withoutMain={false}
heading={t("workflows")}
subtitle={t("workflows_to_automate_notifications")}
title="Workflows"
description="Create workflows to automate notifications and reminders."
hideHeadingOnMobile
CTA={
session.data?.hasValidLicense ? (
<CreateButtonWithTeamsList
subtitle={t("new_workflow_subtitle").toUpperCase()}
createFunction={(teamId?: number) => {
createMutation.mutate({ teamId });
}}
isPending={createMutation.isPending}
disableMobileButton={true}
onlyShowWithNoTeams={true}
/>
) : null
}>
<Shell withoutMain>
<LicenseRequired>
<>
{queryRes.data?.totalCount ? (
<div className="flex">
<TeamsFilter />
<div className="ml-auto">
<CreateButtonWithTeamsList
subtitle={t("new_workflow_subtitle").toUpperCase()}
createFunction={(teamId?: number) => createMutation.mutate({ teamId })}
isPending={createMutation.isPending}
disableMobileButton={true}
onlyShowWithTeams={true}
/>
<ShellMain
heading={t("workflows")}
subtitle={t("workflows_to_automate_notifications")}
title="Workflows"
description="Create workflows to automate notifications and reminders."
hideHeadingOnMobile
CTA={
session.data?.hasValidLicense ? (
<CreateButtonWithTeamsList
subtitle={t("new_workflow_subtitle").toUpperCase()}
createFunction={(teamId?: number) => {
createMutation.mutate({ teamId });
}}
isPending={createMutation.isPending}
disableMobileButton={true}
onlyShowWithNoTeams={true}
/>
) : null
}>
<>
{queryRes.data?.totalCount ? (
<div className="flex">
<TeamsFilter />
<div className="ml-auto">
<CreateButtonWithTeamsList
subtitle={t("new_workflow_subtitle").toUpperCase()}
createFunction={(teamId?: number) => createMutation.mutate({ teamId })}
isPending={createMutation.isPending}
disableMobileButton={true}
onlyShowWithTeams={true}
/>
</div>
</div>
</div>
) : null}
<FilterResults
queryRes={queryRes}
emptyScreen={<EmptyScreen isFilteredView={false} />}
noResultsScreen={<EmptyScreen isFilteredView={true} />}
SkeletonLoader={SkeletonLoader}>
<WorkflowList workflows={queryRes.data?.filtered} />
</FilterResults>
</>
) : null}
<FilterResults
queryRes={queryRes}
emptyScreen={<EmptyScreen isFilteredView={false} />}
noResultsScreen={<EmptyScreen isFilteredView={true} />}
SkeletonLoader={SkeletonLoader}>
<WorkflowList workflows={queryRes.data?.filtered} />
</FilterResults>
</>
</ShellMain>
</LicenseRequired>
</Shell>
);
Expand Down
230 changes: 119 additions & 111 deletions packages/features/ee/workflows/pages/workflow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

import Shell from "@calcom/features/shell/Shell";
import Shell, { ShellMain } from "@calcom/features/shell/Shell";
import { classNames } from "@calcom/lib";
import { CALCOM_ENV, SENDER_ID } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
Expand Down Expand Up @@ -206,124 +206,132 @@ function WorkflowPage() {
});

return session.data ? (
<Form
form={form}
handleSubmit={async (values) => {
let activeOnEventTypeIds: number[] = [];
let isEmpty = false;
let isVerified = true;
<Shell withoutMain backPath="/workflows">
<LicenseRequired>
<Form
form={form}
handleSubmit={async (values) => {
let activeOnEventTypeIds: number[] = [];
let isEmpty = false;
let isVerified = true;

values.steps.forEach((step) => {
const strippedHtml = step.reminderBody?.replace(/<[^>]+>/g, "") || "";
values.steps.forEach((step) => {
const strippedHtml = step.reminderBody?.replace(/<[^>]+>/g, "") || "";

const isBodyEmpty = !isSMSOrWhatsappAction(step.action) && strippedHtml.length <= 1;
const isBodyEmpty = !isSMSOrWhatsappAction(step.action) && strippedHtml.length <= 1;

if (isBodyEmpty) {
form.setError(`steps.${step.stepNumber - 1}.reminderBody`, {
type: "custom",
message: t("fill_this_field"),
});
}
if (isBodyEmpty) {
form.setError(`steps.${step.stepNumber - 1}.reminderBody`, {
type: "custom",
message: t("fill_this_field"),
});
}

if (step.reminderBody) {
step.reminderBody = translateVariablesToEnglish(step.reminderBody, { locale: i18n.language, t });
}
if (step.emailSubject) {
step.emailSubject = translateVariablesToEnglish(step.emailSubject, { locale: i18n.language, t });
}
isEmpty = !isEmpty ? isBodyEmpty : isEmpty;
if (step.reminderBody) {
step.reminderBody = translateVariablesToEnglish(step.reminderBody, {
locale: i18n.language,
t,
});
}
if (step.emailSubject) {
step.emailSubject = translateVariablesToEnglish(step.emailSubject, {
locale: i18n.language,
t,
});
}
isEmpty = !isEmpty ? isBodyEmpty : isEmpty;

//check if phone number is verified
if (
(step.action === WorkflowActions.SMS_NUMBER || step.action === WorkflowActions.WHATSAPP_NUMBER) &&
!verifiedNumbers?.find((verifiedNumber) => verifiedNumber.phoneNumber === step.sendTo)
) {
isVerified = false;
//check if phone number is verified
if (
(step.action === WorkflowActions.SMS_NUMBER ||
step.action === WorkflowActions.WHATSAPP_NUMBER) &&
!verifiedNumbers?.find((verifiedNumber) => verifiedNumber.phoneNumber === step.sendTo)
) {
isVerified = false;

form.setError(`steps.${step.stepNumber - 1}.sendTo`, {
type: "custom",
message: t("not_verified"),
form.setError(`steps.${step.stepNumber - 1}.sendTo`, {
type: "custom",
message: t("not_verified"),
});
}
});
}
});

if (!isEmpty && isVerified) {
if (values.activeOn) {
activeOnEventTypeIds = values.activeOn.map((option) => {
return parseInt(option.value, 10);
});
}
updateMutation.mutate({
id: workflowId,
name: values.name,
activeOn: activeOnEventTypeIds,
steps: values.steps,
trigger: values.trigger,
time: values.time || null,
timeUnit: values.timeUnit || null,
});
utils.viewer.workflows.getVerifiedNumbers.invalidate();
}
}}>
<Shell
backPath="/workflows"
title={workflow && workflow.name ? workflow.name : "Untitled"}
CTA={
!readOnly && (
<div>
<Button data-testid="save-workflow" type="submit" loading={updateMutation.isPending}>
{t("save")}
</Button>
</div>
)
}
hideHeadingOnMobile
heading={
(IS_DEV || session.data?.hasValidLicense) &&
isAllDataLoaded && (
<div className="flex">
<div className={classNames(workflow && !workflow.name ? "text-muted" : "")}>
{workflow && workflow.name ? workflow.name : "untitled"}
</div>
{workflow && workflow.team && (
<Badge className="ml-4 mt-1" variant="gray">
{workflow.team.name}
</Badge>
)}
{readOnly && (
<Badge className="ml-4 mt-1" variant="gray">
{t("readonly")}
</Badge>
)}
</div>
)
}>
<LicenseRequired>
{!isError ? (
<>
{isAllDataLoaded && user ? (
<>
<WorkflowDetailsPage
form={form}
workflowId={+workflowId}
user={user}
selectedEventTypes={selectedEventTypes}
setSelectedEventTypes={setSelectedEventTypes}
teamId={workflow ? workflow.teamId || undefined : undefined}
isMixedEventType={isMixedEventType}
readOnly={readOnly}
/>
</>
) : (
<SkeletonLoader />
)}
</>
) : (
<Alert severity="error" title="Something went wrong" message={error.message} />
)}
</LicenseRequired>
</Shell>
</Form>
if (!isEmpty && isVerified) {
if (values.activeOn) {
activeOnEventTypeIds = values.activeOn.map((option) => {
return parseInt(option.value, 10);
});
}
updateMutation.mutate({
id: workflowId,
name: values.name,
activeOn: activeOnEventTypeIds,
steps: values.steps,
trigger: values.trigger,
time: values.time || null,
timeUnit: values.timeUnit || null,
});
utils.viewer.workflows.getVerifiedNumbers.invalidate();
}
}}>
<ShellMain
backPath="/workflows"
title={workflow && workflow.name ? workflow.name : "Untitled"}
CTA={
!readOnly && (
<div>
<Button data-testid="save-workflow" type="submit" loading={updateMutation.isPending}>
{t("save")}
</Button>
</div>
)
}
hideHeadingOnMobile
heading={
isAllDataLoaded && (
<div className="flex">
<div className={classNames(workflow && !workflow.name ? "text-muted" : "")}>
{workflow && workflow.name ? workflow.name : "untitled"}
</div>
{workflow && workflow.team && (
<Badge className="ml-4 mt-1" variant="gray">
{workflow.team.name}
</Badge>
)}
{readOnly && (
<Badge className="ml-4 mt-1" variant="gray">
{t("readonly")}
</Badge>
)}
</div>
)
}>
{!isError ? (
<>
{isAllDataLoaded && user ? (
<>
<WorkflowDetailsPage
form={form}
workflowId={+workflowId}
user={user}
selectedEventTypes={selectedEventTypes}
setSelectedEventTypes={setSelectedEventTypes}
teamId={workflow ? workflow.teamId || undefined : undefined}
isMixedEventType={isMixedEventType}
readOnly={readOnly}
/>
</>
) : (
<SkeletonLoader />
)}
</>
) : (
<Alert severity="error" title="Something went wrong" message={error.message} />
)}
</ShellMain>
</Form>
</LicenseRequired>
</Shell>
) : (
<></>
);
Expand Down

0 comments on commit 557ae4c

Please sign in to comment.