diff --git a/README.md b/README.md index e27905a06..2055157e9 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,20 @@ [![Build Status](https://travis-ci.org/kubevirt/web-ui-components.svg?branch=master)](https://travis-ci.org/kubevirt/web-ui-components) [![Coverage Status](https://coveralls.io/repos/github/kubevirt/web-ui-components/badge.svg)](https://coveralls.io/github/kubevirt/web-ui-components) +[![npm version](https://img.shields.io/npm/v/kubevirt-web-ui-components.svg?style=flat)](https://npmjs.org/package/kubevirt-web-ui-components) +[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) -# web-ui-components -Set of reusable components identified during [kubevirt/web-ui](https://github.com/kubevirt/web-ui) development. +# KubeVirt UI components + +Set of reusable React components identified during [kubevirt/web-ui](https://github.com/kubevirt/web-ui) development. + +## Playground + +Latest `master` version is deployed at +[kubevirt.io/web-ui-components](https://kubevirt.io/web-ui-components/) ([build info](https://kubevirt.io/web-ui-components/build-info.txt)). + +## Documentation + +- [Setting up development environment](docs/DevEnvSetup.md) +- [Developer guideline](docs/DevGuide.md) +- [Building & publishing](docs/BuildAndPublish.md) +- [Travis CI](docs/Travis.md) diff --git a/config/eslint.browser.js b/config/eslint.browser.js index 046007491..2acfb0160 100644 --- a/config/eslint.browser.js +++ b/config/eslint.browser.js @@ -52,5 +52,12 @@ module.exports = { ignoreClassFields: true, }, ], + 'import/order': [ + 'error', + { + 'newlines-between': 'always-and-inside-groups', + groups: [['builtin', 'external'], ['internal', 'parent', 'sibling', 'index']], + }, + ], }, }; diff --git a/config/jest.config.js b/config/jest.config.js index f82e6fb77..88c328e21 100644 --- a/config/jest.config.js +++ b/config/jest.config.js @@ -42,12 +42,12 @@ module.exports = { // files for which to collect coverage information collectCoverageFrom: [ 'src/**/*.js', - '!src/**/fixtures/**/*.js', '!src/**/index.js', '!src/**/*.mock.js', + '!src/**/fixtures/**/*.js', '!src/cosmos/*', '!src/jest/*', - '!tools/', + 'tools/validations/*.js', ], // coverage output settings diff --git a/config/stylelint.config.js b/config/stylelint.config.js index 580eaa714..aee134b38 100644 --- a/config/stylelint.config.js +++ b/config/stylelint.config.js @@ -1,6 +1,39 @@ // https://stylelint.io/user-guide/configuration/ +// This project uses the BEM (Block Element Modifier) convention for CSS classes: +// http://getbem.com/naming/ +// +// Note that the "kubevirt" prefix is enforced to avoid potential conflicts with +// the consuming application. +// +// For example, a "FancyForm" component could use the following class names: +// - kubevirt-fancy-form +// - kubevirt-fancy-form__submit-button +// - kubevirt-fancy-form__submit-button--disabled + +const fragment = '[a-z-]+'; +const prefix = 'kubevirt-'; + module.exports = { extends: 'stylelint-config-standard', - plugins: ['stylelint-scss'], + plugins: ['stylelint-scss', 'stylelint-selector-bem-pattern'], + rules: { + 'plugin/selector-bem-pattern': { + implicitComponents: 'sass/components/**/*.scss', + componentName: new RegExp(`^${fragment}$`), + componentSelectors: { + // validate CSS selector sequences that occur before combinators, + // for example: ".foo .bar > .baz" => validate ".foo" + initial: componentName => { + const word = `${fragment}(?:--${fragment})*`; + const element = `(?:__${word})?`; + const modifier = `(?:--${word})?`; + return new RegExp(`^\\.${prefix}${componentName}${element}${modifier}$`); + }, + // validate CSS selector sequences that occur after combinators, + // for example: ".foo .bar > .baz" => validate ".bar" and ".baz" + combined: () => new RegExp(`^\\.${fragment}(?:\\.${fragment})*$`), + }, + }, + }, }; diff --git a/docs/BuildAndPublish.md b/docs/BuildAndPublish.md new file mode 100644 index 000000000..67f2e3c2e --- /dev/null +++ b/docs/BuildAndPublish.md @@ -0,0 +1,7 @@ +# Building & publishing + +To build the project, run `yarn build`. This will regenerate the `dist` directory containing +project's distributable assets. + +To publish the project to [npm registry](https://www.npmjs.com) and make it available for use +in consuming applications, run `yarn publish`. diff --git a/docs/DevEnvSetup.md b/docs/DevEnvSetup.md new file mode 100644 index 000000000..7c914fa6e --- /dev/null +++ b/docs/DevEnvSetup.md @@ -0,0 +1,48 @@ +# Setting up development environment + +## Prerequisites + +Install the latest [Node.js](https://nodejs.org) Long Term Support (LTS) version. +An easy way to do that is through [Node Version Manager](https://github.com/creationix/nvm), +which allows you to install and switch between multiple Node.js versions: + +```sh +nvm install 'lts/*' # install the latest LTS version +nvm alias default 'lts/*' # default version to use for new shells +nvm use default # switch to the default version +node -v # print the current Node.js version +``` + +Install [Yarn](https://yarnpkg.com) package manager for Node.js (latest stable version). +If you'd like to install Yarn manually, download `yarn-.tar.gz` tarball from their +[releases](https://github.com/yarnpkg/yarn/releases), extract it and add `$YARN_HOME/bin` +directory to your `PATH`. + +## Project setup + +Install or update project's dependencies with Yarn: + +```sh +yarn install +``` + +### Cosmos + +Start [Cosmos](https://github.com/react-cosmos/react-cosmos) server used for testing React +components an in isolated environment which simulates the consuming application: + +```sh +yarn cosmos +``` + +Cosmos will watch the `src` directory for changes and rebuild its playground UI accordingly. + +### Jest + +Start [Jest](https://jestjs.io) in watch mode for executing tests: + +```sh +yarn test:watch +``` + +Jest will watch all files ending with `.test.js` and rerun the corresponding tests. diff --git a/docs/DevGuide.md b/docs/DevGuide.md new file mode 100644 index 000000000..042e5d9d8 --- /dev/null +++ b/docs/DevGuide.md @@ -0,0 +1,122 @@ +# Developer guideline + +## Component file structure + +``` +src/components/ +└── / + ├── index.js + ├── .js + ├── .js + ├── fixtures/ + │ ├── .fixture.js + │ └── .fixture.js + └── tests/ + ├── .test.js + └── .test.js +``` + +Every component group should have an `index.js` file exporting specific components which +are meant to be shipped as part of the project's npm package. + +Component sub-groups can be used to represent logical hierarchies, for example: + +``` +src/components/ +└── Dialog/ + ├── index.js + └── FooDialog/ + ├── FooComponent.js + ├── fixtures/ + │ └── FooComponent.fixture.js + └── tests/ + └── FooComponent.test.js +``` + +For every specific component, there should be a corresponding test and a Cosmos fixture. + +## Stylesheet file structure + +``` +sass/ +├── components/ +│ └── +│ ├── .scss +│ └── .scss +└── patternfly-tweaks/ +``` + +Styles are grouped based on React component groups, e.g. any `Form` component related styles +should be placed under `sass/components/Form` directory. Styles in the `patternfly-tweaks` +directory should be treated as temporary until being backported to the corresponding PF-React +npm package. + +This project uses the [BEM (Block Element Modifier)](http://getbem.com/naming/) convention +for CSS classes. Refer to [stylelint configuration](../config/stylelint.config.js) for details +on project-specific BEM format. + +For each React component group, there may be multiple logical BEM-style selectors. Taking +`src/components/Form/FormFactory` as an example, this component's render output includes +PF-React's `FormGroup` with CSS class `kubevirt-form-group` added to it. In other words, +different logical parts of the given component may use different CSS classes. + +## Cosmos + +Use the [Cosmos playground](https://github.com/react-cosmos/react-cosmos) to test and +experiment with React components. Each component is rendered in an `iframe` along with +dependant styling, allowing the component to be tested as a standalone, reusable unit. + +Remember to add [fixtures](https://github.com/react-cosmos/react-cosmos#fixtures) to ensure +that components are properly exposed to Cosmos. Keep in mind that Cosmos is effectively the +visual component interface between developers and designers: + +- it allows developers to test KubeVirt related UI bits +- it allows designers to review the current implementation +- it shields both groups from having to work with the consuming application + +Think of each fixture as a distinct visual test case for the given component, with `props` +(and possibly other contextual information) used to exemplify the tested scenario. This is +similar to testing a regular function from different angles, including known edge cases. + +## Jest + +Jest is used to run all tests. To detect test failures early, start Jest in watch mode and +keep it open as you develop code. + +At the very least, every React component should have an accompanying +[snapshot test](https://jestjs.io/docs/en/snapshot-testing) to guard against regressions +in its render output. + +Avoid big `it` blocks. Prefer small, focused test cases which are easy to read and refactor. + +## Validations + +This project uses a simple validation mechanism driven by `tools/runValidations.js` script. +New validations can be added to `tools/validations` directory as CommonJS modules exporting +a function, for example: + +```js +module.exports = () => { + return true; // validation success +}; +``` + +## How to + +### Lint, validate and test the project in one go? + +```sh +yarn test +``` + +### Run specific tests? + +```sh +yarn jest -t 'TestNameRegexp' +``` + +### Update snapshots for specific tests? + +```sh +yarn jest -t 'TestNameRegexp' -u +``` diff --git a/docs/Travis.md b/docs/Travis.md new file mode 100644 index 000000000..d86383dcd --- /dev/null +++ b/docs/Travis.md @@ -0,0 +1,9 @@ +# Travis CI + +This project hooks into the [Travis job lifecycle](https://docs.travis-ci.com/user/job-lifecycle) +through following scripts: + +- `before_script`: runs `tools/travis/beforeScript.js` +- `after_success`: runs `tools/travis/afterSuccess.js` + +Refer to [Travis configuration](../.travis.yml) for details. diff --git a/package.json b/package.json index 4e21ff0cd..7164c209b 100644 --- a/package.json +++ b/package.json @@ -20,12 +20,13 @@ "prevalidate": "yarn lint", "validate": "node tools/runValidations.js", "pretest": "yarn validate && shx rm -rf coverage", - "test": "jest --config config/jest.config.js", + "test": "yarn jest", "test:watch": "yarn test --watch", "prebuild": "yarn test --ci && shx rm -rf dist", "build": "yarn build:js && yarn build:sass", "build:js": "babel src --config-file ./config/babel.config.js --out-dir dist/js --only 'src/**/*.js' --ignore 'src/jest,src/cosmos,**/tests/**,**/fixtures/**'", "build:sass": "shx cp -r sass dist", + "jest": "jest --config config/jest.config.js", "cosmos": "cosmos --config config/cosmos.config.js", "cosmos:export": "shx rm -rf cosmos && NODE_ENV=production cosmos-export --config config/cosmos.config.js", "coveralls": "shx cat coverage/lcov.info | coveralls" @@ -38,7 +39,8 @@ "react-router-dom": "4.x" }, "dependencies": { - "@patternfly/react-console": "1.10.5", + "@patternfly/react-console": "1.x", + "classnames": "2.x", "js-yaml": "3.x", "lodash": "4.x", "react-dnd": "2.6.x", @@ -96,6 +98,7 @@ "stylelint": "9.x", "stylelint-config-standard": "18.x", "stylelint-scss": "3.x", + "stylelint-selector-bem-pattern": "2.x", "webpack": "4.x" }, "engines": { diff --git a/sass/_components.scss b/sass/_components.scss index 76f87c31b..04897074c 100644 --- a/sass/_components.scss +++ b/sass/_components.scss @@ -1,15 +1,22 @@ -@import './components/HelloWorld'; -@import './components/ButtonWithIcon'; -@import './components/CreateVmWizard'; -@import './components/Dropdown'; -@import './components/EditableDraggableTable'; -@import './components/FormFactory'; -@import './components/NewVmWizard'; -@import './components/ResultTab'; -@import './components/NetworksTab'; -@import './components/StorageTab'; -@import './components/VmStatus'; -@import './components/VmConsoles'; -@import './components/TemplateSource'; -@import './components/CreateDiskRow'; -@import './components/VmDetails'; +/* + KubeVirt UI component styles. Refer to stylelint configuration for details + on project-specific BEM (Block Element Modifier) format for CSS classes. +*/ + +@import './components/CreateDiskRow/create-disk-row'; +@import './components/Form/dropdown'; +@import './components/Form/form-group'; +@import './components/Form/list-form-factory'; +@import './components/Table/editable-table-actions'; +@import './components/Table/editable-table'; +@import './components/TemplateSource/template-source'; +@import './components/VmConsoles/vm-consoles'; +@import './components/VmDetails/vm-details'; +@import './components/VmStatus/vm-status'; +@import './components/Wizard/create-vm-wizard'; +@import './components/Wizard/wizard'; + +/* + TODO: these styles should be backported to the corresponding PF-React package +*/ +@import './patternfly-tweaks/vnc-console'; diff --git a/sass/_dependencies.scss b/sass/_dependencies.scss index 2ffb7e409..dd9a2191f 100644 --- a/sass/_dependencies.scss +++ b/sass/_dependencies.scss @@ -1,3 +1,9 @@ +/* + KubeVirt UI style dependencies. Intended for use by Cosmos playground + when testing React components an in isolated environment which simulates + the consuming application. +*/ + $font-path: '~patternfly/dist/fonts/'; $icon-font-path: '~patternfly/dist/fonts/'; $img-path: '~patternfly/dist/img/'; diff --git a/sass/components/CreateDiskRow/create-disk-row.scss b/sass/components/CreateDiskRow/create-disk-row.scss new file mode 100644 index 000000000..d4a82416d --- /dev/null +++ b/sass/components/CreateDiskRow/create-disk-row.scss @@ -0,0 +1,3 @@ +.kubevirt-create-disk-row__action-buttons { + width: 27px; +} diff --git a/sass/components/_Dropdown.scss b/sass/components/Form/dropdown.scss similarity index 77% rename from sass/components/_Dropdown.scss rename to sass/components/Form/dropdown.scss index e95f4cb82..551fd468e 100644 --- a/sass/components/_Dropdown.scss +++ b/sass/components/Form/dropdown.scss @@ -8,6 +8,6 @@ top: 5px; } -.kubevirt-dropdownGroup .dropdown-menu { +.kubevirt-dropdown + .dropdown-menu { width: 100%; } diff --git a/sass/components/Form/form-group.scss b/sass/components/Form/form-group.scss new file mode 100644 index 000000000..1d4f87ede --- /dev/null +++ b/sass/components/Form/form-group.scss @@ -0,0 +1,24 @@ +.kubevirt-form-group .dropdown > .dropdown-menu { + display: none; + z-index: 1001; +} + +.kubevirt-form-group .dropdown.open > .dropdown-menu { + display: block; +} + +.kubevirt-form-group--no-bottom { + margin-bottom: 2px; +} + +.kubevirt-form-group--help { + margin-bottom: 0; +} + +.kubevirt-form-group--no-help { + margin-bottom: 23px; +} + +.kubevirt-form-group__field-help .popover { + max-width: 400px; +} diff --git a/sass/components/Form/list-form-factory.scss b/sass/components/Form/list-form-factory.scss new file mode 100644 index 000000000..199e1f82e --- /dev/null +++ b/sass/components/Form/list-form-factory.scss @@ -0,0 +1,8 @@ +.kubevirt-list-form-factory__column--last { + padding-right: 50px; +} + +.kubevirt-list-form-factory__actions { + position: absolute; + right: 0; +} diff --git a/sass/components/Table/editable-table-actions.scss b/sass/components/Table/editable-table-actions.scss new file mode 100644 index 000000000..3983ceb41 --- /dev/null +++ b/sass/components/Table/editable-table-actions.scss @@ -0,0 +1,3 @@ +.kubevirt-editable-table-actions { + padding-bottom: 9px; +} diff --git a/sass/components/Table/editable-table.scss b/sass/components/Table/editable-table.scss new file mode 100644 index 000000000..21fa7b97d --- /dev/null +++ b/sass/components/Table/editable-table.scss @@ -0,0 +1,16 @@ +.kubevirt-editable-table__row-actions { + padding: 3px; +} + +.kubevirt-editable-table__cell { + min-height: 24px; +} + +.kubevirt-editable-table__cell-error { + margin: 0; + padding: 0; +} + +.kubevirt-editable-table__cell-error--bootable { + margin-top: 2em; +} diff --git a/sass/components/TemplateSource/template-source.scss b/sass/components/TemplateSource/template-source.scss new file mode 100644 index 000000000..c6192edf4 --- /dev/null +++ b/sass/components/TemplateSource/template-source.scss @@ -0,0 +1,3 @@ +.kubevirt-template-source__overlay { + display: inline-block; +} diff --git a/sass/components/VmConsoles/vm-consoles.scss b/sass/components/VmConsoles/vm-consoles.scss new file mode 100644 index 000000000..053b9c5ca --- /dev/null +++ b/sass/components/VmConsoles/vm-consoles.scss @@ -0,0 +1,3 @@ +.kubevirt-vm-consoles__rdp .expand-collapse-pf-link-container { + float: right; +} diff --git a/sass/components/_VmDetails.scss b/sass/components/VmDetails/vm-details.scss similarity index 100% rename from sass/components/_VmDetails.scss rename to sass/components/VmDetails/vm-details.scss diff --git a/sass/components/VmStatus/vm-status.scss b/sass/components/VmStatus/vm-status.scss new file mode 100644 index 000000000..07918ecf3 --- /dev/null +++ b/sass/components/VmStatus/vm-status.scss @@ -0,0 +1,3 @@ +.kubevirt-vm-status__icon { + margin-right: 5px; +} diff --git a/sass/components/Wizard/create-vm-wizard.scss b/sass/components/Wizard/create-vm-wizard.scss new file mode 100644 index 000000000..92541717d --- /dev/null +++ b/sass/components/Wizard/create-vm-wizard.scss @@ -0,0 +1,15 @@ +.kubevirt-create-vm-wizard__button-create-network { + margin-right: 1em; +} + +.kubevirt-create-vm-wizard__button-create-disk { + margin-right: 1em; +} + +.kubevirt-create-vm-wizard__pxe-form { + margin-top: 2em; +} + +.kubevirt-create-vm-wizard__result-success { + text-align: left; +} diff --git a/sass/components/Wizard/wizard.scss b/sass/components/Wizard/wizard.scss new file mode 100644 index 000000000..2a644f2c8 --- /dev/null +++ b/sass/components/Wizard/wizard.scss @@ -0,0 +1,3 @@ +.kubevirt-wizard .wizard-pf-main { + padding-top: 10px; +} diff --git a/sass/components/_ButtonWithIcon.scss b/sass/components/_ButtonWithIcon.scss deleted file mode 100644 index 99e878e1a..000000000 --- a/sass/components/_ButtonWithIcon.scss +++ /dev/null @@ -1,19 +0,0 @@ -.modal .btn-with-icon { - text-align: center; - display: inline-block; - padding: 10px; - margin: 50px; - border: 2px solid #f5f5f5; - height: 200px; - width: 200px; - white-space: pre-line; -} - -.modal .btn-with-icon:hover { - border: 2px solid; - text-decoration: none; -} - -.modal .label-column { - margin-top: 15px; -} diff --git a/sass/components/_CreateDiskRow.scss b/sass/components/_CreateDiskRow.scss deleted file mode 100644 index 4a8a7f048..000000000 --- a/sass/components/_CreateDiskRow.scss +++ /dev/null @@ -1,3 +0,0 @@ -.createDiskRow__actionButtons button { - width: 27px; -} diff --git a/sass/components/_CreateVmWizard.scss b/sass/components/_CreateVmWizard.scss deleted file mode 100644 index 59c058c0c..000000000 --- a/sass/components/_CreateVmWizard.scss +++ /dev/null @@ -1,3 +0,0 @@ -.modal .wizard-pf-main { - padding-top: 10px; -} diff --git a/sass/components/_EditableDraggableTable.scss b/sass/components/_EditableDraggableTable.scss deleted file mode 100644 index 7020f47b7..000000000 --- a/sass/components/_EditableDraggableTable.scss +++ /dev/null @@ -1,30 +0,0 @@ -table.pf-table-inline-edit { - tbody { - tr.editing { - td { - background-color: #def3ff; /* color-pf-blue-50 */ - } - } - } -} - -.row-actions { - padding: 3px; -} - -.editable-draggable-table-elem { - min-height: 24px; -} - -.minimal-formgroup { - margin: 0; - padding: 0; -} - -.bootable-style { - margin-top: 2em; -} - -.dropdown-menu { - z-index: 1001; -} diff --git a/sass/components/_FormFactory.scss b/sass/components/_FormFactory.scss deleted file mode 100644 index 54df39f2a..000000000 --- a/sass/components/_FormFactory.scss +++ /dev/null @@ -1,28 +0,0 @@ -.kubevirt-formGroup--noBottom { - margin-bottom: 2px; -} - -.kubevirt-fieldLevelHelp .popover { - max-width: 400px; -} - -.kubevirt-listFormFactory__lastColumn { - padding-right: 50px; -} - -.kubevirt-listFormFactory__actions { - position: absolute; - right: 0; -} - -.kubevirt-listFormFactory__formGroup--help { - margin-bottom: 0; -} - -.kubevirt-listFormFactory__formGroup--noHelp { - margin-bottom: 23px; -} - -.kubevirt-listFormFactory__actionButton { - width: 27px; -} diff --git a/sass/components/_HelloWorld.scss b/sass/components/_HelloWorld.scss deleted file mode 100644 index 7a8ca4665..000000000 --- a/sass/components/_HelloWorld.scss +++ /dev/null @@ -1,3 +0,0 @@ -.hello-world { - font-weight: bold; -} diff --git a/sass/components/_NetworksTab.scss b/sass/components/_NetworksTab.scss deleted file mode 100644 index ed6b4f0dd..000000000 --- a/sass/components/_NetworksTab.scss +++ /dev/null @@ -1,11 +0,0 @@ -.actions { - padding-bottom: 0.5em; -} - -.create-network { - margin-right: 1em; -} - -.pxe-form { - margin-top: 2em; -} diff --git a/sass/components/_NewVmWizard.scss b/sass/components/_NewVmWizard.scss deleted file mode 100644 index 8f604d974..000000000 --- a/sass/components/_NewVmWizard.scss +++ /dev/null @@ -1,5 +0,0 @@ -.modal .wizard-content { - align-items: center; - display: flex; - justify-content: center; -} diff --git a/sass/components/_ResultTab.scss b/sass/components/_ResultTab.scss deleted file mode 100644 index 5fc0fe4ad..000000000 --- a/sass/components/_ResultTab.scss +++ /dev/null @@ -1,3 +0,0 @@ -.description { - text-align: left; -} diff --git a/sass/components/_StorageTab.scss b/sass/components/_StorageTab.scss deleted file mode 100644 index 0fa4f9a9d..000000000 --- a/sass/components/_StorageTab.scss +++ /dev/null @@ -1,7 +0,0 @@ -.actions { - padding-bottom: 0.5em; -} - -.create-disk { - margin-right: 1em; -} diff --git a/sass/components/_TemplateSource.scss b/sass/components/_TemplateSource.scss deleted file mode 100644 index cb6a5ad23..000000000 --- a/sass/components/_TemplateSource.scss +++ /dev/null @@ -1,3 +0,0 @@ -.template-source__overlay { - display: inline-block; -} diff --git a/sass/components/_VmConsoles.scss b/sass/components/_VmConsoles.scss deleted file mode 100644 index 6a0f02c1f..000000000 --- a/sass/components/_VmConsoles.scss +++ /dev/null @@ -1,8 +0,0 @@ -.vnc-console .toolbar-pf-action-right { /* TODO: This fix should go to patternfly-react */ - padding-bottom: 12px !important; - margin-top: -14px !important; -} - -.kubevirt-vm-consoles__rdp .expand-collapse-pf-link-container { - float: right; -} diff --git a/sass/components/_VmStatus.scss b/sass/components/_VmStatus.scss deleted file mode 100644 index e4dcbc472..000000000 --- a/sass/components/_VmStatus.scss +++ /dev/null @@ -1,3 +0,0 @@ -.vm-status-icon { - margin-right: 5px; -} diff --git a/sass/patternfly-tweaks/vnc-console.scss b/sass/patternfly-tweaks/vnc-console.scss new file mode 100644 index 000000000..8a34f1443 --- /dev/null +++ b/sass/patternfly-tweaks/vnc-console.scss @@ -0,0 +1,4 @@ +.vnc-console .toolbar-pf-action-right { + padding-bottom: 12px !important; + margin-top: -14px !important; +} diff --git a/src/components/Button/ButtonWithIcon.js b/src/components/Button/ButtonWithIcon.js deleted file mode 100644 index e2ec69407..000000000 --- a/src/components/Button/ButtonWithIcon.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Button, Icon, Col } from 'patternfly-react'; - -export const ButtonWithIcon = ({ onClick, iconType, icon, label }) => ( - -); - -ButtonWithIcon.propTypes = { - onClick: PropTypes.func.isRequired, - iconType: PropTypes.string.isRequired, - icon: PropTypes.string.isRequired, - label: PropTypes.string.isRequired, -}; diff --git a/src/components/Button/fixtures/ButtonWithIcon.fixture.js b/src/components/Button/fixtures/ButtonWithIcon.fixture.js deleted file mode 100644 index 9f771942d..000000000 --- a/src/components/Button/fixtures/ButtonWithIcon.fixture.js +++ /dev/null @@ -1,11 +0,0 @@ -import { ButtonWithIcon } from '..'; - -export default { - component: ButtonWithIcon, - props: { - onClick: () => {}, - iconType: 'pf', - icon: 'virtual-machine', - label: 'Button With Icon', - }, -}; diff --git a/src/components/Button/index.js b/src/components/Button/index.js deleted file mode 100644 index 608f30f13..000000000 --- a/src/components/Button/index.js +++ /dev/null @@ -1 +0,0 @@ -export { ButtonWithIcon } from './ButtonWithIcon'; diff --git a/src/components/Button/tests/ButtonWithIcon.test.js b/src/components/Button/tests/ButtonWithIcon.test.js deleted file mode 100644 index a52848ce0..000000000 --- a/src/components/Button/tests/ButtonWithIcon.test.js +++ /dev/null @@ -1,14 +0,0 @@ -import createTestContext from '../../../cosmos/enzyme'; -import fixture from '../fixtures/ButtonWithIcon.fixture'; - -const { mount, getWrapper } = createTestContext({ fixture }); - -beforeEach(mount); - -test('renders Button With Icon', () => { - expect(getWrapper().text()).toEqual('Button With Icon'); -}); - -test('matches snapshot', () => { - expect(getWrapper()).toMatchSnapshot(); -}); diff --git a/src/components/Button/tests/__snapshots__/ButtonWithIcon.test.js.snap b/src/components/Button/tests/__snapshots__/ButtonWithIcon.test.js.snap deleted file mode 100644 index 74c903c86..000000000 --- a/src/components/Button/tests/__snapshots__/ButtonWithIcon.test.js.snap +++ /dev/null @@ -1,68 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`matches snapshot 1`] = ` - - - - -`; diff --git a/src/components/CreateDiskRow/CreateDiskRow.js b/src/components/CreateDiskRow/CreateDiskRow.js index cc135693b..7f6910b03 100644 --- a/src/components/CreateDiskRow/CreateDiskRow.js +++ b/src/components/CreateDiskRow/CreateDiskRow.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { get } from 'lodash'; import { Button, Icon } from 'patternfly-react'; + import { ListFormFactory } from '../Form/FormFactory'; import { getName } from '../../utils/selectors'; import { validateDNS1123SubdomainValue } from '../../utils/validations'; @@ -70,7 +71,7 @@ const getActions = (diskColumns, storage, LoadingComponent, onAccept, onCancel) storage.creating ? ( ) : ( -
+
diff --git a/src/components/CreateDiskRow/fixtures/CreateDiskRow.fixture.js b/src/components/CreateDiskRow/fixtures/CreateDiskRow.fixture.js index dc4e003f3..1f2544107 100644 --- a/src/components/CreateDiskRow/fixtures/CreateDiskRow.fixture.js +++ b/src/components/CreateDiskRow/fixtures/CreateDiskRow.fixture.js @@ -1,4 +1,4 @@ -import { CreateDiskRow } from '..'; +import { CreateDiskRow } from '../CreateDiskRow'; export default { component: CreateDiskRow, @@ -8,6 +8,6 @@ export default { onAccept: () => {}, onCancel: () => {}, storageClasses: [], - LoadingComponent: () => {}, + LoadingComponent: () => null, }, }; diff --git a/src/components/CreateDiskRow/index.js b/src/components/CreateDiskRow/index.js index 17c0334ff..1eb312d61 100644 --- a/src/components/CreateDiskRow/index.js +++ b/src/components/CreateDiskRow/index.js @@ -1 +1 @@ -export * from './CreateDiskRow'; +export { CreateDiskRow } from './CreateDiskRow'; diff --git a/src/components/CreateDiskRow/tests/CreateDiskRow.test.js b/src/components/CreateDiskRow/tests/CreateDiskRow.test.js index 2f217624b..e3857dc75 100644 --- a/src/components/CreateDiskRow/tests/CreateDiskRow.test.js +++ b/src/components/CreateDiskRow/tests/CreateDiskRow.test.js @@ -1,7 +1,8 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { CreateDiskRow } from '..'; + import CreateDiskRowFixture from '../fixtures/CreateDiskRow.fixture'; +import { CreateDiskRow } from '../CreateDiskRow'; const testCreateDiskRow = () => ; diff --git a/src/components/CreateDiskRow/tests/__snapshots__/CreateDiskRow.test.js.snap b/src/components/CreateDiskRow/tests/__snapshots__/CreateDiskRow.test.js.snap index a74ec99a2..6b9acbf84 100644 --- a/src/components/CreateDiskRow/tests/__snapshots__/CreateDiskRow.test.js.snap +++ b/src/components/CreateDiskRow/tests/__snapshots__/CreateDiskRow.test.js.snap @@ -4,7 +4,7 @@ exports[` renders correctly 1`] = `