Always show Bots page with conditional permissions error (#50186)

This will make the bots page always visible to users. If they do not
have permissions, they will see the empty state as well as an error of
what permissions are missing.

web/packages/teleport/src/Bots/List/Bots.test.tsx

@@ -22,13 +22,20 @@ import { render, screen, userEvent, waitFor } from 'design/utils/testing';
 
 import api from 'teleport/services/api';
 import { botsApiResponseFixture } from 'teleport/Bots/fixtures';
-import { createTeleportContext } from 'teleport/mocks/contexts';
+import {
+  allAccessAcl,
+  createTeleportContext,
+  noAccess,
+} from 'teleport/mocks/contexts';
 import { ContextProvider } from 'teleport/index';
+import TeleportContext from 'teleport/teleportContext';
 
 import { Bots } from './Bots';
 
-function renderWithContext(element) {
-  const ctx = createTeleportContext();
+function renderWithContext(element, ctx?: TeleportContext) {
+  if (!ctx) {
+    ctx = createTeleportContext();
+  }
   return render(
     <MemoryRouter>
       <ContextProvider ctx={ctx}>{element}</ContextProvider>
@@ -57,6 +64,20 @@ test('shows empty state when bots are empty', async () => {
   });
 });
 
+test('shows missing permissions error if user lacks permissions to list', async () => {
+  jest.spyOn(api, 'get').mockResolvedValue({ items: [] });
+  const ctx = createTeleportContext();
+  ctx.storeUser.setState({ acl: { ...allAccessAcl, bots: noAccess } });
+  renderWithContext(<Bots />, ctx);
+
+  await waitFor(() => {
+    expect(screen.getByTestId('bots-empty-state')).toBeInTheDocument();
+  });
+  expect(
+    screen.getByText(/You do not have permission to access Bots/i)
+  ).toBeInTheDocument();
+});
+
 test('calls edit endpoint', async () => {
   jest
     .spyOn(api, 'get')

web/packages/teleport/src/Bots/List/Bots.tsx

@@ -45,12 +45,15 @@ export function Bots() {
   const ctx = useTeleport();
   const flags = ctx.getFeatureFlags();
   const hasAddBotPermissions = flags.addBots;
+  const canListBots = flags.listBots;
 
   const [bots, setBots] = useState<FlatBot[]>([]);
   const [selectedBot, setSelectedBot] = useState<FlatBot>();
   const [selectedRoles, setSelectedRoles] = useState<string[]>();
   const { attempt: crudAttempt, run: crudRun } = useAttemptNext();
-  const { attempt: fetchAttempt, run: fetchRun } = useAttemptNext('processing');
+  const { attempt: fetchAttempt, run: fetchRun } = useAttemptNext(
+    canListBots ? 'processing' : 'success'
+  );
 
   useEffect(() => {
     const signal = new AbortController();
@@ -60,15 +63,17 @@ export function Bots() {
       return await fetchBots(signal, flags);
     }
 
-    fetchRun(() =>
-      bots(signal.signal).then(botRes => {
-        setBots(botRes.bots);
-      })
-    );
+    if (canListBots) {
+      fetchRun(() =>
+        bots(signal.signal).then(botRes => {
+          setBots(botRes.bots);
+        })
+      );
+    }
     return () => {
       signal.abort();
     };
-  }, [ctx, fetchRun]);
+  }, [ctx, fetchRun, canListBots]);
 
   async function fetchRoleNames(search: string): Promise<string[]> {
     const flags = ctx.getFeatureFlags();
@@ -122,6 +127,12 @@ export function Bots() {
   if (fetchAttempt.status === 'success' && bots.length === 0) {
     return (
       <FeatureBox>
+        {!canListBots && (
+          <Alert kind="info" mt={4}>
+            You do not have permission to access Bots. Missing role permissions:{' '}
+            <code>bot.list</code>
+          </Alert>
+        )}
         <EmptyState />
       </FeatureBox>
     );

web/packages/teleport/src/Bots/List/EmptyState/EmptyState.tsx

@@ -206,12 +206,20 @@ export const BotTiles = () => {
     <PreviewBox>
       <Flex>
         {integrationsTop.map(integration => (
-          <DisplayTile icon={integration.icon} title={integration.title} />
+          <DisplayTile
+            key={integration.title}
+            icon={integration.icon}
+            title={integration.title}
+          />
         ))}
       </Flex>
       <Flex>
         {integrationsBottom.map(integration => (
-          <DisplayTile icon={integration.icon} title={integration.title} />
+          <DisplayTile
+            key={integration.title}
+            icon={integration.icon}
+            title={integration.title}
+          />
         ))}
       </Flex>
     </PreviewBox>

web/packages/teleport/src/features.tsx

@@ -221,8 +221,8 @@ export class FeatureBots implements TeleportFeature {
     component: Bots,
   };
 
-  hasAccess(flags: FeatureFlags) {
-    return flags.listBots;
+  hasAccess() {
+    return true;
   }
 
   navigationItem = {