make secondary navigation also for user, group and administration collapsable

2025-11-02 11:35:57 +01:00 · 2020-02-26 15:45:24 +01:00
parent 119236a227
commit ed53745d9f
4 changed files with 400 additions and 246 deletions
--- a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
@@ -2,11 +2,18 @@ import React from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { Redirect, Route, Switch } from "react-router-dom";
-import { History } from "history";
+import { Redirect, Route, RouteComponentProps, Switch } from "react-router-dom";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Links } from "@scm-manager/ui-types";
-import { Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  Navigation,
+  NavLink,
+  Page,
+  Section,
+  SubNavigation,
+  isMenuCollapsed,
+  MenuContext
+} from "@scm-manager/ui-components";
 import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
 import AdminDetails from "./AdminDetails";
 import PluginsOverview from "../plugins/containers/PluginsOverview";
@@ -14,18 +21,44 @@ import GlobalConfig from "./GlobalConfig";
 import RepositoryRoles from "../roles/containers/RepositoryRoles";
 import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
 import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
+import { storeMenuCollapsed } from "@scm-manager/ui-components/src";

-type Props = WithTranslation & {
+type Props = RouteComponentProps &
+  WithTranslation & {
    links: Links;
    availablePluginsLink: string;
    installedPluginsLink: string;
-
-  // context objects
-  match: any;
-  history: History;
  };

-class Admin extends React.Component<Props> {
+type State = {
+  menuCollapsed: boolean;
+  setMenuCollapsed: (collapsed: boolean) => void;
+};
+
+class Admin extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed(),
+      setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
+    };
+  }
+
+  componentDidUpdate() {
+    if (this.state.menuCollapsed && this.isCollapseForbidden()) {
+      this.setState({ menuCollapsed: false });
+    }
+  }
+
+  isCollapseForbidden = () => {
+    return this.props.location.pathname.includes("/settings/") || this.props.location.pathname.includes("/plugins/");
+  };
+
+  onCollapseAdminMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
  stripEndingSlash = (url: string) => {
    if (url.endsWith("/")) {
      if (url.includes("role")) {
@@ -48,6 +81,7 @@ class Admin extends React.Component<Props> {

  render() {
    const { links, availablePluginsLink, installedPluginsLink, t } = this.props;
+    const { menuCollapsed } = this.state;

    const url = this.matchedUrl();
    const extensionProps = {
@@ -56,9 +90,10 @@ class Admin extends React.Component<Props> {
    };

    return (
+      <MenuContext.Provider value={this.state}>
        <Page>
          <div className="columns">
-          <div className="column is-three-quarters">
+            <div className="column">
              <Switch>
                <Redirect exact from={url} to={`${url}/info`} />
                <Route path={`${url}/info`} exact component={AdminDetails} />
@@ -97,15 +132,25 @@ class Admin extends React.Component<Props> {
                <ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
              </Switch>
            </div>
-          <div className="column is-one-quarter">
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
              <Navigation>
-              <Section label={t("admin.menu.navigationLabel")}>
-                <NavLink to={`${url}/info`} icon="fas fa-info-circle" label={t("admin.menu.informationNavLink")} />
+                <Section
+                  label={t("admin.menu.navigationLabel")}
+                  onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseAdminMenu(!menuCollapsed)}
+                  collapsed={menuCollapsed}
+                >
+                  <NavLink
+                    to={`${url}/info`}
+                    icon="fas fa-info-circle"
+                    label={t("admin.menu.informationNavLink")}
+                    title={t("admin.menu.informationNavLink")}
+                  />
                  {(availablePluginsLink || installedPluginsLink) && (
                    <SubNavigation
                      to={`${url}/plugins/`}
                      icon="fas fa-puzzle-piece"
                      label={t("plugins.menu.pluginsNavLink")}
+                      title={t("plugins.menu.pluginsNavLink")}
                    >
                      {installedPluginsLink && (
                        <NavLink to={`${url}/plugins/installed/`} label={t("plugins.menu.installedNavLink")} />
@@ -119,11 +164,16 @@ class Admin extends React.Component<Props> {
                    to={`${url}/roles/`}
                    icon="fas fa-user-shield"
                    label={t("repositoryRole.navLink")}
+                    title={t("repositoryRole.navLink")}
                    activeWhenMatch={this.matchesRoles}
                    activeOnlyWhenExact={false}
                  />
                  <ExtensionPoint name="admin.navigation" props={extensionProps} renderAll={true} />
-                <SubNavigation to={`${url}/settings/general`} label={t("admin.menu.settingsNavLink")}>
+                  <SubNavigation
+                    to={`${url}/settings/general`}
+                    label={t("admin.menu.settingsNavLink")}
+                    title={t("admin.menu.settingsNavLink")}
+                  >
                    <NavLink to={`${url}/settings/general`} label={t("admin.menu.generalNavLink")} />
                    <ExtensionPoint name="admin.setting" props={extensionProps} renderAll={true} />
                  </SubNavigation>
@@ -132,6 +182,7 @@ class Admin extends React.Component<Props> {
            </div>
          </div>
        </Page>
+      </MenuContext.Provider>
    );
  }
 }
--- a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
@@ -1,19 +1,30 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Route } from "react-router-dom";
+import { Route, RouteComponentProps } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { History } from "history";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Group } from "@scm-manager/ui-types";
-import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  Loading,
+  Navigation,
+  NavLink,
+  Page,
+  Section,
+  SubNavigation,
+  isMenuCollapsed,
+  MenuContext
+} from "@scm-manager/ui-components";
 import { getGroupsLink } from "../../modules/indexResource";
 import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups";
 import { Details } from "./../components/table";
 import { EditGroupNavLink, SetPermissionsNavLink } from "./../components/navLinks";
 import EditGroup from "./EditGroup";
 import SetPermissions from "../../permissions/components/SetPermissions";
+import { storeMenuCollapsed } from "@scm-manager/ui-components/src";

-type Props = WithTranslation & {
+type Props = RouteComponentProps &
+  WithTranslation & {
    name: string;
    group: Group;
    loading: boolean;
@@ -22,17 +33,41 @@ type Props = WithTranslation & {

    // dispatcher functions
    fetchGroupByName: (p1: string, p2: string) => void;
-
-  // context objects
-  match: any;
-  history: History;
  };

-class SingleGroup extends React.Component<Props> {
+type State = {
+  menuCollapsed: boolean;
+  setMenuCollapsed: (collapsed: boolean) => void;
+};
+
+class SingleGroup extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed(),
+      setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
+    };
+  }
+
  componentDidMount() {
    this.props.fetchGroupByName(this.props.groupLink, this.props.name);
  }

+  componentDidUpdate() {
+    if (this.state.menuCollapsed && this.isCollapseForbidden()) {
+      this.setState({ menuCollapsed: false });
+    }
+  }
+
+  isCollapseForbidden = () => {
+    return this.props.location.pathname.includes("/settings/");
+  };
+
+  onCollapseGroupMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
  stripEndingSlash = (url: string) => {
    if (url.endsWith("/")) {
      return url.substring(0, url.length - 2);
@@ -46,6 +81,7 @@ class SingleGroup extends React.Component<Props> {

  render() {
    const { t, loading, error, group } = this.props;
+    const { menuCollapsed } = this.state;

    if (error) {
      return <ErrorPage title={t("singleGroup.errorTitle")} subtitle={t("singleGroup.errorSubtitle")} error={error} />;
@@ -63,9 +99,10 @@ class SingleGroup extends React.Component<Props> {
    };

    return (
+      <MenuContext.Provider value={this.state}>
        <Page title={group.name}>
          <div className="columns">
-          <div className="column is-three-quarters">
+            <div className="column">
              <Route path={url} exact component={() => <Details group={group} />} />
              <Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
              <Route
@@ -75,12 +112,25 @@ class SingleGroup extends React.Component<Props> {
              />
              <ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
            </div>
-          <div className="column">
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
              <Navigation>
-              <Section label={t("singleGroup.menu.navigationLabel")}>
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("singleGroup.menu.informationNavLink")} />
+                <Section
+                  label={t("singleGroup.menu.navigationLabel")}
+                  onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseGroupMenu(!menuCollapsed)}
+                  collapsed={menuCollapsed}
+                >
+                  <NavLink
+                    to={`${url}`}
+                    icon="fas fa-info-circle"
+                    label={t("singleGroup.menu.informationNavLink")}
+                    title={t("singleGroup.menu.informationNavLink")}
+                  />
                  <ExtensionPoint name="group.navigation" props={extensionProps} renderAll={true} />
-                <SubNavigation to={`${url}/settings/general`} label={t("singleGroup.menu.settingsNavLink")}>
+                  <SubNavigation
+                    to={`${url}/settings/general`}
+                    label={t("singleGroup.menu.settingsNavLink")}
+                    title={t("singleGroup.menu.settingsNavLink")}
+                  >
                    <EditGroupNavLink group={group} editUrl={`${url}/settings/general`} />
                    <SetPermissionsNavLink group={group} permissionsUrl={`${url}/settings/permissions`} />
                    <ExtensionPoint name="group.setting" props={extensionProps} renderAll={true} />
@@ -90,6 +140,7 @@ class SingleGroup extends React.Component<Props> {
            </div>
          </div>
        </Page>
+      </MenuContext.Provider>
    );
  }
 }
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -4,16 +4,19 @@ import { Redirect, Route, Switch, RouteComponentProps } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Repository } from "@scm-manager/ui-types";
-import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
 import {
-  fetchRepoByName,
-  getFetchRepoFailure,
-  getRepository,
-  isFetchRepoPending,
-  isRepositoryMenuCollapsed,
-  switchRepositoryMenuCollapsed,
-  RepositoryContext
-} from "../modules/repos";
+  ErrorPage,
+  Loading,
+  Navigation,
+  NavLink,
+  Page,
+  Section,
+  SubNavigation,
+  MenuContext,
+  storeMenuCollapsed,
+  isMenuCollapsed
+} from "@scm-manager/ui-components";
+import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
 import RepositoryDetails from "../components/RepositoryDetails";
 import EditRepo from "./EditRepo";
 import BranchesOverview from "../branches/containers/BranchesOverview";
@@ -43,24 +46,28 @@ type Props = RouteComponentProps &
  };

 type State = {
-  collapsedRepositoryMenu: boolean;
+  menuCollapsed: boolean;
+  setMenuCollapsed: (collapsed: boolean) => void;
 };

 class RepositoryRoot extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
+
    this.state = {
-      collapsedRepositoryMenu: isRepositoryMenuCollapsed()
+      menuCollapsed: isMenuCollapsed(),
+      setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
    };
  }
+
  componentDidMount() {
    const { fetchRepoByName, namespace, name, repoLink } = this.props;
    fetchRepoByName(repoLink, namespace, name);
  }

  componentDidUpdate() {
-    if (this.state.collapsedRepositoryMenu && this.isCollapseForbidden()) {
-      this.onCollapseRepositoryMenu(false);
+    if (this.state.menuCollapsed && this.isCollapseForbidden()) {
+      this.setState({ menuCollapsed: false });
    }
  }

@@ -111,13 +118,13 @@ class RepositoryRoot extends React.Component<Props, State> {
    return `${url}/changesets`;
  };

-  onCollapseRepositoryMenu = (status: boolean) => {
-    this.setState({ collapsedRepositoryMenu: status }, () => switchRepositoryMenuCollapsed(status));
+  onCollapseRepositoryMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
  };

  render() {
    const { loading, error, indexLinks, repository, t } = this.props;
-    const { collapsedRepositoryMenu } = this.state;
+    const { menuCollapsed } = this.state;

    if (error) {
      return (
@@ -135,7 +142,7 @@ class RepositoryRoot extends React.Component<Props, State> {
      repository,
      url,
      indexLinks,
-      collapsedRepositoryMenu
+      collapsedRepositoryMenu: menuCollapsed
    };

    const redirectUrlFactory = binder.getExtension("repository.redirect", this.props);
@@ -147,15 +154,10 @@ class RepositoryRoot extends React.Component<Props, State> {
    }

    return (
-      <RepositoryContext.Provider
-        value={{
-          menuCollapsed: this.state.collapsedRepositoryMenu,
-          toggleMenuCollapsed: () => this.setState({ collapsedRepositoryMenu: !this.state.collapsedRepositoryMenu })
-        }}
-      >
      <Page title={repository.namespace + "/" + repository.name}>
        <div className="columns">
          <div className="column">
+            <MenuContext.Provider value={this.state}>
              <Switch>
                <Redirect exact from={this.props.match.url} to={redirectedUrl} />

@@ -204,17 +206,16 @@ class RepositoryRoot extends React.Component<Props, State> {
                <Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository} />} />
                <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
              </Switch>
+            </MenuContext.Provider>
          </div>
-            <div className={collapsedRepositoryMenu ? "column is-1" : "column is-3"}>
+          <div className={menuCollapsed ? "column is-1" : "column is-3"}>
            <Navigation>
              <Section
                label={t("repositoryRoot.menu.navigationLabel")}
                onCollapse={
-                    this.isCollapseForbidden()
-                      ? undefined
-                      : () => this.onCollapseRepositoryMenu(!collapsedRepositoryMenu)
+                  this.isCollapseForbidden() ? undefined : () => this.onCollapseRepositoryMenu(!menuCollapsed)
                }
-                  collapsed={collapsedRepositoryMenu}
+                collapsed={menuCollapsed}
              >
                <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
                <NavLink
@@ -258,7 +259,6 @@ class RepositoryRoot extends React.Component<Props, State> {
          </div>
        </div>
      </Page>
-      </RepositoryContext.Provider>
    );
  }
 }
--- a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
@@ -1,10 +1,20 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Route } from "react-router-dom";
+import { Route, RouteComponentProps } from "react-router-dom";
 import { History } from "history";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { User } from "@scm-manager/ui-types";
-import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  Loading,
+  Navigation,
+  NavLink,
+  Page,
+  Section,
+  SubNavigation,
+  MenuContext,
+  isMenuCollapsed
+} from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";
 import { fetchUserByName, getFetchUserFailure, getUserByName, isFetchUserPending } from "../modules/users";
@@ -13,8 +23,10 @@ import { WithTranslation, withTranslation } from "react-i18next";
 import { getUsersLink } from "../../modules/indexResource";
 import SetUserPassword from "../components/SetUserPassword";
 import SetPermissions from "../../permissions/components/SetPermissions";
+import { storeMenuCollapsed } from "@scm-manager/ui-components/src";

-type Props = WithTranslation & {
+type Props = RouteComponentProps &
+  WithTranslation & {
    name: string;
    user: User;
    loading: boolean;
@@ -23,17 +35,33 @@ type Props = WithTranslation & {

    // dispatcher function
    fetchUserByName: (p1: string, p2: string) => void;
-
-  // context objects
-  match: any;
-  history: History;
  };

-class SingleUser extends React.Component<Props> {
+type State = {
+  menuCollapsed: boolean;
+  setMenuCollapsed: (collapsed: boolean) => void;
+};
+
+class SingleUser extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed(),
+      setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
+    };
+  }
+
  componentDidMount() {
    this.props.fetchUserByName(this.props.usersLink, this.props.name);
  }

+  componentDidUpdate() {
+    if (this.state.menuCollapsed && this.isCollapseForbidden()) {
+      this.setState({ menuCollapsed: false });
+    }
+  }
+
  stripEndingSlash = (url: string) => {
    if (url.endsWith("/")) {
      return url.substring(0, url.length - 2);
@@ -41,12 +69,21 @@ class SingleUser extends React.Component<Props> {
    return url;
  };

+  isCollapseForbidden = () => {
+    return this.props.location.pathname.includes("/settings/");
+  };
+
+  onCollapseUserMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
  matchedUrl = () => {
    return this.stripEndingSlash(this.props.match.url);
  };

  render() {
    const { t, loading, error, user } = this.props;
+    const { menuCollapsed } = this.state;

    if (error) {
      return <ErrorPage title={t("singleUser.errorTitle")} subtitle={t("singleUser.errorSubtitle")} error={error} />;
@@ -64,9 +101,10 @@ class SingleUser extends React.Component<Props> {
    };

    return (
+      <MenuContext.Provider value={this.state}>
        <Page title={user.displayName}>
          <div className="columns">
-          <div className="column is-three-quarters">
+            <div className="column">
              <Route path={url} exact component={() => <Details user={user} />} />
              <Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} />
              <Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} />
@@ -76,11 +114,24 @@ class SingleUser extends React.Component<Props> {
              />
              <ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
            </div>
-          <div className="column">
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
              <Navigation>
-              <Section label={t("singleUser.menu.navigationLabel")}>
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("singleUser.menu.informationNavLink")} />
-                <SubNavigation to={`${url}/settings/general`} label={t("singleUser.menu.settingsNavLink")}>
+                <Section
+                  label={t("singleUser.menu.navigationLabel")}
+                  onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseUserMenu(!menuCollapsed)}
+                  collapsed={menuCollapsed}
+                >
+                  <NavLink
+                    to={`${url}`}
+                    icon="fas fa-info-circle"
+                    label={t("singleUser.menu.informationNavLink")}
+                    title={t("singleUser.menu.informationNavLink")}
+                  />
+                  <SubNavigation
+                    to={`${url}/settings/general`}
+                    label={t("singleUser.menu.settingsNavLink")}
+                    title={t("singleUser.menu.settingsNavLink")}
+                  >
                    <EditUserNavLink user={user} editUrl={`${url}/settings/general`} />
                    <SetPasswordNavLink user={user} passwordUrl={`${url}/settings/password`} />
                    <SetPermissionsNavLink user={user} permissionsUrl={`${url}/settings/permissions`} />
@@ -91,6 +142,7 @@ class SingleUser extends React.Component<Props> {
            </div>
          </div>
        </Page>
+      </MenuContext.Provider>
    );
  }
 }