-
Notifications
You must be signed in to change notification settings - Fork 7.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Button to test a workflow action #3873
Merged
+212
−14
Merged
Changes from 13 commits
Commits
Show all changes
36 commits
Select commit
Hold shift + click to select a range
a2e838c
add Test action button + UI improvements
f0da8c9
Merge branch 'main' into feat/test-workflow-button
36984e9
add test action functionality
8d4164b
add confirmation dialog before sending SMS
451e33c
code clean up
1602b46
Merge branch 'main' into feat/test-workflow-button
22f1a4d
show error message if test action fails
78bad11
disable test action button in edit mode
6343800
fixes SMS testing
6464c27
use updated values
d68871d
fix wrongly updated data in useEffect
4a519be
fix typo
d4a18d4
code clean up
878d14c
Merge branch 'main' into feat/test-workflow-button
CarinaWolli 87b0f0f
Merge branch 'main' into feat/test-workflow-button
CarinaWolli 3c6d7aa
Merge branch 'main' into feat/test-workflow-button
PeerRich cccf477
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] 3d03f7d
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] 1cef718
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] 01f9e9a
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] f1ec61d
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] 9d033e4
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] f69bb91
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] 31a0617
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] 0d8f9f5
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] b8cc311
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] 7973f98
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] fb9b05f
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] 0d4f979
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] c46e865
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] fade685
fix UI issue in mobile view
25bd68c
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] c909a15
Merge branch 'feat/test-workflow-button' of https://github.com/calcom…
c797b39
small design fix
67b0b0c
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] 96f400d
Merge branch 'main' into feat/test-workflow-button
kodiakhq[bot] File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
import { ArrowDownIcon } from "@heroicons/react/outline"; | ||
import { | ||
TimeUnit, | ||
WorkflowActions, | ||
|
@@ -13,7 +14,12 @@ import "react-phone-number-input/style.css"; | |
|
||
import classNames from "@calcom/lib/classNames"; | ||
import { useLocale } from "@calcom/lib/hooks/useLocale"; | ||
import { HttpError } from "@calcom/lib/http-error"; | ||
import showToast from "@calcom/lib/notification"; | ||
import { trpc } from "@calcom/trpc/react"; | ||
import { Button } from "@calcom/ui"; | ||
import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent"; | ||
import { Dialog } from "@calcom/ui/Dialog"; | ||
import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown"; | ||
import { Icon } from "@calcom/ui/Icon"; | ||
import Select from "@calcom/ui/form/Select"; | ||
|
@@ -49,6 +55,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
const [errorMessageNumber, setErrorMessageNumber] = useState(""); | ||
const [errorMessageCustomInput, setErrorMessageCustomInput] = useState(""); | ||
const [isInfoParagraphOpen, setIsInfoParagraphOpen] = useState(false); | ||
const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false); | ||
const [isTestActionDisabled, setIsTestActionDisabled] = useState(false); | ||
|
||
const [translatedReminderBody, setTranslatedReminderBody] = useState( | ||
getTranslatedText((step ? form.getValues(`steps.${step.stepNumber - 1}.reminderBody`) : "") || "", { | ||
|
@@ -114,6 +122,18 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
} | ||
}; | ||
|
||
const testActionMutation = trpc.useMutation("viewer.workflows.testAction", { | ||
onSuccess: async () => { | ||
showToast(t("notification_sent"), "success"); | ||
}, | ||
onError: (err) => { | ||
if (err instanceof HttpError) { | ||
const message = `${err.statusCode}: ${err.message}`; | ||
showToast(message, "error"); | ||
} | ||
}, | ||
}); | ||
|
||
//trigger | ||
if (!step) { | ||
const trigger = form.getValues("trigger"); | ||
|
@@ -127,16 +147,18 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
return ( | ||
<> | ||
<div className="flex justify-center"> | ||
<div className=" min-w-80 w-[50rem] rounded border-2 border-gray-400 bg-gray-50 px-10 pb-9 pt-5"> | ||
<div className="font-bold">{t("triggers")}:</div> | ||
<div className=" min-w-80 w-[50rem] rounded border border-gray-200 bg-white pl-10 pr-12 pb-9 pt-5"> | ||
<div className="text-base font-bold">{t("trigger")}</div> | ||
<div className="text-sm text-gray-600">{t("when_something_happens")}</div> | ||
<div className="my-7 border-t border-gray-200" /> | ||
<Controller | ||
name="trigger" | ||
control={form.control} | ||
render={() => { | ||
return ( | ||
<Select | ||
isSearchable={false} | ||
className="flex-1 block w-full min-w-0 mt-3 text-sm rounded-sm" | ||
className="mt-3 block w-full min-w-0 flex-1 rounded-sm text-sm" | ||
onChange={(val) => { | ||
if (val) { | ||
form.setValue("trigger", val.value); | ||
|
@@ -159,15 +181,15 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
/> | ||
{showTimeSection && ( | ||
<div className="mt-5 space-y-1"> | ||
<label htmlFor="label" className="block mb-2 text-sm font-medium text-gray-700"> | ||
<label htmlFor="label" className="mb-2 block text-sm font-medium text-gray-700"> | ||
{t("how_long_before")} | ||
</label> | ||
<div className="flex"> | ||
<input | ||
type="number" | ||
min="1" | ||
defaultValue={form.getValues("time") || 24} | ||
className="block w-20 px-3 py-2 mr-5 text-sm border-gray-300 rounded-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800" | ||
className="mr-5 block w-20 rounded-sm border-gray-300 px-3 py-2 text-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800" | ||
{...form.register("time", { valueAsNumber: true })} | ||
/> | ||
<div className="w-28"> | ||
|
@@ -178,7 +200,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
return ( | ||
<Select | ||
isSearchable={false} | ||
className="flex-1 block min-w-0 text-sm rounded-sm" | ||
className="block min-w-0 flex-1 rounded-sm text-sm" | ||
onChange={(val) => { | ||
if (val) { | ||
form.setValue("timeUnit", val.value); | ||
|
@@ -206,13 +228,15 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
|
||
return ( | ||
<> | ||
<div className="flex justify-center"> | ||
<div className="h-10 border-l-2 border-gray-400" /> | ||
<div className="flex justify-center "> | ||
<ArrowDownIcon className="my-4 h-7 stroke-1 text-gray-500" /> | ||
</div> | ||
<div className="flex justify-center"> | ||
<div className="min-w-80 flex w-[50rem] rounded border-2 border-gray-400 bg-gray-50 pl-10 pb-9 "> | ||
<div className=" min-w-80 flex w-[50rem] rounded border border-gray-200 bg-white px-10 pb-9 pt-5 pr-3"> | ||
<div className="w-full pt-5"> | ||
<div className="font-bold">{t("action")}:</div> | ||
<div className="text-base font-bold">{t("action")}</div> | ||
<div className="text-sm text-gray-600">{t("action_is_performed")}</div> | ||
<div className="my-7 border-t border-gray-200" /> | ||
<div> | ||
<Controller | ||
name={`steps.${step.stepNumber - 1}.action`} | ||
|
@@ -221,27 +245,27 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
return ( | ||
<Select | ||
isSearchable={false} | ||
className="flex-1 block w-full min-w-0 mt-3 text-sm rounded-sm" | ||
className="mt-3 block w-full min-w-0 flex-1 rounded-sm text-sm" | ||
onChange={(val) => { | ||
if (val) { | ||
let counter = 0; | ||
if (val.value === WorkflowActions.SMS_NUMBER) { | ||
setIsPhoneNumberNeeded(true); | ||
setEditNumberMode(true); | ||
counter = counter + 1; | ||
setIsTestActionDisabled(true); | ||
} else { | ||
setIsPhoneNumberNeeded(false); | ||
setEditNumberMode(false); | ||
} | ||
|
||
if ( | ||
form.getValues(`steps.${step.stepNumber - 1}.template`) === | ||
WorkflowTemplates.CUSTOM | ||
) { | ||
setEditEmailBodyMode(true); | ||
counter = counter + 1; | ||
setIsTestActionDisabled(true); | ||
} | ||
|
||
if ( | ||
val.value === WorkflowActions.EMAIL_ATTENDEE || | ||
val.value === WorkflowActions.EMAIL_HOST | ||
|
@@ -270,7 +294,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
<> | ||
<label | ||
htmlFor="sendTo" | ||
className="block mt-5 text-sm font-medium text-gray-700 dark:text-white"> | ||
className="mt-5 block text-sm font-medium text-gray-700 dark:text-white"> | ||
{t("phone_number")} | ||
</label> | ||
<div className="flex space-y-1"> | ||
|
@@ -281,8 +305,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
onChange={(newValue) => { | ||
if (newValue) { | ||
setSendTo(newValue); | ||
setErrorMessageNumber(""); | ||
} else { | ||
setSendTo(""); | ||
} | ||
setErrorMessageNumber(""); | ||
}} | ||
placeholder={t("enter_phone_number")} | ||
id="sendTo" | ||
|
@@ -291,7 +317,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
countrySelectProps={{ className: "text-black" }} | ||
numberInputProps={{ className: "border-0 text-sm focus:ring-0 dark:bg-gray-700" }} | ||
className={classNames( | ||
"order-1 focus-within:border-brand block w-full rounded-sm border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500", | ||
"focus-within:border-brand order-1 block w-full rounded-sm border border-gray-300 py-px pl-3 ring-black focus-within:ring-1 disabled:text-gray-500 disabled:opacity-50 dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500", | ||
!editNumberMode ? "text-gray-500 dark:text-gray-500" : "" | ||
)} | ||
/> | ||
|
@@ -303,6 +329,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
onClick={() => { | ||
setEditNumberMode(true); | ||
setEditCounter(editCounter + 1); | ||
setIsTestActionDisabled(true); | ||
}}> | ||
{t("edit")} | ||
</Button> | ||
|
@@ -312,13 +339,18 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
color="primary" | ||
onClick={async () => { | ||
if (sendTo) { | ||
form.setValue(`steps.${step.stepNumber - 1}.sendTo`, sendTo); | ||
if (isValidPhoneNumber(sendTo)) { | ||
form.setValue(`steps.${step.stepNumber - 1}.sendTo`, sendTo); | ||
setEditNumberMode(false); | ||
setEditCounter(editCounter - 1); | ||
if (!editEmailBodyMode) { | ||
setIsTestActionDisabled(false); | ||
} | ||
} else { | ||
setErrorMessageNumber(t("invalid_input")); | ||
} | ||
} else { | ||
setErrorMessageNumber(t("no_input")); | ||
} | ||
}}> | ||
{t("save")} | ||
|
@@ -329,7 +361,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
</> | ||
)} | ||
<div className="mt-5"> | ||
<label htmlFor="label" className="block mt-5 text-sm font-medium text-gray-700"> | ||
<label htmlFor="label" className="mt-5 block text-sm font-medium text-gray-700"> | ||
{t("choose_template")} | ||
</label> | ||
<Controller | ||
|
@@ -339,7 +371,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
return ( | ||
<Select | ||
isSearchable={false} | ||
className="flex-1 block w-full min-w-0 mt-3 text-sm rounded-sm" | ||
className="mt-3 block w-full min-w-0 flex-1 rounded-sm text-sm" | ||
onChange={(val) => { | ||
if (val) { | ||
form.setValue(`steps.${step.stepNumber - 1}.template`, val.value); | ||
|
@@ -367,10 +399,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
<> | ||
{isEmailSubjectNeeded && ( | ||
<div className="mt-5 mb-2 "> | ||
<label className="block mt-3 mb-1 text-sm font-medium text-gray-700"> | ||
<label className="mt-3 mb-1 block text-sm font-medium text-gray-700"> | ||
{t("subject")} | ||
</label> | ||
<div className="bg-white border border-gray-300 rounded-sm mtext-sm border-1 focus-within:border-1 focus-within:border-black"> | ||
<div className="mtext-sm border-1 focus-within:border-1 rounded-sm border border-gray-300 bg-white focus-within:border-black"> | ||
<AddVariablesDropdown | ||
disabled={!editEmailBodyMode} | ||
addVariable={addVariable} | ||
|
@@ -396,10 +428,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
</div> | ||
</div> | ||
)} | ||
<label className="block mt-3 mb-1 text-sm font-medium text-gray-700 dark:text-white"> | ||
<label className="mt-3 mb-1 block text-sm font-medium text-gray-700 dark:text-white"> | ||
{isEmailSubjectNeeded ? t("email_body") : t("text_message")} | ||
</label> | ||
<div className="mb-2 text-sm bg-white border border-gray-300 rounded-sm border-1 focus-within:border-1 focus-within:border-black"> | ||
<div className="border-1 focus-within:border-1 mb-2 rounded-sm border border-gray-300 bg-white text-sm focus-within:border-black"> | ||
<AddVariablesDropdown | ||
disabled={!editEmailBodyMode} | ||
addVariable={addVariable} | ||
|
@@ -429,14 +461,14 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
type="button" | ||
onClick={() => setIsInfoParagraphOpen(!isInfoParagraphOpen)}> | ||
{isInfoParagraphOpen ? ( | ||
<Icon.FiChevronDown className="h-5 text-gray-700 w5" /> | ||
<Icon.FiChevronDown className="w5 h-5 text-gray-700" /> | ||
) : ( | ||
<Icon.FiChevronRight className="h-5 text-gray-700 w5" /> | ||
<Icon.FiChevronRight className="w5 h-5 text-gray-700" /> | ||
)} | ||
<span className="text-sm">{t("using_additional_inputs_as_variables")}</span> | ||
</button> | ||
{isInfoParagraphOpen && ( | ||
<div className="w-full pr-6 mt-4 ml-6 text-sm"> | ||
<div className="mt-4 ml-6 w-full pr-6 text-sm"> | ||
<div className="lg:flex"> | ||
<div className="lg:w-1/2"> | ||
<p className="font-medium">{t("example_1")}:</p> | ||
|
@@ -474,6 +506,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
onClick={() => { | ||
setEditEmailBodyMode(true); | ||
setEditCounter(editCounter + 1); | ||
setIsTestActionDisabled(true); | ||
}}> | ||
{t("edit")} | ||
</Button> | ||
|
@@ -482,8 +515,6 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
type="button" | ||
color="primary" | ||
onClick={async () => { | ||
const reminderBody = form.getValues(`steps.${step.stepNumber - 1}.reminderBody`); | ||
const emailSubject = form.getValues(`steps.${step.stepNumber - 1}.emailSubject`); | ||
let isEmpty = false; | ||
let errorMessage = ""; | ||
|
||
|
@@ -507,6 +538,9 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
if (!isEmpty) { | ||
setEditEmailBodyMode(false); | ||
setEditCounter(editCounter - 1); | ||
if (!editNumberMode) { | ||
setIsTestActionDisabled(false); | ||
} | ||
} | ||
setErrorMessageCustomInput(errorMessage); | ||
}}> | ||
|
@@ -515,6 +549,29 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
)} | ||
</> | ||
)} | ||
{form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_ATTENDEE && ( | ||
<Button | ||
type="button" | ||
className="mt-7 w-full" | ||
disabled={isTestActionDisabled} | ||
onClick={() => { | ||
if ( | ||
form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_NUMBER | ||
) { | ||
testActionMutation.mutate({ | ||
action: step.action, | ||
emailSubject: step.emailSubject || "", | ||
reminderBody: step.reminderBody || "", | ||
template: step.template, | ||
}); | ||
} else { | ||
setConfirmationDialogOpen(true); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Asking for additional confirmation if user really wants to send SMS to the given number |
||
} | ||
}} | ||
color="secondary"> | ||
<div className="w-full">{t("test_action")}</div> | ||
</Button> | ||
)} | ||
</div> | ||
<div> | ||
<Dropdown> | ||
|
@@ -552,6 +609,25 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) { | |
</div> | ||
</div> | ||
</div> | ||
<Dialog open={confirmationDialogOpen} onOpenChange={setConfirmationDialogOpen}> | ||
<ConfirmationDialogContent | ||
variety="warning" | ||
title={t("test_workflow_action")} | ||
confirmBtnText={t("send_sms")} | ||
onConfirm={(e) => { | ||
e.preventDefault(); | ||
testActionMutation.mutate({ | ||
action: step.action, | ||
emailSubject: step.emailSubject || "", | ||
reminderBody: step.reminderBody || "", | ||
template: step.template, | ||
sendTo: step.sendTo || "", | ||
}); | ||
setConfirmationDialogOpen(false); | ||
}}> | ||
{t("send_sms_to_number", { number: sendTo })} | ||
</ConfirmationDialogContent> | ||
</Dialog> | ||
</> | ||
); | ||
} | ||
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't allow testing the action ‘send SMS to attendee’ as we do not want to send SMS to random attendees from a booking. If a user wants to see how the SMS template looks like, they need to switch to ‘Send SMS to specific number`