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/repos/codeSection/components/CodeActionBar.tsx

@@ -50,7 +50,7 @@ const FlexShrinkLevel = styled(Level)`
 
 type Props = {
   selectedBranch?: string;
-  branches: Branch[];
+  branches?: Branch[];
   onSelectBranch: () => void;
   switchViewLink: string;
 };
@@ -63,7 +63,7 @@ const CodeActionBar: FC<Props> = ({ selectedBranch, branches, onSelectBranch, sw
     <ActionBar>
       <FlexShrinkLevel
         left={
-          branches?.length > 0 && (
+          branches && branches?.length > 0 && (
             <BranchSelector
               label={t("code.branchSelector")}
               branches={branches}

scm-ui/ui-webapp/src/repos/codeSection/components/CodeViewSwitcher.tsx

@@ -44,37 +44,26 @@ type Props = {
 const CodeViewSwitcher: FC<Props> = ({ currentUrl, switchViewLink }) => {
   const { t } = useTranslation("repos");
 
-  const resolveLocation = () => {
-    if (currentUrl.includes("/code/branch") || currentUrl.includes("/code/changesets")) {
-      return "changesets";
-    }
-    if (currentUrl.includes("/code/sources")) {
-      return "sources";
-    }
-    return "";
-  };
-
-  const isSourcesTab = () => {
-    return resolveLocation() === "sources";
-  };
-
-  const isChangesetsTab = () => {
-    return resolveLocation() === "changesets";
-  };
+  let location = "";
+  if (currentUrl.includes("/code/branch") || currentUrl.includes("/code/changesets")) {
+    location = "changesets";
+  } else if (currentUrl.includes("/code/sources")) {
+    location = "sources";
+  }
 
   return (
     <ButtonAddonsMarginRight>
       <SmallButton
         label={t("code.commits")}
         icon="fa fa-exchange-alt"
-        color={isChangesetsTab() ? "link is-selected" : undefined}
-        link={isSourcesTab() ? switchViewLink : undefined}
+        color={location === "changesets" ? "link is-selected" : undefined}
+        link={location === "sources" ? switchViewLink : undefined}
       />
       <SmallButton
         label={t("code.sources")}
         icon="fa fa-code"
-        color={isSourcesTab() ? "link is-selected" : undefined}
-        link={isChangesetsTab() ? switchViewLink : undefined}
+        color={location === "sources" ? "link is-selected" : undefined}
+        link={location === "changesets" ? switchViewLink : undefined}
       />
     </ButtonAddonsMarginRight>
   );

scm-ui/ui-webapp/src/repos/codeSection/containers/CodeOverview.tsx

@@ -21,116 +21,79 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { Route, RouteComponentProps, withRouter } from "react-router-dom";
+import React, { FC } from "react";
+import { Route, useLocation } from "react-router-dom";
 import Sources from "../../sources/containers/Sources";
 import ChangesetsRoot from "../../containers/ChangesetsRoot";
 import { Branch, Repository } from "@scm-manager/ui-types";
 import { ErrorPage, Loading } from "@scm-manager/ui-components";
-import { compose } from "redux";
-import { WithTranslation, withTranslation } from "react-i18next";
-import { connect } from "react-redux";
-import {
-  fetchBranches,
-  getBranches,
-  getFetchBranchesFailure,
-  isFetchBranchesPending
-} from "../../branches/modules/branches";
+import { useTranslation } from "react-i18next";
+import { useBranches } from "@scm-manager/ui-api";
 
-type Props = RouteComponentProps &
-  WithTranslation & {
-    repository: Repository;
-    baseUrl: string;
-
-    // State props
-    branches: Branch[];
-    error: Error;
-    loading: boolean;
-    selectedBranch: string;
-
-    // Dispatch props
-    fetchBranches: (p: Repository) => void;
-  };
-
-class CodeOverview extends React.Component<Props> {
-  componentDidMount() {
-    const { repository } = this.props;
-    this.props.fetchBranches(repository);
-  }
-
-  render() {
-    const { repository, baseUrl, branches, selectedBranch, error, loading, t } = this.props;
-    const url = baseUrl;
-
-    if (loading) {
-      return <Loading />;
-    }
-
-    if (error) {
-      return (
-        <ErrorPage title={t("repositoryRoot.errorTitle")} subtitle={t("repositoryRoot.errorSubtitle")} error={error} />
-      );
-    }
-
-    return (
-      <>
-        <Route
-          path={`${url}/sources`}
-          exact={true}
-          render={() => <Sources repository={repository} baseUrl={`${url}`} branches={branches} />}
-        />
-        <Route
-          path={`${url}/sources/:revision/:path*`}
-          render={() => (
-            <Sources repository={repository} baseUrl={`${url}`} branches={branches} selectedBranch={selectedBranch} />
-          )}
-        />
-        <Route
-          path={`${url}/changesets`}
-          render={() => <ChangesetsRoot repository={repository} baseUrl={`${url}`} branches={branches} />}
-        />
-        <Route
-          path={`${url}/branch/:branch/changesets/`}
-          render={() => (
-            <ChangesetsRoot
-              repository={repository}
-              baseUrl={`${url}`}
-              branches={branches}
-              selectedBranch={selectedBranch}
-            />
-          )}
-        />
-      </>
-    );
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    fetchBranches: (repo: Repository) => {
-      dispatch(fetchBranches(repo));
-    }
-  };
+type Props = {
+  repository: Repository;
+  baseUrl: string;
 };
 
-const mapStateToProps = (state: any, ownProps: Props) => {
-  const { repository, location } = ownProps;
-  const error = getFetchBranchesFailure(state, repository);
-  const loading = isFetchBranchesPending(state, repository);
-  const branches = getBranches(state, repository);
+const useSelectedBranch = () => {
+  const location = useLocation();
   const branchFromURL =
     !location.pathname.includes("/code/changesets/") && decodeURIComponent(location.pathname.split("/")[6]);
-  const selectedBranch = branchFromURL && branchFromURL !== "undefined" ? branchFromURL : "";
-  return {
-    error,
-    loading,
-    branches,
-    selectedBranch
-  };
+  return branchFromURL && branchFromURL !== "undefined" ? branchFromURL : "";
 };
 
-export default compose(
-  withRouter,
-  withTranslation("repos"),
-  connect(mapStateToProps, mapDispatchToProps)
-)(CodeOverview);
+const supportBranches = (repository: Repository) => {
+  return !!repository._links.branches;
+};
+
+const CodeOverview: FC<Props> = ({ baseUrl, repository }) => {
+  if (supportBranches(repository)) {
+    return <CodeOverviewWithBranches baseUrl={baseUrl} repository={repository} />;
+  }
+  return <CodeRouting baseUrl={baseUrl} repository={repository} />;
+};
+
+const CodeOverviewWithBranches: FC<Props> = ({ repository, baseUrl }) => {
+  const { isLoading, error, data } = useBranches(repository);
+  const selectedBranch = useSelectedBranch();
+  const [t] = useTranslation("repos");
+  const branches = data?._embedded.branches;
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (error) {
+    return (
+      <ErrorPage title={t("repositoryRoot.errorTitle")} subtitle={t("repositoryRoot.errorSubtitle")} error={error} />
+    );
+  }
+
+  return <CodeRouting repository={repository} baseUrl={baseUrl} branches={branches} selectedBranch={selectedBranch} />;
+};
+
+type RoutingProps = {
+  repository: Repository;
+  baseUrl: string;
+  branches?: Branch[];
+  selectedBranch?: string;
+};
+
+const CodeRouting: FC<RoutingProps> = ({ repository, baseUrl, branches, selectedBranch }) => (
+  <>
+    <Route path={`${baseUrl}/sources`} exact={true}>
+      <Sources repository={repository} baseUrl={baseUrl} branches={branches} />
+    </Route>
+    <Route path={`${baseUrl}/sources/:revision/:path*`}>
+      <Sources repository={repository} baseUrl={baseUrl} branches={branches} selectedBranch={selectedBranch} />
+    </Route>
+    <Route path={`${baseUrl}/changesets`}>
+      <ChangesetsRoot repository={repository} baseUrl={baseUrl} branches={branches} />
+    </Route>
+    <Route path={`${baseUrl}/branch/:branch/changesets/`}>
+      <ChangesetsRoot repository={repository} baseUrl={baseUrl} branches={branches} selectedBranch={selectedBranch} />
+    </Route>
+  </>
+);
+
+export default CodeOverview;