fix(dashboard/ui): new operation progressive rollout (#2094)

Author: steveninhle

ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-modals/rollout/manual-schedule.tsx

@@ -206,6 +206,17 @@ const ManualSchedule = ({
                     onChange={date => {
                       if (date) {
                         field.onChange(date);
+                        const isValidIntervals = areIntervalsApart(
+                          watchScheduleList.map((item, idx) =>
+                            (idx === index ? date : item.executeAt).getTime()
+                          ),
+                          5
+                        );
+                        if (isValidIntervals) {
+                          clearErrors(
+                            'progressiveRollout.manual.schedulesList'
+                          );
+                        }
                       }
                     }}
                   />

ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-modals/schedule-operation/schedule-list.tsx

@@ -55,7 +55,11 @@ const ScheduleList = ({
     control,
     keyName: 'scheduleOperationId'
   });
-  const watchScheduleList = [...watch('datetimeClausesList')];
+
+  const watchScheduleList = useMemo(
+    () => watch('datetimeClausesList'),
+    [watch, scheduleData.length]
+  );
 
   const stateOptions = useMemo(
     () => [

ui/dashboard/src/pages/feature-flag-details/targeting/segment-rule/attribute-key-select.tsx

@@ -15,7 +15,7 @@ const CustomOption = memo((props: OptionProps<Option>) => {
   const isTruncated = useIsTruncated(spanRef, [props.data.label]);
 
   const labelNode = (
-    <span ref={spanRef} className="truncate block">
+    <span ref={spanRef} className="truncate block max-w-[350px]">
       {label}
     </span>
   );