scm-ui: new repository layout

scm-ui/ui-components/src/navigation/NavAction.js

@@ -0,0 +1,27 @@
+//@flow
+import React from "react";
+
+type Props = {
+  icon?: string,
+  label: string,
+  action: () => void
+};
+
+class NavAction extends React.Component<Props> {
+  render() {
+    const { label, icon, action } = this.props;
+
+    let showIcon = null;
+    if (icon) {
+      showIcon = (<><i className={icon}></i>{" "}</>);
+    }
+
+    return (
+      <li>
+        <a onClick={action} href="javascript:void(0);">{showIcon}{label}</a>
+      </li>
+    );
+  }
+}
+
+export default NavAction;

scm-ui/ui-components/src/navigation/NavLink.js

@@ -0,0 +1,54 @@
+//@flow
+import * as React from "react";
+import classNames from "classnames";
+import {Link, Route} from "react-router-dom";
+
+// TODO mostly copy of PrimaryNavigationLink
+
+type Props = {
+  to: string,
+  icon?: string,
+  label: string,
+  activeOnlyWhenExact?: boolean,
+  activeWhenMatch?: (route: any) => boolean
+};
+
+class NavLink extends React.Component<Props> {
+  static defaultProps = {
+    activeOnlyWhenExact: true
+  };
+
+
+  isActive(route: any) {
+    const { activeWhenMatch } = this.props;
+    return route.match || (activeWhenMatch && activeWhenMatch(route));
+  }
+
+  renderLink = (route: any) => {
+    const { to, icon, label } = this.props;
+
+    let showIcon = null;
+    if (icon) {
+      showIcon = (<><i className={classNames(icon, "fa-fw")} />{" "}</>);
+    }
+
+    return (
+      <li>
+        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
+          {showIcon}
+          {label}
+        </Link>
+      </li>
+    );
+  };
+
+  render() {
+    const { to, activeOnlyWhenExact } = this.props;
+
+    return (
+      <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />
+    );
+  }
+}
+
+export default NavLink;

scm-ui/ui-components/src/navigation/Navigation.js

@@ -0,0 +1,14 @@
+//@flow
+import * as React from "react";
+
+type Props = {
+  children?: React.Node
+};
+
+class Navigation extends React.Component<Props> {
+  render() {
+    return <aside className="menu">{this.props.children}</aside>;
+  }
+}
+
+export default Navigation;

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

@@ -0,0 +1,104 @@
+//@flow
+import React from "react";
+import { translate } from "react-i18next";
+import PrimaryNavigationLink from "./PrimaryNavigationLink";
+import type { Links } from "@scm-manager/ui-types";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
+
+type Props = {
+  t: string => string,
+  links: Links
+};
+
+class PrimaryNavigation extends React.Component<Props> {
+  createNavigationAppender = navigationItems => {
+    const { t, links } = this.props;
+
+    return (to: string, match: string, label: string, linkName: string) => {
+      const link = links[linkName];
+      if (link) {
+        const navigationItem = (
+          <PrimaryNavigationLink
+            to={to}
+            match={match}
+            label={t(label)}
+            key={linkName}
+          />
+        );
+        navigationItems.push(navigationItem);
+      }
+    };
+  };
+
+  appendLogout = (navigationItems, append) => {
+    const { t, links } = this.props;
+
+    const props = {
+      links,
+      label: t("primary-navigation.logout")
+    };
+
+    if (binder.hasExtension("primary-navigation.logout", props)) {
+      navigationItems.push(
+        <ExtensionPoint name="primary-navigation.logout" props={props} />
+      );
+    } else {
+      append("/logout", "/logout", "primary-navigation.logout", "logout");
+    }
+  };
+
+  createNavigationItems = () => {
+    const navigationItems = [];
+    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 name="primary-navigation.first-menu" props={props} />
+      );
+    }
+    append(
+      "/repos/",
+      "/(repo|repos)",
+      "primary-navigation.repositories",
+      "repositories"
+    );
+    append("/users/", "/(user|users)", "primary-navigation.users", "users");
+    append(
+      "/groups/",
+      "/(group|groups)",
+      "primary-navigation.groups",
+      "groups"
+    );
+    append("/admin", "/admin", "primary-navigation.admin", "config");
+
+    navigationItems.push(
+      <ExtensionPoint
+        name="primary-navigation"
+        renderAll={true}
+        props={{ links: this.props.links }}
+      />
+    );
+
+    this.appendLogout(navigationItems, append);
+
+    return navigationItems;
+  };
+
+  render() {
+    const navigationItems = this.createNavigationItems();
+
+    return (
+      <nav className="tabs is-boxed">
+        <ul>{navigationItems}</ul>
+      </nav>
+    );
+  }
+}
+
+export default translate("commons")(PrimaryNavigation);

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

@@ -0,0 +1,35 @@
+//@flow
+import * as React from "react";
+import { Route, Link } from "react-router-dom";
+
+type Props = {
+  to: string,
+  label: string,
+  match?: string,
+  activeOnlyWhenExact?: boolean
+};
+
+class PrimaryNavigationLink extends React.Component<Props> {
+  renderLink = (route: any) => {
+    const { to, label } = this.props;
+    return (
+      <li className={route.match ? "is-active" : ""}>
+        <Link to={to}>{label}</Link>
+      </li>
+    );
+  };
+
+  render() {
+    const { to, match, activeOnlyWhenExact } = this.props;
+    const path = match ? match : to;
+    return (
+      <Route
+        path={path}
+        exact={activeOnlyWhenExact}
+        children={this.renderLink}
+      />
+    );
+  }
+}
+
+export default PrimaryNavigationLink;

scm-ui/ui-components/src/navigation/Section.js

@@ -0,0 +1,21 @@
+//@flow
+import * as React from "react";
+
+type Props = {
+  label: string,
+  children?: React.Node
+};
+
+class Section extends React.Component<Props> {
+  render() {
+    const { label, children } = this.props;
+    return (
+      <div>
+        <p className="menu-label">{label}</p>
+        <ul className="menu-list">{children}</ul>
+      </div>
+    );
+  }
+}
+
+export default Section;

scm-ui/ui-components/src/navigation/SubNavigation.js

@@ -0,0 +1,66 @@
+//@flow
+import * as React from "react";
+import { Link, Route } from "react-router-dom";
+import classNames from "classnames";
+
+type Props = {
+  to: string,
+  icon?: string,
+  label: string,
+  activeOnlyWhenExact?: boolean,
+  activeWhenMatch?: (route: any) => boolean,
+  children?: React.Node
+};
+
+class SubNavigation extends React.Component<Props> {
+  static defaultProps = {
+    activeOnlyWhenExact: false
+  };
+
+  isActive(route: any) {
+    const { activeWhenMatch } = this.props;
+    return route.match || (activeWhenMatch && activeWhenMatch(route));
+  }
+
+  renderLink = (route: any) => {
+    const { to, icon, label } = this.props;
+
+    let defaultIcon = "fas fa-cog";
+    if (icon) {
+      defaultIcon = icon;
+    }
+
+    let children = null;
+    if (this.isActive(route)) {
+      children = <ul className="sub-menu">{this.props.children}</ul>;
+    }
+
+    return (
+      <li>
+        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
+          <i className={classNames(defaultIcon, "fa-fw")} /> {label}
+        </Link>
+        {children}
+      </li>
+    );
+  };
+
+  render() {
+    const { to, activeOnlyWhenExact } = this.props;
+
+    // removes last part of url
+    let parents = to.split("/");
+    parents.splice(-1, 1);
+    let parent = parents.join("/");
+
+    return (
+      <Route
+        path={parent}
+        exact={activeOnlyWhenExact}
+        children={this.renderLink}
+      />
+    );
+  }
+}
+
+export default SubNavigation;

scm-ui/ui-components/src/navigation/index.js

@@ -0,0 +1,10 @@
+// @create-index
+
+export { default as NavAction } from "./NavAction.js";
+export { default as NavLink } from "./NavLink.js";
+export { default as Navigation } from "./Navigation.js";
+export { default as SubNavigation } from "./SubNavigation.js";
+export { default as PrimaryNavigation } from "./PrimaryNavigation.js";
+export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink.js";
+export { default as Section } from "./Section.js";
+