Always show SCM-Manager footer (#1826)

gradle/changelog/always_show_footer.yaml

@@ -0,0 +1,2 @@
+- type: changed
+  descripion: Always show SCM-Manager footer ([#1826](https://github.com/scm-manager/scm-manager/pull/1826))

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

@@ -23,8 +23,7 @@
  */
 import React, { FC } from "react";
 import { Image } from "..";
-import { Person } from "./Avatar";
-import { EXTENSION_POINT } from "./Avatar";
+import { EXTENSION_POINT, Person } from "./Avatar";
 import { useBinder } from "@scm-manager/ui-extensions";
 
 type Props = {

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

@@ -80,29 +80,34 @@ const TitleWithAvatar: FC<TitleWithAvatarProps> = ({ me }) => (
 const Footer: FC<Props> = ({ me, version, links }) => {
   const [t] = useTranslation("commons");
   const binder = useBinder();
-  if (!me) {
-    return null;
-  }
 
   const extensionProps = { me, url: "/me", links };
   let meSectionTile;
-  if (binder.hasExtension(EXTENSION_POINT)) {
-    meSectionTile = <TitleWithAvatar me={me} />;
-  } else {
-    meSectionTile = <TitleWithIcon title={me.displayName} icon="user-circle" />;
+  if (me) {
+    if (binder.hasExtension(EXTENSION_POINT)) {
+      meSectionTile = <TitleWithAvatar me={me} />;
+    } else {
+      meSectionTile = <TitleWithIcon title={me.displayName} icon="user-circle" />;
+    }
   }
 
   return (
     <footer className="footer">
       <section className="section container">
         <div className="columns is-size-7">
-          <FooterSection title={meSectionTile}>
-            <NavLink to="/me" label={t("footer.user.profile")} testId="footer-user-profile" />
-            {me?._links?.password && <NavLink to="/me/settings/password" label={t("profile.changePasswordNavLink")} />}
-            {me?._links?.publicKeys && <NavLink to="/me/settings/publicKeys" label={t("profile.publicKeysNavLink")} />}
-            {me?._links?.apiKeys && <NavLink to="/me/settings/apiKeys" label={t("profile.apiKeysNavLink")} />}
-            <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
-          </FooterSection>
+          {me ? (
+            <FooterSection title={meSectionTile}>
+              <NavLink to="/me" label={t("footer.user.profile")} testId="footer-user-profile" />
+              {me?._links?.password && (
+                <NavLink to="/me/settings/password" label={t("profile.changePasswordNavLink")} />
+              )}
+              {me?._links?.publicKeys && (
+                <NavLink to="/me/settings/publicKeys" label={t("profile.publicKeysNavLink")} />
+              )}
+              {me?._links?.apiKeys && <NavLink to="/me/settings/apiKeys" label={t("profile.apiKeysNavLink")} />}
+              <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
+            </FooterSection>
+          ) : null}
           <FooterSection title={<TitleWithIcon title={t("footer.information.title")} icon="info-circle" />}>
             <ExternalNavLink to="https://www.scm-manager.org/" label={`SCM-Manager ${version}`} />
             <ExtensionPoint name="footer.information" props={extensionProps} renderAll={true} />

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

@@ -29,7 +29,13 @@ import { binder } from "@scm-manager/ui-extensions";
 import Login from "./Login";
 import { useIndex, useSubject } from "@scm-manager/ui-api";
 import NavigationBar from "./NavigationBar";
+import styled from "styled-components";
 
+const AppWrapper = styled.div`
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+`;
 const App: FC = () => {
   const { data: index } = useIndex();
   const { isLoading, error, isAuthenticated, isAnonymous, me } = useSubject();
@@ -54,17 +60,17 @@ const App: FC = () => {
   } else if (error) {
     content = <ErrorPage title={t("app.error.title")} subtitle={t("app.error.subtitle")} error={error} />;
   } else if (me) {
-    content = <Main authenticated={authenticated} links={index._links} me={me} />;
+    content = <Main authenticated={authenticated} me={me} />;
   }
 
   return (
-    <div className="App">
+    <AppWrapper className="App">
       <Header authenticated={authenticated} links={index._links}>
         <NavigationBar links={index._links} />
       </Header>
-      {content}
-      {authenticated ? <Footer me={me} version={index.version} links={index._links} /> : null}
-    </div>
+      <div className="is-flex-grow-1">{content}</div>
+      <Footer me={me} version={index.version} links={index._links} />
+    </AppWrapper>
   );
 };
 

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

@@ -24,7 +24,7 @@
 import React, { FC } from "react";
 
 import { Redirect, Route, Switch } from "react-router-dom";
-import { Links, Me } from "@scm-manager/ui-types";
+import { Me } from "@scm-manager/ui-types";
 
 import Overview from "../repos/containers/Overview";
 import Users from "../users/containers/Users";
@@ -48,26 +48,16 @@ import Profile from "./Profile";
 import NamespaceRoot from "../repos/namespaces/containers/NamespaceRoot";
 import ImportLog from "../repos/importlog/ImportLog";
 import CreateRepositoryRoot from "../repos/containers/CreateRepositoryRoot";
-import styled from "styled-components";
 import Search from "../search/Search";
 import Syntax from "../search/Syntax";
 
 type Props = {
   me: Me;
   authenticated?: boolean;
-  links: Links;
 };
 
-type StyledMainProps = {
-  isSmallHeader: boolean;
-};
-
-const StyledMain = styled.div<StyledMainProps>`
-  min-height: calc(100vh - ${(props) => (props.isSmallHeader ? 250 : 210)}px);
-`;
-
 const Main: FC<Props> = (props) => {
-  const { authenticated, me, links } = props;
+  const { authenticated, me } = props;
   const redirectUrlFactory = binder.getExtension("main.redirect", props);
   let url = "/";
   if (authenticated) {
@@ -81,7 +71,7 @@ const Main: FC<Props> = (props) => {
   }
   return (
     <ErrorBoundary>
-      <StyledMain className="main" isSmallHeader={!!links.logout}>
+      <div className="main">
         <Switch>
           <Redirect exact from="/" to={url} />
           <Route exact path="/login" component={Login} />
@@ -113,7 +103,7 @@ const Main: FC<Props> = (props) => {
           <ProtectedRoute path="/help/search-syntax/" component={Syntax} authenticated={authenticated} />
           <ExtensionPoint name="main.route" renderAll={true} props={props} />
         </Switch>
-      </StyledMain>
+      </div>
     </ErrorBoundary>
   );
 };