[v17] [Web] Side-nav tweaks and resource kind-specific sections (#48024)

* sidenav related fixes and tweaks (#47889)

* add resource kind-specific sidenav sections (#47882)

web/packages/design/src/Alert/Alert.tsx

@@ -20,6 +20,8 @@ import React, { useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { style, color, ColorProps } from 'styled-system';
 
+import { IconProps } from 'design/Icon/Icon';
+
 import { space, SpaceProps, width, WidthProps } from '../system';
 import { Theme } from '../theme';
 import * as Icon from '../Icon';
@@ -111,7 +113,7 @@ interface Props<K> {
   /** Additional description to be displayed below the main content. */
   details?: React.ReactNode;
   /** Overrides the icon specified by {@link AlertProps.kind}. */
-  icon?: React.ComponentType<Icon.IconProps>;
+  icon?: React.ComponentType<IconProps>;
   /** If specified, causes the alert to display a primary action button. */
   primaryAction?: Action;
   /** If specified, causes the alert to display a secondary action button. */
@@ -253,8 +255,8 @@ const AlertIcon = ({
   ...otherProps
 }: {
   kind: AlertKind | BannerKind;
-  customIcon?: React.ComponentType<Icon.IconProps>;
-} & Icon.IconProps) => {
+  customIcon?: React.ComponentType<IconProps>;
+} & IconProps) => {
   const commonProps = { role: 'graphics-symbol', ...otherProps };
   if (CustomIcon) {
     return <CustomIcon {...commonProps} />;

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

@@ -135,6 +135,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.Integrations} text="Integrations" />
     <IconBox IconCmpt={Icon.Invoices} text="Invoices" />
     <IconBox IconCmpt={Icon.Key} text="Key" />
+    <IconBox IconCmpt={Icon.KeyHole} text="KeyHole" />
     <IconBox IconCmpt={Icon.Keyboard} text="Keyboard" />
     <IconBox IconCmpt={Icon.Keypair} text="Keypair" />
     <IconBox IconCmpt={Icon.Kubernetes} text="Kubernetes" />
@@ -152,6 +153,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.ListThin} text="ListThin" />
     <IconBox IconCmpt={Icon.ListView} text="ListView" />
     <IconBox IconCmpt={Icon.Lock} text="Lock" />
+    <IconBox IconCmpt={Icon.LockKey} text="LockKey" />
     <IconBox IconCmpt={Icon.Logout} text="Logout" />
     <IconBox IconCmpt={Icon.Magnifier} text="Magnifier" />
     <IconBox IconCmpt={Icon.MagnifyingMinus} text="MagnifyingMinus" />
@@ -170,6 +172,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.Password} text="Password" />
     <IconBox IconCmpt={Icon.Pencil} text="Pencil" />
     <IconBox IconCmpt={Icon.Planet} text="Planet" />
+    <IconBox IconCmpt={Icon.PlugsConnected} text="PlugsConnected" />
     <IconBox IconCmpt={Icon.Plus} text="Plus" />
     <IconBox IconCmpt={Icon.PowerSwitch} text="PowerSwitch" />
     <IconBox IconCmpt={Icon.Printer} text="Printer" />

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

@@ -0,0 +1,73 @@
+/**
+ * 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 React from 'react';
+
+import { Icon, IconProps } from '../Icon';
+
+/*
+
+THIS FILE IS GENERATED. DO NOT EDIT.
+
+*/
+
+export function KeyHole({ size = 24, color, ...otherProps }: IconProps) {
+  return (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-keyhole"
+      {...otherProps}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.0027 6.75C10.3909 6.75 8.93073 7.81239 8.4347 9.34594C8.00085 10.6873 8.37601 12.1685 9.35113 13.1503L8.33031 15.7086C8.03822 16.442 8.58432 17.2487 9.37375 17.2499H14.626C15.4154 17.2487 15.9614 16.442 15.6695 15.7086L14.6536 13.1509C15.6292 12.1691 16.0047 10.6876 15.5707 9.34594C15.0747 7.81239 13.6145 6.75 12.0027 6.75ZM9.86191 9.80757C10.1577 8.89301 11.0415 8.25 12.0027 8.25C12.9639 8.25 13.8477 8.89301 14.1435 9.80757C14.4393 10.7221 14.0995 11.7609 13.3204 12.3238C13.042 12.5249 12.9358 12.8894 13.0625 13.2086L14.0719 15.7499H9.92885L10.9424 13.2097C11.0699 12.8903 10.9638 12.5252 10.6851 12.3238C9.90592 11.7609 9.5661 10.7221 9.86191 9.80757Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25ZM3.75 12C3.75 7.44365 7.44365 3.75 12 3.75C16.5563 3.75 20.25 7.44365 20.25 12C20.25 16.5563 16.5563 20.25 12 20.25C7.44365 20.25 3.75 16.5563 3.75 12Z"
+      />
+    </Icon>
+  );
+}

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

@@ -0,0 +1,73 @@
+/**
+ * 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 React from 'react';
+
+import { Icon, IconProps } from '../Icon';
+
+/*
+
+THIS FILE IS GENERATED. DO NOT EDIT.
+
+*/
+
+export function LockKey({ size = 24, color, ...otherProps }: IconProps) {
+  return (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-lockkey"
+      {...otherProps}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.75 15.6413C13.8343 15.3186 14.625 14.3141 14.625 13.125C14.625 11.6753 13.4497 10.5 12 10.5C10.5503 10.5 9.375 11.6753 9.375 13.125C9.375 14.3141 10.1657 15.3186 11.25 15.6413V17.25C11.25 17.6642 11.5858 18 12 18C12.4142 18 12.75 17.6642 12.75 17.25V15.6413ZM12 12C11.3787 12 10.875 12.5037 10.875 13.125C10.875 13.7463 11.3787 14.25 12 14.25C12.6213 14.25 13.125 13.7463 13.125 13.125C13.125 12.5037 12.6213 12 12 12Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.5 7.5V5.25C7.5 4.05653 7.97411 2.91193 8.81802 2.06802C9.66193 1.22411 10.8065 0.75 12 0.75C13.1935 0.75 14.3381 1.22411 15.182 2.06802C16.0259 2.91193 16.5 4.05653 16.5 5.25V7.5H19.5C20.3284 7.5 21 8.17157 21 9V19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5V9C3 8.17157 3.67157 7.5 4.5 7.5H7.5ZM9.87868 3.12868C10.4413 2.56607 11.2044 2.25 12 2.25C12.7956 2.25 13.5587 2.56607 14.1213 3.12868C14.6839 3.69129 15 4.45435 15 5.25V7.5H9V5.25C9 4.45435 9.31607 3.69129 9.87868 3.12868ZM4.5 9V19.5H19.5V9H4.5Z"
+      />
+    </Icon>
+  );
+}

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

@@ -0,0 +1,72 @@
+/**
+ * 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 React from 'react';
+
+import { Icon, IconProps } from '../Icon';
+
+/*
+
+THIS FILE IS GENERATED. DO NOT EDIT.
+
+*/
+
+export function PlugsConnected({ size = 24, color, ...otherProps }: IconProps) {
+  return (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-plugsconnected"
+      {...otherProps}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M22.2801 2.78033L17.3676 7.69282L17.8715 8.1967C19.0431 9.36827 19.0431 11.2678 17.8715 12.4393L15.6857 14.6251L16.2803 15.2197C16.5732 15.5126 16.5732 15.9874 16.2803 16.2803C15.9874 16.5732 15.5126 16.5732 15.2197 16.2803L14.6251 15.6857L12.4396 17.8712C11.268 19.0428 9.36851 19.0428 8.19693 17.8712L7.69305 17.3674L2.78033 22.2801C2.48744 22.573 2.01256 22.573 1.71967 22.2801C1.42678 21.9872 1.42678 21.5123 1.71967 21.2194L6.63239 16.3067L6.12864 15.803C4.95707 14.6314 4.95707 12.7319 6.12864 11.5603L8.31415 9.37481L7.71967 8.78033C7.42678 8.48744 7.42678 8.01256 7.71967 7.71967C8.01256 7.42678 8.48744 7.42678 8.78033 7.71967L9.37481 8.31415L11.5606 6.12841C12.7321 4.95684 14.6316 4.95684 15.8032 6.12841L16.3069 6.63216L21.2194 1.71967C21.5123 1.42678 21.9872 1.42678 22.2801 1.71967C22.573 2.01256 22.573 2.48744 22.2801 2.78033ZM8.2321 15.7851L8.22345 15.7763L8.21467 15.7677L7.1893 14.7423C6.60352 14.1565 6.60352 13.2068 7.1893 12.621L9.37481 10.4355L13.5644 14.6251L11.3789 16.8106C10.7931 17.3964 9.84338 17.3964 9.25759 16.8106L8.2321 15.7851ZM15.7763 8.22345L15.7657 8.21259L15.7586 8.20512L14.7425 7.18907C14.1567 6.60329 13.207 6.60329 12.6212 7.18907L10.4355 9.37481L14.6251 13.5644L16.8108 11.3787C17.3966 10.7929 17.3966 9.84315 16.8108 9.25736L15.7947 8.24119C15.7885 8.2354 15.7823 8.22949 15.7763 8.22345Z"
+      />
+      <path d="M8.76303 2.28869C9.15599 2.15771 9.58073 2.37008 9.71172 2.76303L10.4617 5.01303C10.5927 5.40599 10.3803 5.83073 9.98737 5.96172C9.59442 6.0927 9.16968 5.88033 9.03869 5.48737L8.28869 3.23737C8.15771 2.84442 8.37008 2.41968 8.76303 2.28869Z" />
+      <path d="M3.23737 8.28869C2.84442 8.15771 2.41968 8.37008 2.28869 8.76303C2.15771 9.15599 2.37008 9.58073 2.76303 9.71172L5.01303 10.4617C5.40599 10.5927 5.83073 10.3803 5.96172 9.98737C6.0927 9.59442 5.88033 9.16968 5.48737 9.03869L3.23737 8.28869Z" />
+      <path d="M18.0387 14.013C18.1697 13.6201 18.5944 13.4077 18.9874 13.5387L21.2374 14.2887C21.6303 14.4197 21.8427 14.8444 21.7117 15.2374C21.5807 15.6303 21.156 15.8427 20.763 15.7117L18.513 14.9617C18.1201 14.8307 17.9077 14.406 18.0387 14.013Z" />
+      <path d="M14.9617 18.513C14.8307 18.1201 14.406 17.9077 14.013 18.0387C13.6201 18.1697 13.4077 18.5944 13.5387 18.9874L14.2887 21.2374C14.4197 21.6303 14.8444 21.8427 15.2374 21.7117C15.6303 21.5807 15.8427 21.156 15.7117 20.763L14.9617 18.513Z" />
+    </Icon>
+  );
+}

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

@@ -22,7 +22,7 @@ THIS FILE IS GENERATED. DO NOT EDIT.
 
 */
 
-export { Icon, type IconProps } from './Icon';
+export { Icon } from './Icon';
 
 export { Add } from './Icons/Add';
 export { AddCircle } from './Icons/AddCircle';
@@ -121,6 +121,7 @@ export { Info } from './Icons/Info';
 export { Integrations } from './Icons/Integrations';
 export { Invoices } from './Icons/Invoices';
 export { Key } from './Icons/Key';
+export { KeyHole } from './Icons/KeyHole';
 export { Keyboard } from './Icons/Keyboard';
 export { Keypair } from './Icons/Keypair';
 export { Kubernetes } from './Icons/Kubernetes';
@@ -138,6 +139,7 @@ export { ListMagnifyingGlass } from './Icons/ListMagnifyingGlass';
 export { ListThin } from './Icons/ListThin';
 export { ListView } from './Icons/ListView';
 export { Lock } from './Icons/Lock';
+export { LockKey } from './Icons/LockKey';
 export { Logout } from './Icons/Logout';
 export { Magnifier } from './Icons/Magnifier';
 export { MagnifyingMinus } from './Icons/MagnifyingMinus';
@@ -156,6 +158,7 @@ export { PaperPlane } from './Icons/PaperPlane';
 export { Password } from './Icons/Password';
 export { Pencil } from './Icons/Pencil';
 export { Planet } from './Icons/Planet';
+export { PlugsConnected } from './Icons/PlugsConnected';
 export { Plus } from './Icons/Plus';
 export { PowerSwitch } from './Icons/PowerSwitch';
 export { Printer } from './Icons/Printer';