added support information on admin overview page

scm-ui/public/locales/de/admin.json

@@ -7,7 +7,16 @@
       "generalNavLink": "Generell"
     },
     "information":  {
-      "currentAppVersion": "Aktuelle Software-Versionsnummer"
+      "currentAppVersion": "Aktuelle Software-Versionsnummer",
+      "communityTitle": "Community Support",
+      "communityIconAlt": "Community Support Icon",
+      "communityInfo": "Das Cloudogu Support-Team steht für allgemeine Fragen rund um SCM-Manager, die Meldung von Fehlern sowie Anfragen von Features gerne für Sie über unsere offiziellen Kanäle bereit.",
+      "communityButton": "Unser Team kontaktieren",
+      "enterpriseTitle": "Enterprise Support",
+      "enterpriseIconAlt": "Enterprise Support Icon",
+      "enterpriseInfo": "Sie benötigen technische Unterstützung für Ihr Unternehmen oder haben Bedarf an einem für Sie entwickelten SCM-Manager Plugin? Gerne helfen wir Ihnen bei Ihren individuellen Anforderungen für die SCM-Manager Nutzung weiter.<br /><strong>Kontaktieren Sie das SCM-Manager Support Team bei unserem Entwicklungs-Partner Cloudogu für ein unverbindliches Angebot.</strong>",
+      "enterpriseLink": "https://cloudogu.com/de/scm-manager-enterprise/",
+      "enterpriseButton": "Enterprise Support anfragen"
     }
   },
   "plugins": {

scm-ui/public/locales/en/admin.json

@@ -6,8 +6,17 @@
       "settingsNavLink": "Settings",
       "generalNavLink": "General"
     },
-    "information":  {
+    "info":  {
-      "currentAppVersion": "Current Application Version"
+      "currentAppVersion": "Current Application Version",
+      "communityTitle": "Community Support",
+      "communityIconAlt": "Community Support Icon",
+      "communityInfo": "The Cloudogu support team is available for general questions about SCM-Manager, bug reporting and feature requests through our official channels.",
+      "communityButton": "Contact our team",
+      "enterpriseTitle": "Enterprise Support",
+      "enterpriseIconAlt": "Enterprise Support Icon",
+      "enterpriseInfo": "You need technical support for your company or you need a SCM-Manager plugin developed for you? We are happy to help you with your individual requirements for SCM-Manager use.<br /><strong>Contact the SCM-Manager Support Team at our development partner Cloudogu for a non-binding offer.</strong>",
+      "enterpriseLink": "https://cloudogu.com/en/scm-manager-enterprise/",
+      "enterpriseButton": "Request Enterprise Support"
     }
   },
   "plugins": {

scm-ui/src/admin/containers/AdminDetails.js

@@ -1,8 +1,15 @@
 // @flow
 import React from "react";
 import { connect } from "react-redux";
+import injectSheet from "react-jss";
 import { translate } from "react-i18next";
-import { Loading, Title, Subtitle } from "@scm-manager/ui-components";
+import classNames from "classnames";
+import {
+  Loading,
+  Title,
+  Subtitle,
+  Image
+} from "@scm-manager/ui-components";
 import { getAppVersion } from "../../modules/indexResource";
 
 type Props = {
@@ -11,13 +18,23 @@ type Props = {
 
   version: string,
 
-  // context objects
+  // context props
+  classes: any,
   t: string => string
 };
 
+const styles = {
+  boxShadow: {
+    boxShadow: "0 2px 3px rgba(40, 177, 232, 0.1), 0 0 0 1px rgb(40, 177, 232)"
+  },
+  boxTitle: {
+    fontWeight: "500 !important"
+  }
+};
+
 class AdminDetails extends React.Component<Props> {
   render() {
-    const { t, loading } = this.props;
+    const { loading, classes, t } = this.props;
 
     if (loading) {
       return <Loading />;
@@ -25,8 +42,46 @@ class AdminDetails extends React.Component<Props> {
 
     return (
       <>
-        <Title title={t("admin.information.currentAppVersion")} />
+        <Title title={t("admin.info.currentAppVersion")} />
         <Subtitle subtitle={this.props.version} />
+        <div className={classNames("box", classes.boxShadow)}>
+          <article className="media">
+            <div className="media-left">
+              <figure className="image is-64x64">
+                <Image
+                  src="/images/iconCommunitySupport.png"
+                  alt={t("admin.info.communityIconAlt")}
+                />
+              </figure>
+            </div>
+            <div className="media-content">
+              <div className="content">
+                <h3 className={classes.boxTitle}>{t("admin.info.communityTitle")}</h3>
+                <p>{t("admin.info.communityInfo")}</p>
+                <a className="button is-info is-pulled-right" href="https://scm-manager.org/support/">{t("admin.info.communityButton")}</a>
+              </div>
+            </div>
+          </article>
+        </div>
+        <div className={classNames("box", classes.boxShadow)}>
+          <article className="media">
+            <div className="media-left">
+              <figure className="image is-64x64">
+                <Image
+                  src="/images/iconEnterpriseSupport.png"
+                  alt={t("admin.info.enterpriseIconAlt")}
+                />
+              </figure>
+            </div>
+            <div className="media-content">
+              <div className="content">
+                <h3 className={classes.boxTitle}>{t("admin.info.enterpriseTitle")}</h3>
+                <p>{t("admin.info.enterpriseInfo")}</p>
+                <a className="button is-info is-pulled-right" href={t("admin.info.enterpriseLink")}>{t("admin.info.enterpriseButton")}</a>
+              </div>
+            </div>
+          </article>
+        </div>
       </>
     );
   }
@@ -39,4 +94,4 @@ const mapStateToProps = (state: any) => {
   };
 };
 
-export default connect(mapStateToProps)(translate("admin")(AdminDetails));
+export default connect(mapStateToProps)(injectSheet(styles)(translate("admin")(AdminDetails)));