Web: Improve RDS flow 2

web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.story.tsx

@@ -79,4 +79,5 @@ const props: State = {
   prevStep: () => null,
   nextStep: () => null,
   createdDb: {} as any,
+  handleOnTimeout: () => null,
 };

web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx

@@ -58,6 +58,7 @@ export function CreateDatabaseView({
   isDbCreateErr,
   prevStep,
   nextStep,
+  handleOnTimeout,
 }: State) {
   const [dbName, setDbName] = useState('');
   const [dbUri, setDbUri] = useState('');
@@ -75,7 +76,10 @@ export function CreateDatabaseView({
     }
   }, [isDbCreateErr]);
 
-  function handleOnProceed(validator: Validator, retry = false) {
+  function handleOnProceed(
+    validator: Validator,
+    { overwriteDb = false, retry = false } = {}
+  ) {
     if (!validator.validate()) {
       return;
     }
@@ -86,12 +90,15 @@ export function CreateDatabaseView({
       return;
     }
 
-    registerDatabase({
-      labels,
-      name: dbName,
-      uri: `${dbUri}:${dbPort}`,
-      protocol: getDatabaseProtocol(dbEngine),
-    });
+    registerDatabase(
+      {
+        labels,
+        name: dbName,
+        uri: `${dbUri}:${dbPort}`,
+        protocol: getDatabaseProtocol(dbEngine),
+      },
+      { overwriteDb }
+    );
   }
 
   return (
@@ -188,7 +195,11 @@ export function CreateDatabaseView({
             <CreateDatabaseDialog
               pollTimeout={pollTimeout}
               attempt={attempt}
-              retry={() => handleOnProceed(validator, true /* retry */)}
+              retry={() => handleOnProceed(validator, { retry: true })}
+              onOverwrite={() =>
+                handleOnProceed(validator, { overwriteDb: true })
+              }
+              onTimeout={handleOnTimeout}
               close={clearAttempt}
               dbName={dbName}
               next={nextStep}

web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabaseDialog.story.tsx

@@ -17,11 +17,13 @@
  */
 
 import React from 'react';
+import { Info } from 'design/Alert';
 
 import {
   CreateDatabaseDialog,
   CreateDatabaseDialogProps,
 } from './CreateDatabaseDialog';
+import { dbWithoutDbServerExistsErrorMsg, timeoutErrorMsg } from './const';
 
 export default {
   title: 'Teleport/Discover/Database/CreateDatabase/Dialog',
@@ -40,11 +42,34 @@ export const Success = () => (
   <CreateDatabaseDialog {...props} attempt={{ status: 'success' }} />
 );
 
+export const AllowSkipOnTimeout = () => (
+  <>
+    <Info>Devs: it should be same state as success</Info>
+    <CreateDatabaseDialog
+      {...props}
+      attempt={{ status: 'failed', statusText: timeoutErrorMsg }}
+    />
+  </>
+);
+
+export const AllowOverwrite = () => (
+  <CreateDatabaseDialog
+    {...props}
+    attempt={{
+      status: 'failed',
+      statusText: `A database with the name "some-name" ${dbWithoutDbServerExistsErrorMsg}. \
+          You can overwrite it, or use a different name and retry.`,
+    }}
+  />
+);
+
 const props: CreateDatabaseDialogProps = {
   pollTimeout: 8080000000,
   attempt: { status: 'processing' },
   retry: () => null,
   close: () => null,
   next: () => null,
+  onOverwrite: () => null,
+  onTimeout: () => null,
   dbName: 'db-name',
 };

web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabaseDialog.tsx

@@ -24,13 +24,16 @@ import {
   ButtonPrimary,
   ButtonSecondary,
   H2,
+  ButtonWarning,
 } from 'design';
 import * as Icons from 'design/Icon';
 import Dialog, { DialogContent } from 'design/DialogConfirmation';
 
 import { Timeout } from 'teleport/Discover/Shared/Timeout';
 import { TextIcon } from 'teleport/Discover/Shared';
 
+import { dbWithoutDbServerExistsErrorMsg, timeoutErrorMsg } from './const';
+
 import type { Attempt } from 'shared/hooks/useAttemptNext';
 
 export type CreateDatabaseDialogProps = {
@@ -39,6 +42,8 @@ export type CreateDatabaseDialogProps = {
   retry(): void;
   close(): void;
   next(): void;
+  onOverwrite(): void;
+  onTimeout(): void;
   dbName: string;
 };
 
@@ -49,28 +54,53 @@ export function CreateDatabaseDialog({
   close,
   next,
   dbName,
+  onOverwrite,
+  onTimeout,
 }: CreateDatabaseDialogProps) {
   let content: JSX.Element;
   if (attempt.status === 'failed') {
-    // TODO(bl-nero): Migrate this to alert boxes.
-    content = (
-      <>
-        <Flex mb={5} alignItems="center">
-          {' '}
-          <Icons.Warning size="large" ml={1} mr={2} color="error.main" />
-          <Text>{attempt.statusText}</Text>
-        </Flex>
-        <Flex>
-          <ButtonPrimary mr={3} width="50%" onClick={retry}>
-            Retry
-          </ButtonPrimary>
-          <ButtonSecondary width="50%" onClick={close}>
-            Close
-          </ButtonSecondary>
-        </Flex>
-      </>
-    );
-  } else if (attempt.status === 'processing') {
+    /**
+     * Most likely cause of timeout is when we found a matching db_service
+     * but no db_server heartbeats. Most likely cause is because db_service
+     * has been stopped but is not removed from teleport yet (there is some
+     * minutes delay on expiry).
+     *
+     * We allow the user to proceed to the next step to re-deploy (replace)
+     * the db_service that has been stopped.
+     */
+    if (attempt.statusText === timeoutErrorMsg) {
+      content = <SuccessContent dbName={dbName} onClick={onTimeout} />;
+    } else {
+      // Only allow overwriting if the database error
+      // states that it's a existing database without a db_server.
+      const canOverwriteDb = attempt.statusText.includes(
+        dbWithoutDbServerExistsErrorMsg
+      );
+
+      // TODO(bl-nero): Migrate this to alert boxes.
+      content = (
+        <>
+          <Flex mb={5} alignItems="center">
+            <Icons.Warning size="large" ml={1} mr={2} color="error.main" />
+            <Text>{attempt.statusText}</Text>
+          </Flex>
+          <Flex gap={3} width="100%">
+            <ButtonPrimary onClick={retry} style={{ flex: 1 }}>
+              Retry
+            </ButtonPrimary>
+            {canOverwriteDb && (
+              <ButtonWarning onClick={onOverwrite} style={{ flex: 1 }}>
+                Overwrite
+              </ButtonWarning>
+            )}
+            <ButtonSecondary onClick={close} style={{ flex: 1 }}>
+              Close
+            </ButtonSecondary>
+          </Flex>
+        </>
+      );
+    }
+  } else if (attempt.status === 'processing' || attempt.status === '') {
     content = (
       <>
         <AnimatedProgressBar mb={1} />
@@ -92,19 +122,8 @@ export function CreateDatabaseDialog({
         </ButtonPrimary>
       </>
     );
-  } else {
-    // success
-    content = (
-      <>
-        <Text mb={5}>
-          <Icons.Check size="small" ml={1} mr={2} color="success.main" />
-          Database "{dbName}" successfully registered
-        </Text>
-        <ButtonPrimary width="100%" onClick={next}>
-          Next
-        </ButtonPrimary>
-      </>
-    );
+  } else if (attempt.status === 'success') {
+    content = <SuccessContent dbName={dbName} onClick={next} />;
   }
 
   return (
@@ -121,3 +140,15 @@ export function CreateDatabaseDialog({
     </Dialog>
   );
 }
+
+const SuccessContent = ({ dbName, onClick }) => (
+  <>
+    <Text mb={5}>
+      <Icons.Check size="small" ml={1} mr={2} color="success.main" />
+      Database "{dbName}" successfully registered
+    </Text>
+    <ButtonPrimary width="100%" onClick={onClick}>
+      Next
+    </ButtonPrimary>
+  </>
+);

web/packages/teleport/src/Discover/Database/CreateDatabase/const.ts

@@ -0,0 +1,23 @@
+/**
+ * Teleport
+ * Copyright (C) 2024  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export const timeoutErrorMsg =
+  'Teleport could not detect your new database in time. Please try again.';
+
+export const dbWithoutDbServerExistsErrorMsg =
+  'already exists but there are no Teleport agents proxying it';