From 1e419898f3b2139f4cf644759f4b6221c3bcd1ab Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Thu, 7 Nov 2024 11:46:49 -0800
Subject: [PATCH] Web: attempt state with AddApp component (#48616)

---
 .../src/Apps/AddApp/Manually.test.tsx         | 110 ++++++++++++++++++
 .../teleport/src/Apps/AddApp/Manually.tsx     |   5 +-
 2 files changed, 113 insertions(+), 2 deletions(-)
 create mode 100644 web/packages/teleport/src/Apps/AddApp/Manually.test.tsx

diff --git a/web/packages/teleport/src/Apps/AddApp/Manually.test.tsx b/web/packages/teleport/src/Apps/AddApp/Manually.test.tsx
new file mode 100644
index 0000000000000..c7d9ca011ee1c
--- /dev/null
+++ b/web/packages/teleport/src/Apps/AddApp/Manually.test.tsx
@@ -0,0 +1,110 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  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/>.
+ */
+
+import React from 'react';
+import { render, screen } from 'design/utils/testing';
+
+import { Manually } from './Manually';
+
+test('loading state renders', async () => {
+  const token = {
+    id: 'token',
+    expiryText: '',
+    expiry: null,
+    safeName: '',
+    isStatic: false,
+    method: 'kubernetes',
+    roles: [],
+    content: '',
+  };
+  render(
+    <Manually
+      isEnterprise={false}
+      isAuthTypeLocal={true}
+      version="v17"
+      user="llama"
+      token={token}
+      attempt={{ status: 'processing' }}
+      onClose={() => {}}
+      createToken={() => null}
+    />
+  );
+
+  await screen.findByTestId('indicator');
+  expect(screen.queryByText(/step 1/i)).not.toBeInTheDocument();
+});
+
+test('success state renders', async () => {
+  const token = {
+    id: 'token',
+    expiryText: '',
+    expiry: null,
+    safeName: '',
+    isStatic: false,
+    method: 'kubernetes',
+    roles: [],
+    content: '',
+  };
+  render(
+    <Manually
+      isEnterprise={false}
+      isAuthTypeLocal={true}
+      version="v17"
+      user="llama"
+      token={token}
+      attempt={{ status: 'success' }}
+      onClose={() => {}}
+      createToken={() => null}
+    />
+  );
+
+  expect(screen.getByText(/step 1/i)).toBeInTheDocument();
+  expect(screen.getByText(/token will be valid for/i)).toBeInTheDocument();
+  expect(screen.queryByText(/generate a join token/i)).not.toBeInTheDocument();
+});
+
+test('failed state renders', async () => {
+  const token = {
+    id: 'token',
+    expiryText: '',
+    expiry: null,
+    safeName: '',
+    isStatic: false,
+    method: 'kubernetes',
+    roles: [],
+    content: '',
+  };
+  render(
+    <Manually
+      isEnterprise={false}
+      isAuthTypeLocal={true}
+      version="v17"
+      user="llama"
+      token={token}
+      attempt={{ status: 'failed' }}
+      onClose={() => {}}
+      createToken={() => null}
+    />
+  );
+
+  expect(screen.getByText(/step 1/i)).toBeInTheDocument();
+  expect(screen.getByText(/generate a join token/i)).toBeInTheDocument();
+  expect(
+    screen.queryByText(/token will be valid for/i)
+  ).not.toBeInTheDocument();
+});
diff --git a/web/packages/teleport/src/Apps/AddApp/Manually.tsx b/web/packages/teleport/src/Apps/AddApp/Manually.tsx
index 95890a2817790..da48610baf801 100644
--- a/web/packages/teleport/src/Apps/AddApp/Manually.tsx
+++ b/web/packages/teleport/src/Apps/AddApp/Manually.tsx
@@ -69,9 +69,10 @@ export function Manually({
           - Download Teleport package to your computer
           <DownloadLinks isEnterprise={isEnterprise} version={version} />
         </Box>
-        {attempt.status === 'failed' ? (
+        {attempt.status === 'failed' && (
           <StepsWithoutToken host={host} tshLoginCmd={tshLoginCmd} />
-        ) : (
+        )}
+        {attempt.status === 'success' && (
           <StepsWithToken createToken={createToken} host={host} token={token} />
         )}
       </DialogContent>