Small header (#1721)

Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>

scm-ui/ui-components/src/navigation/PrimaryNavigation.tsx

@@ -21,86 +21,59 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ReactNode } from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC, ReactNode } from "react";
 import PrimaryNavigationLink from "./PrimaryNavigationLink";
 import { Links } from "@scm-manager/ui-types";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { urls } from "@scm-manager/ui-api";
-import { withRouter, RouteComponentProps } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
-type Props = RouteComponentProps & WithTranslation & {
+type Props = {
   links: Links;
 };
 
 type Appender = (to: string, match: string, label: string, linkName: string) => void;
 
-class PrimaryNavigation extends React.Component<Props> {
-  createNavigationAppender = (navigationItems: ReactNode[]): Appender => {
-    const { t, links } = this.props;
+const PrimaryNavigation: FC<Props> = ({ links }) => {
+  const [t] = useTranslation("commons");
+  const location = useLocation();
 
+  const createNavigationAppender = (navItems: ReactNode[]): Appender => {
     return (to: string, match: string, label: string, linkName: string) => {
       const link = links[linkName];
       if (link) {
-        const navigationItem = <PrimaryNavigationLink testId={label.replace(".", "-")} to={to} match={match} label={t(label)} key={linkName} />;
-        navigationItems.push(navigationItem);
+        const navigationItem = (
+          <PrimaryNavigationLink
+            testId={label.replace(".", "-")}
+            to={to}
+            match={match}
+            label={t(label)}
+            key={linkName}
+            className="navbar-item"
+          />
+        );
+        navItems.push(navigationItem);
       }
     };
   };
 
-  appendLogout = (navigationItems: ReactNode[], append: Appender) => {
-    const { t, links } = this.props;
+  const createNavigationItems = () => {
+    const navItems: ReactNode[] = [];
 
-    const props = {
+    const extensionProps = {
       links,
-      label: t("primary-navigation.logout")
+      label: t("primary-navigation.first-menu"),
     };
 
-    if (binder.hasExtension("primary-navigation.logout", props)) {
-      navigationItems.push(
-        <ExtensionPoint key="primary-navigation.logout" name="primary-navigation.logout" props={props} />
-      );
-    } else {
-      append("/logout", "/logout", "primary-navigation.logout", "logout");
-    }
-  };
-
-  appendLogin = (navigationItems: ReactNode[], append: Appender) => {
-    const { t, links, location } = this.props;
-
-    const from = location.pathname;
-    const loginPath = "/login";
-    const to = `${loginPath}?from=${encodeURIComponent(from)}`;
-
-    const props = {
-      links,
-      label: t("primary-navigation.login"),
-      loginUrl: urls.withContextPath(loginPath),
-      from
-    };
-
-    if (binder.hasExtension("primary-navigation.login", props)) {
-      navigationItems.push(
-        <ExtensionPoint key="primary-navigation.login" name="primary-navigation.login" props={props} />
-      );
-    } else {
-      append(to, "/login", "primary-navigation.login", "login");
-    }
-  };
-
-  createNavigationItems = () => {
-    const navigationItems: ReactNode[] = [];
-    const { t, links } = this.props;
-
-    const props = {
-      links,
-      label: t("primary-navigation.first-menu")
-    };
-
-    const append = this.createNavigationAppender(navigationItems);
-    if (binder.hasExtension("primary-navigation.first-menu", props)) {
-      navigationItems.push(
-        <ExtensionPoint key="primary-navigation.first-menu" name="primary-navigation.first-menu" props={props} />
+    const append = createNavigationAppender(navItems);
+    if (binder.hasExtension("primary-navigation.first-menu", extensionProps)) {
+      navItems.push(
+        <ExtensionPoint
+          key="primary-navigation.first-menu"
+          name="primary-navigation.first-menu"
+          props={extensionProps}
+        />
       );
     }
     append("/repos/", "/(repo|repos)", "primary-navigation.repositories", "repositories");
@@ -108,32 +81,21 @@ class PrimaryNavigation extends React.Component<Props> {
     append("/groups/", "/(group|groups)", "primary-navigation.groups", "groups");
     append("/admin", "/admin", "primary-navigation.admin", "config");
 
-    navigationItems.push(
+    navItems.push(
       <ExtensionPoint
         key="primary-navigation"
         name="primary-navigation"
         renderAll={true}
         props={{
-          links: this.props.links
+          links,
         }}
       />
     );
 
-    this.appendLogout(navigationItems, append);
-    this.appendLogin(navigationItems, append);
-
-    return navigationItems;
+    return navItems;
   };
 
-  render() {
-    const navigationItems = this.createNavigationItems();
+  return <>{createNavigationItems()}</>;
+};
 
-    return (
-      <nav className="tabs is-boxed mb-0">
-        <ul>{navigationItems}</ul>
-      </nav>
-    );
-  }
-}
-
-export default withTranslation("commons")(withRouter(PrimaryNavigation));
+export default PrimaryNavigation;

scm-ui/ui-components/src/navigation/PrimaryNavigationLink.tsx

@@ -21,42 +21,31 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import * as React from "react";
-import { Route, Link } from "react-router-dom";
+import React, { FC } from "react";
+import { useRouteMatch, Link } from "react-router-dom";
 import { createAttributesForTesting } from "../devBuild";
+import classNames from "classnames";
 
 type Props = {
   to: string;
+  match: string;
   label: string;
-  match?: string;
-  activeOnlyWhenExact?: boolean;
   testId?: string;
+  className?: string;
 };
 
-class PrimaryNavigationLink extends React.Component<Props> {
-  renderLink = (route: any) => {
-    const { to, label, testId } = this.props;
-    return (
-      <li className={route.match ? "is-active" : ""}>
-        <Link to={to} {...createAttributesForTesting(testId)}>
-          {label}
-        </Link>
-      </li>
-    );
-  };
+const PrimaryNavigationLink: FC<Props> = ({ to, match, testId, label, className }) => {
+  const routeMatch = useRouteMatch({ path: match });
 
-  render() {
-    const { to, match, activeOnlyWhenExact, testId } = this.props;
-    const path = match ? match : to;
-    return (
-      <Route
-        path={path}
-        exact={activeOnlyWhenExact}
-        children={this.renderLink}
-        {...createAttributesForTesting(testId)}
-      />
-    );
-  }
-}
+  return (
+    <Link
+      to={to}
+      className={classNames(className, "navbar-item", { "is-active": routeMatch })}
+      {...createAttributesForTesting(testId)}
+    >
+      {label}
+    </Link>
+  );
+};
 
 export default PrimaryNavigationLink;