External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-23 16:47:45 -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 React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import { I18nProvider } from '@lingui/react';
import AnsibleSelect from '../../src/components/AnsibleSelect'; import AnsibleSelect from '../../src/components/AnsibleSelect';
const label = 'test select'; const label = 'test select';
@@ -7,26 +8,30 @@ const mockData = ['/venv/baz/', '/venv/ansible/'];
describe('<AnsibleSelect />', () => { describe('<AnsibleSelect />', () => {
test('initially renders succesfully', async () => { test('initially renders succesfully', async () => {
mount( mount(
<AnsibleSelect <I18nProvider>
value="foo" <AnsibleSelect
name="bar" value="foo"
onChange={() => { }} name="bar"
label={label} onChange={() => { }}
data={mockData} label={label}
/> data={mockData}
/>
</I18nProvider>
); );
}); });
test('calls "onSelectChange" on dropdown select change', () => { test('calls "onSelectChange" on dropdown select change', () => {
const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange'); const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange');
const wrapper = mount( const wrapper = mount(
<AnsibleSelect <I18nProvider>
value="foo" <AnsibleSelect
name="bar" value="foo"
onChange={() => { }} name="bar"
label={label} onChange={() => { }}
data={mockData} label={label}
/> data={mockData}
/>
</I18nProvider>
); );
expect(spy).not.toHaveBeenCalled(); expect(spy).not.toHaveBeenCalled();
wrapper.find('select').simulate('change'); wrapper.find('select').simulate('change');
@@ -35,15 +40,17 @@ describe('<AnsibleSelect />', () => {
test('Returns correct select options if defaultSelected props is passed', () => { test('Returns correct select options if defaultSelected props is passed', () => {
const wrapper = mount( const wrapper = mount(
<AnsibleSelect <I18nProvider>
value="foo" <AnsibleSelect
name="bar" value="foo"
onChange={() => { }} name="bar"
label={label} onChange={() => { }}
data={mockData} label={label}
defaultSelected={mockData[1]} 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> </I18nProvider>
</MemoryRouter> </MemoryRouter>
).find('OrganizationAdd').find('AnsibleSelect'); ).find('OrganizationAdd').find('AnsibleSelect');
expect(wrapper.find('Select')).toHaveLength(1); expect(wrapper.find('FormSelect')).toHaveLength(1);
expect(wrapper.find('SelectOption')).toHaveLength(2); expect(wrapper.find('FormSelectOption')).toHaveLength(2);
}); });
test('AnsibleSelect component does not render if there are 0 virtual environments', () => { test('AnsibleSelect component does not render if there are 0 virtual environments', () => {
@@ -189,6 +189,6 @@ describe('<OrganizationAdd />', () => {
</I18nProvider> </I18nProvider>
</MemoryRouter> </MemoryRouter>
).find('OrganizationAdd').find('AnsibleSelect'); ).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": { "@patternfly/patternfly": {
"version": "1.0.84", "version": "1.0.193",
"resolved": "https://registry.npmjs.org/@patternfly/patternfly-next/-/patternfly-next-1.0.84.tgz", "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-1.0.193.tgz",
"integrity": "sha512-sIRfo/tk4NSnaRwHIHLUf4XoqzNNa4MMa8ZWivzzSfdZ5pCbgvZtyEUqKnQAEH6zuaCM9S8HyhxcNXnm/xaYaQ==" "integrity": "sha512-QYYg2Fkw/Et140E2FvzAKtdyI+qtRkoDBj6X22mmRt67dFRF5y3DEx+SvXUHYt7Usr1ModLtagql2oPjswHyjA=="
}, },
"@patternfly/react-core": { "@patternfly/react-core": {
"version": "1.49.5", "version": "2.1.8",
"resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.49.5.tgz", "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-2.1.8.tgz",
"integrity": "sha512-bb62fkL8nB6F1cUd/szfpLOIAjaa5HBzAoOa4Vc1AjdagwZ6w4MsU7xBPtC0Sp937CpGckRGiVOf0XHWEiSL2g==", "integrity": "sha512-3TyUOhJ4BUNWhWJ0YvxOsWf3sMJfmpx6YIroHWaD2hd5xOu3uvPCj8W3REgnIWGPIzYVlVaLrfNSSG7KEEnX1g==",
"requires": { "requires": {
"@patternfly/react-icons": "^2.10.1", "@patternfly/react-icons": "^3.0.1",
"@patternfly/react-styles": "^2.3.0", "@patternfly/react-styles": "^2.3.3",
"@patternfly/react-tokens": "^1.10.0", "@patternfly/react-tokens": "^2.0.2",
"@tippy.js/react": "^1.1.1", "@tippy.js/react": "^1.1.1",
"emotion": "^9.2.9",
"exenv": "^1.2.2", "exenv": "^1.2.2",
"focus-trap-react": "^4.0.1" "focus-trap-react": "^4.0.1",
"tippy.js": "^3.4.1"
}, },
"dependencies": { "dependencies": {
"@patternfly/react-icons": { "@patternfly/react-styles": {
"version": "2.10.1", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.10.1.tgz", "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-2.3.3.tgz",
"integrity": "sha512-d3uWfQQeCgCLel2DVlF1SSlyOI0Z12tT1YjSLDE091E2uCB582DUQQ4HfmuV51nH5aTXg+en35QG7JP5jzYlvA==" "integrity": "sha512-SU1CLe2U5RUZ5F5jNO426MTGriCRV8CM3jnJzdkQ3aXm6QfZ1FWDbHWFQgyur5KAZRlNSUlBuziNQS+DWeju8A==",
}, "requires": {
"@patternfly/react-tokens": { "@babel/helper-plugin-utils": "^7.0.0-beta.48",
"version": "1.10.0", "camel-case": "^3.0.0",
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.10.0.tgz", "css": "^2.2.3",
"integrity": "sha512-jslQPSRgwbSXAGszA22prGSVye6ri3sRFkaF3BUdWBa8fO6Z2MDFB59x4d6BGK9iW7S+3U/Qkden6myP1CgXdA==" "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": { "@patternfly/react-icons": {
"version": "2.9.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.9.1.tgz", "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-3.0.1.tgz",
"integrity": "sha512-CBTpGXvqr91rBpxeb5/l2BimrtRlMkBKnIOTgX7V44MIIq3YE3P6A6CQK0fgIH1HGvCdiNf5sXbQz9xp+pB/3A==" "integrity": "sha512-A/ACY0zCpIvNR8bzR21hKghqFTkFNIUX4pksDoMH8MY2tdCkJVZwkGAVy9jQ98H9DnyMnaNDd4KZuaoyicmlug=="
},
"@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"
}
}, },
"@patternfly/react-tokens": { "@patternfly/react-tokens": {
"version": "1.9.0", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.9.0.tgz", "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-2.0.2.tgz",
"integrity": "sha512-wxlxeY5B37FkI9W3x4EQyZ9Q8lra3xBYEUg5CFCmWQZTvdH4vAC19l7mE+AQZqHXD4unvltS0ndi753LeHPyAg==" "integrity": "sha512-Jx4XqXtgH4LaBdL5LdUCiXs6UmjRPKEW+zTP3+57Cw1uRnVzu6ieNRJRjdB8ovRDKPOwBDWAoxBDkl0y+Ktz/w=="
}, },
"@tippy.js/react": { "@tippy.js/react": {
"version": "1.1.1", "version": "1.1.1",
@@ -1655,7 +1647,7 @@
}, },
"ansi-colors": { "ansi-colors": {
"version": "1.1.0", "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==", "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
"requires": { "requires": {
"ansi-wrap": "^0.1.0" "ansi-wrap": "^0.1.0"
@@ -2565,12 +2557,12 @@
}, },
"babel-plugin-syntax-class-properties": { "babel-plugin-syntax-class-properties": {
"version": "6.13.0", "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=" "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94="
}, },
"babel-plugin-syntax-flow": { "babel-plugin-syntax-flow": {
"version": "6.18.0", "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=" "integrity": "sha1-TDqyCiryaqIM0lmVw5jE63AxDI0="
}, },
"babel-plugin-syntax-jsx": { "babel-plugin-syntax-jsx": {
@@ -4281,9 +4273,9 @@
} }
}, },
"csstype": { "csstype": {
"version": "2.5.7", "version": "2.6.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.7.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.2.tgz",
"integrity": "sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw==" "integrity": "sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow=="
}, },
"currently-unhandled": { "currently-unhandled": {
"version": "0.4.1", "version": "0.4.1",
@@ -4709,7 +4701,7 @@
}, },
"readable-stream": { "readable-stream": {
"version": "2.3.6", "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==", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"requires": { "requires": {
"core-util-is": "~1.0.0", "core-util-is": "~1.0.0",
@@ -5635,12 +5627,13 @@
"integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=" "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
}, },
"fancy-log": { "fancy-log": {
"version": "1.3.2", "version": "1.3.3",
"resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.2.tgz", "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.3.tgz",
"integrity": "sha1-9BEl49hPLn2JpD0G2VjI94vha+E=", "integrity": "sha512-k9oEhlyc0FrVh25qYuSELjr8oxsCoc4/LEZfg2iJJrfEk/tZL9bCoJE47gqAvI2m/AUjluCS4+3I0eTx8n3AEw==",
"requires": { "requires": {
"ansi-gray": "^0.1.1", "ansi-gray": "^0.1.1",
"color-support": "^1.1.3", "color-support": "^1.1.3",
"parse-node-version": "^1.0.0",
"time-stamp": "^1.0.0" "time-stamp": "^1.0.0"
} }
}, },
@@ -5733,7 +5726,7 @@
}, },
"readable-stream": { "readable-stream": {
"version": "2.3.6", "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==", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"requires": { "requires": {
"core-util-is": "~1.0.0", "core-util-is": "~1.0.0",
@@ -5759,11 +5752,11 @@
} }
}, },
"through2": { "through2": {
"version": "2.0.3", "version": "2.0.5",
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
"integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=", "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
"requires": { "requires": {
"readable-stream": "^2.1.5", "readable-stream": "~2.3.6",
"xtend": "~4.0.1" "xtend": "~4.0.1"
} }
}, },
@@ -9261,7 +9254,7 @@
}, },
"kind-of": { "kind-of": {
"version": "1.1.0", "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=" "integrity": "sha1-FAo9LUGjbS78+pN3tiwk+ElaXEQ="
}, },
"kleur": { "kleur": {
@@ -10931,6 +10924,11 @@
"json-parse-better-errors": "^1.0.1" "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": { "parse5": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz", "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
@@ -11121,9 +11119,9 @@
"dev": true "dev": true
}, },
"popper.js": { "popper.js": {
"version": "1.14.6", "version": "1.14.7",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.6.tgz", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz",
"integrity": "sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA==" "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ=="
}, },
"portfinder": { "portfinder": {
"version": "1.0.20", "version": "1.0.20",
@@ -13793,9 +13791,9 @@
} }
}, },
"stylis": { "stylis": {
"version": "3.5.3", "version": "3.5.4",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.3.tgz", "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
"integrity": "sha512-TxU0aAscJghF9I3V9q601xcK3Uw1JbXvpsBGj/HULqexKOKlOEzzlIpLFRbKkCK990ccuxfXUqmPbIIo7Fq/cQ==" "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
}, },
"stylis-rule-sheet": { "stylis-rule-sheet": {
"version": "0.0.10", "version": "0.0.10",

9
package.json
View File

@@ -47,11 +47,10 @@
}, },
"dependencies": { "dependencies": {
"@lingui/react": "^2.7.2", "@lingui/react": "^2.7.2",
"@patternfly/patternfly-next": "^1.0.84", "@patternfly/patternfly": "^1.0.189",
"@patternfly/react-core": "^1.49.5", "@patternfly/react-core": "^2.1.8",
"@patternfly/react-icons": "^2.9.1", "@patternfly/react-icons": "^3.0.1",
"@patternfly/react-styles": "^2.3.0", "@patternfly/react-tokens": "^2.0.2",
"@patternfly/react-tokens": "^1.9.0",
"axios": "^0.18.0", "axios": "^0.18.0",
"prop-types": "^15.6.2", "prop-types": "^15.6.2",
"react": "^16.4.1", "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 // masthead overrides
// //
@@ -44,7 +49,6 @@
} }
.pf-c-nav__simple-list .pf-c-nav__link { .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--PaddingBottom: 6px;
--pf-c-nav__simple-list-link--PaddingTop: 6px; --pf-c-nav__simple-list-link--PaddingTop: 6px;
} }
@@ -70,16 +74,6 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
//
// toolbar overrides
//
.pf-l-toolbar {
align-self: center;
height: 60px;
}
// //
// data list overrides // data list overrides
// //
@@ -89,9 +83,6 @@
--pf-global--target-size--MinWidth: 32px; --pf-global--target-size--MinWidth: 32px;
--pf-global--FontSize--md: 14px; --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) { .pf-c-badge:not(:last-child), .pf-c-switch:not(:last-child) {
margin-right: 18px; margin-right: 18px;
} }
@@ -99,7 +90,9 @@
.pf-c-data-list__item { .pf-c-data-list__item {
--pf-c-data-list__item--PaddingLeft: 20px; --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 { .pf-c-data-list__check {
@@ -116,8 +109,24 @@
margin-right: 20px; margin-right: 20px;
} }
.pf-c-data-list__cell a { .pf-c-data-list__cell {
margin-right: 8px; --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 // 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 {
--pf-c-modal-box__footer--PaddingTop: 20px; --pf-c-modal-box__footer--PaddingTop: 20px;
--pf-c-modal-box__footer--PaddingRight: 20px; --pf-c-modal-box__footer--PaddingRight: 20px;
@@ -189,6 +199,10 @@
padding: 0; padding: 0;
} }
.pf-c-card__body {
--pf-c-card__body--PaddingTop: 24px;
}
// //
// pf empty state overrides // pf empty state overrides
// //
@@ -205,11 +219,10 @@
.awx-lookup { .awx-lookup {
min-height: 36px; min-height: 36px;
}
.awx-c-modal { .pf-c-form-control {
width: 550px; --pf-c-form-control--Height: auto;
margin: 0; }
} }
.awx-c-icon--remove { .awx-c-icon--remove {

2
src/components/About.jsx
View File

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

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

@@ -1,9 +1,10 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { I18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { import {
Select, FormSelect,
SelectOption, FormSelectOption,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
class AnsibleSelect extends React.Component { class AnsibleSelect extends React.Component {
@@ -21,11 +22,15 @@ class AnsibleSelect extends React.Component {
render () { render () {
const { label, value, data, defaultSelected } = this.props; const { label, value, data, defaultSelected } = this.props;
return ( return (
<Select value={value} onChange={this.onSelectChange} aria-label="Select Input"> <I18n>
{data.map((datum) => (datum === defaultSelected {({ i18n }) => (
? (<SelectOption key="" value="" label={`Use Default ${label}`} />) : (<SelectOption key={datum} value={datum} label={datum} />))) <FormSelect value={value} onChange={this.onSelectChange} aria-label={i18n._(t`Select Input`)}>
} {data.map((datum) => (datum === defaultSelected
</Select> ? (<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, BackgroundImage,
BackgroundImageSrc, BackgroundImageSrc,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import bgFilter from '@patternfly/patternfly/assets/images/background-filter.svg';
const backgroundImageConfig = { 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.xs]: '/assets/images/pfbg_576.jpg',
[BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.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 }) => ( 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); border-bottom: var(--awx-toolbar--BorderWidth) solid var(--awx-toolbar--BorderColor);
background-color: var(--awx-toolbar--BackgroundColor); background-color: var(--awx-toolbar--BackgroundColor);
display: flex;
height: 70px; height: 70px;
padding-top: 5px; padding-top: 5px;
@@ -13,6 +14,10 @@
--pf-global--FontSize--md: 14px; --pf-global--FontSize--md: 14px;
} }
.awx-toolbar .pf-l-level {
flex: 1;
}
.awx-toolbar .pf-c-button.pf-m-plain { .awx-toolbar .pf-c-button.pf-m-plain {
--pf-c-button--m-plain--PaddingLeft: 0px; --pf-c-button--m-plain--PaddingLeft: 0px;
--pf-c-button--m-plain--PaddingRight: 0px; --pf-c-button--m-plain--PaddingRight: 0px;
@@ -43,6 +48,7 @@
height: 30px; height: 30px;
input { input {
height: 30px;
padding: 0 10px; padding: 0 10px;
width: 300px; width: 300px;
} }
@@ -60,6 +66,10 @@
padding: 0 10px; padding: 0 10px;
margin: 0px; margin: 0px;
.pf-c-dropdown__toggle-text {
width: auto;
}
.pf-c-dropdown__toggle-icon { .pf-c-dropdown__toggle-icon {
margin: 0px; margin: 0px;
padding-top: 3px; padding-top: 3px;

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

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

16
src/components/PageHeaderToolbar.jsx
View File

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

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

@@ -12,6 +12,7 @@ const selectedRowStyling = {
}; };
const selectedLabelStyling = { const selectedLabelStyling = {
alignSelf: 'center',
fontSize: '14px', fontSize: '14px',
fontWeight: 'bold' fontWeight: 'bold'
}; };
@@ -37,7 +38,7 @@ class SelectedList extends Component {
return ( return (
<div className="awx-selectedList"> <div className="awx-selectedList">
<div className="pf-l-split" style={selectedRowStyling}> <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} {label}
</div> </div>
<div className="pf-l-split__item"> <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 }) => ( const Tabs = ({ children, labelText, closeButton }) => (
<div <div
aria-label={labelText} 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"> <ul className="pf-c-tabs__list">
{children} {children}
</ul> </ul>
{closeButton {closeButton
&& ( && (
<div className="pf-u-align-self-center"> <Tooltip
<Tooltip message={closeButton.text}
message={closeButton.text} position="top"
position="top" >
> <Link to={closeButton.link}>
<Link to={closeButton.link}> <Button
<Button variant="plain"
variant="plain" aria-label={closeButton.text}
aria-label={closeButton.text} >
> <TimesIcon />
<TimesIcon /> </Button>
</Button> </Link>
</Link> </Tooltip>
</Tooltip>
</div>
) )
} }
</div> </div>

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

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

3
src/index.jsx
View File

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

4
src/pages/Login.jsx
View File

@@ -77,9 +77,11 @@ class AWXLogin extends Component {
<LoginForm <LoginForm
usernameLabel={i18n._(t`Username`)} usernameLabel={i18n._(t`Username`)}
passwordLabel={i18n._(t`Password`)} 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} usernameValue={username}
passwordValue={password} passwordValue={password}
isValidUsername={isInputValid}
isValidPassword={isInputValid} isValidPassword={isInputValid}
onChangeUsername={this.onChangeUsername} onChangeUsername={this.onChangeUsername}
onChangePassword={this.onChangePassword} onChangePassword={this.onChangePassword}

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

@@ -94,7 +94,7 @@ class OrganizationDetail extends Component {
return ( return (
<I18n> <I18n>
{({ 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"> <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 <Detail
label={i18n._(t`Name`)} label={i18n._(t`Name`)}
@@ -135,7 +135,7 @@ class OrganizationDetail extends Component {
value={modified} value={modified}
/> />
</div> </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`}> <Link to={`/organizations/${match.params.id}/edit`}>
<Button><Trans>Edit</Trans></Button> <Button><Trans>Edit</Trans></Button>
</Link> </Link>

4
webpack.config.js
View File

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