un collapse menu on each interaction with it

2025-11-12 16:35:45 +01:00 · 2020-03-31 11:00:07 +02:00
parent 2821005d8c
commit 13633fb57e
11 changed files with 154 additions and 418 deletions
--- a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
@@ -35,10 +35,7 @@ import {
  PrimaryContentColumn,
  SecondaryNavigationColumn,
  SecondaryNavigation,
-  SubNavigation,
-  isMenuCollapsed,
-  MenuContext,
-  storeMenuCollapsed
+  SubNavigation
 } from "@scm-manager/ui-components";
 import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
 import AdminDetails from "./AdminDetails";
@@ -47,6 +44,7 @@ import GlobalConfig from "./GlobalConfig";
 import RepositoryRoles from "../roles/containers/RepositoryRoles";
 import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
 import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
+import {StateMenuContextProvider} from "@scm-manager/ui-components/src/navigation/MenuContext";

 type Props = RouteComponentProps &
  WithTranslation & {
@@ -55,23 +53,7 @@ type Props = RouteComponentProps &
    installedPluginsLink: string;
  };

-type State = {
-  menuCollapsed: boolean;
-};
-
-class Admin extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
-  onCollapseAdminMenu = (collapsed: boolean) => {
-    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
-  };
-
+class Admin extends React.Component<Props> {
  stripEndingSlash = (url: string) => {
    if (url.endsWith("/")) {
      if (url.includes("role")) {
@@ -94,7 +76,6 @@ class Admin extends React.Component<Props, State> {

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

    const url = this.matchedUrl();
    const extensionProps = {
@@ -103,12 +84,10 @@ class Admin extends React.Component<Props, State> {
    };

    return (
-      <MenuContext.Provider
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
        <Page>
          <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
              <Switch>
                <Redirect exact from={url} to={`${url}/info`} />
                <Route path={`${url}/info`} exact component={AdminDetails} />
@@ -147,12 +126,8 @@ class Admin extends React.Component<Props, State> {
                <ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
              </Switch>
            </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
-              <SecondaryNavigation
-                label={t("admin.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("admin.menu.navigationLabel")}>
                <NavLink
                  to={`${url}/info`}
                  icon="fas fa-info-circle"
@@ -195,7 +170,7 @@ class Admin extends React.Component<Props, State> {
            </SecondaryNavigationColumn>
          </CustomQueryFlexWrappedColumns>
        </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
    );
  }
 }
--- a/scm-ui/ui-webapp/src/containers/Profile.tsx
+++ b/scm-ui/ui-webapp/src/containers/Profile.tsx
@@ -30,20 +30,18 @@ import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
 import {
  ErrorPage,
-  isMenuCollapsed,
-  MenuContext,
  NavLink,
  Page,
  CustomQueryFlexWrappedColumns,
  PrimaryContentColumn,
  SecondaryNavigationColumn,
  SecondaryNavigation,
-  SubNavigation
+  SubNavigation,
+  StateMenuContextProvider
 } from "@scm-manager/ui-components";
 import ChangeUserPassword from "./ChangeUserPassword";
 import ProfileInfo from "./ProfileInfo";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { storeMenuCollapsed } from "@scm-manager/ui-components/src";

 type Props = RouteComponentProps &
  WithTranslation & {
@@ -53,23 +51,7 @@ type Props = RouteComponentProps &
    match: any;
  };

-type State = {
-  menuCollapsed: boolean;
-};
-
-class Profile extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
-  onCollapseProfileMenu = (collapsed: boolean) => {
-    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
-  };
-
+class Profile extends React.Component<Props> {
  stripEndingSlash = (url: string) => {
    if (url.endsWith("/")) {
      return url.substring(0, url.length - 2);
@@ -85,7 +67,6 @@ class Profile extends React.Component<Props, State> {
    const url = this.matchedUrl();

    const { me, t } = this.props;
-    const { menuCollapsed } = this.state;

    if (!me) {
      return (
@@ -106,22 +87,16 @@ class Profile extends React.Component<Props, State> {
    };

    return (
-      <MenuContext.Provider
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
        <Page title={me.displayName}>
          <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
              <Route path={url} exact render={() => <ProfileInfo me={me} />} />
              <Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
              <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
            </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
-              <SecondaryNavigation
-                label={t("profile.navigationLabel")}
-                onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("profile.navigationLabel")}>
                <NavLink
                  to={`${url}`}
                  icon="fas fa-info-circle"
@@ -140,7 +115,7 @@ class Profile extends React.Component<Props, State> {
            </SecondaryNavigationColumn>
          </CustomQueryFlexWrappedColumns>
        </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
    );
  }
 }
--- a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
@@ -29,16 +29,15 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Group } from "@scm-manager/ui-types";
 import {
  ErrorPage,
-  isMenuCollapsed,
  Loading,
-  MenuContext,
  NavLink,
  Page,
  CustomQueryFlexWrappedColumns,
  PrimaryContentColumn,
  SecondaryNavigationColumn,
  SecondaryNavigation,
-  SubNavigation
+  SubNavigation,
+  StateMenuContextProvider
 } from "@scm-manager/ui-components";
 import { getGroupsLink } from "../../modules/indexResource";
 import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups";
@@ -46,7 +45,6 @@ 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 = RouteComponentProps &
  WithTranslation & {
@@ -60,27 +58,11 @@ type Props = RouteComponentProps &
    fetchGroupByName: (p1: string, p2: string) => void;
  };

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

-  onCollapseGroupMenu = (collapsed: boolean) => {
-    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
-  };
-
  stripEndingSlash = (url: string) => {
    if (url.endsWith("/")) {
      return url.substring(0, url.length - 2);
@@ -94,7 +76,6 @@ class SingleGroup extends React.Component<Props, State> {

  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} />;
@@ -112,12 +93,10 @@ class SingleGroup extends React.Component<Props, State> {
    };

    return (
-      <MenuContext.Provider
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
        <Page title={group.name}>
          <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
              <Route path={url} exact component={() => <Details group={group} />} />
              <Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
              <Route
@@ -127,12 +106,8 @@ class SingleGroup extends React.Component<Props, State> {
              />
              <ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
            </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
-              <SecondaryNavigation
-                label={t("singleGroup.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("singleGroup.menu.navigationLabel")}>
                <NavLink
                  to={`${url}`}
                  icon="fas fa-info-circle"
@@ -153,7 +128,7 @@ class SingleGroup extends React.Component<Props, State> {
            </SecondaryNavigationColumn>
          </CustomQueryFlexWrappedColumns>
        </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
    );
  }
 }
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -37,9 +37,7 @@ import {
  SecondaryNavigationColumn,
  SecondaryNavigation,
  SubNavigation,
-  MenuContext,
-  storeMenuCollapsed,
-  isMenuCollapsed
+  StateMenuContextProvider
 } from "@scm-manager/ui-components";
 import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
 import RepositoryDetails from "../components/RepositoryDetails";
@@ -70,19 +68,7 @@ type Props = RouteComponentProps &
    fetchRepoByName: (link: string, namespace: string, name: string) => void;
  };

-type State = {
-  menuCollapsed: boolean;
-};
-
-class RepositoryRoot extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
+class RepositoryRoot extends React.Component<Props> {
  componentDidMount() {
    const { fetchRepoByName, namespace, name, repoLink } = this.props;
    fetchRepoByName(repoLink, namespace, name);
@@ -131,13 +117,8 @@ class RepositoryRoot extends React.Component<Props, State> {
    return `${url}/changesets`;
  };

-  onCollapseRepositoryMenu = (collapsed: boolean) => {
-    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
-  };
-
  render() {
    const { loading, error, indexLinks, repository, t } = this.props;
-    const { menuCollapsed } = this.state;

    if (error) {
      return (
@@ -166,18 +147,13 @@ class RepositoryRoot extends React.Component<Props, State> {
    }

    return (
-      <MenuContext.Provider
-        value={{
-          menuCollapsed,
-          setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
-        }}
-      >
+      <StateMenuContextProvider>
        <Page
          title={repository.namespace + "/" + repository.name}
          afterTitle={<ExtensionPoint name={"repository.afterTitle"} props={{ repository }} />}
        >
          <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
              <Switch>
                <Redirect exact from={this.props.match.url} to={redirectedUrl} />

@@ -227,12 +203,8 @@ class RepositoryRoot extends React.Component<Props, State> {
                <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
              </Switch>
            </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
-              <SecondaryNavigation
-                label={t("repositoryRoot.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
                <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
                <NavLink
                  to={`${url}/info`}
@@ -274,7 +246,7 @@ class RepositoryRoot extends React.Component<Props, State> {
            </SecondaryNavigationColumn>
          </CustomQueryFlexWrappedColumns>
        </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
    );
  }
 }
--- a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
@@ -28,9 +28,7 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { User } from "@scm-manager/ui-types";
 import {
  ErrorPage,
-  isMenuCollapsed,
  Loading,
-  MenuContext,
  NavLink,
  Page,
  CustomQueryFlexWrappedColumns,
@@ -38,7 +36,7 @@ import {
  SecondaryNavigationColumn,
  SecondaryNavigation,
  SubNavigation,
-  storeMenuCollapsed
+  StateMenuContextProvider
 } from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";
@@ -61,19 +59,7 @@ type Props = RouteComponentProps &
    fetchUserByName: (p1: string, p2: string) => void;
  };

-type State = {
-  menuCollapsed: boolean;
-};
-
-class SingleUser extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      menuCollapsed: isMenuCollapsed()
-    };
-  }
-
+class SingleUser extends React.Component<Props> {
  componentDidMount() {
    this.props.fetchUserByName(this.props.usersLink, this.props.name);
  }
@@ -85,17 +71,12 @@ class SingleUser extends React.Component<Props, State> {
    return url;
  };

-  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} />;
@@ -113,12 +94,10 @@ class SingleUser extends React.Component<Props, State> {
    };

    return (
-      <MenuContext.Provider
-        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
-      >
+      <StateMenuContextProvider>
        <Page title={user.displayName}>
          <CustomQueryFlexWrappedColumns>
-            <PrimaryContentColumn collapsed={menuCollapsed}>
+            <PrimaryContentColumn>
              <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} />} />
@@ -128,12 +107,8 @@ class SingleUser extends React.Component<Props, State> {
              />
              <ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
            </PrimaryContentColumn>
-            <SecondaryNavigationColumn collapsed={menuCollapsed}>
-              <SecondaryNavigation
-                label={t("singleUser.menu.navigationLabel")}
-                onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
-                collapsed={menuCollapsed}
-              >
+            <SecondaryNavigationColumn>
+              <SecondaryNavigation label={t("singleUser.menu.navigationLabel")}>
                <NavLink
                  to={`${url}`}
                  icon="fas fa-info-circle"
@@ -154,7 +129,7 @@ class SingleUser extends React.Component<Props, State> {
            </SecondaryNavigationColumn>
          </CustomQueryFlexWrappedColumns>
        </Page>
-      </MenuContext.Provider>
+      </StateMenuContextProvider>
    );
  }
 }