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

merge

Browse Source
This commit is contained in:
Eduard Heimbuch
2020-02-19 12:32:56 +01:00
parent 66a97450b6 bd57acf138
commit e030d2c347
14 changed files with 489 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
scm-ui/ui-components/src/__resources__/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

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

@@ -32389,6 +32389,272 @@ exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
</div>
`;
exports[`Storyshots Layout|Footer Default 1`] = `
<footer
className="footer"
>
<div
className="container is-centered has-text-centered "
>
<p
className="is-size-6 columns is-centered"
>
<a
href="/me"
onClick={[Function]}
>
Trillian McMillian
</a>
</p>
<hr
className="has-background-grey-lighter"
/>
<p>
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
2.0.0
</a>
</p>
<br />
<p>
Powered by
<a
href="https://cloudogu.com/"
target="_blank"
>
Cloudogu GmbH
</a>
| Learn more about
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
</a>
</p>
</div>
</footer>
`;
exports[`Storyshots Layout|Footer Full 1`] = `
<footer
className="footer"
>
<div
className="container is-centered has-text-centered "
>
<p
className="is-size-6 columns is-centered"
>
<figure
className="media-left"
>
<p
className="image is-24x24 is-rounded"
>
<img
alt="trillian"
className="is-rounded"
src="test-file-stub"
/>
</p>
</figure>
<a
href="/me"
onClick={[Function]}
>
Trillian McMillian
</a>
</p>
<hr
className="has-background-grey-lighter"
/>
<p>
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
2.0.0
</a>
|
<a
href="#"
>
REST API
</a>
|
<a
href="#"
>
CLI
</a>
</p>
<br />
<p>
Powered by
<a
href="https://cloudogu.com/"
target="_blank"
>
Cloudogu GmbH
</a>
| Learn more about
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
</a>
</p>
</div>
</footer>
`;
exports[`Storyshots Layout|Footer With Avatar 1`] = `
<footer
className="footer"
>
<div
className="container is-centered has-text-centered "
>
<p
className="is-size-6 columns is-centered"
>
<figure
className="media-left"
>
<p
className="image is-24x24 is-rounded"
>
<img
alt="trillian"
className="is-rounded"
src="test-file-stub"
/>
</p>
</figure>
<a
href="/me"
onClick={[Function]}
>
Trillian McMillian
</a>
</p>
<hr
className="has-background-grey-lighter"
/>
<p>
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
2.0.0
</a>
</p>
<br />
<p>
Powered by
<a
href="https://cloudogu.com/"
target="_blank"
>
Cloudogu GmbH
</a>
| Learn more about
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
</a>
</p>
</div>
</footer>
`;
exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
<footer
className="footer"
>
<div
className="container is-centered has-text-centered "
>
<p
className="is-size-6 columns is-centered"
>
<a
href="/me"
onClick={[Function]}
>
Trillian McMillian
</a>
</p>
<hr
className="has-background-grey-lighter"
/>
<p>
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
2.0.0
</a>
|
<a
href="#"
>
REST API
</a>
|
<a
href="#"
>
CLI
</a>
</p>
<br />
<p>
Powered by
<a
href="https://cloudogu.com/"
target="_blank"
>
Cloudogu GmbH
</a>
| Learn more about
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
</a>
</p>
</div>
</footer>
`;
exports[`Storyshots Loading Default 1`] = `
<div>
<div

21
scm-ui/ui-components/src/avatar/AvatarImage.tsx
View File

@@ -1,25 +1,26 @@
import React, {FC} from "react";
import { binder } from "@scm-manager/ui-extensions";
import React, { FC } from "react";
import { Image } from "..";
import { Person } from "./Avatar";
import { EXTENSION_POINT } from "./Avatar";
import { useBinder } from "@scm-manager/ui-extensions";
type Props = {
person: Person;
representation?: "rounded" | "rounded-border";
};
const AvatarImage:FC<Props> = ({person, representation = "rounded-border"}) => {
const avatarFactory = binder.getExtension(EXTENSION_POINT);
if (avatarFactory) {
const avatar = avatarFactory(person);
const AvatarImage: FC<Props> = ({ person, representation = "rounded-border" }) => {
const binder = useBinder();
const avatarFactory = binder.getExtension(EXTENSION_POINT);
if (avatarFactory) {
const avatar = avatarFactory(person);
const className = representation === "rounded" ? "is-rounded" : "has-rounded-border";
const className = representation === "rounded" ? "is-rounded" : "has-rounded-border";
return <Image className={className} src={avatar} alt={person.name} />;
}
return <Image className={className} src={avatar} alt={person.name} />;
}
return null;
return null;
};
export default AvatarImage;

21
scm-ui/ui-components/src/avatar/AvatarWrapper.tsx
View File

@@ -1,18 +1,13 @@
import React, { Component, ReactNode } from "react";
import { binder } from "@scm-manager/ui-extensions";
import React, { FC } from "react";
import { useBinder } from "@scm-manager/ui-extensions";
import { EXTENSION_POINT } from "./Avatar";
type Props = {
children: ReactNode;
const AvatarWrapper: FC = ({ children }) => {
const binder = useBinder();
if (binder.hasExtension(EXTENSION_POINT)) {
return <>{children}</>;
}
return null;
};
class AvatarWrapper extends Component<Props> {
render() {
if (binder.hasExtension(EXTENSION_POINT)) {
return <>{this.props.children}</>;
}
return null;
}
}
export default AvatarWrapper;

56
scm-ui/ui-components/src/layout/Footer.stories.tsx Normal file
View File

@@ -0,0 +1,56 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import Footer from "./Footer";
import { Binder, BinderContext } from "@scm-manager/ui-extensions";
import { Me } from "@scm-manager/ui-types";
import { EXTENSION_POINT } from "../avatar/Avatar";
// @ts-ignore ignore unknown png
import avatar from "../__resources__/avatar.png";
const trillian: Me = {
name: "trillian",
displayName: "Trillian McMillian",
mail: "tricia@hitchhiker.com",
groups: ["crew"],
_links: {}
};
const bindAvatar = (binder: Binder) => {
binder.bind(EXTENSION_POINT, () => {
return avatar;
});
};
const bindLinks = (binder: Binder) => {
binder.bind("footer.links", () => <a href="#">REST API</a>);
binder.bind("footer.links", () => <a href="#">CLI</a>);
};
const withBinder = (binder: Binder) => {
return (
<BinderContext.Provider value={binder}>
<Footer me={trillian} version="2.0.0" links={{}} />
</BinderContext.Provider>
);
};
storiesOf("Layout|Footer", module)
.add("Default", () => {
return <Footer me={trillian} version="2.0.0" links={{}} />;
})
.add("With Avatar", () => {
const binder = new Binder("avatar-story");
bindAvatar(binder);
return withBinder(binder);
})
.add("With Plugin Links", () => {
const binder = new Binder("link-story");
bindLinks(binder);
return withBinder(binder);
})
.add("Full", () => {
const binder = new Binder("link-story");
bindAvatar(binder);
bindLinks(binder);
return withBinder(binder);
});

101
scm-ui/ui-components/src/layout/Footer.tsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import React, { FC } from "react";
import { Me, Links } from "@scm-manager/ui-types";
import { Link } from "react-router-dom";
import { binder } from "@scm-manager/ui-extensions";
import { useBinder } from "@scm-manager/ui-extensions";
import { AvatarWrapper, AvatarImage } from "../avatar";
type Props = {
@@ -10,56 +10,53 @@ type Props = {
links: Links;
};
class Footer extends React.Component<Props> {
render() {
const { me, version, links } = this.props;
if (!me) {
return "";
}
const extensionProps = { me, links };
const extensions = binder.getExtensions("footer.links", extensionProps);
return (
<footer className="footer">
<div className="container is-centered has-text-centered ">
<p className="is-size-6 columns is-centered">
<AvatarWrapper>
<figure className="media-left">
<p className="image is-24x24 is-rounded">
<AvatarImage person={me} representation="rounded" />
</p>
</figure>
</AvatarWrapper>
<Link to={"/me"}>{me.displayName}</Link>
</p>
<hr className={"has-background-grey-lighter"} />
<p>
<a href="https://www.scm-manager.org/" target="_blank">
SCM-Manager {version}
</a>
{extensions.map(Ext => (
<>
{" "}
| <Ext {...extensionProps} />
</>
))}
</p>
<br />
<p>
Powered by{" "}
<a target="_blank" href="https://cloudogu.com/">
Cloudogu GmbH
</a>{" "}
| Learn more about{" "}
<a href="https://www.scm-manager.org/" target="_blank">
SCM-Manager
</a>
</p>
</div>
</footer>
);
const Footer: FC<Props> = ({ me, version, links }) => {
const binder = useBinder();
if (!me) {
return null;
}
}
const extensionProps = { me, links };
const extensions = binder.getExtensions("footer.links", extensionProps);
return (
<footer className="footer">
<div className="container is-centered has-text-centered ">
<p className="is-size-6 columns is-centered">
<AvatarWrapper>
<figure className="media-left">
<p className="image is-24x24 is-rounded">
<AvatarImage person={me} representation="rounded" />
</p>
</figure>
</AvatarWrapper>
<Link to={"/me"}>{me.displayName}</Link>
</p>
<hr className={"has-background-grey-lighter"} />
<p>
<a href="https://www.scm-manager.org/" target="_blank">
SCM-Manager {version}
</a>
{extensions.map(Ext => (
<>
{" "}
| <Ext {...extensionProps} />
</>
))}
</p>
<br />
<p>
Powered by{" "}
<a target="_blank" href="https://cloudogu.com/">
Cloudogu GmbH
</a>{" "}
| Learn more about{" "}
<a href="https://www.scm-manager.org/" target="_blank">
SCM-Manager
</a>
</p>
</div>
</footer>
);
};
export default Footer;

16
scm-ui/ui-extensions/src/ExtensionPoint.test.tsx
View File

@@ -33,12 +33,6 @@ describe("ExtensionPoint test", () => {
expect(rendered.text()).toBe("Extension One");
});
// We use this wrapper since Enzyme cannot handle React Fragments (see https://github.com/airbnb/enzyme/issues/1213)
class ExtensionPointEnzymeFix extends ExtensionPoint {
render() {
return <div>{super.render()}</div>;
}
}
it("should render the given components", () => {
const labelOne = () => {
return <label>Extension One</label>;
@@ -50,7 +44,7 @@ describe("ExtensionPoint test", () => {
mockedBinder.hasExtension.mockReturnValue(true);
mockedBinder.getExtensions.mockReturnValue([labelOne, labelTwo]);
const rendered = mount(<ExtensionPointEnzymeFix name="something.special" renderAll={true} />);
const rendered = mount(<ExtensionPoint name="something.special" renderAll={true} />);
const text = rendered.text();
expect(text).toContain("Extension One");
expect(text).toContain("Extension Two");
@@ -143,4 +137,12 @@ describe("ExtensionPoint test", () => {
const text = rendered.text();
expect(text).toBe("Hello Trillian");
});
it("should not render nothing without extension and without default", () => {
mockedBinder.hasExtension.mockReturnValue(false);
const rendered = mount(<ExtensionPoint name="something.special" />);
const text = rendered.text();
expect(text).toBe("");
});
});

76
scm-ui/ui-extensions/src/ExtensionPoint.tsx
View File

@@ -1,53 +1,51 @@
import * as React from "react";
import binder from "./binder";
import { Binder } from "./binder";
import { FC, ReactNode } from "react";
import useBinder from "./useBinder";
type Props = {
name: string;
renderAll?: boolean;
props?: object;
children?: React.ReactNode;
};
const renderAllExtensions = (binder: Binder, name: string, props?: object) => {
const extensions = binder.getExtensions(name, props);
return (
<>
{extensions.map((Component, index) => {
return <Component key={index} {...props} />;
})}
</>
);
};
const renderSingleExtension = (binder: Binder, name: string, props?: object) => {
const Component = binder.getExtension(name, props);
if (!Component) {
return null;
}
return <Component {...props} />;
};
const renderDefault = (children: ReactNode) => {
if (children) {
return <>{children}</>;
}
return null;
};
/**
* ExtensionPoint renders components which are bound to an extension point.
*/
class ExtensionPoint extends React.Component<Props> {
renderAll(name: string, props?: object) {
const extensions = binder.getExtensions(name, props);
return (
<>
{extensions.map((Component, index) => {
return <Component key={index} {...props} />;
})}
</>
);
const ExtensionPoint: FC<Props> = ({ name, renderAll, props, children }) => {
const binder = useBinder();
if (!binder.hasExtension(name, props)) {
return renderDefault(children);
} else if (renderAll) {
return renderAllExtensions(binder, name, props);
}
renderSingle(name: string, props?: object) {
const Component = binder.getExtension(name, props);
if (!Component) {
return null;
}
return <Component {...props} />;
}
renderDefault() {
const { children } = this.props;
if (children) {
return <>{children}</>;
}
return null;
}
render() {
const { name, renderAll, props } = this.props;
if (!binder.hasExtension(name, props)) {
return this.renderDefault();
} else if (renderAll) {
return this.renderAll(name, props);
}
return this.renderSingle(name, props);
}
}
return renderSingleExtension(binder, name, props);
};
export default ExtensionPoint;

2
scm-ui/ui-extensions/src/binder.test.ts
View File

@@ -4,7 +4,7 @@ describe("binder tests", () => {
let binder: Binder;
beforeEach(() => {
binder = new Binder();
binder = new Binder("testing");
});
it("should return an empty array for non existing extension points", () => {

6
scm-ui/ui-extensions/src/binder.ts
View File

@@ -10,11 +10,13 @@ type ExtensionRegistration = {
* The Binder class is mainly exported for testing, plugins should only use the default export.
*/
export class Binder {
name: string;
extensionPoints: {
[key: string]: Array<ExtensionRegistration>;
};
constructor() {
constructor(name: string) {
this.name = name;
this.extensionPoints = {};
}
@@ -73,6 +75,6 @@ export class Binder {
}
// singleton binder
const binder = new Binder();
const binder = new Binder("default");
export default binder;

3
scm-ui/ui-extensions/src/index.ts
View File

@@ -1,2 +1,3 @@
export { default as binder } from "./binder";
export { default as binder, Binder } from "./binder";
export * from "./useBinder";
export { default as ExtensionPoint } from "./ExtensionPoint";

29
scm-ui/ui-extensions/src/useBinder.test.tsx Normal file
View File

@@ -0,0 +1,29 @@
import useBinder, { BinderContext } from "./useBinder";
import { Binder } from "./binder";
import { mount } from "enzyme";
import "@scm-manager/ui-tests/enzyme";
import React from "react";
describe("useBinder tests", () => {
const BinderName = () => {
const binder = useBinder();
return <>{binder.name}</>;
};
it("should return default binder", () => {
const rendered = mount(<BinderName />);
expect(rendered.text()).toBe("default");
});
it("should return binder from context", () => {
const binder = new Binder("from-context");
const app = (
<BinderContext.Provider value={binder}>
<BinderName />
</BinderContext.Provider>
);
const rendered = mount(app);
expect(rendered.text()).toBe("from-context");
});
});

16
scm-ui/ui-extensions/src/useBinder.ts Normal file
View File

@@ -0,0 +1,16 @@
import { createContext, useContext } from "react";
import defaultBinder from "./binder";
/**
* The BinderContext should only be used to override the default binder for testing purposes.
*/
export const BinderContext = createContext(defaultBinder);
/**
* Hook to get the binder from context.
*/
export const useBinder = () => {
return useContext(BinderContext);
};
export default useBinder;

2
scm-ui/ui-types/src/Me.ts
View File

@@ -4,6 +4,6 @@ export type Me = {
name: string;
displayName: string;
mail: string;
groups: [];
groups: string[];
_links: Links;
};