update sidenav sections (#52809)

web/packages/design/src/Icon/Icons.story.tsx

@@ -51,6 +51,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.ArrowLeft} text="ArrowLeft" />
     <IconBox IconCmpt={Icon.ArrowLineLeft} text="ArrowLineLeft" />
     <IconBox IconCmpt={Icon.ArrowRight} text="ArrowRight" />
+    <IconBox IconCmpt={Icon.ArrowSquareIn} text="ArrowSquareIn" />
     <IconBox IconCmpt={Icon.ArrowSquareOut} text="ArrowSquareOut" />
     <IconBox IconCmpt={Icon.ArrowUp} text="ArrowUp" />
     <IconBox IconCmpt={Icon.ArrowsIn} text="ArrowsIn" />

web/packages/design/src/Icon/Icons/ArrowSquareIn.tsx

@@ -0,0 +1,66 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+*/
+
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '../Icon';
+
+/*
+
+THIS FILE IS GENERATED. DO NOT EDIT.
+
+*/
+
+export const ArrowSquareIn = forwardRef<HTMLSpanElement, IconProps>(
+  ({ size = 24, color, ...otherProps }, ref) => (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-arrowsquarein"
+      {...otherProps}
+      ref={ref}
+    >
+      <path d="M7.5 3C7.10217 3 6.72064 3.15804 6.43934 3.43934C6.15804 3.72064 6 4.10217 6 4.5V9C6 9.41421 6.33579 9.75 6.75 9.75C7.16421 9.75 7.5 9.41421 7.5 9V4.5H19.5V16.5H15C14.5858 16.5 14.25 16.8358 14.25 17.25C14.25 17.6642 14.5858 18 15 18H19.5C19.8978 18 20.2794 17.842 20.5607 17.5607C20.842 17.2794 21 16.8978 21 16.5V4.5C21 4.10218 20.842 3.72065 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3H7.5Z" />
+      <path d="M11.7803 12.2197C11.9363 12.3757 12.0092 12.5833 11.9991 12.7875L12 18.7499C12.0001 19.1641 11.6643 19.4999 11.2501 19.5C10.8359 19.5001 10.5001 19.1643 10.5 18.7501L10.4993 14.5613L4.28033 20.7803C3.98744 21.0732 3.51256 21.0732 3.21967 20.7803C2.92678 20.4874 2.92678 20.0126 3.21967 19.7197L9.43869 13.5007L5.24988 13.5C4.83567 13.4999 4.49994 13.1641 4.5 12.7499C4.50006 12.3357 4.8359 11.9999 5.25012 12L11.2125 12.0009C11.4168 11.9908 11.6243 12.0637 11.7803 12.2197Z" />
+    </Icon>
+  )
+);

web/packages/design/src/Icon/index.ts

@@ -40,6 +40,7 @@ export { ArrowForward } from './Icons/ArrowForward';
 export { ArrowLeft } from './Icons/ArrowLeft';
 export { ArrowLineLeft } from './Icons/ArrowLineLeft';
 export { ArrowRight } from './Icons/ArrowRight';
+export { ArrowSquareIn } from './Icons/ArrowSquareIn';
 export { ArrowSquareOut } from './Icons/ArrowSquareOut';
 export { ArrowUp } from './Icons/ArrowUp';
 export { ArrowsIn } from './Icons/ArrowsIn';

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

@@ -26,9 +26,8 @@ import styled from 'styled-components';
 export const MainContainer = styled.div`
   display: flex;
   flex: 1;
-  --sidebar-width: 256px;
-  --sidenav-width: 76px;
-  --sidenav-panel-width: 224px;
+  --sidenav-width: 84px;
+  --sidenav-panel-width: 264px;
   overflow: hidden;
   margin-top: ${p => p.theme.topBarHeight[0]}px;
   @media screen and (min-width: ${p => p.theme.breakpoints.small}px) {

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

@@ -40,13 +40,13 @@ export function CategoryIcon({
     case NavigationCategory.Resources:
       Icon = Icons.Server;
       break;
-    case NavigationCategory.Access:
+    case NavigationCategory.ZeroTrustAccess:
       Icon = Icons.KeyHole;
       break;
-    case NavigationCategory.Identity:
+    case NavigationCategory.IdentityGovernance:
       Icon = Icons.FingerprintSimple;
       break;
-    case NavigationCategory.Policy:
+    case NavigationCategory.IdentitySecurity:
       Icon = Icons.ShieldCheck;
       break;
     case NavigationCategory.Audit:
@@ -58,6 +58,9 @@ export function CategoryIcon({
     case CustomNavigationCategory.Search:
       Icon = Icons.Magnifier;
       break;
+    case NavigationCategory.MachineWorkloadId:
+      Icon = Icons.Bots;
+      break;
     default:
       return null;
   }

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

@@ -110,6 +110,8 @@ export type NavigationSubsection = {
    * Note that this is merely extra logic, and does not replace the default routing behaviour of a subsection which will navigate the user to the route.
    */
   onClick?: () => void;
+  /** isHyperLink is whether this subsection is merely a hyperlink/shortcut to another subsection. */
+  isHyperLink?: boolean;
 };
 
 function getNavigationSections(
@@ -158,12 +160,11 @@ function getSubsectionsForCategory(
       exact: feature.navigationItem.exact,
       icon: feature.navigationItem.icon,
       searchableTags: feature.navigationItem.searchableTags,
+      isHyperLink: feature.isHyperLink,
     };
   });
 }
 
-// getNavSubsectionForRoute returns the sidenav subsection that the user is correctly on (based on route).
-// Note that it is possible for this not to return anything, such as in the case where the user is on a page that isn't in the sidenav (eg. Account Settings).
 /**
  * getTopMenuSection returns a NavigationSection with the top menu items. This is not used in the sidenav, but will be used to make the top menu items searchable.
  */
@@ -184,10 +185,12 @@ function getTopMenuSection(features: TeleportFeature[]): NavigationSection {
   };
 }
 
+/** getNavSubsectionForRoute returns the sidenav subsection that the user is correctly on (based on route).
+ * Note that it is possible for this not to return anything, such as in the case where the user is on a page that isn't in the sidenav (eg. Account Settings). **/
 function getNavSubsectionForRoute(
   features: TeleportFeature[],
   route: history.Location<unknown> | Location
-): NavigationSubsection {
+): NavigationSubsection | undefined {
   let feature = features
     .filter(feature => Boolean(feature.route))
     .find(feature =>
@@ -206,7 +209,8 @@ function getNavSubsectionForRoute(
 
   if (
     !feature ||
-    (!feature.category && !feature.topMenuItem && !feature.navigationItem)
+    (!feature.category && !feature.topMenuItem && !feature.navigationItem) ||
+    feature.isHyperLink
   ) {
     return;
   }

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

@@ -21,7 +21,7 @@ import { NavLink } from 'react-router-dom';
 import styled, { css, useTheme } from 'styled-components';
 
 import { Box, ButtonIcon, Flex, P2, Text } from 'design';
-import { ArrowLineLeft } from 'design/Icon';
+import { ArrowLineLeft, ArrowSquareIn } from 'design/Icon';
 import { Theme } from 'design/theme';
 import { HoverTooltip, IconTooltip } from 'design/Tooltip';
 
@@ -100,7 +100,10 @@ export function DefaultSection({
             {!section.standalone &&
               section.subsections.map(subsection => (
                 <SubsectionItem
-                  $active={currentView?.route === subsection.route}
+                  $active={
+                    currentView?.route === subsection.route &&
+                    !subsection.isHyperLink
+                  }
                   to={subsection.route}
                   exact={subsection.exact}
                   key={subsection.title}
@@ -110,6 +113,9 @@ export function DefaultSection({
                 >
                   <subsection.icon size={16} />
                   <P2>{subsection.title}</P2>
+                  {subsection.isHyperLink && (
+                    <ArrowSquareIn size={16} color="text.muted" />
+                  )}
                 </SubsectionItem>
               ))}
           </Box>
@@ -170,7 +176,7 @@ export function StandaloneSection({
   );
 }
 
-export const rightPanelWidth = 236;
+export const rightPanelWidth = 274;
 
 export const RightPanel = styled(Box).attrs({ px: '5px' })<{
   isVisible: boolean;
@@ -266,8 +272,8 @@ export const CategoryButton = styled.button<{
   $active: boolean;
   isExpanded?: boolean;
 }>`
-  min-height: 60px;
-  min-width: 60px;
+  height: 68px;
+  width: 68px;
   cursor: pointer;
   outline: hidden;
   border: none;
@@ -282,11 +288,12 @@ export const CategoryButton = styled.button<{
   justify-content: center;
   gap: ${props => props.theme.space[1]}px;
   font-family: ${props => props.theme.font};
+  padding: ${props => props.theme.space[2]}px ${props => props.theme.space[1]}px;
 
   font-size: ${props => props.theme.typography.body4.fontSize};
   font-weight: ${props => props.theme.typography.body4.fontWeight};
   letter-spacing: ${props => props.theme.typography.body4.letterSpacing};
-  line-height: ${props => props.theme.typography.body4.lineHeight};
+  line-height: 12px;
   text-decoration: none;
 
   ${props => getCategoryStyles(props.theme, props.$active, props.isExpanded)}

web/packages/teleport/src/Navigation/categories.ts

@@ -18,9 +18,10 @@
 
 export enum NavigationCategory {
   Resources = 'Resources',
-  Access = 'Access',
-  Identity = 'Identity',
-  Policy = 'Policy',
+  ZeroTrustAccess = 'Zero Trust Access',
+  MachineWorkloadId = 'Machine & Workload ID',
+  IdentityGovernance = 'Identity Governance',
+  IdentitySecurity = 'Identity Security',
   Audit = 'Audit',
   AddNew = 'Add New',
 }
@@ -43,9 +44,10 @@ export enum CustomNavigationSubcategory {
 export type SidenavCategory = NavigationCategory | CustomNavigationCategory;
 
 export const NAVIGATION_CATEGORIES = [
-  NavigationCategory.Access,
-  NavigationCategory.Identity,
-  NavigationCategory.Policy,
+  NavigationCategory.ZeroTrustAccess,
+  NavigationCategory.MachineWorkloadId,
+  NavigationCategory.IdentityGovernance,
+  NavigationCategory.IdentitySecurity,
   NavigationCategory.Audit,
   NavigationCategory.AddNew,
 ];