[O2B-1481] Env overview should correctly resize the table

lib/public/views/Environments/EnvironmentModel.js

@@ -40,7 +40,9 @@ export class EnvironmentModel extends Observable {
      * @return {void} resolves once the loading is complete
      */
     loadOverview() {
-        this._overviewModel.fetchAllEnvs();
+        if (!this._overviewModel.pagination.isInfiniteScrollEnabled) {
+            this._overviewModel.load();
+        }
     }
 
     /**

lib/public/views/Environments/Overview/EnvironmentOverviewModel.js

@@ -11,76 +11,24 @@
  * or submit itself to any jurisdiction.
  */
 
-import { PaginationModel } from '../../../components/Pagination/PaginationModel.js';
-import { buildUrl, Observable, RemoteData } from '/js/src/index.js';
-import { getRemoteDataSlice } from '../../../utilities/fetch/getRemoteDataSlice.js';
+import { OverviewPageModel } from '../../../models/OverviewModel.js';
 
 /**
  * Environment overview page model
  */
-export class EnvironmentOverviewModel extends Observable {
+export class EnvironmentOverviewModel extends OverviewPageModel {
     /**
      * Constructor
      */
     constructor() {
         super();
-
-        this._pagination = new PaginationModel();
-        this._pagination.observe(() => this.fetchAllEnvs());
-        this._pagination.itemsPerPageSelector$.observe(() => this.notify());
-
-        this._environments = RemoteData.NotAsked();
-    }
-
-    /**
-     * Retrieve every relevant environment from the API
-     *
-     * @returns {undefined} Inject the data object with the response data
-     */
-    async fetchAllEnvs() {
-        const concatenateWith = this._pagination.currentPage > 1 && this._pagination.isInfiniteScrollEnabled
-            ? this._environments.payload || []
-            : [];
-
-        if (!this._pagination.isInfiniteScrollEnabled) {
-            this._environments = RemoteData.loading();
-            this.notify();
-        }
-
-        const params = {
-            'page[offset]': this._pagination.firstItemOffset,
-            'page[limit]': this._pagination.itemsPerPage,
-        };
-
-        const endpoint = buildUrl('/api/environments', params);
-
-        try {
-            const { items, totalCount } = await getRemoteDataSlice(endpoint);
-            this._environments = RemoteData.success([...concatenateWith, ...items]);
-            this._pagination.itemsCount = totalCount;
-        } catch (errors) {
-            this._environments = RemoteData.failure(errors);
-        }
-
-        this.notify();
     }
 
     /**
-     * Reset the model state to its default values
-     *
-     * @return {void}
-     */
-    reset() {
-        this._environments = RemoteData.notAsked();
-    }
-
-    /**
-     * Returns the pagination model
-     *
-     * @return {PaginationModel} the pagination model
+     * @inheritDoc
      */
-    get pagination() {
-        return this._pagination;
+    getRootEndpoint() {
+        return '/api/environments';
     }
 
     /**
@@ -89,6 +37,6 @@ export class EnvironmentOverviewModel extends Observable {
      * @return {RemoteData} the environments list
      */
     get environments() {
-        return this._environments;
+        return this.items;
     }
 }

lib/public/views/Environments/Overview/EnvironmentOverviewPage.js

@@ -25,5 +25,5 @@ export const EnvironmentOverviewPage = ({ envs }) => h(
     {
         onremove: () => envs.clearOverview(),
     },
-    environmentOverviewComponent(envs.overviewModel.pagination, envs.overviewModel.environments),
+    environmentOverviewComponent(envs.overviewModel),
 );

lib/public/views/Environments/Overview/environmentOverviewComponent.js

@@ -17,17 +17,18 @@ import { environmentsActiveColumns } from '../ActiveColumns/environmentsActiveCo
 import { estimateDisplayableRowsCount } from '../../../utilities/estimateDisplayableRowsCount.js';
 import { paginationComponent } from '../../../components/Pagination/paginationComponent.js';
 
-const TABLEROW_HEIGHT = 46;
+const TABLEROW_HEIGHT = 58;
 // Estimate of the navbar and pagination elements height total; Needs to be updated in case of changes;
-const PAGE_USED_HEIGHT = 215;
+const PAGE_USED_HEIGHT = 181;
 
 /**
  * The shows the environment table
- * @param {PaginationModel} pagination the environment's pagination model
- * @param {RemoteData} envs Environment objects.
+ * @param {OverviewModel} envsOverviewModel the environment's overview model
  * @returns {Object} Html page
  */
-export const environmentOverviewComponent = (pagination, envs) => {
+export const environmentOverviewComponent = (envsOverviewModel) => {
+    const { pagination, environments } = envsOverviewModel;
+
     pagination.provideDefaultItemsPerPage(estimateDisplayableRowsCount(
         TABLEROW_HEIGHT,
         PAGE_USED_HEIGHT,
@@ -36,7 +37,7 @@ export const environmentOverviewComponent = (pagination, envs) => {
     return [
         h('.w-100.flex-column', [
             h('.header-container.pv2'),
-            table(envs, environmentsActiveColumns, { classes: 'table-sm' }),
+            table(environments, environmentsActiveColumns, { classes: 'table-sm' }),
             paginationComponent(pagination),
         ]),
     ];

test/public/envs/overview.test.js

@@ -139,11 +139,11 @@ module.exports = () => {
     });
 
     it('can set how many environments are available per page', async () => {
-        // Expect the amount selector to currently be set to 10 (because of the defined page height)
+        // Expect the amount selector to currently be set to 9 (because of the defined page height)
         const amountSelectorId = '#amountSelector';
         const amountSelectorButton = await page.waitForSelector(`${amountSelectorId} button`);
         const amountSelectorButtonText = await page.evaluate((element) => element.innerText, amountSelectorButton);
-        expect(amountSelectorButtonText.trim().endsWith('10')).to.be.true;
+        expect(amountSelectorButtonText.trim().endsWith('9')).to.be.true;
 
         // Expect the dropdown options to be visible when it is selected
         await pressElement(page, `${amountSelectorId} button`);
@@ -234,4 +234,43 @@ module.exports = () => {
             innerText: 'Add log',
         });
     });
+
+    it('should skip load when infinite scroll is enabled but call it when disabled', async () => {
+        // Set up spy on the overviewModel.load method
+        await page.evaluate(() => {
+            const originalLoad = model.envs.overviewModel.load.bind(model.envs.overviewModel);
+            model.envs.overviewModel.load = function(...args) {
+                model.envs.overviewModel._loadCallCount++;
+                return originalLoad(...args);
+            };
+        });
+
+        await page.evaluate(() => {
+            model.envs.overviewModel._loadCallCount = 0;
+            model.envs.loadOverview();
+        });
+
+        // load() should have been called once
+        let loadCallCount = await page.evaluate(() => {
+            return model.envs.overviewModel._loadCallCount;
+        });
+        expect(loadCallCount).to.equal(1);
+
+        // Enable infinite scroll mode
+        await page.evaluate(() => {
+            model.envs.overviewModel.pagination.enableInfiniteMode();
+        });
+
+        // Reset counter and test again
+        await page.evaluate(() => {
+            model.envs.overviewModel._loadCallCount = 0;
+            model.envs.loadOverview();
+        });
+
+        // load() should not have been called
+        loadCallCount = await page.evaluate(() => {
+            return model.envs.overviewModel._loadCallCount;
+        });
+        expect(loadCallCount).to.equal(0);
+    });
 };