From 4edf5d6f35d42994919a17fb24299d4980f86672 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Thu, 9 Aug 2018 10:18:12 +0200
Subject: [PATCH] added global navigation

---
 scm-ui/src/config/containers/Config.js       | 52 ++++++++++++++++++--
 scm-ui/src/config/containers/GlobalConfig.js | 19 +++++++
 2 files changed, 67 insertions(+), 4 deletions(-)
 create mode 100644 scm-ui/src/config/containers/GlobalConfig.js

diff --git a/scm-ui/src/config/containers/Config.js b/scm-ui/src/config/containers/Config.js
index 47bb8b55b0..0744ae089f 100644
--- a/scm-ui/src/config/containers/Config.js
+++ b/scm-ui/src/config/containers/Config.js
@@ -1,9 +1,53 @@
-import React, { Component } from "react";
+import React from "react";
+import { translate } from "react-i18next";
+import { Route } from "react-router";
+
+import { Page } from "../../components/layout";
+import { Navigation, NavLink, Section } from "../../components/navigation";
+import GlobalConfig from "./GlobalConfig";
+import type { History } from "history";
+
+type Props = {
+  // context objects
+  t: string => string,
+  match: any,
+  history: History
+};
+
+class Config extends React.Component<Props> {
+  stripEndingSlash = (url: string) => {
+    if (url.endsWith("/")) {
+      return url.substring(0, url.length - 2);
+    }
+    return url;
+  };
+
+  matchedUrl = () => {
+    return this.stripEndingSlash(this.props.match.url);
+  };
 
-class Config extends Component {
   render() {
-    return <div>Here, Config will be shown</div>;
+    const { t } = this.props;
+
+    const url = this.matchedUrl();
+
+    return (
+      <Page title={t("config.title")}>
+        <div className="columns">
+          <div className="column is-three-quarters">
+            <Route path={url} exact component={() => <GlobalConfig />} />
+          </div>
+          <div className="column">
+            <Navigation>
+              <Section label={t("config.navigation-title")}>
+                <NavLink to={`${url}`} label={t("config.globalConfig-label")} />
+              </Section>
+            </Navigation>
+          </div>
+        </div>
+      </Page>
+    );
   }
 }
 
-export default Config;
+export default translate("config")(Config);
diff --git a/scm-ui/src/config/containers/GlobalConfig.js b/scm-ui/src/config/containers/GlobalConfig.js
new file mode 100644
index 0000000000..fde650413f
--- /dev/null
+++ b/scm-ui/src/config/containers/GlobalConfig.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { Page } from "../../components/layout";
+import type { History } from "history";
+import { translate } from "react-i18next";
+
+type Props = {
+  // context objects
+  t: string => string
+};
+
+class GlobalConfig extends React.Component<Props> {
+  render() {
+    const { t } = this.props;
+
+    return <div>Here, global config will be shown</div>;
+  }
+}
+
+export default translate("config")(GlobalConfig);