@openmrs/esm-reports-app 4.2.2-pre.356 → 4.2.2-pre.394

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":">=2.2.0","reportingrest":">=1.15.0","reporting":">=1.27.0"},"extensions":[{"name":"admin-report-link","slot":"system-admin-page-card-link-slot","component":"reportsLink"},{"name":"run-report","component":"runReport"}],"pages":[{"component":"root","route":"reports"},{"component":"overview","route":"overview"},{"component":"scheduled-overview","route":"scheduled-overview"},{"component":"reports-data-overview","route":"reports-data-overview"}],"modals":[{"name":"cancel-report-modal","component":"cancelReportModal"}],"version":"4.2.2-pre.356"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":">=2.2.0","reportingrest":">=1.15.0","reporting":">=1.27.0"},"extensions":[{"name":"admin-report-link","slot":"system-admin-page-card-link-slot","component":"reportsLink"},{"name":"run-report","component":"runReport"}],"pages":[{"component":"root","route":"reports"},{"component":"overview","route":"overview"},{"component":"scheduled-overview","route":"scheduled-overview"},{"component":"reports-data-overview","route":"reports-data-overview"}],"modals":[{"name":"cancel-report-modal","component":"cancelReportModal"}],"version":"4.2.2-pre.394"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-reports-app",
-  "version": "4.2.2-pre.356",
+  "version": "4.2.2-pre.394",
   "license": "MPL-2.0",
   "description": "Reports admin dashboard for 03",
   "browser": "dist/openmrs-esm-reports-app.js",

package/src/components/concept-search/concept-search-input.component.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Search } from '@carbon/react';
+import ConceptSearchResults from './concept-search-results';
+import { useConceptSearchInput } from '../../hooks/useConceptSearchInput';
+import styles from './concept-search-input.scss';
+
+interface ConceptSearchInputProps {
+  parameterName: string;
+  labelText?: string;
+  placeholder?: string;
+  onConceptSelect: (conceptUuid: string, conceptDisplay: string) => void;
+}
+
+const ConceptSearchInput: React.FC<ConceptSearchInputProps> = ({
+  parameterName,
+  labelText,
+  placeholder,
+  onConceptSelect,
+}) => {
+  const { t } = useTranslation();
+
+  const {
+    searchInputRef,
+    searchTerm,
+    selectedConcept,
+    debouncedSearchTerm,
+    handleSearchTermChange,
+    focusAndClearSearchInput,
+    handleConceptSelect,
+  } = useConceptSearchInput({
+    parameterName,
+    onConceptSelect,
+  });
+
+  return (
+    <div className={styles.conceptSearchContainer}>
+      <Search
+        size="lg"
+        placeholder={placeholder || t('searchFieldPlaceholder', 'Search for a concept')}
+        labelText={labelText || t('searchFieldPlaceholder', 'Search for a concept')}
+        onChange={handleSearchTermChange}
+        ref={searchInputRef}
+        value={searchTerm}
+      />
+      {!selectedConcept && (
+        <div className={styles.conceptSearchResultsDropdown}>
+          <ConceptSearchResults
+            searchTerm={debouncedSearchTerm}
+            focusAndClearSearchInput={focusAndClearSearchInput}
+            onConceptSelect={handleConceptSelect}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ConceptSearchInput;

package/src/components/concept-search/concept-search-input.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+
+.conceptSearchContainer {
+  position: relative;
+}
+
+.conceptSearchResultsDropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}

package/src/components/concept-search/concept-search-input.test.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ConceptSearchInput from './concept-search-input.component';
+
+// Mock the dependencies
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, defaultValue: string) => defaultValue,
+  }),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useDebounce: jest.fn((value) => value),
+}));
+
+jest.mock('./concept-search-results', () => {
+  return function MockConceptSearchResults({ searchTerm, onConceptSelect }: any) {
+    if (!searchTerm) return null;
+
+    return (
+      <div data-testid="concept-search-results">
+        <div
+          data-testid="concept-result"
+          onClick={() => onConceptSelect({ uuid: 'test-uuid', display: 'Test Concept' })}
+        >
+          Test Concept
+        </div>
+      </div>
+    );
+  };
+});
+
+describe('ConceptSearchInput', () => {
+  const mockOnConceptSelect = jest.fn();
+  const defaultProps = {
+    parameterName: 'testParameter',
+    onConceptSelect: mockOnConceptSelect,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render search input with default placeholder', () => {
+    render(<ConceptSearchInput {...defaultProps} />);
+
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+    expect(screen.getByRole('search', { name: 'Search for a concept' })).toBeInTheDocument();
+  });
+
+  it('should render search input with custom placeholder and label', () => {
+    render(<ConceptSearchInput {...defaultProps} placeholder="Custom placeholder" labelText="Custom label" />);
+
+    expect(screen.getByRole('searchbox')).toHaveAttribute('placeholder', 'Custom placeholder');
+    expect(screen.getByRole('search', { name: 'Custom placeholder' })).toBeInTheDocument();
+    expect(screen.getByLabelText('Custom label')).toBeInTheDocument();
+  });
+
+  it('should show search results when typing', async () => {
+    render(<ConceptSearchInput {...defaultProps} />);
+
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('concept-search-results')).toBeInTheDocument();
+    });
+  });
+
+  it('should call onConceptSelect when a concept is selected', async () => {
+    render(<ConceptSearchInput {...defaultProps} />);
+
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('concept-search-results')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId('concept-result'));
+
+    expect(mockOnConceptSelect).toHaveBeenCalledWith('test-uuid', 'Test Concept');
+  });
+
+  it('should hide search results after concept selection', async () => {
+    render(<ConceptSearchInput {...defaultProps} />);
+
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('concept-search-results')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId('concept-result'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('concept-search-results')).not.toBeInTheDocument();
+    });
+  });
+
+  it('should update input value with selected concept display name', async () => {
+    render(<ConceptSearchInput {...defaultProps} />);
+
+    const searchInput = screen.getByRole('searchbox') as HTMLInputElement;
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('concept-search-results')).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByTestId('concept-result'));
+
+    await waitFor(() => {
+      expect(searchInput.value).toBe('Test Concept');
+    });
+  });
+});

package/src/components/concept-search/concept-search-results.scss

@@ -0,0 +1,107 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  position: relative;
+  z-index: 1000;
+  margin: layout.$spacing-03 0 0 0;
+  background: $ui-01;
+  border: 1px solid $ui-03;
+  border-radius: layout.$spacing-02;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.searchResultsCount {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.conceptBasketSearchResultsHeader {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: layout.$spacing-03;
+  align-items: center;
+  padding: layout.$spacing-03 layout.$spacing-03 0 layout.$spacing-03;
+  border-bottom: 1px solid $ui-03;
+  padding-bottom: layout.$spacing-03;
+}
+
+.tabletSearchResultTile {
+  &:not(:last-of-type) {
+    margin-bottom: layout.$spacing-04;
+  }
+}
+
+.searchResultSkeletonWrapper {
+  margin: layout.$spacing-03 0;
+  padding: layout.$spacing-03;
+
+  :global(.cds--skeleton__text) {
+    margin: 0;
+  }
+
+  .searchResultCntSkeleton {
+    margin-right: layout.$spacing-07;
+  }
+
+  .skeletonTile {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.emptyState {
+  margin: layout.$spacing-03;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-05;
+  text-align: center;
+  background-color: $ui-01;
+}
+
+:global(.omrs-breakpoint-lt-small-desktop) .emptyState {
+  background-color: $ui-02;
+}
+
+.link {
+  color: $interactive-01;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.resultsContainer {
+  padding: layout.$spacing-03;
+}
+
+.resultsContainer div[role='option'] {
+  margin: 0;
+  padding: layout.$spacing-03;
+  cursor: pointer;
+  border-radius: layout.$spacing-02;
+  @include type.type-style('body-compact-01');
+}
+
+.resultsContainer div[role='option']:hover,
+.resultsContainer div[role='option']:focus {
+  background-color: $ui-03;
+  outline: 2px solid $interactive-01;
+  outline-offset: -2px;
+}
+
+.resultsContainer::-webkit-scrollbar-thumb {
+  border-radius: layout.$spacing-02;
+}
+
+.productiveHeading01 {
+  @include type.type-style('heading-compact-01');
+  margin-bottom: layout.$spacing-03;
+}
+
+.bodyShort01 {
+  @include type.type-style('body-compact-01');
+}

package/src/components/concept-search/concept-search-results.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import styles from './concept-search-results.scss';
+import { useTranslation } from 'react-i18next';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { Button, ButtonSkeleton, SkeletonText, Tile } from '@carbon/react';
+import classNames from 'classnames';
+import { useConceptSearch } from '../../hooks/useConceptSearch';
+
+export interface ConceptSearchResultsProps {
+  searchTerm: string;
+  focusAndClearSearchInput: () => void;
+  onConceptSelect?: (concept: { uuid: string; display?: string }) => void;
+}
+
+export default function ConceptSearchResults({
+  searchTerm,
+  focusAndClearSearchInput,
+  onConceptSelect,
+}: ConceptSearchResultsProps) {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { concepts, isLoading, error } = useConceptSearch(searchTerm);
+
+  if (!searchTerm) {
+    return null;
+  }
+
+  if (isLoading) {
+    return <ConceptSearchSkeleton />;
+  }
+
+  if (error) {
+    return (
+      <Tile className={styles.emptyState}>
+        <div>
+          <h4 className={styles.productiveHeading01}>
+            {t('errorFetchingConceptResults', 'Error fetching results for "{{searchTerm}}"', {
+              searchTerm,
+            })}
+          </h4>
+          <p className={styles.bodyShort01}>
+            <span>{t('trySearchingAgain', 'Please try searching again')}</span>
+          </p>
+        </div>
+      </Tile>
+    );
+  }
+
+  if (concepts?.length === 0) {
+    return (
+      <Tile className={styles.emptyState}>
+        <div>
+          <h4 className={styles.productiveHeading01}>
+            {t('noResultsForConceptSearch', 'No results to display for "{{searchTerm}}"', {
+              searchTerm,
+            })}
+          </h4>
+          <p className={styles.bodyShort01}>
+            <span>{t('tryTo', 'Try to')}</span>{' '}
+            <span className={styles.link} role="link" tabIndex={0} onClick={focusAndClearSearchInput}>
+              {t('searchAgain', 'search again')}
+            </span>{' '}
+            <span>{t('usingADifferentTerm', 'using a different term')}</span>
+          </p>
+        </div>
+      </Tile>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.conceptBasketSearchResultsHeader}>
+        <span className={styles.searchResultsCount}>
+          {t('searchResultsMatchesForTerm', '{{count}} results for "{{searchTerm}}"', {
+            count: concepts?.length,
+            searchTerm,
+          })}
+        </span>
+        <Button kind="ghost" onClick={focusAndClearSearchInput} size={isTablet ? 'md' : 'sm'}>
+          {t('clearSearchResults', 'Clear Results')}
+        </Button>
+      </div>
+      <div
+        className={styles.resultsContainer}
+        role="listbox"
+        aria-label={t('conceptSearchResults', 'Concept search results')}
+      >
+        {concepts?.map((concept, index) => (
+          <div
+            key={concept.uuid}
+            role="option"
+            tabIndex={0}
+            aria-selected={false}
+            onClick={() => {
+              onConceptSelect?.(concept);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onConceptSelect?.(concept);
+              }
+            }}
+            style={{ cursor: 'pointer' }}
+          >
+            {concept.display}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const ConceptSearchSkeleton = () => {
+  const isTablet = useLayoutType() === 'tablet';
+  const tileClassName = classNames({
+    [styles.tabletSearchResultTile]: isTablet,
+    [styles.desktopSearchResultTile]: !isTablet,
+    [styles.skeletonTile]: true,
+  });
+  const buttonSize = isTablet ? 'md' : 'sm';
+
+  return (
+    <div className={styles.searchResultSkeletonWrapper}>
+      <div className={styles.conceptBasketSearchResultsHeader}>
+        <SkeletonText className={styles.searchResultCntSkeleton} />
+        <ButtonSkeleton size={buttonSize} />
+      </div>
+      {[...Array(4)].map((_, index) => (
+        <Tile key={index} className={tileClassName}>
+          <SkeletonText />
+        </Tile>
+      ))}
+    </div>
+  );
+};

package/src/components/report-parameter-input.component.tsx

@@ -1,8 +1,11 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { isEqual } from 'lodash-es';
-import { DatePicker, DatePickerInput, Select, SelectItem, TextInput } from '@carbon/react';
+import { DatePicker, DatePickerInput, Select, SelectItem, TextInput, Search } from '@carbon/react';
 import { useLocations } from './reports.resource';
 import styles from './run-report/run-report-form.scss';
+import { useTranslation } from 'react-i18next';
+import { useDebounce } from '@openmrs/esm-framework';
+import ConceptSearchResults from './concept-search/concept-search-results';
 
 interface ReportParameterInputProps {
   parameter: any;
@@ -21,8 +24,56 @@ function getInitialValue(parameter: any, value: any) {
 }
 
 const ReportParameterInput: React.FC<ReportParameterInputProps> = ({ parameter, value, onChange }) => {
+  const { t } = useTranslation();
   const { locations } = useLocations();
   const [valueInternal, setValueInternal] = useState<string | number>(getInitialValue(parameter, value));
+  const searchInputRef = useRef(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedConcept, setSelectedConcept] = useState<{ uuid: string; display?: string } | null>(null);
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  const focusAndClearSearchInput = useCallback(() => {
+    setSearchTerm('');
+    searchInputRef.current?.focus();
+  }, [setSearchTerm]);
+
+  const handleOnChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+      let eventValue = null;
+      const target = event.target as HTMLInputElement | HTMLSelectElement;
+      if ((target as HTMLInputElement).type === 'checkbox') {
+        eventValue = (target as HTMLInputElement).checked;
+      } else {
+        eventValue = target.value;
+      }
+
+      setValueInternal(eventValue);
+
+      if (parameter.type === 'java.util.Date') {
+        onChange(new Date(eventValue).toLocaleDateString());
+      } else {
+        onChange(eventValue);
+      }
+    },
+    [onChange, parameter.type],
+  );
+
+  const handleConceptSelect = useCallback(
+    (concept: { uuid: string; display?: string }) => {
+      setSelectedConcept(concept);
+      setSearchTerm(concept.display || '');
+      if (handleOnChange) {
+        const syntheticEvent = {
+          target: {
+            name: parameter.name,
+            value: concept.uuid,
+          },
+        } as React.ChangeEvent<HTMLInputElement>;
+        handleOnChange(syntheticEvent);
+      }
+    },
+    [handleOnChange, parameter.name],
+  );
 
   const isValueEqual = useCallback(
     (valueA, valueB) => {
@@ -35,6 +86,17 @@ const ReportParameterInput: React.FC<ReportParameterInputProps> = ({ parameter,
     [parameter.type],
   );
 
+  const handleSearchTermChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchTerm(event.target.value ?? '');
+      // Clear selected concept when user starts typing again
+      if (selectedConcept) {
+        setSelectedConcept(null);
+      }
+    },
+    [setSearchTerm, selectedConcept],
+  );
+
   useEffect(() => {
     const newInternalValue = getInitialValue(parameter, value);
     setValueInternal((prevValue) => {
@@ -88,6 +150,26 @@ const ReportParameterInput: React.FC<ReportParameterInputProps> = ({ parameter,
             ))}
           </Select>
         );
+      case 'org.openmrs.Concept':
+        return (
+          <div>
+            <Search
+              size="lg"
+              placeholder={t('searchFieldPlaceholder', 'Search for a concept')}
+              labelText={t('searchFieldPlaceholder', 'Search for a concept')}
+              onChange={handleSearchTermChange}
+              ref={searchInputRef}
+              value={searchTerm}
+            />
+            {!selectedConcept && (
+              <ConceptSearchResults
+                searchTerm={debouncedSearchTerm}
+                focusAndClearSearchInput={focusAndClearSearchInput}
+                onConceptSelect={handleConceptSelect}
+              />
+            )}
+          </div>
+        );
       default:
         return (
           <span className={styles.unknownParameterTypeSpan}>
@@ -97,23 +179,6 @@ const ReportParameterInput: React.FC<ReportParameterInputProps> = ({ parameter,
     }
   };
 
-  function handleOnChange(event) {
-    let eventValue = null;
-    if (event.target.type === 'checkbox') {
-      eventValue = event.target.checked;
-    } else {
-      eventValue = event.target.value;
-    }
-
-    setValueInternal(eventValue);
-
-    if (parameter.type === 'java.util.Date') {
-      onChange(new Date(eventValue).toLocaleDateString());
-    } else {
-      onChange(eventValue);
-    }
-  }
-
   function handleOnDateChange(dateValue) {
     const newDate = new Date(dateValue);
     setValueInternal(newDate.toISOString());

package/src/components/report-parameter.component.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { TextInput, Select, SelectItem } from '@carbon/react';
 import { OpenmrsDatePicker } from '@openmrs/esm-framework';
 import styles from './report-parameter.scss';
+import ConceptSearchInput from './concept-search/concept-search-input.component';
 
 type DateReportParameter = 'java.util.Date';
 type InputReportParameter = 'java.lang.String' | 'java.lang.Integer';
@@ -42,6 +43,19 @@ const ReportParameter: React.FC<ReportParameterProps> = ({
   handleOnDateChange,
 }) => {
   const { t } = useTranslation();
+
+  const handleConceptSelect = (conceptUuid: string, conceptDisplay: string) => {
+    if (handleOnChange) {
+      const syntheticEvent = {
+        target: {
+          name: parameter.name,
+          value: conceptUuid,
+        },
+      } as React.ChangeEvent<HTMLInputElement>;
+      handleOnChange(syntheticEvent);
+    }
+  };
+
   switch (parameter.type) {
     case 'java.util.Date':
       return (
@@ -90,6 +104,15 @@ const ReportParameter: React.FC<ReportParameterProps> = ({
           </Select>
         </div>
       );
+    case 'org.openmrs.Concept':
+      return (
+        <ConceptSearchInput
+          parameterName={parameter.name}
+          labelText={parameter.label}
+          placeholder={t('searchFieldPlaceholder', 'Search for a concept')}
+          onConceptSelect={handleConceptSelect}
+        />
+      );
     default:
       return (
         <div>

package/src/hooks/useConceptSearch.ts

@@ -0,0 +1,20 @@
+import { type Concept, type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWRImmutable from 'swr/immutable';
+
+export function useConceptSearch(query: string) {
+  const { data, ...rest } = useSWRImmutable<FetchResponse<{ results: Array<Concept> }>, Error>(
+    query ? `${restBaseUrl}/concept?q=${query}&v=full` : null,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      concepts: data?.data?.results,
+      ...rest,
+    }),
+    [data, rest],
+  );
+
+  return results;
+}