@openmrs/esm-patient-flags-app 11.3.1-pre.9533 → 11.3.1-pre.9541

package/src/flags/flags.component.tsx

@@ -1,82 +0,0 @@
-import React, { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button, Tag, Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react';
-import { CloseIcon, EditIcon, launchWorkspace2 } from '@openmrs/esm-framework';
-import { usePatientFlags } from './hooks/usePatientFlags';
-import styles from './flags.scss';
-
-interface FlagsProps {
-  patientUuid: string;
-  onHandleCloseHighlightBar: () => void;
-  showHighlightBar: boolean;
-}
-
-type FlagWithPriority = ReturnType<typeof usePatientFlags>['flags'][0];
-
-const Flags: React.FC<FlagsProps> = ({ patientUuid, onHandleCloseHighlightBar, showHighlightBar }) => {
-  const { t } = useTranslation();
-  const { flags, isLoading, error } = usePatientFlags(patientUuid);
-  const filteredFlags = flags.filter((flag: FlagWithPriority) => !flag.voided);
-
-  const handleClickEditFlags = useCallback(() => launchWorkspace2('patient-flags-workspace'), []);
-
-  const renderFlag = (flag: FlagWithPriority) => {
-    const hasPriority = flag.flagWithPriority?.priority?.name;
-    const priorityName = hasPriority ? hasPriority.toLowerCase() : '';
-
-    const isInfoFlag = priorityName === 'info';
-    const isRiskFlag = priorityName === 'risk';
-
-    return (
-      <Toggletip key={flag.uuid} align="bottom-start">
-        <ToggletipButton label={isRiskFlag ? t('riskFlag', 'Risk flag') : t('infoFlag', 'Info flag')}>
-          <Tag
-            className={isInfoFlag ? styles.infoFlagTag : isRiskFlag ? styles.flagTag : undefined}
-            type={isRiskFlag ? 'high-contrast' : undefined}
-          >
-            {isRiskFlag && <span className={styles.flagIcon}>&#128681;</span>}
-            {flag.flag.display}
-          </Tag>
-        </ToggletipButton>
-        <ToggletipContent>
-          <div className={styles.content}>
-            <p className={styles.title}>{flag.flag.display}</p>
-            <p className={styles.message}>{flag.message}</p>
-          </div>
-        </ToggletipContent>
-      </Toggletip>
-    );
-  };
-
-  if (!isLoading && !error) {
-    return (
-      <div className={styles.container}>
-        <div className={styles.flagsContainer}>{filteredFlags.map(renderFlag)}</div>
-        {filteredFlags.length > 0 ? (
-          <Button
-            className={styles.actionButton}
-            kind="ghost"
-            renderIcon={EditIcon}
-            onClick={handleClickEditFlags}
-            iconDescription={t('editFlags', 'Edit flags')}
-          >
-            {t('edit', 'Edit')}
-          </Button>
-        ) : null}
-        {showHighlightBar ? (
-          <Button
-            className={styles.actionButton}
-            hasIconOnly
-            iconDescription={t('closeFlagsBar', 'Close flags bar')}
-            kind="ghost"
-            renderIcon={CloseIcon}
-            onClick={onHandleCloseHighlightBar}
-          />
-        ) : null}
-      </div>
-    );
-  }
-  return null;
-};
-
-export default Flags;

package/src/flags/flags.scss

@@ -1,71 +0,0 @@
-@use '@carbon/colors';
-@use '@carbon/layout';
-@use '@carbon/type';
-
-.container {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: layout.$spacing-03;
-}
-
-.flagsContainer {
-  display: flex;
-  flex-flow: row wrap;
-  column-gap: layout.$spacing-02;
-  row-gap: layout.$spacing-03;
-  align-items: center;
-  flex: 1;
-  margin-right: auto;
-}
-
-.actionButton {
-  max-height: layout.$spacing-08;
-  flex-shrink: 0;
-  align-self: center;
-}
-
-.flagIcon {
-  margin-right: layout.$spacing-02;
-}
-
-.flagTag {
-  padding: 0 layout.$spacing-03;
-  span {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.infoFlagTag {
-  padding: 0 layout.$spacing-03;
-  background-color: colors.$orange-20;
-  color: #934412;
-}
-
-.highlightBarContainer {
-  display: flex;
-  align-items: center;
-  padding: layout.$spacing-03;
-  border-bottom: 1px solid colors.$gray-20;
-}
-
-.tooltipPadding {
-  padding: layout.$spacing-02;
-}
-
-.content {
-  p {
-    @include type.type-style('body-01');
-  }
-
-  .title {
-    @include type.type-style('heading-compact-01');
-  }
-
-  .message {
-    margin-top: layout.$spacing-03;
-    color: colors.$gray-30;
-  }
-}

package/src/flags/flags.test.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { screen, render } from '@testing-library/react';
-import { launchWorkspace2 } from '@openmrs/esm-framework';
-import { mockPatient } from 'tools';
-import { mockPatientFlags } from '__mocks__';
-import { usePatientFlags } from './hooks/usePatientFlags';
-import Flags from './flags.component';
-
-type FlagWithPriority = ReturnType<typeof usePatientFlags>['flags'][0];
-
-const mockUsePatientFlags = jest.mocked(usePatientFlags);
-const mockLaunchWorkspace = jest.mocked(launchWorkspace2);
-
-jest.mock('./hooks/usePatientFlags', () => {
-  const originalModule = jest.requireActual('./hooks/usePatientFlags');
-
-  return {
-    ...originalModule,
-    usePatientFlags: jest.fn(),
-  };
-});
-
-it('renders flags in the patient flags slot', async () => {
-  const user = userEvent.setup();
-
-  mockUsePatientFlags.mockReturnValue({
-    error: null,
-    flags: mockPatientFlags as FlagWithPriority[],
-    isLoading: false,
-    isValidating: false,
-    mutate: jest.fn(),
-  });
-
-  render(<Flags patientUuid={mockPatient.id} onHandleCloseHighlightBar={jest.fn()} showHighlightBar={false} />);
-
-  const flags = screen.getAllByRole('button', { name: /flag/i });
-  expect(flags).toHaveLength(3);
-  expect(screen.getByText(/patient needs to be followed up/i)).toBeInTheDocument();
-  expect(screen.getByText(/diagnosis for the patient is unknown/i)).toBeInTheDocument();
-  expect(screen.getByText(/patient has a future appointment scheduled/i)).toBeInTheDocument();
-
-  const editButton = screen.getByRole('button', { name: /edit/i });
-  expect(editButton).toBeInTheDocument();
-
-  await user.click(editButton);
-
-  expect(mockLaunchWorkspace).toHaveBeenCalledWith('patient-flags-workspace');
-});

package/src/flags/patient-flags.workspace.tsx

@@ -1,234 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { orderBy } from 'lodash-es';
-import { useTranslation } from 'react-i18next';
-import { Button, ButtonSet, Dropdown, Form, InlineLoading, Search, Tile, Toggle, Stack } from '@carbon/react';
-import { type PatientWorkspace2DefinitionProps } from '@openmrs/esm-patient-common-lib';
-import { useLayoutType, showSnackbar, parseDate, formatDate, ResponsiveWrapper } from '@openmrs/esm-framework';
-import { usePatientFlags, enablePatientFlag, disablePatientFlag } from './hooks/usePatientFlags';
-import { getFlagType } from './utils';
-import styles from './flags-list.scss';
-
-type SortKey = 'alpha' | 'active' | 'retired';
-
-const FlagsList: React.FC<PatientWorkspace2DefinitionProps<{}, {}>> = ({
-  closeWorkspace,
-  groupProps: { patientUuid },
-}) => {
-  const { t } = useTranslation();
-  const { flags, isLoading, error, mutate } = usePatientFlags(patientUuid);
-  const isTablet = useLayoutType() === 'tablet';
-  const [isEnabling, setIsEnabling] = useState(false);
-  const [isDisabling, setIsDisabling] = useState(false);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [sortBy, setSortBy] = useState<SortKey>('alpha');
-
-  const sortItems = useMemo(
-    () => [
-      { id: 'alpha' as const, label: t('alphabetically', 'A - Z') },
-      { id: 'active' as const, label: t('activeFirst', 'Active first') },
-      { id: 'retired' as const, label: t('retiredFirst', 'Retired first') },
-    ],
-    [t],
-  );
-
-  const sortedRows = useMemo(() => {
-    if (!sortBy) {
-      return flags;
-    }
-    if (sortBy === 'active') {
-      return orderBy(flags, [(item) => Number(item.voided)], ['asc']);
-    }
-    if (sortBy === 'retired') {
-      return orderBy(flags, [(item) => Number(item.voided)], ['desc']);
-    }
-    return orderBy(flags, [(f) => f.flag.display], ['asc']);
-  }, [sortBy, flags]);
-
-  const searchResults = useMemo(() => {
-    const query = searchTerm.trim().toLowerCase();
-    if (query) {
-      return sortedRows.filter((f) => f.flag.display.toLowerCase().includes(query));
-    }
-    return sortedRows;
-  }, [searchTerm, sortedRows]);
-
-  const handleSortByChange = ({ selectedItem }) => setSortBy(selectedItem?.id as SortKey);
-
-  const handleEnableFlag = async (flagUuid) => {
-    setIsEnabling(true);
-    try {
-      const res = await enablePatientFlag(flagUuid);
-      if (!res.ok) {
-        throw new Error('Enable flag failed');
-      }
-      mutate();
-      showSnackbar({
-        isLowContrast: true,
-        kind: 'success',
-        subtitle: t('flagEnabledSuccessfully', 'Flag successfully enabled'),
-        title: t('enabledFlag', 'Enabled flag'),
-      });
-    } catch (e) {
-      showSnackbar({
-        isLowContrast: false,
-        kind: 'error',
-        subtitle: t('flagEnableError', 'Error enabling flag'),
-        title: t('enableFlagError', 'Enable flag error'),
-      });
-    } finally {
-      setIsEnabling(false);
-    }
-  };
-
-  const handleDisableFlag = async (flagUuid) => {
-    setIsDisabling(true);
-    try {
-      const res = await disablePatientFlag(flagUuid);
-      if (!res.ok) {
-        throw new Error('Disable flag failed');
-      }
-      mutate();
-      showSnackbar({
-        isLowContrast: true,
-        kind: 'success',
-        subtitle: t('flagDisabledSuccessfully', 'Flag successfully disabled'),
-        title: t('flagDisabled', 'Flag disabled'),
-      });
-    } catch (e) {
-      showSnackbar({
-        isLowContrast: false,
-        kind: 'error',
-        subtitle: t('flagDisableError', 'Error disabling the flag'),
-        title: t('disableFlagError', 'Disable flag error'),
-      });
-    } finally {
-      setIsDisabling(false);
-    }
-  };
-
-  if (isLoading) {
-    return <InlineLoading className={styles.loading} description={`${t('loading', 'Loading')} ...`} />;
-  }
-
-  if (error) {
-    return <div>{error.message}</div>;
-  }
-
-  return (
-    <Form className={styles.formWrapper}>
-      {/* The <div> below is required to maintain the page layout styling */}
-      <div>
-        <ResponsiveWrapper>
-          <Search
-            labelText={t('searchForAFlag', 'Search for a flag')}
-            placeholder={t('searchForAFlag', 'Search for a flag')}
-            value={searchTerm}
-            size={isTablet ? 'lg' : 'md'}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-        </ResponsiveWrapper>
-        <Stack gap={4}>
-          <div className={styles.listWrapper}>
-            <div className={styles.flagsHeaderInfo}>
-              {searchResults.length > 0 ? (
-                <>
-                  <span className={styles.resultsCount}>
-                    {t('matchesForSearchTerm', '{{count}} flags', {
-                      count: searchResults.length,
-                    })}
-                  </span>
-                  <Dropdown
-                    className={styles.sortDropdown}
-                    id="sortBy"
-                    label=""
-                    type="inline"
-                    items={sortItems}
-                    itemToString={(item) => item?.label ?? ''}
-                    selectedItem={sortItems.find((item) => item.id === sortBy)}
-                    onChange={handleSortByChange}
-                    titleText={t('sortBy', 'Sort by')}
-                  />
-                </>
-              ) : null}
-            </div>
-            {searchResults.length > 0
-              ? searchResults.map((result) => (
-                  <div className={styles.flagTile} key={result.uuid}>
-                    <div className={styles.flagHeader}>
-                      <div className={styles.titleAndType}>
-                        <div className={styles.flagTitle}>{result.flag.display}</div>&middot;
-                        <span className={styles.type}>
-                          {(() => {
-                            const typeLabel = getFlagType(result.tags);
-                            return typeLabel ? t(typeLabel, typeLabel) : t('clinical', 'Clinical');
-                          })()}
-                        </span>
-                      </div>
-                      <Toggle
-                        className={styles.flagToggle}
-                        defaultToggled={!Boolean(result.voided)}
-                        id={result.uuid}
-                        labelA=""
-                        labelB=""
-                        onToggle={(on) => (on ? handleEnableFlag(result.uuid) : handleDisableFlag(result.uuid))}
-                        size="sm"
-                      />
-                    </div>
-                    {result.voided ? null : (
-                      <div className={styles.secondRow}>
-                        <div className={styles.metadata}>
-                          <span className={styles.label}>{t('assigned', 'Assigned')}</span>
-                          <span className={styles.value}>
-                            {formatDate(parseDate(result.auditInfo?.dateCreated), { time: false })}
-                          </span>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                ))
-              : null}
-
-            {searchResults.length === 0 ? (
-              <div className={styles.emptyState}>
-                <Tile className={styles.tile}>
-                  <p className={styles.content}>{t('noFlagsFound', 'Sorry, no flags found matching your search')}</p>
-                  <p className={styles.helper}>
-                    <Button
-                      kind="ghost"
-                      size="sm"
-                      onClick={() => {
-                        setSearchTerm('');
-                      }}
-                    >
-                      {t('clearSearch', 'Clear search')}
-                    </Button>
-                  </p>
-                </Tile>
-              </div>
-            ) : null}
-          </div>
-        </Stack>
-      </div>
-      <ButtonSet className={isTablet ? styles.tabletButtonSet : styles.desktopButtonSet}>
-        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
-          {t('discard', 'Discard')}
-        </Button>
-        <Button
-          className={styles.button}
-          disabled={isEnabling || isDisabling}
-          kind="primary"
-          type="submit"
-          onClick={() => closeWorkspace({ discardUnsavedChanges: true })}
-        >
-          {(() => {
-            if (isEnabling) return t('enablingFlag', 'Enabling flag...');
-            if (isDisabling) return t('disablingFlag', 'Disabling flag...');
-            return t('saveAndClose', 'Save & close');
-          })()}
-        </Button>
-      </ButtonSet>
-    </Form>
-  );
-};
-
-export default FlagsList;