Merge pull request #9318 from mabashian/9223-notif-toast

Adds toast to notification template list whenever test notification finishes

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

CHANGELOG.md

@@ -16,6 +16,7 @@ This is a list of high-level changes for each release of AWX. A full list of com
 - Added ability to relaunch against failed hosts: https://github.com/ansible/awx/pull/9225
 - Added pending workflow approval count to the application header https://github.com/ansible/awx/pull/9334
 - Added user interface for management jobs: https://github.com/ansible/awx/pull/9224
+- Added toast message to show notification template test result to notification templates list https://github.com/ansible/awx/pull/9318
 
 # 17.1.0 (March 9th, 2021)
 - Addressed a security issue in AWX (CVE-2021-20253)

awx/ui_next/src/components/CopyButton/CopyButton.jsx

@@ -17,6 +17,7 @@ function CopyButton({
   onCopyFinish,
   errorMessage,
   i18n,
+  ouiaId,
 }) {
   const { isLoading, error: copyError, request: copyItemToAPI } = useRequest(
     copyItem
@@ -35,6 +36,7 @@ function CopyButton({
     <>
       <Button
         id={id}
+        ouiaId={ouiaId}
         isDisabled={isLoading || isDisabled}
         aria-label={i18n._(t`Copy`)}
         variant="plain"
@@ -62,10 +64,12 @@ CopyButton.propTypes = {
   onCopyFinish: PropTypes.func.isRequired,
   errorMessage: PropTypes.string.isRequired,
   isDisabled: PropTypes.bool,
+  ouiaId: PropTypes.string,
 };
 
 CopyButton.defaultProps = {
   isDisabled: false,
+  ouiaId: null,
 };
 
 export default withI18n()(CopyButton);

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx

@@ -1,8 +1,14 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useLocation, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Card, PageSection } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertActionCloseButton,
+  AlertGroup,
+  Card,
+  PageSection,
+} from '@patternfly/react-core';
 import { NotificationTemplatesAPI } from '../../../api';
 import PaginatedTable, {
   HeaderRow,
@@ -29,6 +35,7 @@ const QS_CONFIG = getQSConfig('notification-templates', {
 function NotificationTemplatesList({ i18n }) {
   const location = useLocation();
   const match = useRouteMatch();
+  const [testToasts, setTestToasts] = useState([]);
 
   const addUrl = `${match.url}/add`;
 
@@ -102,6 +109,16 @@ function NotificationTemplatesList({ i18n }) {
     setSelected([]);
   };
 
+  const addTestToast = useCallback(notification => {
+    setTestToasts(oldToasts => [...oldToasts, notification]);
+  }, []);
+
+  const removeTestToast = notificationId => {
+    setTestToasts(oldToasts =>
+      oldToasts.filter(toast => toast.id !== notificationId)
+    );
+  };
+
   const canAdd = actions && actions.POST;
 
   return (
@@ -185,6 +202,7 @@ function NotificationTemplatesList({ i18n }) {
             }
             renderRow={(template, index) => (
               <NotificationTemplateListItem
+                onAddToast={addTestToast}
                 key={template.id}
                 fetchTemplates={fetchTemplates}
                 template={template}
@@ -209,6 +227,39 @@ function NotificationTemplatesList({ i18n }) {
         {i18n._(t`Failed to delete one or more notification template.`)}
         <ErrorDetail error={deletionError} />
       </AlertModal>
+      <AlertGroup ouiaId="notification-template-alerts" isToast>
+        {testToasts
+          .filter(notification => notification.status !== 'pending')
+          .map(notification => (
+            <Alert
+              actionClose={
+                <AlertActionCloseButton
+                  onClose={() => removeTestToast(notification.id)}
+                />
+              }
+              onTimeout={() => removeTestToast(notification.id)}
+              timeout={notification.status !== 'failed'}
+              title={notification.summary_fields.notification_template.name}
+              variant={notification.status === 'failed' ? 'danger' : 'success'}
+              key={`notification-template-alert-${notification.id}`}
+              ouiaId={`notification-template-alert-${notification.id}`}
+            >
+              <>
+                {notification.status === 'successful' && (
+                  <p>{i18n._(t`Notification sent successfully`)}</p>
+                )}
+                {notification.status === 'failed' &&
+                  notification?.error === 'timed out' && (
+                    <p>{i18n._(t`Notification timed out`)}</p>
+                  )}
+                {notification.status === 'failed' &&
+                  notification?.error !== 'timed out' && (
+                    <p>{notification.error}</p>
+                  )}
+              </>
+            </Alert>
+          ))}
+      </AlertGroup>
     </>
   );
 }

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.test.jsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { OrganizationsAPI } from '../../../api';
+import {
+  NotificationsAPI,
+  NotificationTemplatesAPI,
+  OrganizationsAPI,
+} from '../../../api';
 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import NotificationTemplateList from './NotificationTemplateList';
 
 jest.mock('../../../api');
 
+jest.useFakeTimers();
+
 const mockTemplates = {
   data: {
     count: 3,
@@ -197,6 +203,43 @@ describe('<NotificationTemplateList />', () => {
     expect(wrapper.find('ToolbarAddButton').length).toBe(1);
   });
 
+  test('should show toast after test resolves', async () => {
+    NotificationTemplatesAPI.test.mockResolvedValueOnce({
+      data: {
+        notification: 9182,
+      },
+    });
+    NotificationsAPI.readDetail.mockResolvedValueOnce({
+      data: {
+        id: 9182,
+        status: 'failed',
+        error: 'There was an error with the notification',
+        summary_fields: {
+          notification_template: {
+            name: 'foobar',
+          },
+        },
+      },
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(<NotificationTemplateList />);
+    });
+    wrapper.update();
+    expect(wrapper.find('Alert').length).toBe(0);
+    await act(async () => {
+      wrapper
+        .find('button[aria-label="Test Notification"]')
+        .at(0)
+        .simulate('click');
+    });
+    wrapper.update();
+    await act(async () => {
+      jest.runAllTimers();
+    });
+    wrapper.update();
+    expect(wrapper.find('Alert').length).toBe(1);
+  });
+
   test('should hide add button (rbac)', async () => {
     OrganizationsAPI.readOptions.mockResolvedValue({
       data: {

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateListItem.jsx

@@ -11,13 +11,16 @@ import { timeOfDay } from '../../../util/dates';
 import { NotificationTemplatesAPI, NotificationsAPI } from '../../../api';
 import StatusLabel from '../../../components/StatusLabel';
 import CopyButton from '../../../components/CopyButton';
-import useRequest from '../../../util/useRequest';
+import AlertModal from '../../../components/AlertModal';
+import ErrorDetail from '../../../components/ErrorDetail';
+import useRequest, { useDismissableError } from '../../../util/useRequest';
 import { NOTIFICATION_TYPES } from '../constants';
 
 const NUM_RETRIES = 25;
 const RETRY_TIMEOUT = 5000;
 
 function NotificationTemplateListItem({
+  onAddToast,
   template,
   detailUrl,
   fetchTemplates,
@@ -66,6 +69,7 @@ function NotificationTemplateListItem({
           notificationId
         );
         if (notification.status !== 'pending') {
+          onAddToast(notification);
           setStatus(notification.status);
           return;
         }
@@ -76,9 +80,11 @@ function NotificationTemplateListItem({
       }
 
       setTimeout(pollForStatusChange, RETRY_TIMEOUT);
-    }, [template.id])
+    }, [template.id, onAddToast])
   );
 
+  const { error: sendTestError, dismissError } = useDismissableError(error);
+
   useEffect(() => {
     if (error) {
       setStatus('error');
@@ -88,6 +94,7 @@ function NotificationTemplateListItem({
   const labelId = `template-name-${template.id}`;
 
   return (
+    <>
       <Tr id={`notification-template-row-${template.id}`}>
         <Td
           select={{
@@ -112,6 +119,7 @@ function NotificationTemplateListItem({
         <ActionsTd dataLabel={i18n._(t`Actions`)}>
           <ActionItem visible tooltip={i18n._(t`Test notification`)}>
             <Button
+              ouiaId={`notification-test-button-${template.id}`}
               aria-label={i18n._(t`Test Notification`)}
               variant="plain"
               onClick={sendTestNotification}
@@ -125,6 +133,7 @@ function NotificationTemplateListItem({
             tooltip={i18n._(t`Edit`)}
           >
             <Button
+              ouiaId={`notification-edit-button-${template.id}`}
               aria-label={i18n._(t`Edit Notification Template`)}
               variant="plain"
               component={Link}
@@ -138,6 +147,7 @@ function NotificationTemplateListItem({
             tooltip={i18n._(t`Copy Notification Template`)}
           >
             <CopyButton
+              ouiaId={`notification-copy-button-${template.id}`}
               copyItem={copyTemplate}
               isCopyDisabled={isCopyDisabled}
               onCopyStart={handleCopyStart}
@@ -147,6 +157,18 @@ function NotificationTemplateListItem({
           </ActionItem>
         </ActionsTd>
       </Tr>
+      {sendTestError && (
+        <AlertModal
+          isOpen
+          variant="error"
+          title={i18n._(t`Error!`)}
+          onClose={dismissError}
+        >
+          {i18n._(t`Failed to send test notification.`)}
+          <ErrorDetail error={sendTestError} />
+        </AlertModal>
+      )}
+    </>
   );
 }