Add style-components macro where needed

We need to import the styled-components macro whenever we use the
css= prop.
This commit is contained in:
Jake McDermott
2020-05-12 12:34:19 -04:00
parent 41fa3e0473
commit 6098ee8f7f
43 changed files with 209 additions and 96 deletions

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { Modal, Title } from '@patternfly/react-core'; import { Modal, Title } from '@patternfly/react-core';
import { import {

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { string, node, number } from 'prop-types'; import { string, node, number } from 'prop-types';
import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core'; import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core';

View File

@@ -10,7 +10,7 @@ describe('<VariablesDetail>', () => {
const wrapper = shallow( const wrapper = shallow(
<VariablesDetail value="---foo: bar" label="Variables" /> <VariablesDetail value="---foo: bar" label="Variables" />
); );
const input = wrapper.find('CodeMirrorInput'); const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput');
expect(input).toHaveLength(1); expect(input).toHaveLength(1);
expect(input.prop('mode')).toEqual('yaml'); expect(input.prop('mode')).toEqual('yaml');
expect(input.prop('value')).toEqual('---foo: bar'); expect(input.prop('value')).toEqual('---foo: bar');
@@ -21,7 +21,7 @@ describe('<VariablesDetail>', () => {
const wrapper = shallow( const wrapper = shallow(
<VariablesDetail value='{"foo": "bar"}' label="Variables" /> <VariablesDetail value='{"foo": "bar"}' label="Variables" />
); );
const input = wrapper.find('CodeMirrorInput'); const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput');
expect(input).toHaveLength(1); expect(input).toHaveLength(1);
expect(input.prop('mode')).toEqual('javascript'); expect(input.prop('mode')).toEqual('javascript');
expect(input.prop('value')).toEqual('{"foo": "bar"}'); expect(input.prop('value')).toEqual('{"foo": "bar"}');
@@ -32,19 +32,21 @@ describe('<VariablesDetail>', () => {
<VariablesDetail value="---foo: bar" label="Variables" /> <VariablesDetail value="---foo: bar" label="Variables" />
); );
wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); wrapper.find('MultiButtonToggle').invoke('onChange')('javascript');
const input = wrapper.find('CodeMirrorInput'); const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput');
expect(input.prop('mode')).toEqual('javascript'); expect(input.prop('mode')).toEqual('javascript');
expect(input.prop('value')).toEqual('{\n "foo": "bar"\n}'); expect(input.prop('value')).toEqual('{\n "foo": "bar"\n}');
wrapper.find('MultiButtonToggle').invoke('onChange')('yaml'); wrapper.find('MultiButtonToggle').invoke('onChange')('yaml');
const input2 = wrapper.find('CodeMirrorInput'); const input2 = wrapper.find('VariablesDetail___StyledCodeMirrorInput');
expect(input2.prop('mode')).toEqual('yaml'); expect(input2.prop('mode')).toEqual('yaml');
expect(input2.prop('value')).toEqual('foo: bar\n'); expect(input2.prop('value')).toEqual('foo: bar\n');
}); });
test('should render label and value= --- when there are no values', () => { test('should render label and value= --- when there are no values', () => {
const wrapper = shallow(<VariablesDetail value="" label="Variables" />); const wrapper = shallow(<VariablesDetail value="" label="Variables" />);
expect(wrapper.find('CodeMirrorInput').length).toBe(1); expect(wrapper.find('VariablesDetail___StyledCodeMirrorInput').length).toBe(
1
);
expect(wrapper.find('div.pf-c-form__label').text()).toBe('Variables'); expect(wrapper.find('div.pf-c-form__label').text()).toBe('Variables');
}); });
@@ -59,14 +61,14 @@ describe('<VariablesDetail>', () => {
value: '---bar: baz', value: '---bar: baz',
}); });
wrapper.update(); wrapper.update();
const input = wrapper.find('CodeMirrorInput'); const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput');
expect(input.prop('mode')).toEqual('javascript'); expect(input.prop('mode')).toEqual('javascript');
expect(input.prop('value')).toEqual('{\n "bar": "baz"\n}'); expect(input.prop('value')).toEqual('{\n "bar": "baz"\n}');
}); });
test('should default yaml value to "---"', () => { test('should default yaml value to "---"', () => {
const wrapper = shallow(<VariablesDetail value="" label="Variables" />); const wrapper = shallow(<VariablesDetail value="" label="Variables" />);
const input = wrapper.find('CodeMirrorInput'); const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput');
expect(input.prop('value')).toEqual('---'); expect(input.prop('value')).toEqual('---');
}); });
@@ -76,7 +78,7 @@ describe('<VariablesDetail>', () => {
wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); wrapper.find('MultiButtonToggle').invoke('onChange')('javascript');
}); });
wrapper.setProps({ value: '' }); wrapper.setProps({ value: '' });
const input = wrapper.find('CodeMirrorInput'); const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput');
expect(input.prop('value')).toEqual('{}'); expect(input.prop('value')).toEqual('{}');
}); });
}); });

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { bool } from 'prop-types'; import { bool } from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { Fragment, useState, useEffect, useCallback } from 'react'; import React, { Fragment, useState, useEffect, useCallback } from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useState, useCallback, useEffect } from 'react'; import React, { useState, useCallback, useEffect } from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { Fragment, useState, useEffect } from 'react'; import React, { Fragment, useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { shape } from 'prop-types'; import { shape } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { func } from 'prop-types'; import { func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -100,11 +100,11 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
class="pf-c-title" class="pf-c-title"
> >
<div <div
class="sc-bdVaJa cjtBrl" class="AlertModal__Header-l9z1bu-0 hQFWHX"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
css="color: var(--pf-global--danger-color--100)" class="AlertModal___StyledExclamationCircleIcon-l9z1bu-1 jOhcwt"
fill="currentColor" fill="currentColor"
height="2em" height="2em"
role="img" role="img"
@@ -159,20 +159,16 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
ariaDescribedById="" ariaDescribedById=""
className="" className=""
header={ header={
<ForwardRef(styled.div)> <ForwardRef(AlertModal__Header)>
<ExclamationCircleIcon <ForwardRef(AlertModal___StyledExclamationCircleIcon)
color="currentColor"
css="color: var(--pf-global--danger-color--100)"
noVerticalAlign={false}
size="lg" size="lg"
title={null}
/> />
<Title <Title
size="2xl" size="2xl"
> >
Remove Team Access Remove Team Access
</Title> </Title>
</ForwardRef(styled.div)> </ForwardRef(AlertModal__Header)>
} }
hideTitle={false} hideTitle={false}
isFooterLeftAligned={true} isFooterLeftAligned={true}
@@ -223,11 +219,11 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
class="pf-c-title" class="pf-c-title"
> >
<div <div
class="sc-bdVaJa cjtBrl" class="AlertModal__Header-l9z1bu-0 hQFWHX"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
css="color: var(--pf-global--danger-color--100)" class="AlertModal___StyledExclamationCircleIcon-l9z1bu-1 jOhcwt"
fill="currentColor" fill="currentColor"
height="2em" height="2em"
role="img" role="img"
@@ -300,20 +296,16 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
ariaDescribedById="" ariaDescribedById=""
className="" className=""
header={ header={
<ForwardRef(styled.div)> <ForwardRef(AlertModal__Header)>
<ExclamationCircleIcon <ForwardRef(AlertModal___StyledExclamationCircleIcon)
color="currentColor"
css="color: var(--pf-global--danger-color--100)"
noVerticalAlign={false}
size="lg" size="lg"
title={null}
/> />
<Title <Title
size="2xl" size="2xl"
> >
Remove Team Access Remove Team Access
</Title> </Title>
</ForwardRef(styled.div)> </ForwardRef(AlertModal__Header)>
} }
hideTitle={false} hideTitle={false}
id="pf-modal-0" id="pf-modal-0"
@@ -440,29 +432,24 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
<div <div
className="pf-c-title" className="pf-c-title"
> >
<styled.div> <AlertModal__Header>
<StyledComponent <StyledComponent
forwardedComponent={ forwardedComponent={
Object { Object {
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "sc-bdVaJa", "componentId": "AlertModal__Header-l9z1bu-0",
"isStatic": false, "isStatic": false,
"lastClassName": "cjtBrl", "lastClassName": "hQFWHX",
"rules": Array [ "rules": Array [
" "display:flex;svg{margin-right:16px;}",
display: flex;
svg {
margin-right: 16px;
}
",
], ],
}, },
"displayName": "styled.div", "displayName": "AlertModal__Header",
"foldedComponentIds": Array [], "foldedComponentIds": Array [],
"render": [Function], "render": [Function],
"styledComponentId": "sc-bdVaJa", "styledComponentId": "AlertModal__Header-l9z1bu-0",
"target": "div", "target": "div",
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -472,36 +459,67 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
forwardedRef={null} forwardedRef={null}
> >
<div <div
className="sc-bdVaJa cjtBrl" className="AlertModal__Header-l9z1bu-0 hQFWHX"
> >
<ExclamationCircleIcon <AlertModal___StyledExclamationCircleIcon
color="currentColor"
css="color: var(--pf-global--danger-color--100)"
noVerticalAlign={false}
size="lg" size="lg"
title={null}
> >
<svg <StyledComponent
aria-hidden={true} forwardedComponent={
aria-labelledby={null}
css="color: var(--pf-global--danger-color--100)"
fill="currentColor"
height="2em"
role="img"
style={
Object { Object {
"verticalAlign": "-0.25em", "$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "AlertModal___StyledExclamationCircleIcon-l9z1bu-1",
"isStatic": false,
"lastClassName": "jOhcwt",
"rules": Array [
"color:var(--pf-global--danger-color--100)",
],
},
"displayName": "AlertModal___StyledExclamationCircleIcon",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "AlertModal___StyledExclamationCircleIcon-l9z1bu-1",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
} }
} }
viewBox="0 0 512 512" forwardedRef={null}
width="2em" size="lg"
> >
<path <ExclamationCircleIcon
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z" className="AlertModal___StyledExclamationCircleIcon-l9z1bu-1 jOhcwt"
transform="" color="currentColor"
/> noVerticalAlign={false}
</svg> size="lg"
</ExclamationCircleIcon> title={null}
>
<svg
aria-hidden={true}
aria-labelledby={null}
className="AlertModal___StyledExclamationCircleIcon-l9z1bu-1 jOhcwt"
fill="currentColor"
height="2em"
role="img"
style={
Object {
"verticalAlign": "-0.25em",
}
}
viewBox="0 0 512 512"
width="2em"
>
<path
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
transform=""
/>
</svg>
</ExclamationCircleIcon>
</StyledComponent>
</AlertModal___StyledExclamationCircleIcon>
<Title <Title
size="2xl" size="2xl"
> >
@@ -513,7 +531,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
</Title> </Title>
</div> </div>
</StyledComponent> </StyledComponent>
</styled.div> </AlertModal__Header>
</div> </div>
<ModalBoxBody <ModalBoxBody
id="pf-modal-0" id="pf-modal-0"

View File

@@ -49,7 +49,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
<div <div
className="pf-c-data-list__item-row" className="pf-c-data-list__item-row"
> >
<Styled(DataListItemCells) <ResourceAccessListItem__DataListItemCells
dataListCells={ dataListCells={
Array [ Array [
<ForwardRef(Styled(PFDataListCell))> <ForwardRef(Styled(PFDataListCell))>
@@ -57,8 +57,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
<Text <Text
component="h6" component="h6"
> >
<ForwardRef <ForwardRef(ResourceAccessListItem___StyledLink)
css="font-weight: bold"
to={ to={
Object { Object {
"pathname": "/users/2/details", "pathname": "/users/2/details",
@@ -66,7 +65,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
} }
> >
jane jane
</ForwardRef> </ForwardRef(ResourceAccessListItem___StyledLink)>
</Text> </Text>
</TextContent> </TextContent>
<ForwardRef(Styled(DetailList)) <ForwardRef(Styled(DetailList))
@@ -117,8 +116,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
<Text <Text
component="h6" component="h6"
> >
<ForwardRef <ForwardRef(ResourceAccessListItem___StyledLink)
css="font-weight: bold"
to={ to={
Object { Object {
"pathname": "/users/2/details", "pathname": "/users/2/details",
@@ -126,7 +124,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
} }
> >
jane jane
</ForwardRef> </ForwardRef(ResourceAccessListItem___StyledLink)>
</Text> </Text>
</TextContent> </TextContent>
<ForwardRef(Styled(DetailList)) <ForwardRef(Styled(DetailList))
@@ -171,19 +169,17 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "sc-bZQynM", "componentId": "ResourceAccessListItem__DataListItemCells-sc-658iqk-0",
"isStatic": false, "isStatic": false,
"lastClassName": "dLjtme", "lastClassName": "jCdAGK",
"rules": Array [ "rules": Array [
" "align-items:start;",
align-items: start;
",
], ],
}, },
"displayName": "Styled(DataListItemCells)", "displayName": "ResourceAccessListItem__DataListItemCells",
"foldedComponentIds": Array [], "foldedComponentIds": Array [],
"render": [Function], "render": [Function],
"styledComponentId": "sc-bZQynM", "styledComponentId": "ResourceAccessListItem__DataListItemCells-sc-658iqk-0",
"target": [Function], "target": [Function],
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -194,7 +190,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
rowid="access-list-item" rowid="access-list-item"
> >
<DataListItemCells <DataListItemCells
className="sc-bZQynM dLjtme" className="ResourceAccessListItem__DataListItemCells-sc-658iqk-0 jCdAGK"
dataListCells={ dataListCells={
Array [ Array [
<ForwardRef(Styled(PFDataListCell))> <ForwardRef(Styled(PFDataListCell))>
@@ -202,8 +198,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
<Text <Text
component="h6" component="h6"
> >
<ForwardRef <ForwardRef(ResourceAccessListItem___StyledLink)
css="font-weight: bold"
to={ to={
Object { Object {
"pathname": "/users/2/details", "pathname": "/users/2/details",
@@ -211,7 +206,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
} }
> >
jane jane
</ForwardRef> </ForwardRef(ResourceAccessListItem___StyledLink)>
</Text> </Text>
</TextContent> </TextContent>
<ForwardRef(Styled(DetailList)) <ForwardRef(Styled(DetailList))
@@ -254,7 +249,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
rowid="access-list-item" rowid="access-list-item"
> >
<div <div
className="pf-c-data-list__item-content sc-bZQynM dLjtme" className="pf-c-data-list__item-content ResourceAccessListItem__DataListItemCells-sc-658iqk-0 jCdAGK"
> >
<DataListCell <DataListCell
key="name" key="name"
@@ -303,28 +298,85 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
className="" className=""
data-pf-content={true} data-pf-content={true}
> >
<Link <ResourceAccessListItem___StyledLink
css="font-weight: bold"
to={ to={
Object { Object {
"pathname": "/users/2/details", "pathname": "/users/2/details",
} }
} }
> >
<LinkAnchor <StyledComponent
css="font-weight: bold" forwardedComponent={
href="/users/2/details" Object {
navigate={[Function]} "$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "ResourceAccessListItem___StyledLink-sc-658iqk-1",
"isStatic": false,
"lastClassName": "ddHgXz",
"rules": Array [
"font-weight:bold",
],
},
"displayName": "ResourceAccessListItem___StyledLink",
"foldedComponentIds": Array [],
"propTypes": Object {
"innerRef": [Function],
"onClick": [Function],
"replace": [Function],
"target": [Function],
"to": [Function],
},
"render": [Function],
"styledComponentId": "ResourceAccessListItem___StyledLink-sc-658iqk-1",
"target": Object {
"$$typeof": Symbol(react.forward_ref),
"displayName": "Link",
"propTypes": Object {
"innerRef": [Function],
"onClick": [Function],
"replace": [Function],
"target": [Function],
"to": [Function],
},
"render": [Function],
},
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
to={
Object {
"pathname": "/users/2/details",
}
}
> >
<a <Link
css="font-weight: bold" className="ResourceAccessListItem___StyledLink-sc-658iqk-1 ddHgXz"
href="/users/2/details" to={
onClick={[Function]} Object {
"pathname": "/users/2/details",
}
}
> >
jane <LinkAnchor
</a> className="ResourceAccessListItem___StyledLink-sc-658iqk-1 ddHgXz"
</LinkAnchor> href="/users/2/details"
</Link> navigate={[Function]}
>
<a
className="ResourceAccessListItem___StyledLink-sc-658iqk-1 ddHgXz"
href="/users/2/details"
onClick={[Function]}
>
jane
</a>
</LinkAnchor>
</Link>
</StyledComponent>
</ResourceAccessListItem___StyledLink>
</h6> </h6>
</Text> </Text>
</div> </div>
@@ -940,7 +992,7 @@ exports[`<ResourceAccessListItem /> initially renders succesfully 1`] = `
</div> </div>
</DataListItemCells> </DataListItemCells>
</StyledComponent> </StyledComponent>
</Styled(DataListItemCells)> </ResourceAccessListItem__DataListItemCells>
</div> </div>
</DataListItemRow> </DataListItemRow>
</li> </li>

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useState } from 'react';
import { Link, useHistory, useLocation } from 'react-router-dom'; import { Link, useHistory, useLocation } from 'react-router-dom';
import { RRule, rrulestr } from 'rrule'; import { RRule, rrulestr } from 'rrule';
@@ -12,7 +13,8 @@ import ContentError from '../../ContentError';
import ContentLoading from '../../ContentLoading'; import ContentLoading from '../../ContentLoading';
import CredentialChip from '../../CredentialChip'; import CredentialChip from '../../CredentialChip';
import { DetailList, Detail, UserDateDetail } from '../../DetailList'; import { DetailList, Detail, UserDateDetail } from '../../DetailList';
import { ScheduleOccurrences, ScheduleToggle } from '..'; import ScheduleOccurrences from '../ScheduleOccurrences';
import ScheduleToggle from '../ScheduleToggle';
import { formatDateString } from '../../../util/dates'; import { formatDateString } from '../../../util/dates';
import useRequest from '../../../util/useRequest'; import useRequest from '../../../util/useRequest';
import { SchedulesAPI } from '../../../api'; import { SchedulesAPI } from '../../../api';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { bool, func } from 'prop-types'; import { bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { shape } from 'prop-types'; import { shape } from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { Fragment, useState, useEffect, useCallback } from 'react'; import React, { Fragment, useState, useEffect, useCallback } from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { useField } from 'formik'; import { useField } from 'formik';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t, Trans } from '@lingui/macro'; import { t, Trans } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useHistory } from 'react-router-dom'; import { Link, useHistory } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useHistory } from 'react-router-dom'; import { Link, useHistory } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useState } from 'react'; import React, { useState } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { func, bool, arrayOf, object } from 'prop-types'; import { func, bool, arrayOf, object } from 'prop-types';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useHistory } from 'react-router-dom'; import { Link, useHistory } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useContext, useEffect, useRef, useState } from 'react';
import * as d3 from 'd3'; import * as d3 from 'd3';
import { WorkflowStateContext } from '../../../contexts/Workflow'; import { WorkflowStateContext } from '../../../contexts/Workflow';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import {

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { Fragment, useState, useCallback } from 'react'; import React, { Fragment, useState, useCallback } from 'react';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import {

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { Fragment, useContext } from 'react'; import React, { Fragment, useContext } from 'react';
import { Button } from '@patternfly/react-core'; import { Button } from '@patternfly/react-core';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useContext, useState } from 'react'; import React, { useContext, useState } from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React from 'react'; import React from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t, Trans } from '@lingui/macro'; import { t, Trans } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useContext, useEffect, useRef, useState } from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';

View File

@@ -1,3 +1,4 @@
import 'styled-components/macro';
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';