[v16] WebDiscover: Improve RDS enrollment flow

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

@@ -56,6 +56,7 @@ export function CreateDatabaseView({
   isDbCreateErr,
   prevStep,
   nextStep,
+  handleOnTimeout,
 }: State) {
   const [dbName, setDbName] = useState('');
   const [dbUri, setDbUri] = useState('');
@@ -73,7 +74,10 @@ export function CreateDatabaseView({
     }
   }, [isDbCreateErr]);
 
-  function handleOnProceed(validator: Validator, retry = false) {
+  function handleOnProceed(
+    validator: Validator,
+    { overwriteDb = false, retry = false } = {}
+  ) {
     if (!validator.validate()) {
       return;
     }
@@ -84,12 +88,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 (
@@ -187,7 +194,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

@@ -23,13 +23,16 @@ import {
   AnimatedProgressBar,
   ButtonPrimary,
   ButtonSecondary,
+  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 = {
@@ -38,6 +41,8 @@ export type CreateDatabaseDialogProps = {
   retry(): void;
   close(): void;
   next(): void;
+  onOverwrite(): void;
+  onTimeout(): void;
   dbName: string;
 };
 
@@ -48,27 +53,53 @@ export function CreateDatabaseDialog({
   close,
   next,
   dbName,
+  onOverwrite,
+  onTimeout,
 }: CreateDatabaseDialogProps) {
   let content: JSX.Element;
   if (attempt.status === 'failed') {
-    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} />
@@ -90,19 +121,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 +141,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/Shared/AutoDiscovery/SelfHostedAutoDiscoveryDirections.story.tsx → web/packages/teleport/src/Discover/Database/CreateDatabase/const.ts

@@ -15,20 +15,9 @@
  * 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/>.
  */
-import React from 'react';
 
-import { SelfHostedAutoDiscoverDirections } from './SelfHostedAutoDiscoverDirections';
+export const timeoutErrorMsg =
+  'Teleport could not detect your new database in time. Please try again.';
 
-export default {
-  title: 'Teleport/Discover/Shared/SelfHostedAutoDiscoveryDirections',
-};
-
-export const Directions = () => {
-  return (
-    <SelfHostedAutoDiscoverDirections
-      clusterPublicUrl="https://teleport.example.com"
-      discoveryGroupName="test-group"
-      setDiscoveryGroupName={() => {}}
-    />
-  );
-};
+export const dbWithoutDbServerExistsErrorMsg =
+  'already exists but there are no Teleport agents proxying it';

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

@@ -249,6 +249,7 @@ const newDatabaseReq: CreateDatabaseRequest = {
 };
 
 jest.useFakeTimers();
+const defaultIsCloud = cfg.isCloud;
 
 describe('registering new databases, mainly error checking', () => {
   const discoverCtx: DiscoverContextState = {
@@ -277,6 +278,7 @@ describe('registering new databases, mainly error checking', () => {
   let wrapper;
 
   beforeEach(() => {
+    cfg.isCloud = true;
     jest.spyOn(api, 'get').mockResolvedValue([]); // required for fetchClusterAlerts
 
     jest
@@ -313,6 +315,7 @@ describe('registering new databases, mainly error checking', () => {
   });
 
   afterEach(() => {
+    cfg.isCloud = defaultIsCloud;
     jest.clearAllMocks();
   });
 
@@ -344,6 +347,9 @@ describe('registering new databases, mainly error checking', () => {
     // of steps to skip.
     result.current.nextStep();
     expect(discoverCtx.nextStep).toHaveBeenCalledWith(2);
+    cfg.isCloud = false;
+    result.current.nextStep();
+    expect(discoverCtx.nextStep).toHaveBeenCalledWith(3);
   });
 
   test('continue polling when poll result returns with iamPolicyStatus field set to "pending"', async () => {
@@ -399,6 +405,9 @@ describe('registering new databases, mainly error checking', () => {
     result.current.nextStep();
     // Skips both deploy service AND IAM policy step.
     expect(discoverCtx.nextStep).toHaveBeenCalledWith(3);
+    cfg.isCloud = false;
+    result.current.nextStep();
+    expect(discoverCtx.nextStep).toHaveBeenCalledWith(4);
   });
 
   test('stops polling when poll result returns with iamPolicyStatus field set to "unspecified"', async () => {
@@ -467,6 +476,9 @@ describe('registering new databases, mainly error checking', () => {
     // number of steps to skip defined.
     result.current.nextStep();
     expect(discoverCtx.nextStep).toHaveBeenCalledWith();
+    cfg.isCloud = false;
+    result.current.nextStep();
+    expect(discoverCtx.nextStep).toHaveBeenCalledWith(2);
   });
 
   test('when failed to create db, stops flow', async () => {