Add CreateClusterForm

Introduce basic form fields handling
Add @patternfly/react-icons to allow for using icons

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@patternfly/patternfly-next": "^1.0.146",
     "@patternfly/react-core": "^1.49.4",
+    "@patternfly/react-icons": "^3.0.0",
     "@patternfly/react-table": "0.4.18",
     "@types/jest": "23.3.13",
     "@types/node": "10.12.18",

src/components/ClusterWizard.tsx

@@ -1,16 +1,18 @@
 import React, { FC, Fragment } from 'react';
 
-import BaremetalInventory from './BaremetalInventory';
+// import BaremetalInventory from './BaremetalInventory';
 import ClusterWizardNav from './ClusterWizardNav';
 // import ClusterWizardSteps from './ClusterWizardSteps';
+import CreateClusterForm from './createCluster/CreateClusterForm';
 
 const ClusterWizard: FC = (): JSX.Element => (
   <Fragment>
     {/* <ClusterWizardSteps
       steps={[{ title: 'First' }, { title: 'Second' }]}
       currentStepIndex={0}
     /> */}
-    <BaremetalInventory />
+    {/* <BaremetalInventory /> */}
+    <CreateClusterForm />
     <ClusterWizardNav />
   </Fragment>
 );

src/components/createCluster/CreateClusterForm.tsx

@@ -0,0 +1,137 @@
+import React, { Component } from 'react';
+import {
+  Form,
+  FormGroup,
+  Grid,
+  GridItem,
+  TextInput,
+  PageSectionVariants,
+  TextContent,
+  Text
+} from '@patternfly/react-core';
+
+import RedHatAccountFields from './RedHatAccountFields';
+import PageSection from '../ui/PageSection';
+import PullSecretFields from './PullSecretFields';
+
+interface FormState {
+  clusterName: string;
+  DNSDomain: string;
+  username: string;
+  password: string;
+  pullSecret: string;
+}
+
+export interface CreateClusterFormState {
+  providePullSecret: boolean;
+  form: FormState;
+}
+
+class CreateClusterForm extends Component<{}, CreateClusterFormState> {
+  state: CreateClusterFormState = {
+    providePullSecret: false,
+    form: {
+      clusterName: '',
+      DNSDomain: '',
+      username: '',
+      password: '',
+      pullSecret: ''
+    }
+  };
+
+  updateFormState = (field: string, value: string) =>
+    this.setState(prevState => ({
+      ...prevState,
+      form: { ...prevState.form, [field]: value }
+    }));
+
+  handleClusterNameChange = (value: string) => {
+    this.updateFormState('clusterName', value);
+  };
+  handleDNSDomainChange = (value: string) => {
+    this.updateFormState('DNSDomain', value);
+  };
+  handleUsernameChange = (value: string) => {
+    this.updateFormState('username', value);
+  };
+  handlePasswordChange = (value: string) => {
+    this.updateFormState('password', value);
+  };
+  handlePullSecretChange = (value: string) => {
+    this.updateFormState('pullSecret', value);
+  };
+
+  render(): JSX.Element {
+    const {
+      providePullSecret,
+      form: { clusterName, DNSDomain, username, password, pullSecret }
+    } = this.state;
+    return (
+      <PageSection variant={PageSectionVariants.light} isMain>
+        <Grid gutter="md">
+          <GridItem span={12} md={10} lg={6}>
+            <TextContent>
+              <Text component="h1">Define Cluster</Text>
+            </TextContent>
+            <Form>
+              <FormGroup
+                label="Cluster name"
+                fieldId="create-cluster-cluster-name"
+                helperText="Please provide cluster name"
+                isRequired
+              >
+                <TextInput
+                  type="text"
+                  id="create-cluster-cluster-name"
+                  name="clusterName"
+                  aria-describedby="create-cluster-cluster-name-helper"
+                  value={clusterName}
+                  onChange={this.handleClusterNameChange}
+                  isRequired
+                />
+              </FormGroup>
+              <FormGroup
+                label="Base DNS domain"
+                fieldId="create-cluster-base-dns-domain"
+                isRequired
+              >
+                <TextInput
+                  type="text"
+                  id="create-cluster-base-dns-domain"
+                  name="DNSDomain"
+                  aria-describedby="create-cluster-base-dns-domain-helper"
+                  value={DNSDomain}
+                  onChange={this.handleDNSDomainChange}
+                  isRequired
+                />
+              </FormGroup>
+              <TextContent>
+                <Text component="h2">Connect to Red Hat Account </Text>
+              </TextContent>
+              {providePullSecret ? (
+                <PullSecretFields
+                  onProvideCredentials={() =>
+                    this.setState({ providePullSecret: false })
+                  }
+                  handlePullSecretChange={this.handlePullSecretChange}
+                  pullSecret={pullSecret}
+                />
+              ) : (
+                <RedHatAccountFields
+                  onProvidePullSecret={() =>
+                    this.setState({ providePullSecret: true })
+                  }
+                  handleUsernameChange={this.handleUsernameChange}
+                  handlePasswordChange={this.handlePasswordChange}
+                  username={username}
+                  password={password}
+                />
+              )}
+            </Form>
+          </GridItem>
+        </Grid>
+      </PageSection>
+    );
+  }
+}
+export default CreateClusterForm;

src/components/createCluster/PullSecretFields.tsx

@@ -0,0 +1,47 @@
+import React, { FC, Fragment } from 'react';
+import { FormGroup, TextArea, TextContent, Text } from '@patternfly/react-core';
+
+import ExternalLink from '../ui/ExternalLink';
+
+interface PullSecretFieldsProps {
+  onProvideCredentials: () => void;
+  handlePullSecretChange: (value: string) => void;
+  pullSecret: string;
+}
+
+const PullSecretFields: FC<PullSecretFieldsProps> = ({
+  onProvideCredentials,
+  handlePullSecretChange,
+  pullSecret
+}: PullSecretFieldsProps): JSX.Element => (
+  <Fragment>
+    <TextContent>
+      <Text component="p">
+        Provide your Red Hat Account Pull Secret from{' '}
+        <ExternalLink href="https://try.openshift.com/">
+          try.openshift.com
+        </ExternalLink>{' '}
+        to download necessary resources. You can also{' '}
+        <Text component="a" onClick={onProvideCredentials}>
+          provide your credentials
+        </Text>{' '}
+        instead.
+      </Text>
+    </TextContent>
+    <FormGroup
+      label="Pull secret"
+      fieldId="create-cluster-pull-secret"
+      isRequired
+    >
+      <TextArea
+        id="create-cluster-pull-secret"
+        name="pullSecret"
+        value={pullSecret}
+        onChange={handlePullSecretChange}
+        aria-label="Pull secret"
+        isRequired
+      />
+    </FormGroup>
+  </Fragment>
+);
+export default PullSecretFields;

src/components/createCluster/RedHatAccountFields.tsx

@@ -0,0 +1,65 @@
+import React, { FC, Fragment } from 'react';
+import {
+  FormGroup,
+  TextInput,
+  TextContent,
+  Text
+} from '@patternfly/react-core';
+
+import ExternalLink from '../ui/ExternalLink';
+
+interface RedHatAccountFieldsProps {
+  onProvidePullSecret: () => void;
+  handleUsernameChange: (value: string) => void;
+  handlePasswordChange: (value: string) => void;
+  username: string;
+  password: string;
+}
+
+const RedHatAccountFields: FC<RedHatAccountFieldsProps> = ({
+  onProvidePullSecret,
+  handleUsernameChange,
+  handlePasswordChange,
+  username,
+  password
+}: RedHatAccountFieldsProps): JSX.Element => (
+  <Fragment>
+    <TextContent>
+      <Text component="p">
+        Provide your Red Hat Account credentials to download necessary resources
+        from{' '}
+        <ExternalLink href="https://try.openshift.com/">
+          try.openshift.com
+        </ExternalLink>{' '}
+        . You can also{' '}
+        <Text component="a" onClick={onProvidePullSecret}>
+          provide a Pull Secret
+        </Text>{' '}
+        instead.
+      </Text>
+    </TextContent>
+    <FormGroup label="Username" fieldId="create-cluster-username" isRequired>
+      <TextInput
+        type="text"
+        id="create-cluster-username"
+        name="username"
+        aria-describedby="create-cluster-username-helper"
+        value={username}
+        onChange={handleUsernameChange}
+        isRequired
+      />
+    </FormGroup>
+    <FormGroup label="Password" fieldId="create-cluster-password" isRequired>
+      <TextInput
+        type="text"
+        id="create-cluster-password-domain"
+        name="password"
+        aria-describedby="create-cluster-password-helper"
+        value={password}
+        onChange={handlePasswordChange}
+        isRequired
+      />
+    </FormGroup>
+  </Fragment>
+);
+export default RedHatAccountFields;

src/components/ui/ExternalLink.tsx

@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react';
+import { Text } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
+interface ExternalLinkProps {
+  href: string;
+  children?: ReactNode;
+}
+const ExternalLink: FC<ExternalLinkProps> = ({
+  href,
+  children,
+  ...rest
+}: ExternalLinkProps): JSX.Element => (
+  <Text component="a" href={href} target="_blank" {...rest}>
+    {children ? children : href}{' '}
+    <ExternalLinkAltIcon color="rgb(0, 123, 186)" />
+  </Text>
+);
+export default ExternalLink;

yarn.lock

@@ -1058,6 +1058,11 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-2.10.6.tgz#496c83e1a54257d3929df58a40e42410af35968d"
   integrity sha512-XAvmPEEINfTrj5nKXcOFxyuFVtUOR6/IG4ZsmwwuECgf9lhDnsqpZyxSzIzhtrL+IivRQrswd8rc5wREF0+N4Q==
 
+"@patternfly/react-icons@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-3.0.0.tgz#fe5f79b9b883168c0fc25af1997243759967e6e5"
+  integrity sha512-jX+gK/NpgJAl3GeZKlIIZKP/8dlBY2Ny8j4IUvU6FaETBl/tfOlZyNbgjNBwLBuzZvHQRVKa8UV/3bY+Hzmhfg==
+
 "@patternfly/react-styles@^2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-2.3.0.tgz#e6041a22c8ad11f622e6ca280075aaf482879d7e"