Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

suspense/ENG-5143 code splitting for widgets and fragments #1533

Merged
merged 3 commits into from
Sep 12, 2023
Merged

suspense/ENG-5143 code splitting for widgets and fragments #1533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d9fe44d
ENG-5143 use suspense for widgets and fragments
ichalagashvili Sep 4, 2023
2b412ff
ENG-5143 use suspense for widgets and fragments
ichalagashvili Sep 4, 2023
ad68064
ENG-5143 add back deleted new tests
ichalagashvili Sep 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 63 additions & 25 deletions src/ui/app/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,17 +96,7 @@ import LoginFormContainer from 'ui/login/LoginFormContainer';
import ToastsContainer from 'ui/app/ToastsContainer';
import DashboardPage from 'ui/dashboard/DashboardPage';
import PageTreePageContainer from 'ui/pages/list/PageTreePageContainer';
import ListWidgetPageContainer from 'ui/widgets/list/ListWidgetPageContainer';
import AddWidgetPage from 'ui/widgets/add/AddWidgetPage';
import NewUserWidgetPage from 'ui/widgets/newUserWidget/NewUserWidgetPage';
import EditWidgetPageContainer from 'ui/widgets/edit/EditWidgetPageContainer';
import WidgetConfigPageContainer from 'ui/widgets/config/WidgetConfigPageContainer';
import DetailWidgetPageContainer from 'ui/widgets/detail/DetailWidgetPageContainer';
import ListFragmentPage from 'ui/fragments/list/ListFragmentPage';
import AddFragmentPage from 'ui/fragments/add/AddFragmentPage';
import EditFragmentPageContainer from 'ui/fragments/edit/EditFragmentPageContainer';
import CloneFragmentPageContainer from 'ui/fragments/clone/CloneFragmentPageContainer';
import DetailFragmentPageContainer from 'ui/fragments/detail/DetailFragmentPageContainer';

import PagesAddPageContainer from 'ui/pages/add/PagesAddPageContainer';
import PagesEditPage from 'ui/pages/edit/PagesEditPage';
import PagesClonePage from 'ui/pages/clone/PagesClonePage';
Expand All @@ -129,8 +119,6 @@ import ListDataTypePage from 'ui/data-types/list/ListDataTypePage';
import AddDataTypesPage from 'ui/data-types/add/AddDataTypesPage';
import EditDataTypesPage from 'ui/data-types/edit/EditDataTypesPage';

import CloneWidgetPage from 'ui/widgets/clone/CloneWidgetPage';

import PageLayout from 'ui/app/PageLayout';
import RowSpinner from 'ui/pages/common/RowSpinner';
import entandoApps from 'entando-apps';
Expand All @@ -142,6 +130,18 @@ import InternalPage from 'ui/internal-page/InternalPage';
import { generateMfeRoutes } from 'helpers/urlUtils';
import NoAccessPageContainer from 'ui/app/NoAccessPageContainer';

const ListWidgetPageContainer = React.lazy(() => import('ui/widgets/list/ListWidgetPageContainer'));
const AddWidgetPage = React.lazy(() => import('ui/widgets/add/AddWidgetPage'));
const EditWidgetPageContainer = React.lazy(() => import('ui/widgets/edit/EditWidgetPageContainer'));
const NewUserWidgetPage = React.lazy(() => import('ui/widgets/newUserWidget/NewUserWidgetPage'));
const DetailWidgetPageContainer = React.lazy(() => import('ui/widgets/detail/DetailWidgetPageContainer'));
const WidgetConfigPageContainer = React.lazy(() => import('ui/widgets/config/WidgetConfigPageContainer'));
const CloneWidgetPage = React.lazy(() => import('ui/widgets/clone/CloneWidgetPage'));
const ListFragmentPage = React.lazy(() => import('ui/fragments/list/ListFragmentPage'));
const AddFragmentPage = React.lazy(() => import('ui/fragments/add/AddFragmentPage'));
const EditFragmentPageContainer = React.lazy(() => import('ui/fragments/edit/EditFragmentPageContainer'));
const CloneFragmentPageContainer = React.lazy(() => import('ui/fragments/clone/CloneFragmentPageContainer'));
const DetailFragmentPageContainer = React.lazy(() => import('ui/fragments/detail/DetailFragmentPageContainer'));
const PluginConfigPageContainer = React.lazy(() => import('ui/plugins/PluginConfigPageContainer'));
const PluginsPageContainer = React.lazy(() => import('ui/plugins/PluginsPageContainer'));
const EditUserProfilePage = React.lazy(() => import('ui/user-profile/edit/EditUserProfilePage'));
Expand Down Expand Up @@ -244,19 +244,57 @@ const RouteComponent = () => {
<Route path={ROUTE_PAGE_TEMPLATE_CLONE} component={PageTemplateClonePage} />
<Route path={ROUTE_PAGE_TEMPLATE_DETAIL} component={PageTemplateDetailPageContainer} />
{/* widgets */}
<Route exact path={ROUTE_WIDGET_LIST} component={ListWidgetPageContainer} />
<Route path={ROUTE_WIDGET_ADD} component={AddWidgetPage} />
<Route path={ROUTE_WIDGET_EDIT} component={EditWidgetPageContainer} />
<Route path={ROUTE_WIDGET_NEW_USERWIDGET} component={NewUserWidgetPage} />
<Route path={ROUTE_WIDGET_DETAIL} component={DetailWidgetPageContainer} />
<Route path={ROUTE_WIDGET_CONFIG} component={WidgetConfigPageContainer} />
<Route path={ROUTE_CLONE_WIDGET} component={CloneWidgetPage} />
<Route
exact
path={ROUTE_WIDGET_LIST}
render={() => renderWithSuspense(<ListWidgetPageContainer />)}
/>
<Route
path={ROUTE_WIDGET_ADD}
render={() => renderWithSuspense(<AddWidgetPage />)}
/>
<Route
path={ROUTE_WIDGET_EDIT}
render={() => renderWithSuspense(<EditWidgetPageContainer />)}
/>
<Route
path={ROUTE_WIDGET_NEW_USERWIDGET}
render={() => renderWithSuspense(<NewUserWidgetPage />)}
/>
<Route
path={ROUTE_WIDGET_DETAIL}
render={() => renderWithSuspense(<DetailWidgetPageContainer />)}
/>
<Route
path={ROUTE_WIDGET_CONFIG}
render={() => renderWithSuspense(<WidgetConfigPageContainer />)}
/>
<Route
path={ROUTE_CLONE_WIDGET}
render={() => renderWithSuspense(<CloneWidgetPage />)}
/>
{/* fragments */}
<Route exact path={ROUTE_FRAGMENT_LIST} component={ListFragmentPage} />
<Route path={ROUTE_FRAGMENT_ADD} component={AddFragmentPage} />
<Route path={ROUTE_FRAGMENT_EDIT} component={EditFragmentPageContainer} />
<Route path={ROUTE_FRAGMENT_CLONE} component={CloneFragmentPageContainer} />
<Route path={ROUTE_FRAGMENT_DETAIL} component={DetailFragmentPageContainer} />
<Route
exact
path={ROUTE_FRAGMENT_LIST}
render={() => renderWithSuspense(<ListFragmentPage />)}
/>
<Route
path={ROUTE_FRAGMENT_ADD}
render={() => renderWithSuspense(<AddFragmentPage />)}
/>
<Route
path={ROUTE_FRAGMENT_EDIT}
render={() => renderWithSuspense(<EditFragmentPageContainer />)}
/>
<Route
path={ROUTE_FRAGMENT_CLONE}
render={() => renderWithSuspense(<CloneFragmentPageContainer />)}
/>
<Route
path={ROUTE_FRAGMENT_DETAIL}
render={() => renderWithSuspense(<DetailFragmentPageContainer />)}
/>
{/* data models */}
<Route exact path={ROUTE_DATA_MODEL_LIST} component={DataModelListPage} />
<Route path={ROUTE_DATA_MODEL_ADD} component={AddDataModelPage} />
Expand Down
100 changes: 76 additions & 24 deletions test/ui/app/App.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,10 @@ import ReloadConfigPage from 'ui/reload-configuration/ReloadConfigPage';
import ReloadConfirmPage from 'ui/reload-configuration/ReloadConfirmPage';
import MonolistProfilePageContainer from 'ui/profile-types/attributes/monolist/MonolistProfilePageContainer';
import MonolistPageContainer from 'ui/data-types/attributes/monolist/MonolistPageContainer';
import DetailWidgetPageContainer from 'ui/widgets/detail/DetailWidgetPageContainer';
import CloneWidgetPage from 'ui/widgets/clone/CloneWidgetPage';
import CloneFragmentPageContainer from 'ui/fragments/clone/CloneFragmentPageContainer';
import NewUserWidgetPage from 'ui/widgets/newUserWidget/NewUserWidgetPage';

import {
ROUTE_HOME,
Expand Down Expand Up @@ -113,6 +117,10 @@ import {
ROUTE_RELOAD_CONFIRM,
ROUTE_ATTRIBUTE_MONOLIST_PROFILE_ADD,
ROUTE_ATTRIBUTE_MONOLIST_ADD,
ROUTE_WIDGET_DETAIL,
ROUTE_CLONE_WIDGET,
ROUTE_FRAGMENT_CLONE,
ROUTE_WIDGET_NEW_USERWIDGET,
} from 'app-init/router';
import { mountWithIntl } from 'test/legacyTestUtils';

Expand Down Expand Up @@ -174,39 +182,53 @@ describe('App', () => {
expect(component.find(PageTreePageContainer).exists()).toBe(true);
});

it('route to widget list page', () => {
const component = mountWithRoute(ROUTE_WIDGET_LIST);
expect(component.find(ListWidgetPageContainer).exists()).toBe(true);
it('route to widget list page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_WIDGET_LIST);
expect(component.find(ListWidgetPageContainer).exists()).toBe(true);
});
});

it('route to widget entry page', () => {
const component = mountWithRoute(ROUTE_WIDGET_ADD);
expect(component.find(AddWidgetPage).exists()).toBe(true);
it('route to widget entry page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_WIDGET_ADD);
expect(component.find(AddWidgetPage).exists()).toBe(true);
});
});

it('route to widget edit page', () => {
const component = mountWithRoute(ROUTE_WIDGET_EDIT);
expect(component.find(EditWidgetPageContainer).exists()).toBe(true);
it('route to widget edit page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_WIDGET_EDIT);
expect(component.find(EditWidgetPageContainer).exists()).toBe(true);
});
});

it('route to widget edit page', () => {
const component = mountWithRoute(ROUTE_WIDGET_CONFIG);
expect(component.find(WidgetConfigPageContainer).exists()).toBe(true);
it('route to widget edit page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_WIDGET_CONFIG);
expect(component.find(WidgetConfigPageContainer).exists()).toBe(true);
});
});

it('route to add fragment page', () => {
const component = mountWithRoute(ROUTE_FRAGMENT_ADD);
expect(component.find(AddFragmentPage).exists()).toBe(true);
it('route to add fragment page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_FRAGMENT_ADD);
expect(component.find(AddFragmentPage).exists()).toBe(true);
});
});

it('route to edit fragment page', () => {
const component = mountWithRoute(ROUTE_FRAGMENT_EDIT);
expect(component.find(EditFragmentPageContainer).exists()).toBe(true);
it('route to edit fragment page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_FRAGMENT_EDIT);
expect(component.find(EditFragmentPageContainer).exists()).toBe(true);
});
});

it('route to detail fragment page', () => {
const component = mountWithRoute(ROUTE_FRAGMENT_DETAIL);
expect(component.find(DetailFragmentPageContainer).exists()).toBe(true);
it('route to detail fragment page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_FRAGMENT_DETAIL);
expect(component.find(DetailFragmentPageContainer).exists()).toBe(true);
});
});

it('route to add page page', () => {
Expand All @@ -224,9 +246,11 @@ describe('App', () => {
expect(component.find(PageSettingsPage).exists()).toBe(true);
});

it('route to list fragment page', () => {
const component = mountWithRoute(ROUTE_FRAGMENT_LIST);
expect(component.find(ListFragmentPage).exists()).toBe(true);
it('route to list fragment page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_FRAGMENT_LIST);
expect(component.find(ListFragmentPage).exists()).toBe(true);
});
});

it('route to page config page', () => {
Expand Down Expand Up @@ -459,6 +483,34 @@ describe('App', () => {
});
});

it('route to new user widget page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_WIDGET_NEW_USERWIDGET);
expect(component.find(NewUserWidgetPage).exists()).toBe(true);
});
});

it('route to widget detail page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_WIDGET_DETAIL);
expect(component.find(DetailWidgetPageContainer).exists()).toBe(true);
});
});

it('route to clone widget page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_CLONE_WIDGET);
expect(component.find(CloneWidgetPage).exists()).toBe(true);
});
});

it('route to fragment page', async () => {
await waitFor(async () => {
const component = mountWithRoute(ROUTE_FRAGMENT_CLONE);
expect(component.find(CloneFragmentPageContainer).exists()).toBe(true);
});
});

describe('component repository', () => {
describe('component repository disabled', () => {
it('routes to the disable page on ROUTE_ECR_COMPONENT_LIST', async () => {
Expand Down