Icons and nav titles for Access Graph navigation (#48568)

* Add icons for TAG routes

* Use `exact` from the route when matching active state

* Add nav titles for TAG routes

* Add history library types

* Add ACL for discovery configs & access graph integrations access

* Add min-height:0; to ensure flex children scroll properly

* Restore types and imports for icons story

* Fix test, add type definition to help catch in type checking

package.json

@@ -44,6 +44,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.13",
+    "@types/history": "^4.7.11",
     "@types/node": "^20.16.10",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",

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

@@ -107,6 +107,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.Copy} text="Copy" />
     <IconBox IconCmpt={Icon.CreditCard} text="CreditCard" />
     <IconBox IconCmpt={Icon.Cross} text="Cross" />
+    <IconBox IconCmpt={Icon.Crown} text="Crown" />
     <IconBox IconCmpt={Icon.Database} text="Database" />
     <IconBox IconCmpt={Icon.Desktop} text="Desktop" />
     <IconBox IconCmpt={Icon.DeviceMobileCamera} text="DeviceMobileCamera" />
@@ -142,6 +143,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.Label} text="Label" />
     <IconBox IconCmpt={Icon.Lan} text="Lan" />
     <IconBox IconCmpt={Icon.Laptop} text="Laptop" />
+    <IconBox IconCmpt={Icon.Layout} text="Layout" />
     <IconBox IconCmpt={Icon.License} text="License" />
     <IconBox IconCmpt={Icon.LineSegment} text="LineSegment" />
     <IconBox IconCmpt={Icon.LineSegments} text="LineSegments" />
@@ -172,6 +174,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.Plugs} text="Plugs" />
     <IconBox IconCmpt={Icon.PlugsConnected} text="PlugsConnected" />
     <IconBox IconCmpt={Icon.Plus} text="Plus" />
     <IconBox IconCmpt={Icon.PowerSwitch} text="PowerSwitch" />
@@ -198,6 +201,7 @@ export const Icons = () => (
     <IconBox IconCmpt={Icon.Stars} text="Stars" />
     <IconBox IconCmpt={Icon.Sun} text="Sun" />
     <IconBox IconCmpt={Icon.SyncAlt} text="SyncAlt" />
+    <IconBox IconCmpt={Icon.Table} text="Table" />
     <IconBox IconCmpt={Icon.Tablet} text="Tablet" />
     <IconBox IconCmpt={Icon.Tags} text="Tags" />
     <IconBox IconCmpt={Icon.Terminal} text="Terminal" />

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

@@ -0,0 +1,62 @@
+/**
+ * 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 Crown({ size = 24, color, ...otherProps }: IconProps) {
+  return (
+    <Icon size={size} color={color} className="icon icon-crown" {...otherProps}>
+      <path
+        d="M11.789 2.284a1.205 1.205 0 0 0-.615.322c-.047.052-.98 1.579-2.074 3.394a1143.919 1143.919 0 0 1-1.999 3.312c-.006.007-1.104-.533-2.438-1.2L2.236 6.9l-.348.001c-.399.001-.528.051-.798.312-.201.193-.33.501-.33.786 0 .149.416 1.472 1.764 5.608.971 2.977 1.79 5.462 1.82 5.521.126.243.514.418.786.352.072-.017.319-.121.55-.232 3.45-1.65 9.19-1.65 12.64 0 .231.111.483.216.56.235.266.064.65-.111.776-.355.03-.059.843-2.52 1.807-5.468 1.967-6.022 1.883-5.707 1.658-6.164-.212-.43-.58-.638-1.08-.609-.28.016-.311.03-2.707 1.226-1.333.666-2.428 1.206-2.435 1.199-.006-.007-.905-1.497-1.998-3.312-1.093-1.815-2.034-3.35-2.093-3.411-.134-.142-.46-.297-.668-.318a1.69 1.69 0 0 0-.351.013m2.131 5c1.072 1.784 1.966 3.229 2.05 3.315.258.261.625.38.98.317.121-.021.977-.425 2.36-1.114 1.193-.595 2.17-1.071 2.17-1.059 0 .052-2.891 8.88-2.917 8.908-.016.017-.197-.033-.403-.111-1.033-.394-2.522-.748-3.78-.897-1.41-.168-3.35-.168-4.76 0-1.266.15-2.74.5-3.78.897-.206.078-.387.128-.403.111-.021-.023-2.709-8.231-2.895-8.842-.023-.075.344.095 2.19 1.016l2.218 1.107.275-.001c.327 0 .596-.11.813-.332.078-.08.997-1.57 2.042-3.31 1.045-1.741 1.909-3.166 1.92-3.166.011-.001.875 1.422 1.92 3.161"
+        fillRule="evenodd"
+      />
+    </Icon>
+  );
+}

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

@@ -0,0 +1,67 @@
+/**
+ * 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 Layout({ size = 24, color, ...otherProps }: IconProps) {
+  return (
+    <Icon
+      size={size}
+      color={color}
+      className="icon icon-layout"
+      {...otherProps}
+    >
+      <path
+        d="M3.34 3.814a1.459 1.459 0 0 0-.666.413c-.226.235-.333.44-.39.752-.063.338-.062 13.774.001 14.069.113.535.516.979 1.029 1.135.279.084 17.093.084 17.372 0 .525-.16.929-.615 1.03-1.162.062-.331.062-13.711 0-14.042a1.366 1.366 0 0 0-.423-.784 1.511 1.511 0 0 0-.673-.393c-.239-.062-17.065-.05-17.28.012m16.9 3.306V9H3.76V5.24h16.48v1.88M9 14.64v4.12H3.76v-8.24H9v4.12m11.24 0v4.12h-9.72v-8.24h9.72v4.12"
+        fillRule="evenodd"
+      />
+    </Icon>
+  );
+}

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

@@ -0,0 +1,68 @@
+/**
+ * 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 Plugs({ size = 24, color, ...otherProps }: IconProps) {
+  return (
+    <Icon size={size} color={color} className="icon icon-plugs" {...otherProps}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23.7489 0.251054C24.0837 0.585793 24.0837 1.12851 23.7489 1.46325L20.7085 4.50371L21.2845 5.07893C21.9274 5.72191 22.2891 6.59439 22.2891 7.50367C22.2891 8.41295 21.9279 9.285 21.2849 9.92798L18.784 12.4289L19.4635 13.1083C19.7982 13.4431 19.7982 13.9858 19.4635 14.3205C19.1287 14.6553 18.586 14.6553 18.2513 14.3205L16.9808 13.0501C16.9757 13.0452 16.9706 13.0402 16.9655 13.0352C16.9605 13.0301 16.9555 13.025 16.9506 13.0199L10.9808 7.05008C10.9756 7.04517 10.9705 7.04018 10.9655 7.03511C10.9604 7.03005 10.9554 7.02493 10.9505 7.01977L9.67973 5.74901C9.34499 5.41427 9.34499 4.87156 9.67973 4.53682C10.0145 4.20208 10.5572 4.20208 10.8919 4.53682L11.5717 5.21663L14.0732 2.71518C14.716 2.07355 15.5871 1.71319 16.4954 1.71319C17.4036 1.71319 18.2747 2.07355 18.9175 2.71518L19.4955 3.29233L22.5367 0.251054C22.8715 -0.0836847 23.4142 -0.0836848 23.7489 0.251054ZM18.8363 5.05681L17.7064 3.92849C17.3851 3.60777 16.9494 3.42749 16.4954 3.42749C16.0414 3.42749 15.6059 3.60758 15.2845 3.92823L12.7839 6.42883L17.5718 11.2167L20.0727 8.71583C20.3941 8.39434 20.5748 7.9583 20.5748 7.50367C20.5748 7.04903 20.3942 6.613 20.0727 6.29151L18.9441 5.16446C18.9246 5.14816 18.9057 5.13087 18.8874 5.11258C18.8694 5.09457 18.8524 5.07596 18.8363 5.05681Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.53682 9.67973C4.87156 9.34499 5.41427 9.34499 5.74901 9.67973L7.71437 11.6451L9.67973 9.67973C10.0145 9.34499 10.5572 9.34499 10.8919 9.67973C11.2267 10.0145 11.2267 10.5572 10.8919 10.8919L8.92657 12.8573L11.143 15.0737L13.1083 13.1083C13.4431 12.7736 13.9858 12.7736 14.3205 13.1083C14.6553 13.4431 14.6553 13.9858 14.3205 14.3205L12.3552 16.2859L14.3205 18.2513C14.6553 18.586 14.6553 19.1287 14.3205 19.4635C13.9858 19.7982 13.4431 19.7982 13.1083 19.4635L12.4286 18.7837L9.92744 21.2849C9.28446 21.9278 8.4124 22.2891 7.50311 22.2891C6.59383 22.2891 5.72178 21.9279 5.0788 21.2849L4.50343 20.7088L1.46325 23.7489C1.12851 24.0837 0.585793 24.0837 0.251054 23.7489C-0.0836848 23.4142 -0.0836847 22.8715 0.251054 22.5367L3.29205 19.4957L2.71477 18.9177C2.07314 18.2749 1.71263 17.4036 1.71263 16.4954C1.71263 15.5871 2.073 14.716 2.71463 14.0732L5.21635 11.5715L4.53682 10.8919C4.20208 10.5572 4.20208 10.0145 4.53682 9.67973ZM11.2164 17.5715L8.71525 20.0727C8.39376 20.3942 7.95775 20.5748 7.50311 20.5748C7.04847 20.5748 6.61245 20.3942 6.29096 20.0727L5.16725 18.9475C5.15015 18.9268 5.13192 18.9068 5.11258 18.8874C5.09352 18.8684 5.07378 18.8504 5.05345 18.8335L3.9278 17.7063C3.60707 17.3849 3.42694 16.9494 3.42694 16.4954C3.42694 16.0414 3.60728 15.6057 3.92793 15.2843L6.42855 12.7837L11.2164 17.5715Z"
+      />
+    </Icon>
+  );
+}

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

@@ -0,0 +1,62 @@
+/**
+ * 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 Table({ size = 24, color, ...otherProps }: IconProps) {
+  return (
+    <Icon size={size} color={color} className="icon icon-table" {...otherProps}>
+      <path
+        d="M2.613 4.621a.901.901 0 0 0-.26.25l-.093.149-.012 6.5c-.008 4.739.001 6.565.034 6.739a1.5 1.5 0 0 0 1.288 1.223c.33.048 16.53.048 16.86 0a1.5 1.5 0 0 0 1.288-1.223c.033-.174.042-2 .034-6.739l-.012-6.5-.093-.15a.891.891 0 0 0-.264-.25l-.17-.1h-9.217l-9.216.001-.167.1M20.24 7.5V9H3.76V6h16.48v1.5M7.48 12.02v1.5H3.76v-3h3.72v1.5m12.76 0v1.5H9v-3h11.24v1.5M7.48 16.5V18H3.76v-3h3.72v1.5m12.76 0V18H9v-3h11.24v1.5"
+        fillRule="evenodd"
+      />
+    </Icon>
+  );
+}