Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-03-06 04:10:52 +01:00
Code Issues Packages Projects Releases Activity

Merge pull request #1086 from scm-manager/bugfix/navigation_ep_with_submenu

Browse Source 
Simplified secondary navigation
This commit is contained in:
eheimbuch
2020-03-31 17:16:34 +02:00
committed by GitHub
parent 9c6f5e2d60 6c6d6c1272
commit 2b503647d2
44 changed files with 643 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@@ -5,9 +5,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## Unreleased
### Changed
- Simplified collapse state management of the secondary navigation ([#1086](https://github.com/scm-manager/scm-manager/pull/1086)
### Fixed
- Authentication for write requests for repositories with anonymous read access ([#108](https://github.com/scm-manager/scm-manager/pull/1081))
## 2.0.0-rc6 - 2020-03-26
### Added
- Extension point to add links to the repository cards from plug ins ([#1041](https://github.com/scm-manager/scm-manager/pull/1041))

6
scm-ui/tsconfig/tsconfig.json
View File

@@ -59,6 +59,10 @@
/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
"skipLibCheck": true
"skipLibCheck": true,
"lib": [
"dom",
"es2019"
]
}
}

3
scm-ui/ui-components/.storybook/config.js
View File

@@ -70,7 +70,4 @@ addDecorator(
})
);
const RoutingDecorator = (story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
addDecorator(RoutingDecorator);
configure(require.context("../src", true, /\.stories\.tsx?$/), module);

4
scm-ui/ui-components/src/CardColumn.tsx
View File

@@ -99,9 +99,7 @@ export default class CardColumn extends React.Component<Props> {
<FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
<div className="is-flex">
<ContentLeft className="content">
<p className="shorten-text is-marginless">
{title}
</p>
<p className="shorten-text is-marginless">{title}</p>
<p className="shorten-text">{description}</p>
</ContentLeft>
<ContentRight>{contentRight}</ContentRight>

2
scm-ui/ui-components/src/DateFromNow.test.ts
View File

@@ -25,7 +25,6 @@
import { chooseLocale, supportedLocales } from "./DateFromNow";
describe("test choose locale", () => {
it("should choose de", () => {
const locale = chooseLocale("de_DE", ["de", "en"]);
expect(locale).toBe(supportedLocales.de);
@@ -45,5 +44,4 @@ describe("test choose locale", () => {
const locale = chooseLocale("af", ["af", "be"]);
expect(locale).toBe(supportedLocales.en);
});
});

2
scm-ui/ui-components/src/MarkdownView.stories.tsx
View File

@@ -32,12 +32,14 @@ import MarkdownXmlCodeBlock from "./__resources__/markdown-xml-codeblock.md";
import MarkdownInlineXml from "./__resources__/markdown-inline-xml.md";
import Title from "./layout/Title";
import { Subtitle } from "./layout";
import { MemoryRouter } from "react-router-dom";
const Spacing = styled.div`
padding: 2em;
`;
storiesOf("MarkdownView", module)
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
.addDecorator(story => <Spacing>{story()}</Spacing>)
.add("Default", () => <MarkdownView content={TestPage} skipHtml={false} />)
.add("Code without Lang", () => <MarkdownView content={MarkdownWithoutLang} skipHtml={false} />)

212
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -34188,6 +34188,218 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
</div>
`;
exports[`Storyshots Navigation|Secondary Default 1`] = `
<div
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
>
<div
className="column is-3"
>
<aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
>
<div>
<p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
onClick={[Function]}
>
<i
className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
color="info"
>
<i
className="fas fa-caret-right"
/>
</i>
Hitchhiker
</p>
<ul
className="menu-list"
onClick={[Function]}
>
<li>
<a
className=""
href="/42"
onClick={[Function]}
>
<i
className="fas fa-puzzle-piece fa-fw"
/>
Puzzle 42
</a>
</li>
<li>
<a
className=""
href="/heart-of-gold"
onClick={[Function]}
>
<i
className="fas fa-star fa-fw"
/>
Heart Of Gold
</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
`;
exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
<div
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
>
<div
className="column is-3"
>
<aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
>
<div>
<p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
onClick={[Function]}
>
<i
className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
color="info"
>
<i
className="fas fa-caret-right"
/>
</i>
Hitchhiker
</p>
<ul
className="menu-list"
onClick={[Function]}
>
<li>
<a
className=""
href="/42"
onClick={[Function]}
>
<i
className="fas fa-puzzle-piece fa-fw"
/>
Puzzle 42
</a>
</li>
<li>
<a
className="is-active"
href="/hitchhiker/starships"
onClick={[Function]}
>
<i
className="fas fa-cog fa-fw"
/>
Starships
</a>
<ul
className="sub-menu"
>
<li>
<a
className=""
href="/hitchhiker/starships/heart-of-gold"
onClick={[Function]}
>
<i
className="fas fa-star fa-fw"
/>
Heart Of Gold
</a>
</li>
<li>
<a
className="is-active"
href="/hitchhiker/starships/titanic"
onClick={[Function]}
>
Titanic
</a>
</li>
</ul>
</li>
</ul>
</div>
</aside>
</div>
</div>
`;
exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
<div
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
>
<div
className="column is-3"
>
<aside
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
>
<div>
<p
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
onClick={[Function]}
>
<i
className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
color="info"
>
<i
className="fas fa-caret-right"
/>
</i>
Hitchhiker
</p>
<ul
className="menu-list"
onClick={[Function]}
>
<li>
<a
className=""
href="/42"
onClick={[Function]}
>
<i
className="fas fa-puzzle-piece fa-fw"
/>
Puzzle 42
</a>
</li>
<li>
<a
className=""
href="/hitchhiker/starships"
onClick={[Function]}
>
<i
className="fas fa-cog fa-fw"
/>
Starships
</a>
</li>
</ul>
</div>
</aside>
</div>
</div>
`;
exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
<div
className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"

4
scm-ui/ui-components/src/buttons/index.stories.tsx
View File

@@ -32,6 +32,7 @@ import DownloadButton from "./DownloadButton";
import EditButton from "./EditButton";
import SubmitButton from "./SubmitButton";
import { ReactElement } from "react";
import { MemoryRouter } from "react-router-dom";
const colors = ["primary", "link", "info", "success", "warning", "danger", "white", "light", "dark", "black", "text"];
@@ -40,8 +41,10 @@ const Spacing = styled.div`
`;
const SpacingDecorator = (story: () => ReactNode) => <Spacing>{story()}</Spacing>;
const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
storiesOf("Buttons|Button", module)
.addDecorator(RoutingDecorator)
.add("Colors", () => (
<div>
{colors.map(color => (
@@ -70,6 +73,7 @@ storiesOf("Buttons|Button", module)
const buttonStory = (name: string, storyFn: () => ReactElement) => {
return storiesOf("Buttons|" + name, module)
.addDecorator(RoutingDecorator)
.addDecorator(SpacingDecorator)
.add("Default", storyFn);
};

1
scm-ui/ui-components/src/forms/Checkbox.stories.tsx
View File

@@ -42,4 +42,3 @@ storiesOf("Forms|Checkbox", module)
<Checkbox label="Checked but disabled" checked={true} disabled={true} />
</Spacing>
));

10
scm-ui/ui-components/src/forms/Checkbox.tsx
View File

@@ -54,7 +54,7 @@ export default class Checkbox extends React.Component<Props> {
if (title) {
return <LabelWithHelpIcon label={title} helpText={helpText} />;
}
}
};
render() {
const { label, checked, disabled } = this.props;
@@ -68,13 +68,7 @@ export default class Checkbox extends React.Component<Props> {
but bulma does.
// @ts-ignore */}
<label className="checkbox" disabled={disabled}>
<input
type="checkbox"
checked={checked}
onChange={this.onCheckboxChange}
disabled={disabled}
/>{" "}
{label}
<input type="checkbox" checked={checked} onChange={this.onCheckboxChange} disabled={disabled} /> {label}
{this.renderHelp()}
</label>
</div>

1
scm-ui/ui-components/src/forms/Radio.tsx
View File

@@ -25,7 +25,6 @@ import React, { ChangeEvent } from "react";
import { Help } from "../index";
import styled from "styled-components";
const StyledRadio = styled.label`
margin-right: 0.5em;
`;

2
scm-ui/ui-components/src/forms/Textarea.stories.tsx
View File

@@ -21,7 +21,7 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, {useState} from "react";
import React, { useState } from "react";
import { storiesOf } from "@storybook/react";
import styled from "styled-components";
import Textarea from "./Textarea";

2
scm-ui/ui-components/src/layout/Footer.stories.tsx
View File

@@ -33,6 +33,7 @@ import hitchhiker from "../__resources__/hitchhiker.png";
import marvin from "../__resources__/marvin.jpg";
import NavLink from "../navigation/NavLink";
import ExternalLink from "../navigation/ExternalLink";
import { MemoryRouter } from "react-router-dom";
const trillian: Me = {
name: "trillian",
@@ -64,6 +65,7 @@ const withBinder = (binder: Binder) => {
};
storiesOf("Layout|Footer", module)
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
.add("Default", () => {
return <Footer me={trillian} version="2.0.0" links={{}} />;
})

2
scm-ui/ui-components/src/layout/Page.tsx
View File

@@ -52,7 +52,7 @@ const PageActionContainer = styled.div`
`;
const MarginLeft = styled.div`
margin-left: 0.5rem;
margin-left: 0.5rem;
`;
const FlexContainer = styled.div`

31
scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
View File

@@ -21,13 +21,9 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { ReactNode } from "react";
import React, { FC } from "react";
import styled from "styled-components";
type Props = {
children?: ReactNode;
collapsed: boolean;
};
import useMenuContext from "../navigation/MenuContext";
const PrimaryColumn = styled.div<{ collapsed: boolean }>`
/* This is the counterpart to the specific column in SecondaryNavigationColumn. */
@@ -39,18 +35,13 @@ const PrimaryColumn = styled.div<{ collapsed: boolean }>`
}
`;
export default class PrimaryContentColumn extends React.Component<Props> {
static defaultProps = {
collapsed: false
};
const PrimaryContentColumn: FC = ({ children }) => {
const context = useMenuContext();
return (
<PrimaryColumn className="column" collapsed={context.isCollapsed()}>
{children}
</PrimaryColumn>
);
};
render() {
const { children, collapsed } = this.props;
return (
<PrimaryColumn className="column" collapsed={collapsed}>
{children}
</PrimaryColumn>
);
}
}
export default PrimaryContentColumn;

31
scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
View File

@@ -21,13 +21,9 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { ReactNode } from "react";
import React, { FC } from "react";
import styled from "styled-components";
type Props = {
children?: ReactNode;
collapsed: boolean;
};
import useMenuContext from "../navigation/MenuContext";
const SecondaryColumn = styled.div<{ collapsed: boolean }>`
/* In Bulma there is unfortunately no intermediate step between .is-1 and .is-2, hence the size.
@@ -42,18 +38,13 @@ const SecondaryColumn = styled.div<{ collapsed: boolean }>`
}
`;
export default class SecondaryNavigationColumn extends React.Component<Props> {
static defaultProps = {
collapsed: false
};
const SecondaryNavigationColumn: FC = ({ children }) => {
const context = useMenuContext();
return (
<SecondaryColumn className="column" collapsed={context.isCollapsed()}>
{children}
</SecondaryColumn>
);
};
render() {
const { children, collapsed } = this.props;
return (
<SecondaryColumn className="column" collapsed={collapsed}>
{children}
</SecondaryColumn>
);
}
}
export default SecondaryNavigationColumn;

2
scm-ui/ui-components/src/layout/Title.tsx
View File

@@ -40,7 +40,7 @@ const Title: FC<Props> = ({ title, preventRefreshingPageTitle, customPageTitle,
document.title = title;
}
}
},[title, preventRefreshingPageTitle, customPageTitle]);
}, [title, preventRefreshingPageTitle, customPageTitle]);
if (title) {
return <h1 className={classNames("title", className)}>{title}</h1>;

1
scm-ui/ui-components/src/layout/index.ts
View File

@@ -34,4 +34,3 @@ export { default as Title } from "./Title";
export { default as CustomQueryFlexWrappedColumns } from "./CustomQueryFlexWrappedColumns";
export { default as PrimaryContentColumn } from "./PrimaryContentColumn";
export { default as SecondaryNavigationColumn } from "./SecondaryNavigationColumn";

6
scm-ui/ui-components/src/modals/ConfirmAlert.tsx
View File

@@ -62,7 +62,11 @@ class ConfirmAlert extends React.Component<Props> {
<div className="field is-grouped">
{buttons.map((button, i) => (
<p className="control">
<a className={classNames("button", "is-info", button.className)} key={i} onClick={() => this.handleClickButton(button)}>
<a
className={classNames("button", "is-info", button.className)}
key={i}
onClick={() => this.handleClickButton(button)}
>
{button.label}
</a>
</p>

2
scm-ui/ui-components/src/navigation/ExternalLink.tsx
View File

@@ -30,6 +30,8 @@ type Props = {
label: string;
};
// TODO is it used in the menu? should it use MenuContext for collapse state?
const ExternalLink: FC<Props> = ({ to, icon, label }) => {
let showIcon;
if (icon) {

56
scm-ui/ui-components/src/navigation/MenuContext.tsx Normal file
View File

@@ -0,0 +1,56 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC, useContext, useState } from "react";
export type MenuContext = {
isCollapsed: () => boolean;
setCollapsed: (collapsed: boolean) => void;
};
export const MenuContext = React.createContext<MenuContext>({
isCollapsed() {
return false;
},
setCollapsed() {}
});
export const StateMenuContextProvider: FC = ({ children }) => {
const [collapsed, setCollapsed] = useState(false);
const context = {
isCollapsed() {
return collapsed;
},
setCollapsed
};
return <MenuContext.Provider value={context}>{children}</MenuContext.Provider>;
};
const useMenuContext = () => {
return useContext<MenuContext>(MenuContext);
};
export default useMenuContext;

2
scm-ui/ui-components/src/navigation/NavAction.tsx
View File

@@ -29,6 +29,8 @@ type Props = {
action: () => void;
};
// TODO is it used in the menu? should it use MenuContext for collapse state?
class NavAction extends React.Component<Props> {
render() {
const { label, icon, action } = this.props;

79
scm-ui/ui-components/src/navigation/NavLink.tsx
View File

@@ -23,60 +23,47 @@
*/
import * as React from "react";
import classNames from "classnames";
import { Link, Route } from "react-router-dom";
import { Link, useRouteMatch } from "react-router-dom";
import { RoutingProps } from "./RoutingProps";
import { FC } from "react";
import useMenuContext from "./MenuContext";
// TODO mostly copy of PrimaryNavigationLink
type Props = {
to: string;
icon?: string;
type Props = RoutingProps & {
label: string;
activeOnlyWhenExact?: boolean;
activeWhenMatch?: (route: any) => boolean;
collapsed?: boolean;
title?: string;
icon?: string;
};
class NavLink extends React.Component<Props> {
static defaultProps = {
activeOnlyWhenExact: true
};
const NavLink: FC<Props> = ({ to, activeOnlyWhenExact, icon, label, title }) => {
const match = useRouteMatch({
path: to,
exact: activeOnlyWhenExact
});
isActive(route: any) {
const { activeWhenMatch } = this.props;
return route.match || (activeWhenMatch && activeWhenMatch(route));
}
const context = useMenuContext();
const collapsed = context.isCollapsed();
renderLink = (route: any) => {
const { to, icon, label, collapsed, title } = this.props;
let showIcon = null;
if (icon) {
showIcon = (
<>
<i className={classNames(icon, "fa-fw")} />{" "}
</>
);
}
return (
<li title={collapsed ? title : undefined}>
<Link
className={classNames(this.isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")}
to={to}
>
{showIcon}
{collapsed ? null : label}
</Link>
</li>
let showIcon = null;
if (icon) {
showIcon = (
<>
<i className={classNames(icon, "fa-fw")} />{" "}
</>
);
};
render() {
const { to, activeOnlyWhenExact } = this.props;
return <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />;
}
}
return (
<li title={collapsed ? title : undefined}>
<Link className={classNames(!!match ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
{showIcon}
{collapsed ? null : label}
</Link>
</li>
);
};
NavLink.defaultProps = {
activeOnlyWhenExact: true
};
export default NavLink;

2
scm-ui/ui-components/src/navigation/Navigation.tsx
View File

@@ -27,6 +27,8 @@ type Props = {
children?: ReactNode;
};
// TODO it is used?
class Navigation extends React.Component<Props> {
render() {
return <aside className="menu">{this.props.children}</aside>;

20
scm-ui/ui-components/src/navigation/MenuContext.ts → scm-ui/ui-components/src/navigation/RoutingProps.ts
View File

@@ -22,18 +22,8 @@
* SOFTWARE.
*/
import React from "react";
const MENU_COLLAPSED = "secondary-menu-collapsed";
export const MenuContext = React.createContext({
menuCollapsed: isMenuCollapsed(),
setMenuCollapsed: (collapsed: boolean) => {}
});
export function isMenuCollapsed() {
return localStorage.getItem(MENU_COLLAPSED) === "true";
}
export function storeMenuCollapsed(status: boolean) {
localStorage.setItem(MENU_COLLAPSED, String(status));
}
export type RoutingProps = {
to: string;
activeOnlyWhenExact?: boolean;
activeWhenMatch?: (route: any) => boolean;
};

89
scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx Normal file
View File

@@ -0,0 +1,89 @@
/*
* MIT License
*
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import { storiesOf } from "@storybook/react";
import React, { ReactElement } from "react";
import SecondaryNavigation from "./SecondaryNavigation";
import SecondaryNavigationItem from "./SecondaryNavigationItem";
import styled from "styled-components";
import SubNavigation from "./SubNavigation";
import { Binder, ExtensionPoint, BinderContext } from "@scm-manager/ui-extensions";
import { MemoryRouter } from "react-router-dom";
import { StateMenuContextProvider } from "./MenuContext";
const Columns = styled.div`
margin: 2rem;
`;
const starships = (
<SubNavigation to="/hitchhiker/starships" label="Starships">
<SecondaryNavigationItem
to="/hitchhiker/starships/heart-of-gold"
icon="fas fa-star"
label="Heart Of Gold"
title="Heart Of Gold"
/>
<SecondaryNavigationItem to="/hitchhiker/starships/titanic" label="Titanic" title="Starship Titanic" />
</SubNavigation>
);
const withRoute = (route: string) => {
return (story: ReactElement<any>) => <MemoryRouter initialEntries={[route]}>{story}</MemoryRouter>;
};
storiesOf("Navigation|Secondary", module)
.addDecorator(story => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
.addDecorator(story => (
<Columns className="columns">
<div className="column is-3">{story()}</div>
</Columns>
))
.add("Default", () =>
withRoute("/")(
<SecondaryNavigation label="Hitchhiker">
<SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
<SecondaryNavigationItem to="/heart-of-gold" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
</SecondaryNavigation>
)
)
.add("Sub Navigation", () =>
withRoute("/")(
<SecondaryNavigation label="Hitchhiker">
<SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
{starships}
</SecondaryNavigation>
)
)
.add("Extension Point", () => {
const binder = new Binder("menu");
binder.bind("subnav.sample", starships);
return withRoute("/hitchhiker/starships/titanic")(
<BinderContext.Provider value={binder}>
<SecondaryNavigation label="Hitchhiker">
<SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
<ExtensionPoint name="subnav.sample" renderAll={true} />
</SecondaryNavigation>
</BinderContext.Provider>
);
});

80
scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
View File

@@ -21,17 +21,13 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC, ReactElement, ReactNode, useContext, useEffect } from "react";
import React, { FC } from "react";
import styled from "styled-components";
import SubNavigation from "./SubNavigation";
import { matchPath, useLocation } from "react-router-dom";
import { isMenuCollapsed, MenuContext } from "./MenuContext";
import useMenuContext from "./MenuContext";
type Props = {
label: string;
children: ReactElement[];
collapsed: boolean;
onCollapse?: (newStatus: boolean) => void;
};
type CollapsedProps = {
@@ -60,73 +56,37 @@ const MenuLabel = styled.p<CollapsedProps>`
cursor: pointer;
`;
const SecondaryNavigation: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
const location = useLocation();
const menuContext = useContext(MenuContext);
const SecondaryNavigation: FC<Props> = ({ label, children }) => {
const menuContext = useMenuContext();
const isCollapsed = menuContext.isCollapsed();
const subNavActive = isSubNavigationActive(children, location.pathname);
const isCollapsed = collapsed && !subNavActive;
const toggleCollapseState = () => {
menuContext.setCollapsed(!isCollapsed);
};
useEffect(() => {
if (isMenuCollapsed()) {
menuContext.setMenuCollapsed(!subNavActive);
const uncollapseMenu = () => {
if (isCollapsed) {
menuContext.setCollapsed(false);
}
}, [subNavActive]);
};
const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
React.cloneElement(child, { collapsed: isCollapsed })
);
const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
return (
<SectionContainer className="menu">
<div>
<MenuLabel
className="menu-label"
collapsed={isCollapsed}
onClick={onCollapse && !subNavActive ? () => onCollapse(!isCollapsed) : undefined}
>
{onCollapse && !subNavActive && (
<Icon color="info" className="is-medium" collapsed={isCollapsed}>
{arrowIcon}
</Icon>
)}
<MenuLabel className="menu-label" collapsed={isCollapsed} onClick={toggleCollapseState}>
<Icon color="info" className="is-medium" collapsed={isCollapsed}>
{arrowIcon}
</Icon>
{isCollapsed ? "" : label}
</MenuLabel>
<ul className="menu-list">{childrenWithProps}</ul>
<ul className="menu-list" onClick={uncollapseMenu}>
{children}
</ul>
</div>
</SectionContainer>
);
};
const createParentPath = (to: string) => {
const parents = to.split("/");
parents.splice(-1, 1);
return parents.join("/");
};
const isSubNavigationActive = (children: ReactNode, url: string): boolean => {
const childArray = React.Children.toArray(children);
const match = childArray
.filter(child => {
// what about extension points?
// @ts-ignore
return child.type.name === SubNavigation.name;
})
.map(child => {
// @ts-ignore
return child.props;
})
.find(props => {
const path = createParentPath(props.to);
const matches = matchPath(url, {
path,
exact: props.activeOnlyWhenExact as boolean
});
return matches != null;
});
return match != null;
};
export default SecondaryNavigation;

51
scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
View File

@@ -21,48 +21,23 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { ReactElement, ReactNode } from "react";
import { MenuContext } from "./MenuContext";
import React, { FC } from "react";
import SubNavigation from "./SubNavigation";
import NavLink from "./NavLink";
import { RoutingProps } from "./RoutingProps";
type Props = {
to: string;
icon: string;
type Props = RoutingProps & {
label: string;
title: string;
activeWhenMatch?: (route: any) => boolean;
activeOnlyWhenExact?: boolean;
children?: ReactElement[];
title?: string;
icon?: string;
};
export default class SecondaryNavigationItem extends React.Component<Props> {
render() {
const { to, icon, label, title, activeWhenMatch, activeOnlyWhenExact, children } = this.props;
if (children) {
return (
<MenuContext.Consumer>
{({ menuCollapsed }) => (
<SubNavigation
to={to}
icon={icon}
label={label}
title={title}
activeWhenMatch={activeWhenMatch}
activeOnlyWhenExact={activeOnlyWhenExact}
collapsed={menuCollapsed}
>
{children}
</SubNavigation>
)}
</MenuContext.Consumer>
);
} else {
return (
<MenuContext.Consumer>
{({ menuCollapsed }) => <NavLink to={to} icon={icon} label={label} title={title} collapsed={menuCollapsed} />}
</MenuContext.Consumer>
);
}
const SecondaryNavigationItem: FC<Props> = ({ children, ...props }) => {
if (children) {
return <SubNavigation {...props}>{children}</SubNavigation>;
} else {
return <NavLink {...props} />;
}
}
};
export default SecondaryNavigationItem;

18
scm-ui/ui-components/src/navigation/SubNavigation.tsx
View File

@@ -21,22 +21,19 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { FC, ReactElement, useContext, useEffect } from "react";
import React, { FC, useContext } from "react";
import { Link, useRouteMatch } from "react-router-dom";
import classNames from "classnames";
import useMenuContext, { MenuContext } from "./MenuContext";
import { RoutingProps } from "./RoutingProps";
type Props = {
to: string;
icon?: string;
type Props = RoutingProps & {
label: string;
activeOnlyWhenExact?: boolean;
activeWhenMatch?: (route: any) => boolean;
children?: ReactElement[];
collapsed?: boolean;
title?: string;
icon?: string;
};
const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, collapsed, title, label, children }) => {
const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, title, label, children }) => {
const parents = to.split("/");
parents.splice(-1, 1);
const parent = parents.join("/");
@@ -46,6 +43,9 @@ const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, collapsed, ti
exact: activeOnlyWhenExact
});
const context = useMenuContext();
const collapsed = context.isCollapsed();
let defaultIcon = "fas fa-cog";
if (icon) {
defaultIcon = icon;

2
scm-ui/ui-components/src/navigation/index.ts
View File

@@ -31,5 +31,5 @@ export { default as SubNavigation } from "./SubNavigation";
export { default as PrimaryNavigation } from "./PrimaryNavigation";
export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink";
export { default as SecondaryNavigation } from "./SecondaryNavigation";
export { MenuContext, storeMenuCollapsed, isMenuCollapsed } from "./MenuContext";
export { MenuContext, StateMenuContextProvider } from "./MenuContext";
export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem";

12
scm-ui/ui-components/src/repos/DiffFile.tsx
View File

@@ -34,7 +34,6 @@ import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./
import TokenizedDiffView from "./TokenizedDiffView";
import DiffButton from "./DiffButton";
import { MenuContext } from "@scm-manager/ui-components";
import { storeMenuCollapsed } from "../navigation";
const EMPTY_ANNOTATION_FACTORY = {};
@@ -132,7 +131,6 @@ class DiffFile extends React.Component<Props, State> {
}),
() => callback()
);
storeMenuCollapsed(true);
};
setCollapse = (collapsed: boolean) => {
@@ -289,11 +287,17 @@ class DiffFile extends React.Component<Props, State> {
<ButtonWrapper className={classNames("level-right", "is-flex")}>
<ButtonGroup>
<MenuContext.Consumer>
{({ setMenuCollapsed }) => (
{({ setCollapsed }) => (
<DiffButton
icon={sideBySide ? "align-left" : "columns"}
tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
onClick={() => this.toggleSideBySide(() => setMenuCollapsed(true))}
onClick={() =>
this.toggleSideBySide(() => {
if (this.state.sideBySide) {
setCollapsed(true);
}
})
}
/>
)}
</MenuContext.Consumer>

2
scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx
View File

@@ -32,6 +32,7 @@ import { Binder, BinderContext } from "@scm-manager/ui-extensions";
import { Repository } from "@scm-manager/ui-types";
import Image from "../Image";
import Icon from "../Icon";
import { MemoryRouter } from "react-router-dom";
const baseDate = "2020-03-26T12:13:42+02:00";
@@ -74,6 +75,7 @@ const QuickLink = (
);
storiesOf("RepositoryEntry", module)
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
.addDecorator(storyFn => <Container>{storyFn()}</Container>)
.add("Default", () => {
return <RepositoryEntry repository={repository} baseDate={baseDate} />;

42
scm-ui/ui-extensions/src/ExtensionPoint.test.tsx
View File

@@ -168,4 +168,46 @@ describe("ExtensionPoint test", () => {
const text = rendered.text();
expect(text).toBe("");
});
it("should render an instance", () => {
const Label = () => {
return <label>Extension One</label>;
};
mockedBinder.hasExtension.mockReturnValue(true);
mockedBinder.getExtension.mockReturnValue(<Label />);
const rendered = mount(<ExtensionPoint name="something.special" />);
expect(rendered.text()).toBe("Extension One");
});
it("should render an instance with props", () => {
const Label = ({ name }: { name: string }) => {
return <label>Extension {name}</label>;
};
mockedBinder.hasExtension.mockReturnValue(true);
mockedBinder.getExtension.mockReturnValue(<Label name="One" />);
const rendered = mount(<ExtensionPoint name="something.special" props={{ name: "Two" }} />);
expect(rendered.text()).toBe("Extension Two");
});
it("should transform extension, before render", () => {
const label = ({ name = "One" }: { name: string }) => {
return <label>Extension {name}</label>;
};
mockedBinder.hasExtension.mockReturnValue(true);
mockedBinder.getExtension.mockReturnValue(label);
const transformer = (props: object) => {
return {
...props,
name: "Two"
};
};
const rendered = mount(<ExtensionPoint name="something.special" propTransformer={transformer} />);
expect(rendered.text()).toBe("Extension Two");
});
});

54
scm-ui/ui-extensions/src/ExtensionPoint.tsx
View File

@@ -23,32 +23,40 @@
*/
import * as React from "react";
import { Binder } from "./binder";
import { FC, ReactNode } from "react";
import { Component, FC, ReactNode } from "react";
import useBinder from "./useBinder";
type PropTransformer = (props: object) => object;
type Props = {
name: string;
renderAll?: boolean;
props?: object;
propTransformer?: PropTransformer;
};
const renderAllExtensions = (binder: Binder, name: string, props?: object) => {
const createInstance = (Component: any, props: object, key?: number) => {
const instanceProps = {
...props,
key
};
if (React.isValidElement(Component)) {
return React.cloneElement(Component, instanceProps);
}
return <Component {...instanceProps} />;
};
const renderAllExtensions = (binder: Binder, name: string, props: object) => {
const extensions = binder.getExtensions(name, props);
return (
<>
{extensions.map((Component, index) => {
return <Component key={index} {...props} />;
})}
</>
);
return <>{extensions.map((cmp, index) => createInstance(cmp, props, index))}</>;
};
const renderSingleExtension = (binder: Binder, name: string, props?: object) => {
const Component = binder.getExtension(name, props);
if (!Component) {
const renderSingleExtension = (binder: Binder, name: string, props: object) => {
const cmp = binder.getExtension(name, props);
if (!cmp) {
return null;
}
return <Component {...props} />;
return createInstance(cmp, props, undefined);
};
const renderDefault = (children: ReactNode) => {
@@ -58,17 +66,29 @@ const renderDefault = (children: ReactNode) => {
return null;
};
const createRenderProps = (propTransformer?: PropTransformer, props?: object) => {
const transform = (props: object) => {
if (!propTransformer) {
return props;
}
return propTransformer(props);
};
return transform(props || {});
};
/**
* ExtensionPoint renders components which are bound to an extension point.
*/
const ExtensionPoint: FC<Props> = ({ name, renderAll, props, children }) => {
const ExtensionPoint: FC<Props> = ({ name, propTransformer, props, renderAll, children }) => {
const binder = useBinder();
if (!binder.hasExtension(name, props)) {
const renderProps = createRenderProps(propTransformer, props);
if (!binder.hasExtension(name, renderProps)) {
return renderDefault(children);
} else if (renderAll) {
return renderAllExtensions(binder, name, props);
return renderAllExtensions(binder, name, renderProps);
}
return renderSingleExtension(binder, name, props);
return renderSingleExtension(binder, name, renderProps);
};
export default ExtensionPoint;

41
scm-ui/ui-webapp/src/admin/containers/Admin.tsx
View File

@@ -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>
);
}
}

4
scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
View File

@@ -278,9 +278,7 @@ class PluginModal extends React.Component<Props, State> {
</div>
</div>
<div className="media">
<div className="media-content">
{this.createRestartSectionContent()}
</div>
<div className="media-content">{this.createRestartSectionContent()}</div>
</div>
{this.renderNotifications()}
</>

1
scm-ui/ui-webapp/src/admin/plugins/components/ShowPendingModal.tsx
View File

@@ -27,7 +27,6 @@ import { PendingPlugins } from "@scm-manager/ui-types";
import { useTranslation } from "react-i18next";
import PendingPluginsQueue from "./PendingPluginsQueue";
type ModalBodyProps = {
pendingPlugins: PendingPlugins;
};

41
scm-ui/ui-webapp/src/containers/Profile.tsx
View File

@@ -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>
);
}
}

41
scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
View File

@@ -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>
);
}
}

7
scm-ui/ui-webapp/src/repos/containers/Create.tsx
View File

@@ -54,7 +54,12 @@ type Props = WithTranslation & {
// dispatch functions
fetchNamespaceStrategiesIfNeeded: () => void;
fetchRepositoryTypesIfNeeded: () => void;
createRepo: (link: string, repository: Repository, initRepository: boolean, callback: (repo: Repository) => void) => void;
createRepo: (
link: string,
repository: Repository,
initRepository: boolean,
callback: (repo: Repository) => void
) => void;
resetForm: () => void;
// context props

42
scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
View File

@@ -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>
);
}
}

2
scm-ui/ui-webapp/src/repos/sources/modules/sources.ts
View File

@@ -176,7 +176,7 @@ export default function reducer(
pending: false
}
};
} else if (action.itemId && (action.type === FETCH_UPDATES_SUCCESS)) {
} else if (action.itemId && action.type === FETCH_UPDATES_SUCCESS) {
return {
...state,
[action.itemId + action.payload.hunk]: {

39
scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
View File

@@ -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>
);
}
}

18
yarn.lock
View File

@@ -10020,6 +10020,16 @@ mini-css-extract-plugin@^0.8.0:
schema-utils "^1.0.0"
webpack-sources "^1.1.0"
mini-css-extract-plugin@^0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
integrity sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==
dependencies:
loader-utils "^1.1.0"
normalize-url "1.9.1"
schema-utils "^1.0.0"
webpack-sources "^1.1.0"
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -12247,10 +12257,10 @@ react-redux@^5.0.7:
react-is "^16.6.0"
react-lifecycles-compat "^3.0.0"
react-refresh@^0.7.2:
version "0.7.2"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.7.2.tgz#f30978d21eb8cac6e2f2fde056a7d04f6844dd50"
integrity sha512-u5l7fhAJXecWUJzVxzMRU2Zvw8m4QmDNHlTrT5uo3KBlYBhmChd7syAakBoay1yIiVhx/8Fi7a6v6kQZfsw81Q==
react-refresh@^0.8.0:
version "0.8.1"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.1.tgz#5500506ad6fc891fdd057d0bf3581f9310abc6a2"
integrity sha512-xZIKi49RtLUUSAZ4a4ut2xr+zr4+glOD5v0L413B55MPvlg4EQ6Ctx8PD4CmjlPGoAWmSCTmmkY59TErizNsow==
react-router-dom@^5.1.2:
version "5.1.2"