Web: Add notification store

web/packages/shared/utils/assertUnreachable.ts

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ */
+
+export function assertUnreachable(x: never): never {
+  throw new Error(`Unhandled case: ${x}`);
+}

web/packages/teleport/src/Navigation/Navigation.tsx

@@ -17,20 +17,17 @@ limitations under the License.
 import React, { useCallback, useEffect, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { matchPath, useHistory, useLocation } from 'react-router';
-
 import { Image } from 'design';
 
 import { NavigationSwitcher } from 'teleport/Navigation/NavigationSwitcher';
 import cfg from 'teleport/config';
-
 import {
   NAVIGATION_CATEGORIES,
   NavigationCategory,
 } from 'teleport/Navigation/categories';
-
 import { useFeatures } from 'teleport/FeaturesContext';
-
 import { NavigationCategoryContainer } from 'teleport/Navigation/NavigationCategoryContainer';
+import { NotificationKind } from 'teleport/stores/storeNotifications';
 
 import { useTeleport } from '..';
 
@@ -176,7 +173,15 @@ export function Navigation({
         <NavigationSwitcher
           onChange={handleCategoryChange}
           value={view}
-          items={NAVIGATION_CATEGORIES}
+          items={[
+            {
+              category: NavigationCategory.Management,
+              requiresAttention: ctx.storeNotifications.hasNotificationsByKind(
+                NotificationKind.AccessList
+              ),
+            },
+            { category: NavigationCategory.Resources },
+          ]}
         />
       )}
 

web/packages/teleport/src/Navigation/NavigationItem.test.tsx

@@ -20,7 +20,7 @@ import { render, screen } from 'design/utils/testing';
 
 import { generatePath, Router } from 'react-router';
 
-import { createMemoryHistory } from 'history';
+import { createMemoryHistory, MemoryHistory } from 'history';
 
 import TeleportContextProvider from 'teleport/TeleportContextProvider';
 import TeleportContext from 'teleport/teleportContext';
@@ -30,8 +30,9 @@ import { NavigationCategory } from 'teleport/Navigation/categories';
 import { NavigationItem } from 'teleport/Navigation/NavigationItem';
 import { NavigationItemSize } from 'teleport/Navigation/common';
 import { makeUserContext } from 'teleport/services/user';
+import { NotificationKind } from 'teleport/stores/storeNotifications';
 
-class MockFeature implements TeleportFeature {
+class MockUserFeature implements TeleportFeature {
   category = NavigationCategory.Resources;
 
   route = {
@@ -55,32 +56,50 @@ class MockFeature implements TeleportFeature {
   };
 }
 
+class MockAccessListFeature implements TeleportFeature {
+  category = NavigationCategory.Resources;
+
+  route = {
+    title: 'Users',
+    path: '/web/cluster/:clusterId/feature',
+    exact: true,
+    component: () => <div>Test!</div>,
+  };
+
+  hasAccess() {
+    return true;
+  }
+
+  navigationItem = {
+    title: NavTitle.AccessLists,
+    icon: <div />,
+    exact: true,
+    getLink(clusterId: string) {
+      return generatePath('/web/cluster/:clusterId/feature', { clusterId });
+    },
+  };
+}
+
 describe('navigation items', () => {
-  it('should render the feature link correctly', () => {
-    const history = createMemoryHistory({
+  let ctx: TeleportContext;
+  let history: MemoryHistory;
+
+  beforeEach(() => {
+    history = createMemoryHistory({
       initialEntries: ['/web/cluster/root/feature'],
     });
 
-    const ctx = new TeleportContext();
+    ctx = new TeleportContext();
     ctx.storeUser.state = makeUserContext({
       cluster: {
         name: 'test-cluster',
         lastConnected: Date.now(),
       },
     });
+  });
 
-    render(
-      <TeleportContextProvider ctx={ctx}>
-        <Router history={history}>
-          <NavigationItem
-            feature={new MockFeature()}
-            size={NavigationItemSize.Large}
-            transitionDelay={100}
-            visible={true}
-          />
-        </Router>
-      </TeleportContextProvider>
-    );
+  it('should render the feature link correctly', () => {
+    render(getNavigationItem({ ctx, history }));
 
     expect(screen.getByText('Users').closest('a')).toHaveAttribute(
       'href',
@@ -89,30 +108,7 @@ describe('navigation items', () => {
   });
 
   it('should change the feature link to the leaf cluster when navigating to a leaf cluster', () => {
-    const history = createMemoryHistory({
-      initialEntries: ['/web/cluster/root/feature'],
-    });
-
-    const ctx = new TeleportContext();
-    ctx.storeUser.state = makeUserContext({
-      cluster: {
-        name: 'test-cluster',
-        lastConnected: Date.now(),
-      },
-    });
-
-    render(
-      <TeleportContextProvider ctx={ctx}>
-        <Router history={history}>
-          <NavigationItem
-            feature={new MockFeature()}
-            size={NavigationItemSize.Large}
-            transitionDelay={100}
-            visible={true}
-          />
-        </Router>
-      </TeleportContextProvider>
-    );
+    render(getNavigationItem({ ctx, history }));
 
     expect(screen.getByText('Users').closest('a')).toHaveAttribute(
       'href',
@@ -126,4 +122,56 @@ describe('navigation items', () => {
       '/web/cluster/leaf/feature'
     );
   });
+
+  it('rendeirng of attention dot for access list', () => {
+    const { rerender } = render(
+      getNavigationItem({ ctx, history, feature: new MockAccessListFeature() })
+    );
+
+    expect(
+      screen.queryByTestId('nav-item-attention-dot')
+    ).not.toBeInTheDocument();
+
+    // Add in some notifications
+    ctx.storeNotifications.setNotifications([
+      {
+        item: {
+          kind: NotificationKind.AccessList,
+          resourceName: 'banana',
+          route: '',
+        },
+        id: 'abc',
+        date: new Date(),
+      },
+    ]);
+
+    rerender(
+      getNavigationItem({ ctx, history, feature: new MockAccessListFeature() })
+    );
+
+    expect(screen.getByTestId('nav-item-attention-dot')).toBeInTheDocument();
+  });
 });
+
+function getNavigationItem({
+  ctx,
+  history,
+  feature = new MockUserFeature(),
+}: {
+  ctx: TeleportContext;
+  history: MemoryHistory;
+  feature?: TeleportFeature;
+}) {
+  return (
+    <TeleportContextProvider ctx={ctx}>
+      <Router history={history}>
+        <NavigationItem
+          feature={feature}
+          size={NavigationItemSize.Large}
+          transitionDelay={100}
+          visible={true}
+        />
+      </Router>
+    </TeleportContextProvider>
+  );
+}

web/packages/teleport/src/Navigation/NavigationItem.tsx

@@ -28,14 +28,11 @@ import {
   LinkContent,
   NavigationItemSize,
 } from 'teleport/Navigation/common';
-
 import useStickyClusterId from 'teleport/useStickyClusterId';
-
 import localStorage from 'teleport/services/localStorage';
-
 import { useTeleport } from 'teleport';
-
 import { NavTitle, RecommendationStatus } from 'teleport/types';
+import { NotificationKind } from 'teleport/stores/storeNotifications';
 
 import type {
   TeleportFeature,
@@ -170,6 +167,18 @@ export function NavigationItem(props: NavigationItemProps) {
 
   // renderHighlightFeature returns red dot component if the feature recommendation state is 'NOTIFY'
   function renderHighlightFeature(featureName: NavTitle): JSX.Element {
+    if (featureName === NavTitle.AccessLists) {
+      const hasNotifications = ctx.storeNotifications.hasNotificationsByKind(
+        NotificationKind.AccessList
+      );
+
+      if (hasNotifications) {
+        return <AttentionDot />;
+      }
+
+      return null;
+    }
+
     // Get onboarding status. We'll only recommend features once user completes
     // initial onboarding (i.e. connect resources to Teleport cluster).
     const onboard = localStorage.getOnboardDiscover();
@@ -183,7 +192,7 @@ export function NavigationItem(props: NavigationItemProps) {
       featureName === NavTitle.TrustedDevices &&
       recommendFeatureStatus?.TrustedDevices === RecommendationStatus.Notify
     ) {
-      return <RedDot />;
+      return <AttentionDot />;
     }
     return null;
   }
@@ -264,7 +273,9 @@ export function NavigationItem(props: NavigationItemProps) {
   );
 }
 
-const RedDot = styled.div`
+const AttentionDot = styled.div.attrs(() => ({
+  'data-testid': 'nav-item-attention-dot',
+}))`
   margin-left: 15px;
   margin-top: 2px;
   width: 7px;

web/packages/teleport/src/Navigation/NavigationSwitcher.story.tsx

@@ -0,0 +1,79 @@
+/**
+ * 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 Flex from 'design/Flex';
+
+import { NavigationSwitcher } from './NavigationSwitcher';
+import { NavigationCategory } from './categories';
+
+export default {
+  title: 'Teleport/Navigation',
+};
+
+const navItems = [
+  { category: NavigationCategory.Management },
+  { category: NavigationCategory.Resources },
+];
+
+export function SwitcherResource() {
+  return (
+    <NavigationSwitcher
+      onChange={() => null}
+      items={navItems}
+      value={NavigationCategory.Resources}
+    />
+  );
+}
+
+export function SwitcherManagement() {
+  return (
+    <NavigationSwitcher
+      onChange={() => null}
+      items={navItems}
+      value={NavigationCategory.Management}
+    />
+  );
+}
+
+export function SwitcherRequiresManagementAttention() {
+  return (
+    <Flex css={{ position: 'relative' }}>
+      <NavigationSwitcher
+        onChange={() => null}
+        items={[
+          { category: NavigationCategory.Resources },
+          { category: NavigationCategory.Management, requiresAttention: true },
+        ]}
+        value={NavigationCategory.Resources}
+      />
+    </Flex>
+  );
+}
+
+export function SwitcherRequiresResourcesAttention() {
+  return (
+    <Flex css={{ position: 'relative' }}>
+      <NavigationSwitcher
+        onChange={() => null}
+        items={[
+          { category: NavigationCategory.Resources, requiresAttention: true },
+          { category: NavigationCategory.Management },
+        ]}
+        value={NavigationCategory.Management}
+      />
+    </Flex>
+  );
+}