Skip to content
This repository has been archived by the owner on Apr 28, 2020. It is now read-only.

Implement Create VM Wizard component #27

Merged
merged 1 commit into from
Sep 26, 2018

Conversation

rawagner
Copy link
Contributor

No description provided.

@coveralls
Copy link

coveralls commented Sep 25, 2018

Pull Request Test Coverage Report for Build 114

  • 72 of 107 (67.29%) changed or added relevant lines in 8 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+23.8%) to 55.598%

Changes Missing Coverage Covered Lines Changed/Added Lines %
src/components/Forms/Dropdown.js 4 5 80.0%
src/components/Wizards/CreateVmWizard/CreateVmWizard.js 37 71 52.11%
Totals Coverage Status
Change from base Build 78: 23.8%
Covered Lines: 95
Relevant Lines: 176

💛 - Coveralls

Copy link
Contributor

@mareklibra mareklibra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, clean-up required.

I like the FormFactrory.
A few comments inscribed.

@@ -0,0 +1,302 @@
import React from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please rename folder to follow component name (CamelCase), so .../wizards/CreateVmWizard/...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed for all components

openCreateVmWizard = () => this.setState({ createVM: true });

render() {
let wizard;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can be:

const wizard = this.state.createVM && (...)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

templates: this.props.templates
};

componentDidUpdate({ namespaces, templates }) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use getDerivedStateFromProps() instead

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

replaced componentDidUpdate with getDerivedStateFromProps

import { get, has } from 'lodash';
import { TextArea, Dropdown, Checkbox, Text } from '.';

export const FormFactory = ({ fields, fieldsValues, onFormChange }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice :-)


export const FormFactory = ({ fields, fieldsValues, onFormChange }) => {
const formGroups = Object.keys(fields)
.filter(key => !(fields[key].isVisible && fields[key].isVisible(fieldsValues) === false))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick to be generic:
change fields[key].isVisible(fieldsValues) to !!fields[key].isVisible(fieldsValues)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

/>
);
break;
default:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick to be genric: introduce specific type to be same as this default, like:

case 'text':
default:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

}
}
}));
this.validateWizard(basicVmSettings);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good idea here ...

} from '../../../constants';
import { getTemplatesWithLabels, getTemplatesLabelValues } from '../../../utils/template';

/* eslint react/no-did-update-set-state: 0 */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will probably not needed with the changes bellow

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed

return false;
};

getFlavorLabel = () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For a follow-up: improve behavior from user-perspective, so the user is still able to select any OS, na matter what pair-option (flavor,workload) has selected.

Just ideas:

  • disable unselected values (to denote "There's something more")
  • add sort of "reset form" button
  • add generic value to the dropdows to reset selection
  • etc.

@@ -0,0 +1,98 @@
export const fedora28 = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please rename folte templates to mock_templates to avoid confusion.

These templates are expected to be loaded from API once implemented within kubevirt Operator (or so)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

renamed to mock_templates

@lizsurette
Copy link

@rawagner any difference from what you had shared in Storybook? Would you mind adding screenshots, if so?

@rawagner
Copy link
Contributor Author

rawagner commented Sep 25, 2018

@lizsurette There is basically no visual difference, just removed 'Create Template from VM' checkbox as we do not have that functionality implemented yet. I will share Cosmos (alternative to Storybook) soon :)

Copy link
Contributor

@mareklibra mareklibra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, just minor comments

package.json Outdated
@@ -24,7 +24,7 @@
"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/components/**/*.js,src/index.js' --ignore '**/tests/**,**/fixtures/**'",
"build:js": "babel src --config-file ./config/babel.config.js --out-dir dist/js --only 'src/components/**/*.js,src/constants/**/*.js,src/k8s/**/*.js,src/models/**/*.js,src/utils/**/*.js,src/index.js' --ignore '**/tests/**,**/fixtures/**'",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can't we simplify that to just src/**/*.js ?

Copy link
Contributor Author

@rawagner rawagner Sep 26, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added src/**/*.js and ignore now includes jest and cosmos folders as those releate to tests which we are not shipping

};

FormFactory.propTypes = {
fields: PropTypes.object.isRequired,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For a follow-up: we should be more specific here


FormFactory.propTypes = {
fields: PropTypes.object.isRequired,
fieldsValues: PropTypes.object.isRequired,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

likewise

};

getFlavors = () => {
let flavors = [];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to initialize here, can be const flavors later.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

Copy link
Contributor

@mareklibra mareklibra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks

@mareklibra mareklibra merged commit 3afe91c into kubevirt:master Sep 26, 2018
@mareklibra mareklibra changed the title [WIP] Implement Create VM Wizard component Implement Create VM Wizard component Sep 26, 2018
@vojtechszocs
Copy link
Contributor

Would you mind adding screenshots, if so?

@lizsurette I'm working on deploying Cosmos (Storybook alternative) static application upon PR merge so we have an up-to-date interactive showcase of our KubeVirt UI components.

@lizsurette
Copy link

@lizsurette I'm working on deploying Cosmos (Storybook alternative) static application upon PR merge so we have an up-to-date interactive showcase of our KubeVirt UI components.

@vojtechszocs perfect, thank you!

@rawagner rawagner deleted the create_VM branch September 27, 2018 13:40
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants