Simplify manual db join (#653)

* Add hook `useAddDatabase`

* Update `AddDatabase` to use hook and use generated token when available

packages/teleport/src/Databases/AddDatabase/AddDatabase.story.test.tsx

@@ -0,0 +1,44 @@
+/*
+Copyright 2022 Gravitational, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { render, screen } from 'design/utils/testing';
+import {
+  WithToken,
+  Processing,
+  WithoutTokenLocal,
+  WithoutTokenSSO,
+} from './AddDatabase.story';
+
+test('render without token', async () => {
+  render(<WithoutTokenLocal />);
+  expect(screen.getByTestId('Modal')).toMatchSnapshot();
+});
+
+test('render processing', async () => {
+  render(<Processing />);
+  expect(screen.getByTestId('Modal')).toMatchSnapshot();
+});
+
+test('render with token', async () => {
+  render(<WithToken />);
+  expect(screen.getByTestId('Modal')).toMatchSnapshot();
+});
+
+test('render without token with SSO auth', async () => {
+  render(<WithoutTokenSSO />);
+  expect(screen.getByTestId('Modal')).toMatchSnapshot();
+});

packages/teleport/src/Databases/AddDatabase/AddDatabase.story.tsx

@@ -15,18 +15,37 @@ limitations under the License.
 */
 
 import React from 'react';
-import Component from './AddDatabase';
+import { AuthType } from 'teleport/services/user';
+import { AddDatabase } from './AddDatabase';
 
 export default {
   title: 'Teleport/Databases/Add',
 };
 
-export const Add = () => (
-  <Component
-    isEnterprise={false}
-    username="yassine"
-    version="6.1.3"
-    onClose={() => null}
-    authType="local"
-  />
+export const WithToken = () => <AddDatabase {...props} />;
+export const Processing = () => (
+  <AddDatabase {...props} attempt={{ status: 'processing' }} />
 );
+export const WithoutTokenLocal = () => (
+  <AddDatabase {...props} attempt={{ status: 'failed' }} />
+);
+export const WithoutTokenSSO = () => (
+  <AddDatabase {...props} attempt={{ status: 'failed' }} authType="sso" />
+);
+
+const props = {
+  isEnterprise: false,
+  username: 'yassine',
+  version: '6.1.3',
+  onClose: () => null,
+  authType: 'local' as AuthType,
+  attempt: {
+    status: 'success',
+    statusText: '',
+  } as any,
+  token: 'some-join-token-hash',
+  createJoinToken() {
+    return Promise.resolve(null);
+  },
+  expiry: '4 hours',
+};

packages/teleport/src/Databases/AddDatabase/AddDatabase.test.tsx

@@ -16,7 +16,8 @@
 
 import React from 'react';
 import { fireEvent, render, screen } from 'design/utils/testing';
-import AddDialog, { Props } from './AddDatabase';
+import { Props, AddDatabase } from './AddDatabase';
+import { State } from './useAddDatabase';
 
 describe('correct database add command generated with given input', () => {
   test.each`
@@ -32,7 +33,7 @@ describe('correct database add command generated with given input', () => {
   `(
     'should generate correct command for input: $input',
     ({ input, output }) => {
-      render(<AddDialog {...props} />);
+      render(<AddDatabase {...props} />);
 
       const dropDownInputEl = document.querySelector('input');
 
@@ -45,29 +46,19 @@ describe('correct database add command generated with given input', () => {
   );
 });
 
-test('correct tsh login command generated with local authType', () => {
-  render(<AddDialog {...props} />);
-  const output = 'tsh login --proxy=localhost:443 --auth=local --user=yassine';
-
-  expect(screen.queryByText(output)).not.toBeNull();
-});
-
-test('correct tsh login command generated with sso authType', () => {
-  render(<AddDialog {...props} authType="sso" />);
-  const output = 'tsh login --proxy=localhost:443';
-
-  expect(screen.queryByText(output)).not.toBeNull();
-});
-
-test('render instructions dialog for adding database', () => {
-  render(<AddDialog {...props} />);
-  expect(screen.getByTestId('Modal')).toMatchSnapshot();
-});
-
-const props: Props = {
+const props: Props & State = {
   isEnterprise: false,
   username: 'yassine',
   version: '6.1.3',
   onClose: () => null,
   authType: 'local',
+  attempt: {
+    status: 'failed',
+    statusText: '',
+  } as any,
+  token: 'some-token',
+  createJoinToken() {
+    return Promise.resolve(null);
+  },
+  expiry: '4 hours',
 };