feat: delete collection [FC-0062] (#1333)

* feat: delete collection

* feat: update button status on delete

* test: add tests for collection delete

src/generic/processing-notification/ProccessingNotification.scss

@@ -1,25 +1,15 @@
-.processing-notification {
-  display: flex;
-  position: fixed;
-  bottom: -13rem;
-  transition: bottom 1s;
-  right: 1.25rem;
-  padding: .625rem 1.25rem;
-  z-index: $zindex-popover;
+.processing-notification-icon {
+  animation: rotate 1s linear infinite;
+}
 
-  &.is-show {
-    bottom: .625rem;
-  }
-
-  .processing-notification-icon {
-    margin-right: .625rem;
-    animation: rotate 1s linear infinite;
-  }
-
-  .processing-notification-title {
-    font-size: 1rem;
-    line-height: 1.5rem;
-    color: $white;
-    margin-bottom: 0;
+.processing-notification-hide-close-button {
+  .btn-icon {
+    display: none;
   }
 }
+
+.toast-container {
+  right: 1.25rem;
+  left: unset;
+  z-index: $zindex-popover;
+}

src/generic/processing-notification/ProcessingNotification.test.jsx

@@ -1,17 +1,37 @@
-import React from 'react';
-import { render } from '@testing-library/react';
 import { capitalize } from 'lodash';
+import userEvent from '@testing-library/user-event';
+import { initializeMocks, render, screen } from '../../testUtils';
 import { NOTIFICATION_MESSAGES } from '../../constants';
 import ProcessingNotification from '.';
 
+const mockUndo = jest.fn();
+
 const props = {
   title: NOTIFICATION_MESSAGES.saving,
   isShow: true,
+  action: {
+    label: 'Undo',
+    onClick: mockUndo,
+  },
 };
 
 describe('<ProcessingNotification />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
   it('renders successfully', () => {
-    const { getByText } = render(<ProcessingNotification {...props} />);
-    expect(getByText(capitalize(props.title))).toBeInTheDocument();
+    render(<ProcessingNotification {...props} close={() => {}} />);
+    expect(screen.getByText(capitalize(props.title))).toBeInTheDocument();
+    expect(screen.getByText('Undo')).toBeInTheDocument();
+    expect(screen.getByRole('alert').querySelector('.processing-notification-hide-close-button')).not.toBeInTheDocument();
+    userEvent.click(screen.getByText('Undo'));
+    expect(mockUndo).toBeCalled();
+  });
+
+  it('add hide-close-button class if no close action is passed', () => {
+    render(<ProcessingNotification {...props} />);
+    expect(screen.getByText(capitalize(props.title))).toBeInTheDocument();
+    expect(screen.getByRole('alert').querySelector('.processing-notification-hide-close-button')).toBeInTheDocument();
   });
 });

src/generic/processing-notification/index.jsx

@@ -1,28 +1,40 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { Badge, Icon } from '@openedx/paragon';
+import {
+  Icon, Toast,
+} from '@openedx/paragon';
 import { Settings as IconSettings } from '@openedx/paragon/icons';
 import { capitalize } from 'lodash';
+import classNames from 'classnames';
 
-const ProcessingNotification = ({ isShow, title }) => (
-  <Badge
-    className={classNames('processing-notification', {
-      'is-show': isShow,
-    })}
-    variant="secondary"
+const ProcessingNotification = ({
+  isShow, title, action, close,
+}) => (
+  <Toast
+    className={classNames({ 'processing-notification-hide-close-button': !close })}
+    show={isShow}
     aria-hidden={isShow}
+    action={action && { ...action }}
+    onClose={close || (() => {})}
   >
-    <Icon className="processing-notification-icon" src={IconSettings} />
-    <h2 className="processing-notification-title">
-      {capitalize(title)}
-    </h2>
-  </Badge>
+    <span className="d-flex align-items-center">
+      <Icon className="processing-notification-icon mb-0 mr-2" src={IconSettings} />
+      <span className="font-weight-bold h4 mb-0 text-white">{capitalize(title)}</span>
+    </span>
+  </Toast>
 );
 
+ProcessingNotification.defaultProps = {
+  close: null,
+};
+
 ProcessingNotification.propTypes = {
   isShow: PropTypes.bool.isRequired,
   title: PropTypes.string.isRequired,
+  action: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    onClick: PropTypes.func,
+  }),
+  close: PropTypes.func,
 };
 
 export default ProcessingNotification;