Fixes DocumentNodes.story.tsx (#42788)

* Fixes DocumentNodes.story.tsx and corresponding test (hopefully) * eliminate fetchNodes and fetchClusters in favor of calling services directly
gravitational · Jun 11, 2024 · 8f6b113 · 8f6b113
1 parent c992bc5
commit 8f6b113
Show file tree

Hide file tree

Showing 5 changed files with 231 additions and 140 deletions.
diff --git a/web/packages/teleport/src/Console/DocumentNodes/ClusterSelector/ClusterSelector.story.tsx b/web/packages/teleport/src/Console/DocumentNodes/ClusterSelector/ClusterSelector.story.tsx
@@ -36,7 +36,7 @@ export const Component = () => {
 
 export const Loading = () => {
   const ctx = mockContext();
-  ctx.fetchClusters = () => {
+  ctx.clustersService.fetchClusters = () => {
     return new Promise<any>(() => null);
   };
 
@@ -47,7 +47,7 @@ export const Loading = () => {
 
 export const Failed = () => {
   const ctx = mockContext();
-  ctx.fetchClusters = () => {
+  ctx.clustersService.fetchClusters = () => {
     return Promise.reject(new Error('server error'));
   };
 
@@ -74,7 +74,7 @@ function renderlusterSelector(ctx, { ...props } = {}) {
 
 function mockContext() {
   const ctx = new ConsoleContext();
-  ctx.fetchClusters = () => {
+  ctx.clustersService.fetchClusters = () => {
     return Promise.resolve<any>(clusters);
   };
 

diff --git a/web/packages/teleport/src/Console/DocumentNodes/ClusterSelector/ClusterSelector.tsx b/web/packages/teleport/src/Console/DocumentNodes/ClusterSelector/ClusterSelector.tsx
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, LabelInput } from 'design';
 import { SelectAsync } from 'shared/components/Select';
 
@@ -29,8 +29,8 @@ export default function ClusterSelector({
   ...styles
 }) {
   const consoleCtx = useConsoleContext();
-  const [errorMessage, setError] = React.useState(null);
-  const [options, setOptions] = React.useState<Option[]>([]);
+  const [errorMessage, setError] = useState(null);
+  const [options, setOptions] = useState<Option[]>([]);
 
   const selectedOption = {
     value,
@@ -44,7 +44,7 @@ export default function ClusterSelector({
   function onLoadOptions(inputValue: string) {
     let promise = Promise.resolve(options);
     if (options.length === 0) {
-      promise = consoleCtx
+      promise = consoleCtx.clustersService
         .fetchClusters()
         .then(clusters =>
           clusters.map(o => ({

diff --git a/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.story.tsx b/web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.story.tsx
@@ -40,7 +40,7 @@ export const Document = ({ value }: { value: ConsoleCtx }) => {
 
 export const Loading = () => {
   const ctx = createContext();
-  ctx.fetchNodes = () => new Promise(() => null);
+  ctx.nodesService.fetchNodes = () => new Promise(() => null);
   return (
     <TestLayout ctx={ctx}>
       <DocumentNodes doc={doc} visible={true} />
@@ -50,20 +50,22 @@ export const Loading = () => {
 
 export const Failed = () => {
   const ctx = createContext();
-  ctx.fetchNodes = () => Promise.reject<any>(new Error('Failed to load nodes'));
+  ctx.nodesService.fetchNodes = () =>
+    Promise.reject<any>(new Error('Failed to load nodes'));
   return (
     <TestLayout ctx={ctx}>
       <DocumentNodes doc={doc} visible={true} />
     </TestLayout>
   );
 };
 
-export function createContext() {
+export function createContext(): ConsoleCtx {
   const ctx = new ConsoleCtx();
 
-  ctx.fetchClusters = () => {
+  ctx.clustersService.fetchClusters = () => {
     return Promise.resolve<any>(clusters);
   };
+
   ctx.nodesService.fetchNodes = () => {
     return Promise.resolve({ agents: nodes, totalCount: nodes.length });
   };
@@ -72,7 +74,7 @@ export function createContext() {
 }
 
 const doc = {
-  clusterId: 'cluseter-1',
+  clusterId: 'cluster-1',
   created: new Date('2019-05-13T20:18:09Z'),
   kind: 'nodes',
   url: 'localhost',
@@ -84,14 +86,14 @@ const doc = {
 
 const clusters = [
   {
-    clusterId: 'cluseter-1',
+    clusterId: 'cluster-1',
     connected: new Date(),
     connectedText: '',
     status: '',
     url: '',
   },
   {
-    clusterId: 'cluseter-2',
+    clusterId: 'cluster-2',
     connected: new Date(),
     connectedText: '',
     status: '',
@@ -106,7 +108,7 @@ const nodes: Node[] = [
     tunnel: false,
     sshLogins: ['dev', 'root'],
     id: '104',
-    clusterId: 'cluseter-1',
+    clusterId: 'cluster-1',
     hostname: 'fujedu',
     addr: '172.10.1.20:3022',
     labels: [
@@ -126,7 +128,7 @@ const nodes: Node[] = [
     tunnel: false,
     sshLogins: ['dev', 'root'],
     id: '170',
-    clusterId: 'cluseter-1',
+    clusterId: 'cluster-1',
     hostname: 'facuzguv',
     addr: '172.10.1.42:3022',
     labels: [
@@ -146,7 +148,7 @@ const nodes: Node[] = [
     tunnel: true,
     sshLogins: ['dev', 'root'],
     id: '192',
-    clusterId: 'cluseter-1',
+    clusterId: 'cluster-1',
     hostname: 'duzsevkig',
     addr: '172.10.1.156:3022',
     labels: [
@@ -166,7 +168,7 @@ const nodes: Node[] = [
     tunnel: true,
     sshLogins: ['dev', 'root'],
     id: '64',
-    clusterId: 'cluseter-1',
+    clusterId: 'cluster-1',
     hostname: 'kuhinur',
     addr: '172.10.1.145:3022',
     labels: [
@@ -186,7 +188,7 @@ const nodes: Node[] = [
     tunnel: false,
     sshLogins: ['dev', 'root'],
     id: '81',
-    clusterId: 'cluseter-1',
+    clusterId: 'cluster-1',
     hostname: 'zebpecda',
     addr: '172.10.1.24:3022',
     labels: [