From f5f67627dbcc9128d7c75a5d08a556151d718c08 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Sun, 17 Feb 2019 21:43:25 -0500 Subject: [PATCH 01/12] Update @patternfly/* dependencies * Remove @patternfly/react-styles dependency --- package-lock.json | 132 +++++++++++++++++++++++----------------------- package.json | 9 ++-- 2 files changed, 69 insertions(+), 72 deletions(-) diff --git a/package-lock.json b/package-lock.json index 517dacec0f..5502f818c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index a95bcb1f79..cf7116f1f7 100644 --- a/package.json +++ b/package.json @@ -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", From 50ebf6517852cdfff537fd0031525f06781aa9d8 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Sun, 17 Feb 2019 21:51:02 -0500 Subject: [PATCH 02/12] Update @patternfly/patternfly-next references to @patternfly/patternfly --- src/index.jsx | 2 +- webpack.config.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.jsx b/src/index.jsx index c8958c7fe5..a58dc75477 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -14,7 +14,7 @@ import { 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'; diff --git a/webpack.config.js b/webpack.config.js index b8f754d81b..0d2e65ff9f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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', ] } }] From c4065a54bd29033e5b5e08ef8961273b5044647b Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Sun, 17 Feb 2019 21:57:00 -0500 Subject: [PATCH 03/12] Rename Select components to FormSelect for @patternfly/react-core 2.1.8 --- __tests__/components/AnsibleSelect.test.jsx | 2 +- .../Organizations/screens/OrganizationAdd.test.jsx | 6 +++--- src/components/AnsibleSelect/AnsibleSelect.jsx | 10 +++++----- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/__tests__/components/AnsibleSelect.test.jsx b/__tests__/components/AnsibleSelect.test.jsx index c80207cc9d..d4d933162a 100644 --- a/__tests__/components/AnsibleSelect.test.jsx +++ b/__tests__/components/AnsibleSelect.test.jsx @@ -44,6 +44,6 @@ describe('', () => { defaultSelected={mockData[1]} /> ); - expect(wrapper.find('Select')).toHaveLength(1); + expect(wrapper.find('FormSelect')).toHaveLength(1); }); }); diff --git a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx index c9ea5414b4..1ce8ae0a6e 100644 --- a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx +++ b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx @@ -172,8 +172,8 @@ describe('', () => { ).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('', () => { ).find('OrganizationAdd').find('AnsibleSelect'); - expect(wrapper.find('Select')).toHaveLength(0); + expect(wrapper.find('FormSelect')).toHaveLength(0); }); }); diff --git a/src/components/AnsibleSelect/AnsibleSelect.jsx b/src/components/AnsibleSelect/AnsibleSelect.jsx index 807bd9b73f..2363f090b0 100644 --- a/src/components/AnsibleSelect/AnsibleSelect.jsx +++ b/src/components/AnsibleSelect/AnsibleSelect.jsx @@ -2,8 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { - Select, - SelectOption, + FormSelect, + FormSelectOption, } from '@patternfly/react-core'; class AnsibleSelect extends React.Component { @@ -21,11 +21,11 @@ class AnsibleSelect extends React.Component { render () { const { label, value, data, defaultSelected } = this.props; return ( - + ); } } From 58f273347c9759f17e42b048366f1458e8f45a89 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Sun, 17 Feb 2019 22:20:52 -0500 Subject: [PATCH 04/12] Remove heroImgSrc props for @patternfly/react-core 2.1.8 --- src/components/About.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/About.jsx b/src/components/About.jsx index a0f0750e85..cc0dedd50f 100644 --- a/src/components/About.jsx +++ b/src/components/About.jsx @@ -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'; @@ -53,13 +52,12 @@ class About extends React.Component {
               { speechBubble }

From 68225d191a24e7ae366d9efdb69437d5982bf42e Mon Sep 17 00:00:00 2001
From: Marliana Lara 
Date: Sun, 17 Feb 2019 22:24:38 -0500
Subject: [PATCH 05/12] Remove old BackgroundImageSrc tokens for
 @patternfly/react-core 2.1.8

---
 src/components/Background.jsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/Background.jsx b/src/components/Background.jsx
index b1dce984be..1e5057f792 100644
--- a/src/components/Background.jsx
+++ b/src/components/Background.jsx
@@ -6,15 +6,12 @@ import {
 } from '@patternfly/react-core';
 
 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]: '/assets/images/background-filter.svg#image_overlay',
 };
 
 export default ({ children }) => (

From 09107aef1f94079cbe2eb0ee6b89e7ffbb4fade6 Mon Sep 17 00:00:00 2001
From: Marliana Lara 
Date: Sun, 17 Feb 2019 22:34:14 -0500
Subject: [PATCH 06/12] Amend LoginForm component to use updated helperText
 props for @patternfly/react-core 2.1.8

---
 src/pages/Login.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index f16801b59f..4759f285c7 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -77,9 +77,11 @@ class AWXLogin extends Component {
             
Date: Sun, 17 Feb 2019 22:58:08 -0500
Subject: [PATCH 07/12] Refactor styles and remove patternfly utility classes

---
 src/app.scss                                  | 63 +++++++++++--------
 src/components/DataListToolbar/styles.scss    | 10 +++
 src/components/Lookup/Lookup.jsx              |  1 -
 .../NotificationListItem.jsx                  | 24 +++----
 src/components/PageHeaderToolbar.jsx          | 16 +++--
 src/components/SelectedList/SelectedList.jsx  |  3 +-
 src/components/Tabs/Tabs.jsx                  | 30 +++++----
 src/components/Tabs/tabs.scss                 |  6 +-
 .../Organization/OrganizationDetail.jsx       |  4 +-
 9 files changed, 90 insertions(+), 67 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 393c1ac3f6..48e43d0421 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -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
 //
@@ -99,7 +93,7 @@
 
 .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;
 }
 
 .pf-c-data-list__check {
@@ -116,8 +110,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 +153,15 @@
   }
 }
 
-//
-// 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-c-modal-box {
+  --pf-c-modal-box--Width: 550px;
+  --pf-c-modal-box--MaxWidth: 550px;
+}
+
 .pf-c-modal-box__footer {
   --pf-c-modal-box__footer--PaddingTop: 20px;
   --pf-c-modal-box__footer--PaddingRight: 20px;
@@ -189,6 +195,10 @@
   padding: 0;
 }
 
+.pf-c-card__body {
+  --pf-c-card__body--PaddingTop: 24px;
+}
+
 //
 // pf empty state overrides
 //
@@ -205,11 +215,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 {
diff --git a/src/components/DataListToolbar/styles.scss b/src/components/DataListToolbar/styles.scss
index 535d6aacaf..23ec65dba8 100644
--- a/src/components/DataListToolbar/styles.scss
+++ b/src/components/DataListToolbar/styles.scss
@@ -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;
diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx
index 0dbfc59813..4ccc673d7e 100644
--- a/src/components/Lookup/Lookup.jsx
+++ b/src/components/Lookup/Lookup.jsx
@@ -136,7 +136,6 @@ class Lookup extends React.Component {
             
             
{this.wrapTags(value)}
{({ i18n }) => ( -
  • -
    -
    - - {name} - -
    +
  • +
    + + {name} + {notificationType}
    -
    -
    +
    {({ i18n }) => ( @@ -68,6 +71,7 @@ class PageHeaderToolbar extends Component { toggle={( @@ -99,15 +103,17 @@ class PageHeaderToolbar extends Component { toggle={( )} dropdownItems={[ - - - {i18n._(t`User Details`)} - + + {i18n._(t`User Details`)} ,
    -
    +
    {label}
    diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx index 590d171cf8..a305c7d8e3 100644 --- a/src/components/Tabs/Tabs.jsx +++ b/src/components/Tabs/Tabs.jsx @@ -9,28 +9,26 @@ import './tabs.scss'; const Tabs = ({ children, labelText, closeButton }) => (
      {children}
    {closeButton && ( -
    - - - - - -
    + + + + + ) }
    diff --git a/src/components/Tabs/tabs.scss b/src/components/Tabs/tabs.scss index c8e9c5c96f..651be6acba 100644 --- a/src/components/Tabs/tabs.scss +++ b/src/components/Tabs/tabs.scss @@ -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: ''; diff --git a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx index 9d40a0f0a7..765634403d 100644 --- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx +++ b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx @@ -94,7 +94,7 @@ class OrganizationDetail extends Component { return ( {({ i18n }) => ( - +
    -
    +
    From 7567a6b36ac06faefa5a398260038b82dc421d8c Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Mon, 18 Feb 2019 14:29:05 -0500 Subject: [PATCH 08/12] Fix Org Detail Action button margin --- .../Organizations/screens/Organization/OrganizationDetail.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx index 765634403d..ca8bfc78cd 100644 --- a/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx +++ b/src/pages/Organizations/screens/Organization/OrganizationDetail.jsx @@ -135,7 +135,7 @@ class OrganizationDetail extends Component { value={modified} />
    -
    +
    From 9229c8e724eb00e7492d66590a1c0407dff7b4af Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 19 Feb 2019 14:24:36 -0500 Subject: [PATCH 09/12] Add translations to AnsibleSelect --- src/components/About.jsx | 2 +- src/components/AnsibleSelect/AnsibleSelect.jsx | 17 +++++++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/About.jsx b/src/components/About.jsx index cc0dedd50f..9d8b8abb7c 100644 --- a/src/components/About.jsx +++ b/src/components/About.jsx @@ -52,7 +52,7 @@ class About extends React.Component { - {data.map((datum) => (datum === defaultSelected - ? () : ())) - } - + + {({ i18n }) => ( + + {data.map((datum) => (datum === defaultSelected + ? () : ())) + } + + )} + ); } } From 740a9c1e614f8f1ed7ef247320030ccfc29cfd3a Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 19 Feb 2019 15:59:11 -0500 Subject: [PATCH 10/12] Remove pf base css import and tweak styles --- src/app.scss | 12 ++++++------ src/components/Background.jsx | 3 ++- src/components/Lookup/Lookup.jsx | 1 + src/index.jsx | 1 - 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/app.scss b/src/app.scss index 48e43d0421..af46ba5246 100644 --- a/src/app.scss +++ b/src/app.scss @@ -83,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; } @@ -94,6 +91,8 @@ .pf-c-data-list__item { --pf-c-data-list__item--PaddingLeft: 20px; --pf-c-data-list__item--PaddingRight: 20px; + + align-items: center; } .pf-c-data-list__check { @@ -157,9 +156,10 @@ // pf modal overrides // -.pf-c-modal-box { - --pf-c-modal-box--Width: 550px; - --pf-c-modal-box--MaxWidth: 550px; +.awx-c-modal.pf-c-modal-box { + margin: 0; + padding: 20px; + width: 550px; } .pf-c-modal-box__footer { diff --git a/src/components/Background.jsx b/src/components/Background.jsx index 1e5057f792..91a4fd733a 100644 --- a/src/components/Background.jsx +++ b/src/components/Background.jsx @@ -4,6 +4,7 @@ import { BackgroundImage, BackgroundImageSrc, } from '@patternfly/react-core'; +import bgFilter from '@patternfly/patternfly/assets/images/background-filter.svg'; const backgroundImageConfig = { [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg', @@ -11,7 +12,7 @@ const backgroundImageConfig = { [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg', [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg', [BackgroundImageSrc.lg]: '/assets/images/pfbg_2000.jpg', - [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay', + [BackgroundImageSrc.filter]: `${bgFilter}#image_overlay`, }; export default ({ children }) => ( diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx index 4ccc673d7e..0dbfc59813 100644 --- a/src/components/Lookup/Lookup.jsx +++ b/src/components/Lookup/Lookup.jsx @@ -136,6 +136,7 @@ class Lookup extends React.Component {
    {this.wrapTags(value)}
    Date: Tue, 19 Feb 2019 16:14:28 -0500 Subject: [PATCH 11/12] Fix AnsibleSelect tests --- __tests__/components/AnsibleSelect.test.jsx | 51 ++++++++++++--------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/__tests__/components/AnsibleSelect.test.jsx b/__tests__/components/AnsibleSelect.test.jsx index d4d933162a..d23d039d51 100644 --- a/__tests__/components/AnsibleSelect.test.jsx +++ b/__tests__/components/AnsibleSelect.test.jsx @@ -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('', () => { test('initially renders succesfully', async () => { mount( - { }} - label={label} - data={mockData} - /> + + { }} + label={label} + data={mockData} + /> + ); }); test('calls "onSelectChange" on dropdown select change', () => { const spy = jest.spyOn(AnsibleSelect.prototype, 'onSelectChange'); const wrapper = mount( - { }} - label={label} - data={mockData} - /> + + { }} + label={label} + data={mockData} + /> + ); expect(spy).not.toHaveBeenCalled(); wrapper.find('select').simulate('change'); @@ -35,14 +40,16 @@ describe('', () => { test('Returns correct select options if defaultSelected props is passed', () => { const wrapper = mount( - { }} - label={label} - data={mockData} - defaultSelected={mockData[1]} - /> + + { }} + label={label} + data={mockData} + defaultSelected={mockData[1]} + /> + ); expect(wrapper.find('FormSelect')).toHaveLength(1); }); From 83982d5e2ef58ec6186d2a6c6060d3c9106a92eb Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Tue, 19 Feb 2019 16:34:27 -0500 Subject: [PATCH 12/12] Fix Modal footer button styles --- src/app.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/app.scss b/src/app.scss index af46ba5246..09ce2c5863 100644 --- a/src/app.scss +++ b/src/app.scss @@ -160,6 +160,10 @@ margin: 0; padding: 20px; width: 550px; + + .pf-c-button:not(:last-child) { + margin-right: 20px; + } } .pf-c-modal-box__footer {