Merge pull request #4250 from kialam/fix-254-delete-last-elem-list-page

Fix 254 delete last elem list page

Reviewed-by: https://github.com/softwarefactory-project-zuul[bot]

awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -38,6 +38,14 @@ class PaginatedDataList extends React.Component {
     this.handleSort = this.handleSort.bind(this);
   }
 
+  componentDidUpdate(prevProps) {
+    const { itemCount: prevItemCount } = prevProps;
+    const { itemCount } = this.props;
+    if (prevItemCount !== itemCount) {
+      this.getCurrPage(itemCount);
+    }
+  }
+
   getSortOrder() {
     const { qsConfig, location } = this.props;
     const queryParams = parseNamespacedQueryString(qsConfig, location.search);
@@ -47,6 +55,21 @@ class PaginatedDataList extends React.Component {
     return [queryParams.order_by, 'ascending'];
   }
 
+  getCurrPage(itemCount) {
+    if (itemCount < 0) {
+      return;
+    }
+    const { qsConfig, location } = this.props;
+    const { page_size, page: currPage } = parseNamespacedQueryString(
+      qsConfig,
+      location.search
+    );
+    const lastPage = Math.ceil(itemCount / page_size);
+    if (currPage > lastPage) {
+      this.pushHistoryState({ page: lastPage || 1 });
+    }
+  }
+
   handleSetPage(event, pageNumber) {
     this.pushHistoryState({ page: pageNumber });
   }

awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.test.jsx

@@ -10,6 +10,8 @@ const mockData = [
   { id: 3, name: 'three', url: '/org/team/3' },
   { id: 4, name: 'four', url: '/org/team/4' },
   { id: 5, name: 'five', url: '/org/team/5' },
+  { id: 6, name: 'six', url: '/org/team/6' },
+  { id: 7, name: 'seven', url: '/org/team/7' },
 ];
 
 const qsConfig = {
@@ -123,4 +125,37 @@ describe('<PaginatedDataList />', () => {
     pagination.prop('onPerPageSelect')(null, 25);
     expect(history.location.search).toEqual('?item.page_size=25');
   });
+  test('should navigate to correct current page when list items change', () => {
+    const customQSConfig = {
+      namespace: 'foo',
+      defaultParams: { page: 7, page_size: 1 }, // show only 1 item per page
+      integerFields: [],
+    };
+    const testParams = [5, 25, 0, -1]; // number of items
+    const expected = [5, 5, 1, 1]; // expected current page
+    const history = createMemoryHistory({
+      initialEntries: ['/organizations/1/teams'],
+    });
+    const wrapper = mountWithContexts(
+      <PaginatedDataList
+        items={mockData}
+        itemCount={7}
+        queryParams={{
+          page: 1,
+          page_size: 5,
+          order_by: 'name',
+        }}
+        qsConfig={customQSConfig}
+      />,
+      { context: { router: { history } } }
+    );
+    testParams.forEach((param, i) => {
+      wrapper.setProps({ itemCount: param });
+      expect(history.location.search).toEqual(
+        `?${customQSConfig.namespace}.page=${expected[i]}`
+      );
+      wrapper.update();
+    });
+    wrapper.unmount();
+  });
 });

awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx

@@ -76,11 +76,12 @@ class OrganizationsList extends Component {
   }
 
   async handleOrgDelete() {
-    const { selected } = this.state;
+    const { selected, itemCount } = this.state;
 
     this.setState({ hasContentLoading: true });
     try {
       await Promise.all(selected.map(org => OrganizationsAPI.destroy(org.id)));
+      this.setState({ itemCount: itemCount - selected.length });
     } catch (err) {
       this.setState({ deletionError: err });
     } finally {

awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx

@@ -78,7 +78,7 @@ class TemplatesList extends Component {
   }
 
   async handleTemplateDelete() {
-    const { selected } = this.state;
+    const { selected, itemCount } = this.state;
 
     this.setState({ hasContentLoading: true });
     try {
@@ -93,6 +93,7 @@ class TemplatesList extends Component {
           return deletePromise;
         })
       );
+      this.setState({ itemCount: itemCount - selected.length });
     } catch (err) {
       this.setState({ deletionError: err });
     } finally {