Force dismiss of cluster loading message upon cluster creation and change current region to the one of the created cluster

frontend/locales/en/strings.json

@@ -1080,10 +1080,11 @@
     "create": {
       "title": "Create",
       "description": "Review or edit your cluster configuration and create your cluster.",
+      "pending": "<strong>{{clusterName}}</strong> create is in progress. In <strong>Clusters</strong>, view <strong>{{clusterName}}</strong> create status.",
+      "success": "<strong>{{clusterName}}</strong> successfully created.",
       "configuration": {
         "title": "Cluster configuration YAML file",
         "description": "Review or edit the YAML file that is used to create your cluster.",
-        "pending": "<strong>{{clusterName}}</strong> {{action}} is in progress. In <strong>Clusters</strong>, view <strong>{{clusterName}}</strong> {{action}} status.",
         "forceUpdate": "Force update: Edit the cluster while the compute fleet is still running."
       },
       "flashBar": {
@@ -1101,6 +1102,7 @@
     },
     "update": {
       "title": "Edit",
+      "pending": "<strong>{{clusterName}}</strong> update is in progress. In <strong>Clusters</strong>, view <strong>{{clusterName}}</strong> update status.",
       "helpPanel": {
         "title": "Cluster configuration",
         "description": "<p>Review, edit and test cluster configuration.</p><p>Choose <strong>Dry run</strong> to validate your configuration without editing your cluster.</p><p>Choose <strong>Edit cluster</strong> to validate your configuration and edit your cluster in one step.</p>",
@@ -1110,6 +1112,9 @@
         }
       }
     },
+    "dryRun": {
+      "pending": "<strong>{{clusterName}}</strong> dry-run is in progress."
+    },
     "components": {
       "instanceSelect": {
         "placeholder": "Choose an instance type",

frontend/src/model.tsx

@@ -34,12 +34,19 @@ import flowRight from 'lodash/flowRight'
 // Types
 type Callback = (arg?: any) => void
 
-function notify(text: any, type = 'info', id?: string, dismissible = true) {
+function notify(
+  text: any,
+  type = 'info',
+  id?: string,
+  dismissible = true,
+  loading = false,
+) {
   let messageId = id || generateRandomId()
   let newMessage = {
     type: type,
     content: text,
     id: messageId,
+    loading: loading,
     dismissible: dismissible,
     onDismiss: () =>
       updateState(['app', 'messages'], (currentMessages: Array<any>) =>
@@ -97,7 +104,6 @@ function CreateCluster(
     .then((response: any) => {
       if (response.status === 202) {
         if (!dryrun && region === selectedRegion) {
-          notify('Successfully created: ' + clusterName, 'success')
           updateState(['clusters', 'index', clusterName], (existing: any) => {
             return {...existing, ...response.data}
           })

frontend/src/old-pages/Configure/Create.tsx

@@ -11,13 +11,7 @@
 // limitations under the License.
 import * as React from 'react'
 import {Trans, useTranslation} from 'react-i18next'
-import {
-  CreateCluster,
-  UpdateCluster,
-  ListClusters,
-  DescribeCluster,
-  notify,
-} from '../../model'
+import {CreateCluster, UpdateCluster, ListClusters, notify} from '../../model'
 
 // UI Elements
 import {
@@ -41,6 +35,7 @@ import {errorsToFlashbarItems} from './errorsToFlashbarItems'
 
 // Constants
 const configPath = ['app', 'wizard', 'clusterConfigYaml']
+const clusterLoadingMsgId = 'cluster-loading'
 
 function handleWarnings(resp: any) {
   if (!resp.validationMessages) return
@@ -50,6 +45,45 @@ function handleWarnings(resp: any) {
   })
 }
 
+function setClusterLoadingMsg(
+  clusterName: string,
+  editing: boolean,
+  dryRun: boolean,
+) {
+  let content: React.ReactElement
+  if (dryRun) {
+    content = (
+      <Trans
+        i18nKey={'wizard.dryRun.pending'}
+        values={{clusterName: clusterName}}
+      />
+    )
+  } else {
+    content = editing ? (
+      <Trans
+        i18nKey={'wizard.update.pending'}
+        values={{clusterName: clusterName}}
+      />
+    ) : (
+      <Trans
+        i18nKey={'wizard.create.pending'}
+        values={{clusterName: clusterName}}
+      />
+    )
+  }
+  notify(content, 'success', clusterLoadingMsgId, true, true)
+}
+
+function removeClusterLoadingMsg() {
+  updateState(
+    ['app', 'messages'],
+    (currentMessages: Array<FlashbarProps.MessageDefinition>) =>
+      (currentMessages || []).filter(
+        message => message.id !== clusterLoadingMsgId,
+      ),
+  )
+}
+
 function handleCreate(
   clearWizardState: () => void,
   navigate: NavigateFunction,
@@ -61,25 +95,32 @@ function handleCreate(
   const dryRun = false
   const region = getState(['app', 'wizard', 'config', 'Region'])
   const selectedRegion = getState(['app', 'selectedRegion'])
+  setClusterLoadingMsg(clusterName, editing, dryRun)
+
   var errHandler = (err: any) => {
     setState(['app', 'wizard', 'errors', 'create'], err)
-    setState(['app', 'wizard', 'pending'], false)
+    removeClusterLoadingMsg()
   }
   var successHandler = (resp: any) => {
     let href = `/clusters/${clusterName}/stack-events`
     handleWarnings(resp)
-
-    setState(['app', 'wizard', 'pending'], false)
-    DescribeCluster(clusterName)
+    setState(['app', 'selectedRegion'], region)
     setState(['app', 'clusters', 'selected'], clusterName)
+
     ListClusters()
     clearWizardState()
+    notify(
+      <Trans
+        i18nKey={'wizard.create.success'}
+        values={{clusterName: clusterName}}
+      />,
+      'success',
+    )
     navigate(href)
   }
   setState(['app', 'wizard', 'errors', 'create'], null)
 
   if (editing) {
-    setState(['app', 'wizard', 'pending'], 'Update')
     UpdateCluster(
       clusterName,
       clusterConfig,
@@ -89,7 +130,6 @@ function handleCreate(
       errHandler,
     )
   } else {
-    setState(['app', 'wizard', 'pending'], 'Create')
     CreateCluster(
       clusterName,
       clusterConfig,
@@ -110,15 +150,15 @@ function handleDryRun() {
   const region = getState(['app', 'wizard', 'config', 'Region'])
   const selectedRegion = getState(['app', 'selectedRegion'])
   const dryRun = true
+  setClusterLoadingMsg(clusterName, editing, dryRun)
+
   var errHandler = (err: any) => {
     setState(['app', 'wizard', 'errors', 'create'], err)
-    setState(['app', 'wizard', 'pending'], false)
+    removeClusterLoadingMsg()
   }
   var successHandler = (resp: any) => {
     handleWarnings(resp)
-    setState(['app', 'wizard', 'pending'], false)
   }
-  setState(['app', 'wizard', 'pending'], 'Dry Run')
   setState(['app', 'wizard', 'errors', 'create'], null)
   if (editing)
     UpdateCluster(
@@ -188,10 +228,8 @@ const EditReviewHelpPanel = () => {
 function Create() {
   const {t} = useTranslation()
   const clusterConfig = useState(configPath)
-  const clusterName = useState(['app', 'wizard', 'clusterName'])
   const forceUpdate = useState(['app', 'wizard', 'forceUpdate']) || false
   const errors = useState(['app', 'wizard', 'errors', 'create'])
-  const pending = useState(['app', 'wizard', 'pending'])
   const editing = getState(['app', 'wizard', 'editing'])
 
   const HelpPanelComponent = editing
@@ -200,44 +238,9 @@ function Create() {
 
   useHelpPanel(<HelpPanelComponent />)
 
-  const setPendingFlashbar = React.useCallback(
-    (pending: boolean) => {
-      const content = (
-        <Trans
-          i18nKey="wizard.create.configuration.pending"
-          values={{
-            clusterName: clusterName,
-            action: editing ? 'update' : 'create',
-          }}
-        />
-      )
-      const messageId = 'cluster-loading'
-      if (pending) {
-        updateState(
-          ['app', 'messages'],
-          (currentMessages: Array<FlashbarProps.MessageDefinition>) =>
-            (currentMessages || []).concat({
-              id: messageId,
-              content: content,
-              loading: true,
-              type: 'success',
-            }),
-        )
-      } else {
-        updateState(
-          ['app', 'messages'],
-          (currentMessages: Array<FlashbarProps.MessageDefinition>) =>
-            (currentMessages || []).filter(message => message.id !== messageId),
-        )
-      }
-    },
-    [clusterName, editing],
-  )
-
   React.useEffect(() => {
     setFlashbarItems(errorsToFlashbarItems(errors, setFlashbarItems))
-    if (pending !== null) setPendingFlashbar(pending)
-  }, [errors, pending, setPendingFlashbar])
+  }, [errors])
 
   const [flashbarItems, setFlashbarItems] = React.useState<
     FlashbarProps.MessageDefinition[]