Split create cluster form

test/acceptance/test/pages/create_cluster.go

@@ -51,7 +51,7 @@ func ScrollWindow(webDriver *agouti.Page, xOffSet int, yOffSet int) {
 
 // This function waits for previw and gitops to appear (become visible)
 func WaitForDynamicSecToAppear(webDriver *agouti.Page) {
-	Eventually(webDriver.FindByXPath(`//div[contains(., "Preview")]/following-sibling::textarea`)).Should(BeFound())
+	Eventually(webDriver.FindByXPath(`//div[@name="Preview"]/following-sibling::textarea[1]`)).Should(BeFound())
 	Eventually(webDriver.FindByXPath(`//div[contains(., "Preview")]/parent::div/following-sibling::div/div[text()="GitOps"]`)).Should(BeFound())
 }
 
@@ -111,7 +111,7 @@ func GetParameterOption(webDriver *agouti.Page, value string) *agouti.Selection
 func GetPreview(webDriver *agouti.Page) Preview {
 	return Preview{
 		PreviewLabel: webDriver.FindByName("Preview"),
-		PreviewText:  webDriver.FindByXPath(`//div[contains(., "Preview")]/following-sibling::textarea`),
+		PreviewText:  webDriver.FindByXPath(`//div[@name="Preview"]/following-sibling::textarea[1]`),
 	}
 }
 

ui-cra/src/components/Clusters/Create/Form/Partials/Credentials.tsx

@@ -0,0 +1,56 @@
+import React, {
+  FC,
+  FormEvent,
+  useCallback,
+  useMemo,
+  useState,
+  Dispatch,
+} from 'react';
+import useCredentials from './../../../../../contexts/Credentials';
+import { Credential } from '../../../../../types/custom';
+import { Dropdown, DropdownItem } from 'weaveworks-ui-components';
+
+const Credentials: FC<{
+  onSelect: Dispatch<React.SetStateAction<Credential | null>>;
+}> = ({ onSelect }) => {
+  const { credentials, loading, getCredential } = useCredentials();
+  const [infraCredential, setInfraCredential] =
+    useState<Credential | null>(null);
+
+  const credentialsItems: DropdownItem[] = useMemo(
+    () => [
+      ...credentials.map((credential: Credential) => {
+        const { kind, namespace, name } = credential;
+        return {
+          label: `${kind}/${namespace || 'default'}/${name}`,
+          value: name || '',
+        };
+      }),
+      { label: 'None', value: '' },
+    ],
+    [credentials],
+  );
+
+  const handleSelectCredentials = useCallback(
+    (event: FormEvent<HTMLInputElement>, value: string) => {
+      const credential = getCredential(value);
+      setInfraCredential(credential);
+      onSelect(credential);
+    },
+    [getCredential, onSelect],
+  );
+
+  return (
+    <div className="credentials">
+      <span>Infrastructure provider credentials:</span>
+      <Dropdown
+        value={infraCredential?.name}
+        disabled={loading}
+        items={credentialsItems}
+        onChange={handleSelectCredentials}
+      />
+    </div>
+  );
+};
+
+export default Credentials;

ui-cra/src/components/Clusters/Create/Form/Partials/GitOps.tsx

@@ -0,0 +1,127 @@
+import React, { FC, useCallback, useState, Dispatch, ChangeEvent } from 'react';
+import { FormStep } from '../Steps';
+import { Input } from '../../../../../utils/form';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import { Button } from 'weaveworks-ui-components';
+import weaveTheme from 'weaveworks-ui-components/lib/theme';
+
+const base = weaveTheme.spacing.base;
+
+const useStyles = makeStyles(theme =>
+  createStyles({
+    createCTA: {
+      display: 'flex',
+      justifyContent: 'center',
+      paddingTop: base,
+    },
+  }),
+);
+
+const GitOps: FC<{
+  activeStep: string | undefined;
+  setActiveStep: Dispatch<React.SetStateAction<string | undefined>>;
+  clickedStep: string;
+  setClickedStep: Dispatch<React.SetStateAction<string>>;
+  onSubmit: (gitOps: {
+    head_branch: string;
+    title: string;
+    description: string;
+    commit_message: string;
+  }) => Promise<void>;
+}> = ({ activeStep, setActiveStep, clickedStep, setClickedStep, onSubmit }) => {
+  const classes = useStyles();
+
+  const random = Math.random().toString(36).substring(7);
+
+  const [branchName, setBranchName] = useState<string>(
+    `create-clusters-branch-${random}`,
+  );
+  const [pullRequestTitle, setPullRequestTitle] = useState<string>(
+    'Creates capi cluster',
+  );
+  const [commitMessage, setCommitMessage] = useState<string>(
+    'Creates capi cluster',
+  );
+  const [pullRequestDescription, setPullRequestDescription] = useState<string>(
+    'This PR creates a new cluster',
+  );
+
+  const handleChangeBranchName = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => setBranchName(event.target.value),
+    [],
+  );
+
+  const handleChangePullRequestTitle = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) =>
+      setPullRequestTitle(event.target.value),
+    [],
+  );
+
+  const handleChangeCommitMessage = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) =>
+      setCommitMessage(event.target.value),
+    [],
+  );
+
+  const handleChangePRDescription = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) =>
+      setPullRequestDescription(event.target.value),
+    [],
+  );
+
+  const handleGitOps = useCallback(
+    () =>
+      onSubmit({
+        head_branch: branchName,
+        title: pullRequestTitle,
+        description: pullRequestDescription,
+        commit_message: commitMessage,
+      }),
+    [
+      branchName,
+      pullRequestTitle,
+      pullRequestDescription,
+      commitMessage,
+      onSubmit,
+    ],
+  );
+
+  return (
+    <FormStep
+      title="GitOps"
+      active={activeStep === 'GitOps'}
+      clicked={clickedStep === 'GitOps'}
+      setActiveStep={setActiveStep}
+    >
+      <Input
+        label="Create branch"
+        placeholder={branchName}
+        onChange={handleChangeBranchName}
+      />
+      <Input
+        label="Pull request title"
+        placeholder={pullRequestTitle}
+        onChange={handleChangePullRequestTitle}
+      />
+      <Input
+        label="Commit message"
+        placeholder={commitMessage}
+        onChange={handleChangeCommitMessage}
+      />
+      <Input
+        label="Pull request description"
+        placeholder={pullRequestDescription}
+        onChange={handleChangePRDescription}
+        multiline
+        rows={4}
+      />
+      <div className={classes.createCTA} onClick={handleGitOps}>
+        <Button onClick={() => setClickedStep('GitOps')}>
+          Create Pull Request
+        </Button>
+      </div>
+    </FormStep>
+  );
+};
+
+export default GitOps;

ui-cra/src/components/Clusters/Create/Form/Partials/Preview.tsx

@@ -0,0 +1,46 @@
+import React, { FC, Dispatch } from 'react';
+import { FormStep } from '../Steps';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import weaveTheme from 'weaveworks-ui-components/lib/theme';
+import TextareaAutosize from '@material-ui/core/TextareaAutosize';
+
+const xs = weaveTheme.spacing.xs;
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    textarea: {
+      width: '100%',
+      padding: xs,
+      border: '1px solid #E5E5E5',
+    },
+  }),
+);
+
+const Preview: FC<{
+  activeStep: string | undefined;
+  setActiveStep: Dispatch<React.SetStateAction<string | undefined>>;
+  clickedStep: string;
+  PRPreview: string;
+}> = ({ activeStep, setActiveStep, clickedStep, PRPreview }) => {
+  const classes = useStyles();
+
+  return (
+    <FormStep
+      title="Preview"
+      active={activeStep === 'Preview'}
+      clicked={clickedStep === 'Preview'}
+      setActiveStep={setActiveStep}
+    >
+      <TextareaAutosize
+        className={classes.textarea}
+        value={PRPreview}
+        readOnly
+      />
+      <span>
+        You may edit these as part of the pull request with your git provider.
+      </span>
+    </FormStep>
+  );
+};
+
+export default Preview;

ui-cra/src/components/Clusters/Create/ProfilesList.tsx → ui-cra/src/components/Clusters/Create/Form/Partials/ProfilesList.tsx

@@ -8,12 +8,12 @@ import React, {
 } from 'react';
 import ListItemText from '@material-ui/core/ListItemText';
 import { makeStyles } from '@material-ui/core/styles';
-import { Profile, UpdatedProfile } from '../../../types/custom';
+import { Profile, UpdatedProfile } from '../../../../../types/custom';
 import Box from '@material-ui/core/Box';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
-import useProfiles from './../../../contexts/Profiles';
-import useNotifications from './../../../contexts/Notifications';
+import useProfiles from '../../../../../contexts/Profiles';
+import useNotifications from '../../../../../contexts/Notifications';
 import {
   Dialog,
   DialogContent,
@@ -22,12 +22,12 @@ import {
   TextareaAutosize,
 } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
-import { CloseIconButton } from '../../../assets/img/close-icon-button';
-import { Loader } from '../../Loader';
-import { OnClickAction } from '../../Action';
+import { CloseIconButton } from '../../../../../assets/img/close-icon-button';
+import { Loader } from '../../../../Loader';
+import { OnClickAction } from '../../../../Action';
 import weaveTheme from 'weaveworks-ui-components/lib/theme';
 import Button from '@material-ui/core/Button';
-import { GitOpsBlue } from './../../../muiTheme';
+import { GitOpsBlue } from '../../../../../muiTheme';
 
 const xs = weaveTheme.spacing.xs;