Add alert for org. delete.

__tests__/components/DataListToolbar.test.jsx

@@ -236,7 +236,7 @@ describe('<DataListToolbar />', () => {
       <I18nProvider>
         <DataListToolbar
           isAllSelected={false}
-          selected={() => ([1, 2, 3, 4])}
+          selected={() => [1, 2, 3, 4]}
           sortedColumnKey="name"
           sortOrder="ascending"
           columns={columns}

__tests__/pages/Organizations/screens/OrganizationsList.test.jsx

@@ -4,6 +4,45 @@ import { MemoryRouter } from 'react-router-dom';
 import { I18nProvider } from '@lingui/react';
 import OrganizationsList from '../../../../src/pages/Organizations/screens/OrganizationsList';
 
+const mockAPIOrgsList = {
+  data: {
+    results: [{
+      name: 'Organization 0',
+      id: 1,
+      summary_fields: {
+        related_field_counts: {
+          teams: 3,
+          users: 4
+        }
+      },
+    },
+    {
+      name: 'Organization 1',
+      id: 1,
+      summary_fields: {
+        related_field_counts: {
+          teams: 2,
+          users: 5
+        }
+      },
+    },
+    {
+      name: 'Organization 2',
+      id: 2,
+      summary_fields: {
+        related_field_counts: {
+          teams: 5,
+          users: 6
+        }
+      },
+    }]
+  },
+  isModalOpen: false,
+  warningTitle: 'title',
+  warningMsg: 'message'
+
+};
+
 describe('<OrganizationsList />', () => {
   test('initially renders succesfully', () => {
     mount(
@@ -17,4 +56,81 @@ describe('<OrganizationsList />', () => {
       </MemoryRouter>
     );
   });
+
+  test.only('Modal closes when close button is clicked.', async (done) => {
+    const handleClearOrgsToDelete = jest.fn();
+    const wrapper = mount(
+      <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
+        <I18nProvider>
+          <OrganizationsList
+            match={{ path: '/organizations', url: '/organizations' }}
+            location={{ search: '', pathname: '/organizations' }}
+            getItems={({ data: { orgsToDelete: [{ name: 'Organization 1', id: 1 }] } })}
+            handleClearOrgsToDelete={handleClearOrgsToDelete()}
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    );
+    wrapper.find({ type: 'checkbox' }).simulate('click');
+    wrapper.find('button[aria-label="Delete"]').simulate('click');
+
+    wrapper.find('DataListToolbar').prop('onOpenDeleteModal')();
+    expect(wrapper.find('OrganizationsList').state().isModalOpen).toEqual(true);
+    setImmediate(() => {
+      wrapper.update();
+      wrapper.setState({
+        selected: mockAPIOrgsList.data.results.map((result) => result.id),
+        orgsToDelete: mockAPIOrgsList.data.results.map((result) => result),
+        isModalOpen: true,
+      });
+
+      wrapper.find('button[aria-label="Close"]').simulate('click');
+      expect(handleClearOrgsToDelete).toBeCalled();
+      const list = wrapper.find('OrganizationsList');
+      expect(list.state().isModalOpen).toBe(false);
+      done();
+    });
+  });
+
+  test.only('Orgs to delete length is 0 when all orgs are selected and Delete button is called.', async (done) => {
+    const handleClearOrgsToDelete = jest.fn();
+    const handleOrgDelete = jest.fn();
+    const fetchOrganizations = jest.fn();
+    const wrapper = mount(
+      <MemoryRouter initialEntries={['/organizations']} initialIndex={0}>
+        <I18nProvider>
+          <OrganizationsList
+            match={{ path: '/organizations', url: '/organizations' }}
+            location={{ search: '', pathname: '/organizations' }}
+            getItems={({ data: { orgsToDelete: [{ name: 'Organization 1', id: 1 }] } })}
+            handleClearOrgsToDelete={handleClearOrgsToDelete()}
+            handleOrgDelete={handleOrgDelete()}
+            fetchOrganizations={fetchOrganizations()}
+
+          />
+        </I18nProvider>
+      </MemoryRouter>
+    );
+    wrapper.find({ type: 'checkbox' }).simulate('click');
+    wrapper.find('button[aria-label="Delete"]').simulate('click');
+
+    wrapper.find('DataListToolbar').prop('onOpenDeleteModal')();
+    expect(wrapper.find('OrganizationsList').state().isModalOpen).toEqual(true);
+    setImmediate(() => {
+      wrapper.update();
+      wrapper.setState({
+        selected: mockAPIOrgsList.data.results.map((result) => result.id),
+        orgsToDelete: mockAPIOrgsList.data.results.map((result) => result),
+        isModalOpen: true,
+      });
+      wrapper.update();
+
+      const list = wrapper.find('OrganizationsList');
+      wrapper.find('button[aria-label="confirm-delete"]').simulate('click');
+      expect(list.state().orgsToDelete.length).toEqual(list.state().orgsDeleted.length);
+      expect(fetchOrganizations).toHaveBeenCalled();
+      expect(list.state().results).toHaveLength(0);
+      done();
+    });
+  });
 });

src/app.scss

@@ -282,6 +282,13 @@
 .orgListAlert-actionBtn{
   margin:0 10px;
 }
+.orgListDetete-progressBar{
+  padding-right: 32px;
+}
+.orgListDelete-progressBar-noShow{
+  display: none;
+  padding-right: 32px;
+}
 
 .awx-c-form-action-group {
   float: right;

src/pages/Organizations/components/OrganizationListItem.jsx

@@ -4,11 +4,7 @@ import { Trans, t } from '@lingui/macro';
 import {
   Badge,
   Checkbox,
-  Button,
 } from '@patternfly/react-core';
-import {
-  TrashAltIcon,
-} from '@patternfly/react-icons';
 import {
   Link
 } from 'react-router-dom';

src/pages/Organizations/screens/OrganizationsList.jsx

@@ -16,8 +16,11 @@ import {
   PageSection,
   PageSectionVariants,
   Title,
-  Button
+  Button,
+  Progress,
+  ProgressVariant
 } from '@patternfly/react-core';
+
 import { CubesIcon } from '@patternfly/react-icons';
 import DataListToolbar from '../../../components/DataListToolbar';
 import OrganizationListItem from '../components/OrganizationListItem';
@@ -57,7 +60,10 @@ class OrganizationsList extends Component {
       results: [],
       selected: [],
       isModalOpen: false,
-      orgsToDelete: []
+      orgsToDelete: [],
+      orgsDeleted: [],
+      deleteSuccess: false,
+
     };
 
     this.onSearch = this.onSearch.bind(this);
@@ -137,7 +143,12 @@ class OrganizationsList extends Component {
   }
 
   handleClearOrgsToDelete () {
-    this.setState(({ isModalOpen }) => ({ isModalOpen: !isModalOpen, orgsToDelete: [] }));
+    this.setState({
+      isModalOpen: false,
+      orgsDeleted: [],
+      deleteSuccess: false,
+      orgsToDelete: []
+    });
     this.onSelectAll();
   }
 
@@ -163,20 +174,24 @@ class OrganizationsList extends Component {
   }
 
   async handleOrgDelete (event) {
-    const { orgsToDelete } = this.state;
+    const { orgsToDelete, orgsDeleted } = this.state;
     const { api } = this.props;
-    try {
+    this.setState({ deleteStarted: true });
-      const deleteOrgsApiCalls = [];
 
-      orgsToDelete.forEach((org) => {
+    orgsToDelete.forEach(async (org) => {
-        deleteOrgsApiCalls.push(api.destroyOrganization(org.id));
+      try {
-      });
+        const res = await api.destroyOrganization(org.id);
-      await Promise.all(deleteOrgsApiCalls);
+        this.setState({
-    } finally {
+          orgsDeleted: orgsDeleted.concat(res)
-      this.handleClearOrgsToDelete();
+        });
-      const queryParams = this.getQueryParams();
+      } catch {
-      this.fetchOrganizations(queryParams);
+        this.setState({ deleteSuccess: false });
-    }
+      } finally {
+        this.setState({ deleteSuccess: true });
+        const queryParams = this.getQueryParams();
+        this.fetchOrganizations(queryParams);
+      }
+    });
     event.preventDefault();
   }
 
@@ -245,9 +260,12 @@ class OrganizationsList extends Component {
     const {
       count,
       error,
+      deleteSuccess,
+      deleteStarted,
       loading,
       noInitialResults,
       orgsToDelete,
+      orgsDeleted,
       page,
       pageCount,
       page_size,
@@ -266,7 +284,6 @@ class OrganizationsList extends Component {
           { isModalOpen && (
             <Modal
               className="orgListAlert"
-              width="50%"
               title={warningTitle}
               isOpen={isModalOpen}
               style={{ width: '1000px' }}
@@ -276,16 +293,30 @@ class OrganizationsList extends Component {
               {warningMsg}
               <br />
               {orgsToDelete.map((org) => (
-                <strong key={org.id}>
+                <span key={org.id}>
-                  {org.name}
+                  <strong>
+                    {org.name}
+                  </strong>
                   <br />
-                </strong>
+                </span>
               ))}
+              <div className={deleteStarted ? 'orgListDetete-progressBar' : 'orgListDelete-progressBar-noShow'}>
+                <Progress
+                  value={deleteSuccess ? 100 : 67}
+                  variant={deleteStarted ? ProgressVariant.success : ProgressVariant.danger}
+                />
+              </div>
               <br />
-              <span className="awx-c-form-action-group">
+              <div className="awx-c-form-action-group">
-                <Button className="orgListAlert-actionBtn" keys="cancel" variant="secondary" aria-label="cancel-delete" onClick={this.handleClearOrgsToDelete}>Cancel</Button>
+                {orgsDeleted.length
-                <Button className="orgListAlert-actionBtn" keys="cancel" variant="danger" aria-label="confirm-delete" onClick={this.handleOrgDelete}>Delete</Button>
+                  ? <Button className="orgListAlert-actionBtn" keys="cancel" variant="primary" aria-label="close-delete" onClick={this.handleClearOrgsToDelete}>Close</Button>
-              </span>
+                  : (
+                    <span>
+                      <Button className="orgListAlert-actionBtn" keys="cancel" variant="secondary" aria-label="cancel-delete" onClick={this.handleClearOrgsToDelete}>Cancel</Button>
+                      <Button className="orgListAlert-actionBtn" keys="cancel" variant="danger" aria-label="confirm-delete" onClick={this.handleOrgDelete}>Delete</Button>
+                    </span>
+                  )}
+              </div>
             </Modal>
           )}
           {noInitialResults && (