[v15] Always show Bots page with conditional permissions error

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

@@ -209,12 +209,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

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