test toast

spin-observatory-plugin-deck/src/components/pipelines/ExecutionsTable.tsx

@@ -12,6 +12,7 @@ import {
 import { makeStyles } from '@material-ui/core';
 import type { ChangeEvent } from 'react';
 import React, { useState } from 'react';
+import { toast, ToastContainer } from 'react-toastify';
 
 import type { IExecution } from '@spinnaker/core';
 
@@ -21,6 +22,8 @@ import { TableHeaders } from './TableHeaders';
 import { ActionButtonsContainer, PauseResumeButton, RetriggerButton } from '../actions';
 import { DEFAULT_ROWS_PER_PAGE } from './constants';
 
+import 'react-toastify/dist/ReactToastify.css';
+
 const useStyles = makeStyles({
   tableContainer: { borderRadius: 'inherit' },
   pagination: { fontSize: '1rem', margin: 'auto' },
@@ -71,7 +74,11 @@ export const ExecutionsTable = ({ executions, parameters, refreshExecutions }: I
   };
 
   const isSelected = (name: string) => selectedExecutionIds.indexOf(name) !== -1;
-
+  const showToastMessage = () => {
+    toast.success('Success Notification !', {
+      position: toast.POSITION.TOP_RIGHT,
+    });
+  };
   return (
     <TableContainer component={Paper} classes={{ root: styles.tableContainer }}>
       <Table stickyHeader>
@@ -128,6 +135,10 @@ export const ExecutionsTable = ({ executions, parameters, refreshExecutions }: I
           </TableRow>
         </TableFooter>
       </Table>
+      <div>
+        <button onClick={showToastMessage}>Notify</button>
+        <ToastContainer />
+      </div>
     </TableContainer>
   );
 };