+
+
- {title} -
+{title}
{description}
+
+`;
+
+exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
+
+
+
+
+
+`;
+
+exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
+
+
+
+
+
+`;
+
+exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
+
+`;
+
+exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
+
+`;
+
+exports[`Storyshots RepositoryEntry Default 1`] = `
+
+`;
+
+exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
+
+`;
+
exports[`Storyshots SyntaxHighlighter Go 1`] = `
+
+
+
+ ReactNode) => {story()} ;
+const RoutingDecorator = (story: () => ReactNode) => {story()} ;
storiesOf("Buttons|Button", module)
+ .addDecorator(RoutingDecorator)
.add("Colors", () => (
{story()} )
.add("Default", () => {
return ;
})
diff --git a/scm-ui/ui-components/src/layout/Page.tsx b/scm-ui/ui-components/src/layout/Page.tsx
index 0e3553c824..0f4b4e7b4f 100644
--- a/scm-ui/ui-components/src/layout/Page.tsx
+++ b/scm-ui/ui-components/src/layout/Page.tsx
@@ -33,6 +33,7 @@ import ErrorBoundary from "../ErrorBoundary";
type Props = {
title?: string;
+ afterTitle?: ReactNode;
subtitle?: string;
loading?: boolean;
error?: Error;
@@ -50,6 +51,15 @@ const PageActionContainer = styled.div`
}
`;
+const MarginLeft = styled.div`
+ margin-left: 0.5rem;
+`;
+
+const FlexContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+`;
+
export default class Page extends React.Component {
componentDidUpdate() {
const { title } = this.props;
@@ -80,7 +90,7 @@ export default class Page extends React.Component {
}
renderPageHeader() {
- const { error, title, subtitle, children } = this.props;
+ const { error, title, afterTitle, subtitle, children } = this.props;
let pageActions = null;
let pageActionsExists = false;
@@ -104,7 +114,9 @@ export default class Page extends React.Component {
<>
{
- static defaultProps = {
- collapsed: false
- };
+const PrimaryContentColumn: FC = ({ children }) => {
+ const context = useMenuContext();
+ return (
+
+ {children}
+
+ );
+};
- render() {
- const { children, collapsed } = this.props;
-
- return (
-
- {children}
-
- );
- }
-}
+export default PrimaryContentColumn;
diff --git a/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx b/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
index aae722bbe3..a974c8d438 100644
--- a/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
+++ b/scm-ui/ui-components/src/layout/SecondaryNavigationColumn.tsx
@@ -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 {
- static defaultProps = {
- collapsed: false
- };
+const SecondaryNavigationColumn: FC = ({ children }) => {
+ const context = useMenuContext();
+ return (
+
+ {children}
+
+ );
+};
- render() {
- const { children, collapsed } = this.props;
-
- return (
-
- {children}
-
- );
- }
-}
+export default SecondaryNavigationColumn;
diff --git a/scm-ui/ui-components/src/layout/Title.tsx b/scm-ui/ui-components/src/layout/Title.tsx
index cd040be936..0e1024ea06 100644
--- a/scm-ui/ui-components/src/layout/Title.tsx
+++ b/scm-ui/ui-components/src/layout/Title.tsx
@@ -40,7 +40,7 @@ const Title: FC = ({ title, preventRefreshingPageTitle, customPageTitle,
document.title = title;
}
}
- },[title, preventRefreshingPageTitle, customPageTitle]);
+ }, [title, preventRefreshingPageTitle, customPageTitle]);
if (title) {
return {
{
- constructor(props: Props) {
- super(props);
-
- this.state = {
- menuCollapsed: isMenuCollapsed()
- };
- }
-
- onCollapseProfileMenu = (collapsed: boolean) => {
- this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
- };
-
+class Profile extends React.Component {
stripEndingSlash = (url: string) => {
if (url.endsWith("/")) {
return url.substring(0, url.length - 2);
@@ -85,7 +67,6 @@ class Profile extends React.Component {
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 {
};
return (
- this.setState({ menuCollapsed: collapsed }) }}
- >
+
-
+
-
- this.onCollapseProfileMenu(!menuCollapsed)}
- collapsed={menuCollapsed}
- >
+
+
{
-
+
);
}
}
diff --git a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
index c7c658c059..5b5555b80c 100644
--- a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
@@ -29,16 +29,15 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
import { Group } from "@scm-manager/ui-types";
import {
ErrorPage,
- isMenuCollapsed,
Loading,
- MenuContext,
NavLink,
Page,
CustomQueryFlexWrappedColumns,
PrimaryContentColumn,
SecondaryNavigationColumn,
SecondaryNavigation,
- SubNavigation
+ SubNavigation,
+ StateMenuContextProvider
} from "@scm-manager/ui-components";
import { getGroupsLink } from "../../modules/indexResource";
import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups";
@@ -46,7 +45,6 @@ import { Details } from "./../components/table";
import { EditGroupNavLink, SetPermissionsNavLink } from "./../components/navLinks";
import EditGroup from "./EditGroup";
import SetPermissions from "../../permissions/components/SetPermissions";
-import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
type Props = RouteComponentProps &
WithTranslation & {
@@ -60,27 +58,11 @@ type Props = RouteComponentProps &
fetchGroupByName: (p1: string, p2: string) => void;
};
-type State = {
- menuCollapsed: boolean;
-};
-
-class SingleGroup extends React.Component {
- constructor(props: Props) {
- super(props);
-
- this.state = {
- menuCollapsed: isMenuCollapsed()
- };
- }
-
+class SingleGroup extends React.Component {
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 {
render() {
const { t, loading, error, group } = this.props;
- const { menuCollapsed } = this.state;
if (error) {
return {
};
return (
- this.setState({ menuCollapsed: collapsed }) }}
- >
+
-
+
{
/>
-
- this.onCollapseGroupMenu(!menuCollapsed)}
- collapsed={menuCollapsed}
- >
+
+
{
-
+
);
}
}
diff --git a/scm-ui/ui-webapp/src/repos/components/RepositoryDetailTable.tsx b/scm-ui/ui-webapp/src/repos/components/RepositoryDetailTable.tsx
index 9e2e6536b4..f1a5fbcf2e 100644
--- a/scm-ui/ui-webapp/src/repos/components/RepositoryDetailTable.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/RepositoryDetailTable.tsx
@@ -25,6 +25,7 @@ import React from "react";
import { WithTranslation, withTranslation } from "react-i18next";
import { Repository } from "@scm-manager/ui-types";
import { DateFromNow, MailLink } from "@scm-manager/ui-components";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
type Props = WithTranslation & {
repository: Repository;
diff --git a/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx b/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx
index 15a1171525..a62eff1b46 100644
--- a/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/list/RepositoryGroupEntry.tsx
@@ -22,9 +22,8 @@
* SOFTWARE.
*/
import React from "react";
-import { CardColumnGroup } from "@scm-manager/ui-components";
+import { CardColumnGroup, RepositoryEntry } from "@scm-manager/ui-components";
import { RepositoryGroup } from "@scm-manager/ui-types";
-import RepositoryEntry from "./RepositoryEntry";
type Props = {
group: RepositoryGroup;
diff --git a/scm-ui/ui-webapp/src/repos/containers/Create.tsx b/scm-ui/ui-webapp/src/repos/containers/Create.tsx
index 1c8ff8a824..0ef6121afc 100644
--- a/scm-ui/ui-webapp/src/repos/containers/Create.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/Create.tsx
@@ -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
diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
index 88aff9fcd7..38b0570cb5 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -37,9 +37,7 @@ import {
SecondaryNavigationColumn,
SecondaryNavigation,
SubNavigation,
- MenuContext,
- storeMenuCollapsed,
- isMenuCollapsed
+ StateMenuContextProvider
} from "@scm-manager/ui-components";
import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
import RepositoryDetails from "../components/RepositoryDetails";
@@ -70,19 +68,7 @@ type Props = RouteComponentProps &
fetchRepoByName: (link: string, namespace: string, name: string) => void;
};
-type State = {
- menuCollapsed: boolean;
-};
-
-class RepositoryRoot extends React.Component {
- constructor(props: Props) {
- super(props);
-
- this.state = {
- menuCollapsed: isMenuCollapsed()
- };
- }
-
+class RepositoryRoot extends React.Component {
componentDidMount() {
const { fetchRepoByName, namespace, name, repoLink } = this.props;
fetchRepoByName(repoLink, namespace, name);
@@ -131,13 +117,8 @@ class RepositoryRoot extends React.Component {
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,15 +147,13 @@ class RepositoryRoot extends React.Component {
}
return (
- this.setState({ menuCollapsed: collapsed })
- }}
- >
-
+
+
-
+
{
-
- this.onCollapseRepositoryMenu(!menuCollapsed)}
- collapsed={menuCollapsed}
- >
+
+
{
-
+
);
}
}
diff --git a/scm-ui/ui-webapp/src/repos/sources/modules/sources.ts b/scm-ui/ui-webapp/src/repos/sources/modules/sources.ts
index a7ffac791a..b69cadd017 100644
--- a/scm-ui/ui-webapp/src/repos/sources/modules/sources.ts
+++ b/scm-ui/ui-webapp/src/repos/sources/modules/sources.ts
@@ -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]: {
diff --git a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
index 5050b3ea05..ff2c57f0e6 100644
--- a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
@@ -28,9 +28,7 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
import { User } from "@scm-manager/ui-types";
import {
ErrorPage,
- isMenuCollapsed,
Loading,
- MenuContext,
NavLink,
Page,
CustomQueryFlexWrappedColumns,
@@ -38,7 +36,7 @@ import {
SecondaryNavigationColumn,
SecondaryNavigation,
SubNavigation,
- storeMenuCollapsed
+ StateMenuContextProvider
} from "@scm-manager/ui-components";
import { Details } from "./../components/table";
import EditUser from "./EditUser";
@@ -61,19 +59,7 @@ type Props = RouteComponentProps &
fetchUserByName: (p1: string, p2: string) => void;
};
-type State = {
- menuCollapsed: boolean;
-};
-
-class SingleUser extends React.Component {
- constructor(props: Props) {
- super(props);
-
- this.state = {
- menuCollapsed: isMenuCollapsed()
- };
- }
-
+class SingleUser extends React.Component {
componentDidMount() {
this.props.fetchUserByName(this.props.usersLink, this.props.name);
}
@@ -85,17 +71,12 @@ class SingleUser extends React.Component {
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 {
};
return (
- this.setState({ menuCollapsed: collapsed }) }}
- >
+
-
+
{
/>
-
- this.onCollapseUserMenu(!menuCollapsed)}
- collapsed={menuCollapsed}
- >
+
+
{
-
+
);
}
}
diff --git a/scm-webapp/pom.xml b/scm-webapp/pom.xml
index 24ba16333a..f7ae938b5b 100644
--- a/scm-webapp/pom.xml
+++ b/scm-webapp/pom.xml
@@ -204,7 +204,7 @@
javax.xml.bind
jaxb-api
- 2.3.0
+ 2.3.1
diff --git a/scm-webapp/src/main/java/sonia/scm/api/v2/resources/MapperModule.java b/scm-webapp/src/main/java/sonia/scm/api/v2/resources/MapperModule.java
index 4b11e53c4c..83be1f3636 100644
--- a/scm-webapp/src/main/java/sonia/scm/api/v2/resources/MapperModule.java
+++ b/scm-webapp/src/main/java/sonia/scm/api/v2/resources/MapperModule.java
@@ -27,6 +27,7 @@ package sonia.scm.api.v2.resources;
import com.google.inject.AbstractModule;
import com.google.inject.servlet.ServletScopes;
import org.mapstruct.factory.Mappers;
+import sonia.scm.web.api.RepositoryToHalMapper;
public class MapperModule extends AbstractModule {
@Override
@@ -70,6 +71,8 @@ public class MapperModule extends AbstractModule {
bind(ScmViolationExceptionToErrorDtoMapper.class).to(Mappers.getMapper(ScmViolationExceptionToErrorDtoMapper.class).getClass());
bind(ExceptionWithContextToErrorDtoMapper.class).to(Mappers.getMapper(ExceptionWithContextToErrorDtoMapper.class).getClass());
+ bind(RepositoryToHalMapper.class).to(Mappers.getMapper(RepositoryToRepositoryDtoMapper.class).getClass());
+
// no mapstruct required
bind(MeDtoFactory.class);
bind(UIPluginDtoMapper.class);
diff --git a/scm-webapp/src/main/java/sonia/scm/api/v2/resources/RepositoryToRepositoryDtoMapper.java b/scm-webapp/src/main/java/sonia/scm/api/v2/resources/RepositoryToRepositoryDtoMapper.java
index 51a1583255..2105124015 100644
--- a/scm-webapp/src/main/java/sonia/scm/api/v2/resources/RepositoryToRepositoryDtoMapper.java
+++ b/scm-webapp/src/main/java/sonia/scm/api/v2/resources/RepositoryToRepositoryDtoMapper.java
@@ -38,6 +38,7 @@ import sonia.scm.repository.api.Command;
import sonia.scm.repository.api.RepositoryService;
import sonia.scm.repository.api.RepositoryServiceFactory;
import sonia.scm.repository.api.ScmProtocol;
+import sonia.scm.web.api.RepositoryToHalMapper;
import java.util.List;
@@ -49,7 +50,7 @@ import static java.util.stream.Collectors.toList;
// Mapstruct does not support parameterized (i.e. non-default) constructors. Thus, we need to use field injection.
@SuppressWarnings("squid:S3306")
@Mapper
-public abstract class RepositoryToRepositoryDtoMapper extends BaseMapper {
+public abstract class RepositoryToRepositoryDtoMapper extends BaseMapper implements RepositoryToHalMapper {
@Inject
private ResourceLinks resourceLinks;
@@ -58,6 +59,9 @@ public abstract class RepositoryToRepositoryDtoMapper extends BaseMapper
{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);
};
diff --git a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx b/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
index 32112d97a1..9f714e5af0 100644
--- a/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
+++ b/scm-ui/ui-components/src/forms/Checkbox.stories.tsx
@@ -42,4 +42,3 @@ storiesOf("Forms|Checkbox", module)
{
if (title) {
return {
but bulma does.
// @ts-ignore */}
diff --git a/scm-ui/ui-components/src/forms/Radio.tsx b/scm-ui/ui-components/src/forms/Radio.tsx
index d05e40a19a..fe6a35f4a6 100644
--- a/scm-ui/ui-components/src/forms/Radio.tsx
+++ b/scm-ui/ui-components/src/forms/Radio.tsx
@@ -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;
`;
diff --git a/scm-ui/ui-components/src/forms/Textarea.stories.tsx b/scm-ui/ui-components/src/forms/Textarea.stories.tsx
index 2698195519..bcb638cbaa 100644
--- a/scm-ui/ui-components/src/forms/Textarea.stories.tsx
+++ b/scm-ui/ui-components/src/forms/Textarea.stories.tsx
@@ -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";
diff --git a/scm-ui/ui-components/src/layout/Footer.stories.tsx b/scm-ui/ui-components/src/layout/Footer.stories.tsx
index 02738f68c0..c25b618a87 100644
--- a/scm-ui/ui-components/src/layout/Footer.stories.tsx
+++ b/scm-ui/ui-components/src/layout/Footer.stories.tsx
@@ -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 =>
-
+ {afterTitle} }
+
{pageActions}
diff --git a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
index 76427dc4e0..73ddadd0a4 100644
--- a/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
+++ b/scm-ui/ui-components/src/layout/PrimaryContentColumn.tsx
@@ -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{title}
; diff --git a/scm-ui/ui-components/src/layout/index.ts b/scm-ui/ui-components/src/layout/index.ts index 2c9f7fba72..f1876d4ae1 100644 --- a/scm-ui/ui-components/src/layout/index.ts +++ b/scm-ui/ui-components/src/layout/index.ts @@ -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"; - diff --git a/scm-ui/ui-components/src/modals/ConfirmAlert.tsx b/scm-ui/ui-components/src/modals/ConfirmAlert.tsx index b20f971cc2..e8671a77cb 100644 --- a/scm-ui/ui-components/src/modals/ConfirmAlert.tsx +++ b/scm-ui/ui-components/src/modals/ConfirmAlert.tsx @@ -62,7 +62,11 @@ class ConfirmAlert extends React.Component
{buttons.map((button, i) => (
= ({ to, icon, label }) => {
let showIcon;
if (icon) {
diff --git a/scm-ui/ui-components/src/navigation/MenuContext.tsx b/scm-ui/ui-components/src/navigation/MenuContext.tsx
new file mode 100644
index 0000000000..f02e5ab8d2
--- /dev/null
+++ b/scm-ui/ui-components/src/navigation/MenuContext.tsx
@@ -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({
+ isCollapsed() {
+ return false;
+ },
+ setCollapsed() {}
+});
+
+export const StateMenuContextProvider: FC = ({ children }) => {
+ const [collapsed, setCollapsed] = useState(false);
+
+ const context = {
+ isCollapsed() {
+ return collapsed;
+ },
+ setCollapsed
+ };
+
+ return {children} ;
+};
+
+const useMenuContext = () => {
+ return useContext(MenuContext);
+};
+
+export default useMenuContext;
diff --git a/scm-ui/ui-components/src/navigation/NavAction.tsx b/scm-ui/ui-components/src/navigation/NavAction.tsx
index dd350d1c71..394b30d961 100644
--- a/scm-ui/ui-components/src/navigation/NavAction.tsx
+++ b/scm-ui/ui-components/src/navigation/NavAction.tsx
@@ -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 {
render() {
const { label, icon, action } = this.props;
diff --git a/scm-ui/ui-components/src/navigation/NavLink.tsx b/scm-ui/ui-components/src/navigation/NavLink.tsx
index 7a527e5ab5..d9cb3c4e7e 100644
--- a/scm-ui/ui-components/src/navigation/NavLink.tsx
+++ b/scm-ui/ui-components/src/navigation/NavLink.tsx
@@ -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 {
- static defaultProps = {
- activeOnlyWhenExact: true
- };
+const NavLink: FC = ({ 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 = (
- <>
- {" "}
-
- );
- }
-
- return (
-
-
- {showIcon}
- {collapsed ? null : label}
-
-
+ let showIcon = null;
+ if (icon) {
+ showIcon = (
+ <>
+ {" "}
+
);
- };
-
- render() {
- const { to, activeOnlyWhenExact } = this.props;
-
- return
+
+ {showIcon}
+ {collapsed ? null : label}
+
+
+ );
+};
+
+NavLink.defaultProps = {
+ activeOnlyWhenExact: true
+};
export default NavLink;
diff --git a/scm-ui/ui-components/src/navigation/Navigation.tsx b/scm-ui/ui-components/src/navigation/Navigation.tsx
index dc848b4d24..0ccd94e7f7 100644
--- a/scm-ui/ui-components/src/navigation/Navigation.tsx
+++ b/scm-ui/ui-components/src/navigation/Navigation.tsx
@@ -27,6 +27,8 @@ type Props = {
children?: ReactNode;
};
+// TODO it is used?
+
class Navigation extends React.Component {
render() {
return ;
diff --git a/scm-ui/ui-components/src/navigation/MenuContext.ts b/scm-ui/ui-components/src/navigation/RoutingProps.ts
similarity index 73%
rename from scm-ui/ui-components/src/navigation/MenuContext.ts
rename to scm-ui/ui-components/src/navigation/RoutingProps.ts
index e2760da025..20f9d8d900 100644
--- a/scm-ui/ui-components/src/navigation/MenuContext.ts
+++ b/scm-ui/ui-components/src/navigation/RoutingProps.ts
@@ -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;
+};
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
new file mode 100644
index 0000000000..73531dcb18
--- /dev/null
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx
@@ -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 = (
+
+
+);
+
+const withRoute = (route: string) => {
+ return (story: ReactElement) => {story} ;
+};
+
+storiesOf("Navigation|Secondary", module)
+ .addDecorator(story => {story()} )
+ .addDecorator(story => (
+
+
+ ))
+ .add("Default", () =>
+ withRoute("/")(
+
+
+ )
+ )
+ .add("Sub Navigation", () =>
+ withRoute("/")(
+
+
+ )
+ )
+ .add("Extension Point", () => {
+ const binder = new Binder("menu");
+ binder.bind("subnav.sample", starships);
+ return withRoute("/hitchhiker/starships/titanic")(
+
+
+
+
+ );
+ });
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index fd8e1dd3eb..59e3593ef2 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -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`
cursor: pointer;
`;
-const SecondaryNavigation: FC = ({ label, children, collapsed, onCollapse }) => {
- const location = useLocation();
- const menuContext = useContext(MenuContext);
+const SecondaryNavigation: FC = ({ 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 ? : ;
return (
);
};
-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;
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
index e35acdb386..698eafe34a 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
@@ -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 {
- render() {
- const { to, icon, label, title, activeWhenMatch, activeOnlyWhenExact, children } = this.props;
- if (children) {
- return (
-
- {({ menuCollapsed }) => (
-
- {children}
-
- )}
-
- );
- } else {
- return (
-
- {({ menuCollapsed }) =>
- );
- }
+const SecondaryNavigationItem: FC = ({ children, ...props }) => {
+ if (children) {
+ return {children} ;
+ } else {
+ return = ({ to, activeOnlyWhenExact, icon, collapsed, title, label, children }) => {
+const SubNavigation: FC = ({ 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 = ({ to, activeOnlyWhenExact, icon, collapsed, ti
exact: activeOnlyWhenExact
});
+ const context = useMenuContext();
+ const collapsed = context.isCollapsed();
+
let defaultIcon = "fas fa-cog";
if (icon) {
defaultIcon = icon;
diff --git a/scm-ui/ui-components/src/navigation/index.ts b/scm-ui/ui-components/src/navigation/index.ts
index b7326f6810..4dcce4321b 100644
--- a/scm-ui/ui-components/src/navigation/index.ts
+++ b/scm-ui/ui-components/src/navigation/index.ts
@@ -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";
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index 5d6381a971..4b042f0c4d 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -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 {
}),
() => callback()
);
- storeMenuCollapsed(true);
};
setCollapse = (collapsed: boolean) => {
@@ -289,11 +287,17 @@ class DiffFile extends React.Component {
- {({ setMenuCollapsed }) => (
+ {({ setCollapsed }) => (
this.toggleSideBySide(() => setMenuCollapsed(true))}
+ onClick={() =>
+ this.toggleSideBySide(() => {
+ if (this.state.sideBySide) {
+ setCollapsed(true);
+ }
+ })
+ }
/>
)}
diff --git a/scm-ui/ui-webapp/src/repos/components/list/RepositoryAvatar.tsx b/scm-ui/ui-components/src/repos/RepositoryAvatar.tsx
similarity index 100%
rename from scm-ui/ui-webapp/src/repos/components/list/RepositoryAvatar.tsx
rename to scm-ui/ui-components/src/repos/RepositoryAvatar.tsx
diff --git a/scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx b/scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx
new file mode 100644
index 0000000000..4954d765ed
--- /dev/null
+++ b/scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx
@@ -0,0 +1,97 @@
+/*
+ * 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, { FC, ReactNode } from "react";
+import styled from "styled-components";
+import repository from "../__resources__/repository";
+// @ts-ignore ignore unknown png
+import Git from "../__resources__/git-logo.png";
+import RepositoryEntry from "./RepositoryEntry";
+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";
+
+const Spacing = styled.div`
+ margin: 2rem;
+`;
+
+const Container: FC = ({ children }) => {children} ;
+
+const bindAvatar = (binder: Binder, avatar: string) => {
+ binder.bind("repos.repository-avatar", () => {
+ return
+
+ );
+};
+
+const QuickLink = (
+
+ {story()} )
+ .addDecorator(storyFn => {storyFn()} )
+ .add("Default", () => {
+ return {
@@ -77,23 +82,33 @@ class RepositoryEntry extends React.Component {
);
};
- createFooterRight = (repository: Repository) => {
+ createFooterRight = (repository: Repository, baseDate?: DateProp) => {
return (
- = ({ name, renderAll, props, children }) => {
+const ExtensionPoint: FC = ({ 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;
diff --git a/scm-ui/ui-plugins/bin/ui-plugins.js b/scm-ui/ui-plugins/bin/ui-plugins.js
index 5789a92036..86de15d063 100755
--- a/scm-ui/ui-plugins/bin/ui-plugins.js
+++ b/scm-ui/ui-plugins/bin/ui-plugins.js
@@ -1,3 +1,4 @@
+#!/usr/bin/env node
/*
* MIT License
*
@@ -21,7 +22,7 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
-#!/usr/bin/env node
+
/* eslint-disable no-console */
const { spawnSync } = require("child_process");
diff --git a/scm-ui/ui-scripts/package.json b/scm-ui/ui-scripts/package.json
index 25f5b25023..d99b2209ae 100644
--- a/scm-ui/ui-scripts/package.json
+++ b/scm-ui/ui-scripts/package.json
@@ -10,14 +10,14 @@
"ui-scripts": "./bin/ui-scripts.js"
},
"dependencies": {
- "@pmmmwh/react-refresh-webpack-plugin": "^0.1.3",
+ "@pmmmwh/react-refresh-webpack-plugin": "^0.2.0",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
- "mini-css-extract-plugin": "^0.8.0",
+ "mini-css-extract-plugin": "^0.9.0",
"mustache": "^3.1.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
- "react-refresh": "^0.7.2",
+ "react-refresh": "^0.8.0",
"sass": "^1.26.3",
"sass-loader": "^8.0.0",
"script-loader": "^0.7.2",
diff --git a/scm-ui/ui-styles/src/scm.scss b/scm-ui/ui-styles/src/scm.scss
index 3adb51da90..e799fe38e2 100644
--- a/scm-ui/ui-styles/src/scm.scss
+++ b/scm-ui/ui-styles/src/scm.scss
@@ -433,6 +433,7 @@ $danger-25: scale-color($danger, $lightness: 75%);
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/solid";
+@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~react-diff-view/style/index";
diff --git a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
index 6840808214..089cb959fb 100644
--- a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
@@ -35,10 +35,7 @@ import {
PrimaryContentColumn,
SecondaryNavigationColumn,
SecondaryNavigation,
- SubNavigation,
- isMenuCollapsed,
- MenuContext,
- storeMenuCollapsed
+ SubNavigation
} from "@scm-manager/ui-components";
import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
import AdminDetails from "./AdminDetails";
@@ -47,6 +44,7 @@ import GlobalConfig from "./GlobalConfig";
import RepositoryRoles from "../roles/containers/RepositoryRoles";
import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
+import { StateMenuContextProvider } from "@scm-manager/ui-components/src/navigation/MenuContext";
type Props = RouteComponentProps &
WithTranslation & {
@@ -55,23 +53,7 @@ type Props = RouteComponentProps &
installedPluginsLink: string;
};
-type State = {
- menuCollapsed: boolean;
-};
-
-class Admin extends React.Component {
- constructor(props: Props) {
- super(props);
-
- this.state = {
- menuCollapsed: isMenuCollapsed()
- };
- }
-
- onCollapseAdminMenu = (collapsed: boolean) => {
- this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
- };
-
+class Admin extends React.Component {
stripEndingSlash = (url: string) => {
if (url.endsWith("/")) {
if (url.includes("role")) {
@@ -94,7 +76,6 @@ class Admin extends React.Component {
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 {
};
return (
- this.setState({ menuCollapsed: collapsed }) }}
- >
+
-
+
{
-
- this.onCollapseAdminMenu(!menuCollapsed)}
- collapsed={menuCollapsed}
- >
+
+
{
-
+
);
}
}
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
index 96d123361f..cb93ef5d6c 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
@@ -181,7 +181,7 @@ class PluginEntry extends React.Component {
this.toggleModal("showInstallModal") : null}
avatar={avatar}
- title={plugin.displayName ? plugin.displayName : plugin.name}
+ title={plugin.displayName ? {plugin.displayName} : {plugin.name}}
description={plugin.description}
contentRight={plugin.pending || plugin.markedForUninstall ? this.createPendingSpinner() : actionbar}
footerRight={footerRight}
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
index 1074588e59..05ddf1f848 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
@@ -278,9 +278,7 @@ class PluginModal extends React.Component {
- this.handleClickButton(button)}> + this.handleClickButton(button)} + > {button.label}
diff --git a/scm-ui/ui-components/src/navigation/ExternalLink.tsx b/scm-ui/ui-components/src/navigation/ExternalLink.tsx index a87b118ee3..1565f6fa79 100644 --- a/scm-ui/ui-components/src/navigation/ExternalLink.tsx +++ b/scm-ui/ui-components/src/navigation/ExternalLink.tsx @@ -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{story()}
+
- onCollapse(!isCollapsed) : undefined}
- >
- {onCollapse && !subNavActive && (
-
- {arrowIcon}
-
- )}
+
+
+ {arrowIcon}
+
{isCollapsed ? "" : label}
-
- {childrenWithProps}
-
+ {children}
+
-
{this.renderNotifications()}
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/ShowPendingModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/ShowPendingModal.tsx
index d28b51f927..c9ee5462d4 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/ShowPendingModal.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/ShowPendingModal.tsx
@@ -27,7 +27,6 @@ import { PendingPlugins } from "@scm-manager/ui-types";
import { useTranslation } from "react-i18next";
import PendingPluginsQueue from "./PendingPluginsQueue";
-
type ModalBodyProps = {
pendingPlugins: PendingPlugins;
};
diff --git a/scm-ui/ui-webapp/src/containers/Profile.tsx b/scm-ui/ui-webapp/src/containers/Profile.tsx
index 221e8974c7..8f14bed1e7 100644
--- a/scm-ui/ui-webapp/src/containers/Profile.tsx
+++ b/scm-ui/ui-webapp/src/containers/Profile.tsx
@@ -30,20 +30,18 @@ import { WithTranslation, withTranslation } from "react-i18next";
import { Me } from "@scm-manager/ui-types";
import {
ErrorPage,
- isMenuCollapsed,
- MenuContext,
NavLink,
Page,
CustomQueryFlexWrappedColumns,
PrimaryContentColumn,
SecondaryNavigationColumn,
SecondaryNavigation,
- SubNavigation
+ SubNavigation,
+ StateMenuContextProvider
} from "@scm-manager/ui-components";
import ChangeUserPassword from "./ChangeUserPassword";
import ProfileInfo from "./ProfileInfo";
import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
type Props = RouteComponentProps &
WithTranslation & {
@@ -53,23 +51,7 @@ type Props = RouteComponentProps &
match: any;
};
-type State = {
- menuCollapsed: boolean;
-};
-
-class Profile extends React.Component
- {this.createRestartSectionContent()}
-
+ {this.createRestartSectionContent()}
} />
} />