scm-ui: new repository layout

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

@@ -0,0 +1,93 @@
+// @flow
+import React from "react";
+import {connect} from "react-redux";
+import injectSheet from "react-jss";
+import {translate} from "react-i18next";
+import classNames from "classnames";
+import {Image, Loading, Subtitle, Title} from "@scm-manager/ui-components";
+import {getAppVersion} from "../../modules/indexResource";
+
+type Props = {
+  loading: boolean,
+  error: Error,
+
+  version: string,
+
+  // context props
+  classes: any,
+  t: string => string
+};
+
+const styles = {
+  boxShadow: {
+    boxShadow: "0 2px 3px rgba(40, 177, 232, 0.1), 0 0 0 2px rgb(40, 177, 232, 0.2)"
+  },
+  boxTitle: {
+    fontWeight: "500 !important"
+  },
+  imagePadding: {
+    padding: "0.2rem 0.4rem"
+  }
+};
+
+class AdminDetails extends React.Component<Props> {
+  render() {
+    const {loading, classes, t} = this.props;
+
+    if (loading) {
+      return <Loading/>;
+    }
+
+    return (
+      <>
+        <Title title={t("admin.info.currentAppVersion")}/>
+        <Subtitle subtitle={this.props.version}/>
+        <div className={classNames("box", classes.boxShadow)}>
+          <article className="media">
+            <div className={classNames("media-left", classes.imagePadding)}>
+              <Image
+                src="/images/iconCommunitySupport.png"
+                alt={t("admin.info.communityIconAlt")}
+              />
+            </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" target="_blank"
+                   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={classNames("media-left", classes.imagePadding)}>
+              <Image
+                src="/images/iconEnterpriseSupport.png"
+                alt={t("admin.info.enterpriseIconAlt")}
+              />
+            </div>
+            <div className="media-content">
+              <div className="content">
+                <h3 className={classes.boxTitle}>{t("admin.info.enterpriseTitle")}</h3>
+                <p>{t("admin.info.enterpriseInfo")}<br/><strong>{t("admin.info.enterprisePartner")}</strong></p>
+                <a className="button is-info is-pulled-right is-normal" target="_blank"
+                   href={t("admin.info.enterpriseLink")}>{t("admin.info.enterpriseButton")}</a>
+              </div>
+            </div>
+          </article>
+        </div>
+      </>
+    );
+  }
+}
+
+const mapStateToProps = (state: any) => {
+  const version = getAppVersion(state);
+  return {
+    version
+  };
+};
+
+export default connect(mapStateToProps)(injectSheet(styles)(translate("admin")(AdminDetails)));