feat: show event descriptions in dropdown (#395)

* feat: show descriptions of each event in dropdown * chore: update descriptions of all events
opengovsg · Jan 12, 2024 · 2e17b2e · 2e17b2e
1 parent a1f5b19
commit 2e17b2e
Show file tree

Hide file tree

Showing 22 changed files with 44 additions and 33 deletions.
diff --git a/packages/backend/src/apps/custom-api/actions/http-request/index.ts b/packages/backend/src/apps/custom-api/actions/http-request/index.ts
@@ -11,7 +11,7 @@ type TMethod = 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE'
 const action: IRawAction = {
   name: 'Make a HTTP Request',
   key: 'httpRequest',
-  description: 'Makes a custom HTTP request by providing raw details.',
+  description: 'Makes a custom HTTP request of any method and body',
   arguments: [
     {
       label: 'Method',

diff --git a/packages/backend/src/apps/delay/actions/delay-for/index.ts b/packages/backend/src/apps/delay/actions/delay-for/index.ts
@@ -6,7 +6,7 @@ const action: IRawAction = {
   name: 'Delay For',
   key: 'delayFor',
   description:
-    'Delays the execution of the next action by a specified amount of time.',
+    'Delays the execution of the next action by a specified amount of time',
   arguments: [
     {
       label: 'Delay for unit',

diff --git a/packages/backend/src/apps/delay/actions/delay-until/index.ts b/packages/backend/src/apps/delay/actions/delay-until/index.ts
@@ -7,8 +7,7 @@ import generateTimestamp from '../../helpers/generate-timestamp'
 const action: IRawAction = {
   name: 'Delay Until',
   key: 'delayUntil',
-  description:
-    'Delays the execution of the next action until a specified date.',
+  description: 'Delays the execution of the next action until a specified date',
   arguments: [
     {
       label: 'Delay until (Date)',

diff --git a/packages/backend/src/apps/formsg/triggers/new-submission/index.ts b/packages/backend/src/apps/formsg/triggers/new-submission/index.ts
@@ -15,7 +15,7 @@ const trigger: IRawTrigger = {
   name: 'New form submission',
   key: 'newSubmission',
   type: 'webhook',
-  description: 'Triggers when the webhook receives a request.',
+  description: 'Triggers when a new form submission is received',
   webhookTriggerInstructions: {
     beforeUrlMsg: `# Make a new submission to the form you connected. Then, click test step.`,
     hideWebhookUrl: true,

diff --git a/packages/backend/src/apps/m365-excel/actions/create-table-row/index.ts b/packages/backend/src/apps/m365-excel/actions/create-table-row/index.ts
@@ -53,7 +53,7 @@ function constructMsGraphArgment(
 const action: IRawAction = {
   name: 'Create row',
   key: 'createTableRow',
-  description: 'Creates a new row in the excel spreadsheet table',
+  description: 'Creates a new row in an Excel spreadsheet table',
   arguments: [
     {
       key: 'fileId',

diff --git a/packages/backend/src/apps/m365-excel/actions/get-cell-values/index.ts b/packages/backend/src/apps/m365-excel/actions/get-cell-values/index.ts
@@ -10,7 +10,8 @@ import getDataOutMetadata from './get-data-out-metadata'
 const action: IRawAction = {
   name: 'Get cell value',
   key: 'getCellValues',
-  description: 'Gets the value of cells in a spreadsheet',
+  description:
+    'Gets the value of a specific cell in an Excel spreadsheet tbale',
   arguments: [
     {
       key: 'fileId',

diff --git a/packages/backend/src/apps/postman/actions/send-transactional-email/index.ts b/packages/backend/src/apps/postman/actions/send-transactional-email/index.ts
@@ -19,7 +19,7 @@ import { throwSendEmailError } from '../../common/throw-errors'
 const action: IRawAction = {
   name: 'Send email',
   key: 'sendTransactionalEmail',
-  description: "Sends an email using Postman's transactional API.",
+  description: 'Sends an email with Postman',
   arguments: transactionalEmailFields,
   doesFileProcessing: (step: Step) => {
     return (

diff --git a/packages/backend/src/apps/scheduler/triggers/every-day/index.ts b/packages/backend/src/apps/scheduler/triggers/every-day/index.ts
@@ -8,9 +8,9 @@ import getNextCronDateTime from '../../common/get-next-cron-date-time'
 import getDataOutMetadata from '../get-data-out-metadata'
 
 const trigger: IRawTrigger = {
-  name: 'Daily - triggers every day, choose a specific hour timeslot',
+  name: 'Daily',
   key: 'everyDay',
-  description: 'Triggers every day.',
+  description: 'Triggers every day, choose a specific hour',
   arguments: [
     {
       label: 'Trigger on weekends?',

diff --git a/packages/backend/src/apps/scheduler/triggers/every-hour/index.ts b/packages/backend/src/apps/scheduler/triggers/every-hour/index.ts
@@ -8,9 +8,9 @@ import getNextCronDateTime from '../../common/get-next-cron-date-time'
 import getDataOutMetadata from '../get-data-out-metadata'
 
 const trigger: IRawTrigger = {
-  name: 'Hourly - triggers every hour',
+  name: 'Hourly',
   key: 'everyHour',
-  description: 'Triggers every hour.',
+  description: 'Triggers every hour',
   arguments: [
     {
       label: 'Trigger on weekends?',

diff --git a/packages/backend/src/apps/scheduler/triggers/every-month/index.ts b/packages/backend/src/apps/scheduler/triggers/every-month/index.ts
@@ -8,9 +8,10 @@ import getNextCronDateTime from '../../common/get-next-cron-date-time'
 import getDataOutMetadata from '../get-data-out-metadata'
 
 const trigger: IRawTrigger = {
-  name: 'Monthly - triggers every month, choose a specific day of the month',
+  name: 'Monthly',
   key: 'everyMonth',
-  description: 'Triggers every month.',
+  description:
+    'Triggers every month, choose a specific day and hour of the month',
   arguments: [
     {
       label: 'Day of the month',

diff --git a/packages/backend/src/apps/scheduler/triggers/every-week/index.ts b/packages/backend/src/apps/scheduler/triggers/every-week/index.ts
@@ -8,9 +8,10 @@ import getNextCronDateTime from '../../common/get-next-cron-date-time'
 import getDataOutMetadata from '../get-data-out-metadata'
 
 const trigger: IRawTrigger = {
-  name: 'Weekly - triggers every week, choose a specific day of the week',
+  name: 'Weekly',
   key: 'everyWeek',
-  description: 'Triggers every week.',
+  description:
+    'Triggers every week, choose a specific day and hour of the week',
   arguments: [
     {
       label: 'Day of the week',

diff --git a/packages/backend/src/apps/slack/actions/find-message/index.ts b/packages/backend/src/apps/slack/actions/find-message/index.ts
@@ -5,7 +5,7 @@ import findMessage from './find-message'
 const action: IRawAction = {
   name: 'Find a message',
   key: 'findMessage',
-  description: 'Finds a message using the Slack feature.',
+  description: 'Finds a message in a Slack channel',
   arguments: [
     {
       label: 'Search Query',

diff --git a/packages/backend/src/apps/slack/actions/send-a-message-to-channel/index.ts b/packages/backend/src/apps/slack/actions/send-a-message-to-channel/index.ts
@@ -5,7 +5,7 @@ import postMessage from './post-message'
 const action: IRawAction = {
   name: 'Send a message to channel',
   key: 'sendMessageToChannel',
-  description: 'Sends a message to a channel you specify.',
+  description: 'Sends a message to a specified Slack channel',
   arguments: [
     {
       label: 'Channel',

diff --git a/packages/backend/src/apps/telegram-bot/actions/send-message/index.ts b/packages/backend/src/apps/telegram-bot/actions/send-message/index.ts
@@ -8,7 +8,7 @@ import { throwSendMessageError } from '../../common/throw-errors'
 const action: IRawAction = {
   name: 'Send message',
   key: 'sendMessage',
-  description: 'Sends a message to a chat you specify.',
+  description: 'Sends a message to a Telegram chat',
   arguments: [
     {
       label: 'Chat ID',

diff --git a/packages/backend/src/apps/toolbox/actions/if-then/index.ts b/packages/backend/src/apps/toolbox/actions/if-then/index.ts
@@ -58,7 +58,8 @@ async function getBranchStepIdToSkipTo(
 const action: IRawAction = {
   name: 'If-then',
   key: ACTION_KEY,
-  description: '',
+  description:
+    'Creates different sub-pipes that will execute if specified conditions are met',
   groupsLaterSteps: true,
   arguments: [
     {

diff --git a/packages/backend/src/apps/toolbox/actions/only-continue-if/index.ts b/packages/backend/src/apps/toolbox/actions/only-continue-if/index.ts
@@ -7,7 +7,7 @@ import { throwInvalidConditionError } from '../../common/throw-errors'
 const action: IRawAction = {
   name: 'Only continue if',
   key: 'onlyContinueIf',
-  description: 'Only continue if',
+  description: 'Only runs later actions if specified conditions are met',
   arguments: getConditionArgs({ usePlaceholders: false }),
 
   async run($) {

diff --git a/packages/backend/src/apps/twilio/actions/send-sms/index.ts b/packages/backend/src/apps/twilio/actions/send-sms/index.ts
@@ -5,7 +5,7 @@ import qs from 'qs'
 const action: IRawAction = {
   name: 'Send an SMS',
   key: 'sendSms',
-  description: 'Sends an SMS',
+  description: 'Sends an SMS with Twilio',
   arguments: [
     {
       label: 'From Number',

diff --git a/packages/backend/src/apps/vault-workspace/actions/create-row/index.ts b/packages/backend/src/apps/vault-workspace/actions/create-row/index.ts
@@ -14,7 +14,7 @@ import { throwParseAsCsvError } from '../../common/throw-errors'
 const action: IRawAction = {
   name: 'Create row',
   key: 'createRow',
-  description: 'Creates a new row in Vault table.',
+  description: 'Creates a new row in Vault Workspace table.',
   arguments: [
     {
       label: 'Columns',

diff --git a/packages/backend/src/apps/vault-workspace/actions/get-table-data/index.ts b/packages/backend/src/apps/vault-workspace/actions/get-table-data/index.ts
@@ -7,7 +7,7 @@ import getDataOutMetadata from './get-data-out-metadata'
 const action: IRawAction = {
   name: 'Get table data',
   key: 'getTableData',
-  description: 'Get table data from the vault workspace.',
+  description: 'Gets a single row data from a Vault Workspace table',
   arguments: [
     {
       label: 'Lookup Column',

diff --git a/packages/backend/src/apps/vault-workspace/actions/update-table-data/index.ts b/packages/backend/src/apps/vault-workspace/actions/update-table-data/index.ts
@@ -7,7 +7,7 @@ import updateTableRow from '../../common/update-table-row'
 const action: IRawAction = {
   name: 'Update table data',
   key: 'updateTableData',
-  description: 'Update table data from the vault workspace.',
+  description: 'Updates a single row in a Vault Workspace table',
   arguments: [
     {
       label: 'Lookup Column',

diff --git a/packages/backend/src/apps/webhook/triggers/catch-raw-webhook/index.ts b/packages/backend/src/apps/webhook/triggers/catch-raw-webhook/index.ts
@@ -4,7 +4,7 @@ const trigger: IRawTrigger = {
   name: 'Catch raw webhook',
   key: 'catchRawWebhook',
   type: 'webhook',
-  description: 'Triggers when the webhook receives a request.',
+  description: 'Triggers when the webhook receives a request',
   webhookTriggerInstructions: {
     beforeUrlMsg: `# 1. You'll need to configure your application with this webhook URL.`,
     afterUrlMsg: `# 2. Send some data to the webhook URL after configuration. Then, click test step.`,

diff --git a/packages/frontend/src/components/ChooseAppAndEventSubstep/index.tsx b/packages/frontend/src/components/ChooseAppAndEventSubstep/index.tsx
@@ -45,11 +45,13 @@ const optionGenerator = (app: {
 const eventOptionGenerator = (app: {
   name: string
   key: string
+  description: string
   type?: string
-}): { label: string; value: string; type: string } => ({
+}): { label: string; value: string; type: string; description: string } => ({
   label: app.name as string,
   value: app.key as string,
-  type: app?.type as string,
+  type: app.type as string,
+  description: app.description,
 })
 
 const getOption = <T extends { value: string }>(
@@ -342,11 +344,16 @@ function ChooseAppAndEventSubstep(
                   >
                     <Flex flexDir="column">
                       <Text>{option.label}</Text>
-                      {getIsIfThenDisabled(option) && (
-                        <Text fontSize="xs" color="red.500">
-                          This can only be used in the last step
-                        </Text>
-                      )}
+                      <Text
+                        fontSize="xs"
+                        color={
+                          getIsIfThenDisabled(option) ? 'red.500' : 'inherit'
+                        }
+                      >
+                        {getIsIfThenDisabled(option)
+                          ? 'This can only be used in the last step'
+                          : option.description}
+                      </Text>
                     </Flex>
 
                     {option.type === 'webhook' && (
@@ -359,6 +366,7 @@ function ChooseAppAndEventSubstep(
                     label: '',
                     value: '',
                     type: '',
+                    description: '',
                   }
                 }
                 onChange={onEventChange}