Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-01-08 00:22:11 +01:00
Code Issues Packages Projects Releases Activity

Render images from repository correctly

Browse Source 
This adds a markdown renderer for images, so that images
that are referenced by their repository path are resolved
correctly. In this case, the content rest endpoint is
rendered as source url. For this, two new contexts
(RepositoryContext and RepositoryRevisionContext)
have been added, that make the repository and the
current revision available, so that the content url can
be resolved properly. These new contexts may be used
by plugins like the scm-readme-plugin.

Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

Reviewed-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>
This commit is contained in:
Rene Pfeuffer
2022-12-19 10:12:01 +01:00
committed by SCM-Manager
parent 6ba792e5bc
commit f2f2f29791
22 changed files with 604 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/changelog/render_images_in_md.yaml Normal file
View File

@@ -0,0 +1,2 @@
- type: added
description: Markdown component to render images from repository correctly

3
scm-plugins/scm-git-plugin/src/main/java/sonia/scm/repository/spi/GitCatCommand.java
View File

@@ -91,6 +91,9 @@ public class GitCatCommand extends AbstractGitCommand implements CatCommand {
private Loader getLoader(CatCommandRequest request) throws IOException {
org.eclipse.jgit.lib.Repository repo = open();
ObjectId revId = getCommitOrDefault(repo, request.getRevision());
if (revId == null) {
throw notFound(entity("Revision", request.getRevision()).in(repository));
}
logger.info("loading content for file {} for revision {} in repository {}", request.getPath(), revId, repository);
return getLoader(repo, revId, request.getPath());
}

34
scm-ui/ui-api/src/RepositoryContext.tsx Normal file
View File

@@ -0,0 +1,34 @@
/*
* 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, { createContext, FC, useContext } from "react";
import { Repository } from "@scm-manager/ui-types";
const Context = createContext<Repository | undefined>(undefined);
export const useRepositoryContext = () => useContext(Context);
export const RepositoryContextProvider: FC<{ repository: Repository }> = ({ repository, children }) => (
<Context.Provider value={repository}>{children}</Context.Provider>
);

33
scm-ui/ui-api/src/RepositoryRevisionContext.tsx Normal file
View File

@@ -0,0 +1,33 @@
/*
* 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, { createContext, FC, useContext } from "react";
const Context = createContext<string | undefined>(undefined);
export const useRepositoryRevisionContext = () => useContext(Context);
export const RepositoryRevisionContextProvider: FC<{ revision?: string }> = ({ revision, children }) => (
<Context.Provider value={revision}>{children}</Context.Provider>
);

2
scm-ui/ui-api/src/index.ts
View File

@@ -71,3 +71,5 @@ export * from "./ApiProvider";
export * from "./LegacyContext";
export * from "./NamespaceAndNameContext";
export * from "./RepositoryContext";
export * from "./RepositoryRevisionContext";

46
scm-ui/ui-components/src/__resources__/markdown-images.md.ts Normal file
View File

@@ -0,0 +1,46 @@
/*
* 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 `# Images
Show case for different possibilities to render image src links.
Please note that some of the images do not work in storybook,
the story is mostly for checking if the src links are rendered correct.
## External
External images should be rendered with the unaltered link:
![external image](https://github.com/scm-manager/scm-manager/blob/develop/docs/en/logo/scm-manager_logo.png)
## Images from repository
Images from the repository should be resolved to an api url:
![relative path](some_image.jpg)
![path starting with a '.'](./some_image.jpg)
![absolute image path](/path/with/some_image.jpg)
`;

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

@@ -14437,6 +14437,87 @@ and this project adheres to
</div>
`;
exports[`Storyshots MarkdownView Images 1`] = `
<div
className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"
>
<div
className="LazyMarkdownView__HorizontalScrollDiv-sc-w02jj8-0 iAcXxX content"
>
<div>
<h1
id="images"
>
Images
</h1>
<p>
Show case for different possibilities to render image src links.
Please note that some of the images do not work in storybook,
the story is mostly for checking if the src links are rendered correct.
</p>
<h2
id="external"
>
External
</h2>
<p>
External images should be rendered with the unaltered link:
</p>
<p>
<img
alt="external image"
src="https://github.com/scm-manager/scm-manager/blob/develop/docs/en/logo/scm-manager_logo.png"
/>
</p>
<h2
id="images-from-repository"
>
Images from repository
</h2>
<p>
Images from the repository should be resolved to an api url:
</p>
<p>
<img
alt="relative path"
src="https://my.scm/scm/api/v2/some/repository/content/42/some_image.jpg"
/>
</p>
<p>
<img
alt="path starting with a '.'"
src="https://my.scm/scm/api/v2/some/repository/content/42/./some_image.jpg"
/>
</p>
<p>
<img
alt="absolute image path"
src="https://my.scm/scm/api/v2/some/repository/content/42/path/with/some_image.jpg"
/>
</p>
</div>
</div>
</div>
`;
exports[`Storyshots MarkdownView Inline Xml 1`] = `
<div
className="MarkdownViewstories__Spacing-sc-1lofakk-0 isVeYs"

3
scm-ui/ui-components/src/markdown/LazyMarkdownView.tsx
View File

@@ -33,6 +33,7 @@ import { BinderContext } from "@scm-manager/ui-extensions";
import ErrorBoundary from "../ErrorBoundary";
import { create as createMarkdownHeadingRenderer } from "./MarkdownHeadingRenderer";
import { create as createMarkdownLinkRenderer } from "./MarkdownLinkRenderer";
import { create as createMarkdownImageRenderer } from "./MarkdownImageRenderer";
import { useTranslation, WithTranslation, withTranslation } from "react-i18next";
import Notification from "../Notification";
import { createTransformer as createChangesetShortlinkParser } from "./remarkChangesetShortLinkParser";
@@ -173,6 +174,8 @@ class LazyMarkdownView extends React.Component<Props, State> {
remarkRendererList.heading = createMarkdownHeadingRenderer(permalink);
}
remarkRendererList.image = createMarkdownImageRenderer(basePath);
let protocolLinkRendererExtensions: ProtocolLinkRendererExtensionMap = {};
if (!remarkRendererList.link) {
const extensionPoints = this.context.getExtensions(

116
scm-ui/ui-components/src/markdown/MarkdownImageRenderer.tsx Normal file
View File

@@ -0,0 +1,116 @@
/*
* 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 } from "react";
import { useLocation } from "react-router-dom";
import { Link } from "@scm-manager/ui-types";
import {
isAbsolute,
isExternalLink,
isInternalScmRepoLink,
isLinkWithProtocol,
isSubDirectoryOf,
join,
normalizePath
} from "./paths";
import { useRepositoryContext, useRepositoryRevisionContext } from "@scm-manager/ui-api";
export const createLocalLink = (
basePath: string,
contentLink: string,
revision: string,
currentPath: string,
link: string
) => {
const apiBasePath = contentLink.replace("{revision}", revision);
if (isInternalScmRepoLink(link)) {
return link;
}
if (isAbsolute(link)) {
return apiBasePath.replace("{path}", link.substring(1));
}
if (!isSubDirectoryOf(basePath, currentPath)) {
return apiBasePath.replace("{path}", link);
}
const relativePath = currentPath.substring(basePath.length);
let path = relativePath;
if (currentPath.endsWith("/")) {
path = relativePath.substring(0, relativePath.length - 1);
}
const lastSlash = path.lastIndexOf("/");
if (lastSlash < 0) {
path = "";
} else {
path = path.substring(0, lastSlash);
}
return apiBasePath.replace("{path}", normalizePath(join(path, link)));
};
type LinkProps = {
src: string;
alt: string;
};
type Props = LinkProps & {
base?: string;
contentLink?: string;
};
const MarkdownImageRenderer: FC<Props> = ({ src = "", alt = "", base, contentLink, children, ...props }) => {
const location = useLocation();
const repository = useRepositoryContext();
const revision = useRepositoryRevisionContext();
if (isExternalLink(src) || isLinkWithProtocol(src)) {
return (
<img src={src} alt={alt}>
{children}
</img>
);
} else if (base && repository && revision) {
const localLink = createLocalLink(base, (repository._links.content as Link).href, revision, location.pathname, src);
return (
<img src={localLink} alt={alt}>
{children}
</img>
);
} else if (src) {
return (
<img src={src} alt={alt}>
{children}
</img>
);
} else {
return <img {...props}>{children}</img>;
}
};
// we use a factory method, because react-markdown does not pass
// base as prop down to our link component.
export const create = (base: string | undefined): FC<LinkProps> => {
return (props) => {
return <MarkdownImageRenderer base={base}{...props} />;
};
};
export default MarkdownImageRenderer;

9
scm-ui/ui-components/src/markdown/MarkdownLinkRenderer.test.tsx
View File

@@ -21,13 +21,8 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import {
isAnchorLink,
isExternalLink,
isLinkWithProtocol,
createLocalLink,
isInternalScmRepoLink,
} from "./MarkdownLinkRenderer";
import { isAnchorLink, isExternalLink, isLinkWithProtocol, isInternalScmRepoLink } from "./paths";
import { createLocalLink } from "./MarkdownLinkRenderer";
describe("test isAnchorLink", () => {
it("should return true", () => {

64
scm-ui/ui-components/src/markdown/MarkdownLinkRenderer.tsx
View File

@@ -26,59 +26,15 @@ import { Link, useLocation } from "react-router-dom";
import ExternalLink from "../navigation/ExternalLink";
import { urls } from "@scm-manager/ui-api";
import { ProtocolLinkRendererExtensionMap } from "./markdownExtensions";
const externalLinkRegex = new RegExp("^http(s)?://");
export const isExternalLink = (link: string) => {
return externalLinkRegex.test(link);
};
export const isAnchorLink = (link: string) => {
return link.startsWith("#");
};
export const isInternalScmRepoLink = (link: string) => {
return link.startsWith("/repo/");
};
const linkWithProtocolRegex = new RegExp("^([a-z]+):(.+)");
export const isLinkWithProtocol = (link: string) => {
const match = link.match(linkWithProtocolRegex);
return match && { protocol: match[1], link: match[2] };
};
const join = (left: string, right: string) => {
if (left.endsWith("/") && right.startsWith("/")) {
return left + right.substring(1);
} else if (!left.endsWith("/") && !right.startsWith("/")) {
return left + "/" + right;
}
return left + right;
};
const normalizePath = (path: string) => {
const stack = [];
const parts = path.split("/");
for (const part of parts) {
if (part === "..") {
stack.pop();
} else if (part !== ".") {
stack.push(part);
}
}
const normalizedPath = stack.join("/");
if (normalizedPath.startsWith("/")) {
return normalizedPath;
}
return "/" + normalizedPath;
};
const isAbsolute = (link: string) => {
return link.startsWith("/");
};
const isSubDirectoryOf = (basePath: string, currentPath: string) => {
return currentPath.startsWith(basePath);
};
import {
isAbsolute, isAnchorLink,
isExternalLink,
isInternalScmRepoLink,
isLinkWithProtocol,
isSubDirectoryOf,
join,
normalizePath
} from "./paths";
export const createLocalLink = (basePath: string, currentPath: string, link: string) => {
if (isInternalScmRepoLink(link)) {
@@ -100,7 +56,7 @@ export const createLocalLink = (basePath: string, currentPath: string, link: str
} else {
path = path.substring(0, lastSlash);
}
return normalizePath(join(path, link));
return "/" + normalizePath(join(path, link));
};
type LinkProps = {

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

@@ -32,6 +32,7 @@ import MarkdownXmlCodeBlock from "../__resources__/markdown-xml-codeblock.md";
import MarkdownUmlCodeBlock from "../__resources__/markdown-uml-codeblock.md";
import MarkdownInlineXml from "../__resources__/markdown-inline-xml.md";
import MarkdownLinks from "../__resources__/markdown-links.md";
import MarkdownImages from "../__resources__/markdown-images.md";
import MarkdownCommitLinks from "../__resources__/markdown-commit-link.md";
import MarkdownXss from "../__resources__/markdown-xss.md";
import MarkdownChangelog from "../__resources__/markdown-changelog.md";
@@ -40,6 +41,7 @@ import { Subtitle } from "../layout";
import { MemoryRouter } from "react-router-dom";
import { Binder, BinderContext, extensionPoints } from "@scm-manager/ui-extensions";
import { ProtocolLinkRendererProps } from "./markdownExtensions";
import { RepositoryContextProvider, RepositoryRevisionContextProvider } from "@scm-manager/ui-api";
const Spacing = styled.div`
padding: 2em;
@@ -114,7 +116,19 @@ storiesOf("MarkdownView", module)
</BinderContext.Provider>
);
})
.add("XSS Prevention", () => <MarkdownView content={MarkdownXss} skipHtml={false} />);
.add("XSS Prevention", () => <MarkdownView content={MarkdownXss} skipHtml={false} />)
.add("Images", () => (
<RepositoryContextProvider
// @ts-ignore We do not need a valid repository here, only one with a content link
repository={{
_links: { content: { href: "https://my.scm/scm/api/v2/some/repository/content/{revision}/{path}" } }
}}
>
<RepositoryRevisionContextProvider revision={"42"}>
<MarkdownView basePath={"/scm/"} content={MarkdownImages} />
</RepositoryRevisionContextProvider>
</RepositoryContextProvider>
));
export const ProtocolLinkRenderer: FC<ProtocolLinkRendererProps<"scw">> = ({ protocol, href, children }) => {
return (

76
scm-ui/ui-components/src/markdown/paths.ts Normal file
View File

@@ -0,0 +1,76 @@
/*
* 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.
*/
const externalLinkRegex = new RegExp("^http(s)?://");
export const isExternalLink = (link: string) => {
return externalLinkRegex.test(link);
};
export const isAnchorLink = (link: string) => {
return link.startsWith("#");
};
export const isInternalScmRepoLink = (link: string) => {
return link.startsWith("/repo/");
};
const linkWithProtocolRegex = new RegExp("^([a-z]+):(.+)");
export const isLinkWithProtocol = (link: string) => {
const match = link.match(linkWithProtocolRegex);
return match && { protocol: match[1], link: match[2] };
};
export const join = (left: string, right: string) => {
if (left.endsWith("/") && right.startsWith("/")) {
return left + right.substring(1);
} else if (!left.endsWith("/") && !right.startsWith("/")) {
return left + "/" + right;
}
return left + right;
};
export const normalizePath = (path: string) => {
const stack = [];
const parts = path.split("/");
for (const part of parts) {
if (part === "..") {
stack.pop();
} else if (part !== ".") {
stack.push(part);
}
}
const normalizedPath = stack.join("/");
if (normalizedPath.startsWith("/")) {
return normalizedPath.substring(1);
}
return normalizedPath;
};
export const isAbsolute = (link: string) => {
return link.startsWith("/");
};
export const isSubDirectoryOf = (basePath: string, currentPath: string) => {
return currentPath.startsWith(basePath);
};

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

@@ -27,7 +27,7 @@ import { Changeset, Repository } from "@scm-manager/ui-types";
import { ErrorPage, Loading } from "@scm-manager/ui-components";
import ChangesetDetails from "../components/changesets/ChangesetDetails";
import { FileControlFactory } from "@scm-manager/ui-components";
import { useChangeset } from "@scm-manager/ui-api";
import { RepositoryRevisionContextProvider, useChangeset } from "@scm-manager/ui-api";
import { useParams } from "react-router-dom";
type Props = {
@@ -53,11 +53,13 @@ const ChangesetView: FC<Props> = ({ repository, fileControlFactoryFactory }) =>
}
return (
<ChangesetDetails
changeset={changeset}
repository={repository}
fileControlFactory={fileControlFactoryFactory && fileControlFactoryFactory(changeset)}
/>
<RepositoryRevisionContextProvider revision={changeset.id}>
<ChangesetDetails
changeset={changeset}
repository={repository}
fileControlFactory={fileControlFactoryFactory && fileControlFactoryFactory(changeset)}
/>
</RepositoryRevisionContextProvider>
);
};

5
scm-ui/ui-webapp/src/repos/containers/ChangesetsRoot.tsx
View File

@@ -28,6 +28,7 @@ import { Repository, Branch } from "@scm-manager/ui-types";
import CodeActionBar from "../codeSection/components/CodeActionBar";
import { urls } from "@scm-manager/ui-components";
import Changesets from "./Changesets";
import { RepositoryRevisionContextProvider } from "@scm-manager/ui-api";
type Props = {
repository: Repository;
@@ -66,7 +67,7 @@ const ChangesetRoot: FC<Props> = ({ repository, baseUrl, branches, selectedBranc
};
return (
<>
<RepositoryRevisionContextProvider revision={selectedBranch}>
<CodeActionBar
branches={branches}
selectedBranch={!isBranchAvailable() ? selectedBranch : defaultBranch?.name}
@@ -76,7 +77,7 @@ const ChangesetRoot: FC<Props> = ({ repository, baseUrl, branches, selectedBranc
<Route path={`${url}/:page?`}>
<Changesets repository={repository} branch={branches?.filter(b => b.name === selectedBranch)[0]} url={url} />
</Route>
</>
</RepositoryRevisionContextProvider>
);
};

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

@@ -60,7 +60,7 @@ import SourceExtensions from "../sources/containers/SourceExtensions";
import TagsOverview from "../tags/container/TagsOverview";
import CompareRoot from "../compare/CompareRoot";
import TagRoot from "../tags/container/TagRoot";
import { useIndexLinks, useNamespaceAndNameContext, useRepository } from "@scm-manager/ui-api";
import { RepositoryContextProvider, useIndexLinks, useNamespaceAndNameContext, useRepository } from "@scm-manager/ui-api";
import styled from "styled-components";
import { useShortcut } from "@scm-manager/ui-shortcuts";
@@ -265,149 +265,151 @@ const RepositoryRoot = () => {
return (
<StateMenuContextProvider>
<Page
title={titleComponent}
documentTitle={`${repository.namespace}/${repository.name}`}
afterTitle={
<MobileWrapped className="is-flex is-align-items-center">
<ExtensionPoint name="repository.afterTitle" props={{ repository }} />
<TagGroup className="has-text-weight-bold">
<RepositoryFlags repository={repository} tooltipLocation="bottom" />
</TagGroup>
</MobileWrapped>
}
>
{modal}
<CustomQueryFlexWrappedColumns>
<PrimaryContentColumn>
<Switch>
<Redirect exact from={urls.escapeUrlForRoute(match.url)} to={urls.escapeUrlForRoute(redirectedUrl)} />
<RepositoryContextProvider repository={repository}>
<Page
title={titleComponent}
documentTitle={`${repository.namespace}/${repository.name}`}
afterTitle={
<MobileWrapped className="is-flex is-align-items-center">
<ExtensionPoint name="repository.afterTitle" props={{ repository }} />
<TagGroup className="has-text-weight-bold">
<RepositoryFlags repository={repository} tooltipLocation="bottom" />
</TagGroup>
</MobileWrapped>
}
>
{modal}
<CustomQueryFlexWrappedColumns>
<PrimaryContentColumn>
<Switch>
<Redirect exact from={urls.escapeUrlForRoute(match.url)} to={urls.escapeUrlForRoute(redirectedUrl)} />
{/* redirect pre 2.0.0-rc2 links */}
<Redirect from={`${escapedUrl}/changeset/:id`} to={`${url}/code/changeset/:id`} />
<Redirect exact from={`${escapedUrl}/sources`} to={`${url}/code/sources`} />
<Redirect from={`${escapedUrl}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`} />
<Redirect exact from={`${escapedUrl}/changesets`} to={`${url}/code/changesets`} />
<Redirect
from={`${escapedUrl}/branch/:branch/changesets`}
to={`${url}/code/branch/:branch/changesets/`}
/>
{/* redirect pre 2.0.0-rc2 links */}
<Redirect from={`${escapedUrl}/changeset/:id`} to={`${url}/code/changeset/:id`} />
<Redirect exact from={`${escapedUrl}/sources`} to={`${url}/code/sources`} />
<Redirect from={`${escapedUrl}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`} />
<Redirect exact from={`${escapedUrl}/changesets`} to={`${url}/code/changesets`} />
<Redirect
from={`${escapedUrl}/branch/:branch/changesets`}
to={`${url}/code/branch/:branch/changesets/`}
/>
<Route path={`${escapedUrl}/info`} exact>
<RepositoryDetails repository={repository} />
</Route>
<Route path={`${escapedUrl}/settings/general`}>
<EditRepo repository={repository} />
</Route>
<Route path={`${escapedUrl}/settings/permissions`}>
<Permissions namespaceOrRepository={repository} />
</Route>
<Route exact path={`${escapedUrl}/code/changeset/:id`}>
<ChangesetView repository={repository} fileControlFactoryFactory={fileControlFactoryFactory} />
</Route>
<Route path={`${escapedUrl}/code/sourceext/:extension`} exact={true}>
<SourceExtensions repository={repository} />
</Route>
<Route path={`${escapedUrl}/code/sourceext/:extension/:revision/:path*`}>
<SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />
</Route>
<Route path={`${escapedUrl}/code`}>
<CodeOverview baseUrl={`${url}/code`} repository={repository} />
</Route>
<Route path={`${escapedUrl}/branch/:branch`}>
<BranchRoot repository={repository} />
</Route>
<Route path={`${escapedUrl}/branches`} exact={true}>
<BranchesOverview repository={repository} baseUrl={`${url}/branch`} />
</Route>
<Route path={`${escapedUrl}/branches/create`}>
<CreateBranch repository={repository} />
</Route>
<Route path={`${escapedUrl}/tag/:tag`}>
<TagRoot repository={repository} baseUrl={`${url}/tag`} />
</Route>
<Route path={`${escapedUrl}/tags`} exact={true}>
<TagsOverview repository={repository} baseUrl={`${url}/tag`} />
</Route>
<Route path={`${escapedUrl}/compare/:sourceType/:sourceName`}>
<CompareRoot repository={repository} baseUrl={`${url}/compare`} />
</Route>
<ExtensionPoint<extensionPoints.RepositoryRoute>
name="repository.route"
props={{
repository,
url: urls.escapeUrlForRoute(url),
indexLinks,
}}
renderAll={true}
/>
</Switch>
</PrimaryContentColumn>
<SecondaryNavigationColumn>
<SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
<ExtensionPoint<extensionPoints.RepositoryNavigationTopLevel>
name="repository.navigation.topLevel"
props={extensionProps}
renderAll={true}
/>
<NavLink
to={`${url}/info`}
icon="fas fa-info-circle"
label={t("repositoryRoot.menu.informationNavLink")}
title={t("repositoryRoot.menu.informationNavLink")}
/>
<RepositoryNavLink
repository={repository}
linkName="branches"
to={`${url}/branches/`}
icon="fas fa-code-branch"
label={t("repositoryRoot.menu.branchesNavLink")}
activeWhenMatch={matchesBranches}
activeOnlyWhenExact={false}
title={t("repositoryRoot.menu.branchesNavLink")}
/>
<RepositoryNavLink
repository={repository}
linkName="tags"
to={`${url}/tags/`}
icon="fas fa-tags"
label={t("repositoryRoot.menu.tagsNavLink")}
activeWhenMatch={matchesTags}
activeOnlyWhenExact={false}
title={t("repositoryRoot.menu.tagsNavLink")}
/>
<RepositoryNavLink
repository={repository}
linkName={codeLinkname}
to={evaluateDestinationForCodeLink()}
icon="fas fa-code"
label={t("repositoryRoot.menu.sourcesNavLink")}
activeWhenMatch={matchesCode}
activeOnlyWhenExact={false}
title={t("repositoryRoot.menu.sourcesNavLink")}
/>
<ExtensionPoint<extensionPoints.RepositoryNavigation>
name="repository.navigation"
props={extensionProps}
renderAll={true}
/>
<SubNavigation
to={`${url}/settings/general`}
label={t("repositoryRoot.menu.settingsNavLink")}
title={t("repositoryRoot.menu.settingsNavLink")}
>
<EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`} />
<PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository} />
<ExtensionPoint<extensionPoints.RepositorySetting>
name="repository.setting"
<Route path={`${escapedUrl}/info`} exact>
<RepositoryDetails repository={repository} />
</Route>
<Route path={`${escapedUrl}/settings/general`}>
<EditRepo repository={repository} />
</Route>
<Route path={`${escapedUrl}/settings/permissions`}>
<Permissions namespaceOrRepository={repository} />
</Route>
<Route exact path={`${escapedUrl}/code/changeset/:id`}>
<ChangesetView repository={repository} fileControlFactoryFactory={fileControlFactoryFactory} />
</Route>
<Route path={`${escapedUrl}/code/sourceext/:extension`} exact={true}>
<SourceExtensions repository={repository} />
</Route>
<Route path={`${escapedUrl}/code/sourceext/:extension/:revision/:path*`}>
<SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />
</Route>
<Route path={`${escapedUrl}/code`}>
<CodeOverview baseUrl={`${url}/code`} repository={repository} />
</Route>
<Route path={`${escapedUrl}/branch/:branch`}>
<BranchRoot repository={repository} />
</Route>
<Route path={`${escapedUrl}/branches`} exact={true}>
<BranchesOverview repository={repository} baseUrl={`${url}/branch`} />
</Route>
<Route path={`${escapedUrl}/branches/create`}>
<CreateBranch repository={repository} />
</Route>
<Route path={`${escapedUrl}/tag/:tag`}>
<TagRoot repository={repository} baseUrl={`${url}/tag`} />
</Route>
<Route path={`${escapedUrl}/tags`} exact={true}>
<TagsOverview repository={repository} baseUrl={`${url}/tag`} />
</Route>
<Route path={`${escapedUrl}/compare/:sourceType/:sourceName`}>
<CompareRoot repository={repository} baseUrl={`${url}/compare`} />
</Route>
<ExtensionPoint<extensionPoints.RepositoryRoute>
name="repository.route"
props={{
repository,
url: urls.escapeUrlForRoute(url),
indexLinks,
}}
renderAll={true}
/>
</Switch>
</PrimaryContentColumn>
<SecondaryNavigationColumn>
<SecondaryNavigation label={t("repositoryRoot.menu.navigationLabel")}>
<ExtensionPoint<extensionPoints.RepositoryNavigationTopLevel>
name="repository.navigation.topLevel"
props={extensionProps}
renderAll={true}
/>
</SubNavigation>
</SecondaryNavigation>
</SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns>
</Page>
<NavLink
to={`${url}/info`}
icon="fas fa-info-circle"
label={t("repositoryRoot.menu.informationNavLink")}
title={t("repositoryRoot.menu.informationNavLink")}
/>
<RepositoryNavLink
repository={repository}
linkName="branches"
to={`${url}/branches/`}
icon="fas fa-code-branch"
label={t("repositoryRoot.menu.branchesNavLink")}
activeWhenMatch={matchesBranches}
activeOnlyWhenExact={false}
title={t("repositoryRoot.menu.branchesNavLink")}
/>
<RepositoryNavLink
repository={repository}
linkName="tags"
to={`${url}/tags/`}
icon="fas fa-tags"
label={t("repositoryRoot.menu.tagsNavLink")}
activeWhenMatch={matchesTags}
activeOnlyWhenExact={false}
title={t("repositoryRoot.menu.tagsNavLink")}
/>
<RepositoryNavLink
repository={repository}
linkName={codeLinkname}
to={evaluateDestinationForCodeLink()}
icon="fas fa-code"
label={t("repositoryRoot.menu.sourcesNavLink")}
activeWhenMatch={matchesCode}
activeOnlyWhenExact={false}
title={t("repositoryRoot.menu.sourcesNavLink")}
/>
<ExtensionPoint<extensionPoints.RepositoryNavigation>
name="repository.navigation"
props={extensionProps}
renderAll={true}
/>
<SubNavigation
to={`${url}/settings/general`}
label={t("repositoryRoot.menu.settingsNavLink")}
title={t("repositoryRoot.menu.settingsNavLink")}
>
<EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`} />
<PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository} />
<ExtensionPoint<extensionPoints.RepositorySetting>
name="repository.setting"
props={extensionProps}
renderAll={true}
/>
</SubNavigation>
</SecondaryNavigation>
</SecondaryNavigationColumn>
</CustomQueryFlexWrappedColumns>
</Page>
</RepositoryContextProvider>
</StateMenuContextProvider>
);
};

13
scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx
View File

@@ -23,7 +23,7 @@
*/
import React, { FC, useState } from "react";
import MarkdownViewer from "./MarkdownViewer";
import { File } from "@scm-manager/ui-types";
import { File, Repository } from "@scm-manager/ui-types";
import { ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
import { useTranslation } from "react-i18next";
import { useFileContent } from "@scm-manager/ui-api";
@@ -34,9 +34,10 @@ import classNames from "classnames";
type Props = {
file: File;
basePath: string;
repository: Repository;
};
const SwitchableMarkdownViewer: FC<Props> = ({ file, basePath }) => {
const SwitchableMarkdownViewer: FC<Props> = ({ file, basePath, repository }) => {
const { isLoading, error, data: content } = useFileContent(file);
const { t } = useTranslation("repos");
const location = useLocation();
@@ -68,7 +69,13 @@ const SwitchableMarkdownViewer: FC<Props> = ({ file, basePath }) => {
</ul>
</div>
{renderMarkdown ? (
<MarkdownViewer content={content || ""} basePath={basePath} permalink={permalink} />
<MarkdownViewer
content={content || ""}
basePath={basePath}
permalink={permalink}
revision={file.revision}
repository={repository}
/>
) : (
<SyntaxHighlighter language="markdown" value={content || ""} permalink={permalink} />
)}

6
scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx
View File

@@ -24,7 +24,7 @@
import React, { FC, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { useHistory, useLocation, useParams } from "react-router-dom";
import { useSources } from "@scm-manager/ui-api";
import { RepositoryRevisionContextProvider, useSources } from "@scm-manager/ui-api";
import { Branch, Repository } from "@scm-manager/ui-types";
import { Breadcrumb, ErrorNotification, Loading, Notification } from "@scm-manager/ui-components";
import FileTree from "../components/FileTree";
@@ -178,7 +178,7 @@ const Sources: FC<Props> = ({ repository, branches, selectedBranch, baseUrl }) =
};
return (
<>
<RepositoryRevisionContextProvider revision={revision}>
{hasBranchesWhenSupporting(repository) && (
<CodeActionBar
selectedBranch={selectedBranch}
@@ -193,7 +193,7 @@ const Sources: FC<Props> = ({ repository, branches, selectedBranch, baseUrl }) =
/>
)}
{renderPanelContent()}
</>
</RepositoryRevisionContextProvider>
);
};

2
scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx
View File

@@ -66,7 +66,7 @@ const SourcesView: FC<Props> = ({ file, repository, revision }) => {
if (contentType.startsWith("image/")) {
sources = <ImageViewer file={file} />;
} else if (contentType.includes("markdown") || (language && language.toLowerCase() === "markdown")) {
sources = <SwitchableMarkdownViewer file={file} basePath={basePath} />;
sources = <SwitchableMarkdownViewer file={file} basePath={basePath} repository={repository} />;
} else if (language) {
sources = <SourcecodeViewer file={file} language={language} />;
} else if (contentType.startsWith("text/")) {

1
scm-webapp/src/main/java/sonia/scm/api/v2/resources/RepositoryToRepositoryDtoMapper.java
View File

@@ -170,6 +170,7 @@ public abstract class RepositoryToRepositoryDtoMapper extends BaseMapper<Reposit
}
linksBuilder.single(link("changesets", resourceLinks.changeset().all(repository.getNamespace(), repository.getName())));
linksBuilder.single(link("sources", resourceLinks.source().selfWithoutRevision(repository.getNamespace(), repository.getName())));
linksBuilder.single(link("content", resourceLinks.source().content(repository.getNamespace(), repository.getName())));
linksBuilder.single(link("paths", resourceLinks.repository().paths(repository.getNamespace(), repository.getName())));
if (RepositoryPermissions.healthCheck(repository).isPermitted() && !healthCheckService.checkRunning(repository)) {
linksBuilder.single(link("runHealthCheck", resourceLinks.repository().runHealthCheck(repository.getNamespace(), repository.getName())));

6
scm-webapp/src/main/java/sonia/scm/api/v2/resources/ResourceLinks.java
View File

@@ -780,6 +780,12 @@ class ResourceLinks {
public String content(String namespace, String name, String revision, String path) {
return addPath(sourceLinkBuilder.method("getRepositoryResource").parameters(namespace, name).method("content").parameters().method("get").parameters(revision, "").href(), path);
}
public String content(String namespace, String name) {
return content(namespace, name, "_REVISION_", "_PATH_")
.replace("_REVISION_", "{revision}")
.replace("_PATH_", "{path}");
}
}
public AnnotateLinks annotate() {

8
scm-webapp/src/test/java/sonia/scm/api/v2/resources/RepositoryToRepositoryDtoMapperTest.java
View File

@@ -225,6 +225,14 @@ public class RepositoryToRepositoryDtoMapperTest {
dto.getLinks().getLinkBy("sources").get().getHref());
}
@Test
public void shouldCreateContentLink() {
RepositoryDto dto = mapper.map(createTestRepository());
assertEquals(
"http://example.com/base/v2/repositories/testspace/test/content/{revision}/{path}",
dto.getLinks().getLinkBy("content").get().getHref());
}
@Test
public void shouldCreatePermissionsLink() {
RepositoryDto dto = mapper.map(createTestRepository());