Switch from ReactJSS to styled-components in ui-webapp

2025-11-11 16:05:44 +01:00 · 2019-10-09 16:17:02 +02:00
parent 01ef497d07
commit 004b6e5340
23 changed files with 544 additions and 675 deletions
--- a/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.js
+++ b/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.js
@@ -1,39 +1,30 @@
 //@flow
 import React from "react";
-import injectSheet from "react-jss";
 import { translate } from "react-i18next";
+import styled from "styled-components";
 import { Tag } from "@scm-manager/ui-components";

 type Props = {
  defaultBranch?: boolean,

  // context props
-  classes: any,
  t: string => string
 };

-const styles = {
-  tag: {
-    marginLeft: "0.75rem",
-    verticalAlign: "inherit"
-  }
-};
+const LeftMarginTag = styled(Tag)`
+  vertical-align: inherit;
+  margin-left: 0.75rem;
+`;

 class DefaultBranchTag extends React.Component<Props> {
  render() {
-    const { defaultBranch, classes, t } = this.props;
+    const { defaultBranch, t } = this.props;

    if (defaultBranch) {
-      return (
-        <Tag
-          className={classes.tag}
-          color="dark"
-          label={t("branch.defaultTag")}
-        />
-      );
+      return <LeftMarginTag color="dark" label={t("branch.defaultTag")} />;
    }
    return null;
  }
 }

-export default injectSheet(styles)(translate("repos")(DefaultBranchTag));
+export default translate("repos")(DefaultBranchTag);
--- a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.js
+++ b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.js
@@ -1,9 +1,10 @@
 //@flow
 import React from "react";
-import type { Changeset, Repository } from "@scm-manager/ui-types";
 import { Interpolate, translate } from "react-i18next";
-import injectSheet from "react-jss";
-
+import classNames from "classnames";
+import styled from "styled-components";
+import type { Changeset, Repository, Tag } from "@scm-manager/ui-types";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import {
  DateFromNow,
  ChangesetId,
@@ -15,31 +16,27 @@ import {
  changesets
 } from "@scm-manager/ui-components";

-import classNames from "classnames";
-import type { Tag } from "@scm-manager/ui-types";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-
-const styles = {
-  spacing: {
-    marginRight: "1em"
-  },
-  tags: {
-    "& .tag": {
-      marginLeft: ".25rem"
-    }
-  }
-};
-
 type Props = {
  changeset: Changeset,
  repository: Repository,
-  t: string => string,
-  classes: any
+
+  // context props
+  t: string => string
 };

+const RightMarginP = styled.p`
+  margin-right: 1em;
+`;
+
+const TagsWrapper = styled.div`
+  & .tag {
+    margin-left: 0.25rem;
+  }
+`;
+
 class ChangesetDetails extends React.Component<Props> {
  render() {
-    const { changeset, repository, classes } = this.props;
+    const { changeset, repository } = this.props;

    const description = changesets.parseDescription(changeset.description);

@@ -62,20 +59,16 @@ class ChangesetDetails extends React.Component<Props> {
          </h4>
          <article className="media">
            <AvatarWrapper>
-              <p className={classNames("image", "is-64x64", classes.spacing)}>
+              <RightMarginP className={classNames("image", "is-64x64")}>
                <AvatarImage person={changeset.author} />
-              </p>
+              </RightMarginP>
            </AvatarWrapper>
            <div className="media-content">
              <p>
                <ChangesetAuthor changeset={changeset} />
              </p>
              <p>
-                <Interpolate
-                  i18nKey="changeset.summary"
-                  id={id}
-                  time={date}
-                />
+                <Interpolate i18nKey="changeset.summary" id={id} time={date} />
              </p>
            </div>
            <div className="media-right">{this.renderTags()}</div>
@@ -106,24 +99,22 @@ class ChangesetDetails extends React.Component<Props> {
  }

  getTags = () => {
-    const { changeset } = this.props;
-    return changeset._embedded.tags || [];
+    return this.props.changeset._embedded.tags || [];
  };

  renderTags = () => {
-    const { classes } = this.props;
    const tags = this.getTags();
    if (tags.length > 0) {
      return (
-        <div className={classNames("level-item", classes.tags)}>
+        <TagsWrapper className="level-item">
          {tags.map((tag: Tag) => {
            return <ChangesetTag key={tag.name} tag={tag} />;
          })}
-        </div>
+        </TagsWrapper>
      );
    }
    return null;
  };
 }

-export default injectSheet(styles)(translate("repos")(ChangesetDetails));
+export default translate("repos")(ChangesetDetails);
--- a/scm-ui/ui-webapp/src/repos/components/list/RepositoryEntry.js
+++ b/scm-ui/ui-webapp/src/repos/components/list/RepositoryEntry.js
@@ -18,7 +18,7 @@ class RepositoryEntry extends React.Component<Props> {
    if (repository._links["branches"]) {
      return (
        <RepositoryEntryLink
-          iconClass="fas fa-code-branch fa-lg"
+          icon="code-branch"
          to={repositoryLink + "/branches"}
        />
      );
@@ -30,7 +30,7 @@ class RepositoryEntry extends React.Component<Props> {
    if (repository._links["changesets"]) {
      return (
        <RepositoryEntryLink
-          iconClass="fas fa-exchange-alt fa-lg"
+          icon="exchange-alt"
          to={repositoryLink + "/changesets"}
        />
      );
@@ -41,10 +41,7 @@ class RepositoryEntry extends React.Component<Props> {
  renderSourcesLink = (repository: Repository, repositoryLink: string) => {
    if (repository._links["sources"]) {
      return (
-        <RepositoryEntryLink
-          iconClass="fa-code fa-lg"
-          to={repositoryLink + "/sources"}
-        />
+        <RepositoryEntryLink icon="code" to={repositoryLink + "/sources"} />
      );
    }
    return null;
@@ -54,7 +51,7 @@ class RepositoryEntry extends React.Component<Props> {
    if (repository._links["update"]) {
      return (
        <RepositoryEntryLink
-          iconClass="fa-cog fa-lg"
+          icon="cog"
          to={repositoryLink + "/settings/general"}
        />
      );
--- a/scm-ui/ui-webapp/src/repos/components/list/RepositoryEntryLink.js
+++ b/scm-ui/ui-webapp/src/repos/components/list/RepositoryEntryLink.js
@@ -1,35 +1,27 @@
-//@flow
-import React from "react";
-import { Link } from "react-router-dom";
-import injectSheet from "react-jss";
-import classNames from "classnames";
-
-const styles = {
-  link: {
-    pointerEvents: "all",
-    marginRight: "1.25rem !important"
-  }
-};
-
-type Props = {
-  to: string,
-  iconClass: string,
-
-  // context props
-  classes: any
-};
-
-class RepositoryEntryLink extends React.Component<Props> {
-  render() {
-    const { to, iconClass, classes } = this.props;
-    return (
-      <Link className={classNames("level-item", classes.link)} to={to}>
-        <span className="icon is-small">
-          <i className={classNames("fa", iconClass)} />
-        </span>
-      </Link>
-    );
-  }
-}
-
-export default injectSheet(styles)(RepositoryEntryLink);
+//@flow
+import React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import { Icon } from "@scm-manager/ui-components";
+
+type Props = {
+  to: string,
+  icon: string
+};
+
+const PointerEventsLink = styled(Link)`
+  pointer-events: all;
+`;
+
+class RepositoryEntryLink extends React.Component<Props> {
+  render() {
+    const { to, icon } = this.props;
+    return (
+      <PointerEventsLink className="level-item" to={to}>
+        <Icon className="fa-lg" name={icon} color="inherit" />
+      </PointerEventsLink>
+    );
+  }
+}
+
+export default RepositoryEntryLink;
--- a/scm-ui/ui-webapp/src/repos/permissions/containers/SinglePermission.js
+++ b/scm-ui/ui-webapp/src/repos/permissions/containers/SinglePermission.js
@@ -1,7 +1,11 @@
 // @flow
 import React from "react";
-import type { RepositoryRole, Permission } from "@scm-manager/ui-types";
+import { connect } from "react-redux";
+import type { History } from "history";
 import { translate } from "react-i18next";
+import styled from "styled-components";
+import type { RepositoryRole, Permission } from "@scm-manager/ui-types";
+import { Button, Icon } from "@scm-manager/ui-components";
 import {
  modifyPermission,
  isModifyPermissionPending,
@@ -9,14 +13,9 @@ import {
  isDeletePermissionPending,
  findVerbsForRole
 } from "../modules/permissions";
-import { connect } from "react-redux";
-import type { History } from "history";
-import { Button, Icon } from "@scm-manager/ui-components";
 import DeletePermissionButton from "../components/buttons/DeletePermissionButton";
 import RoleSelector from "../components/RoleSelector";
 import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
-import classNames from "classnames";
-import injectSheet from "react-jss";

 type Props = {
  availableRepositoryRoles: RepositoryRole[],
@@ -39,8 +38,7 @@ type Props = {
    namespace: string,
    name: string
  ) => void,
-  deleteLoading: boolean,
-  classes: any
+  deleteLoading: boolean
 };

 type State = {
@@ -48,15 +46,14 @@ type State = {
  showAdvancedDialog: boolean
 };

-const styles = {
-  centerMiddle: {
-    display: "table-cell",
-    verticalAlign: "middle !important"
-  },
-  columnWidth: {
-    width: "100%"
-  }
-};
+const FullWidthTr = styled.tr`
+  width: 100%;
+`;
+
+const VCenteredTd = styled.td`
+  display: table-cell;
+  vertical-align: middle !important;
+`;

 class SinglePermission extends React.Component<Props, State> {
  constructor(props: Props) {
@@ -103,16 +100,15 @@ class SinglePermission extends React.Component<Props, State> {
  };

  render() {
-    const { permission, showAdvancedDialog } = this.state;
    const {
-      t,
      availableRepositoryRoles,
      availableRepositoryVerbs,
      loading,
      namespace,
      repoName,
-      classes
+      t
    } = this.props;
+    const { permission, showAdvancedDialog } = this.state;
    const availableRoleNames =
      !!availableRepositoryRoles && availableRepositoryRoles.map(r => r.name);
    const readOnly = !this.mayChangePermissions();
@@ -151,18 +147,18 @@ class SinglePermission extends React.Component<Props, State> {
      );

    return (
-      <tr className={classes.columnWidth}>
-        <td className={classes.centerMiddle}>
+      <FullWidthTr>
+        <VCenteredTd>
          {iconType} {permission.name}
-        </td>
+        </VCenteredTd>
        {roleSelector}
-        <td className={classes.centerMiddle}>
+        <VCenteredTd>
          <Button
            label={t("permission.advanced-button.label")}
            action={this.handleDetailedPermissionsPressed}
          />
-        </td>
-        <td className={classNames("is-darker", classes.centerMiddle)}>
+        </VCenteredTd>
+        <VCenteredTd className="is-darker">
          <DeletePermissionButton
            permission={permission}
            namespace={namespace}
@@ -171,8 +167,8 @@ class SinglePermission extends React.Component<Props, State> {
            loading={this.props.deleteLoading}
          />
          {advancedDialog}
-        </td>
-      </tr>
+        </VCenteredTd>
+      </FullWidthTr>
    );
  }

@@ -274,4 +270,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
  mapStateToProps,
  mapDispatchToProps
-)(translate("repos")(injectSheet(styles)(SinglePermission)));
+)(translate("repos")(SinglePermission));
--- a/scm-ui/ui-webapp/src/repos/sources/components/FileTree.js
+++ b/scm-ui/ui-webapp/src/repos/sources/components/FileTree.js
@@ -1,9 +1,11 @@
 //@flow
 import React from "react";
-import { translate } from "react-i18next";
+import { compose } from "redux";
 import { connect } from "react-redux";
-import injectSheet from "react-jss";
-import FileTreeLeaf from "./FileTreeLeaf";
+import { withRouter } from "react-router-dom";
+import { translate } from "react-i18next";
+import styled from "styled-components";
+import { binder } from "@scm-manager/ui-extensions";
 import type { Repository, File } from "@scm-manager/ui-types";
 import {
  ErrorNotification,
@@ -15,15 +17,7 @@ import {
  isFetchSourcesPending,
  getSources
 } from "../modules/sources";
-import { withRouter } from "react-router-dom";
-import { compose } from "redux";
-import { binder } from "@scm-manager/ui-extensions";
-
-const styles = {
-  iconColumn: {
-    width: "16px"
-  }
-};
+import FileTreeLeaf from "./FileTreeLeaf";

 type Props = {
  loading: boolean,
@@ -33,12 +27,16 @@ type Props = {
  revision: string,
  path: string,
  baseUrl: string,
+
  // context props
-  classes: any,
  t: string => string,
  match: any
 };

+const FixedWidthTh = styled.th`
+  width: 16px;
+`;
+
 export function findParent(path: string) {
  if (path.endsWith("/")) {
    path = path.substring(0, path.length - 1);
@@ -70,7 +68,7 @@ class FileTree extends React.Component<Props> {
  }

  renderSourcesTable() {
-    const { tree, revision, path, baseUrl, classes, t } = this.props;
+    const { tree, revision, path, baseUrl, t } = this.props;

    const files = [];

@@ -114,7 +112,7 @@ class FileTree extends React.Component<Props> {
        <table className="table table-hover table-sm is-fullwidth">
          <thead>
            <tr>
-              <th className={classes.iconColumn} />
+              <FixedWidthTh />
              <th>{t("sources.file-tree.name")}</th>
              <th className="is-hidden-mobile">
                {t("sources.file-tree.length")}
@@ -165,4 +163,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
 export default compose(
  withRouter,
  connect(mapStateToProps)
-)(injectSheet(styles)(translate("repos")(FileTree)));
+)(translate("repos")(FileTree));
--- a/scm-ui/ui-webapp/src/repos/sources/components/FileTreeLeaf.js
+++ b/scm-ui/ui-webapp/src/repos/sources/components/FileTreeLeaf.js
@@ -1,30 +1,22 @@
 //@flow
 import * as React from "react";
-import injectSheet from "react-jss";
+import { Link } from "react-router-dom";
+import classNames from "classnames";
+import styled from "styled-components";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
+import type { File } from "@scm-manager/ui-types";
 import { DateFromNow, FileSize } from "@scm-manager/ui-components";
 import FileIcon from "./FileIcon";
-import { Link } from "react-router-dom";
-import type { File } from "@scm-manager/ui-types";
-import classNames from "classnames";
-import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
-
-const styles = {
-  iconColumn: {
-    width: "16px"
-  },
-  wordBreakMinWidth: {
-    minWidth: "10em"
-  }
-};

 type Props = {
  file: File,
-  baseUrl: string,
-
-  // context props
-  classes: any
+  baseUrl: string
 };

+const MinWidthTd = styled.td`
+  min-width: 10em;
+`;
+
 export function createLink(base: string, file: File) {
  let link = base;
  if (file.path) {
@@ -40,7 +32,7 @@ export function createLink(base: string, file: File) {
  return link;
 }

-class FileTreeLeaf extends React.Component<Props> {
+export default class FileTreeLeaf extends React.Component<Props> {
  createLink = (file: File) => {
    return createLink(this.props.baseUrl, file);
  };
@@ -68,29 +60,23 @@ class FileTreeLeaf extends React.Component<Props> {
  };

  render() {
-    const { file, classes } = this.props;
+    const { file } = this.props;

    const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;

    return (
      <tr>
-        <td className={classes.iconColumn}>{this.createFileIcon(file)}</td>
-        <td className={classNames(classes.wordBreakMinWidth, "is-word-break")}>
+        <td>{this.createFileIcon(file)}</td>
+        <MinWidthTd className="is-word-break">
          {this.createFileName(file)}
-        </td>
+        </MinWidthTd>
        <td className="is-hidden-mobile">{fileSize}</td>
        <td className="is-hidden-mobile">
          <DateFromNow date={file.lastModified} />
        </td>
-        <td
-          className={classNames(
-            classes.wordBreakMinWidth,
-            "is-word-break",
-            "is-hidden-mobile"
-          )}
-        >
+        <MinWidthTd className={classNames("is-word-break", "is-hidden-mobile")}>
          {file.description}
-        </td>
+        </MinWidthTd>
        {binder.hasExtension("repos.sources.tree.row.right") && (
          <td className="is-hidden-mobile">
            {!file.directory && (
@@ -106,5 +92,3 @@ class FileTreeLeaf extends React.Component<Props> {
    );
  }
 }
-
-export default injectSheet(styles)(FileTreeLeaf);
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.js
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.js
@@ -4,12 +4,13 @@ import { translate } from "react-i18next";
 import { ButtonAddons, Button } from "@scm-manager/ui-components";

 type Props = {
+  className?: string,
  t: string => string,
  historyIsSelected: boolean,
  showHistory: boolean => void
 };

-class FileButtonGroup extends React.Component<Props> {
+class FileButtonAddons extends React.Component<Props> {
  showHistory = () => {
    this.props.showHistory(true);
  };
@@ -23,10 +24,10 @@ class FileButtonGroup extends React.Component<Props> {
  };

  render() {
-    const { t, historyIsSelected } = this.props;
+    const { className, t, historyIsSelected } = this.props;

    return (
-      <ButtonAddons>
+      <ButtonAddons className={className}>
        <div title={t("sources.content.sourcesButton")}>
          <Button
            action={this.showSources}
@@ -54,4 +55,4 @@ class FileButtonGroup extends React.Component<Props> {
  }
 }

-export default translate("repos")(FileButtonGroup);
+export default translate("repos")(FileButtonAddons);
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.js
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.js
@@ -1,21 +1,21 @@
 // @flow
 import React from "react";
+import { connect } from "react-redux";
 import { translate } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import type { File, Repository } from "@scm-manager/ui-types";
 import {
  DateFromNow,
-  ButtonGroup,
  FileSize,
-  ErrorNotification
+  ErrorNotification,
+  Icon
 } from "@scm-manager/ui-components";
-import injectSheet from "react-jss";
-import classNames from "classnames";
-import FileButtonGroup from "../components/content/FileButtonGroup";
+import { getSources } from "../modules/sources";
+import FileButtonAddons from "../components/content/FileButtonAddons";
 import SourcesView from "./SourcesView";
 import HistoryView from "./HistoryView";
-import { getSources } from "../modules/sources";
-import { connect } from "react-redux";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";

 type Props = {
  loading: boolean,
@@ -23,7 +23,8 @@ type Props = {
  repository: Repository,
  revision: string,
  path: string,
-  classes: any,
+
+  // context props
  t: string => string
 };

@@ -33,21 +34,25 @@ type State = {
  errorFromExtension?: Error
 };

-const styles = {
-  pointer: {
-    cursor: "pointer"
-  },
-  marginInHeader: {
-    marginRight: "0.5em"
-  },
-  isVerticalCenter: {
-    display: "flex",
-    alignItems: "center"
-  },
-  hasBackground: {
-    backgroundColor: "#FBFBFB"
-  }
-};
+const VCenteredChild = styled.article`
+  align-items: center;
+`;
+
+const RightMarginIcon = styled(Icon)`
+  margin-right: 0.5em;
+`;
+
+const RightMarginFileButtonAddons = styled(FileButtonAddons)`
+  margin-right: 0.5em;
+`;
+
+const LighterGreyBackgroundPanelBlock = styled.div`
+  background-color: #fbfbfb;
+`;
+
+const LighterGreyBackgroundTable = styled.table`
+  background-color: #fbfbfb;
+`;

 class Content extends React.Component<Props, State> {
  constructor(props: Props) {
@@ -77,12 +82,12 @@ class Content extends React.Component<Props, State> {
  };

  showHeader() {
-    const { file, revision, classes } = this.props;
+    const { file, revision } = this.props;
    const { showHistory, collapsed } = this.state;
-    const icon = collapsed ? "fa-angle-right" : "fa-angle-down";
+    const icon = collapsed ? "angle-right" : "angle-down";

    const selector = file._links.history ? (
-      <FileButtonGroup
+      <RightMarginFileButtonAddons
        file={file}
        historyIsSelected={showHistory}
        showHistory={(changeShowHistory: boolean) =>
@@ -92,20 +97,14 @@ class Content extends React.Component<Props, State> {
    ) : null;

    return (
-      <span className={classes.pointer}>
-        <article className={classNames("media", classes.isVerticalCenter)}>
+      <span className="has-cursor-pointer">
+        <VCenteredChild className={classNames("media", "is-flex")}>
          <div className="media-content" onClick={this.toggleCollapse}>
-            <i
-              className={classNames(
-                "fa is-medium",
-                icon,
-                classes.marginInHeader
-              )}
-            />
+            <RightMarginIcon name={icon} color="inherit" />
            <span className="is-word-break">{file.name}</span>
          </div>
          <div className="buttons is-grouped">
-            <div className={classes.marginInHeader}>{selector}</div>
+            {selector}
            <ExtensionPoint
              name="repos.sources.content.actionbar"
              props={{
@@ -116,14 +115,14 @@ class Content extends React.Component<Props, State> {
              renderAll={true}
            />
          </div>
-        </article>
+        </VCenteredChild>
      </span>
    );
  }

  showMoreInformation() {
    const collapsed = this.state.collapsed;
-    const { classes, file, revision, t, repository } = this.props;
+    const { file, revision, t, repository } = this.props;
    const date = <DateFromNow date={file.lastModified} />;
    const description = file.description ? (
      <p>
@@ -140,8 +139,8 @@ class Content extends React.Component<Props, State> {
    const fileSize = file.directory ? "" : <FileSize bytes={file.length} />;
    if (!collapsed) {
      return (
-        <div className={classNames("panel-block", classes.hasBackground)}>
-          <table className={classNames("table", classes.hasBackground)}>
+        <LighterGreyBackgroundPanelBlock className="panel-block">
+          <LighterGreyBackgroundTable className="table">
            <tbody>
              <tr>
                <td>{t("sources.content.path")}</td>
@@ -169,8 +168,8 @@ class Content extends React.Component<Props, State> {
                props={{ file, repository, revision }}
              />
            </tbody>
-          </table>
-        </div>
+          </LighterGreyBackgroundTable>
+        </LighterGreyBackgroundPanelBlock>
      );
    }
    return null;
@@ -217,6 +216,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
  };
 };

-export default injectSheet(styles)(
-  connect(mapStateToProps)(translate("repos")(Content))
-);
+export default connect(mapStateToProps)(translate("repos")(Content));
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Sources.js
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Sources.js
@@ -116,7 +116,6 @@ class Sources extends React.Component<Props, State> {
    const {
      repository,
      baseUrl,
-      branches,
      loading,
      error,
      revision,
@@ -124,8 +123,6 @@ class Sources extends React.Component<Props, State> {
      currentFileIsDirectory
    } = this.props;

-    const { selectedBranch } = this.state;
-
    if (error) {
      return <ErrorNotification error={error} />;
    }
@@ -138,17 +135,7 @@ class Sources extends React.Component<Props, State> {
      return (
        <div className="panel">
          {this.renderBranchSelector()}
-          <Breadcrumb
-            revision={encodeURIComponent(revision)}
-            path={path}
-            baseUrl={baseUrl}
-            branch={selectedBranch}
-            defaultBranch={
-              branches && branches.filter(b => b.defaultBranch === true)[0]
-            }
-            branches={branches && branches}
-            repository={repository}
-          />
+          {this.renderBreadcrumb()}
          <FileTree
            repository={repository}
            revision={revision}
@@ -183,6 +170,28 @@ class Sources extends React.Component<Props, State> {
    }
    return null;
  };
+
+  renderBreadcrumb = () => {
+    const { revision, path, baseUrl, branches, repository } = this.props;
+    const { selectedBranch } = this.state;
+
+    if (revision) {
+      return (
+        <Breadcrumb
+          revision={encodeURIComponent(revision)}
+          path={path}
+          baseUrl={baseUrl}
+          branch={selectedBranch}
+          defaultBranch={
+            branches && branches.filter(b => b.defaultBranch === true)[0]
+          }
+          branches={branches && branches}
+          repository={repository}
+        />
+      );
+    }
+    return null;
+  };
 }

 const mapStateToProps = (state, ownProps) => {