Introduce stale while revalidate pattern (#1555)

This Improves the frontend performance with stale while
revalidate pattern.

There are noticeable performance problems in the frontend that
needed addressing. While implementing the stale-while-revalidate
pattern to display cached responses while re-fetching up-to-date
data in the background, in the same vein we used the opportunity
to remove legacy code involving redux as much as possible,
cleaned up many components and converted them to functional
react components.

Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

scm-ui/ui-webapp/src/containers/App.tsx

@@ -21,100 +21,45 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { Component } from "react";
+import React, { FC } from "react";
 import Main from "./Main";
-import { connect } from "react-redux";
-import { compose } from "redux";
-import { WithTranslation, withTranslation } from "react-i18next";
-import { withRouter } from "react-router-dom";
-import {
-  fetchMe,
-  getFetchMeFailure,
-  getMe,
-  isAuthenticated,
-  isFetchMePending,
-  isLoginPending,
-  isLogoutPending
-} from "../modules/auth";
+import { useTranslation } from "react-i18next";
 import { ErrorPage, Footer, Header, Loading, PrimaryNavigation } from "@scm-manager/ui-components";
-import { Links, Me } from "@scm-manager/ui-types";
-import {
-  getAppVersion,
-  getFetchIndexResourcesFailure,
-  getLinks,
-  getMeLink,
-  isFetchIndexResourcesPending
-} from "../modules/indexResource";
 import Login from "./Login";
+import { useSubject, useIndex } from "@scm-manager/ui-api";
 
-type Props = WithTranslation & {
-  me: Me;
-  authenticated: boolean;
-  error: Error;
-  loading: boolean;
-  links: Links;
-  meLink: string;
-  version: string;
+const App: FC = () => {
+  const { data: index } = useIndex();
+  const { isLoading, error, isAuthenticated, isAnonymous, me } = useSubject();
+  const [t] = useTranslation("commons");
 
-  // dispatcher functions
-  fetchMe: (link: string) => void;
-};
-
-class App extends Component<Props> {
-  componentDidMount() {
-    if (this.props.meLink) {
-      this.props.fetchMe(this.props.meLink);
-    }
+  if (!index) {
+    return null;
   }
 
-  render() {
-    const { me, loading, error, authenticated, links, version, t } = this.props;
+  let content;
 
-    let content;
-    const navigation = authenticated ? <PrimaryNavigation links={links} /> : "";
+  // authenticated means authorized, we stick on authenticated for compatibility reasons
+  const authenticated = isAuthenticated || isAnonymous;
+  const navigation = authenticated ? <PrimaryNavigation links={index._links} /> : "";
 
-    if (!authenticated && !loading) {
-      content = <Login />;
-    } else if (loading) {
-      content = <Loading />;
-    } else if (error) {
-      content = <ErrorPage title={t("app.error.title")} subtitle={t("app.error.subtitle")} error={error} />;
-    } else {
-      content = <Main authenticated={authenticated} links={links} me={me} />;
-    }
-    return (
-      <div className="App">
-        <Header>{navigation}</Header>
-        {content}
-        {authenticated && <Footer me={me} version={version} links={links} />}
-      </div>
-    );
+  if (!authenticated && !isLoading) {
+    content = <Login />;
+  } else if (isLoading) {
+    content = <Loading />;
+  } else if (error) {
+    content = <ErrorPage title={t("app.error.title")} subtitle={t("app.error.subtitle")} error={error} />;
+  } else if (me) {
+    content = <Main authenticated={authenticated} links={index._links} me={me} />;
   }
-}
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    fetchMe: (link: string) => dispatch(fetchMe(link))
-  };
+  return (
+    <div className="App">
+      <Header>{navigation}</Header>
+      {content}
+      {authenticated ? <Footer me={me} version={index.version} links={index._links} /> : null}
+    </div>
+  );
 };
 
-const mapStateToProps = (state: any) => {
-  const authenticated = isAuthenticated(state) && !isLogoutPending(state);
-  const me = getMe(state);
-  const loading = isFetchMePending(state) || isFetchIndexResourcesPending(state) || isLoginPending(state);
-  const error = getFetchMeFailure(state) || getFetchIndexResourcesFailure(state);
-  const links = getLinks(state);
-  const meLink = getMeLink(state);
-  const version = getAppVersion(state);
-  return {
-    authenticated,
-    me,
-    loading,
-    error,
-    links,
-    meLink,
-    version
-  };
-};
-
-export default compose(withRouter, connect(mapStateToProps, mapDispatchToProps), withTranslation("commons"))(App);
+export default App;

scm-ui/ui-webapp/src/containers/ChangeUserPassword.tsx

@@ -33,7 +33,7 @@ import {
 } from "@scm-manager/ui-components";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
-import { changePassword } from "../modules/changePassword";
+import { changePassword } from "../utils/changePassword";
 
 type Props = WithTranslation & {
   me: Me;

scm-ui/ui-webapp/src/containers/Index.tsx

@@ -21,101 +21,38 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { Component } from "react";
+import React, { FC, useState } from "react";
 import App from "./App";
-import { connect } from "react-redux";
-import { compose } from "redux";
-import { WithTranslation, withTranslation } from "react-i18next";
-import { withRouter } from "react-router-dom";
 import { ErrorBoundary, Loading } from "@scm-manager/ui-components";
-import {
-  fetchIndexResources,
-  getFetchIndexResourcesFailure,
-  getLinks,
-  isFetchIndexResourcesPending
-} from "../modules/indexResource";
 import PluginLoader from "./PluginLoader";
-import { IndexResources } from "@scm-manager/ui-types";
 import ScrollToTop from "./ScrollToTop";
 import IndexErrorPage from "./IndexErrorPage";
+import { useIndex } from "@scm-manager/ui-api";
+import { Link } from "@scm-manager/ui-types";
 
-type Props = WithTranslation & {
-  error: Error;
-  loading: boolean;
-  indexResources: IndexResources;
+const Index: FC = () => {
+  const { isLoading, error, data } = useIndex();
+  const [pluginsLoaded, setPluginsLoaded] = useState(false);
 
-  // dispatcher functions
-  fetchIndexResources: () => void;
-};
+  // TODO check componentDidUpdate method for anonymous user stuff
 
-type State = {
-  pluginsLoaded: boolean;
-};
-
-class Index extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      pluginsLoaded: false
-    };
+  if (error) {
+    return <IndexErrorPage error={error} />;
+  }
+  if (isLoading || !data) {
+    return <Loading />;
   }
 
-  componentDidMount() {
-    this.props.fetchIndexResources();
-  }
-
-  componentDidUpdate() {
-    const { indexResources, loading, error } = this.props;
-    const { pluginsLoaded } = this.state;
-    if (!indexResources && !loading && !error && pluginsLoaded) {
-      this.props.fetchIndexResources();
-      this.setState({ pluginsLoaded: false });
-    }
-  }
-
-  pluginLoaderCallback = () => {
-    this.setState({
-      pluginsLoaded: true
-    });
-  };
-
-  render() {
-    const { indexResources, loading, error } = this.props;
-    const { pluginsLoaded } = this.state;
-
-    if (error) {
-      return <IndexErrorPage error={error} />;
-    } else if (loading || !indexResources) {
-      return <Loading />;
-    } else {
-      return (
-        <ErrorBoundary fallback={IndexErrorPage}>
-          <ScrollToTop>
-            <PluginLoader loaded={pluginsLoaded} callback={this.pluginLoaderCallback}>
-              <App />
-            </PluginLoader>
-          </ScrollToTop>
-        </ErrorBoundary>
-      );
-    }
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    fetchIndexResources: () => dispatch(fetchIndexResources())
-  };
+  const link = (data._links.uiPlugins as Link).href;
+  return (
+    <ErrorBoundary fallback={IndexErrorPage}>
+      <ScrollToTop>
+        <PluginLoader link={link} loaded={pluginsLoaded} callback={() => setPluginsLoaded(true)}>
+          <App />
+        </PluginLoader>
+      </ScrollToTop>
+    </ErrorBoundary>
+  );
 };
 
-const mapStateToProps = (state: any) => {
-  const loading = isFetchIndexResourcesPending(state);
-  const error = getFetchIndexResourcesFailure(state);
-  const indexResources = getLinks(state);
-  return {
-    loading,
-    error,
-    indexResources
-  };
-};
-
-export default compose(withRouter, connect(mapStateToProps, mapDispatchToProps), withTranslation("commons"))(Index);
+export default Index;

scm-ui/ui-webapp/src/containers/Login.tsx

@@ -21,28 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { connect } from "react-redux";
-import { Redirect, RouteComponentProps, withRouter } from "react-router-dom";
-import { compose } from "redux";
+import React, { FC } from "react";
+import { Redirect, useLocation } from "react-router-dom";
 import styled from "styled-components";
-import { getLoginFailure, getMe, isAnonymous, isLoginPending, login } from "../modules/auth";
-import { getLoginInfoLink, getLoginLink } from "../modules/indexResource";
 import LoginInfo from "../components/LoginInfo";
-import { Me } from "@scm-manager/ui-types";
 import { parse } from "query-string";
-
-type Props = RouteComponentProps & {
-  authenticated: boolean;
-  me: Me;
-  loading: boolean;
-  error?: Error;
-  link: string;
-  loginInfoLink?: string;
-
-  // dispatcher props
-  login: (link: string, username: string, password: string) => void;
-};
+import { useIndexLink, useLogin } from "@scm-manager/ui-api";
 
 const HeroSection = styled.section`
   padding-top: 2em;
@@ -60,59 +44,27 @@ export const from = (queryString?: string, stateParams?: FromObject | null): str
   return queryParams?.from || stateParams?.from || "/";
 };
 
-class Login extends React.Component<Props> {
-  handleLogin = (username: string, password: string): void => {
-    const { link, login } = this.props;
-    login(link, username, password);
-  };
+const Login: FC = ({}) => {
+  const location = useLocation<FromObject>();
+  const { login, isLoading, error } = useLogin();
+  const loginInfoLink = useIndexLink("loginInfo");
 
-  renderRedirect = () => {
-    const to = from(window.location.search, this.props.location.state);
+  if (!login) {
+    const to = from(window.location.search, location.state);
     return <Redirect to={to} />;
-  };
+  }
 
-  render() {
-    const { authenticated, me, ...restProps } = this.props;
-
-    if (authenticated && !!me) {
-      return this.renderRedirect();
-    }
-
-    return (
-      <HeroSection className="hero">
-        <div className="hero-body">
-          <div className="container">
-            <div className="columns is-centered">
-              <LoginInfo loginHandler={this.handleLogin} {...restProps} />
-            </div>
+  return (
+    <HeroSection className="hero">
+      <div className="hero-body">
+        <div className="container">
+          <div className="columns is-centered">
+            <LoginInfo loginHandler={login} loading={isLoading} error={error} loginInfoLink={loginInfoLink} />
           </div>
         </div>
-      </HeroSection>
-    );
-  }
-}
-
-const mapStateToProps = (state: any) => {
-  const authenticated = state?.auth?.me && !isAnonymous(state.auth.me);
-  const me = getMe(state);
-  const loading = isLoginPending(state);
-  const error = getLoginFailure(state);
-  const link = getLoginLink(state);
-  const loginInfoLink = getLoginInfoLink(state);
-  return {
-    authenticated,
-    me,
-    loading,
-    error,
-    link,
-    loginInfoLink
-  };
+      </div>
+    </HeroSection>
+  );
 };
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    login: (loginLink: string, username: string, password: string) => dispatch(login(loginLink, username, password))
-  };
-};
-
-export default compose(withRouter, connect(mapStateToProps, mapDispatchToProps))(Login);
+export default Login;

scm-ui/ui-webapp/src/containers/Logout.tsx

@@ -21,55 +21,30 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import {connect} from "react-redux";
-import {WithTranslation, withTranslation} from "react-i18next";
+import React, { FC, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 
-import {getLogoutFailure, logout} from "../modules/auth";
-import {ErrorPage, Loading} from "@scm-manager/ui-components";
-import {getLogoutLink} from "../modules/indexResource";
-import {RouteComponentProps, withRouter} from "react-router-dom";
-import {compose} from "redux";
+import { ErrorPage, Loading } from "@scm-manager/ui-components";
+import { Redirect } from "react-router-dom";
+import { useLogout } from "@scm-manager/ui-api";
 
-type Props = RouteComponentProps &
-  WithTranslation & {
-  error: Error;
-  logoutLink: string;
-
-  // dispatcher functions
-  logout: (link: string, callback: () => void) => void;
-};
-
-class Logout extends React.Component<Props> {
-  componentDidMount() {
-    if (this.props.logoutLink) {
-      this.props.logout(this.props.logoutLink, () => this.props.history.push("/login"));
+const Logout: FC = ({}) => {
+  const { error, logout } = useLogout();
+  const [t] = useTranslation("commons");
+  useEffect(() => {
+    if (logout) {
+      logout();
     }
+  }, []);
+
+  if (!logout) {
+    return <Redirect to={"/login"} />;
   }
 
-  render() {
-    const {error, t} = this.props;
-    if (error) {
-      return <ErrorPage title={t("logout.error.title")} subtitle={t("logout.error.subtitle")} error={error}/>;
-    } else {
-      return <Loading/>;
-    }
+  if (error) {
+    return <ErrorPage title={t("logout.error.title")} subtitle={t("logout.error.subtitle")} error={error} />;
   }
-}
-
-const mapStateToProps = (state: any) => {
-  const error = getLogoutFailure(state);
-  const logoutLink = getLogoutLink(state);
-  return {
-    error,
-    logoutLink
-  };
+  return <Loading />;
 };
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    logout: (link: string, callback: () => void) => dispatch(logout(link, callback))
-  };
-};
-
-export default compose(withTranslation("commons"), withRouter, connect(mapStateToProps, mapDispatchToProps))(Logout);
+export default Logout;

scm-ui/ui-webapp/src/containers/PluginLoader.tsx

@@ -23,8 +23,6 @@
  */
 import React, { ReactNode } from "react";
 import { apiClient, Loading, ErrorNotification, ErrorBoundary, Icon } from "@scm-manager/ui-components";
-import { getUiPluginsLink } from "../modules/indexResource";
-import { connect } from "react-redux";
 import loadBundle from "./loadBundle";
 import styled from "styled-components";
 
@@ -158,11 +156,4 @@ const comparePluginsByName = (a: Plugin, b: Plugin) => {
   return 0;
 };
 
-const mapStateToProps = (state: any) => {
-  const link = getUiPluginsLink(state);
-  return {
-    link
-  };
-};
-
-export default connect(mapStateToProps)(PluginLoader);
+export default PluginLoader;

scm-ui/ui-webapp/src/containers/Profile.tsx

@@ -21,23 +21,19 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { Redirect, Route, RouteComponentProps, Switch, withRouter } from "react-router-dom";
-import { getMe } from "../modules/auth";
-import { compose } from "redux";
-import { connect } from "react-redux";
-import { WithTranslation, withTranslation } from "react-i18next";
-import { Me } from "@scm-manager/ui-types";
+import React, { FC } from "react";
+import { Redirect, Route, Switch, useRouteMatch } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import {
+  CustomQueryFlexWrappedColumns,
   ErrorPage,
   NavLink,
   Page,
-  CustomQueryFlexWrappedColumns,
   PrimaryContentColumn,
-  SecondaryNavigationColumn,
   SecondaryNavigation,
-  SubNavigation,
+  SecondaryNavigationColumn,
   StateMenuContextProvider,
+  SubNavigation,
   urls
 } from "@scm-manager/ui-components";
 import ChangeUserPassword from "./ChangeUserPassword";
@@ -47,117 +43,93 @@ import SetPublicKeys from "../users/components/publicKeys/SetPublicKeys";
 import SetPublicKeysNavLink from "../users/components/navLinks/SetPublicKeysNavLink";
 import SetApiKeys from "../users/components/apiKeys/SetApiKeys";
 import SetApiKeysNavLink from "../users/components/navLinks/SetApiKeysNavLink";
+import { useRequiredMe } from "@scm-manager/ui-api";
 
-type Props = RouteComponentProps &
-  WithTranslation & {
-    me: Me;
+const Profile: FC = () => {
+  const match = useRouteMatch();
+  const url = urls.matchedUrlFromMatch(match);
+  const [t] = useTranslation("commons");
+  const me = useRequiredMe();
 
-    // Context props
-    match: any;
-  };
+  const mayChangePassword = !!me._links.password;
+  const canManagePublicKeys = !!me._links.publicKeys;
+  const canManageApiKeys = !!me._links.apiKeys;
 
-class Profile extends React.Component<Props> {
-  mayChangePassword = () => !!this.props.me?._links?.password;
-  canManagePublicKeys = () => !!this.props.me?._links?.publicKeys;
-  canManageApiKeys = () => !!this.props.me?._links?.apiKeys;
+  const shouldRenderNavigation = !!(
+    me._links.password ||
+    me._links.publicKeys ||
+    me._links.apiKeys ||
+    binder.hasExtension("profile.route")
+  );
 
-  shouldRenderNavigation = () => {
-    const { me } = this.props;
+  if (!me) {
     return (
-      !!me?._links?.password ||
-      !!me?._links?.publicKeys ||
-      !!me?._links?.apiKeys ||
-      binder.hasExtension("profile.route")
-    );
-  };
-
-  render() {
-    const url = urls.matchedUrl(this.props);
-    const { me, t } = this.props;
-
-    if (!me) {
-      return (
-        <ErrorPage
-          title={t("profile.error-title")}
-          subtitle={t("profile.error-subtitle")}
-          error={{
-            name: t("profile.error"),
-            message: t("profile.error-message")
-          }}
-        />
-      );
-    }
-
-    const extensionProps = {
-      me,
-      url
-    };
-
-    return (
-      <StateMenuContextProvider>
-        <Page title={me.displayName}>
-          <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn>
-              <Route path={url} exact render={() => <ProfileInfo me={me} />} />
-              {this.shouldRenderNavigation() && (
-                <Switch>
-                  {this.mayChangePassword() && (
-                    <Redirect exact from={`${url}/settings/`} to={`${url}/settings/password`} />
-                  )}
-                  {this.canManagePublicKeys() && (
-                    <Redirect exact from={`${url}/settings/`} to={`${url}/settings/publicKeys`} />
-                  )}
-                  {this.canManageApiKeys() && (
-                    <Redirect exact from={`${url}/settings/`} to={`${url}/settings/apiKeys`} />
-                  )}
-                </Switch>
-              )}
-              {this.mayChangePassword() && (
-                <Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
-              )}
-              {this.canManagePublicKeys() && (
-                <Route path={`${url}/settings/publicKeys`} render={() => <SetPublicKeys user={me} />} />
-              )}
-              {this.canManageApiKeys() && (
-                <Route path={`${url}/settings/apiKeys`} render={() => <SetApiKeys user={me} />} />
-              )}
-              <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
-            </PrimaryContentColumn>
-            <SecondaryNavigationColumn>
-              <SecondaryNavigation label={t("profile.navigationLabel")}>
-                <NavLink
-                  to={`${url}`}
-                  icon="fas fa-info-circle"
-                  label={t("profile.informationNavLink")}
-                  title={t("profile.informationNavLink")}
-                />
-                {this.shouldRenderNavigation() && (
-                  <SubNavigation
-                    to={`${url}/settings/`}
-                    label={t("profile.settingsNavLink")}
-                    title={t("profile.settingsNavLink")}
-                  >
-                    {this.mayChangePassword() && (
-                      <NavLink to={`${url}/settings/password`} label={t("profile.changePasswordNavLink")} />
-                    )}
-                    <SetPublicKeysNavLink user={me} publicKeyUrl={`${url}/settings/publicKeys`} />
-                    <SetApiKeysNavLink user={me} apiKeyUrl={`${url}/settings/apiKeys`} />
-                    <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
-                  </SubNavigation>
-                )}
-              </SecondaryNavigation>
-            </SecondaryNavigationColumn>
-          </CustomQueryFlexWrappedColumns>
-        </Page>
-      </StateMenuContextProvider>
+      <ErrorPage
+        title={t("profile.error-title")}
+        subtitle={t("profile.error-subtitle")}
+        error={{
+          name: t("profile.error"),
+          message: t("profile.error-message")
+        }}
+      />
     );
   }
-}
 
-const mapStateToProps = (state: any) => {
-  return {
-    me: getMe(state)
+  const extensionProps = {
+    me,
+    url
   };
+
+  return (
+    <StateMenuContextProvider>
+      <Page title={me.displayName}>
+        <CustomQueryFlexWrappedColumns>
+          <PrimaryContentColumn>
+            <Route path={url} exact render={() => <ProfileInfo me={me} />} />
+            {shouldRenderNavigation && (
+              <Switch>
+                {mayChangePassword && <Redirect exact from={`${url}/settings/`} to={`${url}/settings/password`} />}
+                {canManagePublicKeys && <Redirect exact from={`${url}/settings/`} to={`${url}/settings/publicKeys`} />}
+                {canManageApiKeys && <Redirect exact from={`${url}/settings/`} to={`${url}/settings/apiKeys`} />}
+              </Switch>
+            )}
+            {mayChangePassword && (
+              <Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
+            )}
+            {canManagePublicKeys && (
+              <Route path={`${url}/settings/publicKeys`} render={() => <SetPublicKeys user={me} />} />
+            )}
+            {canManageApiKeys && <Route path={`${url}/settings/apiKeys`} render={() => <SetApiKeys user={me} />} />}
+            <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
+          </PrimaryContentColumn>
+          <SecondaryNavigationColumn>
+            <SecondaryNavigation label={t("profile.navigationLabel")}>
+              <NavLink
+                to={url}
+                icon="fas fa-info-circle"
+                label={t("profile.informationNavLink")}
+                title={t("profile.informationNavLink")}
+              />
+              {shouldRenderNavigation && (
+                <SubNavigation
+                  to={`${url}/settings/`}
+                  label={t("profile.settingsNavLink")}
+                  title={t("profile.settingsNavLink")}
+                >
+                  {mayChangePassword && (
+                    <NavLink to={`${url}/settings/password`} label={t("profile.changePasswordNavLink")} />
+                  )}
+                  <SetPublicKeysNavLink user={me} publicKeyUrl={`${url}/settings/publicKeys`} />
+                  <SetApiKeysNavLink user={me} apiKeyUrl={`${url}/settings/apiKeys`} />
+                  <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
+                </SubNavigation>
+              )}
+            </SecondaryNavigation>
+          </SecondaryNavigationColumn>
+        </CustomQueryFlexWrappedColumns>
+      </Page>
+    </StateMenuContextProvider>
+  );
 };
 
-export default compose(withTranslation("commons"), connect(mapStateToProps), withRouter)(Profile);
+export default Profile;

scm-ui/ui-webapp/src/containers/loadBundle.ts

@@ -114,12 +114,15 @@ expose("react", React);
 expose("react-dom", ReactDOM);
 expose("react-router-dom", ReactRouterDom);
 expose("styled-components", SytleComponents, SytleComponentsDefault);
-expose("redux", Redux);
-expose("react-redux", ReactRedux);
 expose("react-i18next", ReactI18Next);
 expose("classnames", ClassNames, ClassNamesDefault);
 expose("query-string", QueryString, QueryStringDefault);
 expose("@scm-manager/ui-extensions", UIExtensions);
 expose("@scm-manager/ui-components", UIComponents);
 
+// redux is deprecated in favor of ui-api,
+// which will be exported soon
+expose("redux", Redux);
+expose("react-redux", ReactRedux);
+
 export default (plugin: string) => SystemJS.import(plugin);