orc-shared 5.10.1-dev.8 → 5.10.1-dev.9

package/src/components/Navigation/Tab.test.js

@@ -1,404 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { act } from "react-dom/test-utils";
-import { Provider } from "react-redux";
-import { Router, MemoryRouter } from "react-router-dom";
-import { IntlProvider } from "react-intl";
-import sinon from "sinon";
-import { createMemoryHistory } from "history";
-import { Ignore } from "unexpected-reaction";
-import { getClassSelector, getStyledClassSelector } from "../../utils/testUtils";
-import Tab, { PageTab, ModuleTab, TabLink, ModuleIcon, TabText, CloseIcon } from "./Tab";
-import { Placeholder } from "../Text";
-
-describe("Tab", () => {
-	let history, close;
-	beforeEach(() => {
-		history = createMemoryHistory();
-		close = sinon.spy().named("close");
-	});
-
-	it("renders a module tab with icon and label", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Router history={history}>
-					<IntlProvider locale="en">
-						<Tab module icon="test" label="A module" href="/Foo/modu" />
-					</IntlProvider>
-				</Router>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{
-				type: "click",
-				target: getClassSelector(
-					<MemoryRouter>
-						<TabLink to="/" />
-					</MemoryRouter>,
-				),
-			},
-			"to satisfy",
-			<Router history={history}>
-				<IntlProvider locale="en">
-					<ModuleTab>
-						<TabLink to="/Foo/modu">
-							<ModuleIcon id="test" />
-							<TabText>A module</TabText>
-						</TabLink>
-					</ModuleTab>
-				</IntlProvider>
-			</Router>,
-		));
-
-	it("renders an active module tab", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Router history={history}>
-					<IntlProvider locale="en">
-						<Tab module active icon="test" label={{ id: "test.module", defaultMessage: "A module" }} href="/Foo/modu" />
-					</IntlProvider>
-				</Router>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Router history={history}>
-				<IntlProvider locale="en">
-					<ModuleTab active>
-						<TabLink to="/Foo/modu">
-							<ModuleIcon id="test" />
-							<TabText>A module</TabText>
-						</TabLink>
-					</ModuleTab>
-				</IntlProvider>
-			</Router>,
-		));
-
-	it("renders an active module tab with a very long label", () => {
-		// Needs to be fully rendered to work
-		const root = document.createElement("div");
-		document.body.append(root);
-		const history = createMemoryHistory();
-		sinon.spy(history, "push");
-		ReactDOM.render(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Router history={history}>
-					<IntlProvider locale="en">
-						<Tab
-							module
-							mustTruncate={true}
-							active
-							icon="test"
-							label={{ id: "test.module", defaultMessage: "A very long label" }}
-							href="/Foo/modu"
-						/>
-					</IntlProvider>
-				</Router>
-			</Provider>,
-			root,
-		);
-
-		const tab = root.querySelector("*"); // Get the first child
-		const tabLinkElement = tab.querySelector(getStyledClassSelector(TabLink));
-		const tabTextElement = tabLinkElement.querySelector(getStyledClassSelector(TabText));
-
-		act(() => {
-			// XXX: This is a nasty hack of jsdom, and may break unexpectedly
-			Object.defineProperty(tabTextElement, "offsetWidth", {
-				value: 10,
-				writable: true,
-			});
-			Object.defineProperty(tabTextElement, "scrollWidth", {
-				value: 20,
-				writable: true,
-			});
-			window.dispatchEvent(new Event("resize"));
-		});
-
-		try {
-			act(() => {});
-			expect(
-				tab,
-				"to satisfy",
-				<Router history={history}>
-					<IntlProvider locale="en">
-						<ModuleTab active>
-							<TabLink to="/Foo/modu" mustTruncate={true}>
-								<ModuleIcon id="test" />
-								<TabText title="A very long label">A very long label</TabText>
-							</TabLink>
-						</ModuleTab>
-					</IntlProvider>
-				</Router>,
-			);
-		} finally {
-			ReactDOM.unmountComponentAtNode(root);
-			document.body.removeChild(root);
-		}
-	});
-
-	it("renders with a message error", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Router history={history}>
-					<IntlProvider locale="en">
-						<Tab
-							module
-							active
-							icon="test"
-							label={{ id: "test.module", defaultMessage: "A module {missingValue}" }}
-							href="/Foo/modu"
-						/>
-					</IntlProvider>
-				</Router>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Router history={history}>
-				<IntlProvider locale="en">
-					<ModuleTab active>
-						<TabLink to="/Foo/modu">
-							<ModuleIcon id="test" />
-							<TabText>
-								<Placeholder />
-							</TabText>
-						</TabLink>
-					</ModuleTab>
-				</IntlProvider>
-			</Router>,
-		));
-
-	it("close a tab when scope is not supported", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Router history={history}>
-					<IntlProvider locale="en">
-						<Tab
-							label={{ id: "test.page", defaultMessage: "A page" }}
-							href="/Foo/modu"
-							close={close}
-							scopeNotSupported
-						/>
-					</IntlProvider>
-				</Router>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Router history={history}>
-				<IntlProvider locale="en">
-					<PageTab hide>
-						<TabLink to="/Foo/modu">
-							<TabText>A page</TabText>
-							<CloseIcon onClick={close} />
-						</TabLink>
-					</PageTab>
-				</IntlProvider>
-			</Router>,
-		).then(() => expect(close, "was called")));
-
-	it("renders a tab outside the current scope", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Router history={history}>
-					<IntlProvider locale="en">
-						<Tab
-							module
-							outsideScope
-							icon="test"
-							label={{ id: "test.module", defaultMessage: "A module" }}
-							href="/Foo/modu"
-						/>
-					</IntlProvider>
-				</Router>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{
-				type: "click",
-				target: getClassSelector(
-					<MemoryRouter>
-						<TabLink to="/" />
-					</MemoryRouter>,
-				),
-			},
-			"to satisfy",
-			<Router history={history}>
-				<IntlProvider locale="en">
-					<ModuleTab outsideScope>
-						<TabLink outsideScope to="/Foo/modu">
-							<ModuleIcon id="test" />
-							<TabText>A module</TabText>
-						</TabLink>
-					</ModuleTab>
-				</IntlProvider>
-			</Router>,
-		));
-
-	it("renders a page tab with label and close button", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Router history={history}>
-					<IntlProvider locale="en">
-						<Tab label={{ id: "test.page", defaultMessage: "A page" }} href="/Foo/modu/page" close={close} />
-					</IntlProvider>
-				</Router>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Router history={history}>
-				<IntlProvider locale="en">
-					<PageTab>
-						<TabLink to="/Foo/modu/page">
-							<TabText>A page</TabText>
-							<CloseIcon onClick={close} />
-						</TabLink>
-					</PageTab>
-				</IntlProvider>
-			</Router>,
-		));
-
-	it("renders an active page tab", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Router history={history}>
-					<IntlProvider locale="en">
-						<Tab active href="/Foo/modu/page" />
-					</IntlProvider>
-				</Router>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{
-				type: "click",
-				target: getClassSelector(<CloseIcon />),
-			},
-			"to satisfy",
-			<Router history={history}>
-				<IntlProvider locale="en">
-					<PageTab active>
-						<TabLink to="/Foo/modu/page">
-							<TabText>
-								<Ignore />
-							</TabText>
-							<CloseIcon onClick={expect.it("to be a function")} />
-						</TabLink>
-					</PageTab>
-				</IntlProvider>
-			</Router>,
-		));
-
-	it("curries close handler with tab and mapped href", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Router history={history}>
-					<IntlProvider locale="en">
-						<Tab label="A page" href="/Foo/modu/page/sub" mappedFrom="/Foo/modu/page" close={close} />
-					</IntlProvider>
-				</Router>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{
-				type: "click",
-				target: getClassSelector(<CloseIcon />),
-			},
-		).then(() => expect(close, "was called")));
-});
-
-describe("TabText", () => {
-	let history;
-	beforeEach(() => {
-		history = createMemoryHistory();
-	});
-
-	it("sets css for TabLink without attributes", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Router history={history}>
-					<TabLink to="/" />
-				</Router>
-			</Provider>,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("not to contain", "cursor: not-allowed;").and("not to contain", "max-width: 220px;"),
-		));
-
-	it("sets css for TabLink with attributes", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Router history={history}>
-					<TabLink to="/" outsideScope={true} mustTruncate={true} />
-				</Router>
-			</Provider>,
-			"when mounted",
-			"to have style rules satisfying",
-			"to contain",
-			"cursor: not-allowed;",
-			"max-width: 220px;",
-		));
-});

package/src/components/Placeholder.js

@@ -1,61 +0,0 @@
-import React from "react";
-import pt from "prop-types";
-import styled, { css, keyframes } from "styled-components";
-import Text, { ptLabel } from "./Text";
-import Icon from "./Icon";
-import { ifFlag } from "../utils";
-
-const rotate = keyframes`
-to { transform: rotate(1turn); }
-`;
-
-export const PlaceholderBox = styled.div`
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	margin: auto;
-	${ifFlag("warn", "color: #ed2e0b; width: 33%; max-width:540px; text-align:center;", "color: #ababab;")}
-`;
-
-export const PlaceholderIcon = styled(Icon)`
-	font-size: 140px;
-
-	${ifFlag(
-		"animate",
-		css`
-			animation: ${rotate} 4s linear infinite;
-		`,
-	)};
-`;
-
-export const PlaceholderTitle = styled.div`
-	margin-top: 5px;
-	font-size: 2em;
-`;
-export const PlaceholderSubtitle = styled.div`
-	font-size: 1.3em;
-`;
-
-const Placeholder = ({ icon, title, subtitle, animate, warn, ...props }) => (
-	<PlaceholderBox warn={warn} {...props}>
-		{icon ? <PlaceholderIcon id={icon} animate={animate} /> : null}
-		{title ? (
-			<PlaceholderTitle>
-				<Text message={title} />
-			</PlaceholderTitle>
-		) : null}
-		{subtitle ? (
-			<PlaceholderSubtitle>
-				<Text message={subtitle} />
-			</PlaceholderSubtitle>
-		) : null}
-	</PlaceholderBox>
-);
-Placeholder.propTypes = {
-	icon: pt.string,
-	title: ptLabel,
-	subtitle: ptLabel,
-	animate: pt.bool,
-	warn: pt.bool,
-};
-export default Placeholder;

package/src/components/Placeholder.test.js

@@ -1,106 +0,0 @@
-import React from "react";
-import { Provider } from "react-redux";
-import { IntlProvider } from "react-intl";
-import { spyOnConsole } from "../utils/testUtils";
-import Placeholder, { PlaceholderBox, PlaceholderIcon, PlaceholderTitle, PlaceholderSubtitle } from "./Placeholder";
-
-describe("Placeholder", () => {
-	spyOnConsole();
-	it("renders a placeholder with icon, title, and subtitle", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<Placeholder icon="testIcon" title="A title" subtitle="A subtitle" otherProp={true} />
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<PlaceholderBox otherProp={true}>
-				<PlaceholderIcon id="testIcon" />
-				<PlaceholderTitle>A title</PlaceholderTitle>
-				<PlaceholderSubtitle>A subtitle</PlaceholderSubtitle>
-			</PlaceholderBox>,
-		).then(() => expect(console.error, "was not called")));
-
-	it("renders an empty placeholder", () =>
-		expect(<Placeholder />, "when mounted", "to satisfy", <PlaceholderBox />).then(() =>
-			expect(console.error, "was not called"),
-		));
-
-	it("renders an animated icon", () =>
-		expect(
-			<Placeholder icon="testIcon" animate />,
-			"when mounted",
-			"to satisfy",
-			<PlaceholderBox>
-				<PlaceholderIcon id="testIcon" animate />
-			</PlaceholderBox>,
-		).then(() => expect(console.error, "was not called")));
-
-	it("translates title and subtitle if given message descriptors", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<IntlProvider
-					locale="en"
-					messages={{
-						"test.title": "The title",
-						"test.subtitle": "The subtitle",
-					}}
-				>
-					<Placeholder
-						title={{ id: "test.title", defaultMessage: "A default title" }}
-						subtitle={{
-							id: "test.subtitle",
-							defaultMessage: "A default subtitle",
-						}}
-					/>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<PlaceholderBox>
-				<PlaceholderTitle>The title</PlaceholderTitle>
-				<PlaceholderSubtitle>The subtitle</PlaceholderSubtitle>
-			</PlaceholderBox>,
-		).then(() => expect(console.error, "was not called")));
-
-	it("renders a warning placeholder", () =>
-		expect(
-			<Placeholder icon="testIcon" warn />,
-			"when mounted",
-			"to satisfy",
-			<PlaceholderBox warn>
-				<PlaceholderIcon id="testIcon" />
-			</PlaceholderBox>,
-		).then(() => expect(console.error, "was not called")));
-});
-
-describe("PlaceholderIcon", () => {
-	it("renders with animation", () =>
-		expect(
-			<PlaceholderIcon id="spinner" animate />,
-			"when mounted",
-			"to have style rules satisfying",
-			"to contain",
-			"animation: ",
-		));
-
-	it("renders without animation", () =>
-		expect(
-			<PlaceholderIcon id="spinner" />,
-			"when mounted",
-			"to have style rules satisfying",
-			"not to contain",
-			"animation: ",
-		));
-});

package/src/components/Scope/Selector.js

@@ -1,70 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { getThemeProp } from "../../utils";
-import Input from "../Input";
-import Treeview from "../Treeview";
-import ScopeNode from "./ScopeNode";
-import Sidepanel from "../Sidepanel";
-import withClickOutside from "../../hocs/withClickOutside";
-import { useIntl } from "react-intl";
-import sharedMessages from "./../../sharedMessages";
-
-export const Wrapper = withClickOutside(styled.div`
-	height: 100%;
-	width: 100%;
-	user-select: none;
-	display: flex;
-	flex-direction: column;
-`);
-
-export const InputBox = styled.div`
-	border-bottom: 1px solid #666;
-`;
-
-export const SearchInput = styled(Input)`
-	background-color: transparent;
-	border-color: ${getThemeProp(["colors", "border"], "#999999")};
-	color: ${getThemeProp(["colors", "textMedium"], "#999999")};
-	width: calc(100% - 40px);
-	margin: 20px;
-	font-size: 14px;
-`;
-
-export const SelectorPanel = styled(Sidepanel)`
-	top: 90px;
-	background-color: ${getThemeProp(["colors", "bgDark"], "#333333")};
-	color: #fff;
-	z-index: 1000;
-`;
-
-export const Selector = ({ name, show, reset, getScope, currentScope, defaultNodeState, filter, updateFilter }) => {
-	const { formatMessage } = useIntl();
-	return (
-		<SelectorPanel in={show} width="27vw" timeout={300}>
-			<Wrapper onClickOutside={reset}>
-				<InputBox>
-					<SearchInput
-						placeholder={formatMessage(sharedMessages.scopeFilterPlaceholder)}
-						value={filter}
-						onChange={updateFilter}
-					/>
-				</InputBox>
-				<Treeview
-					{...{
-						name,
-						Content: ScopeNode,
-						rootId: "Global",
-						getNode: getScope,
-						selectedNodeId: (currentScope && currentScope.id) || null,
-						openAll: !!filter,
-						closeSelector: reset,
-						dark: true,
-						defaultNodeState,
-					}}
-				/>
-			</Wrapper>
-		</SelectorPanel>
-	);
-};
-
-export default Selector;