O3-1494: Changes after code review part2

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.4.1.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

packages/esm-reports-app/src/components/edit-scheduled-report/edit-scheduled-report-form.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tablet {
   padding: layout.$spacing-06 layout.$spacing-05;

packages/esm-reports-app/src/components/overlay.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 @import './../root.scss';
 
 .desktopOverlay {

packages/esm-reports-app/src/components/reports.resource.tsx

@@ -1,9 +1,10 @@
-import { openmrsFetch, type FetchResponse, openmrsObservableFetch } from '@openmrs/esm-framework';
-import { Observable } from 'rxjs';
+import { openmrsFetch, openmrsObservableFetch } from '@openmrs/esm-framework';
+import type { FetchResponse } from '@openmrs/esm-framework';
+import { type Observable } from 'rxjs';
 import useSWR from 'swr';
-import { ReportDefinition } from '../types/report-definition';
-import { ReportDesign } from '../types/report-design';
-import { ReportRequest } from '../types/report-request';
+import type { ReportDefinition } from '../types/report-definition';
+import type { ReportDesign } from '../types/report-design';
+import type { ReportRequest } from '../types/report-request';
 import dayjs from 'dayjs';
 
 interface ReportModel {

packages/esm-reports-app/src/components/run-report/cancel-report-modal.component.tsx

@@ -13,35 +13,38 @@ import {
 interface CancelReportModalProps {
   closeModal: () => void;
   reportRequestUuid: string;
-  modalType: string;
+  modalType: ModalType;
 }
 
+type ModalType = 'delete' | 'cancel' | 'schedule';
+
 const CancelReportModal: React.FC<CancelReportModalProps> = ({ closeModal, reportRequestUuid, modalType }) => {
   const { t } = useTranslation();
   const [isCanceling, setIsCanceling] = useState(false);
 
   const handleCancel = useCallback(async () => {
-    setIsCanceling(true);
-    cancelReportRequest(reportRequestUuid)
-      .then(() => {
-        callMutates(modalType);
-        closeModal();
-        showSnackbar({
-          kind: 'success',
-          title: getModalTitleByType(modalType),
-          subtitle: getSuccessToastMessageByType(modalType),
-        });
-      })
-      .catch(() => {
-        showSnackbar({
-          kind: 'error',
-          title: getModalTitleByType(modalType),
-          subtitle: getFailedToastMessageByType(modalType),
-        });
+    try {
+      setIsCanceling(true);
+      await cancelReportRequest(reportRequestUuid);
+      callMutates(modalType);
+      closeModal();
+      showSnackbar({
+        kind: 'success',
+        title: getModalTitleByType(modalType),
+        subtitle: getSuccessToastMessageByType(modalType),
+      });
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: getModalTitleByType(modalType),
+        subtitle: getFailedToastMessageByType(modalType),
       });
+    } finally {
+      setIsCanceling(false);
+    }
   }, [closeModal]);
 
-  const callMutates = (modalType) => {
+  const callMutates = (modalType: ModalType) => {
     let baseUrl = '/ws/rest/v1/reportingrest/reportRequest?status=';
     if (modalType === 'delete') {
       mutate(baseUrl + RAN_REPORT_STATUSES.join(','));
@@ -53,7 +56,7 @@ const CancelReportModal: React.FC<CancelReportModalProps> = ({ closeModal, repor
     }
   };
 
-  const getModalTitleByType = (modalType) => {
+  const getModalTitleByType = (modalType: ModalType) => {
     if (modalType === 'delete') {
       return t('deleteReport', 'Delete report');
     } else if (modalType === 'cancel') {
@@ -63,7 +66,7 @@ const CancelReportModal: React.FC<CancelReportModalProps> = ({ closeModal, repor
     }
   };
 
-  const getModalBodyByType = (modalType) => {
+  const getModalBodyByType = (modalType: ModalType) => {
     if (modalType === 'delete') {
       return t('deleteReportModalText', 'Are you sure you want to delete this report?');
     } else if (modalType === 'cancel') {
@@ -73,7 +76,7 @@ const CancelReportModal: React.FC<CancelReportModalProps> = ({ closeModal, repor
     }
   };
 
-  const getSuccessToastMessageByType = (modalType) => {
+  const getSuccessToastMessageByType = (modalType: ModalType) => {
     if (modalType === 'delete') {
       return t('reportDeletedSuccessfully', 'Report deleted successfully');
     } else if (modalType === 'cancel') {
@@ -83,7 +86,7 @@ const CancelReportModal: React.FC<CancelReportModalProps> = ({ closeModal, repor
     }
   };
 
-  const getFailedToastMessageByType = (modalType) => {
+  const getFailedToastMessageByType = (modalType: ModalType) => {
     if (modalType === 'delete') {
       return t('reportDeletingErrorMsg', 'Error during report deleting');
     } else if (modalType === 'cancel') {
@@ -93,7 +96,7 @@ const CancelReportModal: React.FC<CancelReportModalProps> = ({ closeModal, repor
     }
   };
 
-  const getLoadingMessageByType = (modalType) => {
+  const getLoadingMessageByType = (modalType: ModalType) => {
     if (modalType === 'delete' || modalType === 'schedule') {
       return t('deleting', 'Deleting');
     } else if (modalType === 'cancel') {

packages/esm-reports-app/src/components/run-report/run-report-form.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tablet {
   padding: layout.$spacing-06 layout.$spacing-05;
@@ -20,10 +20,10 @@
 
 .runReportInnerDivElement {
   display: flex;
-  padding: 16px;
+  padding: layout.$spacing-05;
   flex-direction: column;
   align-items: flex-start;
-  gap: 16px;
+  gap: layout.$spacing-05;
 }
 
 .basicInputElement {
@@ -35,10 +35,10 @@
 .outputFormatDiv {
   margin-bottom: 50px;
   display: flex;
-  padding: 32px 16px 16px 16px;
+  padding: layout.$spacing-07 layout.$spacing-05 layout.$spacing-05 layout.$spacing-05;
   flex-direction: column;
   align-items: flex-start;
-  gap: 16px;
+  gap: layout.$spacing-05;
 }
 
 .buttonsDiv {
@@ -71,7 +71,7 @@
 }
 
 .reportButton {
-  height: 4rem;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;

packages/esm-reports-app/src/components/simple-cron-editor/commons.ts

@@ -37,6 +37,7 @@ export const DAYS_OF_WEEK_DEFAULT_LABELS: Record<string, string> = {
   saturday: 'Saturday',
 };
 export const DAYS_OF_MONTH: CronField[] = [
+  { name: '', value: '' },
   { name: 'firstDay', value: '1' },
   { name: 'lastDay', value: 'L' },
 ];

packages/esm-reports-app/src/components/simple-cron-editor/cron-day-of-month-select.component.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Select, SelectItem } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { CronField, DAYS_OF_MONTH, DAYS_OF_MONTH_DEFAULT_LABELS } from './commons';
+import { type CronField, DAYS_OF_MONTH, DAYS_OF_MONTH_DEFAULT_LABELS } from './commons';
 import { isEqual } from 'lodash-es';
 
 interface CronDayOfMonthSelectProps {
@@ -45,6 +45,15 @@ const CronDayOfMonthSelect: React.FC<CronDayOfMonthSelectProps> = ({ value, onCh
     }
   };
 
+  const translatedOptions = useMemo(
+    () =>
+      DAYS_OF_MONTH.map((day) => ({
+        ...day,
+        label: t(`dayOfMonth_${day.name}`, DAYS_OF_MONTH_DEFAULT_LABELS[day.name] || day.name),
+      })),
+    [t],
+  );
+
   return (
     <Select
       hideLabel={true}
@@ -55,13 +64,8 @@ const CronDayOfMonthSelect: React.FC<CronDayOfMonthSelectProps> = ({ value, onCh
       invalid={validationState.invalid}
       invalidText={t(validationState.invalidText)}
     >
-      <SelectItem text="" value={''} />
-      {DAYS_OF_MONTH.map((dayOfMonth) => (
-        <SelectItem
-          key={dayOfMonth.value}
-          text={t('dayOfMonth_' + dayOfMonth.name, DAYS_OF_MONTH_DEFAULT_LABELS[dayOfMonth.name] || dayOfMonth.name)}
-          value={dayOfMonth.value}
-        />
+      {translatedOptions.map((dayOfMonth) => (
+        <SelectItem key={dayOfMonth.value} text={dayOfMonth.label} value={dayOfMonth.value.toString()} />
       ))}
     </Select>
   );

packages/esm-reports-app/src/components/simple-cron-editor/cron-day-of-week-select.component.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { FilterableMultiSelect } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { CronField, DAYS_OF_WEEK, DAYS_OF_WEEK_DEFAULT_LABELS } from './commons';
+import { type CronField, DAYS_OF_WEEK, DAYS_OF_WEEK_DEFAULT_LABELS } from './commons';
 import { isEqual } from 'lodash-es';
 
 interface CronDayOfWeekSelectProps {

packages/esm-reports-app/src/components/simple-cron-editor/cron-time-picker.component.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { TimePicker } from '@carbon/react';
-import { parseTime, Time, TIME_PATTERN, to24HTime } from '../../utils/time-utils';
+import { parseTime, TIME_PATTERN, TIME_PATTERN_REG_EXP, to24HTime } from '../../utils/time-utils';
+import type { Time } from '../../utils/time-utils';
 import { isEqual } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 
@@ -16,7 +17,6 @@ interface ValidationState {
 
 const CronTimePicker: React.FC<CronTimePickerProps> = ({ value, onChange }) => {
   const { t } = useTranslation();
-  const timePatternExp = new RegExp(TIME_PATTERN);
   const [valueInternal, setValueInternal] = useState(to24HTime(value));
   const [validationState, setValidationState] = useState<ValidationState>({
     invalid: false,
@@ -30,16 +30,12 @@ const CronTimePicker: React.FC<CronTimePickerProps> = ({ value, onChange }) => {
     }
   }, [value]);
 
-  useEffect(() => {
-    validate();
-  }, [valueInternal]);
-
   useEffect(() => {
     onChange(validationState.invalid ? null : parseTime(valueInternal));
   }, [validationState]);
 
   const validate = () => {
-    if (timePatternExp.test(valueInternal)) {
+    if (TIME_PATTERN_REG_EXP.test(valueInternal)) {
       setValidationState({ invalid: false, invalidText: null });
     } else {
       setValidationState({ invalid: true, invalidText: t('notATimeText', 'hh:mm 24-hr pattern required') });
@@ -56,6 +52,7 @@ const CronTimePicker: React.FC<CronTimePickerProps> = ({ value, onChange }) => {
       onChange={(event) => {
         setValueInternal(event.target.value);
       }}
+      onBlur={validate}
     />
   );
 };

packages/esm-reports-app/src/components/simple-cron-editor/simple-cron-editor.component.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { Select, SelectItem, TextInput } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { Time } from '../../utils/time-utils';
+import type { Time } from '../../utils/time-utils';
 import CronDatePicker from './cron-date-picker.component';
 import CronTimePicker from './cron-time-picker.component';
 import CronDayOfWeekSelect from './cron-day-of-week-select.component';
+import type { CronField } from './commons';
 import {
-  CronField,
   DAYS_OF_MONTH,
   DAYS_OF_WEEK,
   SCHEDULE_TYPE_DEFAULT_LABELS,
@@ -32,11 +32,11 @@ interface SimpleCronEditorProps {
 
 interface EditorState {
   scheduleType: string;
-  date: Date;
-  time: Time;
+  date: Date | null;
+  time: Time | null;
   selectedDaysOfWeek: CronField[];
-  selectedDayOfMonth: CronField;
-  cron: string;
+  selectedDayOfMonth: CronField | null;
+  cron: string | null;
 }
 
 const EMPTY_EDITOR_STATE: EditorState = {
@@ -65,6 +65,7 @@ function getEditorState(initialCron: string): EditorState {
     return {
       scheduleType,
       date: dayjs()
+        .utc()
         .set('year', parseInt(openMRSCron.year))
         .set('month', parseInt(openMRSCron.month) - 1)
         .set('date', parseInt(openMRSCron.day))
@@ -125,7 +126,7 @@ function detectSchedulingType(expression: string) {
   if (everyWeekRegexp.test(expression)) {
     return ST_EVERY_WEEK;
   }
-  const everyMonthRegexp = new RegExp('^0\\s\\d{1,2}\\s\\d{1,2}\\s[1|L]\\s[*]\\s[?]');
+  const everyMonthRegexp = new RegExp('^0\\s\\d{1,2}\\s\\d{1,2}\\s(1|L)\\s[*]\\s[?]');
   if (everyMonthRegexp.test(expression)) {
     return ST_EVERY_MONTH;
   }
@@ -165,9 +166,9 @@ const SimpleCronEditor: React.FC<SimpleCronEditorProps> = ({ initialCron, onChan
       setCron(editorState.cron);
     } else if (selectedScheduleType == ST_ONCE) {
       setCron(
-        `0 ${selectedTime.minutes} ${selectedTime.hours} ${editorState.date.getDate()} ${
-          editorState.date.getMonth() + 1
-        } ? ${editorState.date.getFullYear()}`,
+        `0 ${selectedTime.minutes} ${selectedTime.hours} ${editorState.date.getUTCDate()} ${
+          editorState.date.getUTCMonth() + 1
+        } ? ${editorState.date.getUTCFullYear()}`,
       );
     } else if (selectedScheduleType == ST_EVERY_DAY) {
       setCron(`0 ${selectedTime.minutes} ${selectedTime.hours} * * ?`);

packages/esm-reports-app/src/components/simple-cron-editor/simple-cron-editor.scss

@@ -1,9 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
-@import '~carbon-components/src/globals/scss/vars';
-@import '~carbon-components/src/globals/scss/mixins';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .dangerLabel01 {
   @include type.type-style('label-01');
@@ -15,22 +13,22 @@
 }
 
 .cronEditorField {
-  float:left;
+  float: left;
 }
 
 .cronTimePickerField {
-  float:left;
+  float: left;
   width: min-content;
 }
 
 .cronEditorFieldSeparator {
-  float:left;
-  height: 40px;
-  margin-top: 20px;
-  margin-left: 20px;
-  margin-right: 20px;
+  float: left;
+  height: layout.$spacing-08;
+  margin-top: 1.25rem;
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
 }
 
 .cronContainer {
-  padding: 16px;
+  padding: layout.$spacing-05;
 }