Remove the assist popup (#36329)

gravitational · Jan 8, 2024 · c4ca7dd · c4ca7dd
1 parent 5da2066
commit c4ca7dd
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 218 deletions.
diff --git a/web/packages/teleport/src/Assist/Popup/Popup.ts b/web/packages/teleport/src/Assist/Popup/Popup.ts
diff --git a/web/packages/teleport/src/Assist/Popup/index.ts b/web/packages/teleport/src/Assist/Popup/index.ts
diff --git a/web/packages/teleport/src/Main/Main.tsx b/web/packages/teleport/src/Main/Main.tsx
@@ -179,7 +179,7 @@ export function Main(props: MainProps) {
           <HorizontalSplit>
             <ContentMinWidth>
               <Suspense fallback={null}>
-                <TopBar hidePopup={displayOnboardDiscover} />
+                <TopBar />
                 <FeatureRoutes lockedFeatures={ctx.lockedFeatures} />
               </Suspense>
             </ContentMinWidth>

diff --git a/web/packages/teleport/src/TopBar/TopBar.test.tsx b/web/packages/teleport/src/TopBar/TopBar.test.tsx
@@ -55,37 +55,10 @@ function setup(): void {
   mockUserContextProviderWith(makeTestUserContext());
 }
 
-test('does not show assist popup if hidePopup is true', async () => {
-  setup();
-
-  render(getTopBar({ hidePopup: true }));
-  await screen.findByTestId('cluster-selector');
-
-  expect(screen.queryByTestId('assistPopup')).not.toBeInTheDocument();
-});
-
-test('shows assist popup if hidePopup is absent', async () => {
-  setup();
-
-  render(getTopBar({}));
-  await screen.findByTestId('cluster-selector');
-
-  expect(screen.getByTestId('assistPopup')).toBeInTheDocument();
-});
-
-test('shows assist popup if hidePopup is false', async () => {
-  setup();
-
-  render(getTopBar({ hidePopup: false }));
-  await screen.findByTestId('cluster-selector');
-
-  expect(screen.getByTestId('assistPopup')).toBeInTheDocument();
-});
-
 test('notification bell without notification', async () => {
   setup();
 
-  render(getTopBar({}));
+  render(getTopBar());
   await screen.findByTestId('cluster-selector');
 
   expect(screen.getByTestId('tb-note')).toBeInTheDocument();
@@ -108,7 +81,7 @@ test('notification bell with notification', async () => {
     ],
   };
 
-  render(getTopBar({}));
+  render(getTopBar());
   await screen.findByTestId('cluster-selector');
 
   expect(screen.getByTestId('tb-note')).toBeInTheDocument();
@@ -121,13 +94,13 @@ test('notification bell with notification', async () => {
   expect(screen.getByTestId('tb-note-dropdown')).toBeVisible();
 });
 
-const getTopBar = ({ hidePopup = null }: { hidePopup?: boolean }) => {
+const getTopBar = () => {
   return (
     <Router history={createMemoryHistory()}>
       <LayoutContextProvider>
         <TeleportContextProvider ctx={ctx}>
           <FeaturesContextProvider value={getOSSFeatures()}>
-            <TopBar hidePopup={hidePopup} />
+            <TopBar />
           </FeaturesContextProvider>
         </TeleportContextProvider>
       </LayoutContextProvider>

diff --git a/web/packages/teleport/src/TopBar/TopBar.tsx b/web/packages/teleport/src/TopBar/TopBar.tsx
@@ -15,14 +15,12 @@ limitations under the License.
 */
 
 import React, { lazy, Suspense, useState } from 'react';
-import styled, { useTheme } from 'styled-components';
+import styled from 'styled-components';
 import { Flex, Text, TopNav } from 'design';
 
 import { matchPath, useHistory } from 'react-router';
 
-import { BrainIcon, OpenAIIcon } from 'design/SVGIcon';
-
-import { useLocalStorage } from 'shared/hooks/useLocalStorage';
+import { BrainIcon } from 'design/SVGIcon';
 
 import { ArrowLeft } from 'design/Icon';
 
@@ -37,58 +35,19 @@ import { useLayout } from 'teleport/Main/LayoutContext';
 import { KeysEnum } from 'teleport/services/storageService';
 import { getFirstRouteForCategory } from 'teleport/Navigation/Navigation';
 
-import {
-  Popup,
-  PopupButton,
-  PopupFooter,
-  PopupLogos,
-  PopupLogosSpacer,
-  PopupTitle,
-  PopupTitleBackground,
-  TeleportIcon,
-} from 'teleport/Assist/Popup/Popup';
-
 import ClusterSelector from './ClusterSelector';
 import { Notifications } from './Notifications';
 import { ButtonIconContainer } from './Shared';
 
 const Assist = lazy(() => import('teleport/Assist'));
 
-const AssistButtonContainer = styled.div`
-  position: relative;
-`;
-
-const Background = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 98;
-  background: rgba(0, 0, 0, 0.6);
-`;
-
-type TopBarProps = {
-  // hidePopup indicates if the popup should be hidden based on parent component states.
-  // if true, another modal is present; and we do not want to display the assist popup.
-  // if false or absent, display as pre normal logical rules.
-  hidePopup?: boolean;
-};
-
-export function TopBar({ hidePopup = false }: TopBarProps) {
-  const theme = useTheme();
-
+export function TopBar() {
   const ctx = useTeleport();
   const history = useHistory();
   const features = useFeatures();
 
   const assistEnabled = ctx.getFeatureFlags().assist && ctx.assistEnabled;
 
-  const [showAssistPopup, setShowAssistPopup] = useLocalStorage(
-    KeysEnum.SHOW_ASSIST_POPUP,
-    assistEnabled
-  );
-
   const [showAssist, setShowAssist] = useState(false);
 
   const { clusterId, hasClusterUrl } = useStickyClusterId();
@@ -193,34 +152,9 @@ export function TopBar({ hidePopup = false }: TopBarProps) {
       />
       <Flex ml="auto" height="100%" alignItems="center">
         {!hasDockedElement && assistEnabled && (
-          <AssistButtonContainer>
-            <ButtonIconContainer onClick={() => setShowAssist(true)}>
-              <BrainIcon />
-            </ButtonIconContainer>
-            {showAssistPopup && !hidePopup && (
-              <>
-                <Background />
-                <Popup data-testid="assistPopup">
-                  <PopupTitle>
-                    <PopupTitleBackground>New!</PopupTitleBackground>
-                  </PopupTitle>{' '}
-                  Try out Teleport Assist, a GPT-4-powered AI assistant that
-                  leverages your infrastructure
-                  <PopupFooter>
-                    <PopupLogos>
-                      <OpenAIIcon size={30} />
-                      <PopupLogosSpacer>+</PopupLogosSpacer>
-                      <TeleportIcon light={theme.type === 'light'} />
-                    </PopupLogos>
-
-                    <PopupButton onClick={() => setShowAssistPopup(false)}>
-                      Close
-                    </PopupButton>
-                  </PopupFooter>
-                </Popup>
-              </>
-            )}
-          </AssistButtonContainer>
+          <ButtonIconContainer onClick={() => setShowAssist(true)}>
+            <BrainIcon />
+          </ButtonIconContainer>
         )}
         <Notifications />
         <UserMenuNav username={ctx.storeUser.state.username} />