fix(designer): Update Recurrence Preview Message to Add Additional Cl…

…arity (#6434)

* adding minute recurrence message

* adding e2e test for recurrence

Localize/lang/strings.json

@@ -2341,6 +2341,7 @@
   "_haeWoU.comment": "Error message when splitOn cannot be evaluated",
   "_hbOvB4.comment": "Dislike button text for suggested flow",
   "_hesDPs.comment": "Milliseconds",
+  "_hhW/w8.comment": "Recurrence additional message if no minutes or starttime is specified",
   "_hihfHd.comment": "Error validation message integers",
   "_hlrKDC.comment": "Column name for connection display name",
   "_ho2D6F.comment": "Close panel",
@@ -3113,6 +3114,7 @@
   "haeWoU": "Failed to evaluate outputs because splitOn {splitOn} cannot be evaluated. As a result, this operation's outputs might not be correctly visible in subsequent actions",
   "hbOvB4": "This isn't what I'm looking for",
   "hesDPs": "{count} Milliseconds",
+  "hhW/w8": "If a recurrence doesn't specify a specific start date and time, the first recurrence runs immediately when you save or deploy the logic app",
   "hihfHd": "The value is too large.",
   "hlrKDC": "Connection",
   "ho2D6F": "Close panel",

e2e/designer/recurrence.spec.ts

@@ -0,0 +1,51 @@
+import test, { expect } from '@playwright/test';
+import { GoToMockWorkflow } from './utils/GoToWorkflow';
+
+test.describe(
+  'Recurrence Tests',
+  {
+    tag: '@mock',
+  },
+  async () => {
+    test('Recurrence should load preview text properly', async ({ page }) => {
+      await page.goto('/');
+      await GoToMockWorkflow(page, 'Recurrence');
+      await page.getByTestId('card-recurrence').click();
+
+      // interval
+      await page.getByPlaceholder('Specify the interval.').click();
+      await page.getByPlaceholder('Specify the interval.').fill('12');
+
+      // Frequency
+      await page.getByText('Week', { exact: true }).click();
+      await page.getByRole('option', { name: 'Week' }).click();
+
+      // Time Zone
+      await page.getByText('(UTC-12:00) International').click();
+      await page.getByRole('option', { name: '(UTC-08:00) Baja California' }).click();
+
+      // Expected Preview Text
+      await expect(page.locator('#msla-node-details-panel-Recurrence')).toContainText(
+        'Runs at 0:12, 0:13, 5:12, 5:13, 8:12, 8:13 Every 12 weeks'
+      );
+
+      // Removing Minutes
+      await page.getByPlaceholder('Enter the valid minute values').click();
+      await page.getByPlaceholder('Enter the valid minute values').fill('');
+      await page.locator('#msla-node-details-panel-Recurrence div').filter({ hasText: 'Recurrence*Interval*Frequency' }).first().click();
+
+      // Expected Preview Text without Minutes or Start Time
+      await expect(page.locator('#msla-node-details-panel-Recurrence')).toContainText(
+        "Runs at 0:xx, 5:xx, 8:xx Every 12 weeksIf a recurrence doesn't specify a specific start date and time, the first recurrence runs immediately when you save or deploy the logic app"
+      );
+
+      // Adding a Start Time
+      await page.getByPlaceholder('Example: 2017-03-24T15:00:00Z').click();
+      await page.getByPlaceholder('Example: 2017-03-24T15:00:00Z').fill('2025-01-22T18:38:03Z');
+      await page.locator('#msla-node-details-panel-Recurrence div').filter({ hasText: 'Recurrence*Interval*Frequency' }).first().click();
+
+      // Expected Preview Text with Start Time
+      await expect(page.locator('#msla-node-details-panel-Recurrence')).toContainText('Runs at 0:38, 5:38, 8:38 Every 12 weeks');
+    });
+  }
+);

libs/designer-ui/src/lib/recurrence/preview.tsx

@@ -41,7 +41,7 @@ const convertRecurrenceToExpression = (
   weekdays?: string[],
   hours?: number[],
   minutes?: number[],
-  startMinute = 0
+  startMinute?: number
 ): JSX.Element => {
   const intl = getIntl();
   let frequencyDesc: string | undefined;
@@ -111,7 +111,7 @@ const convertRecurrenceToExpression = (
   } else if (hours && hours.length) {
     const projectTimes: string[] = [];
     for (const hour of [...hours].sort(byNumber)) {
-      projectTimes.push(`${hour}:${String(startMinute).padStart(2, '0')}`);
+      projectTimes.push(`${hour}:${String(startMinute ?? 'xx').padStart(2, '0')}`);
     }
 
     onTime = intl.formatMessage(
@@ -147,8 +147,18 @@ const convertRecurrenceToExpression = (
       { onDays }
     );
   }
-
-  return <div className="msla-recurrence-friendly-desc">{summary}</div>;
+  const noMinuteOrStartTimeWarning = intl.formatMessage({
+    defaultMessage:
+      "If a recurrence doesn't specify a specific start date and time, the first recurrence runs immediately when you save or deploy the logic app",
+    id: 'hhW/w8',
+    description: 'Recurrence additional message if no minutes or starttime is specified',
+  });
+  return (
+    <div className="msla-recurrence-friendly-desc">
+      {summary}
+      {(!minutes || !minutes.length) && !startMinute && <div className="warning-message">{noMinuteOrStartTimeWarning}</div>}
+    </div>
+  );
 };
 
 const ISO_DAY_ORDER: Record<string, number> = {

libs/designer-ui/src/lib/recurrence/recurrence.less

@@ -1,4 +1,4 @@
-@import (reference) '../variables.less';
+@import (reference) "../variables.less";
 
 .msla-recurrence-editor {
   flex: 1 1 auto;
@@ -32,6 +32,9 @@
       word-break: break-all;
       display: inline-block;
       margin-right: 6px;
+      .warning-message {
+        font-style: italic;
+      }
     }
   }
 }

libs/designer-ui/src/lib/recurrence/textInput.tsx

@@ -151,6 +151,9 @@ export const MinuteTextInput = ({
 
 const convertStringToNumberArray = (value: string): number[] => {
   let newValue = value;
+  if (!newValue.trim()) {
+    return [];
+  }
   if (newValue.startsWith('[') && newValue.endsWith(']')) {
     newValue = newValue.replace(/^\[|\]$/g, '');
   }