mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-13 00:45:44 +01:00
Merge remote-tracking branch 'origin/develop' into feature/core_doku
This commit is contained in:
Florian Scholdei
10
CHANGELOG.md
10
CHANGELOG.md
@@ -5,11 +5,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## Unreleased
|
||||
### Changed
|
||||
- Simplified collapse state management of the secondary navigation ([#1086](https://github.com/scm-manager/scm-manager/pull/1086)
|
||||
|
||||
### Fixed
|
||||
- Authentication for write requests for repositories with anonymous read access ([#108](https://github.com/scm-manager/scm-manager/pull/1081))
|
||||
|
||||
|
||||
## 2.0.0-rc6 - 2020-03-26
|
||||
### Added
|
||||
- Extension point to add links to the repository cards from plug ins ([#1041](https://github.com/scm-manager/scm-manager/pull/1041))
|
||||
- Libc based restart strategy for posix operating systems ([#1079](https://github.com/scm-manager/scm-manager/pull/1079))
|
||||
- Simple restart strategy with System.exit ([#1079](https://github.com/scm-manager/scm-manager/pull/1079))
|
||||
- Notification if restart is not supported on the underlying platform ([#1079](https://github.com/scm-manager/scm-manager/pull/1079))
|
||||
- Extension point before title in repository cards ([#1080](https://github.com/scm-manager/scm-manager/pull/1080))
|
||||
- Extension point after title on repository detail page ([#1080](https://github.com/scm-manager/scm-manager/pull/1080))
|
||||
|
||||
### Changed
|
||||
- Update resteasy to version 4.5.2.Final
|
||||
|
||||
2
Jenkinsfile
vendored
2
Jenkinsfile
vendored
@@ -48,7 +48,7 @@ node('docker') {
|
||||
sh "git -c user.name='CES Marvin' -c user.email='cesmarvin@cloudogu.com' commit -m 'release version ${releaseVersion}'"
|
||||
|
||||
// we need to fetch all branches, so we can checkout master and develop later
|
||||
sh "git config 'remote.origin.fetch +refs/heads/*:refs/remotes/origin/*'"
|
||||
sh "git config 'remote.origin.fetch' '+refs/heads/*:refs/remotes/origin/*'"
|
||||
sh "git fetch --all"
|
||||
|
||||
// merge release branch into master
|
||||
|
||||
@@ -7,7 +7,7 @@ To release a new version of SCM-Manager v2 you have to do the following steps (r
|
||||
Make sure you have no changes you want to keep!
|
||||
|
||||
```
|
||||
git fetch && git checkout default && git reset --hard origin/default
|
||||
git fetch && git checkout develop && git reset --hard origin/develop
|
||||
```
|
||||
|
||||
## Modify Changelog
|
||||
@@ -114,3 +114,7 @@ Edit `package.json`: `version` has to be set to the new development version.
|
||||
git commit -am "Prepare for next development iteration"
|
||||
git push origin develop
|
||||
```
|
||||
## Attention: Creating new plugins
|
||||
If you are creating a new plugin which doesn't exist in the SCM-Manager Plugin-Center yet, your plugin will not be shown after the release. First you have to create a `index.md` in the Plugin-Center Repository.
|
||||
|
||||
Example: https://github.com/scm-manager/plugin-center/blob/master/src/plugins/scm-teamscale-plugin/index.md
|
||||
|
||||
4
pom.xml
4
pom.xml
@@ -494,7 +494,7 @@
|
||||
<plugin>
|
||||
<groupId>sonia.scm.maven</groupId>
|
||||
<artifactId>smp-maven-plugin</artifactId>
|
||||
<version>1.0.0-rc4</version>
|
||||
<version>1.0.0-rc5</version>
|
||||
</plugin>
|
||||
|
||||
<plugin>
|
||||
@@ -912,7 +912,7 @@
|
||||
<jaxrs.version>2.1.1</jaxrs.version>
|
||||
<resteasy.version>4.5.2.Final</resteasy.version>
|
||||
<jersey-client.version>1.19.4</jersey-client.version>
|
||||
<jackson.version>2.10.2</jackson.version>
|
||||
<jackson.version>2.10.3</jackson.version>
|
||||
<guice.version>4.2.2</guice.version>
|
||||
<jaxb.version>2.3.1</jaxb.version>
|
||||
<hibernate-validator.version>6.1.2.Final</hibernate-validator.version>
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
<dependency>
|
||||
<groupId>org.kohsuke.metainf-services</groupId>
|
||||
<artifactId>metainf-services</artifactId>
|
||||
<version>1.7</version>
|
||||
<version>1.8</version>
|
||||
</dependency>
|
||||
|
||||
</dependencies>
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
package sonia.scm.web.api;
|
||||
|
||||
import de.otto.edison.hal.HalRepresentation;
|
||||
import sonia.scm.repository.Repository;
|
||||
|
||||
/**
|
||||
* Maps a repository to a hal representation.
|
||||
* This is especially useful if a plugin would deliver a repository to the frontend.
|
||||
*
|
||||
* @since 2.0.0
|
||||
*/
|
||||
public interface RepositoryToHalMapper {
|
||||
|
||||
/**
|
||||
* Returns the hal representation of the repository.
|
||||
*
|
||||
* @param repository repository to map
|
||||
* @return hal representation
|
||||
*/
|
||||
HalRepresentation map(Repository repository);
|
||||
}
|
||||
@@ -35,7 +35,7 @@ import sonia.scm.repository.Repository;
|
||||
import sonia.scm.repository.RepositoryPermissions;
|
||||
import sonia.scm.repository.spi.ScmProviderHttpServlet;
|
||||
import sonia.scm.repository.spi.ScmProviderHttpServletDecorator;
|
||||
import sonia.scm.security.Role;
|
||||
import sonia.scm.security.Authentications;
|
||||
import sonia.scm.security.ScmSecurityException;
|
||||
import sonia.scm.util.HttpUtil;
|
||||
|
||||
@@ -177,7 +177,7 @@ public abstract class PermissionFilter extends ScmProviderHttpServletDecorator
|
||||
HttpServletResponse response, Subject subject)
|
||||
throws IOException
|
||||
{
|
||||
if (subject.hasRole(Role.USER))
|
||||
if (!Authentications.isAuthenticatedSubjectAnonymous())
|
||||
{
|
||||
sendNotEnoughPrivilegesError(request, response);
|
||||
}
|
||||
|
||||
@@ -82,6 +82,17 @@ public class PermissionFilterTest {
|
||||
|
||||
permissionFilter.service(request, response, REPOSITORY);
|
||||
|
||||
verify(response).sendError(eq(403));
|
||||
verify(delegateServlet, never()).service(request, response, REPOSITORY);
|
||||
}
|
||||
|
||||
@Test
|
||||
@SubjectAware(username = "_anonymous", password = "secret")
|
||||
public void shouldBlockForAnonymousOnWriteRequestWithAuthenticationRequest() throws IOException, ServletException {
|
||||
writeRequest = true;
|
||||
|
||||
permissionFilter.service(request, response, REPOSITORY);
|
||||
|
||||
verify(response).sendError(eq(401), anyString());
|
||||
verify(delegateServlet, never()).service(request, response, REPOSITORY);
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ admin = secret, admin
|
||||
writer = secret, repo_write
|
||||
reader = secret, repo_read
|
||||
unpriv = secret
|
||||
_anonymous = secret
|
||||
|
||||
[roles]
|
||||
admin = *
|
||||
|
||||
@@ -59,6 +59,10 @@
|
||||
/* Experimental Options */
|
||||
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
|
||||
"skipLibCheck": true
|
||||
"skipLibCheck": true,
|
||||
"lib": [
|
||||
"dom",
|
||||
"es2019"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,7 +70,4 @@ addDecorator(
|
||||
})
|
||||
);
|
||||
|
||||
const RoutingDecorator = (story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
|
||||
addDecorator(RoutingDecorator);
|
||||
|
||||
configure(require.context("../src", true, /\.stories\.tsx?$/), module);
|
||||
|
||||
@@ -27,7 +27,7 @@ import styled from "styled-components";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
title: ReactNode;
|
||||
description?: string;
|
||||
avatar: ReactNode;
|
||||
contentRight?: ReactNode;
|
||||
@@ -99,9 +99,7 @@ export default class CardColumn extends React.Component<Props> {
|
||||
<FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
|
||||
<div className="is-flex">
|
||||
<ContentLeft className="content">
|
||||
<p className="shorten-text is-marginless">
|
||||
<strong>{title}</strong>
|
||||
</p>
|
||||
<p className="shorten-text is-marginless">{title}</p>
|
||||
<p className="shorten-text">{description}</p>
|
||||
</ContentLeft>
|
||||
<ContentRight>{contentRight}</ContentRight>
|
||||
|
||||
@@ -25,7 +25,6 @@
|
||||
import { chooseLocale, supportedLocales } from "./DateFromNow";
|
||||
|
||||
describe("test choose locale", () => {
|
||||
|
||||
it("should choose de", () => {
|
||||
const locale = chooseLocale("de_DE", ["de", "en"]);
|
||||
expect(locale).toBe(supportedLocales.de);
|
||||
@@ -45,5 +44,4 @@ describe("test choose locale", () => {
|
||||
const locale = chooseLocale("af", ["af", "be"]);
|
||||
expect(locale).toBe(supportedLocales.en);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -32,12 +32,14 @@ import MarkdownXmlCodeBlock from "./__resources__/markdown-xml-codeblock.md";
|
||||
import MarkdownInlineXml from "./__resources__/markdown-inline-xml.md";
|
||||
import Title from "./layout/Title";
|
||||
import { Subtitle } from "./layout";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
|
||||
const Spacing = styled.div`
|
||||
padding: 2em;
|
||||
`;
|
||||
|
||||
storiesOf("MarkdownView", module)
|
||||
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
|
||||
.addDecorator(story => <Spacing>{story()}</Spacing>)
|
||||
.add("Default", () => <MarkdownView content={TestPage} skipHtml={false} />)
|
||||
.add("Code without Lang", () => <MarkdownView content={MarkdownWithoutLang} skipHtml={false} />)
|
||||
|
||||
BIN
scm-ui/ui-components/src/__resources__/git-logo.png
Normal file
BIN
scm-ui/ui-components/src/__resources__/git-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
67
scm-ui/ui-components/src/__resources__/repository.ts
Normal file
67
scm-ui/ui-components/src/__resources__/repository.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
export default {
|
||||
contact: "heart-of-gold@hitchhiher.com",
|
||||
creationDate: "2020-03-23T08:26:01.164Z",
|
||||
description: "The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive",
|
||||
healthCheckFailures: [],
|
||||
lastModified: "2020-03-23T08:26:01.876Z",
|
||||
namespace: "hitchhiher",
|
||||
name: "heartOfGold",
|
||||
type: "git",
|
||||
_links: {
|
||||
self: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git" },
|
||||
delete: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git" },
|
||||
update: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git" },
|
||||
permissions: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/permissions/" },
|
||||
protocol: [
|
||||
{ href: "ssh://scmadmin@localhost:4567/repo/scmadmin/Git", name: "ssh" },
|
||||
{ href: "http://localhost:8081/scm/repo/scmadmin/Git", name: "http" }
|
||||
],
|
||||
tags: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/tags/" },
|
||||
branches: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/branches/" },
|
||||
incomingChangesets: {
|
||||
href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/incoming/{source}/{target}/changesets",
|
||||
templated: true
|
||||
},
|
||||
incomingDiff: {
|
||||
href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/incoming/{source}/{target}/diff",
|
||||
templated: true
|
||||
},
|
||||
incomingDiffParsed: {
|
||||
href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/incoming/{source}/{target}/diff/parsed",
|
||||
templated: true
|
||||
},
|
||||
changesets: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/changesets/" },
|
||||
sources: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git/sources/" },
|
||||
authorMappingConfig: {
|
||||
href: "http://localhost:8081/scm/api/v2/authormapping/configuration/scmadmin/Git"
|
||||
},
|
||||
unfavorize: { href: "http://localhost:8081/scm/api/v2/unfavorize/scmadmin/Git" },
|
||||
favorites: [
|
||||
{ href: "http://localhost:8081/scm/api/v2/unfavorize/scmadmin/Git", name: "unfavorize" },
|
||||
{ href: "http://localhost:8081/scm/api/v2/favorize/scmadmin/Git", name: "favorize" }
|
||||
]
|
||||
}
|
||||
};
|
||||
@@ -34188,6 +34188,684 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Navigation|Secondary Default 1`] = `
|
||||
<div
|
||||
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
|
||||
>
|
||||
<div
|
||||
className="column is-3"
|
||||
>
|
||||
<aside
|
||||
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
|
||||
>
|
||||
<div>
|
||||
<p
|
||||
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
|
||||
color="info"
|
||||
>
|
||||
<i
|
||||
className="fas fa-caret-right"
|
||||
/>
|
||||
</i>
|
||||
Hitchhiker
|
||||
</p>
|
||||
<ul
|
||||
className="menu-list"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className=""
|
||||
href="/42"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-puzzle-piece fa-fw"
|
||||
/>
|
||||
|
||||
Puzzle 42
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className=""
|
||||
href="/heart-of-gold"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-star fa-fw"
|
||||
/>
|
||||
|
||||
Heart Of Gold
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
|
||||
<div
|
||||
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
|
||||
>
|
||||
<div
|
||||
className="column is-3"
|
||||
>
|
||||
<aside
|
||||
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
|
||||
>
|
||||
<div>
|
||||
<p
|
||||
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
|
||||
color="info"
|
||||
>
|
||||
<i
|
||||
className="fas fa-caret-right"
|
||||
/>
|
||||
</i>
|
||||
Hitchhiker
|
||||
</p>
|
||||
<ul
|
||||
className="menu-list"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className=""
|
||||
href="/42"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-puzzle-piece fa-fw"
|
||||
/>
|
||||
|
||||
Puzzle 42
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="is-active"
|
||||
href="/hitchhiker/starships"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-cog fa-fw"
|
||||
/>
|
||||
|
||||
Starships
|
||||
</a>
|
||||
<ul
|
||||
className="sub-menu"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className=""
|
||||
href="/hitchhiker/starships/heart-of-gold"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-star fa-fw"
|
||||
/>
|
||||
|
||||
Heart Of Gold
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="is-active"
|
||||
href="/hitchhiker/starships/titanic"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Titanic
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
|
||||
<div
|
||||
className="SecondaryNavigationstories__Columns-fdxo4w-0 fJKROg columns"
|
||||
>
|
||||
<div
|
||||
className="column is-3"
|
||||
>
|
||||
<aside
|
||||
className="SecondaryNavigation__SectionContainer-sc-8p1rgi-0 bfoGdF menu"
|
||||
>
|
||||
<div>
|
||||
<p
|
||||
className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bGijuJ menu-label"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="SecondaryNavigation__Icon-sc-8p1rgi-1 SeoNL is-medium"
|
||||
color="info"
|
||||
>
|
||||
<i
|
||||
className="fas fa-caret-right"
|
||||
/>
|
||||
</i>
|
||||
Hitchhiker
|
||||
</p>
|
||||
<ul
|
||||
className="menu-list"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
className=""
|
||||
href="/42"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-puzzle-piece fa-fw"
|
||||
/>
|
||||
|
||||
Puzzle 42
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className=""
|
||||
href="/hitchhiker/starships"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-cog fa-fw"
|
||||
/>
|
||||
|
||||
Starships
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
|
||||
<div
|
||||
className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"
|
||||
>
|
||||
<a
|
||||
className="overlay-column"
|
||||
href="/repo/hitchhiher/heartOfGold"
|
||||
onClick={[Function]}
|
||||
/>
|
||||
<article
|
||||
className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
|
||||
>
|
||||
<figure
|
||||
className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
|
||||
>
|
||||
<p
|
||||
className="image is-64x64"
|
||||
>
|
||||
<img
|
||||
alt="Logo"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</p>
|
||||
</figure>
|
||||
<div
|
||||
className="CardColumn__FlexFullHeight-sc-1w6lsih-2 cAdfGj media-content text-box is-flex"
|
||||
>
|
||||
<div
|
||||
className="is-flex"
|
||||
>
|
||||
<div
|
||||
className="CardColumn__ContentLeft-sc-1w6lsih-4 dumWkw content"
|
||||
>
|
||||
<p
|
||||
className="shorten-text is-marginless"
|
||||
>
|
||||
|
||||
<strong>
|
||||
heartOfGold
|
||||
</strong>
|
||||
</p>
|
||||
<p
|
||||
className="shorten-text"
|
||||
>
|
||||
The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
|
||||
>
|
||||
<div
|
||||
className="level-left is-hidden-mobile"
|
||||
>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/branches"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-code-branch has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/code/changesets/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-exchange-alt has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/code/sources/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-code has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/settings/general"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-cog has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="level-right is-mobile is-marginless"
|
||||
>
|
||||
<small
|
||||
className="level-item"
|
||||
>
|
||||
<time
|
||||
className="DateFromNow__DateElement-sc-16hnz72-0 ehlCzi"
|
||||
title="2020-03-23 09:26:01"
|
||||
>
|
||||
3 days ago
|
||||
</time>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
|
||||
<div
|
||||
className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"
|
||||
>
|
||||
<a
|
||||
className="overlay-column"
|
||||
href="/repo/hitchhiher/heartOfGold"
|
||||
onClick={[Function]}
|
||||
/>
|
||||
<article
|
||||
className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
|
||||
>
|
||||
<figure
|
||||
className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
|
||||
>
|
||||
<p
|
||||
className="image is-64x64"
|
||||
>
|
||||
<img
|
||||
alt="Logo"
|
||||
src="/images/blib.jpg"
|
||||
/>
|
||||
</p>
|
||||
</figure>
|
||||
<div
|
||||
className="CardColumn__FlexFullHeight-sc-1w6lsih-2 cAdfGj media-content text-box is-flex"
|
||||
>
|
||||
<div
|
||||
className="is-flex"
|
||||
>
|
||||
<div
|
||||
className="CardColumn__ContentLeft-sc-1w6lsih-4 dumWkw content"
|
||||
>
|
||||
<p
|
||||
className="shorten-text is-marginless"
|
||||
>
|
||||
<i
|
||||
className="fas fa-star"
|
||||
/>
|
||||
|
||||
<strong>
|
||||
heartOfGold
|
||||
</strong>
|
||||
</p>
|
||||
<p
|
||||
className="shorten-text"
|
||||
>
|
||||
The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
|
||||
>
|
||||
<div
|
||||
className="level-left is-hidden-mobile"
|
||||
>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/branches"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-code-branch has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/code/changesets/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-exchange-alt has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/code/sources/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-code has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/settings/general"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-cog has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="level-right is-mobile is-marginless"
|
||||
>
|
||||
<small
|
||||
className="level-item"
|
||||
>
|
||||
<time
|
||||
className="DateFromNow__DateElement-sc-16hnz72-0 ehlCzi"
|
||||
title="2020-03-23 09:26:01"
|
||||
>
|
||||
3 days ago
|
||||
</time>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots RepositoryEntry Default 1`] = `
|
||||
<div
|
||||
className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"
|
||||
>
|
||||
<a
|
||||
className="overlay-column"
|
||||
href="/repo/hitchhiher/heartOfGold"
|
||||
onClick={[Function]}
|
||||
/>
|
||||
<article
|
||||
className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
|
||||
>
|
||||
<figure
|
||||
className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
|
||||
>
|
||||
<p
|
||||
className="image is-64x64"
|
||||
>
|
||||
<img
|
||||
alt="Logo"
|
||||
src="/images/blib.jpg"
|
||||
/>
|
||||
</p>
|
||||
</figure>
|
||||
<div
|
||||
className="CardColumn__FlexFullHeight-sc-1w6lsih-2 cAdfGj media-content text-box is-flex"
|
||||
>
|
||||
<div
|
||||
className="is-flex"
|
||||
>
|
||||
<div
|
||||
className="CardColumn__ContentLeft-sc-1w6lsih-4 dumWkw content"
|
||||
>
|
||||
<p
|
||||
className="shorten-text is-marginless"
|
||||
>
|
||||
|
||||
<strong>
|
||||
heartOfGold
|
||||
</strong>
|
||||
</p>
|
||||
<p
|
||||
className="shorten-text"
|
||||
>
|
||||
The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
|
||||
>
|
||||
<div
|
||||
className="level-left is-hidden-mobile"
|
||||
>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/branches"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-code-branch has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/code/changesets/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-exchange-alt has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/code/sources/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-code has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/settings/general"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-cog has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="level-right is-mobile is-marginless"
|
||||
>
|
||||
<small
|
||||
className="level-item"
|
||||
>
|
||||
<time
|
||||
className="DateFromNow__DateElement-sc-16hnz72-0 ehlCzi"
|
||||
title="2020-03-23 09:26:01"
|
||||
>
|
||||
3 days ago
|
||||
</time>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
|
||||
<div
|
||||
className="RepositoryEntrystories__Spacing-toppdg-0 khfzcK box box-link-shadow"
|
||||
>
|
||||
<a
|
||||
className="overlay-column"
|
||||
href="/repo/hitchhiher/heartOfGold"
|
||||
onClick={[Function]}
|
||||
/>
|
||||
<article
|
||||
className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
|
||||
>
|
||||
<figure
|
||||
className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
|
||||
>
|
||||
<p
|
||||
className="image is-64x64"
|
||||
>
|
||||
<img
|
||||
alt="Logo"
|
||||
src="/images/blib.jpg"
|
||||
/>
|
||||
</p>
|
||||
</figure>
|
||||
<div
|
||||
className="CardColumn__FlexFullHeight-sc-1w6lsih-2 cAdfGj media-content text-box is-flex"
|
||||
>
|
||||
<div
|
||||
className="is-flex"
|
||||
>
|
||||
<div
|
||||
className="CardColumn__ContentLeft-sc-1w6lsih-4 dumWkw content"
|
||||
>
|
||||
<p
|
||||
className="shorten-text is-marginless"
|
||||
>
|
||||
|
||||
<strong>
|
||||
heartOfGold
|
||||
</strong>
|
||||
</p>
|
||||
<p
|
||||
className="shorten-text"
|
||||
>
|
||||
The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
|
||||
>
|
||||
<div
|
||||
className="level-left is-hidden-mobile"
|
||||
>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/branches"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-code-branch has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/code/changesets/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-exchange-alt has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/code/sources/"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-code has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="level-item"
|
||||
>
|
||||
<i
|
||||
className="fas fa-fas fa-code-branch fa-rotate-180 fa-fw has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
|
||||
href="/repo/hitchhiher/heartOfGold/settings/general"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fas fa-cog has-text-inherit fa-lg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="level-right is-mobile is-marginless"
|
||||
>
|
||||
<small
|
||||
className="level-item"
|
||||
>
|
||||
<time
|
||||
className="DateFromNow__DateElement-sc-16hnz72-0 ehlCzi"
|
||||
title="2020-03-23 09:26:01"
|
||||
>
|
||||
3 days ago
|
||||
</time>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots SyntaxHighlighter Go 1`] = `
|
||||
<div
|
||||
className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 eofOgh"
|
||||
|
||||
@@ -32,6 +32,7 @@ import DownloadButton from "./DownloadButton";
|
||||
import EditButton from "./EditButton";
|
||||
import SubmitButton from "./SubmitButton";
|
||||
import { ReactElement } from "react";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
|
||||
const colors = ["primary", "link", "info", "success", "warning", "danger", "white", "light", "dark", "black", "text"];
|
||||
|
||||
@@ -40,8 +41,10 @@ const Spacing = styled.div`
|
||||
`;
|
||||
|
||||
const SpacingDecorator = (story: () => ReactNode) => <Spacing>{story()}</Spacing>;
|
||||
const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
|
||||
|
||||
storiesOf("Buttons|Button", module)
|
||||
.addDecorator(RoutingDecorator)
|
||||
.add("Colors", () => (
|
||||
<div>
|
||||
{colors.map(color => (
|
||||
@@ -70,6 +73,7 @@ storiesOf("Buttons|Button", module)
|
||||
|
||||
const buttonStory = (name: string, storyFn: () => ReactElement) => {
|
||||
return storiesOf("Buttons|" + name, module)
|
||||
.addDecorator(RoutingDecorator)
|
||||
.addDecorator(SpacingDecorator)
|
||||
.add("Default", storyFn);
|
||||
};
|
||||
|
||||
@@ -42,4 +42,3 @@ storiesOf("Forms|Checkbox", module)
|
||||
<Checkbox label="Checked but disabled" checked={true} disabled={true} />
|
||||
</Spacing>
|
||||
));
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@ export default class Checkbox extends React.Component<Props> {
|
||||
if (title) {
|
||||
return <LabelWithHelpIcon label={title} helpText={helpText} />;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { label, checked, disabled } = this.props;
|
||||
@@ -68,13 +68,7 @@ export default class Checkbox extends React.Component<Props> {
|
||||
but bulma does.
|
||||
// @ts-ignore */}
|
||||
<label className="checkbox" disabled={disabled}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={this.onCheckboxChange}
|
||||
disabled={disabled}
|
||||
/>{" "}
|
||||
{label}
|
||||
<input type="checkbox" checked={checked} onChange={this.onCheckboxChange} disabled={disabled} /> {label}
|
||||
{this.renderHelp()}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
`;
|
||||
|
||||
@@ -33,6 +33,7 @@ import hitchhiker from "../__resources__/hitchhiker.png";
|
||||
import marvin from "../__resources__/marvin.jpg";
|
||||
import NavLink from "../navigation/NavLink";
|
||||
import ExternalLink from "../navigation/ExternalLink";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
|
||||
const trillian: Me = {
|
||||
name: "trillian",
|
||||
@@ -64,6 +65,7 @@ const withBinder = (binder: Binder) => {
|
||||
};
|
||||
|
||||
storiesOf("Layout|Footer", module)
|
||||
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
|
||||
.add("Default", () => {
|
||||
return <Footer me={trillian} version="2.0.0" links={{}} />;
|
||||
})
|
||||
|
||||
@@ -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<Props> {
|
||||
componentDidUpdate() {
|
||||
const { title } = this.props;
|
||||
@@ -80,7 +90,7 @@ export default class Page extends React.Component<Props> {
|
||||
}
|
||||
|
||||
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<Props> {
|
||||
<>
|
||||
<div className="columns">
|
||||
<div className="column">
|
||||
<Title title={title} />
|
||||
<FlexContainer>
|
||||
<Title title={title} /> {afterTitle && <MarginLeft>{afterTitle}</MarginLeft>}
|
||||
</FlexContainer>
|
||||
<Subtitle subtitle={subtitle} />
|
||||
</div>
|
||||
{pageActions}
|
||||
|
||||
@@ -21,13 +21,9 @@
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
import React, { ReactNode } from "react";
|
||||
import React, { FC } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
type Props = {
|
||||
children?: ReactNode;
|
||||
collapsed: boolean;
|
||||
};
|
||||
import useMenuContext from "../navigation/MenuContext";
|
||||
|
||||
const PrimaryColumn = styled.div<{ collapsed: boolean }>`
|
||||
/* This is the counterpart to the specific column in SecondaryNavigationColumn. */
|
||||
@@ -39,18 +35,13 @@ const PrimaryColumn = styled.div<{ collapsed: boolean }>`
|
||||
}
|
||||
`;
|
||||
|
||||
export default class PrimaryContentColumn extends React.Component<Props> {
|
||||
static defaultProps = {
|
||||
collapsed: false
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children, collapsed } = this.props;
|
||||
|
||||
const PrimaryContentColumn: FC = ({ children }) => {
|
||||
const context = useMenuContext();
|
||||
return (
|
||||
<PrimaryColumn className="column" collapsed={collapsed}>
|
||||
<PrimaryColumn className="column" collapsed={context.isCollapsed()}>
|
||||
{children}
|
||||
</PrimaryColumn>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default PrimaryContentColumn;
|
||||
|
||||
@@ -21,13 +21,9 @@
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
import React, { ReactNode } from "react";
|
||||
import React, { FC } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
type Props = {
|
||||
children?: ReactNode;
|
||||
collapsed: boolean;
|
||||
};
|
||||
import useMenuContext from "../navigation/MenuContext";
|
||||
|
||||
const SecondaryColumn = styled.div<{ collapsed: boolean }>`
|
||||
/* In Bulma there is unfortunately no intermediate step between .is-1 and .is-2, hence the size.
|
||||
@@ -42,18 +38,13 @@ const SecondaryColumn = styled.div<{ collapsed: boolean }>`
|
||||
}
|
||||
`;
|
||||
|
||||
export default class SecondaryNavigationColumn extends React.Component<Props> {
|
||||
static defaultProps = {
|
||||
collapsed: false
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children, collapsed } = this.props;
|
||||
|
||||
const SecondaryNavigationColumn: FC = ({ children }) => {
|
||||
const context = useMenuContext();
|
||||
return (
|
||||
<SecondaryColumn className="column" collapsed={collapsed}>
|
||||
<SecondaryColumn className="column" collapsed={context.isCollapsed()}>
|
||||
{children}
|
||||
</SecondaryColumn>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default SecondaryNavigationColumn;
|
||||
|
||||
@@ -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";
|
||||
|
||||
|
||||
@@ -62,7 +62,11 @@ class ConfirmAlert extends React.Component<Props> {
|
||||
<div className="field is-grouped">
|
||||
{buttons.map((button, i) => (
|
||||
<p className="control">
|
||||
<a className={classNames("button", "is-info", button.className)} key={i} onClick={() => this.handleClickButton(button)}>
|
||||
<a
|
||||
className={classNames("button", "is-info", button.className)}
|
||||
key={i}
|
||||
onClick={() => this.handleClickButton(button)}
|
||||
>
|
||||
{button.label}
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -30,6 +30,8 @@ type Props = {
|
||||
label: string;
|
||||
};
|
||||
|
||||
// TODO is it used in the menu? should it use MenuContext for collapse state?
|
||||
|
||||
const ExternalLink: FC<Props> = ({ to, icon, label }) => {
|
||||
let showIcon;
|
||||
if (icon) {
|
||||
|
||||
56
scm-ui/ui-components/src/navigation/MenuContext.tsx
Normal file
56
scm-ui/ui-components/src/navigation/MenuContext.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
/*
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
|
||||
import React, { FC, useContext, useState } from "react";
|
||||
|
||||
export type MenuContext = {
|
||||
isCollapsed: () => boolean;
|
||||
setCollapsed: (collapsed: boolean) => void;
|
||||
};
|
||||
|
||||
export const MenuContext = React.createContext<MenuContext>({
|
||||
isCollapsed() {
|
||||
return false;
|
||||
},
|
||||
setCollapsed() {}
|
||||
});
|
||||
|
||||
export const StateMenuContextProvider: FC = ({ children }) => {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
const context = {
|
||||
isCollapsed() {
|
||||
return collapsed;
|
||||
},
|
||||
setCollapsed
|
||||
};
|
||||
|
||||
return <MenuContext.Provider value={context}>{children}</MenuContext.Provider>;
|
||||
};
|
||||
|
||||
const useMenuContext = () => {
|
||||
return useContext<MenuContext>(MenuContext);
|
||||
};
|
||||
|
||||
export default useMenuContext;
|
||||
@@ -29,6 +29,8 @@ type Props = {
|
||||
action: () => void;
|
||||
};
|
||||
|
||||
// TODO is it used in the menu? should it use MenuContext for collapse state?
|
||||
|
||||
class NavAction extends React.Component<Props> {
|
||||
render() {
|
||||
const { label, icon, action } = this.props;
|
||||
|
||||
@@ -23,32 +23,25 @@
|
||||
*/
|
||||
import * as React from "react";
|
||||
import classNames from "classnames";
|
||||
import { Link, Route } from "react-router-dom";
|
||||
import { Link, useRouteMatch } from "react-router-dom";
|
||||
import { RoutingProps } from "./RoutingProps";
|
||||
import { FC } from "react";
|
||||
import useMenuContext from "./MenuContext";
|
||||
|
||||
// TODO mostly copy of PrimaryNavigationLink
|
||||
|
||||
type Props = {
|
||||
to: string;
|
||||
icon?: string;
|
||||
type Props = RoutingProps & {
|
||||
label: string;
|
||||
activeOnlyWhenExact?: boolean;
|
||||
activeWhenMatch?: (route: any) => boolean;
|
||||
collapsed?: boolean;
|
||||
title?: string;
|
||||
icon?: string;
|
||||
};
|
||||
|
||||
class NavLink extends React.Component<Props> {
|
||||
static defaultProps = {
|
||||
activeOnlyWhenExact: true
|
||||
};
|
||||
const NavLink: FC<Props> = ({ to, activeOnlyWhenExact, icon, label, title }) => {
|
||||
const match = useRouteMatch({
|
||||
path: to,
|
||||
exact: activeOnlyWhenExact
|
||||
});
|
||||
|
||||
isActive(route: any) {
|
||||
const { activeWhenMatch } = this.props;
|
||||
return route.match || (activeWhenMatch && activeWhenMatch(route));
|
||||
}
|
||||
|
||||
renderLink = (route: any) => {
|
||||
const { to, icon, label, collapsed, title } = this.props;
|
||||
const context = useMenuContext();
|
||||
const collapsed = context.isCollapsed();
|
||||
|
||||
let showIcon = null;
|
||||
if (icon) {
|
||||
@@ -61,10 +54,7 @@ class NavLink extends React.Component<Props> {
|
||||
|
||||
return (
|
||||
<li title={collapsed ? title : undefined}>
|
||||
<Link
|
||||
className={classNames(this.isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")}
|
||||
to={to}
|
||||
>
|
||||
<Link className={classNames(!!match ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
|
||||
{showIcon}
|
||||
{collapsed ? null : label}
|
||||
</Link>
|
||||
@@ -72,11 +62,8 @@ class NavLink extends React.Component<Props> {
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { to, activeOnlyWhenExact } = this.props;
|
||||
|
||||
return <Route path={to} exact={activeOnlyWhenExact} children={this.renderLink} />;
|
||||
}
|
||||
}
|
||||
NavLink.defaultProps = {
|
||||
activeOnlyWhenExact: true
|
||||
};
|
||||
|
||||
export default NavLink;
|
||||
|
||||
@@ -27,6 +27,8 @@ type Props = {
|
||||
children?: ReactNode;
|
||||
};
|
||||
|
||||
// TODO it is used?
|
||||
|
||||
class Navigation extends React.Component<Props> {
|
||||
render() {
|
||||
return <aside className="menu">{this.props.children}</aside>;
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
@@ -0,0 +1,89 @@
|
||||
/*
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React, { ReactElement } from "react";
|
||||
import SecondaryNavigation from "./SecondaryNavigation";
|
||||
import SecondaryNavigationItem from "./SecondaryNavigationItem";
|
||||
import styled from "styled-components";
|
||||
import SubNavigation from "./SubNavigation";
|
||||
import { Binder, ExtensionPoint, BinderContext } from "@scm-manager/ui-extensions";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
import { StateMenuContextProvider } from "./MenuContext";
|
||||
|
||||
const Columns = styled.div`
|
||||
margin: 2rem;
|
||||
`;
|
||||
|
||||
const starships = (
|
||||
<SubNavigation to="/hitchhiker/starships" label="Starships">
|
||||
<SecondaryNavigationItem
|
||||
to="/hitchhiker/starships/heart-of-gold"
|
||||
icon="fas fa-star"
|
||||
label="Heart Of Gold"
|
||||
title="Heart Of Gold"
|
||||
/>
|
||||
<SecondaryNavigationItem to="/hitchhiker/starships/titanic" label="Titanic" title="Starship Titanic" />
|
||||
</SubNavigation>
|
||||
);
|
||||
|
||||
const withRoute = (route: string) => {
|
||||
return (story: ReactElement<any>) => <MemoryRouter initialEntries={[route]}>{story}</MemoryRouter>;
|
||||
};
|
||||
|
||||
storiesOf("Navigation|Secondary", module)
|
||||
.addDecorator(story => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
|
||||
.addDecorator(story => (
|
||||
<Columns className="columns">
|
||||
<div className="column is-3">{story()}</div>
|
||||
</Columns>
|
||||
))
|
||||
.add("Default", () =>
|
||||
withRoute("/")(
|
||||
<SecondaryNavigation label="Hitchhiker">
|
||||
<SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
|
||||
<SecondaryNavigationItem to="/heart-of-gold" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
|
||||
</SecondaryNavigation>
|
||||
)
|
||||
)
|
||||
.add("Sub Navigation", () =>
|
||||
withRoute("/")(
|
||||
<SecondaryNavigation label="Hitchhiker">
|
||||
<SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
|
||||
{starships}
|
||||
</SecondaryNavigation>
|
||||
)
|
||||
)
|
||||
.add("Extension Point", () => {
|
||||
const binder = new Binder("menu");
|
||||
binder.bind("subnav.sample", starships);
|
||||
return withRoute("/hitchhiker/starships/titanic")(
|
||||
<BinderContext.Provider value={binder}>
|
||||
<SecondaryNavigation label="Hitchhiker">
|
||||
<SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
|
||||
<ExtensionPoint name="subnav.sample" renderAll={true} />
|
||||
</SecondaryNavigation>
|
||||
</BinderContext.Provider>
|
||||
);
|
||||
});
|
||||
@@ -21,17 +21,13 @@
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
import React, { FC, ReactElement, ReactNode, useContext, useEffect } from "react";
|
||||
|
||||
import React, { FC } from "react";
|
||||
import styled from "styled-components";
|
||||
import SubNavigation from "./SubNavigation";
|
||||
import { matchPath, useLocation } from "react-router-dom";
|
||||
import { isMenuCollapsed, MenuContext } from "./MenuContext";
|
||||
import useMenuContext from "./MenuContext";
|
||||
|
||||
type Props = {
|
||||
label: string;
|
||||
children: ReactElement[];
|
||||
collapsed: boolean;
|
||||
onCollapse?: (newStatus: boolean) => void;
|
||||
};
|
||||
|
||||
type CollapsedProps = {
|
||||
@@ -60,73 +56,37 @@ const MenuLabel = styled.p<CollapsedProps>`
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const SecondaryNavigation: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
|
||||
const location = useLocation();
|
||||
const menuContext = useContext(MenuContext);
|
||||
const SecondaryNavigation: FC<Props> = ({ label, children }) => {
|
||||
const menuContext = useMenuContext();
|
||||
const isCollapsed = menuContext.isCollapsed();
|
||||
|
||||
const subNavActive = isSubNavigationActive(children, location.pathname);
|
||||
const isCollapsed = collapsed && !subNavActive;
|
||||
const toggleCollapseState = () => {
|
||||
menuContext.setCollapsed(!isCollapsed);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isMenuCollapsed()) {
|
||||
menuContext.setMenuCollapsed(!subNavActive);
|
||||
const uncollapseMenu = () => {
|
||||
if (isCollapsed) {
|
||||
menuContext.setCollapsed(false);
|
||||
}
|
||||
}, [subNavActive]);
|
||||
};
|
||||
|
||||
const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
|
||||
React.cloneElement(child, { collapsed: isCollapsed })
|
||||
);
|
||||
const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
|
||||
|
||||
return (
|
||||
<SectionContainer className="menu">
|
||||
<div>
|
||||
<MenuLabel
|
||||
className="menu-label"
|
||||
collapsed={isCollapsed}
|
||||
onClick={onCollapse && !subNavActive ? () => onCollapse(!isCollapsed) : undefined}
|
||||
>
|
||||
{onCollapse && !subNavActive && (
|
||||
<MenuLabel className="menu-label" collapsed={isCollapsed} onClick={toggleCollapseState}>
|
||||
<Icon color="info" className="is-medium" collapsed={isCollapsed}>
|
||||
{arrowIcon}
|
||||
</Icon>
|
||||
)}
|
||||
{isCollapsed ? "" : label}
|
||||
</MenuLabel>
|
||||
<ul className="menu-list">{childrenWithProps}</ul>
|
||||
<ul className="menu-list" onClick={uncollapseMenu}>
|
||||
{children}
|
||||
</ul>
|
||||
</div>
|
||||
</SectionContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const createParentPath = (to: string) => {
|
||||
const parents = to.split("/");
|
||||
parents.splice(-1, 1);
|
||||
return parents.join("/");
|
||||
};
|
||||
|
||||
const isSubNavigationActive = (children: ReactNode, url: string): boolean => {
|
||||
const childArray = React.Children.toArray(children);
|
||||
const match = childArray
|
||||
.filter(child => {
|
||||
// what about extension points?
|
||||
// @ts-ignore
|
||||
return child.type.name === SubNavigation.name;
|
||||
})
|
||||
.map(child => {
|
||||
// @ts-ignore
|
||||
return child.props;
|
||||
})
|
||||
.find(props => {
|
||||
const path = createParentPath(props.to);
|
||||
const matches = matchPath(url, {
|
||||
path,
|
||||
exact: props.activeOnlyWhenExact as boolean
|
||||
});
|
||||
return matches != null;
|
||||
});
|
||||
|
||||
return match != null;
|
||||
};
|
||||
|
||||
export default SecondaryNavigation;
|
||||
|
||||
@@ -21,48 +21,23 @@
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
import React, { ReactElement, ReactNode } from "react";
|
||||
import { MenuContext } from "./MenuContext";
|
||||
import React, { FC } from "react";
|
||||
import SubNavigation from "./SubNavigation";
|
||||
import NavLink from "./NavLink";
|
||||
import { RoutingProps } from "./RoutingProps";
|
||||
|
||||
type Props = {
|
||||
to: string;
|
||||
icon: string;
|
||||
type Props = RoutingProps & {
|
||||
label: string;
|
||||
title: string;
|
||||
activeWhenMatch?: (route: any) => boolean;
|
||||
activeOnlyWhenExact?: boolean;
|
||||
children?: ReactElement[];
|
||||
title?: string;
|
||||
icon?: string;
|
||||
};
|
||||
|
||||
export default class SecondaryNavigationItem extends React.Component<Props> {
|
||||
render() {
|
||||
const { to, icon, label, title, activeWhenMatch, activeOnlyWhenExact, children } = this.props;
|
||||
const SecondaryNavigationItem: FC<Props> = ({ children, ...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>
|
||||
);
|
||||
return <SubNavigation {...props}>{children}</SubNavigation>;
|
||||
} else {
|
||||
return (
|
||||
<MenuContext.Consumer>
|
||||
{({ menuCollapsed }) => <NavLink to={to} icon={icon} label={label} title={title} collapsed={menuCollapsed} />}
|
||||
</MenuContext.Consumer>
|
||||
);
|
||||
}
|
||||
}
|
||||
return <NavLink {...props} />;
|
||||
}
|
||||
};
|
||||
|
||||
export default SecondaryNavigationItem;
|
||||
|
||||
@@ -21,22 +21,19 @@
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
import React, { FC, ReactElement, useContext, useEffect } from "react";
|
||||
import React, { FC, useContext } from "react";
|
||||
import { Link, useRouteMatch } from "react-router-dom";
|
||||
import classNames from "classnames";
|
||||
import useMenuContext, { MenuContext } from "./MenuContext";
|
||||
import { RoutingProps } from "./RoutingProps";
|
||||
|
||||
type Props = {
|
||||
to: string;
|
||||
icon?: string;
|
||||
type Props = RoutingProps & {
|
||||
label: string;
|
||||
activeOnlyWhenExact?: boolean;
|
||||
activeWhenMatch?: (route: any) => boolean;
|
||||
children?: ReactElement[];
|
||||
collapsed?: boolean;
|
||||
title?: string;
|
||||
icon?: string;
|
||||
};
|
||||
|
||||
const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, collapsed, title, label, children }) => {
|
||||
const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, title, label, children }) => {
|
||||
const parents = to.split("/");
|
||||
parents.splice(-1, 1);
|
||||
const parent = parents.join("/");
|
||||
@@ -46,6 +43,9 @@ const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, collapsed, ti
|
||||
exact: activeOnlyWhenExact
|
||||
});
|
||||
|
||||
const context = useMenuContext();
|
||||
const collapsed = context.isCollapsed();
|
||||
|
||||
let defaultIcon = "fas fa-cog";
|
||||
if (icon) {
|
||||
defaultIcon = icon;
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -34,7 +34,6 @@ import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./
|
||||
import TokenizedDiffView from "./TokenizedDiffView";
|
||||
import DiffButton from "./DiffButton";
|
||||
import { MenuContext } from "@scm-manager/ui-components";
|
||||
import { storeMenuCollapsed } from "../navigation";
|
||||
|
||||
const EMPTY_ANNOTATION_FACTORY = {};
|
||||
|
||||
@@ -132,7 +131,6 @@ class DiffFile extends React.Component<Props, State> {
|
||||
}),
|
||||
() => callback()
|
||||
);
|
||||
storeMenuCollapsed(true);
|
||||
};
|
||||
|
||||
setCollapse = (collapsed: boolean) => {
|
||||
@@ -289,11 +287,17 @@ class DiffFile extends React.Component<Props, State> {
|
||||
<ButtonWrapper className={classNames("level-right", "is-flex")}>
|
||||
<ButtonGroup>
|
||||
<MenuContext.Consumer>
|
||||
{({ setMenuCollapsed }) => (
|
||||
{({ setCollapsed }) => (
|
||||
<DiffButton
|
||||
icon={sideBySide ? "align-left" : "columns"}
|
||||
tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
|
||||
onClick={() => this.toggleSideBySide(() => setMenuCollapsed(true))}
|
||||
onClick={() =>
|
||||
this.toggleSideBySide(() => {
|
||||
if (this.state.sideBySide) {
|
||||
setCollapsed(true);
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</MenuContext.Consumer>
|
||||
|
||||
97
scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx
Normal file
97
scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx
Normal file
@@ -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 }) => <Spacing className="box box-link-shadow">{children}</Spacing>;
|
||||
|
||||
const bindAvatar = (binder: Binder, avatar: string) => {
|
||||
binder.bind("repos.repository-avatar", () => {
|
||||
return <Image src={avatar} alt="Logo" />;
|
||||
});
|
||||
};
|
||||
|
||||
const bindBeforeTitle = (binder: Binder, extension: ReactNode) => {
|
||||
binder.bind("repository.card.beforeTitle", () => {
|
||||
return extension;
|
||||
});
|
||||
};
|
||||
|
||||
const bindQuickLink = (binder: Binder, extension: ReactNode) => {
|
||||
binder.bind("repository.card.quickLink", () => {
|
||||
return extension;
|
||||
});
|
||||
};
|
||||
|
||||
const withBinder = (binder: Binder, repository: Repository) => {
|
||||
return (
|
||||
<BinderContext.Provider value={binder}>
|
||||
<RepositoryEntry repository={repository} baseDate={baseDate} />
|
||||
</BinderContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const QuickLink = (
|
||||
<a className="level-item">
|
||||
<Icon className="fa-lg" name="fas fa-code-branch fa-rotate-180 fa-fw" color="inherit" />
|
||||
</a>
|
||||
);
|
||||
|
||||
storiesOf("RepositoryEntry", module)
|
||||
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
|
||||
.addDecorator(storyFn => <Container>{storyFn()}</Container>)
|
||||
.add("Default", () => {
|
||||
return <RepositoryEntry repository={repository} baseDate={baseDate} />;
|
||||
})
|
||||
.add("Avatar EP", () => {
|
||||
const binder = new Binder("avatar");
|
||||
bindAvatar(binder, Git);
|
||||
return withBinder(binder, repository);
|
||||
})
|
||||
.add("Before Title EP", () => {
|
||||
const binder = new Binder("title");
|
||||
bindBeforeTitle(binder, <i className="fas fa-star" />);
|
||||
return withBinder(binder, repository);
|
||||
})
|
||||
.add("Quick Link EP", () => {
|
||||
const binder = new Binder("title");
|
||||
bindQuickLink(binder, QuickLink);
|
||||
return withBinder(binder, repository);
|
||||
});
|
||||
@@ -28,8 +28,13 @@ import RepositoryEntryLink from "./RepositoryEntryLink";
|
||||
import RepositoryAvatar from "./RepositoryAvatar";
|
||||
import { ExtensionPoint } from "@scm-manager/ui-extensions";
|
||||
|
||||
type DateProp = Date | string;
|
||||
|
||||
type Props = {
|
||||
repository: Repository;
|
||||
// @VisibleForTesting
|
||||
// the baseDate is only to avoid failing snapshot tests
|
||||
baseDate?: DateProp;
|
||||
};
|
||||
|
||||
class RepositoryEntry extends React.Component<Props> {
|
||||
@@ -77,23 +82,33 @@ class RepositoryEntry extends React.Component<Props> {
|
||||
);
|
||||
};
|
||||
|
||||
createFooterRight = (repository: Repository) => {
|
||||
createFooterRight = (repository: Repository, baseDate?: DateProp) => {
|
||||
return (
|
||||
<small className="level-item">
|
||||
<DateFromNow date={repository.creationDate} />
|
||||
<DateFromNow baseDate={baseDate} date={repository.creationDate} />
|
||||
</small>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
createTitle = () => {
|
||||
const { repository } = this.props;
|
||||
return (
|
||||
<>
|
||||
<ExtensionPoint name="repository.card.beforeTitle" props={{ repository }} /> <strong>{repository.name}</strong>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { repository, baseDate } = this.props;
|
||||
const repositoryLink = this.createLink(repository);
|
||||
const footerLeft = this.createFooterLeft(repository, repositoryLink);
|
||||
const footerRight = this.createFooterRight(repository);
|
||||
const footerRight = this.createFooterRight(repository, baseDate);
|
||||
const title = this.createTitle();
|
||||
return (
|
||||
<CardColumn
|
||||
avatar={<RepositoryAvatar repository={repository} />}
|
||||
title={repository.name}
|
||||
title={title}
|
||||
description={repository.description}
|
||||
link={repositoryLink}
|
||||
footerLeft={footerLeft}
|
||||
@@ -46,6 +46,9 @@ export { default as DiffFile } from "./DiffFile";
|
||||
export { default as DiffButton } from "./DiffButton";
|
||||
export { default as LoadingDiff } from "./LoadingDiff";
|
||||
export { DefaultCollapsed, DefaultCollapsedFunction } from "./defaultCollapsed";
|
||||
export { default as RepositoryAvatar } from "./RepositoryAvatar";
|
||||
export { default as RepositoryEntry } from "./RepositoryEntry";
|
||||
export { default as RepositoryEntryLink } from "./RepositoryEntryLink";
|
||||
|
||||
export {
|
||||
File,
|
||||
|
||||
@@ -168,4 +168,46 @@ describe("ExtensionPoint test", () => {
|
||||
const text = rendered.text();
|
||||
expect(text).toBe("");
|
||||
});
|
||||
|
||||
it("should render an instance", () => {
|
||||
const Label = () => {
|
||||
return <label>Extension One</label>;
|
||||
};
|
||||
|
||||
mockedBinder.hasExtension.mockReturnValue(true);
|
||||
mockedBinder.getExtension.mockReturnValue(<Label />);
|
||||
|
||||
const rendered = mount(<ExtensionPoint name="something.special" />);
|
||||
expect(rendered.text()).toBe("Extension One");
|
||||
});
|
||||
|
||||
it("should render an instance with props", () => {
|
||||
const Label = ({ name }: { name: string }) => {
|
||||
return <label>Extension {name}</label>;
|
||||
};
|
||||
|
||||
mockedBinder.hasExtension.mockReturnValue(true);
|
||||
mockedBinder.getExtension.mockReturnValue(<Label name="One" />);
|
||||
|
||||
const rendered = mount(<ExtensionPoint name="something.special" props={{ name: "Two" }} />);
|
||||
expect(rendered.text()).toBe("Extension Two");
|
||||
});
|
||||
|
||||
it("should transform extension, before render", () => {
|
||||
const label = ({ name = "One" }: { name: string }) => {
|
||||
return <label>Extension {name}</label>;
|
||||
};
|
||||
mockedBinder.hasExtension.mockReturnValue(true);
|
||||
mockedBinder.getExtension.mockReturnValue(label);
|
||||
|
||||
const transformer = (props: object) => {
|
||||
return {
|
||||
...props,
|
||||
name: "Two"
|
||||
};
|
||||
};
|
||||
|
||||
const rendered = mount(<ExtensionPoint name="something.special" propTransformer={transformer} />);
|
||||
expect(rendered.text()).toBe("Extension Two");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -23,32 +23,40 @@
|
||||
*/
|
||||
import * as React from "react";
|
||||
import { Binder } from "./binder";
|
||||
import { FC, ReactNode } from "react";
|
||||
import { Component, FC, ReactNode } from "react";
|
||||
import useBinder from "./useBinder";
|
||||
|
||||
type PropTransformer = (props: object) => object;
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
renderAll?: boolean;
|
||||
props?: object;
|
||||
propTransformer?: PropTransformer;
|
||||
};
|
||||
|
||||
const renderAllExtensions = (binder: Binder, name: string, props?: object) => {
|
||||
const createInstance = (Component: any, props: object, key?: number) => {
|
||||
const instanceProps = {
|
||||
...props,
|
||||
key
|
||||
};
|
||||
if (React.isValidElement(Component)) {
|
||||
return React.cloneElement(Component, instanceProps);
|
||||
}
|
||||
return <Component {...instanceProps} />;
|
||||
};
|
||||
|
||||
const renderAllExtensions = (binder: Binder, name: string, props: object) => {
|
||||
const extensions = binder.getExtensions(name, props);
|
||||
return (
|
||||
<>
|
||||
{extensions.map((Component, index) => {
|
||||
return <Component key={index} {...props} />;
|
||||
})}
|
||||
</>
|
||||
);
|
||||
return <>{extensions.map((cmp, index) => createInstance(cmp, props, index))}</>;
|
||||
};
|
||||
|
||||
const renderSingleExtension = (binder: Binder, name: string, props?: object) => {
|
||||
const Component = binder.getExtension(name, props);
|
||||
if (!Component) {
|
||||
const renderSingleExtension = (binder: Binder, name: string, props: object) => {
|
||||
const cmp = binder.getExtension(name, props);
|
||||
if (!cmp) {
|
||||
return null;
|
||||
}
|
||||
return <Component {...props} />;
|
||||
return createInstance(cmp, props, undefined);
|
||||
};
|
||||
|
||||
const renderDefault = (children: ReactNode) => {
|
||||
@@ -58,17 +66,29 @@ const renderDefault = (children: ReactNode) => {
|
||||
return null;
|
||||
};
|
||||
|
||||
const createRenderProps = (propTransformer?: PropTransformer, props?: object) => {
|
||||
const transform = (props: object) => {
|
||||
if (!propTransformer) {
|
||||
return props;
|
||||
}
|
||||
return propTransformer(props);
|
||||
};
|
||||
|
||||
return transform(props || {});
|
||||
};
|
||||
|
||||
/**
|
||||
* ExtensionPoint renders components which are bound to an extension point.
|
||||
*/
|
||||
const ExtensionPoint: FC<Props> = ({ name, renderAll, props, children }) => {
|
||||
const ExtensionPoint: FC<Props> = ({ name, propTransformer, props, renderAll, children }) => {
|
||||
const binder = useBinder();
|
||||
if (!binder.hasExtension(name, props)) {
|
||||
const renderProps = createRenderProps(propTransformer, props);
|
||||
if (!binder.hasExtension(name, renderProps)) {
|
||||
return renderDefault(children);
|
||||
} else if (renderAll) {
|
||||
return renderAllExtensions(binder, name, props);
|
||||
return renderAllExtensions(binder, name, renderProps);
|
||||
}
|
||||
return renderSingleExtension(binder, name, props);
|
||||
return renderSingleExtension(binder, name, renderProps);
|
||||
};
|
||||
|
||||
export default ExtensionPoint;
|
||||
|
||||
@@ -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");
|
||||
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -35,10 +35,7 @@ import {
|
||||
PrimaryContentColumn,
|
||||
SecondaryNavigationColumn,
|
||||
SecondaryNavigation,
|
||||
SubNavigation,
|
||||
isMenuCollapsed,
|
||||
MenuContext,
|
||||
storeMenuCollapsed
|
||||
SubNavigation
|
||||
} from "@scm-manager/ui-components";
|
||||
import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
|
||||
import AdminDetails from "./AdminDetails";
|
||||
@@ -47,6 +44,7 @@ import GlobalConfig from "./GlobalConfig";
|
||||
import RepositoryRoles from "../roles/containers/RepositoryRoles";
|
||||
import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
|
||||
import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
|
||||
import { StateMenuContextProvider } from "@scm-manager/ui-components/src/navigation/MenuContext";
|
||||
|
||||
type Props = RouteComponentProps &
|
||||
WithTranslation & {
|
||||
@@ -55,23 +53,7 @@ type Props = RouteComponentProps &
|
||||
installedPluginsLink: string;
|
||||
};
|
||||
|
||||
type State = {
|
||||
menuCollapsed: boolean;
|
||||
};
|
||||
|
||||
class Admin extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
menuCollapsed: isMenuCollapsed()
|
||||
};
|
||||
}
|
||||
|
||||
onCollapseAdminMenu = (collapsed: boolean) => {
|
||||
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
|
||||
};
|
||||
|
||||
class Admin extends React.Component<Props> {
|
||||
stripEndingSlash = (url: string) => {
|
||||
if (url.endsWith("/")) {
|
||||
if (url.includes("role")) {
|
||||
@@ -94,7 +76,6 @@ class Admin extends React.Component<Props, State> {
|
||||
|
||||
render() {
|
||||
const { links, availablePluginsLink, installedPluginsLink, t } = this.props;
|
||||
const { menuCollapsed } = this.state;
|
||||
|
||||
const url = this.matchedUrl();
|
||||
const extensionProps = {
|
||||
@@ -103,12 +84,10 @@ class Admin extends React.Component<Props, State> {
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuContext.Provider
|
||||
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
|
||||
>
|
||||
<StateMenuContextProvider>
|
||||
<Page>
|
||||
<CustomQueryFlexWrappedColumns>
|
||||
<PrimaryContentColumn collapsed={menuCollapsed}>
|
||||
<PrimaryContentColumn>
|
||||
<Switch>
|
||||
<Redirect exact from={url} to={`${url}/info`} />
|
||||
<Route path={`${url}/info`} exact component={AdminDetails} />
|
||||
@@ -147,12 +126,8 @@ class Admin extends React.Component<Props, State> {
|
||||
<ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
|
||||
</Switch>
|
||||
</PrimaryContentColumn>
|
||||
<SecondaryNavigationColumn collapsed={menuCollapsed}>
|
||||
<SecondaryNavigation
|
||||
label={t("admin.menu.navigationLabel")}
|
||||
onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
|
||||
collapsed={menuCollapsed}
|
||||
>
|
||||
<SecondaryNavigationColumn>
|
||||
<SecondaryNavigation label={t("admin.menu.navigationLabel")}>
|
||||
<NavLink
|
||||
to={`${url}/info`}
|
||||
icon="fas fa-info-circle"
|
||||
@@ -195,7 +170,7 @@ class Admin extends React.Component<Props, State> {
|
||||
</SecondaryNavigationColumn>
|
||||
</CustomQueryFlexWrappedColumns>
|
||||
</Page>
|
||||
</MenuContext.Provider>
|
||||
</StateMenuContextProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -181,7 +181,7 @@ class PluginEntry extends React.Component<Props, State> {
|
||||
<CardColumn
|
||||
action={this.isInstallable() ? () => this.toggleModal("showInstallModal") : null}
|
||||
avatar={avatar}
|
||||
title={plugin.displayName ? plugin.displayName : plugin.name}
|
||||
title={plugin.displayName ? <strong>{plugin.displayName}</strong> : <strong>{plugin.name}</strong>}
|
||||
description={plugin.description}
|
||||
contentRight={plugin.pending || plugin.markedForUninstall ? this.createPendingSpinner() : actionbar}
|
||||
footerRight={footerRight}
|
||||
|
||||
@@ -278,9 +278,7 @@ class PluginModal extends React.Component<Props, State> {
|
||||
</div>
|
||||
</div>
|
||||
<div className="media">
|
||||
<div className="media-content">
|
||||
{this.createRestartSectionContent()}
|
||||
</div>
|
||||
<div className="media-content">{this.createRestartSectionContent()}</div>
|
||||
</div>
|
||||
{this.renderNotifications()}
|
||||
</>
|
||||
|
||||
@@ -27,7 +27,6 @@ import { PendingPlugins } from "@scm-manager/ui-types";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import PendingPluginsQueue from "./PendingPluginsQueue";
|
||||
|
||||
|
||||
type ModalBodyProps = {
|
||||
pendingPlugins: PendingPlugins;
|
||||
};
|
||||
|
||||
@@ -30,20 +30,18 @@ import { WithTranslation, withTranslation } from "react-i18next";
|
||||
import { Me } from "@scm-manager/ui-types";
|
||||
import {
|
||||
ErrorPage,
|
||||
isMenuCollapsed,
|
||||
MenuContext,
|
||||
NavLink,
|
||||
Page,
|
||||
CustomQueryFlexWrappedColumns,
|
||||
PrimaryContentColumn,
|
||||
SecondaryNavigationColumn,
|
||||
SecondaryNavigation,
|
||||
SubNavigation
|
||||
SubNavigation,
|
||||
StateMenuContextProvider
|
||||
} from "@scm-manager/ui-components";
|
||||
import ChangeUserPassword from "./ChangeUserPassword";
|
||||
import ProfileInfo from "./ProfileInfo";
|
||||
import { ExtensionPoint } from "@scm-manager/ui-extensions";
|
||||
import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
|
||||
|
||||
type Props = RouteComponentProps &
|
||||
WithTranslation & {
|
||||
@@ -53,23 +51,7 @@ type Props = RouteComponentProps &
|
||||
match: any;
|
||||
};
|
||||
|
||||
type State = {
|
||||
menuCollapsed: boolean;
|
||||
};
|
||||
|
||||
class Profile extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
menuCollapsed: isMenuCollapsed()
|
||||
};
|
||||
}
|
||||
|
||||
onCollapseProfileMenu = (collapsed: boolean) => {
|
||||
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
|
||||
};
|
||||
|
||||
class Profile extends React.Component<Props> {
|
||||
stripEndingSlash = (url: string) => {
|
||||
if (url.endsWith("/")) {
|
||||
return url.substring(0, url.length - 2);
|
||||
@@ -85,7 +67,6 @@ class Profile extends React.Component<Props, State> {
|
||||
const url = this.matchedUrl();
|
||||
|
||||
const { me, t } = this.props;
|
||||
const { menuCollapsed } = this.state;
|
||||
|
||||
if (!me) {
|
||||
return (
|
||||
@@ -106,22 +87,16 @@ class Profile extends React.Component<Props, State> {
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuContext.Provider
|
||||
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
|
||||
>
|
||||
<StateMenuContextProvider>
|
||||
<Page title={me.displayName}>
|
||||
<CustomQueryFlexWrappedColumns>
|
||||
<PrimaryContentColumn collapsed={menuCollapsed}>
|
||||
<PrimaryContentColumn>
|
||||
<Route path={url} exact render={() => <ProfileInfo me={me} />} />
|
||||
<Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
|
||||
<ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
|
||||
</PrimaryContentColumn>
|
||||
<SecondaryNavigationColumn collapsed={menuCollapsed}>
|
||||
<SecondaryNavigation
|
||||
label={t("profile.navigationLabel")}
|
||||
onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
|
||||
collapsed={menuCollapsed}
|
||||
>
|
||||
<SecondaryNavigationColumn>
|
||||
<SecondaryNavigation label={t("profile.navigationLabel")}>
|
||||
<NavLink
|
||||
to={`${url}`}
|
||||
icon="fas fa-info-circle"
|
||||
@@ -140,7 +115,7 @@ class Profile extends React.Component<Props, State> {
|
||||
</SecondaryNavigationColumn>
|
||||
</CustomQueryFlexWrappedColumns>
|
||||
</Page>
|
||||
</MenuContext.Provider>
|
||||
</StateMenuContextProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,16 +29,15 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
|
||||
import { Group } from "@scm-manager/ui-types";
|
||||
import {
|
||||
ErrorPage,
|
||||
isMenuCollapsed,
|
||||
Loading,
|
||||
MenuContext,
|
||||
NavLink,
|
||||
Page,
|
||||
CustomQueryFlexWrappedColumns,
|
||||
PrimaryContentColumn,
|
||||
SecondaryNavigationColumn,
|
||||
SecondaryNavigation,
|
||||
SubNavigation
|
||||
SubNavigation,
|
||||
StateMenuContextProvider
|
||||
} from "@scm-manager/ui-components";
|
||||
import { getGroupsLink } from "../../modules/indexResource";
|
||||
import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups";
|
||||
@@ -46,7 +45,6 @@ import { Details } from "./../components/table";
|
||||
import { EditGroupNavLink, SetPermissionsNavLink } from "./../components/navLinks";
|
||||
import EditGroup from "./EditGroup";
|
||||
import SetPermissions from "../../permissions/components/SetPermissions";
|
||||
import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
|
||||
|
||||
type Props = RouteComponentProps &
|
||||
WithTranslation & {
|
||||
@@ -60,27 +58,11 @@ type Props = RouteComponentProps &
|
||||
fetchGroupByName: (p1: string, p2: string) => void;
|
||||
};
|
||||
|
||||
type State = {
|
||||
menuCollapsed: boolean;
|
||||
};
|
||||
|
||||
class SingleGroup extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
menuCollapsed: isMenuCollapsed()
|
||||
};
|
||||
}
|
||||
|
||||
class SingleGroup extends React.Component<Props> {
|
||||
componentDidMount() {
|
||||
this.props.fetchGroupByName(this.props.groupLink, this.props.name);
|
||||
}
|
||||
|
||||
onCollapseGroupMenu = (collapsed: boolean) => {
|
||||
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
|
||||
};
|
||||
|
||||
stripEndingSlash = (url: string) => {
|
||||
if (url.endsWith("/")) {
|
||||
return url.substring(0, url.length - 2);
|
||||
@@ -94,7 +76,6 @@ class SingleGroup extends React.Component<Props, State> {
|
||||
|
||||
render() {
|
||||
const { t, loading, error, group } = this.props;
|
||||
const { menuCollapsed } = this.state;
|
||||
|
||||
if (error) {
|
||||
return <ErrorPage title={t("singleGroup.errorTitle")} subtitle={t("singleGroup.errorSubtitle")} error={error} />;
|
||||
@@ -112,12 +93,10 @@ class SingleGroup extends React.Component<Props, State> {
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuContext.Provider
|
||||
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
|
||||
>
|
||||
<StateMenuContextProvider>
|
||||
<Page title={group.name}>
|
||||
<CustomQueryFlexWrappedColumns>
|
||||
<PrimaryContentColumn collapsed={menuCollapsed}>
|
||||
<PrimaryContentColumn>
|
||||
<Route path={url} exact component={() => <Details group={group} />} />
|
||||
<Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
|
||||
<Route
|
||||
@@ -127,12 +106,8 @@ class SingleGroup extends React.Component<Props, State> {
|
||||
/>
|
||||
<ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
|
||||
</PrimaryContentColumn>
|
||||
<SecondaryNavigationColumn collapsed={menuCollapsed}>
|
||||
<SecondaryNavigation
|
||||
label={t("singleGroup.menu.navigationLabel")}
|
||||
onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
|
||||
collapsed={menuCollapsed}
|
||||
>
|
||||
<SecondaryNavigationColumn>
|
||||
<SecondaryNavigation label={t("singleGroup.menu.navigationLabel")}>
|
||||
<NavLink
|
||||
to={`${url}`}
|
||||
icon="fas fa-info-circle"
|
||||
@@ -153,7 +128,7 @@ class SingleGroup extends React.Component<Props, State> {
|
||||
</SecondaryNavigationColumn>
|
||||
</CustomQueryFlexWrappedColumns>
|
||||
</Page>
|
||||
</MenuContext.Provider>
|
||||
</StateMenuContextProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -37,9 +37,7 @@ import {
|
||||
SecondaryNavigationColumn,
|
||||
SecondaryNavigation,
|
||||
SubNavigation,
|
||||
MenuContext,
|
||||
storeMenuCollapsed,
|
||||
isMenuCollapsed
|
||||
StateMenuContextProvider
|
||||
} from "@scm-manager/ui-components";
|
||||
import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
|
||||
import RepositoryDetails from "../components/RepositoryDetails";
|
||||
@@ -70,19 +68,7 @@ type Props = RouteComponentProps &
|
||||
fetchRepoByName: (link: string, namespace: string, name: string) => void;
|
||||
};
|
||||
|
||||
type State = {
|
||||
menuCollapsed: boolean;
|
||||
};
|
||||
|
||||
class RepositoryRoot extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
menuCollapsed: isMenuCollapsed()
|
||||
};
|
||||
}
|
||||
|
||||
class RepositoryRoot extends React.Component<Props> {
|
||||
componentDidMount() {
|
||||
const { fetchRepoByName, namespace, name, repoLink } = this.props;
|
||||
fetchRepoByName(repoLink, namespace, name);
|
||||
@@ -131,13 +117,8 @@ class RepositoryRoot extends React.Component<Props, State> {
|
||||
return `${url}/changesets`;
|
||||
};
|
||||
|
||||
onCollapseRepositoryMenu = (collapsed: boolean) => {
|
||||
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading, error, indexLinks, repository, t } = this.props;
|
||||
const { menuCollapsed } = this.state;
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
@@ -166,15 +147,13 @@ class RepositoryRoot extends React.Component<Props, State> {
|
||||
}
|
||||
|
||||
return (
|
||||
<MenuContext.Provider
|
||||
value={{
|
||||
menuCollapsed,
|
||||
setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
|
||||
}}
|
||||
<StateMenuContextProvider>
|
||||
<Page
|
||||
title={repository.namespace + "/" + repository.name}
|
||||
afterTitle={<ExtensionPoint name={"repository.afterTitle"} props={{ repository }} />}
|
||||
>
|
||||
<Page title={repository.namespace + "/" + repository.name}>
|
||||
<CustomQueryFlexWrappedColumns>
|
||||
<PrimaryContentColumn collapsed={menuCollapsed}>
|
||||
<PrimaryContentColumn>
|
||||
<Switch>
|
||||
<Redirect exact from={this.props.match.url} to={redirectedUrl} />
|
||||
|
||||
@@ -224,12 +203,8 @@ class RepositoryRoot extends React.Component<Props, State> {
|
||||
<ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
|
||||
</Switch>
|
||||
</PrimaryContentColumn>
|
||||
<SecondaryNavigationColumn collapsed={menuCollapsed}>
|
||||
<SecondaryNavigation
|
||||
label={t("repositoryRoot.menu.navigationLabel")}
|
||||
onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
|
||||
collapsed={menuCollapsed}
|
||||
>
|
||||
<SecondaryNavigationColumn>
|
||||
<SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
|
||||
<ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
|
||||
<NavLink
|
||||
to={`${url}/info`}
|
||||
@@ -271,7 +246,7 @@ class RepositoryRoot extends React.Component<Props, State> {
|
||||
</SecondaryNavigationColumn>
|
||||
</CustomQueryFlexWrappedColumns>
|
||||
</Page>
|
||||
</MenuContext.Provider>
|
||||
</StateMenuContextProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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]: {
|
||||
|
||||
@@ -28,9 +28,7 @@ import { ExtensionPoint } from "@scm-manager/ui-extensions";
|
||||
import { User } from "@scm-manager/ui-types";
|
||||
import {
|
||||
ErrorPage,
|
||||
isMenuCollapsed,
|
||||
Loading,
|
||||
MenuContext,
|
||||
NavLink,
|
||||
Page,
|
||||
CustomQueryFlexWrappedColumns,
|
||||
@@ -38,7 +36,7 @@ import {
|
||||
SecondaryNavigationColumn,
|
||||
SecondaryNavigation,
|
||||
SubNavigation,
|
||||
storeMenuCollapsed
|
||||
StateMenuContextProvider
|
||||
} from "@scm-manager/ui-components";
|
||||
import { Details } from "./../components/table";
|
||||
import EditUser from "./EditUser";
|
||||
@@ -61,19 +59,7 @@ type Props = RouteComponentProps &
|
||||
fetchUserByName: (p1: string, p2: string) => void;
|
||||
};
|
||||
|
||||
type State = {
|
||||
menuCollapsed: boolean;
|
||||
};
|
||||
|
||||
class SingleUser extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
menuCollapsed: isMenuCollapsed()
|
||||
};
|
||||
}
|
||||
|
||||
class SingleUser extends React.Component<Props> {
|
||||
componentDidMount() {
|
||||
this.props.fetchUserByName(this.props.usersLink, this.props.name);
|
||||
}
|
||||
@@ -85,17 +71,12 @@ class SingleUser extends React.Component<Props, State> {
|
||||
return url;
|
||||
};
|
||||
|
||||
onCollapseUserMenu = (collapsed: boolean) => {
|
||||
this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
|
||||
};
|
||||
|
||||
matchedUrl = () => {
|
||||
return this.stripEndingSlash(this.props.match.url);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t, loading, error, user } = this.props;
|
||||
const { menuCollapsed } = this.state;
|
||||
|
||||
if (error) {
|
||||
return <ErrorPage title={t("singleUser.errorTitle")} subtitle={t("singleUser.errorSubtitle")} error={error} />;
|
||||
@@ -113,12 +94,10 @@ class SingleUser extends React.Component<Props, State> {
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuContext.Provider
|
||||
value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
|
||||
>
|
||||
<StateMenuContextProvider>
|
||||
<Page title={user.displayName}>
|
||||
<CustomQueryFlexWrappedColumns>
|
||||
<PrimaryContentColumn collapsed={menuCollapsed}>
|
||||
<PrimaryContentColumn>
|
||||
<Route path={url} exact component={() => <Details user={user} />} />
|
||||
<Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} />
|
||||
<Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} />
|
||||
@@ -128,12 +107,8 @@ class SingleUser extends React.Component<Props, State> {
|
||||
/>
|
||||
<ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
|
||||
</PrimaryContentColumn>
|
||||
<SecondaryNavigationColumn collapsed={menuCollapsed}>
|
||||
<SecondaryNavigation
|
||||
label={t("singleUser.menu.navigationLabel")}
|
||||
onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
|
||||
collapsed={menuCollapsed}
|
||||
>
|
||||
<SecondaryNavigationColumn>
|
||||
<SecondaryNavigation label={t("singleUser.menu.navigationLabel")}>
|
||||
<NavLink
|
||||
to={`${url}`}
|
||||
icon="fas fa-info-circle"
|
||||
@@ -154,7 +129,7 @@ class SingleUser extends React.Component<Props, State> {
|
||||
</SecondaryNavigationColumn>
|
||||
</CustomQueryFlexWrappedColumns>
|
||||
</Page>
|
||||
</MenuContext.Provider>
|
||||
</StateMenuContextProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -204,7 +204,7 @@
|
||||
<dependency>
|
||||
<groupId>javax.xml.bind</groupId>
|
||||
<artifactId>jaxb-api</artifactId>
|
||||
<version>2.3.0</version>
|
||||
<version>2.3.1</version>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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<Repository, RepositoryDto> {
|
||||
public abstract class RepositoryToRepositoryDtoMapper extends BaseMapper<Repository, RepositoryDto> implements RepositoryToHalMapper {
|
||||
|
||||
@Inject
|
||||
private ResourceLinks resourceLinks;
|
||||
@@ -58,6 +59,9 @@ public abstract class RepositoryToRepositoryDtoMapper extends BaseMapper<Reposit
|
||||
|
||||
abstract HealthCheckFailureDto toDto(HealthCheckFailure failure);
|
||||
|
||||
@Override
|
||||
public abstract RepositoryDto map(Repository modelObject);
|
||||
|
||||
@ObjectFactory
|
||||
RepositoryDto createDto(Repository repository) {
|
||||
Links.Builder linksBuilder = linkingTo().self(resourceLinks.repository().self(repository.getNamespace(), repository.getName()));
|
||||
|
||||
18
yarn.lock
18
yarn.lock
@@ -10020,6 +10020,16 @@ mini-css-extract-plugin@^0.8.0:
|
||||
schema-utils "^1.0.0"
|
||||
webpack-sources "^1.1.0"
|
||||
|
||||
mini-css-extract-plugin@^0.9.0:
|
||||
version "0.9.0"
|
||||
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz#47f2cf07aa165ab35733b1fc97d4c46c0564339e"
|
||||
integrity sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==
|
||||
dependencies:
|
||||
loader-utils "^1.1.0"
|
||||
normalize-url "1.9.1"
|
||||
schema-utils "^1.0.0"
|
||||
webpack-sources "^1.1.0"
|
||||
|
||||
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
|
||||
@@ -12247,10 +12257,10 @@ react-redux@^5.0.7:
|
||||
react-is "^16.6.0"
|
||||
react-lifecycles-compat "^3.0.0"
|
||||
|
||||
react-refresh@^0.7.2:
|
||||
version "0.7.2"
|
||||
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.7.2.tgz#f30978d21eb8cac6e2f2fde056a7d04f6844dd50"
|
||||
integrity sha512-u5l7fhAJXecWUJzVxzMRU2Zvw8m4QmDNHlTrT5uo3KBlYBhmChd7syAakBoay1yIiVhx/8Fi7a6v6kQZfsw81Q==
|
||||
react-refresh@^0.8.0:
|
||||
version "0.8.1"
|
||||
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.1.tgz#5500506ad6fc891fdd057d0bf3581f9310abc6a2"
|
||||
integrity sha512-xZIKi49RtLUUSAZ4a4ut2xr+zr4+glOD5v0L413B55MPvlg4EQ6Ctx8PD4CmjlPGoAWmSCTmmkY59TErizNsow==
|
||||
|
||||
react-router-dom@^5.1.2:
|
||||
version "5.1.2"
|
||||
|
||||
Reference in New Issue
Block a user