diff --git a/lib/public/views/Environments/EnvironmentModel.js b/lib/public/views/Environments/EnvironmentModel.js index 5be7103d85..c9f5cc12b8 100644 --- a/lib/public/views/Environments/EnvironmentModel.js +++ b/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(); + } } /** diff --git a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js b/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js index 2a33ef714f..f2f5c84bfe 100644 --- a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js +++ b/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; } } diff --git a/lib/public/views/Environments/Overview/EnvironmentOverviewPage.js b/lib/public/views/Environments/Overview/EnvironmentOverviewPage.js index ba3823baa8..864969def0 100644 --- a/lib/public/views/Environments/Overview/EnvironmentOverviewPage.js +++ b/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), ); diff --git a/lib/public/views/Environments/Overview/environmentOverviewComponent.js b/lib/public/views/Environments/Overview/environmentOverviewComponent.js index 5e6b21259d..85c55d4155 100644 --- a/lib/public/views/Environments/Overview/environmentOverviewComponent.js +++ b/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), ]), ]; diff --git a/test/public/envs/overview.test.js b/test/public/envs/overview.test.js index 1e25eb7b65..2a001e0960 100644 --- a/test/public/envs/overview.test.js +++ b/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); + }); };