@openmrs/esm-sms-app 1.0.1-pre.22

package/src/providers/modals/remove-config.modal.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useProviderConfigurations } from '../../hooks/useProviderConfigurations';
+import { saveConfig } from '../../api/providers.resource';
+
+interface RemoveConfigModalProps {
+  closeDeleteModal: () => void;
+  configName: string;
+}
+
+const RemoveConfigModal: React.FC<RemoveConfigModalProps> = ({ closeDeleteModal, configName }) => {
+  const { t } = useTranslation();
+  const { mutateConfigs, providerConfigurations } = useProviderConfigurations();
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const handleDelete = useCallback(async () => {
+    const newConfigs = providerConfigurations.filter((config) => config.name !== configName);
+    setIsDeleting(true);
+
+    await saveConfig(newConfigs)
+      .then(() => {
+        mutateConfigs();
+        closeDeleteModal();
+        showSnackbar({
+          isLowContrast: true,
+          kind: 'success',
+          title: t('configRemoved', 'Configuration removed'),
+        });
+      })
+      .catch((error) => {
+        showSnackbar({
+          isLowContrast: false,
+          kind: 'error',
+          title: t('errorDeletingConfig', 'Error deleting configuration'),
+          subtitle: error?.message,
+        });
+      });
+  }, [closeDeleteModal, configName, mutateConfigs, providerConfigurations, t]);
+
+  return (
+    <div>
+      <ModalHeader
+        closeModal={closeDeleteModal}
+        title={t('removeConfiguration', 'Remove {{configName}} configuration', {
+          configName,
+        })}
+      />
+      <ModalBody>
+        <p>{t('deleteModalConfirmationText', 'Are you sure you want to delete this configuration?')}</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeDeleteModal}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="danger" onClick={handleDelete} disabled={isDeleting}>
+          {isDeleting ? (
+            <InlineLoading description={t('removing', 'Removing') + '...'} />
+          ) : (
+            <span>{t('remove', 'Remove')}</span>
+          )}
+        </Button>
+      </ModalFooter>
+    </div>
+  );
+};
+
+export default RemoveConfigModal;

package/src/providers/providers-dashboard.component.tsx

@@ -0,0 +1,63 @@
+import classnames from 'classnames';
+import React, { useCallback } from 'react';
+import { Tab, Tabs, TabPanel, TabList, TabPanels } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@carbon/react';
+import { Export } from '@carbon/react/icons';
+import { WorkspaceContainer, showModal, useWorkspaces } from '@openmrs/esm-framework';
+import { useProviderConfigTemplates } from '../hooks/useProviderConfigTemplates';
+import ProvidersListTable from './providers-overview/providers-overview.component';
+import SmslogsTable from './sms-logs-table/sms-logs-table.component';
+import styles from './providers-dashboard.scss';
+
+const ProvidersDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { active: workspaceOpen } = useWorkspaces();
+  const { mutateTemplates } = useProviderConfigTemplates();
+
+  const showConfigUploadModal = useCallback(() => {
+    const close = showModal('config-upload-modal', {
+      mutateTemplates: mutateTemplates,
+      closeModal: () => {
+        close();
+      },
+    });
+  }, [mutateTemplates]);
+
+  return (
+    <>
+      <main className={classnames(['omrs-main-content', styles.mainPageWrapper])}>
+        <div className={classnames([styles.container, { [styles.workspaceOpen]: workspaceOpen }])}>
+          <h3>{t('smsProviderSettings', 'SMS Provider Settings')}</h3>
+          <div className={styles.tabsContainer}>
+            <Tabs className={styles.tabs}>
+              <TabList className={styles.tabList}>
+                <Tab className={styles.tab}>{t('providers', 'Providers')}</Tab>
+                <Tab className={styles.tab}>{t('logs', 'Logs')}</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <div className={styles.tabPanel}>
+                    <ProvidersListTable />
+                    <Button onClick={showConfigUploadModal} className={styles.importConfigButton}>
+                      <Export size={16} />
+                      {t('importConfig', 'Import config template')}
+                    </Button>
+                  </div>
+                </TabPanel>
+                <TabPanel>
+                  <div className={styles.tabPanel}>
+                    <SmslogsTable />
+                  </div>
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </div>
+        </div>
+        <WorkspaceContainer contextKey="provider-settings" />
+      </main>
+    </>
+  );
+};
+
+export default ProvidersDashboard;

package/src/providers/providers-dashboard.scss

@@ -0,0 +1,69 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.mainPageWrapper {
+  display: flex;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: spacing.$spacing-07;
+  padding: spacing.$spacing-09 10rem;
+  transition: padding-right .5s ease-in-out;
+
+  &.workspaceOpen {
+    padding-right: spacing.$spacing-05;
+  }
+}
+
+.tabsContainer {
+  :global(.cds--tab-content) {
+    padding: 0
+  }
+}
+
+.tabList {
+  :global(.cds--tabs__nav-item--selected) {
+    background-color: colors.$white-0;
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+    border: none !important
+  }
+
+  :global(.cds--tabs__nav-link) {
+    border: none !important;
+  }
+}
+
+.tabPanel {
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$spacing-08;
+  padding: spacing.$spacing-09 spacing.$spacing-05 spacing.$spacing-05;
+  background: colors.$white-0;
+  border-radius: 2px 2px 2px;
+}
+
+.tab {
+  min-width: 8.875rem;
+
+  &:active,
+  &:focus {
+    outline: 2px solid var(--brand-03) !important;
+  }
+}
+
+.importConfigButton {
+  background-color: transparent;
+  color: var(--brand-03);
+  border: 1px solid var(--brand-03);
+  display: inline-flex;
+  gap: spacing.$spacing-05;
+
+  &:hover {
+    background-color: var(--brand-03);
+  }
+}

package/src/providers/providers-dashboard.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ProvidersDashboard from './providers-dashboard.component';
+import { useTranslation } from 'react-i18next';
+import { showModal, useWorkspaces } from '@openmrs/esm-framework';
+import { useProviderConfigTemplates } from '../hooks/useProviderConfigTemplates';
+import { renderWithSwr } from 'tools';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: jest.fn(),
+}));
+
+jest.mock('../hooks/useProviderConfigTemplates', () => ({
+  useProviderConfigTemplates: jest.fn(),
+}));
+
+describe('ProvidersDashboard', () => {
+  beforeAll(() => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+  });
+
+  const mockShowModal = showModal as jest.Mock;
+  const mockUseProviderConfigTemplates = useProviderConfigTemplates as jest.Mock;
+  const mockUseTranslation = useTranslation as jest.Mock;
+  const mockUseworkspaces = useWorkspaces as jest.Mock;
+
+  beforeEach(() => {
+    mockUseTranslation.mockReturnValue({ t: (_key: string, value: string) => value });
+    mockUseworkspaces.mockReturnValue({ active: false });
+    mockUseProviderConfigTemplates.mockReturnValue({ mutateTemplates: jest.fn() });
+  });
+
+  it('renders the component correctly', () => {
+    renderProvidersDashboard();
+    expect(screen.getByText('SMS Provider Settings')).toBeInTheDocument();
+    expect(screen.getByText('Import config template')).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Providers' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Logs' })).toBeInTheDocument();
+  });
+
+  it('triggers showConfigUploadModal when the import button is clicked', () => {
+    renderProvidersDashboard();
+    fireEvent.click(screen.getByText('Import config template'));
+
+    expect(mockShowModal).toHaveBeenCalledWith('config-upload-modal', expect.any(Object));
+  });
+});
+
+function renderProvidersDashboard() {
+  return renderWithSwr(<ProvidersDashboard />);
+}

package/src/providers/providers-overview/providers-action-menu.component.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { useLayoutType, showModal, showSnackbar, launchWorkspace } from '@openmrs/esm-framework';
+import { type ProviderConfiguration } from '../../types';
+import { useProviderConfigurations } from '../../hooks/useProviderConfigurations';
+import { setAsDefaultConfig } from '../../api/providers.resource';
+import styles from './providers-action-menu.scss';
+
+interface configurationsActionMenuProps {
+  config: ProviderConfiguration;
+}
+
+export const ConfigurationsActionMenu = ({ config }: configurationsActionMenuProps) => {
+  const { defaultConfig, mutateConfigs, providerConfigurations } = useProviderConfigurations();
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const isDefaultConfig = config.name === defaultConfig;
+  const state = useMemo(() => ({ providerName: config.name, ...config }), [config]);
+
+  const launchEditConfigForm = useCallback(
+    () =>
+      launchWorkspace('add-provider-config-form', {
+        workspaceTitle: t('editConfig', 'Edit {{configName}}', {
+          configName: config.name,
+        }),
+        ...state,
+      }),
+    [t, config.name, state],
+  );
+
+  const launchConfigTestForm = useCallback(
+    () =>
+      launchWorkspace('provider-config-test-form', {
+        workspaceTitle: t('testConfig', 'Test {{ configName }}', {
+          configName: config.name,
+        }),
+        ...state,
+      }),
+    [state, t, config.name],
+  );
+
+  const removeConfigPrompt = useCallback(() => {
+    const close = showModal('remove-config-prompt-modal', {
+      configName: config.name,
+      closeDeleteModal: () => {
+        close();
+      },
+    });
+  }, [config]);
+
+  const makeDefaultConfig = useCallback(async () => {
+    await setAsDefaultConfig({ configs: providerConfigurations, defaultConfigName: config.name })
+      .then(() => {
+        mutateConfigs();
+        showSnackbar({ kind: 'success', title: t('defaultConfigUpdated', 'Default config updated') });
+      })
+      .catch(() =>
+        showSnackbar({
+          kind: 'error',
+          title: t('errorMakingDefault', 'Failed to update default config'),
+        }),
+      );
+  }, [config.name, mutateConfigs, providerConfigurations, t]);
+
+  return (
+    <Layer className={styles.layer}>
+      <OverflowMenu aria-label="Test/edit/remove configuration" size={isTablet ? 'lg' : 'sm'} flipped align="left">
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="testConfiguration"
+          onClick={launchConfigTestForm}
+          itemText={t('test', 'Test')}
+        />
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="editConfiguration"
+          itemText={t('edit', 'Edit')}
+          onClick={launchEditConfigForm}
+          hasDivider
+        />
+        {!isDefaultConfig && (
+          <OverflowMenuItem
+            className={styles.menuItem}
+            id="setAsDefault"
+            itemText={t('setDefault', 'Set as default')}
+            onClick={makeDefaultConfig}
+            hasDivider
+          />
+        )}
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="removeConfiguration"
+          itemText={t('remove', 'Remove')}
+          onClick={removeConfigPrompt}
+          hasDivider
+          isDelete
+        />
+      </OverflowMenu>
+    </Layer>
+  );
+};

package/src/providers/providers-overview/providers-action-menu.scss

@@ -0,0 +1,11 @@
+.layer {
+  height: 100%;
+
+  :global(.cds--overflow-menu) {
+    min-height: unset;
+  }
+}
+
+.menuItem {
+  max-width: none;
+}

package/src/providers/providers-overview/providers-overview.component.tsx

@@ -0,0 +1,306 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CardHeader, ErrorState } from '@openmrs/esm-patient-common-lib';
+import { useProviderConfigurations } from '../../hooks/useProviderConfigurations';
+import { useConfigurationsSorting } from '../utils';
+import {
+  Button,
+  InlineLoading,
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  TableContainer,
+  Table,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableBody,
+  TableCell,
+  TableExpandHeader,
+  Tile,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import {
+  usePagination,
+  useLayoutType,
+  isDesktop as isDesktopLayout,
+  showModal,
+  launchWorkspace,
+} from '@openmrs/esm-framework';
+import { ConfigurationsActionMenu } from './providers-action-menu.component';
+import { TableExpandRow } from '@carbon/react';
+import { TableExpandedRow } from '@carbon/react';
+import { EmptyState } from '../empty-state/empty-state.component';
+import { Tag } from '@carbon/react';
+import styles from './providers-overview.scss';
+import classNames from 'classnames';
+
+const ProvidersListTable = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isDesktop = isDesktopLayout(layout);
+  const isTablet = !isDesktop;
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [pageSize, setPageSize] = useState();
+  const { providerConfigurations, isLoadingConfigs, error, isValidatingConfigs } = useProviderConfigurations();
+
+  const launchAddProviderConfigForm = useCallback(() => launchWorkspace('add-provider-config-form'), []);
+
+  const headers = useMemo(
+    () => [
+      {
+        key: 'configuration',
+        header: t('configuration', 'Configuration'),
+        isSortable: true,
+        sortFunc: (valueA, valueB) => valueA.display?.localeCompare(valueB.display),
+      },
+      {
+        key: 'template',
+        header: t('template', 'Template'),
+        isSortable: true,
+        sortFunc: (valueA, valueB) => valueA.display?.localeCompare(valueB.display),
+      },
+    ],
+    [t],
+  );
+
+  const tableRows = useMemo(
+    () =>
+      providerConfigurations.map((config, index) => ({
+        ...config,
+        id: `config-${index}`,
+        configuration: config.name,
+        template: config.templateName,
+      })),
+    [providerConfigurations],
+  );
+
+  const { sortedRows, sortRow } = useConfigurationsSorting(headers, tableRows);
+
+  const { results: paginatedConfigs, paginated, goTo, currentPage } = usePagination(sortedRows, pageSize);
+
+  if (isLoadingConfigs) return <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />;
+  if (error) return <ErrorState error={error} headerTitle={t('configurations', 'Configurations')} />;
+
+  if (providerConfigurations.length > 0) {
+    return (
+      <div className={styles.widgetCard}>
+        <CardHeader title={t('configurations', 'Configurations')}>
+          <span>{isValidatingConfigs ? <InlineLoading /> : null}</span>
+          <div className={styles.rightMostFlexContainer}>
+            <div className={styles.divider}>|</div>
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Add size={16} {...props} />}
+              iconDescription="Add configurations"
+              onClick={launchAddProviderConfigForm}
+            >
+              {t('add', 'Add')}
+            </Button>
+          </div>
+        </CardHeader>
+        <DataTable
+          aria-label="provider-configutations overview"
+          rows={paginatedConfigs}
+          headers={headers}
+          isSortable
+          size={isTablet ? 'lg' : 'sm'}
+          useZebraStyles
+          overflowMenuOnHover={isDesktop}
+          sortRow={sortRow}
+        >
+          {({
+            rows,
+            headers,
+            getHeaderProps,
+            getTableProps,
+            getRowProps,
+            getExpandedRowProps,
+            getExpandHeaderProps,
+          }) => (
+            <>
+              <TableContainer className={styles.tableContainer}>
+                <Table {...getTableProps()}>
+                  <TableHead>
+                    <TableRow>
+                      <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                      {headers.map((header, i) => (
+                        <TableHeader className={styles.tableHeader} key={i} {...getHeaderProps({ header })}>
+                          {header.header}
+                        </TableHeader>
+                      ))}
+                      <TableExpandHeader />
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => {
+                      return (
+                        <React.Fragment key={row.id}>
+                          <TableExpandRow {...getRowProps({ row })}>
+                            {row.cells.map((cell, index) => {
+                              return index === 0 ? (
+                                <>
+                                  <TableCell key={cell.id}>
+                                    {cell.value}
+                                    {(() => {
+                                      const config = tableRows.find((r) => `${r.id}:configuration` === row.cells[0].id);
+
+                                      if (config.isDefaultConfig) {
+                                        return (
+                                          <Tag type="green" className={classNames(styles.tag, 'cds--label')}>
+                                            {t('default', 'Default')}
+                                          </Tag>
+                                        );
+                                      }
+                                    })()}
+                                  </TableCell>
+                                </>
+                              ) : (
+                                <>
+                                  <TableCell key={cell.id}>{cell.value}</TableCell>
+                                </>
+                              );
+                            })}
+                            <TableCell className="cds--table-column-menu">
+                              <ConfigurationsActionMenu
+                                config={tableRows.find((r) => `${r.id}:configuration` === row.cells[0].id)}
+                              />
+                            </TableCell>
+                          </TableExpandRow>
+                          {row.isExpanded ? (
+                            <TableExpandedRow
+                              {...getExpandedRowProps({ row })}
+                              className={styles.expandedRow}
+                              colSpan={headers.length + 2}
+                            >
+                              <ConfigDetails
+                                config={tableRows.find((r) => `${r.id}:configuration` === row.cells[0].id)}
+                              />
+                            </TableExpandedRow>
+                          ) : (
+                            <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                          )}
+                        </React.Fragment>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+
+              {rows.length === 0 ? (
+                <div className={styles.tileContainer}>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noConfigurationsToDisplay', 'No configurations to display')}</p>
+                    </div>
+                  </Tile>
+                </div>
+              ) : null}
+            </>
+          )}
+        </DataTable>
+        {paginated && (
+          <Pagination
+            forwardText="Next page"
+            backwardText="Previous page"
+            page={currentPage}
+            pageSize={pageSize}
+            pageSizes={pageSizes}
+            totalItems={paginatedConfigs?.length}
+            className={styles.pagination}
+            size={isDesktop ? 'sm' : 'lg'}
+            onChange={({ pageSize: newPageSize, page: newPage }) => {
+              if (newPageSize !== pageSize) {
+                setPageSize(newPageSize);
+              }
+              if (newPage !== currentPage) {
+                goTo(newPage);
+              }
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <EmptyState
+      displayText={t('configurations', 'Configurations')}
+      headerTitle={t('configurations', 'Configurations')}
+      launchForm={launchAddProviderConfigForm}
+    />
+  );
+};
+
+export default ProvidersListTable;
+
+function ConfigDetails({ config }) {
+  const { t } = useTranslation();
+  const state = useMemo(() => ({ providerName: config.name, ...config }), [config]);
+
+  const launchEditProviderConfigForm = useCallback(() => {
+    launchWorkspace('add-provider-config-form', {
+      workspaceTitle: t('editConfig', 'Edit {{ configName }}', {
+        configName: config.name,
+      }),
+      ...state,
+    });
+  }, [config.name, state, t]);
+
+  const launchConfigTestForm = useCallback(
+    () =>
+      launchWorkspace('provider-config-test-form', {
+        workspaceTitle: t('testConfig', 'Test {{ configName }}', {
+          configName: config.name,
+        }),
+        ...state,
+      }),
+    [config.name, state, t],
+  );
+
+  const removeConfigPrompt = useCallback(() => {
+    const close = showModal('remove-config-prompt-modal', {
+      configName: config.name,
+      closeDeleteModal: () => {
+        close();
+      },
+    });
+  }, [config]);
+
+  return (
+    <div>
+      <div className={styles.configInfo}>
+        <p className={styles.gridTitle}>{t('configDetails', 'Configuration details')} </p>
+        <div className={styles.labelContainer}>
+          <p className={styles.labelBold}>{t('providerName', 'Provider name')}: </p>
+          <p className={styles.label}>{config.name}</p>
+        </div>
+        <div className={styles.labelContainer}>
+          <p className={styles.labelBold}>{t('templateName', 'Template name')}: </p>
+          <p className={styles.label}>{config.template}</p>
+        </div>
+        <div className={styles.labelContainer}>
+          <p className={styles.labelBold}>{t('maxRetries', 'Maximum retries')}: </p>
+          <p className={styles.label}>{config.maxRetries}</p>
+        </div>
+        <div className={styles.labelContainer}>
+          <p className={styles.labelBold}>{t('splitHeader', 'Header split text')}: </p>
+          <p className={styles.label}>{config.splitHeader}</p>
+        </div>
+        <div className={styles.labelContainer}>
+          <p className={styles.labelBold}>{t('splitFooter', 'Footer split text')}: </p>
+          <p className={styles.label}>{config.splitFooter}</p>
+        </div>
+      </div>
+      <Button kind="primary" onClick={launchConfigTestForm}>
+        {t('test', 'Test')}
+      </Button>
+      <Button kind="secondary" onClick={launchEditProviderConfigForm}>
+        {t('edit', 'Edit')}
+      </Button>
+      <Button kind="danger" onClick={removeConfigPrompt}>
+        {t('remove', 'Remove')}
+      </Button>
+    </div>
+  );
+}