add delete button to InventoryDetail

awx/ui_next/src/components/Card/CardActionsRow.jsx

@@ -7,8 +7,8 @@ const CardActionsWrapper = styled.div`
   justify-content: flex-end;
   margin-top: 20px;
 
-  & > :not(:first-child) {
+  & > .pf-c-card__actions > :not(:first-child) {
-    margin-left: 20px;
+    margin-left: 0.5rem;
   }
 `;
 

awx/ui_next/src/components/DeleteButton/DeleteButton.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button } from '@patternfly/react-core';
+import AlertModal from '@components/AlertModal';
+import { CardActionsRow } from '@components/Card';
+
+function DeleteButton({ onConfirm, modalTitle, name, i18n }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        variant="danger"
+        aria-label={i18n._(t`Delete`)}
+        onClick={() => setIsOpen(true)}
+      >
+        {i18n._(t`Delete`)}
+      </Button>
+      <AlertModal
+        isOpen={isOpen}
+        title={modalTitle}
+        variant="danger"
+        onClose={() => setIsOpen(false)}
+      >
+        {i18n._(t`Are you sure you want to delete:`)}
+        <br />
+        <strong>{name}</strong>
+        <CardActionsRow>
+          <Button
+            variant="secondary"
+            aria-label={i18n._(t`Cancel`)}
+            onClick={() => setIsOpen(false)}
+          >
+            {i18n._(t`Cancel`)}
+          </Button>
+          <Button
+            variant="danger"
+            aria-label={i18n._(t`Delete`)}
+            onClick={onConfirm}
+          >
+            {i18n._(t`Delete`)}
+          </Button>
+        </CardActionsRow>
+      </AlertModal>
+    </>
+  );
+}
+
+export default withI18n()(DeleteButton);

awx/ui_next/src/components/DeleteButton/index.js

@@ -0,0 +1 @@
+export { default } from './DeleteButton';

awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Button } from '@patternfly/react-core';
@@ -7,6 +7,7 @@ import { CardBody, CardActionsRow } from '@components/Card';
 import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
 import { ChipGroup, Chip } from '@components/Chip';
 import { VariablesDetail } from '@components/CodeMirrorInput';
+import DeleteButton from '@components/DeleteButton';
 import ContentError from '@components/ContentError';
 import ContentLoading from '@components/ContentLoading';
 import { InventoriesAPI } from '@api';
@@ -16,6 +17,7 @@ function InventoryDetail({ inventory, i18n }) {
   const [instanceGroups, setInstanceGroups] = useState([]);
   const [hasContentLoading, setHasContentLoading] = useState(true);
   const [contentError, setContentError] = useState(null);
+  const history = useHistory();
 
   useEffect(() => {
     (async () => {
@@ -31,7 +33,15 @@ function InventoryDetail({ inventory, i18n }) {
     })();
   }, [inventory.id]);
 
-  const { organization } = inventory.summary_fields;
+  const deleteInventory = async () => {
+    await InventoriesAPI.destroy(inventory.id);
+    history.push(`/inventories`);
+  };
+
+  const {
+    organization,
+    user_capabilities: userCapabilities,
+  } = inventory.summary_fields;
 
   if (hasContentLoading) {
     return <ContentLoading />;
@@ -85,16 +95,25 @@ function InventoryDetail({ inventory, i18n }) {
           user={inventory.summary_fields.modified_by}
         />
       </DetailList>
-      {inventory.summary_fields.user_capabilities.edit && (
+      <CardActionsRow>
-        <CardActionsRow>
+        {userCapabilities.edit && (
           <Button
             component={Link}
             to={`/inventories/inventory/${inventory.id}/edit`}
           >
             {i18n._(t`Edit`)}
           </Button>
-        </CardActionsRow>
+        )}
-      )}
+        {userCapabilities.delete && (
+          <DeleteButton
+            name={inventory.name}
+            modalTitle={i18n._(t`Delete Inventory`)}
+            onConfirm={deleteInventory}
+          >
+            {i18n._(t`Delete`)}
+          </DeleteButton>
+        )}
+      </CardActionsRow>
     </CardBody>
   );
 }