transfer frontend changes to typescript files

scm-ui/ui-components/src/Breadcrumb.js

@@ -1,129 +0,0 @@
-//@flow
-import React from "react";
-import { Link } from "react-router-dom";
-import { translate } from "react-i18next";
-import classNames from "classnames";
-import styled from "styled-components";
-import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
-import type { Branch, Repository } from "@scm-manager/ui-types";
-import Icon from "./Icon";
-
-type Props = {
-  repository: Repository,
-  branch: Branch,
-  defaultBranch: Branch,
-  branches: Branch[],
-  revision: string,
-  path: string,
-  baseUrl: string,
-
-  // Context props
-  t: string => string
-};
-
-const FlexStartNav = styled.nav`
-  flex: 1;
-`;
-
-const HomeIcon = styled(Icon)`
-  line-height: 1.5rem;
-`;
-
-const ActionWrapper = styled.div`
-  align-self: center;
-  padding-right: 1rem;
-`;
-
-class Breadcrumb extends React.Component<Props> {
-  renderPath() {
-    const { revision, path, baseUrl } = this.props;
-
-    if (path) {
-      const paths = path.split("/");
-      const map = paths.map((path, index) => {
-        const currPath = paths.slice(0, index + 1).join("/");
-        if (paths.length - 1 === index) {
-          return (
-            <li className="is-active" key={index}>
-              <Link to="#" aria-current="page">
-                {path}
-              </Link>
-            </li>
-          );
-        }
-        return (
-          <li key={index}>
-            <Link to={baseUrl + "/" + revision + "/" + currPath}>{path}</Link>
-          </li>
-        );
-      });
-      return map;
-    }
-    return null;
-  }
-
-  render() {
-    const {
-      baseUrl,
-      branch,
-      defaultBranch,
-      branches,
-      revision,
-      path,
-      repository,
-      t
-    } = this.props;
-
-    let homeUrl = baseUrl + "/";
-    if (revision) {
-      homeUrl += encodeURIComponent(revision) + "/";
-    }
-
-    return (
-      <>
-        <div className="is-flex">
-          <FlexStartNav
-            className={classNames("breadcrumb", "sources-breadcrumb")}
-            aria-label="breadcrumbs"
-          >
-            <ul>
-              <li>
-                <Link to={homeUrl}>
-                  <HomeIcon
-                    title={t("breadcrumb.home")}
-                    name="home"
-                    color="inherit"
-                  />
-                </Link>
-              </li>
-              {this.renderPath()}
-            </ul>
-          </FlexStartNav>
-          {binder.hasExtension("repos.sources.actionbar") && (
-            <ActionWrapper>
-              <ExtensionPoint
-                name="repos.sources.actionbar"
-                props={{
-                  baseUrl,
-                  branch: branch ? branch : defaultBranch,
-                  revision: branches ? undefined : revision,
-                  path,
-                  isBranchUrl: branches
-                    ? branches.filter(
-                        b => b.name.replace("/", "%2F") === revision
-                      ).length > 0
-                    : true,
-                  repository
-                }}
-                renderAll={true}
-              />
-            </ActionWrapper>
-          )}
-        </div>
-        <hr className="is-marginless" />
-      </>
-    );
-  }
-}
-
-export default translate("commons")(Breadcrumb);

scm-ui/ui-components/src/Breadcrumb.tsx

@@ -61,13 +61,18 @@ class Breadcrumb extends React.Component<Props> {
   render() {
     const { baseUrl, branch, defaultBranch, branches, revision, path, repository, t } = this.props;
 
+    let homeUrl = baseUrl + "/";
+    if (revision) {
+      homeUrl += encodeURIComponent(revision) + "/";
+    }
+
     return (
       <>
         <div className="is-flex">
           <FlexStartNav className={classNames("breadcrumb", "sources-breadcrumb")} aria-label="breadcrumbs">
             <ul>
               <li>
-                <Link to={baseUrl + "/" + revision + "/"}>
+                <Link to={homeUrl}>
                   <HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
                 </Link>
               </li>

scm-ui/ui-webapp/src/repos/sources/containers/Sources.js

@@ -1,230 +0,0 @@
-// @flow
-import React from "react";
-import {connect} from "react-redux";
-import {withRouter} from "react-router-dom";
-import type {Branch, Repository} from "@scm-manager/ui-types";
-import FileTree from "../components/FileTree";
-import {BranchSelector, Breadcrumb, ErrorNotification, Loading} from "@scm-manager/ui-components";
-import {translate} from "react-i18next";
-import {
-  fetchBranches,
-  getBranches,
-  getFetchBranchesFailure,
-  isFetchBranchesPending
-} from "../../branches/modules/branches";
-import {compose} from "redux";
-import Content from "./Content";
-import {fetchSources, isDirectory} from "../modules/sources";
-
-type Props = {
-  repository: Repository,
-  loading: boolean,
-  error: Error,
-  baseUrl: string,
-  branches: Branch[],
-  revision: string,
-  path: string,
-  currentFileIsDirectory: boolean,
-
-  // dispatch props
-  fetchBranches: Repository => void,
-  fetchSources: (Repository, string, string) => void,
-
-  // Context props
-  history: any,
-  match: any,
-  location: any,
-  t: string => string
-};
-
-type State = {
-  selectedBranch: any
-};
-
-class Sources extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      selectedBranch: null
-    };
-  }
-
-  componentDidMount() {
-    const {
-      fetchBranches,
-      repository,
-      revision,
-      path,
-      fetchSources
-    } = this.props;
-
-    fetchBranches(repository);
-    fetchSources(repository, revision, path);
-
-    this.redirectToDefaultBranch();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { fetchSources, repository, revision, path } = this.props;
-    if (prevProps.revision !== revision || prevProps.path !== path) {
-      fetchSources(repository, revision, path);
-    }
-
-    this.redirectToDefaultBranch();
-  }
-
-  redirectToDefaultBranch = () => {
-    const { branches } = this.props;
-    if (this.shouldRedirectToDefaultBranch()) {
-      const defaultBranches = branches.filter(b => b.defaultBranch);
-
-      if (defaultBranches.length > 0) {
-        this.branchSelected(defaultBranches[0]);
-      }
-    }
-  };
-
-  shouldRedirectToDefaultBranch = () => {
-    const { branches, revision } = this.props;
-    return branches && !revision;
-  };
-
-  branchSelected = (branch?: Branch) => {
-    const { baseUrl, history, path } = this.props;
-    let url;
-    if (branch) {
-      this.setState({ selectedBranch: branch });
-      if (path) {
-        url = `${baseUrl}/${encodeURIComponent(branch.name)}/${path}`;
-      } else {
-        url = `${baseUrl}/${encodeURIComponent(branch.name)}/`;
-      }
-    } else {
-      this.setState({ selectedBranch: null });
-      url = `${baseUrl}/`;
-    }
-    history.push(url);
-  };
-
-  render() {
-    const {
-      repository,
-      baseUrl,
-      loading,
-      error,
-      revision,
-      path,
-      currentFileIsDirectory
-    } = this.props;
-
-    if (error) {
-      return <ErrorNotification error={error} />;
-    }
-
-    if (loading) {
-      return <Loading />;
-    }
-
-    if (currentFileIsDirectory) {
-      return (
-        <div className="panel">
-          {this.renderBranchSelector()}
-          {this.renderBreadcrumb()}
-          <FileTree
-            repository={repository}
-            revision={revision}
-            path={path}
-            baseUrl={baseUrl}
-          />
-        </div>
-      );
-    } else {
-      return (
-        <Content repository={repository} revision={revision} path={path} />
-      );
-    }
-  }
-
-  renderBranchSelector = () => {
-    const { branches, revision, t } = this.props;
-
-    if (branches) {
-      return (
-        <div className="panel-heading">
-          <BranchSelector
-            branches={branches}
-            selectedBranch={revision}
-            label={t("changesets.branchSelectorLabel")}
-            selected={(b: Branch) => {
-              this.branchSelected(b);
-            }}
-          />
-        </div>
-      );
-    }
-    return null;
-  };
-
-  renderBreadcrumb = () => {
-    const { revision, path, baseUrl, branches, repository } = this.props;
-    const { selectedBranch } = this.state;
-
-    //TODO refactor
-    return (
-      <Breadcrumb
-        revision={revision}
-        path={path}
-        baseUrl={baseUrl}
-        branch={selectedBranch}
-        defaultBranch={
-          branches && branches.filter(b => b.defaultBranch === true)[0]
-        }
-        branches={branches}
-        repository={repository}
-      />
-    );
-  };
-}
-
-const mapStateToProps = (state, ownProps) => {
-  const { repository, match } = ownProps;
-  const { revision, path } = match.params;
-  const decodedRevision = revision ? decodeURIComponent(revision) : undefined;
-  const loading = isFetchBranchesPending(state, repository);
-  const error = getFetchBranchesFailure(state, repository);
-  const branches = getBranches(state, repository);
-  const currentFileIsDirectory = decodedRevision
-    ? isDirectory(state, repository, decodedRevision, path)
-    : isDirectory(state, repository, revision, path);
-
-  return {
-    repository,
-    revision: decodedRevision,
-    path,
-    loading,
-    error,
-    branches,
-    currentFileIsDirectory
-  };
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    fetchBranches: (repository: Repository) => {
-      dispatch(fetchBranches(repository));
-    },
-    fetchSources: (repository: Repository, revision: string, path: string) => {
-      dispatch(fetchSources(repository, revision, path));
-    }
-  };
-};
-
-export default compose(
-  translate("repos"),
-  withRouter,
-  connect(
-    mapStateToProps,
-    mapDispatchToProps
-  )
-)(Sources);

scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx

@@ -151,20 +151,19 @@ class Sources extends React.Component<Props, State> {
     const { revision, path, baseUrl, branches, repository } = this.props;
     const { selectedBranch } = this.state;
 
-    if (revision) {
     return (
       <Breadcrumb
-          revision={encodeURIComponent(revision)}
+        revision={revision}
         path={path}
         baseUrl={baseUrl}
         branch={selectedBranch}
-          defaultBranch={branches && branches.filter(b => b.defaultBranch === true)[0]}
+        defaultBranch={
+          branches && branches.filter(b => b.defaultBranch === true)[0]
+        }
         branches={branches}
         repository={repository}
       />
     );
-    }
-    return null;
   };
 }