Web: replace side docs with sliding side panel

gravitational · Mar 4, 2025 · 5cde33f · 5cde33f
1 parent 49df8d6
commit 5cde33f
Show file tree

Hide file tree

Showing 8 changed files with 371 additions and 159 deletions.
diff --git a/web/packages/teleport/src/AuthConnectors/AuthConnectorEditor/AuthConnectorEditorContent.tsx b/web/packages/teleport/src/AuthConnectors/AuthConnectorEditor/AuthConnectorEditorContent.tsx
@@ -18,22 +18,20 @@
 
 import { Link as RouterLink } from 'react-router-dom';
 
-import { Link } from 'design';
 import { Alert } from 'design/Alert';
 import Box from 'design/Box';
 import { ButtonPrimary, ButtonSecondary } from 'design/Button';
 import Flex from 'design/Flex';
 import { ArrowBack } from 'design/Icon';
 import { Indicator } from 'design/Indicator';
-import { H1, H3 } from 'design/Text';
-import { P } from 'design/Text/Text';
+import { H1 } from 'design/Text';
 import TextEditor from 'shared/components/TextEditor';
 import { Attempt } from 'shared/hooks/useAsync';
 
-import { DesktopDescription } from 'teleport/AuthConnectors/styles/AuthConnectors.styles';
 import { FeatureBox, FeatureHeaderTitle } from 'teleport/components/Layout';
+import { InfoGuideWrapper } from 'teleport/components/SlidingSidePanel/InfoGuideSidePanel';
 
-import { description } from '../AuthConnectors';
+import { InfoGuide } from '../AuthConnectors';
 
 /**
  * AuthConnectorEditorContent is a the content of an Auth Connector editor page.
@@ -53,17 +51,20 @@ export function AuthConnectorEditorContent({
   return (
     <FeatureBox>
       <FeatureHeaderTitle py={3} mb={2}>
-        <Flex alignItems="center">
-          <ArrowBack
-            as={RouterLink}
-            mr={2}
-            size="large"
-            color="text.main"
-            to={backButtonRoute}
-          />
-          <Box mr={4}>
-            <H1>{title}</H1>
-          </Box>
+        <Flex alignItems="center" justifyContent="space-between">
+          <Flex alignItems="center">
+            <ArrowBack
+              as={RouterLink}
+              mr={2}
+              size="large"
+              color="text.main"
+              to={backButtonRoute}
+            />
+            <Box mr={4}>
+              <H1>{title}</H1>
+            </Box>
+          </Flex>
+          <InfoGuideWrapper guide={<InfoGuide isGitHub={isGithub} />} />
         </Flex>
       </FeatureHeaderTitle>
       {fetchAttempt.status === 'error' && (
@@ -107,35 +108,6 @@ export function AuthConnectorEditorContent({
               </ButtonSecondary>
             </Box>
           </Flex>
-          <DesktopDescription>
-            <H3 mb={3}>Auth Connectors</H3>
-            <P mb={3}>{description}</P>
-            {isGithub ? (
-              <P mb={2}>
-                Please
-                <Link
-                  color="text.main"
-                  href="https://goteleport.com/docs/admin-guides/access-controls/sso/github-sso/"
-                  target="_blank"
-                >
-                  view our documentation
-                </Link>{' '}
-                on how to configure a GitHub connector.
-              </P>
-            ) : (
-              <P>
-                Please{' '}
-                <Link
-                  color="text.main"
-                  href="https://goteleport.com/docs/admin-guides/access-controls/sso/"
-                  target="_blank"
-                >
-                  view our documentation
-                </Link>{' '}
-                for samples of each connector.
-              </P>
-            )}
-          </DesktopDescription>
         </Flex>
       )}
     </FeatureBox>

diff --git a/web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx b/web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx
@@ -19,18 +19,21 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router';
 
-import { Alert, Box, Flex, H3, Indicator, Link } from 'design';
-import { H2, P } from 'design/Text/Text';
+import { Alert, Box, Flex, Indicator } from 'design';
+import { H2 } from 'design/Text/Text';
 import { useAsync } from 'shared/hooks/useAsync';
 
 import {
-  DesktopDescription,
-  MobileDescription,
   ResponsiveAddButton,
   ResponsiveFeatureHeader,
 } from 'teleport/AuthConnectors/styles/AuthConnectors.styles';
 import { FeatureBox, FeatureHeaderTitle } from 'teleport/components/Layout';
 import { Route, Switch } from 'teleport/components/Router';
+import {
+  InfoParagraph,
+  InfoTitle,
+  ReferenceLinks,
+} from 'teleport/components/SlidingSidePanel/InfoGuideSidePanel';
 import useResources from 'teleport/components/useResources';
 import cfg from 'teleport/config';
 import { DefaultAuthConnector, Resource } from 'teleport/services/resources';
@@ -141,7 +144,6 @@ export function AuthConnectors() {
     <FeatureBox>
       <ResponsiveFeatureHeader>
         <FeatureHeaderTitle>Auth Connectors</FeatureHeaderTitle>
-        <MobileDescription>{description}</MobileDescription>
         <ResponsiveAddButton
           fill="border"
           onClick={() =>
@@ -188,22 +190,6 @@ export function AuthConnectors() {
             </Box>
             <CtaConnectors />
           </Flex>
-          <DesktopDescription>
-            <H3 mb={3}>Auth Connectors</H3>
-            <P mb={3}>{description}</P>
-            <P mb={2}>
-              Please{' '}
-              <Link
-                color="text.main"
-                // This URL is the OSS documentation for auth connectors
-                href="https://goteleport.com/docs/admin-guides/access-controls/sso/github-sso/"
-                target="_blank"
-              >
-                view our documentation
-              </Link>{' '}
-              on how to configure a GitHub connector.
-            </P>
-          </DesktopDescription>
         </Flex>
       )}
       {resources.status === 'removing' && (
@@ -219,3 +205,27 @@ export function AuthConnectors() {
     </FeatureBox>
   );
 }
+
+export const InfoGuide = ({ isGitHub = false }) => (
+  <Box>
+    <InfoTitle>Auth Connectors</InfoTitle>
+    <InfoParagraph>
+      Auth connectors allow Teleport to authenticate users via an external
+      identity source such as Okta, Microsoft Entra ID, GitHub, etc. This
+      authentication method is commonly known as single sign-on (SSO).
+    </InfoParagraph>
+    <ReferenceLinks
+      links={[
+        isGitHub
+          ? {
+              title: 'Configure GitHub connector',
+              href: 'https://goteleport.com/docs/admin-guides/access-controls/sso/github-sso/',
+            }
+          : {
+              title: 'Samples of different connectors',
+              href: 'https://goteleport.com/docs/admin-guides/access-controls/sso/',
+            },
+      ]}
+    />
+  </Box>
+);
diff --git a/web/packages/teleport/src/Bots/Add/AddBotsPicker.tsx b/web/packages/teleport/src/Bots/Add/AddBotsPicker.tsx
@@ -24,6 +24,7 @@ import { Server } from 'design/Icon';
 import { P } from 'design/Text/Text';
 
 import { FeatureHeader, FeatureHeaderTitle } from 'teleport/components/Layout';
+import { InfoGuideWrapper } from 'teleport/components/SlidingSidePanel/InfoGuideSidePanel';
 import { ToolTipNoPermBadge } from 'teleport/components/ToolTipNoPermBadge';
 import cfg from 'teleport/config';
 import { IntegrationTile } from 'teleport/Integrations';
@@ -34,6 +35,7 @@ import {
 } from 'teleport/services/userEvent';
 import useTeleport from 'teleport/useTeleport';
 
+import { InfoGuide } from '../InfoGuide';
 import { BotFlowType } from '../types';
 
 type BotIntegration = {
@@ -135,8 +137,9 @@ export function AddBotsPicker() {
   const ctx = useTeleport();
   return (
     <>
-      <FeatureHeader>
+      <FeatureHeader justifyContent="space-between">
         <FeatureHeaderTitle>Select Bot Type</FeatureHeaderTitle>
+        <InfoGuideWrapper guide={<InfoGuide />} />
       </FeatureHeader>
 
       <P mb="5">

diff --git a/web/packages/teleport/src/Bots/InfoGuide.tsx b/web/packages/teleport/src/Bots/InfoGuide.tsx
@@ -0,0 +1,80 @@
+/**
+ * Teleport
+ * Copyright (C) 2025 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 Box from 'design/Box';
+import { Mark } from 'design/Mark';
+
+import {
+  InfoExternalTextLink,
+  InfoParagraph,
+  InfoTitle,
+  ReferenceLinks,
+} from 'teleport/components/SlidingSidePanel/InfoGuideSidePanel';
+
+const InfoGuideReferenceLinks = {
+  Bots: {
+    title: 'What are Bots',
+    href: 'https://goteleport.com/docs/enroll-resources/machine-id/introduction/#bots',
+  },
+  TBots: {
+    title: 'What is tbot',
+    href: 'https://goteleport.com/docs/reference/architecture/machine-id-architecture/#tbot',
+  },
+  AccessResources: {
+    title: 'Access your Infrastructure with Machine ID',
+    href: 'https://goteleport.com/docs/enroll-resources/machine-id/access-guides/',
+  },
+};
+
+export const InfoGuide = () => (
+  <Box>
+    <InfoTitle>Bots</InfoTitle>
+    <InfoParagraph>
+      <InfoExternalTextLink
+        target="_blank"
+        href={InfoGuideReferenceLinks.Bots.href}
+      >
+        Bots
+      </InfoExternalTextLink>{' '}
+      are identities a machine can use to authenticate to the Teleport cluster.
+      This allows processes like automated tests,
+      Infrastructure-as-Code/provisioning tools like Terraform or Ansible and
+      scripts to{' '}
+      <InfoExternalTextLink
+        target="_blank"
+        href={InfoGuideReferenceLinks.AccessResources.href}
+      >
+        access resources
+      </InfoExternalTextLink>{' '}
+      protected by the Teleport proxy.
+    </InfoParagraph>
+    <InfoParagraph>
+      Bots use the{' '}
+      <InfoExternalTextLink
+        target="_blank"
+        href={InfoGuideReferenceLinks.TBots.href}
+      >
+        tbot
+      </InfoExternalTextLink>{' '}
+      binary rather than the <Mark>teleport</Mark> binary used for other agents.{' '}
+      <Mark>tbot</Mark> outputs identify files such as certificates and
+      Kubernetes configuration files for processes to use for authentication.
+    </InfoParagraph>
+    <ReferenceLinks links={Object.values(InfoGuideReferenceLinks)} />
+  </Box>
+);
diff --git a/web/packages/teleport/src/Bots/List/Bots.tsx b/web/packages/teleport/src/Bots/List/Bots.tsx
@@ -29,6 +29,7 @@ import {
   FeatureHeader,
   FeatureHeaderTitle,
 } from 'teleport/components/Layout';
+import { InfoGuideWrapper } from 'teleport/components/SlidingSidePanel/InfoGuideSidePanel';
 import cfg from 'teleport/config';
 import {
   deleteBot,
@@ -39,6 +40,7 @@ import {
 import { FlatBot } from 'teleport/services/bot/types';
 import useTeleport from 'teleport/useTeleport';
 
+import { InfoGuide } from '../InfoGuide';
 import { EmptyState } from './EmptyState/EmptyState';
 
 export function Bots() {
@@ -143,30 +145,32 @@ export function Bots() {
       <FeatureHeader>
         <FeatureHeaderTitle>Bots</FeatureHeaderTitle>
         <Box ml="auto">
-          <HoverTooltip
-            tipContent={
-              hasAddBotPermissions
-                ? ''
-                : `Insufficient permissions. Reach out to your Teleport administrator
+          <InfoGuideWrapper guide={<InfoGuide />}>
+            <HoverTooltip
+              tipContent={
+                hasAddBotPermissions
+                  ? ''
+                  : `Insufficient permissions. Reach out to your Teleport administrator
     to request bot creation permissions.`
-            }
-          >
-            <Button
-              intent="primary"
-              fill={
-                fetchAttempt.status === 'success' && bots.length === 0
-                  ? 'filled'
-                  : 'border'
               }
-              ml="auto"
-              width="240px"
-              as={Link}
-              to={cfg.getBotsNewRoute()}
-              disabled={!hasAddBotPermissions}
             >
-              Enroll New Bot
-            </Button>
-          </HoverTooltip>
+              <Button
+                intent="primary"
+                fill={
+                  fetchAttempt.status === 'success' && bots.length === 0
+                    ? 'filled'
+                    : 'border'
+                }
+                ml="auto"
+                width="240px"
+                as={Link}
+                to={cfg.getBotsNewRoute()}
+                disabled={!hasAddBotPermissions}
+              >
+                Enroll New Bot
+              </Button>
+            </HoverTooltip>
+          </InfoGuideWrapper>
         </Box>
       </FeatureHeader>
       {fetchAttempt.status == 'failed' && (