Add alert for org. delete.

src/components/DataListToolbar/DataListToolbar.jsx

@@ -24,29 +24,31 @@ import ExpandCollapse from '../ExpandCollapse';
 import Search from '../Search';
 import Sort from '../Sort';
 import VerticalSeparator from '../VerticalSeparator';
+// import SelectedList from '../SelectedList';
 
 class DataListToolbar extends React.Component {
   render () {
     const {
+      addUrl,
       columns,
-      isAllSelected,
+      disableTrashCanIcon,
       onSelectAll,
       sortedColumnKey,
       sortOrder,
-      addUrl,
       showDelete,
       showSelectAll,
+      isAllSelected,
       isLookup,
       isCompact,
       onSort,
       onSearch,
       onCompact,
       onExpand,
-      add
+      add,
+      onOpenDeleteModal
     } = this.props;
 
     const showExpandCollapse = (onCompact && onExpand);
-
     return (
       <I18n>
         {({ i18n }) => (
@@ -115,10 +117,13 @@ class DataListToolbar extends React.Component {
                     position="top"
                   >
                     <Button
+                      className="awx-ToolBarBtn"
                       variant="plain"
                       aria-label={i18n._(t`Delete`)}
+                      onClick={onOpenDeleteModal}
+                      isDisabled={disableTrashCanIcon}
                     >
-                      <TrashAltIcon />
+                      <TrashAltIcon className="awx-ToolBarTrashCanIcon" />
                     </Button>
                   </Tooltip>
                 )}

src/components/DataListToolbar/styles.scss

@@ -80,3 +80,16 @@
 .awx-toolbar .pf-l-toolbar__item .pf-c-button.pf-m-plain {
   font-size: 18px;
 }
+.pf-c-button--disabled--BackgroundColor{
+  background-color: #b7b7b7;
+}
+.awx-ToolBarBtn{
+  width: 30px;
+}
+.awx-ToolBarBtn:hover{
+  .awx-ToolBarTrashCanIcon {
+    color:white;
+  }
+  background-color:#d9534f;
+}
+