abstracts discover overview content determination

gravitational · Jan 17, 2025 · 85903ae · 85903ae
1 parent 2a757b1
commit 85903ae
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 32 deletions.
diff --git a/web/packages/teleport/src/Discover/Shared/Overview/Overview.tsx b/web/packages/teleport/src/Discover/Shared/Overview/Overview.tsx
@@ -16,47 +16,30 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import {
-  ActionButtons,
-  Header,
-  HeaderSubtitle,
-} from 'teleport/Discover/Shared';
+import { Subtitle1 } from 'design';
+
+import { ActionButtons, Header } from 'teleport/Discover/Shared';
+import { Overview as IOverview } from 'teleport/Discover/Shared/Overview/types';
 import { useDiscover } from 'teleport/Discover/useDiscover';
 
+import { content } from './content';
+
 export function Overview() {
-  const { prevStep, nextStep, isUpdateFlow } = useDiscover();
+  const { prevStep, nextStep, resourceSpec, isUpdateFlow } = useDiscover();
+
+  if (!(resourceSpec.id in content)) {
+    //todo handle error
+  }
 
-  const pageItems = {
-    kubernetes: {
-      overview: [
-        `This guide uses Helm to install the Teleport agent into a cluster,
-        and by default turns on auto-discovery of all apps in the cluster.`,
-      ],
-      prerequisites: [
-        'Egress from your Kubernetes cluster to Teleport.',
-        'Helm installed on your local machine.',
-        'Kubernetes API access to install the Helm chart.',
-      ],
-    },
-  };
+  let overview: IOverview = content[resourceSpec.id];
 
   return (
     <>
       <Header>Overview</Header>
-      <ul>
-        {pageItems.kubernetes.overview.map((item, index) => (
-          <li key={index}>{item}</li>
-        ))}
-      </ul>
+      {overview.OverviewContent()}
       <Header>Prerequisites</Header>
-      <HeaderSubtitle>
-        Make sure you have these ready before continuing.
-      </HeaderSubtitle>
-      <ul>
-        {pageItems.kubernetes.prerequisites.map((item, index) => (
-          <li key={index}>{item}</li>
-        ))}
-      </ul>
+      <Subtitle1>Make sure you have these ready before continuing.</Subtitle1>
+      {overview.PrerequisiteContent()}
       <ActionButtons
         onProceed={nextStep}
         onPrev={isUpdateFlow ? null : prevStep}

diff --git a/web/packages/teleport/src/Discover/Shared/Overview/content.tsx b/web/packages/teleport/src/Discover/Shared/Overview/content.tsx
@@ -0,0 +1,22 @@
+import { Overview } from 'teleport/Discover/Shared/Overview/types';
+import { DiscoverGuideId } from 'teleport/services/userPreferences/discoverPreference';
+
+export const content: { [key in DiscoverGuideId]?: Overview } = {
+  [DiscoverGuideId.Kubernetes]: {
+    OverviewContent: () => (
+      <ul>
+        <li>
+          This guide uses Helm to install the Teleport agent into a cluster, and
+          by default turns on auto-discovery of all apps in the cluster.
+        </li>
+      </ul>
+    ),
+    PrerequisiteContent: () => (
+      <ul>
+        <li>Egress from your Kubernetes cluster to Teleport.</li>
+        <li>Helm installed on your local machine.</li>
+        <li>Kubernetes API access to install the Helm chart.</li>
+      </ul>
+    ),
+  },
+};
diff --git a/web/packages/teleport/src/Discover/Shared/Overview/types.ts b/web/packages/teleport/src/Discover/Shared/Overview/types.ts
@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+
+export interface Prerequisite {
+  content: string;
+  details?: string[];
+}
+
+export interface Overview {
+  OverviewContent: () => ReactElement;
+  PrerequisiteContent: () => ReactElement;
+}