Add name confirmation modal (#204)

Signed-off-by: Tyler Ohlsen <[email protected]>
(cherry picked from commit 7f5c630)

public/pages/workflows/new_workflow/use_case.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import {
   EuiText,
@@ -13,50 +13,72 @@ import {
   EuiCard,
   EuiHorizontalRule,
   EuiButton,
+  EuiModal,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiFormRow,
 } from '@elastic/eui';
 import { Workflow } from '../../../../common';
 import { APP_PATH } from '../../../utils';
 import { processWorkflowName } from './utils';
 import { createWorkflow, useAppDispatch } from '../../../store';
 
 interface UseCaseProps {
-  // onClick: () => {};
   workflow: Workflow;
 }
 
 export function UseCase(props: UseCaseProps) {
   const dispatch = useAppDispatch();
   const history = useHistory();
 
+  // name modal state
+  const [isNameModalOpen, setIsNameModalOpen] = useState<boolean>(false);
+
+  // workflow name state
+  const [workflowName, setWorkflowName] = useState<string>(
+    processWorkflowName(props.workflow.name)
+  );
+
   return (
-    <EuiCard
-      title={
-        <EuiTitle size="s">
-          <h2>{props.workflow.name}</h2>
-        </EuiTitle>
-      }
-      titleSize="s"
-      paddingSize="l"
-      layout="horizontal"
-    >
-      <EuiFlexGroup direction="column" gutterSize="l">
-        <EuiHorizontalRule size="full" margin="m" />
-        <EuiFlexItem grow={true}>
-          <EuiText>{props.workflow.description}</EuiText>
-        </EuiFlexItem>
-        <EuiFlexGroup direction="column" alignItems="center">
-          <EuiFlexItem grow={false}>
+    <>
+      {isNameModalOpen && (
+        <EuiModal onClose={() => setIsNameModalOpen(false)}>
+          <EuiModalHeader>
+            <EuiModalHeaderTitle>
+              <p>{`Set a unique name for your workflow`}</p>
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
+          <EuiModalBody>
+            <EuiFormRow
+              label={'Name'}
+              error={'Name cannot be empty'}
+              isInvalid={workflowName === ''}
+            >
+              <EuiFieldText
+                placeholder={processWorkflowName(props.workflow.name)}
+                compressed={false}
+                value={workflowName}
+                onChange={(e) => {
+                  setWorkflowName(e.target.value);
+                }}
+              />
+            </EuiFormRow>
+          </EuiModalBody>
+          <EuiModalFooter>
+            <EuiButtonEmpty onClick={() => setIsNameModalOpen(false)}>
+              Cancel
+            </EuiButtonEmpty>
             <EuiButton
-              disabled={false}
-              isLoading={false}
+              disabled={workflowName === ''}
               onClick={() => {
                 const workflowToCreate = {
                   ...props.workflow,
-                  // TODO: handle duplicate name gracefully. it won't slash or produce errors, but nice-to-have
-                  // as long as not too expensive to fetch duplicate names
-                  name: processWorkflowName(props.workflow.name),
+                  name: workflowName,
                 };
-
                 dispatch(createWorkflow(workflowToCreate))
                   .unwrap()
                   .then((result) => {
@@ -68,12 +90,44 @@ export function UseCase(props: UseCaseProps) {
                     console.error(err);
                   });
               }}
+              fill={true}
+              color="primary"
             >
               Create
             </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
+      )}
+      <EuiCard
+        title={
+          <EuiTitle size="s">
+            <h2>{props.workflow.name}</h2>
+          </EuiTitle>
+        }
+        titleSize="s"
+        paddingSize="l"
+        layout="horizontal"
+      >
+        <EuiFlexGroup direction="column" gutterSize="l">
+          <EuiHorizontalRule size="full" margin="m" />
+          <EuiFlexItem grow={true}>
+            <EuiText>{props.workflow.description}</EuiText>
           </EuiFlexItem>
+          <EuiFlexGroup direction="column" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                disabled={false}
+                isLoading={false}
+                onClick={() => {
+                  setIsNameModalOpen(true);
+                }}
+              >
+                Go
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFlexGroup>
-      </EuiFlexGroup>
-    </EuiCard>
+      </EuiCard>
+    </>
   );
 }