Add footer extension points for links and avatar

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+### Added
+- Added footer extension points for links and avatar 
+
 ## 2.0.0-rc4 - 2020-02-14
 ### Added
 - Support for Java versions > 8

scm-ui/ui-components/src/avatar/AvatarImage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {FC} from "react";
 import { binder } from "@scm-manager/ui-extensions";
 import { Image } from "..";
 import { Person } from "./Avatar";
@@ -6,21 +6,20 @@ import { EXTENSION_POINT } from "./Avatar";
 
 type Props = {
   person: Person;
+  representation?: "rounded" | "rounded-border";
 };
 
-class AvatarImage extends React.Component<Props> {
+const AvatarImage:FC<Props> = ({person, representation = "rounded-border"}) => {
-  render() {
-    const { person } = this.props;
-
     const avatarFactory = binder.getExtension(EXTENSION_POINT);
     if (avatarFactory) {
       const avatar = avatarFactory(person);
 
-      return <Image className="has-rounded-border" src={avatar} alt={person.name} />;
+      const className = representation === "rounded" ? "is-rounded" : "has-rounded-border";
+
+      return <Image className={className} src={avatar} alt={person.name} />;
     }
 
     return null;
-  }
+};
-}
 
 export default AvatarImage;

scm-ui/ui-components/src/layout/Footer.tsx

@@ -1,23 +1,66 @@
 import React from "react";
-import { Me } from "@scm-manager/ui-types";
+import { Me, Links } from "@scm-manager/ui-types";
 import { Link } from "react-router-dom";
+import { binder } from "@scm-manager/ui-extensions";
+import { AvatarWrapper, AvatarImage } from "../avatar";
 
 type Props = {
   me?: Me;
+  version: string;
+  links: Links;
 };
 
+const RestDocLink = () => {
+  return <a href="">Rest Documentation</a>;
+};
+
+binder.bind("footer.links", RestDocLink);
+
 class Footer extends React.Component<Props> {
   render() {
-    const { me } = this.props;
+    const { me, version, links } = this.props;
     if (!me) {
       return "";
     }
+
+    const extensions = binder.getExtensions("footer.links", { me, links });
+
     return (
       <footer className="footer">
-        <div className="container is-centered">
+        <div className="container is-centered has-text-centered ">
-          <p className="has-text-centered">
+          <p className="is-size-6 columns is-centered">
+            <AvatarWrapper>
+              <figure className="media-left">
+                <p className="image is-24x24 is-rounded">
+                  <AvatarImage person={me} representation="rounded" />
+                </p>
+              </figure>
+            </AvatarWrapper>
             <Link to={"/me"}>{me.displayName}</Link>
           </p>
+          <hr className={"has-background-grey-lighter"} />
+          <p>
+            <a href="https://www.scm-manager.org/" target="_blank">
+              SCM-Manager {version}
+            </a>
+            {extensions.map(Ext => (
+              <>
+                {" "}
+                | <Ext />
+              </>
+            ))}
+          </p>
+          <br />
+          <p>
+            Powered by{" "}
+            <a target="_blank" href="https://cloudogu.com/">
+              Cloudogu GmbH
+            </a>{" "}
+            | Learn more at{" "}
+            <a href="https://www.scm-manager.org/" target="_blank">
+              SCM-Manager
+            </a>
+          </p>
         </div>
       </footer>
     );

scm-ui/ui-styles/src/scm.scss

@@ -67,8 +67,10 @@ hr.header-with-actions {
   }
 }
 
-.footer {
+footer.footer {
-  height: 50px;
+  //height: 100px;
+  background-color: whitesmoke;
+  padding: 2rem 1.5rem 1rem;
 }
 
 // 6. Import the rest of Bulma
@@ -691,11 +693,6 @@ form .field:not(.is-grouped) {
   }
 }
 
-// footer
-.footer {
-  background-color: whitesmoke;
-}
-
 // aside
 .aside-background {
   bottom: 0;

scm-ui/ui-webapp/src/containers/App.tsx

@@ -8,6 +8,7 @@ import { fetchMe, getFetchMeFailure, getMe, isAuthenticated, isFetchMePending }
 import { ErrorPage, Footer, Header, Loading, PrimaryNavigation } from "@scm-manager/ui-components";
 import { Links, Me } from "@scm-manager/ui-types";
 import {
+  getAppVersion,
   getFetchIndexResourcesFailure,
   getLinks,
   getMeLink,
@@ -21,6 +22,7 @@ type Props = WithTranslation & {
   loading: boolean;
   links: Links;
   meLink: string;
+  version: string;
 
   // dispatcher functions
   fetchMe: (link: string) => void;
@@ -34,7 +36,7 @@ class App extends Component<Props> {
   }
 
   render() {
-    const { me, loading, error, authenticated, links, t } = this.props;
+    const { me, loading, error, authenticated, links, version, t } = this.props;
 
     let content;
     const navigation = authenticated ? <PrimaryNavigation links={links} /> : "";
@@ -50,7 +52,7 @@ class App extends Component<Props> {
       <div className="App">
         <Header>{navigation}</Header>
         {content}
-        {authenticated && <Footer me={me} />}
+        {authenticated && <Footer me={me} version={version} links={links} />}
       </div>
     );
   }
@@ -69,13 +71,15 @@ const mapStateToProps = (state: any) => {
   const error = getFetchMeFailure(state) || getFetchIndexResourcesFailure(state);
   const links = getLinks(state);
   const meLink = getMeLink(state);
+  const version = getAppVersion(state);
   return {
     authenticated,
     me,
     loading,
     error,
     links,
-    meLink
+    meLink,
+    version
   };
 };