gravitational · kimlisa · Mar 10, 2025
diff --git a/web/packages/teleport/src/Clusters/ManageCluster/ManageCluster.story.tsx b/web/packages/teleport/src/Clusters/ManageCluster/ManageCluster.story.tsx
@@ -21,6 +21,7 @@ import { MemoryRouter } from 'react-router';
 
 import { Route } from 'teleport/components/Router';
 import { ContextProvider } from 'teleport/index';
+import { InfoGuidePanelProvider } from 'teleport/Main/InfoGuideContext';
 import { ContentMinWidth } from 'teleport/Main/Main';
 import { createTeleportContext } from 'teleport/mocks/contexts';
 
@@ -38,11 +39,13 @@ function render(fetchClusterDetails: (clusterId: string) => Promise<any>) {
   return (
     <MemoryRouter initialEntries={['/clusters/test-cluster']}>
       <Route path="/clusters/:clusterId">
-        <ContentMinWidth>
-          <ContextProvider ctx={ctx}>
-            <ManageCluster />
-          </ContextProvider>
-        </ContentMinWidth>
+        <InfoGuidePanelProvider>
+          <ContentMinWidth>
+            <ContextProvider ctx={ctx}>
+              <ManageCluster />
+            </ContextProvider>
+          </ContentMinWidth>
+        </InfoGuidePanelProvider>
       </Route>
     </MemoryRouter>
   );

diff --git a/web/packages/teleport/src/Clusters/ManageCluster/ManageCluster.test.tsx b/web/packages/teleport/src/Clusters/ManageCluster/ManageCluster.test.tsx
@@ -25,6 +25,7 @@ import { render, screen, waitFor } from 'design/utils/testing';
 
 import cfg from 'teleport/config';
 import { ContextProvider } from 'teleport/index';
+import { InfoGuidePanelProvider } from 'teleport/Main/InfoGuideContext';
 import { ContentMinWidth } from 'teleport/Main/Main';
 import { createTeleportContext } from 'teleport/mocks/contexts';
 
@@ -35,9 +36,11 @@ function renderElement(element, ctx) {
   return render(
     <MemoryRouter initialEntries={[`/clusters/cluster-id`]}>
       <Route path="/clusters/:clusterId">
-        <ContentMinWidth>
-          <ContextProvider ctx={ctx}>{element}</ContextProvider>
-        </ContentMinWidth>
+        <InfoGuidePanelProvider>
+          <ContentMinWidth>
+            <ContextProvider ctx={ctx}>{element}</ContextProvider>
+          </ContentMinWidth>
+        </InfoGuidePanelProvider>
       </Route>
     </MemoryRouter>
   );

diff --git a/web/packages/teleport/src/Main/InfoGuideContext.tsx b/web/packages/teleport/src/Main/InfoGuideContext.tsx
@@ -0,0 +1,76 @@
+/**
+ * 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 {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+type InfoGuidePanelContextState = {
+  setInfoGuideElement: (element: JSX.Element | null) => void;
+  infoGuideElement: JSX.Element | null;
+};
+
+const InfoGuidePanelContext = createContext<InfoGuidePanelContextState>(null);
+
+export const InfoGuidePanelProvider: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const [infoGuideElement, setInfoGuideElement] = useState<JSX.Element | null>(
+    null
+  );
+
+  return (
+    <InfoGuidePanelContext.Provider
+      value={{ infoGuideElement, setInfoGuideElement }}
+    >
+      {children}
+    </InfoGuidePanelContext.Provider>
+  );
+};
+
+/**
+ * hook that allows you to set the info guide element that
+ * will render in the InfoGuideSidePanel component.
+ *
+ * To close the InfoGuideSidePanel component, set infoGuideElement
+ * state back to null.
+ */
+export const useInfoGuide = () => {
+  const context = useContext(InfoGuidePanelContext);
+
+  if (!context) {
+    throw new Error('useInfoGuide must be used within a InfoGuidePanelContext');
+  }
+
+  const { infoGuideElement, setInfoGuideElement } = context;
+
+  useEffect(() => {
+    return () => {
+      setInfoGuideElement(null);
+    };
+  }, []);
+
+  return {
+    setInfoGuideElement,
+    infoGuideElement,
+  };
+};
diff --git a/web/packages/teleport/src/Main/Main.test.tsx b/web/packages/teleport/src/Main/Main.test.tsx
@@ -18,21 +18,26 @@
 
 import { MemoryRouter } from 'react-router';
 
-import { render, screen } from 'design/utils/testing';
+import { ListThin } from 'design/Icon';
+import { fireEvent, render, screen } from 'design/utils/testing';
 
 import { Context, ContextProvider } from 'teleport';
 import { apps } from 'teleport/Apps/fixtures';
 import { events } from 'teleport/Audit/fixtures';
 import { clusters } from 'teleport/Clusters/fixtures';
+import { InfoGuideWrapper } from 'teleport/components/SlidingSidePanel/InfoGuideSidePanel/InfoGuideSidePanel';
 import { databases } from 'teleport/Databases/fixtures';
 import { desktops } from 'teleport/Desktops/fixtures';
 import { getOSSFeatures } from 'teleport/features';
 import { kubes } from 'teleport/Kubes/fixtures';
 import { userContext } from 'teleport/Main/fixtures';
 import { LayoutContextProvider } from 'teleport/Main/LayoutContext';
+import { createTeleportContext } from 'teleport/mocks/contexts';
+import { NavigationCategory } from 'teleport/Navigation';
 import { nodes } from 'teleport/Nodes/fixtures';
 import { sessions } from 'teleport/Sessions/fixtures';
 import TeleportContext from 'teleport/teleportContext';
+import { TeleportFeature } from 'teleport/types';
 import { makeTestUserContext } from 'teleport/User/testHelpers/makeTestUserContext';
 import { mockUserContextProviderWith } from 'teleport/User/testHelpers/mockUserContextWith';
 
@@ -101,6 +106,43 @@ test('renders without questionnaire prop', () => {
   expect(screen.getByTestId('teleport-logo')).toBeInTheDocument();
 });
 
+test('toggle rendering of info guide panel', async () => {
+  mockUserContextProviderWith(makeTestUserContext());
+  const ctx = createTeleportContext();
+
+  const props: MainProps = {
+    features: [...getOSSFeatures(), new FeatureTestInfoGuide()],
+  };
+
+  render(
+    <MemoryRouter>
+      <ContextProvider ctx={ctx}>
+        <LayoutContextProvider>
+          <Main {...props} />
+        </LayoutContextProvider>
+      </ContextProvider>
+    </MemoryRouter>
+  );
+
+  expect(screen.getByTestId('teleport-logo')).toBeInTheDocument();
+
+  expect(screen.queryByText(/i am the guide/i)).not.toBeInTheDocument();
+  expect(screen.queryByText(/info guide title/i)).not.toBeInTheDocument();
+
+  // render the component that has the guide info button
+  fireEvent.click(screen.queryAllByText('Zero Trust Access')[0]);
+  fireEvent.click(screen.getByText(/test info guide/i));
+  expect(screen.getByText(/info guide title/i)).toBeInTheDocument();
+
+  // test opening of panel
+  fireEvent.click(screen.getByTestId('info-guide-btn-open'));
+  expect(screen.getByText(/i am the guide/i)).toBeInTheDocument();
+
+  // test closing of panel
+  fireEvent.click(screen.getByTestId('info-guide-btn-close'));
+  expect(screen.queryByText(/i am the guide/i)).not.toBeInTheDocument();
+});
+
 test('displays invite collaborators feedback if present', () => {
   mockUserContextProviderWith(makeTestUserContext());
   const ctx = setupContext();
@@ -144,3 +186,36 @@ test('renders without invite collaborators feedback enabled', () => {
 
   expect(screen.getByTestId('teleport-logo')).toBeInTheDocument();
 });
+
+const TestInfoGuide = () => {
+  return (
+    <div>
+      <InfoGuideWrapper guide={<div>I am the guide</div>}>
+        Info Guide Title
+      </InfoGuideWrapper>
+    </div>
+  );
+};
+
+class FeatureTestInfoGuide implements TeleportFeature {
+  category = NavigationCategory.Audit;
+
+  route = {
+    title: 'Test Info Guide',
+    path: '/web/testinfoguide',
+    component: TestInfoGuide,
+  };
+
+  navigationItem = {
+    title: 'Test Info Guide' as any,
+    icon: ListThin,
+    getLink() {
+      return '/web/testinfoguide';
+    },
+    searchableTags: ['test info guide'],
+  };
+
+  hasAccess() {
+    return true;
+  }
+}
diff --git a/web/packages/teleport/src/Main/Main.tsx b/web/packages/teleport/src/Main/Main.tsx
@@ -39,6 +39,8 @@ import type { BannerType } from 'teleport/components/BannerList/BannerList';
 import { useAlerts } from 'teleport/components/BannerList/useAlerts';
 import { CatchError } from 'teleport/components/CatchError';
 import { Redirect, Route, Switch } from 'teleport/components/Router';
+import { InfoGuideSidePanel } from 'teleport/components/SlidingSidePanel';
+import { infoGuidePanelWidth } from 'teleport/components/SlidingSidePanel/InfoGuideSidePanel/InfoGuideSidePanel';
 import cfg from 'teleport/config';
 import { FeaturesContextProvider, useFeatures } from 'teleport/FeaturesContext';
 import { Navigation } from 'teleport/Navigation';
@@ -54,6 +56,7 @@ import { useUser } from 'teleport/User/UserContext';
 import useTeleport from 'teleport/useTeleport';
 import { QuestionnaireProps } from 'teleport/Welcome/NewCredentials';
 
+import { InfoGuidePanelProvider, useInfoGuide } from './InfoGuideContext';
 import { MainContainer } from './MainContainer';
 import { OnboardDiscover } from './OnboardDiscover';
 
@@ -195,19 +198,21 @@ export function Main(props: MainProps) {
       <Wrapper>
         <MainContainer>
           <Navigation />
-          <ContentWrapper>
-            <ContentMinWidth>
-              <BannerList
-                banners={banners}
-                customBanners={props.customBanners}
-                billingBanners={featureFlags.billing && props.billingBanners}
-                onBannerDismiss={dismissAlert}
-              />
-              <Suspense fallback={null}>
-                <FeatureRoutes lockedFeatures={ctx.lockedFeatures} />
-              </Suspense>
-            </ContentMinWidth>
-          </ContentWrapper>
+          <InfoGuidePanelProvider>
+            <ContentWrapper>
+              <ContentMinWidth>
+                <BannerList
+                  banners={banners}
+                  customBanners={props.customBanners}
+                  billingBanners={featureFlags.billing && props.billingBanners}
+                  onBannerDismiss={dismissAlert}
+                />
+                <Suspense fallback={null}>
+                  <FeatureRoutes lockedFeatures={ctx.lockedFeatures} />
+                </Suspense>
+              </ContentMinWidth>
+            </ContentWrapper>
+          </InfoGuidePanelProvider>
         </MainContainer>
       </Wrapper>
       {displayOnboardDiscover && (
@@ -316,6 +321,8 @@ export const useNoMinWidth = () => {
 
 export const ContentMinWidth = ({ children }: { children: ReactNode }) => {
   const [enforceMinWidth, setEnforceMinWidth] = useState(true);
+  const { infoGuideElement } = useInfoGuide();
+  const infoGuideSidePanelOpened = infoGuideElement != null;
 
   return (
     <ContentMinWidthContext.Provider value={{ setEnforceMinWidth }}>
@@ -326,10 +333,18 @@ export const ContentMinWidth = ({ children }: { children: ReactNode }) => {
           flex: 1;
           ${enforceMinWidth ? 'min-width: 1000px;' : ''}
           min-height: 0;
+          margin-right: ${infoGuideSidePanelOpened
+            ? infoGuidePanelWidth
+            : '0'}px;
+          transition: ${infoGuideSidePanelOpened
+            ? 'margin 150ms'
+            : 'margin 300ms'};
+          overflow-y: auto;
         `}
       >
         {children}
       </div>
+      <InfoGuideSidePanel />
     </ContentMinWidthContext.Provider>
   );
 };

diff --git a/web/packages/teleport/src/Navigation/Section.tsx b/web/packages/teleport/src/Navigation/Section.tsx
@@ -25,6 +25,7 @@ import { ArrowLineLeft, ArrowSquareIn } from 'design/Icon';
 import { Theme } from 'design/theme';
 import { HoverTooltip, IconTooltip } from 'design/Tooltip';
 
+import { SlidingSidePanel } from 'teleport/components/SlidingSidePanel';
 import cfg from 'teleport/config';
 
 import { CategoryIcon } from './CategoryIcon';
@@ -177,38 +178,30 @@ export function StandaloneSection({
 }
 
 export const rightPanelWidth = 274;
-
-export const RightPanel = styled(Box).attrs({ px: '5px' })<{
-  isVisible: boolean;
-  skipAnimation: boolean;
-}>`
-  position: fixed;
-  left: var(--sidenav-width);
-  height: 100%;
-  scrollbar-color: ${p => p.theme.colors.spotBackground[2]} transparent;
-  width: ${rightPanelWidth}px;
-  background: ${p => p.theme.colors.levels.surface};
-  z-index: ${zIndexMap.sideNavExpandedPanel};
-  border-right: 1px solid ${p => p.theme.colors.spotBackground[1]};
-
-  ${props =>
-    props.isVisible
-      ? `
-      ${props.skipAnimation ? '' : 'transition: transform .15s ease-out;'}
-      transform: translateX(0);
-      `
-      : `
-      ${props.skipAnimation ? '' : 'transition: transform .15s ease-in;'}
-      transform: translateX(-100%);
-      `}
-
-  top: ${p => p.theme.topBarHeight[0]}px;
-  padding-bottom: ${p => p.theme.topBarHeight[0] + p.theme.space[2]}px;
-  @media screen and (min-width: ${p => p.theme.breakpoints.small}px) {
-    top: ${p => p.theme.topBarHeight[1]}px;
-    padding-bottom: ${p => p.theme.topBarHeight[1] + p.theme.space[2]}px;
-  }
-`;
+export const RightPanel: React.FC<
+  PropsWithChildren<{
+    isVisible: boolean;
+    skipAnimation: boolean;
+    id: string;
+    onFocus(): void;
+  }>
+> = ({ isVisible, skipAnimation, id, onFocus, children }) => {
+  return (
+    <SlidingSidePanel
+      px="5px"
+      isVisible={isVisible}
+      skipAnimation={skipAnimation}
+      id={id}
+      onFocus={onFocus}
+      panelWidth={rightPanelWidth}
+      zIndex={zIndexMap.sideNavExpandedPanel}
+      slideFrom="left"
+      panelOffset="var(--sidenav-width)"
+    >
+      {children}
+    </SlidingSidePanel>
+  );
+};
 
 export function RightPanelHeader({
   title,