@openmrs/esm-reports-app 4.2.2-pre.402 → 4.2.2-pre.414

package/src/components/overview.component.tsx

@@ -14,7 +14,7 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
-import { Calendar, Download, Play, Save, TrashCan } from '@carbon/react/icons';
+import { Calendar, Download, Play, Save, TrashCan, View } from '@carbon/react/icons';
 import { downloadMultipleReports, downloadReport, preserveReport, useReports } from './reports.resource';
 import {
   ExtensionSlot,
@@ -22,6 +22,7 @@ import {
   navigate,
   showModal,
   showSnackbar,
+  useConfig,
   useLayoutType,
   userHasAccess,
   useSession,
@@ -35,10 +36,12 @@ import { COMPLETED, RAN_REPORT_STATUSES, SAVED } from './report-statuses-constan
 import { DEFAULT_PAGE_NUMBER, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES } from './pagination-constants';
 import { PRIVILEGE_SYSTEM_DEVELOPER } from '../constants';
 import styles from './reports.scss';
+import { type ConfigObject } from '../config-schema';
 
 const OverviewComponent: React.FC = () => {
   const { t } = useTranslation();
   const currentSession = useSession();
+  const { webPreviewViewReportUrl } = useConfig<ConfigObject>();
 
   let [checkedReportUuidsArray, setCheckedReportUuidsArray] = useState([]);
   const [downloadReportButtonVisible, setDownloadReportButtonVisible] = useState(false);
@@ -75,6 +78,30 @@ const OverviewComponent: React.FC = () => {
     return row?.cells.find((cell) => cell.info?.header === 'status')?.value;
   }
 
+  function getReportOutputFormat(row) {
+    return row?.cells.find((cell) => cell.info?.header === 'outputFormat')?.value;
+  }
+
+  function shouldShowDownloadButton(row) {
+    const outputFormat = getReportOutputFormat(row);
+    const status = getReportStatus(row);
+    const isWebPreviewWithUrl = outputFormat === 'Web Preview' && webPreviewViewReportUrl;
+
+    // Don't show download button for web preview when we have a view URL
+    if (isWebPreviewWithUrl) {
+      return false;
+    }
+
+    return status === COMPLETED || status === SAVED;
+  }
+
+  function shouldShowViewButton(row) {
+    const outputFormat = getReportOutputFormat(row);
+    const status = getReportStatus(row);
+
+    return outputFormat === 'Web Preview' && webPreviewViewReportUrl && (status === COMPLETED || status === SAVED);
+  }
+
   function isCurrentUserTheSameAsReportRequestedByUser(reportRequestUuid: string) {
     const report = reports.find((tableRow) => tableRow.id === reportRequestUuid);
     const requestedByUserUuid = report?.requestedByUserUuid;
@@ -162,6 +189,44 @@ const OverviewComponent: React.FC = () => {
     });
   };
 
+  const handleViewReport = useCallback(
+    (reportRequestUuid: string) => {
+      if (!webPreviewViewReportUrl) {
+        showSnackbar({
+          title: t('error', 'Error'),
+          subtitle: t('noWebPreviewUrlConfigured', 'No web preview URL configured.'),
+          kind: 'error',
+        });
+        return;
+      }
+
+      try {
+        // Basic URL validation
+        new URL(webPreviewViewReportUrl.replace('{reportRequestUuid}', 'placeholder'));
+      } catch {
+        showSnackbar({
+          title: t('error', 'Error'),
+          subtitle: t('invalidWebPreviewUrl', 'Configured web preview URL is invalid.'),
+          kind: 'error',
+        });
+        return;
+      }
+
+      if (!webPreviewViewReportUrl.includes('{reportRequestUuid}')) {
+        showSnackbar({
+          title: t('error', 'Error'),
+          subtitle: t('missingPlaceholder', 'Configured web preview URL must include {reportRequestUuid} placeholder.'),
+          kind: 'error',
+        });
+        return;
+      }
+
+      const viewUrl = webPreviewViewReportUrl.replace('{reportRequestUuid}', reportRequestUuid);
+      window.open(viewUrl, '_blank', 'noopener,noreferrer');
+    },
+    [webPreviewViewReportUrl, t],
+  );
+
   const handleDownloadReport = useCallback(
     async (reportRequestUuid: string) => {
       try {
@@ -293,13 +358,13 @@ const OverviewComponent: React.FC = () => {
                 <TableRow>
                   <th></th>
                   {headers.map((header) => (
-                    <TableHeader>{header.header}</TableHeader>
+                    <TableHeader key={header.key}>{header.header}</TableHeader>
                   ))}
                 </TableRow>
               </TableHead>
               <TableBody>
                 {rows.map((row, index) => (
-                  <TableRow className={styles.tableRow}>
+                  <TableRow className={styles.tableRow} key={index}>
                     {renderRowCheckbox(row, index)}
                     {row.cells.map((cell) => (
                       <TableCell
@@ -310,13 +375,20 @@ const OverviewComponent: React.FC = () => {
                         })}
                       >
                         {cell.info.header === 'actions' ? (
-                          <div>
+                          <div className={styles.actionsContainer}>
+                            <ReportOverviewButton
+                              icon={() => <View size={16} className={styles.actionButtonIcon} />}
+                              label={t('view', 'View')}
+                              onClick={() => handleViewReport(row.id)}
+                              reportRequestUuid={row.id}
+                              shouldBeDisplayed={shouldShowViewButton(row)}
+                            />
                             <ReportOverviewButton
                               icon={() => <Download size={16} className={styles.actionButtonIcon} />}
                               label={t('download', 'Download')}
                               onClick={() => handleDownloadReport(row.id)}
                               reportRequestUuid={row.id}
-                              shouldBeDisplayed={getReportStatus(row) === COMPLETED || getReportStatus(row) === SAVED}
+                              shouldBeDisplayed={shouldShowDownloadButton(row)}
                             />
                             <ReportOverviewButton
                               icon={() => <Save size={16} className={styles.actionButtonIcon} />}

package/src/components/report-overview-button.component.tsx

@@ -20,7 +20,7 @@ const ReportOverviewButton: React.FC<ReportOverviewButtonProps> = ({ shouldBeDis
       </div>
     );
   } else {
-    return <div className={styles.actionButtonsWrapperDiv}></div>;
+    return null;
   }
 };
 

package/src/components/reports-data-overview.component.tsx

@@ -2,7 +2,7 @@ import React, { useState, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Select, SelectItem, Button } from '@carbon/react';
 import dayjs from 'dayjs';
-import { ExtensionSlot, showSnackbar, getCoreTranslation } from '@openmrs/esm-framework';
+import { ExtensionSlot, showSnackbar, getCoreTranslation, useConfig } from '@openmrs/esm-framework';
 import Overlay from './overlay.component';
 import ReportDataViewer from './report-data-viewer.component';
 import ReportParameter from './report-parameter.component';
@@ -67,7 +67,7 @@ const ReportsDataOverviewComponent: React.FC = () => {
     if (hasParameters) {
       // Check if all parameters have values
       const missingParameters = selectedReportDefinition?.parameters
-        ?.filter((param) => !reportParameters[param.name])
+        ?.filter((param) => !reportParameters[param.name] && param.required)
         .map((param) => param.label);
 
       if (missingParameters?.length > 0) {

package/src/components/reports.scss

@@ -42,9 +42,16 @@
   width: 100px;
 }
 
+.actionsContainer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: flex-start;
+}
+
 .actionButtonsWrapperDiv {
-  width: 110px;
-  display: inline-block;
+  flex-shrink: 0;
 }
 
 .mainActionButtonsDiv {

package/src/components/run-report/run-report-form.component.tsx

@@ -26,7 +26,14 @@ const RunReportForm: React.FC<RunReportForm> = ({ closePanel }) => {
   const { reportDesigns, mutateReportDesigns } = useReportDesigns(reportUuid);
 
   const supportedParameterTypes = useMemo(
-    () => ['java.util.Date', 'java.lang.String', 'java.lang.Integer', 'org.openmrs.Location'],
+    () => [
+      'java.util.Date',
+      'java.lang.String',
+      'java.lang.Integer',
+      'org.openmrs.Location',
+      'org.openmrs.Concept',
+      'org.openmrs.EncounterType',
+    ],
     [],
   );
 
@@ -36,12 +43,21 @@ const RunReportForm: React.FC<RunReportForm> = ({ closePanel }) => {
 
   useEffect(() => {
     const paramTypes = currentReport?.parameters.map((param) => param.type);
-    const isAnyNotSupportedType = !paramTypes?.every((paramType) => supportedParameterTypes.includes(paramType));
-    const allParametersNotEmpty = currentReport?.parameters.every(
-      (parameter) => !!reportParameters[parameter.name] && reportParameters[parameter.name] !== 'Invalid Date',
-    );
 
-    if (!isAnyNotSupportedType && allParametersNotEmpty && reportUuid !== '' && renderModeUuid !== '') {
+    const isAnyNotSupportedType =
+      paramTypes?.some((paramType) => !supportedParameterTypes.includes(paramType)) ?? false;
+    const allRequiredParametersValid =
+      currentReport?.parameters?.every((parameter) => {
+        if (!parameter.required) {
+          return true;
+        }
+
+        const paramValue = reportParameters[parameter.name];
+        const isValid = !!paramValue && paramValue !== 'Invalid Date' && paramValue !== '';
+        return isValid;
+      }) ?? true;
+
+    if (!isAnyNotSupportedType && allRequiredParametersValid && reportUuid !== '' && renderModeUuid !== '') {
       setIsFormValid(true);
     } else {
       setIsFormValid(false);

package/src/config-schema.ts

@@ -0,0 +1,14 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  webPreviewViewReportUrl: {
+    _type: Type.String,
+    _description:
+      'The custom URL that the "View Report" button should open when output format is Web Preview. Use {reportRequestUuid} as placeholder.',
+    _default: '',
+  },
+};
+
+export interface ConfigObject {
+  webPreviewViewReportUrl: string;
+}

package/src/index.ts

@@ -1,6 +1,7 @@
-import { getAsyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
+import { defineConfigSchema, getAsyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
 import { getFixedT } from 'i18next';
 import { basePath, moduleName } from './constants';
+import { configSchema } from './config-schema';
 
 const options = {
   featureName: 'reports',
@@ -38,6 +39,7 @@ export function startupApp() {
       parent: `${window.getOpenmrsSpaBase()}reports`,
     },
   ]);
+  defineConfigSchema(moduleName, configSchema);
 }
 
 export const root = getAsyncLifecycle(() => import('./reports.component'), options);

package/src/types/report-definition.ts

@@ -9,4 +9,5 @@ interface ReportParameter {
   name: string;
   label: string;
   type: string;
+  required: boolean;
 }

package/translations/en.json

@@ -21,6 +21,7 @@
   "downloadReports": "Download reports",
   "edit": "Edit",
   "editScheduledReport": "Edit scheduled report",
+  "error": "Error",
   "errorDownloadingReport": "Error downloading report",
   "errorDownloadingReports": "Error downloading reports",
   "errorFetchingReport": "Error fetching report",
@@ -29,13 +30,16 @@
   "exportCSV": "Export CSV",
   "failed": "Failed",
   "fetchReport": "Fetch Report",
+  "invalidWebPreviewUrl": "Configured web preview URL is invalid.",
   "missingParameters": "Please provide the following parameters: {parameters}",
+  "missingPlaceholder": "Configured web preview URL must include {reportRequestUuid} placeholder.",
   "nextPage": "Next page",
   "nextRun": "Next run",
   "no": "No",
   "noDataAvailable": "No data available",
   "notATimeText": "hh:mm 24-hr pattern required",
   "notScheduled": "Not scheduled",
+  "noWebPreviewUrlConfigured": "No web preview URL configured.",
   "on": "on",
   "outputFormat": "Output format",
   "parameters": "Parameters",
@@ -82,6 +86,7 @@
   "selectReportLabel": "Report",
   "status": "Status",
   "unknownParameterType": "Unknown parameter type: {type} for parameter: {label}",
+  "view": "View",
   "viewReports": "Reports Webview",
   "yes": "Yes"
 }

package/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "../../tools/setup-tests.ts"],
 }