[v13] display survey for existing users (#29378)

lib/usagereporter/web/userevent.go

@@ -334,6 +334,13 @@ func ConvertUserEventRequestToUsageEvent(req CreateUserEventRequest) (*usageeven
 					Cta: usageeventsv1.CTA(cta),
 				}}},
 			nil
+
+	case questionnaireSubmitEvent:
+		return &usageeventsv1.UsageEventOneOf{Event: &usageeventsv1.UsageEventOneOf_UiOnboardQuestionnaireSubmit{
+				UiOnboardQuestionnaireSubmit: &usageeventsv1.UIOnboardQuestionnaireSubmitEvent{},
+			}},
+			nil
+
 	}
 
 	return nil, trace.BadParameter("invalid event %s", req.Event)

web/packages/teleport/src/Main/Main.test.tsx

@@ -0,0 +1,100 @@
+/**
+ * Copyright 2023 Gravitational, Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+import { render, screen } from 'design/utils/testing';
+
+import { getOSSFeatures } from 'teleport/features';
+import { Context, ContextProvider } from 'teleport';
+import { events } from 'teleport/Audit/fixtures';
+import { clusters } from 'teleport/Clusters/fixtures';
+import { nodes } from 'teleport/Nodes/fixtures';
+import { sessions } from 'teleport/Sessions/fixtures';
+import { apps } from 'teleport/Apps/fixtures';
+import { kubes } from 'teleport/Kubes/fixtures';
+import { databases } from 'teleport/Databases/fixtures';
+import { desktops } from 'teleport/Desktops/fixtures';
+import { userContext } from 'teleport/Main/fixtures';
+import { LayoutContextProvider } from 'teleport/Main/LayoutContext';
+import { mockUserContextProviderWith } from 'teleport/User/testHelpers/mockUserContextWith';
+import { makeTestUserContext } from 'teleport/User/testHelpers/makeTestUserContext';
+import TeleportContext from 'teleport/teleportContext';
+
+import { Main, MainProps } from './Main';
+
+const setupContext = (): TeleportContext => {
+  const ctx = new Context();
+  ctx.isEnterprise = false;
+  ctx.auditService.fetchEvents = () =>
+    Promise.resolve({ events, startKey: '' });
+  ctx.clusterService.fetchClusters = () => Promise.resolve(clusters);
+  ctx.nodeService.fetchNodes = () => Promise.resolve({ agents: nodes });
+  ctx.sshService.fetchSessions = () => Promise.resolve(sessions);
+  ctx.appService.fetchApps = () => Promise.resolve({ agents: apps });
+  ctx.kubeService.fetchKubernetes = () => Promise.resolve({ agents: kubes });
+  ctx.databaseService.fetchDatabases = () =>
+    Promise.resolve({ agents: databases });
+  ctx.desktopService.fetchDesktops = () =>
+    Promise.resolve({ agents: desktops });
+  ctx.storeUser.setState(userContext);
+
+  return ctx;
+};
+
+test('displays questionnaire if present', () => {
+  mockUserContextProviderWith(makeTestUserContext());
+  const ctx = setupContext();
+
+  const props: MainProps = {
+    features: getOSSFeatures(),
+    Questionnaire: () => <div>Passed Component!</div>,
+  };
+
+  render(
+    <MemoryRouter>
+      <LayoutContextProvider>
+        <ContextProvider ctx={ctx}>
+          <Main {...props} />
+        </ContextProvider>
+      </LayoutContextProvider>
+    </MemoryRouter>
+  );
+
+  expect(screen.getByText('Passed Component!')).toBeInTheDocument();
+});
+
+test('renders without questionnaire prop', () => {
+  mockUserContextProviderWith(makeTestUserContext());
+  const ctx = setupContext();
+
+  const props: MainProps = {
+    features: getOSSFeatures(),
+  };
+  expect(props.Questionnaire).toBeUndefined();
+
+  render(
+    <MemoryRouter>
+      <LayoutContextProvider>
+        <ContextProvider ctx={ctx}>
+          <Main {...props} />
+        </ContextProvider>
+      </LayoutContextProvider>
+    </MemoryRouter>
+  );
+
+  expect(screen.getByTestId('title')).toBeInTheDocument();
+});

web/packages/teleport/src/Main/Main.tsx

@@ -29,6 +29,8 @@ import useAttempt from 'shared/hooks/useAttemptNext';
 
 import { matchPath, useHistory } from 'react-router';
 
+import Dialog from 'design/Dialog';
+
 import { Redirect, Route, Switch } from 'teleport/components/Router';
 import { CatchError } from 'teleport/components/CatchError';
 import cfg from 'teleport/config';
@@ -49,17 +51,20 @@ import { getFirstRouteForCategory } from 'teleport/Navigation/Navigation';
 
 import { NavigationCategory } from 'teleport/Navigation/categories';
 
+import { QuestionnaireProps } from 'teleport/Welcome/NewCredentials';
+
 import { MainContainer } from './MainContainer';
 import { OnboardDiscover } from './OnboardDiscover';
 
 import type { BannerType } from 'teleport/components/BannerList/BannerList';
 import type { LockedFeatures, TeleportFeature } from 'teleport/types';
 
-interface MainProps {
+export interface MainProps {
   initialAlerts?: ClusterAlert[];
   customBanners?: ReactNode[];
   features: TeleportFeature[];
   billingBanners?: ReactNode[];
+  Questionnaire?: (props: QuestionnaireProps) => React.ReactElement;
 }
 
 export function Main(props: MainProps) {
@@ -87,6 +92,9 @@ export function Main(props: MainProps) {
   const { alerts, dismissAlert } = useAlerts(props.initialAlerts);
 
   const [showOnboardDiscover, setShowOnboardDiscover] = useState(true);
+  const [showOnboardSurvey, setShowOnboardSurvey] = useState<boolean>(
+    !!props.Questionnaire
+  );
 
   if (attempt.status === 'failed') {
     return <Failed message={attempt.statusText} />;
@@ -173,6 +181,15 @@ export function Main(props: MainProps) {
       {requiresOnboarding && showOnboardDiscover && (
         <OnboardDiscover onClose={handleOnClose} onOnboard={handleOnboard} />
       )}
+      {showOnboardSurvey && (
+        <Dialog open={showOnboardSurvey}>
+          <props.Questionnaire
+            full={true}
+            onSubmit={() => setShowOnboardSurvey(false)}
+            onboard={false}
+          />
+        </Dialog>
+      )}
     </FeaturesContextProvider>
   );
 }

web/packages/teleport/src/TopBar/TopBar.tsx

@@ -133,7 +133,7 @@ export function TopBar() {
   return (
     <TopBarContainer>
       {!hasClusterUrl && (
-        <Text fontSize="18px" bold>
+        <Text fontSize="18px" bold data-testid="title">
           {title}
         </Text>
       )}

web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.tsx

@@ -100,11 +100,14 @@ export function NewCredentials(props: NewCredentialsProps) {
   ) {
     // todo (michellescripts) check cluster config to determine if all or partial questions are asked
     return (
-      <Questionnaire
-        full={true}
-        username={resetToken.user}
-        onSubmit={() => setDisplayOnboardingQuestionnaire(false)}
-      />
+      <Card mx="auto" maxWidth="600px" p="4">
+        <Questionnaire
+          full={true}
+          username={resetToken.user}
+          onSubmit={() => setDisplayOnboardingQuestionnaire(false)}
+          onboard={true}
+        />
+      </Card>
     );
   }
 

web/packages/teleport/src/Welcome/NewCredentials/types.ts

@@ -41,10 +41,11 @@ export type UseTokenState = {
   privateKeyPolicyEnabled: boolean;
 };
 
-// duplicated from E
+// Note: QuestionnaireProps is duplicated in Enterprise (e-teleport/Welcome/Questionnaire/Questionnaire)
 export type QuestionnaireProps = {
   full: boolean;
-  username: string;
+  onboard: boolean;
+  username?: string;
   onSubmit?: () => void;
 };
 
@@ -55,7 +56,12 @@ export type NewCredentialsProps = UseTokenState & {
   // support E questionnaire
   displayOnboardingQuestionnaire?: boolean;
   setDisplayOnboardingQuestionnaire?: (bool: boolean) => void;
-  Questionnaire?: (props: QuestionnaireProps) => ReactElement;
+  Questionnaire?: ({
+    full,
+    onboard,
+    username,
+    onSubmit,
+  }: QuestionnaireProps) => ReactElement;
 };
 
 export type RegisterSuccessProps = {

web/packages/teleport/src/services/localStorage/localStorage.ts

@@ -20,6 +20,7 @@ import { BearerToken } from 'teleport/services/websession';
 import { OnboardDiscover } from 'teleport/services/user';
 
 import {
+  OnboardUserPreferences,
   ThemePreference,
   UserPreferences,
 } from 'teleport/services/userPreferences/types';
@@ -151,6 +152,15 @@ const storage = {
     return ThemePreference.Light;
   },
 
+  getOnboardUserPreference(): OnboardUserPreferences {
+    const userPreferences = storage.getUserPreferences();
+    if (userPreferences) {
+      return userPreferences.onboard;
+    }
+
+    return { preferredResources: [] };
+  },
+
   // DELETE IN 15 (ryan)
   getDeprecatedThemePreference(): DeprecatedThemeOption {
     return window.localStorage.getItem(KeysEnum.THEME) as DeprecatedThemeOption;

web/packages/teleport/src/services/localStorage/types.ts

@@ -26,12 +26,16 @@ export const KeysEnum = {
   ONBOARD_SURVEY: 'grv_teleport_onboard_survey',
 };
 
-// LocalStorageSurvey is the SurveyRequest type defined in Enterprise
-export type LocalStorageSurvey = {
+// SurveyRequest is the request for sending data to the back end
+export type SurveyRequest = {
   companyName: string;
   employeeCount: string;
   resources: Array<string>;
-  clusterResources: Array<number>;
   role: string;
   team: string;
 };
+
+// LocalStorageSurvey is the SurveyRequest type defined in Enterprise
+export type LocalStorageSurvey = SurveyRequest & {
+  clusterResources: Array<number>;
+};

web/packages/teleport/src/services/userEvent/types.ts

@@ -29,15 +29,15 @@ export enum CaptureEvent {
   // PreUserEvent types
   //   these events are unauthenticated,
   //   and require username in the request
-
   PreUserOnboardSetCredentialSubmitEvent = 'tp.ui.onboard.setCredential.submit',
   PreUserOnboardRegisterChallengeSubmitEvent = 'tp.ui.onboard.registerChallenge.submit',
-  PreUserOnboardQuestionnaireSubmitEvent = 'tp.ui.onboard.questionnaire.submit',
   PreUserCompleteGoToDashboardClickEvent = 'tp.ui.onboard.completeGoToDashboard.click',
-
   PreUserRecoveryCodesContinueClickEvent = 'tp.ui.recoveryCodesContinue.click',
   PreUserRecoveryCodesCopyClickEvent = 'tp.ui.recoveryCodesCopy.click',
   PreUserRecoveryCodesPrintClickEvent = 'tp.ui.recoveryCodesPrint.click',
+
+  // Shared types; used in both pre-user and authenticated user settings
+  OnboardQuestionnaireSubmitEvent = 'tp.ui.onboard.questionnaire.submit',
 }
 
 export enum IntegrationEnrollEvent {