add history and sources button to chose between view

scm-ui/src/repos/sources/components/content/ButtonGroup.js

@@ -0,0 +1,72 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Button } from "@scm-manager/ui-components";
+
+type Props = {
+  t: string => string,
+  historyIsSelected: boolean,
+  showHistory: boolean => void
+};
+
+class ButtonGroup extends React.Component<Props> {
+  showHistory = () => {
+    this.props.showHistory(true);
+  };
+
+  showSources = () => {
+    this.props.showHistory(false);
+  };
+
+  render() {
+    const { t, historyIsSelected } = this.props;
+
+    let sourcesColor = "";
+    let historyColor = "";
+
+    if (historyIsSelected) {
+      historyColor = "info is-selected";
+    } else {
+      sourcesColor = "info is-selected";
+    }
+
+    const sourcesLabel = (
+      <>
+        <span className="icon">
+          <i className="fas fa-code" />
+        </span>
+        <span className="is-hidden-mobile">
+          {t("sources.content.sourcesButton")}
+        </span>
+      </>
+    );
+
+    const historyLabel = (
+      <>
+        <span className="icon">
+          <i className="fas fa-history" />
+        </span>
+        <span className="is-hidden-mobile">
+          {t("sources.content.historyButton")}
+        </span>
+      </>
+    );
+
+    return (
+      <div className="buttons has-addons">
+        <Button
+          label={sourcesLabel}
+          color={sourcesColor}
+          action={this.showSources}
+        />
+        <Button
+          label={historyLabel}
+          color={historyColor}
+          action={this.showHistory}
+        />
+      </div>
+    );
+  }
+}
+
+export default translate("repos")(ButtonGroup);