Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 15:05:44 +01:00
Code Issues Packages Projects Releases Activity

Merge pull request #1034 from scm-manager/feature/ui_utilization

Browse Source 
ui utilization
This commit is contained in:
René Pfeuffer
2020-03-11 17:23:30 +01:00
committed by GitHub
parent 0b9e3cd2a2 fa0aee8610
commit 647de3bb2f
38 changed files with 1166 additions and 766 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- New footer design
- Update jgit to version 5.6.1.202002131546-r-scm1
- Update svnkit to version 1.10.1-scm1
- Secondary navigation collapsable
### Fixed
- Modification for mercurial repositories with enabled XSRF protection

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

File diff suppressed because it is too large Load Diff

15
scm-ui/ui-components/src/navigation/MenuContext.ts Normal file
View File

@@ -0,0 +1,15 @@
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));
}

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

@@ -10,6 +10,8 @@ type Props = {
label: string;
activeOnlyWhenExact?: boolean;
activeWhenMatch?: (route: any) => boolean;
collapsed?: boolean;
title?: string;
};
class NavLink extends React.Component<Props> {
@@ -23,7 +25,7 @@ class NavLink extends React.Component<Props> {
}
renderLink = (route: any) => {
const { to, icon, label } = this.props;
const { to, icon, label, collapsed, title } = this.props;
let showIcon = null;
if (icon) {
@@ -35,10 +37,13 @@ class NavLink extends React.Component<Props> {
}
return (
<li>
<Link className={this.isActive(route) ? "is-active" : ""} to={to}>
<li title={collapsed ? title : undefined}>
<Link
className={classNames(this.isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")}
to={to}
>
{showIcon}
{label}
{collapsed ? null : label}
</Link>
</li>
);

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

@@ -0,0 +1,110 @@
import React, { FC, ReactElement, ReactNode, useContext, useEffect } from "react";
import styled from "styled-components";
import SubNavigation from "./SubNavigation";
import { matchPath, useLocation } from "react-router-dom";
import { isMenuCollapsed, MenuContext } from "./MenuContext";
type Props = {
label: string;
children: ReactElement[];
collapsed: boolean;
onCollapse?: (newStatus: boolean) => void;
};
type CollapsedProps = {
collapsed: boolean;
};
const SectionContainer = styled.aside<CollapsedProps>`
position: sticky;
position: -webkit-sticky; /* Safari */
top: 2rem;
width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
`;
const Icon = styled.i<CollapsedProps>`
padding-left: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.5rem")};
padding-right: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.4rem")};
height: 1.5rem;
font-size: 24px;
margin-top: -0.75rem;
`;
const MenuLabel = styled.p<CollapsedProps>`
height: 3.2rem;
display: flex;
align-items: center;
justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
cursor: pointer;
`;
const SecondaryNavigation: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
const location = useLocation();
const menuContext = useContext(MenuContext);
const subNavActive = isSubNavigationActive(children, location.pathname);
const isCollapsed = collapsed && !subNavActive;
useEffect(() => {
if (isMenuCollapsed()) {
menuContext.setMenuCollapsed(!subNavActive);
}
}, [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" collapsed={isCollapsed}>
<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>
)}
{isCollapsed ? "" : label}
</MenuLabel>
<ul className="menu-list">{childrenWithProps}</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;

45
scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx Normal file
View File

@@ -0,0 +1,45 @@
import React, { ReactElement, ReactNode } from "react";
import { MenuContext } from "./MenuContext";
import SubNavigation from "./SubNavigation";
import NavLink from "./NavLink";
type Props = {
to: string;
icon: string;
label: string;
title: string;
activeWhenMatch?: (route: any) => boolean;
activeOnlyWhenExact?: boolean;
children?: ReactElement[];
};
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>
);
}
}
}

20
scm-ui/ui-components/src/navigation/Section.tsx
View File

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

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

@@ -1,5 +1,5 @@
import React, { ReactNode } from "react";
import { Link, Route } from "react-router-dom";
import React, { FC, ReactElement, useContext, useEffect } from "react";
import { Link, useRouteMatch } from "react-router-dom";
import classNames from "classnames";
type Props = {
@@ -8,52 +8,39 @@ type Props = {
label: string;
activeOnlyWhenExact?: boolean;
activeWhenMatch?: (route: any) => boolean;
children?: ReactNode;
children?: ReactElement[];
collapsed?: boolean;
title?: string;
};
class SubNavigation extends React.Component<Props> {
static defaultProps = {
activeOnlyWhenExact: false
};
const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, collapsed, title, label, children }) => {
const parents = to.split("/");
parents.splice(-1, 1);
const parent = parents.join("/");
isActive(route: any) {
const { activeWhenMatch } = this.props;
return route.match || (activeWhenMatch && activeWhenMatch(route));
}
renderLink = (route: any) => {
const { to, icon, label } = this.props;
const match = useRouteMatch({
path: parent,
exact: activeOnlyWhenExact
});
let defaultIcon = "fas fa-cog";
if (icon) {
defaultIcon = icon;
}
let children = null;
if (this.isActive(route)) {
children = <ul className="sub-menu">{this.props.children}</ul>;
let childrenList = null;
if (match && !collapsed) {
childrenList = <ul className="sub-menu">{children}</ul>;
}
return (
<li>
<Link className={this.isActive(route) ? "is-active" : ""} to={to}>
<i className={classNames(defaultIcon, "fa-fw")} /> {label}
<li title={collapsed ? title : undefined}>
<Link className={classNames(match != null ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
<i className={classNames(defaultIcon, "fa-fw")} /> {collapsed ? "" : label}
</Link>
{children}
{childrenList}
</li>
);
};
render() {
const { to, activeOnlyWhenExact } = this.props;
// removes last part of url
const parents = to.split("/");
parents.splice(-1, 1);
const parent = parents.join("/");
return <Route path={parent} exact={activeOnlyWhenExact} children={this.renderLink} />;
}
}
};
export default SubNavigation;

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

@@ -6,4 +6,6 @@ export { default as Navigation } from "./Navigation";
export { default as SubNavigation } from "./SubNavigation";
export { default as PrimaryNavigation } from "./PrimaryNavigation";
export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink";
export { default as Section } from "./Section";
export { default as SecondaryNavigation } from "./SecondaryNavigation";
export { MenuContext, storeMenuCollapsed, isMenuCollapsed } from "./MenuContext";
export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem";

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

@@ -10,6 +10,8 @@ import Icon from "../Icon";
import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
import TokenizedDiffView from "./TokenizedDiffView";
import DiffButton from "./DiffButton";
import { MenuContext } from "@scm-manager/ui-components";
import { storeMenuCollapsed } from "../navigation";
const EMPTY_ANNOTATION_FACTORY = {};
@@ -100,10 +102,14 @@ class DiffFile extends React.Component<Props, State> {
}
};
toggleSideBySide = () => {
this.setState(state => ({
toggleSideBySide = (callback: () => void) => {
this.setState(
state => ({
sideBySide: !state.sideBySide
}));
}),
() => callback()
);
storeMenuCollapsed(true);
};
setCollapse = (collapsed: boolean) => {
@@ -259,11 +265,15 @@ class DiffFile extends React.Component<Props, State> {
file.hunks && file.hunks.length > 0 ? (
<ButtonWrapper className={classNames("level-right", "is-flex")}>
<ButtonGroup>
<MenuContext.Consumer>
{({ setMenuCollapsed }) => (
<DiffButton
icon={sideBySide ? "align-left" : "columns"}
tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
onClick={this.toggleSideBySide}
onClick={() => this.toggleSideBySide(() => setMenuCollapsed(true))}
/>
)}
</MenuContext.Consumer>
{fileControls}
</ButtonGroup>
</ButtonWrapper>

2
scm-ui/ui-webapp/public/locales/de/admin.json
View File

@@ -1,7 +1,7 @@
{
"admin": {
"menu": {
"navigationLabel": "Administrations Navigation",
"navigationLabel": "Administration",
"informationNavLink": "Informationen",
"settingsNavLink": "Einstellungen",
"generalNavLink": "Generell"

2
scm-ui/ui-webapp/public/locales/de/commons.json
View File

@@ -61,7 +61,7 @@
"previous": "Zurück"
},
"profile": {
"navigationLabel": "Profil Navigation",
"navigationLabel": "Profil",
"informationNavLink": "Information",
"changePasswordNavLink": "Passwort ändern",
"settingsNavLink": "Einstellungen",

2
scm-ui/ui-webapp/public/locales/de/config.json
View File

@@ -1,6 +1,6 @@
{
"config": {
"navigationLabel": "Administrations Navigation",
"navigationLabel": "Administration",
"title": "Globale Einstellungen",
"errorTitle": "Fehler",
"errorSubtitle": "Unbekannter Einstellungen Fehler",

2
scm-ui/ui-webapp/public/locales/de/groups.json
View File

@@ -18,7 +18,7 @@
"errorTitle": "Fehler",
"errorSubtitle": "Unbekannter Gruppen Fehler",
"menu": {
"navigationLabel": "Gruppen Navigation",
"navigationLabel": "Gruppen",
"informationNavLink": "Informationen",
"settingsNavLink": "Einstellungen",
"generalNavLink": "Generell",

2
scm-ui/ui-webapp/public/locales/de/repos.json
View File

@@ -28,7 +28,7 @@
"errorTitle": "Fehler",
"errorSubtitle": "Unbekannter Repository Fehler",
"menu": {
"navigationLabel": "Repository Navigation",
"navigationLabel": "Repository",
"informationNavLink": "Informationen",
"branchesNavLink": "Branches",
"sourcesNavLink": "Code",

2
scm-ui/ui-webapp/public/locales/de/users.json
View File

@@ -32,7 +32,7 @@
"errorTitle": "Fehler",
"errorSubtitle": "Unbekannter Benutzer Fehler",
"menu": {
"navigationLabel": "Benutzer Navigation",
"navigationLabel": "Benutzer",
"informationNavLink": "Informationen",
"settingsNavLink": "Einstellungen",
"generalNavLink": "Generell",

2
scm-ui/ui-webapp/public/locales/en/admin.json
View File

@@ -1,7 +1,7 @@
{
"admin": {
"menu": {
"navigationLabel": "Administration Navigation",
"navigationLabel": "Administration",
"informationNavLink": "Information",
"settingsNavLink": "Settings",
"generalNavLink": "General"

2
scm-ui/ui-webapp/public/locales/en/commons.json
View File

@@ -62,7 +62,7 @@
"previous": "Previous"
},
"profile": {
"navigationLabel": "Profile Navigation",
"navigationLabel": "Profile",
"informationNavLink": "Information",
"changePasswordNavLink": "Change password",
"settingsNavLink": "Settings",

2
scm-ui/ui-webapp/public/locales/en/config.json
View File

@@ -1,6 +1,6 @@
{
"config": {
"navigationLabel": "Administration Navigation",
"navigationLabel": "Administration",
"title": "Global Configuration",
"errorTitle": "Error",
"errorSubtitle": "Unknown Config Error",

2
scm-ui/ui-webapp/public/locales/en/groups.json
View File

@@ -18,7 +18,7 @@
"errorTitle": "Error",
"errorSubtitle": "Unknown group error",
"menu": {
"navigationLabel": "Group Navigation",
"navigationLabel": "Group",
"informationNavLink": "Information",
"settingsNavLink": "Settings",
"generalNavLink": "General",

2
scm-ui/ui-webapp/public/locales/en/repos.json
View File

@@ -28,7 +28,7 @@
"errorTitle": "Error",
"errorSubtitle": "Unknown repository error",
"menu": {
"navigationLabel": "Repository Navigation",
"navigationLabel": "Repository",
"informationNavLink": "Information",
"branchesNavLink": "Branches",
"sourcesNavLink": "Code",

2
scm-ui/ui-webapp/public/locales/en/users.json
View File

@@ -32,7 +32,7 @@
"errorTitle": "Error",
"errorSubtitle": "Unknown user error",
"menu": {
"navigationLabel": "User Navigation",
"navigationLabel": "User",
"informationNavLink": "Information",
"settingsNavLink": "Settings",
"generalNavLink": "General",

2
scm-ui/ui-webapp/public/locales/es/admin.json
View File

@@ -1,7 +1,7 @@
{
"admin": {
"menu": {
"navigationLabel": "Menú de administración",
"navigationLabel": "Administración",
"informationNavLink": "Información",
"settingsNavLink": "Ajustes",
"generalNavLink": "General"

2
scm-ui/ui-webapp/public/locales/es/commons.json
View File

@@ -62,7 +62,7 @@
"previous": "Anterior"
},
"profile": {
"navigationLabel": "Menú de sección",
"navigationLabel": "Sección",
"informationNavLink": "Información",
"changePasswordNavLink": "Cambiar contraseña",
"settingsNavLink": "Ajustes",

2
scm-ui/ui-webapp/public/locales/es/config.json
View File

@@ -1,6 +1,6 @@
{
"config": {
"navigationLabel": "Menú de administración",
"navigationLabel": "Administración",
"title": "Configuración global",
"errorTitle": "Error",
"errorSubtitle": "Error de configuración desconocido",

2
scm-ui/ui-webapp/public/locales/es/groups.json
View File

@@ -18,7 +18,7 @@
"errorTitle": "Error",
"errorSubtitle": "Error de grupo desconocido",
"menu": {
"navigationLabel": "Menú de grupo",
"navigationLabel": "Grupo",
"informationNavLink": "Información",
"settingsNavLink": "Ajustes",
"generalNavLink": "General",

2
scm-ui/ui-webapp/public/locales/es/repos.json
View File

@@ -28,7 +28,7 @@
"errorTitle": "Error",
"errorSubtitle": "Error de repositorio desconocido",
"menu": {
"navigationLabel": "Menú de repositorio",
"navigationLabel": "Repositorio",
"informationNavLink": "Información",
"branchesNavLink": "Ramas",
"sourcesNavLink": "Código",

2
scm-ui/ui-webapp/public/locales/es/users.json
View File

@@ -32,7 +32,7 @@
"errorTitle": "Error",
"errorSubtitle": "Error de usuario desconocido",
"menu": {
"navigationLabel": "Menú de usuario",
"navigationLabel": "Usuario",
"informationNavLink": "Información",
"settingsNavLink": "Ajustes",
"generalNavLink": "General",

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

@@ -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 {
NavLink,
Page,
SecondaryNavigation,
SubNavigation,
isMenuCollapsed,
MenuContext,
storeMenuCollapsed
} from "@scm-manager/ui-components";
import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
import AdminDetails from "./AdminDetails";
import PluginsOverview from "../plugins/containers/PluginsOverview";
@@ -15,17 +22,30 @@ import RepositoryRoles from "../roles/containers/RepositoryRoles";
import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
type Props = WithTranslation & {
type Props = RouteComponentProps &
WithTranslation & {
links: Links;
availablePluginsLink: string;
installedPluginsLink: string;
};
// context objects
match: any;
history: History;
type State = {
menuCollapsed: boolean;
};
class Admin extends React.Component<Props> {
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));
};
stripEndingSlash = (url: string) => {
if (url.endsWith("/")) {
if (url.includes("role")) {
@@ -48,6 +68,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 +77,12 @@ class Admin extends React.Component<Props> {
};
return (
<MenuContext.Provider
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<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 +121,24 @@ class Admin extends React.Component<Props> {
<ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
</Switch>
</div>
<div className="column is-one-quarter">
<Navigation>
<Section label={t("admin.menu.navigationLabel")}>
<NavLink to={`${url}/info`} icon="fas fa-info-circle" label={t("admin.menu.informationNavLink")} />
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
<SecondaryNavigation
label={t("admin.menu.navigationLabel")}
onCollapse={() => 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,19 +152,24 @@ 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>
</Section>
</Navigation>
</SecondaryNavigation>
</div>
</div>
</Page>
</MenuContext.Provider>
);
}
}

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

@@ -1,24 +1,49 @@
import React from "react";
import { Route, withRouter } from "react-router-dom";
import { Route, RouteComponentProps, withRouter } from "react-router-dom";
import { getMe } from "../modules/auth";
import { compose } from "redux";
import { connect } from "react-redux";
import { WithTranslation, withTranslation } from "react-i18next";
import { Me } from "@scm-manager/ui-types";
import { ErrorPage, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
import {
ErrorPage,
isMenuCollapsed,
MenuContext,
NavLink,
Page,
SecondaryNavigation,
SubNavigation
} 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 = WithTranslation & {
type Props = RouteComponentProps &
WithTranslation & {
me: Me;
// Context props
match: any;
};
type State = {
menuCollapsed: boolean;
};
type State = {};
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));
};
stripEndingSlash = (url: string) => {
if (url.endsWith("/")) {
return url.substring(0, url.length - 2);
@@ -34,6 +59,7 @@ class Profile extends React.Component<Props, State> {
const url = this.matchedUrl();
const { me, t } = this.props;
const { menuCollapsed } = this.state;
if (!me) {
return (
@@ -54,26 +80,41 @@ class Profile extends React.Component<Props, State> {
};
return (
<MenuContext.Provider
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page title={me.displayName}>
<div className="columns">
<div className="column is-three-quarters">
<div className="column">
<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} />
</div>
<div className="column">
<Navigation>
<Section label={t("profile.navigationLabel")}>
<NavLink to={`${url}`} icon="fas fa-info-circle" label={t("profile.informationNavLink")} />
<SubNavigation to={`${url}/settings/password`} label={t("profile.settingsNavLink")}>
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
<SecondaryNavigation
label={t("profile.navigationLabel")}
onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
collapsed={menuCollapsed}
>
<NavLink
to={`${url}`}
icon="fas fa-info-circle"
label={t("profile.informationNavLink")}
title={t("profile.informationNavLink")}
/>
<SubNavigation
to={`${url}/settings/password`}
label={t("profile.settingsNavLink")}
title={t("profile.settingsNavLink")}
>
<NavLink to={`${url}/settings/password`} label={t("profile.changePasswordNavLink")} />
<ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
</SubNavigation>
</Section>
</Navigation>
</SecondaryNavigation>
</div>
</div>
</Page>
</MenuContext.Provider>
);
}
}

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

@@ -1,19 +1,29 @@
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,
isMenuCollapsed,
Loading,
MenuContext,
NavLink,
Page,
SecondaryNavigation,
SubNavigation
} 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 +32,29 @@ type Props = WithTranslation & {
// dispatcher functions
fetchGroupByName: (p1: string, p2: string) => void;
};
// context objects
match: any;
history: History;
type State = {
menuCollapsed: boolean;
};
class SingleGroup extends React.Component<Props> {
class SingleGroup extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed()
};
}
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);
@@ -46,6 +68,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 +86,12 @@ class SingleGroup extends React.Component<Props> {
};
return (
<MenuContext.Provider
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<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,21 +101,33 @@ class SingleGroup extends React.Component<Props> {
/>
<ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
</div>
<div className="column">
<Navigation>
<Section label={t("singleGroup.menu.navigationLabel")}>
<NavLink to={`${url}`} icon="fas fa-info-circle" label={t("singleGroup.menu.informationNavLink")} />
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
<SecondaryNavigation
label={t("singleGroup.menu.navigationLabel")}
onCollapse={() => 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} />
</SubNavigation>
</Section>
</Navigation>
</SecondaryNavigation>
</div>
</div>
</Page>
</MenuContext.Provider>
);
}
}

1
scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx
View File

@@ -10,6 +10,7 @@ type Props = {
activeWhenMatch?: (route: any) => boolean;
activeOnlyWhenExact: boolean;
icon?: string;
title?: string;
};
/**

14
scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import { compose } from "redux";
import { withRouter } from "react-router-dom";
import { withRouter, RouteComponentProps } from "react-router-dom";
import { WithTranslation, withTranslation } from "react-i18next";
import { Branch, Changeset, PagedCollection, Repository } from "@scm-manager/ui-types";
import {
@@ -20,7 +20,8 @@ import {
selectListAsCollection
} from "../modules/changesets";
type Props = WithTranslation & {
type Props = RouteComponentProps &
WithTranslation & {
repository: Repository;
branch: Branch;
page: number;
@@ -33,10 +34,7 @@ type Props = WithTranslation & {
// Dispatch props
fetchChangesets: (p1: Repository, p2: Branch, p3: number) => void;
// context props
match: any;
};
};
class Changesets extends React.Component<Props> {
componentDidMount() {
@@ -44,6 +42,10 @@ class Changesets extends React.Component<Props> {
fetchChangesets(repository, branch, page);
}
shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
return this.props.changesets !== nextProps.changesets;
}
render() {
const { changesets, loading, error, t } = this.props;

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

@@ -1,11 +1,20 @@
import React from "react";
import { connect } from "react-redux";
import { Redirect, Route, Switch } from "react-router-dom";
import { Redirect, Route, Switch, RouteComponentProps } from "react-router-dom";
import { WithTranslation, withTranslation } from "react-i18next";
import { History } from "history";
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 {
ErrorPage,
Loading,
NavLink,
Page,
SecondaryNavigation,
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";
@@ -21,7 +30,8 @@ import CodeOverview from "../codeSection/containers/CodeOverview";
import ChangesetView from "./ChangesetView";
import SourceExtensions from "../sources/containers/SourceExtensions";
type Props = WithTranslation & {
type Props = RouteComponentProps &
WithTranslation & {
namespace: string;
name: string;
repository: Repository;
@@ -32,13 +42,21 @@ type Props = WithTranslation & {
// dispatch functions
fetchRepoByName: (link: string, namespace: string, name: string) => void;
};
// context props
history: History;
match: any;
type State = {
menuCollapsed: boolean;
};
class RepositoryRoot extends React.Component<Props> {
class RepositoryRoot extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed()
};
}
componentDidMount() {
const { fetchRepoByName, namespace, name, repoLink } = this.props;
fetchRepoByName(repoLink, namespace, name);
@@ -87,8 +105,13 @@ class RepositoryRoot extends React.Component<Props> {
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 (
@@ -117,9 +140,15 @@ class RepositoryRoot extends React.Component<Props> {
}
return (
<MenuContext.Provider
value={{
menuCollapsed,
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
}}
>
<Page title={repository.namespace + "/" + repository.name}>
<div className="columns">
<div className="column is-three-quarters">
<div className="column">
<Switch>
<Redirect exact from={this.props.match.url} to={redirectedUrl} />
@@ -169,14 +198,18 @@ class RepositoryRoot extends React.Component<Props> {
<ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
</Switch>
</div>
<div className="column">
<Navigation>
<Section label={t("repositoryRoot.menu.navigationLabel")}>
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
<SecondaryNavigation
label={t("repositoryRoot.menu.navigationLabel")}
onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
collapsed={menuCollapsed}
>
<ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
<NavLink
to={`${url}/info`}
icon="fas fa-info-circle"
label={t("repositoryRoot.menu.informationNavLink")}
title={t("repositoryRoot.menu.informationNavLink")}
/>
<RepositoryNavLink
repository={repository}
@@ -186,6 +219,7 @@ class RepositoryRoot extends React.Component<Props> {
label={t("repositoryRoot.menu.branchesNavLink")}
activeWhenMatch={this.matchesBranches}
activeOnlyWhenExact={false}
title={t("repositoryRoot.menu.branchesNavLink")}
/>
<RepositoryNavLink
repository={repository}
@@ -195,18 +229,23 @@ class RepositoryRoot extends React.Component<Props> {
label={t("repositoryRoot.menu.sourcesNavLink")}
activeWhenMatch={this.matchesCode}
activeOnlyWhenExact={false}
title={t("repositoryRoot.menu.sourcesNavLink")}
/>
<ExtensionPoint name="repository.navigation" props={extensionProps} renderAll={true} />
<SubNavigation to={`${url}/settings/general`} label={t("repositoryRoot.menu.settingsNavLink")}>
<SubNavigation
to={`${url}/settings/general`}
label={t("repositoryRoot.menu.settingsNavLink")}
title={t("repositoryRoot.menu.settingsNavLink")}
>
<EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`} />
<PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository} />
<ExtensionPoint name="repository.setting" props={extensionProps} renderAll={true} />
</SubNavigation>
</Section>
</Navigation>
</SecondaryNavigation>
</div>
</div>
</Page>
</MenuContext.Provider>
);
}
}

34
scm-ui/ui-webapp/src/repos/modules/changesets.test.ts
View File

@@ -581,6 +581,31 @@ describe("changesets", () => {
]);
});
it("should return always the same changeset array for the given parameters", () => {
const state = {
changesets: {
"foo/bar": {
byId: {
id2: {
id: "id2"
},
id1: {
id: "id1"
}
},
byBranch: {
"": {
entries: ["id1", "id2"]
}
}
}
}
};
const one = getChangesets(state, repository);
const two = getChangesets(state, repository);
expect(one).toBe(two);
});
it("should return true, when fetching changesets is pending", () => {
const state = {
pending: {
@@ -639,5 +664,14 @@ describe("changesets", () => {
expect(collection.page).toBe(1);
expect(collection.pageTotal).toBe(10);
});
it("should return always the same empty object", () => {
const state = {
changesets: {}
};
const one = selectListAsCollection(state, repository);
const two = selectListAsCollection(state, repository);
expect(one).toBe(two);
});
});
});

14
scm-ui/ui-webapp/src/repos/modules/changesets.ts
View File

@@ -3,6 +3,7 @@ import { apiClient, urls } from "@scm-manager/ui-components";
import { isPending } from "../../modules/pending";
import { getFailure } from "../../modules/failure";
import { Action, Branch, PagedCollection, Repository } from "@scm-manager/ui-types";
import memoizeOne from "memoize-one";
export const FETCH_CHANGESETS = "scm/repos/FETCH_CHANGESETS";
export const FETCH_CHANGESETS_PENDING = `${FETCH_CHANGESETS}_${PENDING_SUFFIX}`;
@@ -254,10 +255,15 @@ export function getChangesets(state: object, repository: Repository, branch?: Br
return null;
}
return collectChangesets(stateRoot, changesets);
}
const mapChangesets = (stateRoot, changesets) => {
return changesets.entries.map((id: string) => {
return stateRoot.byId[id];
});
}
};
const collectChangesets = memoizeOne(mapChangesets);
export function getChangeset(state: object, repository: Repository, id: string) {
const key = createItemId(repository);
@@ -291,6 +297,8 @@ export function getFetchChangesetsFailure(state: object, repository: Repository,
return getFailure(state, FETCH_CHANGESETS, createItemId(repository, branch));
}
const EMPTY = {};
const selectList = (state: object, repository: Repository, branch?: Branch) => {
const repoId = createItemId(repository);
@@ -302,7 +310,7 @@ const selectList = (state: object, repository: Repository, branch?: Branch) => {
return repoState.byBranch[branchName];
}
}
return {};
return EMPTY;
};
const selectListEntry = (state: object, repository: Repository, branch?: Branch): object => {
@@ -310,7 +318,7 @@ const selectListEntry = (state: object, repository: Repository, branch?: Branch)
if (list.entry) {
return list.entry;
}
return {};
return EMPTY;
};
export const selectListAsCollection = (state: object, repository: Repository, branch?: Branch): PagedCollection => {

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

@@ -3,6 +3,7 @@ import * as types from "../../modules/types";
import { Action, Repository, RepositoryCollection } from "@scm-manager/ui-types";
import { isPending } from "../../modules/pending";
import { getFailure } from "../../modules/failure";
import React from "react";
export const FETCH_REPOS = "scm/repos/FETCH_REPOS";
export const FETCH_REPOS_PENDING = `${FETCH_REPOS}_${types.PENDING_SUFFIX}`;
@@ -155,7 +156,12 @@ export function fetchRepoFailure(namespace: string, name: string, error: Error):
// create repo
export function createRepo(link: string, repository: Repository, initRepository: boolean, callback?: (repo: Repository) => void) {
export function createRepo(
link: string,
repository: Repository,
initRepository: boolean,
callback?: (repo: Repository) => void
) {
return function(dispatch: any) {
dispatch(createRepoPending());
const repoLink = initRepository ? link + "?initialize=true" : link;

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

@@ -1,10 +1,18 @@
import React from "react";
import { connect } from "react-redux";
import { Route } from "react-router-dom";
import { History } from "history";
import { Route, RouteComponentProps } from "react-router-dom";
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,
isMenuCollapsed,
Loading,
MenuContext,
NavLink,
Page,
SecondaryNavigation,
SubNavigation
} from "@scm-manager/ui-components";
import { Details } from "./../components/table";
import EditUser from "./EditUser";
import { fetchUserByName, getFetchUserFailure, getUserByName, isFetchUserPending } from "../modules/users";
@@ -13,8 +21,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,13 +33,21 @@ type Props = WithTranslation & {
// dispatcher function
fetchUserByName: (p1: string, p2: string) => void;
};
// context objects
match: any;
history: History;
type State = {
menuCollapsed: boolean;
};
class SingleUser extends React.Component<Props> {
class SingleUser extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed()
};
}
componentDidMount() {
this.props.fetchUserByName(this.props.usersLink, this.props.name);
}
@@ -41,12 +59,17 @@ class SingleUser extends React.Component<Props> {
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} />;
@@ -64,9 +87,12 @@ class SingleUser extends React.Component<Props> {
};
return (
<MenuContext.Provider
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<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,21 +102,33 @@ class SingleUser extends React.Component<Props> {
/>
<ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
</div>
<div className="column">
<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")}>
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
<SecondaryNavigation
label={t("singleUser.menu.navigationLabel")}
onCollapse={() => 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`} />
<ExtensionPoint name="user.setting" props={extensionProps} renderAll={true} />
</SubNavigation>
</Section>
</Navigation>
</SecondaryNavigation>
</div>
</div>
</Page>
</MenuContext.Provider>
);
}
}