fix review findings

This commit is contained in:
Eduard Heimbuch
2020-03-02 14:13:51 +01:00
parent d15ef12c1c
commit e110033e3b
31 changed files with 167 additions and 200 deletions

View File

@@ -1,3 +0,0 @@
// @create-index
export { MenuContext, storeMenuCollapsed, isMenuCollapsed } from "./MenuContext";

View File

@@ -67,7 +67,6 @@ export * from "./navigation";
export * from "./repos";
export * from "./table";
export * from "./toast";
export * from "./contexts";
export {
File,

View File

@@ -7,32 +7,39 @@ type Props = {
children: ReactElement[];
collapsed?: boolean;
onCollapse?: (newStatus: boolean) => void;
scrollTransitionAt?: number;
};
type StylingProps = {
scrollPositionY: number;
type CollapsedProps = {
collapsed: boolean;
};
const SectionContainer = styled.div`
position: ${(props: StylingProps) => (props.scrollPositionY > 210 && window.innerWidth > 770 ? "fixed" : "inherit")};
top: ${(props: StylingProps) => props.scrollPositionY > 210 && window.innerWidth > 770 && "4.5rem"};
width: ${(props: StylingProps) => (props.collapsed ? "5.5rem" : "20.5rem")};
type PositionProps = CollapsedProps & {
scrollPositionY: number;
scrollTransitionAt: number;
};
const SectionContainer = styled.div<PositionProps>`
position: ${props =>
props.scrollPositionY > props.scrollTransitionAt && window.innerWidth > 770 ? "fixed" : "inherit"};
top: ${props => props.scrollPositionY > props.scrollTransitionAt && window.innerWidth > 770 && "2rem"};
width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
`;
const SmallButton = styled(Button)`
const SmallButton = styled(Button)<CollapsedProps>`
padding-left: 1rem;
padding-right: 1rem;
margin-right: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.5rem")};
height: 1.5rem;
`;
const MenuLabel = styled.p`
const MenuLabel = styled.p<CollapsedProps>`
min-height: 2.5rem;
display: flex;
justify-content: ${(props: { collapsed: boolean }) => (props.collapsed ? "center" : "space-between")};
justify-content: ${props => (props.collapsed ? "center" : "left")};
`;
const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
const Section: FC<Props> = ({ label, children, collapsed, onCollapse, scrollTransitionAt }) => {
const [scrollPositionY, setScrollPositionY] = useState(0);
useEffect(() => {
@@ -49,14 +56,23 @@ const Section: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
const arrowIcon = collapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
return (
<SectionContainer collapsed={collapsed ? collapsed : false} scrollPositionY={onCollapse ? scrollPositionY : 0}>
<SectionContainer
collapsed={collapsed ? collapsed : false}
scrollPositionY={onCollapse ? scrollPositionY : 0}
scrollTransitionAt={scrollTransitionAt ? scrollTransitionAt : 250}
>
<MenuLabel className="menu-label" collapsed={collapsed ? collapsed : false}>
{collapsed ? "" : label}
{onCollapse && (
<SmallButton color="info" className="is-medium" action={() => onCollapse(!collapsed)}>
<SmallButton
color="info"
className="is-medium"
action={() => onCollapse(!collapsed)}
collapsed={collapsed ? collapsed : false}
>
{arrowIcon}
</SmallButton>
)}
{collapsed ? "" : label}
</MenuLabel>
<ul className="menu-list">{childrenWithProps}</ul>
</SectionContainer>

View File

@@ -1,6 +1,7 @@
import React, { ReactNode } from "react";
import React, { FC, ReactElement, useContext } from "react";
import { Link, Route } from "react-router-dom";
import classNames from "classnames";
import { MenuContext } from "./MenuContext";
type Props = {
to: string;
@@ -8,57 +9,57 @@ 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,
icon,
label,
activeOnlyWhenExact,
activeWhenMatch,
children,
collapsed,
title
}) => {
const menuContext = useContext(MenuContext);
const isActive = (route: any) => {
return route.match || activeWhenMatch && activeWhenMatch(route);
};
isActive(route: any) {
const { activeWhenMatch } = this.props;
return route.match || (activeWhenMatch && activeWhenMatch(route));
}
renderLink = (route: any) => {
const { to, icon, label, collapsed, title } = this.props;
const renderLink = (route: any) => {
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 (isActive(route)) {
if (menuContext.menuCollapsed) {
menuContext.setMenuCollapsed(false);
}
childrenList = <ul className="sub-menu">{children}</ul>;
}
return (
<li title={collapsed ? title : undefined}>
<Link
className={classNames(this.isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")}
to={to}
>
<Link className={classNames(isActive(route) ? "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} />;
}
}
return <Route path={parent} exact={activeOnlyWhenExact} children={renderLink} />;
};
export default SubNavigation;

View File

@@ -7,3 +7,4 @@ 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 { MenuContext, storeMenuCollapsed, isMenuCollapsed } from "./MenuContext";

View File

@@ -101,12 +101,12 @@ class DiffFile extends React.Component<Props, State> {
}
};
toggleSideBySide = (callback: (collapsed: boolean) => void) => {
toggleSideBySide = (callback: () => void) => {
this.setState(
state => ({
sideBySide: !state.sideBySide
}),
() => callback(true)
() => callback()
);
};

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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",

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",

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",

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",

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",

View File

@@ -12,7 +12,8 @@ import {
Section,
SubNavigation,
isMenuCollapsed,
MenuContext
MenuContext,
storeMenuCollapsed
} from "@scm-manager/ui-components";
import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
import AdminDetails from "./AdminDetails";
@@ -21,7 +22,6 @@ import GlobalConfig from "./GlobalConfig";
import RepositoryRoles from "../roles/containers/RepositoryRoles";
import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
type Props = RouteComponentProps &
WithTranslation & {
@@ -32,7 +32,6 @@ type Props = RouteComponentProps &
type State = {
menuCollapsed: boolean;
setMenuCollapsed: (collapsed: boolean) => void;
};
class Admin extends React.Component<Props, State> {
@@ -40,21 +39,10 @@ class Admin extends React.Component<Props, State> {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed(),
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
menuCollapsed: isMenuCollapsed()
};
}
componentDidUpdate() {
if (this.state.menuCollapsed && this.isCollapseForbidden()) {
this.setState({ menuCollapsed: false });
}
}
isCollapseForbidden = () => {
return this.props.location.pathname.includes("/settings/") || this.props.location.pathname.includes("/plugins/");
};
onCollapseAdminMenu = (collapsed: boolean) => {
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
};
@@ -90,7 +78,9 @@ class Admin extends React.Component<Props, State> {
};
return (
<MenuContext.Provider value={this.state}>
<MenuContext.Provider
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page>
<div className="columns">
<div className="column">
@@ -136,8 +126,9 @@ class Admin extends React.Component<Props, State> {
<Navigation>
<Section
label={t("admin.menu.navigationLabel")}
onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseAdminMenu(!menuCollapsed)}
onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
collapsed={menuCollapsed}
scrollTransitionAt={220}
>
<NavLink
to={`${url}/info`}

View File

@@ -30,7 +30,6 @@ type Props = RouteComponentProps &
type State = {
menuCollapsed: boolean;
setMenuCollapsed: (collapsed: boolean) => void;
};
class Profile extends React.Component<Props, State> {
@@ -38,21 +37,10 @@ class Profile extends React.Component<Props, State> {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed(),
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
menuCollapsed: isMenuCollapsed()
};
}
componentDidUpdate() {
if (this.state.menuCollapsed && this.isCollapseForbidden()) {
this.setState({ menuCollapsed: false });
}
}
isCollapseForbidden = () => {
return this.props.location.pathname.includes("/settings/");
};
onCollapseProfileMenu = (collapsed: boolean) => {
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
};
@@ -93,7 +81,9 @@ class Profile extends React.Component<Props, State> {
};
return (
<MenuContext.Provider value={this.state}>
<MenuContext.Provider
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page title={me.displayName}>
<div className="columns">
<div className="column">
@@ -105,7 +95,7 @@ class Profile extends React.Component<Props, State> {
<Navigation>
<Section
label={t("profile.navigationLabel")}
onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseProfileMenu(!menuCollapsed)}
onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
collapsed={menuCollapsed}
>
<NavLink

View File

@@ -37,7 +37,6 @@ type Props = RouteComponentProps &
type State = {
menuCollapsed: boolean;
setMenuCollapsed: (collapsed: boolean) => void;
};
class SingleGroup extends React.Component<Props, State> {
@@ -45,8 +44,7 @@ class SingleGroup extends React.Component<Props, State> {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed(),
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
menuCollapsed: isMenuCollapsed()
};
}
@@ -54,16 +52,6 @@ class SingleGroup extends React.Component<Props, State> {
this.props.fetchGroupByName(this.props.groupLink, this.props.name);
}
componentDidUpdate() {
if (this.state.menuCollapsed && this.isCollapseForbidden()) {
this.setState({ menuCollapsed: false });
}
}
isCollapseForbidden = () => {
return this.props.location.pathname.includes("/settings/");
};
onCollapseGroupMenu = (collapsed: boolean) => {
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
};
@@ -99,7 +87,9 @@ class SingleGroup extends React.Component<Props, State> {
};
return (
<MenuContext.Provider value={this.state}>
<MenuContext.Provider
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page title={group.name}>
<div className="columns">
<div className="column">
@@ -116,7 +106,7 @@ class SingleGroup extends React.Component<Props, State> {
<Navigation>
<Section
label={t("singleGroup.menu.navigationLabel")}
onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseGroupMenu(!menuCollapsed)}
onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
collapsed={menuCollapsed}
>
<NavLink

View File

@@ -42,7 +42,7 @@ class Changesets extends React.Component<Props> {
fetchChangesets(repository, branch, page);
}
shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<{}>, nextContext: any): boolean {
shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
return this.props.changesets !== nextProps.changesets;
}

View File

@@ -47,7 +47,6 @@ type Props = RouteComponentProps &
type State = {
menuCollapsed: boolean;
setMenuCollapsed: (collapsed: boolean) => void;
};
class RepositoryRoot extends React.Component<Props, State> {
@@ -55,8 +54,7 @@ class RepositoryRoot extends React.Component<Props, State> {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed(),
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
menuCollapsed: isMenuCollapsed()
};
}
@@ -65,16 +63,6 @@ class RepositoryRoot extends React.Component<Props, State> {
fetchRepoByName(repoLink, namespace, name);
}
componentDidUpdate() {
if (this.state.menuCollapsed && this.isCollapseForbidden()) {
this.setState({ menuCollapsed: false });
}
}
isCollapseForbidden = () => {
return this.props.location.pathname.includes("/settings/");
};
stripEndingSlash = (url: string) => {
if (url.endsWith("/")) {
return url.substring(0, url.length - 1);
@@ -138,7 +126,7 @@ class RepositoryRoot extends React.Component<Props, State> {
const url = this.matchedUrl();
const extensionProps: any = {
const extensionProps = {
repository,
url,
indexLinks,
@@ -154,10 +142,15 @@ class RepositoryRoot extends React.Component<Props, State> {
}
return (
<MenuContext.Provider
value={{
menuCollapsed,
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
}}
>
<Page title={repository.namespace + "/" + repository.name}>
<div className="columns">
<div className="column">
<MenuContext.Provider value={this.state}>
<Switch>
<Redirect exact from={this.props.match.url} to={redirectedUrl} />
@@ -206,16 +199,14 @@ class RepositoryRoot extends React.Component<Props, State> {
<Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository} />} />
<ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
</Switch>
</MenuContext.Provider>
</div>
<div className={menuCollapsed ? "column is-1" : "column is-3"}>
<Navigation>
<Section
label={t("repositoryRoot.menu.navigationLabel")}
onCollapse={
this.isCollapseForbidden() ? undefined : () => this.onCollapseRepositoryMenu(!menuCollapsed)
}
onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
collapsed={menuCollapsed}
scrollTransitionAt={250}
>
<ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
<NavLink
@@ -259,6 +250,7 @@ class RepositoryRoot extends React.Component<Props, State> {
</div>
</div>
</Page>
</MenuContext.Provider>
);
}
}

View File

@@ -38,7 +38,6 @@ type Props = RouteComponentProps &
type State = {
menuCollapsed: boolean;
setMenuCollapsed: (collapsed: boolean) => void;
};
class SingleUser extends React.Component<Props, State> {
@@ -46,8 +45,7 @@ class SingleUser extends React.Component<Props, State> {
super(props);
this.state = {
menuCollapsed: isMenuCollapsed(),
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
menuCollapsed: isMenuCollapsed()
};
}
@@ -55,12 +53,6 @@ class SingleUser extends React.Component<Props, State> {
this.props.fetchUserByName(this.props.usersLink, this.props.name);
}
componentDidUpdate() {
if (this.state.menuCollapsed && this.isCollapseForbidden()) {
this.setState({ menuCollapsed: false });
}
}
stripEndingSlash = (url: string) => {
if (url.endsWith("/")) {
return url.substring(0, url.length - 2);
@@ -68,10 +60,6 @@ class SingleUser extends React.Component<Props, State> {
return url;
};
isCollapseForbidden = () => {
return this.props.location.pathname.includes("/settings/");
};
onCollapseUserMenu = (collapsed: boolean) => {
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
};
@@ -100,7 +88,9 @@ class SingleUser extends React.Component<Props, State> {
};
return (
<MenuContext.Provider value={this.state}>
<MenuContext.Provider
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
>
<Page title={user.displayName}>
<div className="columns">
<div className="column">
@@ -117,7 +107,7 @@ class SingleUser extends React.Component<Props, State> {
<Navigation>
<Section
label={t("singleUser.menu.navigationLabel")}
onCollapse={this.isCollapseForbidden() ? undefined : () => this.onCollapseUserMenu(!menuCollapsed)}
onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
collapsed={menuCollapsed}
>
<NavLink