Add notice to web UI that users arent equal to MAU

This adds a dismissible notice to the Users page for usage based billing
users that notifies them that the user count here isn't an accurate
reflection of MAU

web/packages/teleport/src/Users/Users.story.tsx

@@ -47,6 +47,14 @@ export const Loaded = () => {
   );
 };
 
+export const UsersNotEqualMAUNotice = () => {
+  return (
+    <MemoryRouter>
+      <Users {...sample} showMAUInfo={true} />
+    </MemoryRouter>
+  );
+};
+
 export const Failed = () => {
   const attempt = {
     isProcessing: false,
@@ -139,4 +147,6 @@ const sample = {
   InviteCollaborators: null,
   onEmailPasswordResetClose: () => null,
   EmailPasswordReset: null,
+  showMAUInfo: false,
+  onDismissUsersMAUNotice: () => null,
 };

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

@@ -18,7 +18,7 @@
 
 import React from 'react';
 import { MemoryRouter } from 'react-router';
-import { render, screen } from 'design/utils/testing';
+import { render, screen, userEvent } from 'design/utils/testing';
 
 import { ContextProvider } from 'teleport';
 import { createTeleportContext } from 'teleport/mocks/contexts';
@@ -57,6 +57,8 @@ describe('invite collaborators integration', () => {
       inviteCollaboratorsOpen: false,
       onEmailPasswordResetClose: () => undefined,
       EmailPasswordReset: null,
+      showMAUInfo: false,
+      onDismissUsersMAUNotice: () => null,
     };
   });
 
@@ -105,6 +107,59 @@ describe('invite collaborators integration', () => {
   });
 });
 
+describe('Users not equal to MAU Notice', () => {
+  const ctx = createTeleportContext();
+  let props: State;
+
+  beforeEach(() => {
+    props = {
+      attempt: {
+        message: 'success',
+        isSuccess: true,
+        isProcessing: false,
+        isFailed: false,
+      },
+      users: [],
+      fetchRoles: async () => [],
+      operation: { type: 'invite-collaborators' },
+      onStartCreate: () => undefined,
+      onStartDelete: () => undefined,
+      onStartEdit: () => undefined,
+      onStartReset: () => undefined,
+      onStartInviteCollaborators: () => undefined,
+      onClose: () => undefined,
+      onDelete: () => undefined,
+      onCreate: () => undefined,
+      onUpdate: () => undefined,
+      onReset: () => undefined,
+      onInviteCollaboratorsClose: () => undefined,
+      InviteCollaborators: null,
+      inviteCollaboratorsOpen: false,
+      onEmailPasswordResetClose: () => undefined,
+      EmailPasswordReset: null,
+      showMAUInfo: true,
+      onDismissUsersMAUNotice: jest.fn(),
+    };
+  });
+
+  test('displayed Users Not Equal MAU Notice and dismissal', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MemoryRouter>
+        <ContextProvider ctx={ctx}>
+          <Users {...props} />
+        </ContextProvider>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByTestId('users-not-mau-alert')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Dismiss' }));
+    expect(props.onDismissUsersMAUNotice).toHaveBeenCalled();
+    expect(screen.queryByTestId('users-not-mau-alert')).not.toBeInTheDocument();
+  });
+});
+
 describe('email password reset integration', () => {
   const ctx = createTeleportContext();
 
@@ -139,6 +194,8 @@ describe('email password reset integration', () => {
       inviteCollaboratorsOpen: false,
       onEmailPasswordResetClose: () => undefined,
       EmailPasswordReset: null,
+      showMAUInfo: false,
+      onDismissUsersMAUNotice: () => null,
     };
   });
 

web/packages/teleport/src/Users/Users.tsx

@@ -17,7 +17,7 @@
  */
 
 import React from 'react';
-import { Indicator, Box, Alert, Button } from 'design';
+import { Indicator, Box, Alert, Button, Link } from 'design';
 
 import {
   FeatureBox,
@@ -46,6 +46,8 @@ export function Users(props: State) {
     onStartDelete,
     onStartEdit,
     onStartReset,
+    showMAUInfo,
+    onDismissUsersMAUNotice,
     onClose,
     onCreate,
     onUpdate,
@@ -98,6 +100,40 @@ export function Users(props: State) {
           <Indicator />
         </Box>
       )}
+      {showMAUInfo && (
+        <Alert
+          data-testid="users-not-mau-alert"
+          dismissible
+          onDismiss={onDismissUsersMAUNotice}
+          kind="info"
+          css={`
+            a.external-link {
+              color: ${({ theme }) => theme.colors.buttons.link.default};
+            }
+          `}
+        >
+          Note: The users displayed here are not an accurate reflection of
+          Monthly Active Users (MAU). For example, users who log in through
+          Single Sign-On (SSO) providers such as Okta will only appear here
+          temporarily and disappear once they terminate their active sessions.
+          For more information, read our documentation on{' '}
+          <Link
+            target="_blank"
+            href="https://goteleport.com/docs/usage-billing/#monthly-active-users"
+            className="external-link"
+          >
+            MAU
+          </Link>{' '}
+          and{' '}
+          <Link
+            href="https://goteleport.com/docs/reference/user-types/"
+            className="external-link"
+          >
+            User Types
+          </Link>
+          .
+        </Alert>
+      )}
       {attempt.isFailed && <Alert kind="danger" children={attempt.message} />}
       {attempt.isSuccess && (
         <UserList

web/packages/teleport/src/Users/useUsers.ts

@@ -21,6 +21,8 @@ import { useAttempt } from 'shared/hooks';
 
 import { ExcludeUserField, User } from 'teleport/services/user';
 import useTeleport from 'teleport/useTeleport';
+import cfg from 'teleport/config';
+import { storageService } from 'teleport/services/storageService';
 import auth from 'teleport/services/auth/auth';
 
 export default function useUsers({
@@ -119,10 +121,21 @@ export default function useUsers({
     return items.map(r => r.name);
   }
 
+  function onDismissUsersMAUNotice() {
+    storageService.setUsersMAUAcknowledged();
+  }
+
   useEffect(() => {
     attemptActions.do(() => ctx.userService.fetchUsers().then(setUsers));
   }, []);
 
+  // if the cluster has billing enabled, and usageBasedBilling, and they haven't acknowledged
+  // the info yet
+  const showMAUInfo =
+    ctx.getFeatureFlags().billing &&
+    cfg.isUsageBasedBilling &&
+    !storageService.getUsersMAUAcknowledged();
+
   return {
     attempt,
     users,
@@ -143,6 +156,8 @@ export default function useUsers({
     inviteCollaboratorsOpen,
     onEmailPasswordResetClose,
     EmailPasswordReset,
+    showMAUInfo,
+    onDismissUsersMAUNotice,
   };
 }
 

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

@@ -43,6 +43,7 @@ const KEEP_LOCALSTORAGE_KEYS_ON_LOGOUT = [
   KeysEnum.USER_PREFERENCES,
   KeysEnum.RECOMMEND_FEATURE,
   KeysEnum.LICENSE_ACKNOWLEDGED,
+  KeysEnum.USERS_NOT_EQUAL_TO_MAU_ACKNOWLEDGED,
 ];
 
 export const storageService = {
@@ -207,6 +208,21 @@ export const storageService = {
     window.localStorage.setItem(KeysEnum.LICENSE_ACKNOWLEDGED, 'true');
   },
 
+  getUsersMAUAcknowledged(): boolean {
+    return (
+      window.localStorage.getItem(
+        KeysEnum.USERS_NOT_EQUAL_TO_MAU_ACKNOWLEDGED
+      ) === 'true'
+    );
+  },
+
+  setUsersMAUAcknowledged() {
+    window.localStorage.setItem(
+      KeysEnum.USERS_NOT_EQUAL_TO_MAU_ACKNOWLEDGED,
+      'true'
+    );
+  },
+
   broadcast(messageType, messageBody) {
     window.localStorage.setItem(messageType, messageBody);
     window.localStorage.removeItem(messageType);

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

@@ -33,7 +33,8 @@ export const KeysEnum = {
   EXTERNAL_AUDIT_STORAGE_CTA_DISABLED:
     'grv_teleport_external_audit_storage_disabled',
   LICENSE_ACKNOWLEDGED: 'grv_teleport_license_acknowledged',
-
+  USERS_NOT_EQUAL_TO_MAU_ACKNOWLEDGED:
+    'grv_users_not_equal_to_mau_acknowledged',
   LOCAL_NOTIFICATION_STATES: 'grv_teleport_notification_states',
 };