External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-13 23:17:32 -02:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #110 from marshmalien/upgrade-patternfly

Browse Source 
Upgrade @patternfly-next to @patternfly/patternfly
This commit is contained in:
Marliana Lara
2019-02-20 09:29:07 -05:00
committed by GitHub
parent e0df011804 83982d5e2e
commit 1599d2c62c
18 changed files with 223 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
__tests__/components/AnsibleSelect.test.jsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { mount } from 'enzyme';
import { I18nProvider } from '@lingui/react';
import AnsibleSelect from '../../src/components/AnsibleSelect';
const label = 'test select';
@@ -7,26 +8,30 @@ const mockData = ['/venv/baz/', '/venv/ansible/'];
describe('<AnsibleSelect />', () => {
test('initially renders succesfully', async () => {
mount(
<AnsibleSelect
value="foo"
name="bar"
onChange={() => { }}
label={label}
data={mockData}
/>
<I18nProvider>
<AnsibleSelect
value="foo"
name="bar"
onChange={() => { }}
label={label}
data={mockData}
/>
</I18nProvider>
);
});
test('calls "onSelectChange" on dropdown select change', () => {
const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange');
const wrapper = mount(
<AnsibleSelect
value="foo"
name="bar"
onChange={() => { }}
label={label}
data={mockData}
/>
<I18nProvider>
<AnsibleSelect
value="foo"
name="bar"
onChange={() => { }}
label={label}
data={mockData}
/>
</I18nProvider>
);
expect(spy).not.toHaveBeenCalled();
wrapper.find('select').simulate('change');
@@ -35,15 +40,17 @@ describe('<AnsibleSelect />', () => {
test('Returns correct select options if defaultSelected props is passed', () => {
const wrapper = mount(
<AnsibleSelect
value="foo"
name="bar"
onChange={() => { }}
label={label}
data={mockData}
defaultSelected={mockData[1]}
/>
<I18nProvider>
<AnsibleSelect
value="foo"
name="bar"
onChange={() => { }}
label={label}
data={mockData}
defaultSelected={mockData[1]}
/>
</I18nProvider>
);
expect(wrapper.find('Select')).toHaveLength(1);
expect(wrapper.find('FormSelect')).toHaveLength(1);
});
});

6
__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx
View File

@@ -172,8 +172,8 @@ describe('<OrganizationAdd />', () => {
</I18nProvider>
</MemoryRouter>
).find('OrganizationAdd').find('AnsibleSelect');
expect(wrapper.find('Select')).toHaveLength(1);
expect(wrapper.find('SelectOption')).toHaveLength(2);
expect(wrapper.find('FormSelect')).toHaveLength(1);
expect(wrapper.find('FormSelectOption')).toHaveLength(2);
});
test('AnsibleSelect component does not render if there are 0 virtual environments', () => {
@@ -189,6 +189,6 @@ describe('<OrganizationAdd />', () => {
</I18nProvider>
</MemoryRouter>
).find('OrganizationAdd').find('AnsibleSelect');
expect(wrapper.find('Select')).toHaveLength(0);
expect(wrapper.find('FormSelect')).toHaveLength(0);
});
});

132
package-lock.json generated
View File

@@ -1305,64 +1305,56 @@
}
}
},
"@patternfly/patternfly-next": {
"version": "1.0.84",
"resolved": "https://registry.npmjs.org/@patternfly/patternfly-next/-/patternfly-next-1.0.84.tgz",
"integrity": "sha512-sIRfo/tk4NSnaRwHIHLUf4XoqzNNa4MMa8ZWivzzSfdZ5pCbgvZtyEUqKnQAEH6zuaCM9S8HyhxcNXnm/xaYaQ=="
"@patternfly/patternfly": {
"version": "1.0.193",
"resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-1.0.193.tgz",
"integrity": "sha512-QYYg2Fkw/Et140E2FvzAKtdyI+qtRkoDBj6X22mmRt67dFRF5y3DEx+SvXUHYt7Usr1ModLtagql2oPjswHyjA=="
},
"@patternfly/react-core": {
"version": "1.49.5",
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.49.5.tgz",
"integrity": "sha512-bb62fkL8nB6F1cUd/szfpLOIAjaa5HBzAoOa4Vc1AjdagwZ6w4MsU7xBPtC0Sp937CpGckRGiVOf0XHWEiSL2g==",
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-2.1.8.tgz",
"integrity": "sha512-3TyUOhJ4BUNWhWJ0YvxOsWf3sMJfmpx6YIroHWaD2hd5xOu3uvPCj8W3REgnIWGPIzYVlVaLrfNSSG7KEEnX1g==",
"requires": {
"@patternfly/react-icons": "^2.10.1",
"@patternfly/react-styles": "^2.3.0",
"@patternfly/react-tokens": "^1.10.0",
"@patternfly/react-icons": "^3.0.1",
"@patternfly/react-styles": "^2.3.3",
"@patternfly/react-tokens": "^2.0.2",
"@tippy.js/react": "^1.1.1",
"emotion": "^9.2.9",
"exenv": "^1.2.2",
"focus-trap-react": "^4.0.1"
"focus-trap-react": "^4.0.1",
"tippy.js": "^3.4.1"
},
"dependencies": {
"@patternfly/react-icons": {
"version": "2.10.1",
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.10.1.tgz",
"integrity": "sha512-d3uWfQQeCgCLel2DVlF1SSlyOI0Z12tT1YjSLDE091E2uCB582DUQQ4HfmuV51nH5aTXg+en35QG7JP5jzYlvA=="
},
"@patternfly/react-tokens": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.10.0.tgz",
"integrity": "sha512-jslQPSRgwbSXAGszA22prGSVye6ri3sRFkaF3BUdWBa8fO6Z2MDFB59x4d6BGK9iW7S+3U/Qkden6myP1CgXdA=="
"@patternfly/react-styles": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-2.3.3.tgz",
"integrity": "sha512-SU1CLe2U5RUZ5F5jNO426MTGriCRV8CM3jnJzdkQ3aXm6QfZ1FWDbHWFQgyur5KAZRlNSUlBuziNQS+DWeju8A==",
"requires": {
"@babel/helper-plugin-utils": "^7.0.0-beta.48",
"camel-case": "^3.0.0",
"css": "^2.2.3",
"cssom": "^0.3.4",
"cssstyle": "^0.3.1",
"emotion": "^9.2.9",
"emotion-server": "^9.2.9",
"fbjs-scripts": "^0.8.3",
"fs-extra": "^6.0.1",
"jsdom": "^11.11.0",
"relative": "^3.0.2",
"resolve-from": "^4.0.0"
}
}
}
},
"@patternfly/react-icons": {
"version": "2.9.1",
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.9.1.tgz",
"integrity": "sha512-CBTpGXvqr91rBpxeb5/l2BimrtRlMkBKnIOTgX7V44MIIq3YE3P6A6CQK0fgIH1HGvCdiNf5sXbQz9xp+pB/3A=="
},
"@patternfly/react-styles": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-2.3.0.tgz",
"integrity": "sha512-yST33QTrePsGjZMs/Q0eAC0CyL5gihL/+bHQscRn/IvpVSxSo+XwFKpEs+vNFFBFLkc1XKKB+cXosaofGAVjcQ==",
"requires": {
"@babel/helper-plugin-utils": "^7.0.0-beta.48",
"camel-case": "^3.0.0",
"css": "^2.2.3",
"cssom": "^0.3.4",
"cssstyle": "^0.3.1",
"emotion": "^9.2.6",
"emotion-server": "^9.2.6",
"fbjs-scripts": "^0.8.3",
"fs-extra": "^6.0.1",
"jsdom": "^11.11.0",
"relative": "^3.0.2",
"resolve-from": "^4.0.0"
}
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.0.1.tgz",
"integrity": "sha512-A/ACY0zCpIvNR8bzR21hKghqFTkFNIUX4pksDoMH8MY2tdCkJVZwkGAVy9jQ98H9DnyMnaNDd4KZuaoyicmlug=="
},
"@patternfly/react-tokens": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.9.0.tgz",
"integrity": "sha512-wxlxeY5B37FkI9W3x4EQyZ9Q8lra3xBYEUg5CFCmWQZTvdH4vAC19l7mE+AQZqHXD4unvltS0ndi753LeHPyAg=="
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.0.2.tgz",
"integrity": "sha512-Jx4XqXtgH4LaBdL5LdUCiXs6UmjRPKEW+zTP3+57Cw1uRnVzu6ieNRJRjdB8ovRDKPOwBDWAoxBDkl0y+Ktz/w=="
},
"@tippy.js/react": {
"version": "1.1.1",
@@ -1655,7 +1647,7 @@
},
"ansi-colors": {
"version": "1.1.0",
"resolved": "http://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
"integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
"requires": {
"ansi-wrap": "^0.1.0"
@@ -2565,12 +2557,12 @@
},
"babel-plugin-syntax-class-properties": {
"version": "6.13.0",
"resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
"integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
},
"babel-plugin-syntax-flow": {
"version": "6.18.0",
"resolved": "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
"integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0="
},
"babel-plugin-syntax-jsx": {
@@ -4281,9 +4273,9 @@
}
},
"csstype": {
"version": "2.5.7",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.7.tgz",
"integrity": "sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw=="
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.2.tgz",
"integrity": "sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow=="
},
"currently-unhandled": {
"version": "0.4.1",
@@ -4709,7 +4701,7 @@
},
"readable-stream": {
"version": "2.3.6",
"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"requires": {
"core-util-is": "~1.0.0",
@@ -5635,12 +5627,13 @@
"integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
},
"fancy-log": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.2.tgz",
"integrity": "sha1-9BEl49hPLn2JpD0G2VjI94vha+E=",
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.3.tgz",
"integrity": "sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==",
"requires": {
"ansi-gray": "^0.1.1",
"color-support": "^1.1.3",
"parse-node-version": "^1.0.0",
"time-stamp": "^1.0.0"
}
},
@@ -5733,7 +5726,7 @@
},
"readable-stream": {
"version": "2.3.6",
"resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"requires": {
"core-util-is": "~1.0.0",
@@ -5759,11 +5752,11 @@
}
},
"through2": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
"integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=",
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
"integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
"requires": {
"readable-stream": "^2.1.5",
"readable-stream": "~2.3.6",
"xtend": "~4.0.1"
}
},
@@ -9261,7 +9254,7 @@
},
"kind-of": {
"version": "1.1.0",
"resolved": "http://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
"integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ="
},
"kleur": {
@@ -10931,6 +10924,11 @@
"json-parse-better-errors": "^1.0.1"
}
},
"parse-node-version": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
"integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA=="
},
"parse5": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
@@ -11121,9 +11119,9 @@
"dev": true
},
"popper.js": {
"version": "1.14.6",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.6.tgz",
"integrity": "sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA=="
"version": "1.14.7",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
"integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ=="
},
"portfinder": {
"version": "1.0.20",
@@ -13793,9 +13791,9 @@
}
},
"stylis": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.3.tgz",
"integrity": "sha512-TxU0aAscJghF9I3V9q601xcK3Uw1JbXvpsBGj/HULqexKOKlOEzzlIpLFRbKkCK990ccuxfXUqmPbIIo7Fq/cQ=="
"version": "3.5.4",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
"integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
},
"stylis-rule-sheet": {
"version": "0.0.10",

9
package.json
View File

@@ -47,11 +47,10 @@
},
"dependencies": {
"@lingui/react": "^2.7.2",
"@patternfly/patternfly-next": "^1.0.84",
"@patternfly/react-core": "^1.49.5",
"@patternfly/react-icons": "^2.9.1",
"@patternfly/react-styles": "^2.3.0",
"@patternfly/react-tokens": "^1.9.0",
"@patternfly/patternfly": "^1.0.189",
"@patternfly/react-core": "^2.1.8",
"@patternfly/react-icons": "^3.0.1",
"@patternfly/react-tokens": "^2.0.2",
"axios": "^0.18.0",
"prop-types": "^15.6.2",
"react": "^16.4.1",

73
src/app.scss
View File

@@ -1,3 +1,8 @@
// https://github.com/patternfly/patternfly-react/issues/1294
#app {
height: 100%;
}
//
// masthead overrides
//
@@ -44,7 +49,6 @@
}
.pf-c-nav__simple-list .pf-c-nav__link {
--pf-c-nav__simple-list-link--PaddingLeft: 24px;
--pf-c-nav__simple-list-link--PaddingBottom: 6px;
--pf-c-nav__simple-list-link--PaddingTop: 6px;
}
@@ -70,16 +74,6 @@
padding-bottom: 10px;
}
//
// toolbar overrides
//
.pf-l-toolbar {
align-self: center;
height: 60px;
}
//
// data list overrides
//
@@ -89,9 +83,6 @@
--pf-global--target-size--MinWidth: 32px;
--pf-global--FontSize--md: 14px;
--pf-c-data-list__item--PaddingTop: 16px;
--pf-c-data-list__item--PaddingBottom: 16px;
.pf-c-badge:not(:last-child), .pf-c-switch:not(:last-child) {
margin-right: 18px;
}
@@ -99,7 +90,9 @@
.pf-c-data-list__item {
--pf-c-data-list__item--PaddingLeft: 20px;
--pf-c-data-list__item--PaddingRight: 0px;
--pf-c-data-list__item--PaddingRight: 20px;
align-items: center;
}
.pf-c-data-list__check {
@@ -116,8 +109,24 @@
margin-right: 20px;
}
.pf-c-data-list__cell a {
margin-right: 8px;
.pf-c-data-list__cell {
--pf-c-data-list__cell--PaddingTop: 16px;
--pf-c-data-list__cell--PaddingBottom: 16px;
--pf-c-data-list__cell-cell--PaddingTop: 16px;
a {
margin-right: 8px;
}
}
//
// switch overrides
//
// https://github.com/patternfly/patternfly-next/issues/915
.pf-c-switch {
.pf-c-switch__label::before {
display: none;
}
}
//
@@ -143,19 +152,20 @@
}
}
//
// data list overrides
//
.pf-c-data-list__item {
--pf-c-data-list__item--PaddingLeft: 20px;
--pf-c-data-list__item--PaddingRight: 20px;
}
//
// pf modal overrides
//
.awx-c-modal.pf-c-modal-box {
margin: 0;
padding: 20px;
width: 550px;
.pf-c-button:not(:last-child) {
margin-right: 20px;
}
}
.pf-c-modal-box__footer {
--pf-c-modal-box__footer--PaddingTop: 20px;
--pf-c-modal-box__footer--PaddingRight: 20px;
@@ -189,6 +199,10 @@
padding: 0;
}
.pf-c-card__body {
--pf-c-card__body--PaddingTop: 24px;
}
//
// pf empty state overrides
//
@@ -205,11 +219,10 @@
.awx-lookup {
min-height: 36px;
}
.awx-c-modal {
width: 550px;
margin: 0;
.pf-c-form-control {
--pf-c-form-control--Height: auto;
}
}
.awx-c-icon--remove {

2
src/components/About.jsx
View File

@@ -9,7 +9,6 @@ import {
TextListItem
} from '@patternfly/react-core';
import heroImg from '@patternfly/patternfly-next/assets/images/pfbg_992.jpg';
import brandImg from '../../images/tower-logo-white.svg';
import logoImg from '../../images/tower-logo-login.svg';
@@ -59,7 +58,6 @@ class About extends React.Component {
brandImageAlt={i18n._(t`Brand Image`)}
logoImageSrc={logoImg}
logoImageAlt={i18n._(t`AboutModal Logo`)}
heroImageSrc={heroImg}
>
<pre>
{ speechBubble }

21
src/components/AnsibleSelect/AnsibleSelect.jsx
View File

@@ -1,9 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';
import { I18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Select,
SelectOption,
FormSelect,
FormSelectOption,
} from '@patternfly/react-core';
class AnsibleSelect extends React.Component {
@@ -21,11 +22,15 @@ class AnsibleSelect extends React.Component {
render () {
const { label, value, data, defaultSelected } = this.props;
return (
<Select value={value} onChange={this.onSelectChange} aria-label="Select Input">
{data.map((datum) => (datum === defaultSelected
? (<SelectOption key="" value="" label={`Use Default ${label}`} />) : (<SelectOption key={datum} value={datum} label={datum} />)))
}
</Select>
<I18n>
{({ i18n }) => (
<FormSelect value={value} onChange={this.onSelectChange} aria-label={i18n._(t`Select Input`)}>
{data.map((datum) => (datum === defaultSelected
? (<FormSelectOption key="" value="" label={i18n._(t`Use Default ${label}`)} />) : (<FormSelectOption key={datum} value={datum} label={datum} />)))
}
</FormSelect>
)}
</I18n>
);
}
}

12
src/components/Background.jsx
View File

@@ -4,17 +4,15 @@ import {
BackgroundImage,
BackgroundImageSrc,
} from '@patternfly/react-core';
import bgFilter from '@patternfly/patternfly/assets/images/background-filter.svg';
const backgroundImageConfig = {
[BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
[BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
[BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
[BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
[BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
[BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
[BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
[BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
[BackgroundImageSrc.filter]: '/assets/images/background-filter.svg',
[BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
[BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
[BackgroundImageSrc.lg]: '/assets/images/pfbg_2000.jpg',
[BackgroundImageSrc.filter]: `${bgFilter}#image_overlay`,
};
export default ({ children }) => (

10
src/components/DataListToolbar/styles.scss
View File

@@ -5,6 +5,7 @@
border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
background-color: var(--awx-toolbar--BackgroundColor);
display: flex;
height: 70px;
padding-top: 5px;
@@ -13,6 +14,10 @@
--pf-global--FontSize--md: 14px;
}
.awx-toolbar .pf-l-level {
flex: 1;
}
.awx-toolbar .pf-c-button.pf-m-plain {
--pf-c-button--m-plain--PaddingLeft: 0px;
--pf-c-button--m-plain--PaddingRight: 0px;
@@ -43,6 +48,7 @@
height: 30px;
input {
height: 30px;
padding: 0 10px;
width: 300px;
}
@@ -60,6 +66,10 @@
padding: 0 10px;
margin: 0px;
.pf-c-dropdown__toggle-text {
width: auto;
}
.pf-c-dropdown__toggle-icon {
margin: 0px;
padding-top: 3px;

24
src/components/NotificationsList/NotificationListItem.jsx
View File

@@ -28,27 +28,23 @@ class NotificationListItem extends React.Component {
return (
<I18n>
{({ i18n }) => (
<li key={itemId} className="pf-c-data-list__item pf-u-flex-row pf-u-align-items-center">
<div className="pf-c-data-list__cell pf-u-flex-row">
<div className="pf-u-display-inline-flex">
<Link
to={{
pathname: detailUrl
}}
>
<b>{name}</b>
</Link>
</div>
<li key={itemId} className="pf-c-data-list__item">
<div className="pf-c-data-list__cell" style={{ display: 'flex' }}>
<Link
to={{
pathname: detailUrl
}}
>
<b>{name}</b>
</Link>
<Badge
style={capText}
className="pf-u-display-inline-flex"
isRead
>
{notificationType}
</Badge>
</div>
<div className="pf-c-data-list__cell" />
<div className="pf-c-data-list__cell pf-u-display-flex pf-u-justify-content-flex-end">
<div className="pf-c-data-list__cell" style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Switch
label={i18n._(t`Successful`)}
isChecked={successTurnedOn}

16
src/components/PageHeaderToolbar.jsx
View File

@@ -1,6 +1,5 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { t } from '@lingui/macro';
import { I18n } from '@lingui/react';
@@ -55,6 +54,10 @@ class PageHeaderToolbar extends Component {
const { isHelpOpen, isUserOpen } = this.state;
const { isAboutDisabled, onAboutClick, onLogoutClick } = this.props;
const dropdownIconColor = {
color: 'white'
};
return (
<I18n>
{({ i18n }) => (
@@ -68,6 +71,7 @@ class PageHeaderToolbar extends Component {
toggle={(
<DropdownToggle
onToggle={this.onHelpToggle}
style={dropdownIconColor}
>
<QuestionCircleIcon />
</DropdownToggle>
@@ -99,15 +103,17 @@ class PageHeaderToolbar extends Component {
toggle={(
<DropdownToggle
onToggle={this.onUserToggle}
style={dropdownIconColor}
>
<UserIcon />
</DropdownToggle>
)}
dropdownItems={[
<DropdownItem key="user">
<Link to="/home">
{i18n._(t`User Details`)}
</Link>
<DropdownItem
key="user"
href="#/home"
>
{i18n._(t`User Details`)}
</DropdownItem>,
<DropdownItem
key="logout"

3
src/components/SelectedList/SelectedList.jsx
View File

@@ -12,6 +12,7 @@ const selectedRowStyling = {
};
const selectedLabelStyling = {
alignSelf: 'center',
fontSize: '14px',
fontWeight: 'bold'
};
@@ -37,7 +38,7 @@ class SelectedList extends Component {
return (
<div className="awx-selectedList">
<div className="pf-l-split" style={selectedRowStyling}>
<div className="pf-l-split__item pf-u-align-items-center" style={selectedLabelStyling}>
<div className="pf-l-split__item" style={selectedLabelStyling}>
{label}
</div>
<div className="pf-l-split__item">

30
src/components/Tabs/Tabs.jsx
View File

@@ -9,28 +9,26 @@ import './tabs.scss';
const Tabs = ({ children, labelText, closeButton }) => (
<div
aria-label={labelText}
className="pf-c-tabs pf-u-flex-direction-row pf-u-justify-content-space-between"
className="pf-c-tabs"
>
<ul className="pf-c-tabs__list">
{children}
</ul>
{closeButton
&& (
<div className="pf-u-align-self-center">
<Tooltip
message={closeButton.text}
position="top"
>
<Link to={closeButton.link}>
<Button
variant="plain"
aria-label={closeButton.text}
>
<TimesIcon />
</Button>
</Link>
</Tooltip>
</div>
<Tooltip
message={closeButton.text}
position="top"
>
<Link to={closeButton.link}>
<Button
variant="plain"
aria-label={closeButton.text}
>
<TimesIcon />
</Button>
</Link>
</Tooltip>
)
}
</div>

6
src/components/Tabs/tabs.scss
View File

@@ -10,7 +10,10 @@
--pf-global--link--Color: #484848;
--pf-global--link--Color--hover: #484848;
--pf-global--link--TextDecoration--hover: none;
--pf-global--FontWeight--normal: 700;
align-items: center;
flex-direction: row;
justify-content: space-between;
&:before {
border-bottom: 1px solid var(--pf-c-tabs__item--BorderColor);
@@ -27,6 +30,7 @@
--pf-c-tabs__button--PaddingLeft: 20px;
--pf-c-tabs__button--PaddingRight: 20px;
display: block;
font-weight: 700;
&:after {
content: '';

3
src/index.jsx
View File

@@ -13,8 +13,7 @@ import {
} from '@lingui/react';
import { t } from '@lingui/macro';
import '@patternfly/react-core/dist/styles/base.css';
import '@patternfly/patternfly-next/patternfly.css';
import '@patternfly/patternfly/patternfly.css';
import './app.scss';
import './components/Pagination/styles.scss';
import './components/DataListToolbar/styles.scss';

4
src/pages/Login.jsx
View File

@@ -77,9 +77,11 @@ class AWXLogin extends Component {
<LoginForm
usernameLabel={i18n._(t`Username`)}
passwordLabel={i18n._(t`Password`)}
passwordHelperTextInvalid={i18n._(t`Invalid username or password. Please try again.`)}
showHelperText={!isInputValid}
helperText={i18n._(t`Invalid username or password. Please try again.`)}
usernameValue={username}
passwordValue={password}
isValidUsername={isInputValid}
isValidPassword={isInputValid}
onChangeUsername={this.onChangeUsername}
onChangePassword={this.onChangePassword}

4
src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
View File

@@ -94,7 +94,7 @@ class OrganizationDetail extends Component {
return (
<I18n>
{({ i18n }) => (
<CardBody className="pf-u-pt-lg">
<CardBody>
<div className="pf-l-grid pf-m-gutter pf-m-all-12-col-on-md pf-m-all-6-col-on-lg pf-m-all-4-col-on-xl">
<Detail
label={i18n._(t`Name`)}
@@ -135,7 +135,7 @@ class OrganizationDetail extends Component {
value={modified}
/>
</div>
<div className="pf-u-display-flex pf-u-flex-direction-row-reverse pf-u-ml-auto pf-u-mt-md">
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginTop: '20px' }}>
<Link to={`/organizations/${match.params.id}/edit`}>
<Button><Trans>Edit</Trans></Button>
</Link>

4
webpack.config.js
View File

@@ -31,7 +31,7 @@ module.exports = {
outputPath: 'assets/fonts/',
publicPath: 'assets/fonts',
includePaths: [
'node_modules/@patternfly/patternfly-next/assets/fonts',
'node_modules/@patternfly/patternfly/assets/fonts',
]
}
}]
@@ -45,7 +45,7 @@ module.exports = {
outputPath: 'assets/images/',
publicPath: 'assets/images',
includePaths: [
'node_modules/@patternfly/patternfly-next/assets/images',
'node_modules/@patternfly/patternfly/assets/images',
]
}
}]