[Discover] Refactor DownloadScript Screens (#1367)

- Refactor join token api handler and useJoinToken - Add agent matcher label to join token request - Change join token requests fields into its own type - Add db script api handler - Revert useJoinToken changes (removes runNow) and accepts optional agent matcher label - Extract reusable logic for polling - Reorganize shared stories - Refactor Server's DownloadScript (use suspense and fallback) - Refactor Kube HelmChart (DownloadScript) with less hacky ways - Create DownloadScript for database (tentativly)
gravitational · Nov 18, 2022 · d0cedc2 · d0cedc2
1 parent fea8624
commit d0cedc2
Show file tree

Hide file tree

Showing 35 changed files with 2,910 additions and 1,975 deletions.
diff --git a/web/packages/teleport/src/Apps/AddApp/useAddApp.ts b/web/packages/teleport/src/Apps/AddApp/useAddApp.ts
@@ -36,7 +36,7 @@ export default function useAddApp(ctx: TeleportContext) {
 
   function createToken() {
     return run(() =>
-      ctx.joinTokenService.fetchJoinToken(['App']).then(setToken)
+      ctx.joinTokenService.fetchJoinToken({ roles: ['App'] }).then(setToken)
     );
   }
 

diff --git a/web/packages/teleport/src/Databases/AddDatabase/useAddDatabase.ts b/web/packages/teleport/src/Databases/AddDatabase/useAddDatabase.ts
@@ -31,7 +31,7 @@ export default function useAddDatabase(ctx: TeleportContext) {
 
   function createJoinToken() {
     return run(() =>
-      ctx.joinTokenService.fetchJoinToken(['Db']).then(setToken)
+      ctx.joinTokenService.fetchJoinToken({ roles: ['Db'] }).then(setToken)
     );
   }
 

diff --git a/...s/DownloadScript/DownloadScript.story.tsx → ...e/DownloadScript/DownloadScript.story.tsx b/...s/DownloadScript/DownloadScript.story.tsx → ...e/DownloadScript/DownloadScript.story.tsx
@@ -29,20 +29,29 @@ import { userContext } from 'teleport/mocks/contexts';
 
 import DownloadScript from './DownloadScript';
 
+const { worker, rest } = window.msw;
+
 export default {
-  title: 'Teleport/Discover/Kube/DownloadScripts',
+  title: 'Teleport/Discover/Database/DownloadScript',
   decorators: [
     Story => {
       // Reset request handlers added in individual stories.
-      window.msw.worker.resetHandlers();
+      worker.resetHandlers();
       clearCachedJoinTokenResult();
       return <Story />;
     },
   ],
 };
 
+export const Init = () => {
+  return (
+    <Provider>
+      <DownloadScript />
+    </Provider>
+  );
+};
+
 export const Polling = () => {
-  const { worker, rest } = window.msw;
   // Use default fetch token handler defined in mocks/handlers
 
   worker.use(
@@ -51,14 +60,13 @@ export const Polling = () => {
     })
   );
   return (
-    <Provider interval={100000}>
+    <Provider>
       <DownloadScript runJoinTokenPromise={true} />
     </Provider>
   );
 };
 
 export const PollingSuccess = () => {
-  const { worker, rest } = window.msw;
   // Use default fetch token handler defined in mocks/handlers
 
   worker.use(
@@ -67,14 +75,13 @@ export const PollingSuccess = () => {
     })
   );
   return (
-    <Provider>
+    <Provider interval={5}>
       <DownloadScript runJoinTokenPromise={true} />
     </Provider>
   );
 };
 
 export const PollingError = () => {
-  const { worker, rest } = window.msw;
   // Use default fetch token handler defined in mocks/handlers
 
   worker.use(
@@ -83,27 +90,25 @@ export const PollingError = () => {
     })
   );
   return (
-    <Provider timeout={20} interval={100000}>
+    <Provider timeout={20}>
       <DownloadScript runJoinTokenPromise={true} />
     </Provider>
   );
 };
 export const Processing = () => {
-  const { worker, rest } = window.msw;
   worker.use(
     rest.post(cfg.api.joinTokenPath, (req, res, ctx) => {
       return res(ctx.delay('infinite'));
     })
   );
   return (
-    <Provider>
+    <Provider interval={5}>
       <DownloadScript runJoinTokenPromise={true} />
     </Provider>
   );
 };
 
 export const Failed = () => {
-  const { worker, rest } = window.msw;
   worker.use(
     rest.post(cfg.api.joinTokenPath, (req, res, ctx) => {
       return res.once(ctx.status(500));
@@ -125,7 +130,7 @@ const Provider = props => {
         <JoinTokenProvider timeout={props.timeout || 100000}>
           <PingTeleportProvider
             timeout={props.timeout || 100000}
-            interval={props.interval || 5}
+            interval={props.interval || 100000}
             resourceKind={ResourceKind.Kubernetes}
           >
             {props.children}