Fixes #63 Preset selection

Create preset selection with buttons
Allow compact and large preset selection

ToggleGroup is not used as this not allow easy alignment for the
non-compact format to be used in the Wizard

Author: gbraad

src/components/Configuration.jsx

@@ -8,15 +8,17 @@ import {
 } from '@patternfly/react-core';
 
 import "./Configuration.scss";
+import PresetSelection from './PresetSelection';
 
 export default class Configuration extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            preset: "unknown",
             cpus: 0,
             memory: 0,
-            "disk-size": 0,
-            "consent-telemetry": false,
+            'disk-size': 0,
+            'consent-telemetry': false,
             'disk-size': 0,
         };
 
@@ -52,7 +54,7 @@ export default class Configuration extends React.Component {
     render() {
         return (
             <div>
-                <Form isHorizontal isWidthLimited>
+                <Form isHorizontal>
                     <FormGroup fieldId='settings-cpu' label="CPU">
                         <NumberInput id='settings-cpu'
                             className="cpus"
@@ -65,7 +67,8 @@ export default class Configuration extends React.Component {
                             widthChars={5}
                             onPlus={event => this.updateValue('cpus', this.state.cpus + 1)}
                             onMinus={event => this.updateValue('cpus', this.state.cpus - 1)}
-                            onChange={value => this.props.onValueChanged(this, 'cpus', value)} />
+                            onChange={value => this.state['cpus'] } 
+                            />
                     </FormGroup>
                     <FormGroup fieldId='settings-memory' label="Memory">
                         <NumberInput id='settings-memory'
@@ -79,7 +82,8 @@ export default class Configuration extends React.Component {
                             widthChars={5}
                             onPlus={event => this.updateValue('memory', this.state.memory + 512)}
                             onMinus={event => this.updateValue('memory', this.state.memory - 512)}
-                            onChange={value => this.props.onValueChanged(this, 'memory', value)} />
+                            onChange={value => this.state['memory'] } 
+                            />
                     </FormGroup>
                     <FormGroup fieldId='settings-disksize' label="Disk size">
                         <NumberInput id='settings-disksize'
@@ -93,7 +97,17 @@ export default class Configuration extends React.Component {
                             widthChars={5}
                             onPlus={event => this.updateValue('disk-size', this.state["disk-size"] + 1)}
                             onMinus={event => this.updateValue('disk-size', this.state["disk-size"] - 1)}
-                            onChange={value => this.props.onValueChanged(this, 'disk-size', value)} />
+                            onChange={value => this.state['disk-size'] }
+                            />
+                    </FormGroup>
+                    <FormGroup fieldId='settings-preset' label="Preset">
+                        <PresetSelection id="settings.preset" isCompact
+                            className="preset"
+                            inputName="preset"
+                            podmanDescription="This option will allow you to use podman to run containers inside a VM environment."
+                            openshiftDescription="This option will run a full cluster environment as a single node, providing a registry, monitoring and access to Operator Hub"
+                            value={this.state.preset}
+                            onChange={value => this.updateValue('preset', value)} />
                     </FormGroup>
                     <FormGroup fieldId='config-telemetry' label="Telemetry">
                         <Checkbox id='config-consentTelemetry'

src/components/PresetSelection.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@patternfly/react-core';
+
+import "./PresetSelection.scss";
+
+export default class PresetSelection extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            presetSelected: this.props.value  // from config
+        };
+        this.description = "";
+
+        this.handlePresetSelectClick = this.handlePresetSelectClick.bind(this);
+    }
+  
+    handlePresetSelectClick = (event, value) => {
+        this.setState({ presetSelected: value });
+
+        if(value === "podman") {
+            this.description = this.props.podmanDescription;
+        }
+        if(value === "openshift") {
+            this.description = this.props.openshiftDescription;
+        }
+
+        if(this.props.onChanged !== null) {
+            this.props.onChange(value);
+        }
+    };
+
+    render() {
+        var descriptionStyle= {
+            fontSize: "var(--pf-global--FontSize--sm)",
+            color: "var(--pf-global--Color--200)",
+            display: "block",
+            paddingTop: "5px"
+        }
+
+        var compactTemplate = (
+            <>
+                <div role="group">
+                    <Button className="preset-selection-button-compact"
+                        variant={ (this.state.presetSelected === "openshift") ? "primary" : "secondary" }
+                        onClick={ event => this.handlePresetSelectClick(event, 'openshift') }>OpenShift</Button>
+
+                    <Button className="preset-selection-button-compact"
+                        variant={ (this.state.presetSelected === "podman") ? "primary" : "secondary" }
+                        onClick={ event => this.handlePresetSelectClick(event, 'podman') }>Podman</Button>
+                </div>
+                <span className="preset-description">{this.description}</span>
+            </>
+        )
+
+        var regularTemplate = (
+            <>
+                <div role="group">
+                    <Button isLarge className="preset-selection-button"
+                        variant={ (this.state.presetSelected === "openshift") ? "primary" : "secondary" }
+                        onClick={ event => this.handlePresetSelectClick(event, 'openshift') }>OpenShift</Button>
+                    <span className="preset-description">{this.props.openshiftDescription}</span>
+                    <Button isLarge className="preset-selection-button"
+                        variant={ (this.state.presetSelected === "podman") ? "primary" : "secondary" }
+                        onClick={ event => this.handlePresetSelectClick(event, 'podman') }>Podman</Button>
+                    <span className="preset-description">{this.props.podmanDescription}</span>
+                </div>
+            </>
+        )
+
+        return (this.props.isCompact ? compactTemplate : regularTemplate);
+    }
+}
+
+
+PresetSelection.propTypes = {
+    value: PropTypes.string,
+    podmanDescription: PropTypes.string,
+    openshiftDescription: PropTypes.string,
+    onChange: PropTypes.func
+}
+
+PresetSelection.defaultProps = {
+    value: "unknown",
+    podmanDescription: "",
+    openshiftDescription: ""
+}; 

src/components/PresetSelection.scss

@@ -0,0 +1,30 @@
+.pf-m-selected
+{
+    background-color: #06c;
+    color:         white;
+}
+
+.preset-selection-button-compact
+{
+    border-radius:  0;
+    width:          120px;
+}
+
+.preset-selection-button-compact::after
+{
+    border-radius:  0;
+}
+
+.preset-selection-button
+{
+    width:          150px;
+}
+
+
+.preset-description {
+    font-size:      var(--pf-global--FontSize--sm);
+    color:          var(--pf-global--Color--200);
+    display:        block;
+    padding-top:    5px;
+    padding-bottom: 5px;
+}

src/index.js

@@ -7,6 +7,7 @@ import PodmanStatus from './components/PodmanStatus.jsx';
 import OpenShiftStatus from './components/OpenShiftStatus.jsx';
 import UnknownStatus from './components/UnknownStatus.jsx';
 import PullSecretInputCard from './components/PullSecretInputCard.jsx';
+import PresetSelection from './components/PresetSelection.jsx';
 
 export {
   Actions,
@@ -17,5 +18,6 @@ export {
   PodmanStatus,
   OpenShiftStatus,
   UnknownStatus,
-  PullSecretInputCard
+  PullSecretInputCard,
+  PresetSelection
 };

src/stories/Configuration.stories.js

@@ -12,4 +12,5 @@ const Template = (args) => <Configuration {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
+  
 };

src/stories/PresetSelection.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import PresetSelection from '../components/PresetSelection';
+
+export default {
+  title: 'Example/PresetSelection',
+  component: PresetSelection,
+  argTypes: {
+  },
+};
+
+const Template = (args) => <PresetSelection {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+};