From 2ffc28a8343b69f95df6cba2b396669670249374 Mon Sep 17 00:00:00 2001 From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Date: Wed, 9 Feb 2022 09:44:49 -0800 Subject: [PATCH] Console K Bar (#1532) Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- portal-ui/package.json | 1 + portal-ui/src/Routes.tsx | 5 +- portal-ui/src/icons/AzureTierIconXs.tsx | 1 - portal-ui/src/icons/CallHomeFeatureIcon.tsx | 3 - .../src/icons/DiagnosticsFeatureIcon.tsx | 1 - portal-ui/src/icons/GoogleTierIconXs.tsx | 1 - portal-ui/src/icons/LoginMinIOLogo.tsx | 1 - portal-ui/src/icons/MinIOTierIconXs.tsx | 1 - .../src/icons/PerformanceFeatureIcon.tsx | 1 - portal-ui/src/icons/S3TierIconXs.tsx | 5 - .../src/icons/SidebarMenus/AccessMenuIcon.tsx | 2 - .../icons/SidebarMenus/AuditLogsMenuIcon.tsx | 4 - .../icons/SidebarMenus/BucketsMenuIcon.tsx | 2 - .../icons/SidebarMenus/CallHomeMenuIcon.tsx | 1 - .../SidebarMenus/DiagnosticsMenuIcon.tsx | 1 - .../src/icons/SidebarMenus/DrivesMenuIcon.tsx | 4 - .../src/icons/SidebarMenus/GroupsMenuIcon.tsx | 7 - .../icons/SidebarMenus/IdentityMenuIcon.tsx | 1 - .../icons/SidebarMenus/InspectMenuIcon.tsx | 1 - .../src/icons/SidebarMenus/LogsMenuIcon.tsx | 3 - .../icons/SidebarMenus/MenuCollapsedIcon.tsx | 1 - .../icons/SidebarMenus/MenuExpandedIcon.tsx | 1 - .../icons/SidebarMenus/MetricsMenuIcon.tsx | 2 - .../icons/SidebarMenus/MonitoringMenuIcon.tsx | 3 - .../SidebarMenus/PerformanceMenuIcon.tsx | 3 - .../icons/SidebarMenus/ProfileMenuIcon.tsx | 4 - .../icons/SidebarMenus/RegisterMenuIcon.tsx | 2 - .../icons/SidebarMenus/SupportMenuIcon.tsx | 3 - .../src/icons/SidebarMenus/TraceMenuIcon.tsx | 1 - .../src/icons/SidebarMenus/UsersMenuIcon.tsx | 3 - portal-ui/src/icons/TiersNotAvailableIcon.tsx | 2 - portal-ui/src/screens/Console/Console.tsx | 1 - portal-ui/src/screens/Console/ConsoleKBar.tsx | 264 +++++++++++++ portal-ui/src/screens/Console/Menu/Menu.tsx | 330 +---------------- .../src/screens/Console/Menu/MenuItem.tsx | 14 +- portal-ui/src/screens/Console/valid-routes.ts | 348 ++++++++++++++++++ portal-ui/yarn.lock | 59 ++- 37 files changed, 686 insertions(+), 401 deletions(-) create mode 100644 portal-ui/src/screens/Console/ConsoleKBar.tsx create mode 100644 portal-ui/src/screens/Console/valid-routes.ts diff --git a/portal-ui/package.json b/portal-ui/package.json index fff424bf1..00a5c1206 100644 --- a/portal-ui/package.json +++ b/portal-ui/package.json @@ -36,6 +36,7 @@ "chart.js": "^2.9.3", "codemirror": "^5.52.2", "history": "^4.10.1", + "kbar": "^0.1.0-beta.27", "local-storage-fallback": "^4.1.1", "lodash": "^4.17.21", "minio": "^7.0.26", diff --git a/portal-ui/src/Routes.tsx b/portal-ui/src/Routes.tsx index 677b3dcab..6f37141c3 100644 --- a/portal-ui/src/Routes.tsx +++ b/portal-ui/src/Routes.tsx @@ -17,11 +17,10 @@ import React, { Suspense } from "react"; import { Route, Router, Switch } from "react-router-dom"; import history from "./history"; - -import Console from "./screens/Console/Console"; import { hot } from "react-hot-loader/root"; import ProtectedRoute from "./ProtectedRoutes"; import LoadingComponent from "./common/LoadingComponent"; +import AppConsole from "./screens/Console/ConsoleKBar"; const Login = React.lazy(() => import("./screens/LoginPage/LoginPage")); const LoginCallback = React.lazy( @@ -50,7 +49,7 @@ const Routes = () => { )} /> - + ); diff --git a/portal-ui/src/icons/AzureTierIconXs.tsx b/portal-ui/src/icons/AzureTierIconXs.tsx index 3b890e7bb..165dfd526 100644 --- a/portal-ui/src/icons/AzureTierIconXs.tsx +++ b/portal-ui/src/icons/AzureTierIconXs.tsx @@ -31,7 +31,6 @@ const AzureTierIconXs = (props: SVGProps) => { id="path21" d="M447.781,487.513l5.188-.917.049-.011-2.668-3.173c-1.467-1.746-2.668-3.181-2.668-3.188s2.756-7.6,2.771-7.63c.006-.009,1.881,3.229,4.545,7.847l4.572,7.923.035.062-8.479,0-8.48,0S447.781,487.513,447.781,487.513Zm-10.178-.969s1.257-2.187,2.794-4.85l2.794-4.842,3.257-2.733c1.792-1.5,3.261-2.735,3.266-2.737a.672.672,0,0,1-.052.132c-.035.074-1.627,3.487-3.535,7.583l-3.472,7.448-2.525,0C438.739,486.551,437.6,486.55,437.6,486.544Z" transform="translate(-437.603 -471.382)" - fill="#8399ab" /> diff --git a/portal-ui/src/icons/CallHomeFeatureIcon.tsx b/portal-ui/src/icons/CallHomeFeatureIcon.tsx index b84497659..6994e716c 100644 --- a/portal-ui/src/icons/CallHomeFeatureIcon.tsx +++ b/portal-ui/src/icons/CallHomeFeatureIcon.tsx @@ -32,7 +32,6 @@ const CallHomeFeatureIcon = (props: SVGProps) => ( data-name="Rectángulo 1614" width="6.172" height="6.309" - fill="#fff" stroke="rgba(0,0,0,0)" strokeWidth="1" /> @@ -66,7 +65,6 @@ const CallHomeFeatureIcon = (props: SVGProps) => ( data-name="Trazado 7262" d="M4.6,38.068a.164.164,0,0,0-.231,0l-.377.377a.149.149,0,0,1-.21,0L2.254,36.918a.149.149,0,0,1,0-.21l.377-.377a.164.164,0,0,0,0-.231L1.4,34.871a.164.164,0,0,0-.231,0l-.763.763a1.4,1.4,0,0,0,0,1.982l2.669,2.672a1.4,1.4,0,0,0,1.982,0l.763-.763a.164.164,0,0,0,0-.231Z" transform="translate(0 -34.389)" - fill="#fff" stroke="rgba(0,0,0,0)" strokeWidth="1" /> @@ -90,7 +88,6 @@ const CallHomeFeatureIcon = (props: SVGProps) => ( data-name="Trazado 7261" d="M14.9,10.862a.622.622,0,1,1,.889.871l-3.311,4.139a.622.622,0,0,1-.9.017L9.384,13.694a.622.622,0,1,1,.879-.879L12,14.551l2.881-3.67.017-.018Z" transform="translate(-9.182 -10.676)" - fill="#fff" /> diff --git a/portal-ui/src/icons/DiagnosticsFeatureIcon.tsx b/portal-ui/src/icons/DiagnosticsFeatureIcon.tsx index 386fc20e5..7eba072f3 100644 --- a/portal-ui/src/icons/DiagnosticsFeatureIcon.tsx +++ b/portal-ui/src/icons/DiagnosticsFeatureIcon.tsx @@ -53,7 +53,6 @@ const DiagnosticsFeatureIcon = (props: SVGProps) => ( data-name="Trazado 7261" d="M14.9,10.862a.622.622,0,1,1,.889.871l-3.311,4.139a.622.622,0,0,1-.9.017L9.384,13.694a.622.622,0,1,1,.879-.879L12,14.551l2.881-3.67.017-.018Z" transform="translate(-9.182 -10.676)" - fill="#fff" /> diff --git a/portal-ui/src/icons/GoogleTierIconXs.tsx b/portal-ui/src/icons/GoogleTierIconXs.tsx index e2ffd16c8..da097775c 100644 --- a/portal-ui/src/icons/GoogleTierIconXs.tsx +++ b/portal-ui/src/icons/GoogleTierIconXs.tsx @@ -37,7 +37,6 @@ const GoogleTierIconXs = (props: SVGProps) => { data-name="Trazado 6946" d="M67.542,36.137h.667l1.9-1.9.093-.808A8.55,8.55,0,0,0,56.3,37.6a1.03,1.03,0,0,1,.667-.039l3.8-.628s.193-.321.294-.3a4.745,4.745,0,0,1,6.494-.494Z" transform="translate(-53.656 -31.287)" - fill="#8399ab" /> ) => ( diff --git a/portal-ui/src/icons/MinIOTierIconXs.tsx b/portal-ui/src/icons/MinIOTierIconXs.tsx index 0958abc55..e9002a487 100644 --- a/portal-ui/src/icons/MinIOTierIconXs.tsx +++ b/portal-ui/src/icons/MinIOTierIconXs.tsx @@ -29,7 +29,6 @@ const MinIOTierIconXs = (props: SVGProps) => { id="minio-logo-color" d="M36.179,13.541q-.834-1.379-1.673-2.755c-.29-.476-.585-.949-.88-1.422l-.116-.172a2.047,2.047,0,0,0-2.624-.836,1.84,1.84,0,0,0-.846,2.481,4.385,4.385,0,0,0,.749.931c.841.894,1.709,1.762,2.544,2.662a2.626,2.626,0,0,1-.915,4.225l-.056.023V14.492a13.556,13.556,0,0,0-3.918,3.036,13.227,13.227,0,0,0-3.075,6.117L28.2,22.2c.942-.479,1.878-.95,2.856-1.446V28.83l1.3,1.323V20.076s.03-.014.127-.067a10.787,10.787,0,0,0,1.143-.633,3.862,3.862,0,0,0,.567-5.84c-.969-1.013-1.942-2.022-2.91-3.037a.623.623,0,0,1,0-.93.643.643,0,0,1,.935.053c.135.136,1.043,1.1,1.367,1.435q1.228,1.286,2.459,2.567a1.752,1.752,0,0,0,.136.116l.051-.03A.815.815,0,0,0,36.179,13.541Zm-5.124,5.715a.235.235,0,0,1-.119.159c-.519.275-1.042.543-1.564.811l-1.9.976a12.318,12.318,0,0,1,3.568-4.421l.023-.019C31.06,17.572,31.063,18.448,31.055,19.257Z" transform="translate(-25.369 -8.153)" - fill="#8399ab" /> ); diff --git a/portal-ui/src/icons/PerformanceFeatureIcon.tsx b/portal-ui/src/icons/PerformanceFeatureIcon.tsx index b13fa541a..74a07c412 100644 --- a/portal-ui/src/icons/PerformanceFeatureIcon.tsx +++ b/portal-ui/src/icons/PerformanceFeatureIcon.tsx @@ -79,7 +79,6 @@ const PerformanceFeatureIcon = (props: SVGProps) => ( data-name="Trazado 7261" d="M14.938,10.864a.627.627,0,1,1,.895.877L12.5,15.91a.627.627,0,0,1-.9.017l-2.21-2.211a.627.627,0,1,1,.886-.886l1.75,1.748,2.9-3.7.017-.018Z" transform="translate(-9.182 -10.676)" - fill="#fff" /> diff --git a/portal-ui/src/icons/S3TierIconXs.tsx b/portal-ui/src/icons/S3TierIconXs.tsx index 44765132b..580548880 100644 --- a/portal-ui/src/icons/S3TierIconXs.tsx +++ b/portal-ui/src/icons/S3TierIconXs.tsx @@ -37,7 +37,6 @@ const S3TierIcon = (props: SVGProps) => { data-name="Trazado 6935" d="M28.526,66.1l-7.9,1.861V53.686l7.9,1.821V66.1" transform="translate(-19.147 -49.842)" - fill="#8399ab" /> ) => { data-name="Trazado 6938" d="M131.349,120.939l-3.353.427v-5.588l3.353.421v4.74" transform="translate(-118.91 -107.566)" - fill="#8399ab" /> ) => { data-name="Trazado 6942" d="M131.349,6.417,128,5.587V0l3.353,1.676V6.417" transform="translate(-118.91)" - fill="#8399ab" /> ) => { data-name="Trazado 6944" d="M128,226.222l3.352-1.676v-4.741l-3.352.829v5.587" transform="translate(-118.91 -204.222)" - fill="#8399ab" /> ); diff --git a/portal-ui/src/icons/SidebarMenus/AccessMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/AccessMenuIcon.tsx index 03d19d70d..21b9fd2a5 100644 --- a/portal-ui/src/icons/SidebarMenus/AccessMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/AccessMenuIcon.tsx @@ -32,7 +32,6 @@ const AccessMenuIcon = (props: SVGProps) => ( data-name="Rectángulo 1586" width="11.749" height="16" - fill="#8399ab" /> @@ -46,7 +45,6 @@ const AccessMenuIcon = (props: SVGProps) => ( data-name="Trazado 7102" d="M11.018,3.348h-2.1c.009-.1.014-.194.014-.293a3.057,3.057,0,0,0-6.113,0c0,.1.005.2.015.3H.744A1.019,1.019,0,0,0,0,4.343v5.913A2.814,2.814,0,0,0,.4,11.7c1,1.676,2.625,2.648,4.955,4.143A.965.965,0,0,0,5.88,16h0a.956.956,0,0,0,.5-.145c2.264-1.4,3.8-2.315,4.984-4.234a2.665,2.665,0,0,0,.381-1.4V4.337a1.024,1.024,0,0,0-.731-.989M5.875,1.05a2,2,0,0,1,1.983,2.3l-3.966,0a2,2,0,0,1,1.983-2.3m0,4.073a2.189,2.189,0,1,1,0,4.377h0a2.189,2.189,0,1,1,0-4.377m2.786,7.212a1,1,0,0,1-.162.233.984.984,0,0,1-.216.175,1.028,1.028,0,0,1-.26.109,1.127,1.127,0,0,1-.29.038H4.023a1.123,1.123,0,0,1-.29-.037,1.04,1.04,0,0,1-.259-.108,1,1,0,0,1-.218-.172,1.019,1.019,0,0,1-.164-.23,1.112,1.112,0,0,1,.086-1.15c.017-.026.036-.05.055-.074A3.376,3.376,0,0,1,5.346,9.88,3.182,3.182,0,0,1,5.7,9.841h.017c.048,0,.1,0,.145,0a3.348,3.348,0,0,1,.72.079,3.506,3.506,0,0,1,.7.234,3.33,3.33,0,0,1,1.262.992h0a1.136,1.136,0,0,1,.123,1.193" transform="translate(0 0.001)" - fill="#8399ab" /> diff --git a/portal-ui/src/icons/SidebarMenus/AuditLogsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/AuditLogsMenuIcon.tsx index 485837184..e39951553 100644 --- a/portal-ui/src/icons/SidebarMenus/AuditLogsMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/AuditLogsMenuIcon.tsx @@ -32,7 +32,6 @@ const AuditLogsMenuIcon = (props: SVGProps) => ( data-name="Rectángulo 1591" width="14.117" height="13" - fill="#fff" /> @@ -46,21 +45,18 @@ const AuditLogsMenuIcon = (props: SVGProps) => ( data-name="Trazado 7111" d="M10.518,108.483a5.376,5.376,0,0,1-2.413.561H8.093a5.47,5.47,0,0,1-4.394-2.2H1.142a.3.3,0,0,1-.29-.3h0v-.694a.3.3,0,0,1,.29-.3H2.987a5.318,5.318,0,0,1-.248-.857H0v6.482a.732.732,0,0,0,.731.726h9.415a.732.732,0,0,0,.731-.726v-2.333Z" transform="translate(0 -98.898)" - fill="#fff" /> diff --git a/portal-ui/src/icons/SidebarMenus/BucketsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/BucketsMenuIcon.tsx index 8a6c78257..59499cce8 100644 --- a/portal-ui/src/icons/SidebarMenus/BucketsMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/BucketsMenuIcon.tsx @@ -32,7 +32,6 @@ const BucketsMenuIcon = (props: SVGProps) => ( data-name="Rectángulo 928" width="15.957" height="15.928" - fill="#8399ab" /> @@ -61,7 +60,6 @@ const BucketsMenuIcon = (props: SVGProps) => ( data-name="Trazado 7002" d="M15.619.545A1.341,1.341,0,0,0,14.553,0H1.386A1.34,1.34,0,0,0,.32.545a1.606,1.606,0,0,0-.3,1.242c.325,1.888,1.009,5.869,1.557,9.045v.006c.277,1.616.519,3.023.661,3.84A1.422,1.422,0,0,0,3.6,15.911h8.733A1.423,1.423,0,0,0,13.7,14.679l.659-3.836,0-.023.893-5.2,0-.015.658-3.821a1.6,1.6,0,0,0-.3-1.242M13.187,11.3l-10.426,0-.2-1.189H13.383Zm.89-5.216-12.221,0L1.651,4.9H14.273Z" transform="translate(0.061 -0.072)" - fill="#8399ab" /> diff --git a/portal-ui/src/icons/SidebarMenus/CallHomeMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/CallHomeMenuIcon.tsx index dc9c18ecc..85917eed9 100644 --- a/portal-ui/src/icons/SidebarMenus/CallHomeMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/CallHomeMenuIcon.tsx @@ -29,7 +29,6 @@ const CallHomeMenuIcon = (props: SVGProps) => ( id="call-home-icon" d="M-2188.145,31.22l-5.076-5.082a2.671,2.671,0,0,1-.779-1.885,2.671,2.671,0,0,1,.779-1.885l1.453-1.453a.312.312,0,0,1,.439,0l2.334,2.336a.31.31,0,0,1,0,.439l-.717.718a.285.285,0,0,0,0,.4l2.9,2.9a.285.285,0,0,0,.4,0l.717-.718a.311.311,0,0,1,.44,0l2.327,2.332a.311.311,0,0,1,0,.44l-1.453,1.452a2.664,2.664,0,0,1-1.885.779A2.667,2.667,0,0,1-2188.145,31.22Zm2.6-6.814a.561.561,0,0,1-.562-.562V22.09h-.209a.561.561,0,0,1-.53-.362.56.56,0,0,1,.156-.622l2.245-1.964a.56.56,0,0,1,.748,0l2.245,1.964a.56.56,0,0,1,.156.622.561.561,0,0,1-.53.362h-.21v1.754a.56.56,0,0,1-.561.562Z" transform="translate(2194.5 -18.452)" - fill="#fff" stroke="rgba(0,0,0,0)" strokeWidth="1" /> diff --git a/portal-ui/src/icons/SidebarMenus/DiagnosticsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/DiagnosticsMenuIcon.tsx index 317dbec5e..ce53e790f 100644 --- a/portal-ui/src/icons/SidebarMenus/DiagnosticsMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/DiagnosticsMenuIcon.tsx @@ -31,7 +31,6 @@ const DiagnosticsMenuIcon = (props: SVGProps) => ( data-name="Unión 17" d="M0,5.962A5.956,5.956,0,0,1,5.935,0h.491V2.461a3.512,3.512,0,1,1-.981,0V1.009a4.893,4.893,0,0,0-1.752.515A4.981,4.981,0,0,0,2.276,2.611a4.994,4.994,0,0,0-.949,1.524,4.96,4.96,0,1,0,9.564,1.827.49.49,0,0,1,.144-.348.485.485,0,0,1,.346-.144.492.492,0,0,1,.491.493A5.936,5.936,0,1,1,0,5.962ZM4.634,3.771a2.553,2.553,0,0,0-.806,3.618,2.568,2.568,0,0,0,.687.69,2.541,2.541,0,0,0,.432.236,2.51,2.51,0,0,0,.989.2,2.555,2.555,0,0,0,1.3-4.745,2.522,2.522,0,0,0-.811-.313V4.878a1.2,1.2,0,0,1,.5.431,1.188,1.188,0,1,1-1.986,0,1.2,1.2,0,0,1,.5-.431V3.458A2.521,2.521,0,0,0,4.634,3.771Z" transform="translate(0.129 0.131)" - fill="#fff" /> ) => ( data-name="Rectángulo 989" width="12" height="12" - fill="#fff" /> @@ -46,21 +45,18 @@ const DrivesMenuIcon = (props: SVGProps) => ( data-name="Trazado 7083" d="M6,2.839H6c3.882,0,6-.938,6-1.42S9.882,0,6,0,0,.938,0,1.42s2.118,1.42,6,1.42" transform="translate(0)" - fill="#fff" /> diff --git a/portal-ui/src/icons/SidebarMenus/GroupsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/GroupsMenuIcon.tsx index fc296bad0..0e3ef645d 100644 --- a/portal-ui/src/icons/SidebarMenus/GroupsMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/GroupsMenuIcon.tsx @@ -32,7 +32,6 @@ const GroupsMenuIcon = (props: SVGProps) => ( data-name="Rectángulo 992" width="12" height="10.087" - fill="#fff" /> @@ -46,42 +45,36 @@ const GroupsMenuIcon = (props: SVGProps) => ( data-name="Trazado 7090" d="M204.925,3.5a2.963,2.963,0,0,1-.177,1.011c.042,0,.084,0,.127,0a2.274,2.274,0,0,0,2.284-2.258,2.288,2.288,0,0,0-4-1.486A3.005,3.005,0,0,1,204.925,3.5" transform="translate(-195.887 0)" - fill="#fff" /> diff --git a/portal-ui/src/icons/SidebarMenus/IdentityMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/IdentityMenuIcon.tsx index 68f0c481b..0456d5906 100644 --- a/portal-ui/src/icons/SidebarMenus/IdentityMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/IdentityMenuIcon.tsx @@ -30,7 +30,6 @@ const IdentityMenuIcon = (props: SVGProps) => ( data-name="Sustracción 4" d="M14.01,11.782H1.99a2,2,0,0,1-1.99-2V2A2,2,0,0,1,1.99,0H14.01A2,2,0,0,1,16,2V9.786A2,2,0,0,1,14.01,11.782ZM2.793,10.4H6.814a1.166,1.166,0,0,0,1.055-.676A1.434,1.434,0,0,0,7.73,8.29,3.755,3.755,0,0,0,5.573,6.862a3.448,3.448,0,0,0-.791-.093c-.056,0-.116,0-.184,0A3.665,3.665,0,0,0,1.879,8.261q-.024.032-.046.065l-.015.023a1.411,1.411,0,0,0-.1,1.388,1.183,1.183,0,0,0,1.06.666ZM9.627,9.093a.627.627,0,1,0,0,1.254H14a.627.627,0,1,0,0-1.254Zm0-2.383a.627.627,0,1,0,0,1.255H14A.627.627,0,1,0,14,6.71ZM4.906.941A2.621,2.621,0,0,0,2.345,3.613,2.622,2.622,0,0,0,4.906,6.286a2.441,2.441,0,0,0,1-.211A2.538,2.538,0,0,0,6.718,5.5a2.677,2.677,0,0,0,.549-.85,2.739,2.739,0,0,0,.2-1.039A2.621,2.621,0,0,0,4.906.941ZM9.627,4.264a.627.627,0,1,0,0,1.254H14a.627.627,0,1,0,0-1.254Z" transform="translate(0.5 0.5)" - fill="#8399ab" stroke="rgba(0,0,0,0)" strokeWidth="1" /> diff --git a/portal-ui/src/icons/SidebarMenus/InspectMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/InspectMenuIcon.tsx index dc480e657..60196342b 100644 --- a/portal-ui/src/icons/SidebarMenus/InspectMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/InspectMenuIcon.tsx @@ -29,7 +29,6 @@ const InspectMenuIcon = (props: SVGProps) => ( id="InspectIcon" d="M-2191.428,31a1.876,1.876,0,0,1-1.715-2V27.5h1.285V29a.47.47,0,0,0,.429.5h6.857a.47.47,0,0,0,.428-.5V27.5h1.286V29a1.877,1.877,0,0,1-1.715,2ZM-2194,26V24h12v2Zm2.142-3.5h-1.284V21a1.876,1.876,0,0,1,1.715-2h6.857a1.876,1.876,0,0,1,1.715,2v1.5h-1.286V21a.469.469,0,0,0-.428-.5h-6.857a.469.469,0,0,0-.429.5v1.5h0Z" transform="translate(2194 -19)" - fill="#fff" /> ); diff --git a/portal-ui/src/icons/SidebarMenus/LogsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/LogsMenuIcon.tsx index 167517bc4..272988c95 100644 --- a/portal-ui/src/icons/SidebarMenus/LogsMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/LogsMenuIcon.tsx @@ -33,7 +33,6 @@ const LogsMenuIcon = (props: SVGProps) => ( width="12" height="12" transform="translate(0 0)" - fill="#fff" /> @@ -49,14 +48,12 @@ const LogsMenuIcon = (props: SVGProps) => ( data-name="Trazado 7070" d="M.1,86.274v7.138a.806.806,0,0,0,.805.8H11.273a.806.806,0,0,0,.805-.8V86.274Zm4.482,1.274v.764a.324.324,0,0,1-.318.331H1.358a.325.325,0,0,1-.319-.331v-.764a.325.325,0,0,1,.319-.33H4.264a.324.324,0,0,1,.318.33Z" transform="translate(-0.135 -82.221)" - fill="#fff" /> diff --git a/portal-ui/src/icons/SidebarMenus/MenuCollapsedIcon.tsx b/portal-ui/src/icons/SidebarMenus/MenuCollapsedIcon.tsx index 9fa537c0f..4bac4a3a5 100644 --- a/portal-ui/src/icons/SidebarMenus/MenuCollapsedIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/MenuCollapsedIcon.tsx @@ -46,7 +46,6 @@ const MenuCollapsedIcon = (props: SVGProps) => ( data-name="Trazado 6842" d="M.422,6.661a.433.433,0,0,1-.3-.117.37.37,0,0,1,0-.557L2.983,3.335.126.675a.37.37,0,0,1,0-.557.443.443,0,0,1,.6,0L3.889,3.052a.373.373,0,0,1,.126.274.344.344,0,0,1-.126.274L.727,6.533a.443.443,0,0,1-.306.127Z" transform="translate(0 0)" - fill="#fff" /> ) => ( data-name="Trazado 6842" d="M.422,0a.433.433,0,0,0-.3.117.37.37,0,0,0,0,.557L2.983,3.325.126,5.986a.37.37,0,0,0,0,.557.443.443,0,0,0,.6,0L3.889,3.609a.373.373,0,0,0,.126-.274.344.344,0,0,0-.126-.274L.727.127A.443.443,0,0,0,.422,0Z" transform="translate(0 0)" - fill="#8399ab" /> ) => ( width="12" height="12" transform="translate(0 0)" - fill="#fff" /> @@ -49,7 +48,6 @@ const MetricsMenuIcon = (props: SVGProps) => ( data-name="Trazado 7036" d="M11.722.239A.805.805,0,0,0,11.15,0H.809A.811.811,0,0,0,0,.81V11.151a.811.811,0,0,0,.809.809H11.15a.811.811,0,0,0,.809-.809V.811a.805.805,0,0,0-.237-.572M1.935,2.544a.724.724,0,0,1,.724-.724H4.94a.724.724,0,0,1,.724.724V3.613a.724.724,0,0,1-.724.724H2.659a.724.724,0,0,1-.724-.724Zm3.73,6.932a.7.7,0,0,1-.724.664H2.659a.7.7,0,0,1-.724-.664V6.01a.7.7,0,0,1,.724-.664H4.94a.7.7,0,0,1,.724.664Zm4.627-.059a.724.724,0,0,1-.724.724H7.286a.724.724,0,0,1-.724-.724V8.349a.724.724,0,0,1,.724-.724H9.568a.724.724,0,0,1,.724.724Zm0-3.466a.7.7,0,0,1-.724.664H7.286a.7.7,0,0,1-.724-.664V2.484a.7.7,0,0,1,.724-.664H9.567a.7.7,0,0,1,.724.664Z" transform="translate(0.006 0.002)" - fill="#fff" /> diff --git a/portal-ui/src/icons/SidebarMenus/MonitoringMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/MonitoringMenuIcon.tsx index 82f396d8a..f050c3b7c 100644 --- a/portal-ui/src/icons/SidebarMenus/MonitoringMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/MonitoringMenuIcon.tsx @@ -32,7 +32,6 @@ const MonitoringMenuIcon = (props: SVGProps) => ( data-name="Rectángulo 1587" width="16" height="16" - fill="#8399ab" /> @@ -45,14 +44,12 @@ const MonitoringMenuIcon = (props: SVGProps) => ( id="Trazado_7103" data-name="Trazado 7103" d="M15.551,13.464,12.973,10.9a6.932,6.932,0,0,0,.846-1.72H10.813A4.386,4.386,0,0,1,2.646,7.03a4.377,4.377,0,0,1,8.744-.222h2.776A7.086,7.086,0,0,0,0,7.013a7.056,7.056,0,0,0,7.083,7.012H7.1a7.019,7.019,0,0,0,3.73-1.063l2.629,2.6A1.489,1.489,0,0,0,14.5,16h.016a1.487,1.487,0,0,0,1.038-2.536Z" - fill="#8399ab" /> diff --git a/portal-ui/src/icons/SidebarMenus/PerformanceMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/PerformanceMenuIcon.tsx index a7e56b1dd..52f411cd3 100644 --- a/portal-ui/src/icons/SidebarMenus/PerformanceMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/PerformanceMenuIcon.tsx @@ -32,7 +32,6 @@ const PerformanceMenuIcon = (props: SVGProps) => ( data-name="Rectángulo 985" width="12" height="12" - fill="#fff" /> @@ -46,13 +45,11 @@ const PerformanceMenuIcon = (props: SVGProps) => ( data-name="Trazado 7077" d="M120.417,129.741a.387.387,0,1,0,.387.387h0a.387.387,0,0,0-.387-.387" transform="translate(-114.404 -123.659)" - fill="#fff" /> diff --git a/portal-ui/src/icons/SidebarMenus/ProfileMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/ProfileMenuIcon.tsx index 12a169001..9d2753c42 100644 --- a/portal-ui/src/icons/SidebarMenus/ProfileMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/ProfileMenuIcon.tsx @@ -32,7 +32,6 @@ const ProfileMenuIcon = (props: SVGProps) => ( data-name="Rectángulo 1599" width="12" height="10.456" - fill="#fff" /> @@ -46,21 +45,18 @@ const ProfileMenuIcon = (props: SVGProps) => ( data-name="Trazado 7122" d="M33.036,1.016H43.058L43.3.207A.161.161,0,0,0,43.145,0h-10.2a.161.161,0,0,0-.154.207Z" transform="translate(-32.063)" - fill="#fff" /> diff --git a/portal-ui/src/icons/SidebarMenus/RegisterMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/RegisterMenuIcon.tsx index 2a8983a59..69eba1690 100644 --- a/portal-ui/src/icons/SidebarMenus/RegisterMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/RegisterMenuIcon.tsx @@ -32,7 +32,6 @@ const RegisterMenuIcon = (props: SVGProps) => ( data-name="Rectángulo 1593" width="12" height="12" - fill="#fff" /> @@ -46,7 +45,6 @@ const RegisterMenuIcon = (props: SVGProps) => ( data-name="Trazado 7117" d="M11.4,7.564a1.848,1.848,0,0,0,.6-1.17,1.848,1.848,0,0,0-.6-1.17,1.866,1.866,0,0,1-.377-.532,2.022,2.022,0,0,1,0-.693,1.858,1.858,0,0,0-.17-1.282,1.7,1.7,0,0,0-1.126-.567A1.8,1.8,0,0,1,9.1,1.94a1.924,1.924,0,0,1-.374-.546A1.775,1.775,0,0,0,7.854.442,1.649,1.649,0,0,0,6.646.671,1.833,1.833,0,0,1,6,.89,1.833,1.833,0,0,1,5.354.671,1.649,1.649,0,0,0,4.146.442a1.78,1.78,0,0,0-.872.952,1.926,1.926,0,0,1-.377.549,1.806,1.806,0,0,1-.625.209,1.7,1.7,0,0,0-1.126.567A1.865,1.865,0,0,0,.977,3.994a2.053,2.053,0,0,1,0,.693A1.915,1.915,0,0,1,.6,5.223,1.844,1.844,0,0,0,0,6.394a1.843,1.843,0,0,0,.6,1.17,1.932,1.932,0,0,1,.377.53,2.061,2.061,0,0,1,0,.694,1.865,1.865,0,0,0,.169,1.282,1.7,1.7,0,0,0,1.126.567,1.806,1.806,0,0,1,.625.209,1.925,1.925,0,0,1,.377.548,1.775,1.775,0,0,0,.872.948,1.649,1.649,0,0,0,1.208-.228A1.831,1.831,0,0,1,6,11.894a1.832,1.832,0,0,1,.646.219,2.244,2.244,0,0,0,.908.281.929.929,0,0,0,.3-.049,1.773,1.773,0,0,0,.872-.951,1.934,1.934,0,0,1,.377-.548,1.8,1.8,0,0,1,.625-.209,1.7,1.7,0,0,0,1.126-.567,1.853,1.853,0,0,0,.169-1.284,2.051,2.051,0,0,1,0-.693,1.881,1.881,0,0,1,.377-.529M5.367,8.69,3.051,6.269l.821-.855L5.367,6.973,8.128,4.1l.821.858Z" transform="translate(0 -0.394)" - fill="#fff" /> diff --git a/portal-ui/src/icons/SidebarMenus/SupportMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/SupportMenuIcon.tsx index 288788b87..cbc508ff4 100644 --- a/portal-ui/src/icons/SidebarMenus/SupportMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/SupportMenuIcon.tsx @@ -32,7 +32,6 @@ const SupportMenuIcon = (props: SVGProps) => ( data-name="Rectángulo 1590" width="13.264" height="16" - fill="#8399ab" /> @@ -46,14 +45,12 @@ const SupportMenuIcon = (props: SVGProps) => ( data-name="Trazado 7107" d="M141.4,175.257a1.765,1.765,0,1,0,1.765-1.763,1.758,1.758,0,0,0-1.765,1.763" transform="translate(-136.66 -167.676)" - fill="#8399ab" /> diff --git a/portal-ui/src/icons/SidebarMenus/TraceMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/TraceMenuIcon.tsx index 494af0495..f653e5023 100644 --- a/portal-ui/src/icons/SidebarMenus/TraceMenuIcon.tsx +++ b/portal-ui/src/icons/SidebarMenus/TraceMenuIcon.tsx @@ -30,7 +30,6 @@ const TraceMenuIcon = (props: SVGProps) => ( id="trace-icn" d="M-4327.66-381.522l2.667,2.932v5.186a.377.377,0,0,1-.383.368h-.566a.379.379,0,0,1-.384-.368v-4.614l-2.666-3.135v-3.477a.376.376,0,0,1,.382-.368h.567a.376.376,0,0,1,.383.368Zm2.667-3.109a.377.377,0,0,0-.383-.368h-.566a.378.378,0,0,0-.384.368v3.332l2.668,3.135v4.758a.377.377,0,0,0,.383.368h.567a.377.377,0,0,0,.382-.368v-5.33l-2.667-2.931Zm2.284-.368h-.567a.377.377,0,0,0-.383.368v1.827a.377.377,0,0,0,.383.368h.567a.377.377,0,0,0,.382-.368v-1.827A.377.377,0,0,0-4322.709-385Zm2.1,5.554h.568a.377.377,0,0,0,.383-.368v-4.817a.377.377,0,0,0-.383-.368h-.568a.377.377,0,0,0-.383.368v4.817A.377.377,0,0,0-4320.61-379.445Zm3.233-5.554h-.567a.377.377,0,0,0-.383.368v1.827a.377.377,0,0,0,.383.368h.567a.377.377,0,0,0,.384-.368v-1.827A.377.377,0,0,0-4317.376-385Zm0,8.117h-.567a.377.377,0,0,0-.383.368v3.108a.377.377,0,0,0,.383.368h.567a.377.377,0,0,0,.384-.368v-3.108A.377.377,0,0,0-4317.376-376.882Zm0-3.845h-.567a.377.377,0,0,0-.383.368v.828l-2.667,2.648v3.477a.377.377,0,0,0,.383.368h.568a.377.377,0,0,0,.383-.368v-2.622l2.667-3.135v-1.2A.377.377,0,0,0-4317.376-380.727Zm-10.667,2.136h-.567a.376.376,0,0,0-.382.368v4.817a.376.376,0,0,0,.382.368h.567a.376.376,0,0,0,.383-.368v-4.817A.376.376,0,0,0-4328.043-378.591Z" transform="translate(4328.993 384.999)" - fill="#fff" /> ) => ( data-name="Rectángulo 991" width="9.008" height="12" - fill="#fff" /> @@ -42,14 +41,12 @@ const UsersMenuIcon = (props: SVGProps) => ( data-name="Trazado 7088" d="M26.843,6.743a3.4,3.4,0,0,0,3.411-3.372,3.411,3.411,0,0,0-6.822,0,3.4,3.4,0,0,0,3.411,3.372" transform="translate(-22.334)" - fill="#fff" /> diff --git a/portal-ui/src/icons/TiersNotAvailableIcon.tsx b/portal-ui/src/icons/TiersNotAvailableIcon.tsx index ee5efda63..700942314 100644 --- a/portal-ui/src/icons/TiersNotAvailableIcon.tsx +++ b/portal-ui/src/icons/TiersNotAvailableIcon.tsx @@ -52,7 +52,6 @@ const TiersNotAvailableIcon = (props: SVGProps) => { data-name="Trazado 441" d="M13,3a.8.8,0,0,0-.392.092L4.374,7.482a.666.666,0,0,0,0,1.2l2.54,1.354-2.54,1.354a.666.666,0,0,0,0,1.2l2.54,1.353-2.54,1.354a.666.666,0,0,0,0,1.2l8.236,4.39a.8.8,0,0,0,.749,0l8.236-4.39a.666.666,0,0,0,0-1.2l-2.54-1.354,2.54-1.353a.666.666,0,0,0,0-1.2l-2.54-1.354L21.6,8.678a.666.666,0,0,0,0-1.2L13.36,3.092A.8.8,0,0,0,13,3ZM8.414,10.832l4.2,2.237a.8.8,0,0,0,.749,0l4.2-2.237,2.167,1.154-6.739,3.591L6.246,11.986Zm0,3.9,4.2,2.237a.8.8,0,0,0,.749,0l4.2-2.237,2.166,1.154-6.739,3.591L6.246,15.89Z" transform="translate(-4 -3)" - fill="#fff" /> @@ -65,7 +64,6 @@ const TiersNotAvailableIcon = (props: SVGProps) => { cy="5" r="5" transform="translate(358 156)" - fill="#fff" /> . +import * as React from "react"; +import history from "../../history"; +import { + ActionId, + ActionImpl, + KBarAnimator, + KBarPortal, + KBarPositioner, + KBarProvider, + KBarResults, + KBarSearch, + useMatches, +} from "kbar"; +import Console from "./Console"; +import { validRoutes } from "./valid-routes"; +import { AppState } from "../../store"; +import { connect } from "react-redux"; +import { Action } from "kbar/lib/types"; +import { Theme } from "@mui/material/styles"; +import makeStyles from "@mui/styles/makeStyles"; + +const useStyles = makeStyles((theme: Theme) => ({ + resultItem: { + display: "flex", + gap: "8px", + alignItems: "center", + fontSize: 14, + "& .min-icon": { + color: theme.palette.primary.main, + width: "18px", + height: "18px", + }, + }, +})); + +const searchStyle = { + padding: "12px 16px", + fontSize: "16px", + width: "100%", + boxSizing: "border-box" as React.CSSProperties["boxSizing"], + outline: "none", + border: "none", + background: "transparent", + color: "#111111", +}; + +const animatorStyle = { + maxWidth: "600px", + width: "100%", + background: "white", + color: "black", + borderRadius: "8px", + overflow: "hidden", + boxShadow: "rgba(0, 0, 0, 0.2) 0px 6px 20px 0px", +}; + +const groupNameStyle = { + padding: "8px 16px", + fontSize: "10px", + textTransform: "uppercase" as const, + opacity: 0.5, +}; + +const ConsoleKBar = ({ + features, + operatorMode, +}: { + operatorMode: boolean; + features: string[] | null; +}) => { + const allowedMenuItems = validRoutes(features, operatorMode); + + const initialActions = []; + for (const i of allowedMenuItems) { + if (i.children && i.children.length > 0) { + for (const childI of i.children) { + const a: Action = { + id: `${childI.id}`, + name: childI.name, + section: i.name, + perform: () => history.push(`${childI.to}`), + icon: , + }; + initialActions.push(a); + } + } else { + const a: Action = { + id: `${i.id}`, + name: i.name, + section: "Navigation", + perform: () => history.push(`${i.to}`), + icon: , + }; + initialActions.push(a); + } + } + + return ( + + + + + ); +}; + +function CommandBar() { + return ( + + + + + + + + + ); +} + +function RenderResults() { + const { results, rootActionId } = useMatches(); + + return ( + + typeof item === "string" ? ( +
{item}
+ ) : ( + + ) + } + /> + ); +} + +const ResultItem = React.forwardRef( + ( + { + action, + active, + currentRootActionId, + }: { + action: ActionImpl; + active: boolean; + currentRootActionId: ActionId; + }, + ref: React.Ref + ) => { + const classes = useStyles(); + const ancestors = React.useMemo(() => { + if (!currentRootActionId) return action.ancestors; + const index = action.ancestors.findIndex( + (ancestor) => ancestor.id === currentRootActionId + ); + // +1 removes the currentRootAction; e.g. + // if we are on the "Set theme" parent action, + // the UI should not display "Set theme… > Dark" + // but rather just "Dark" + return action.ancestors.slice(index + 1); + }, [action.ancestors, currentRootActionId]); + + return ( +
+
+ {action.icon && action.icon} +
+
+ {ancestors.length > 0 && + ancestors.map((ancestor) => ( + + + {ancestor.name} + + + › + + + ))} + {action.name} +
+ {action.subtitle && ( + {action.subtitle} + )} +
+
+ {action.shortcut?.length ? ( +
+ {action.shortcut.map((sc) => ( + + {sc} + + ))} +
+ ) : null} +
+ ); + } +); + +const mapState = (state: AppState) => ({ + operatorMode: state.system.operatorMode, + features: state.console.session.features, +}); + +const connector = connect(mapState, null); + +export default connector(ConsoleKBar); diff --git a/portal-ui/src/screens/Console/Menu/Menu.tsx b/portal-ui/src/screens/Console/Menu/Menu.tsx index 79705ccb1..ead77bcaa 100644 --- a/portal-ui/src/screens/Console/Menu/Menu.tsx +++ b/portal-ui/src/screens/Console/Menu/Menu.tsx @@ -16,7 +16,6 @@ import React from "react"; import { connect } from "react-redux"; -import { NavLink } from "react-router-dom"; import { Drawer } from "@mui/material"; import withStyles from "@mui/styles/withStyles"; import { Theme } from "@mui/material/styles"; @@ -24,7 +23,6 @@ import createStyles from "@mui/styles/createStyles"; import clsx from "clsx"; import { AppState } from "../../../store"; import { setMenuOpen, userLoggedIn } from "../../../actions"; -import { IMenuItem } from "./types"; import { ErrorResponseHandler } from "../../../common/types"; import { clearSession } from "../../../common/utils"; @@ -33,45 +31,9 @@ import history from "../../../history"; import api from "../../../common/api"; import { resetSession } from "../actions"; -import { - DocumentationIcon, - LambdaIcon, - LicenseIcon, - StorageIcon, - TenantsOutlineIcon, - TiersIcon, -} from "../../../icons"; - -import { - AccessMenuIcon, - AccountsMenuIcon, - AuditLogsMenuIcon, - BucketsMenuIcon, - DrivesMenuIcon, - GroupsMenuIcon, - HealthMenuIcon, - IdentityMenuIcon, - LogsMenuIcon, - MetricsMenuIcon, - MonitoringMenuIcon, - PerformanceMenuIcon, - SupportMenuIcon, - TraceMenuIcon, - UsersMenuIcon, -} from "../../../icons/SidebarMenus/MenuIcons"; -import { - CONSOLE_UI_RESOURCE, - IAM_PAGES, - IAM_PAGES_PERMISSIONS, - IAM_SCOPES, - S3_ALL_RESOURCES, -} from "../../../common/SecureComponent/permissions"; -import { hasPermission } from "../../../common/SecureComponent/SecureComponent"; import MenuToggle from "./MenuToggle"; import ConsoleMenuList from "./ConsoleMenuList"; -import RegisterMenuIcon from "../../../icons/SidebarMenus/RegisterMenuIcon"; -import SettingsIcon from "../../../icons/SettingsIcon"; -import WatchIcon from "../../../icons/WatchIcon"; +import { validRoutes } from "../valid-routes"; const drawerWidth = 245; @@ -157,293 +119,7 @@ const Menu = ({ deleteSession(); }); }; - - const ldapIsEnabled = (features && features.includes("ldap-idp")) || false; - - let consoleMenus: IMenuItem[] = [ - { - name: "Buckets", - id: "buckets", - component: NavLink, - to: IAM_PAGES.BUCKETS, - icon: BucketsMenuIcon, - forceDisplay: true, - children: [], - }, - { - name: "Identity", - id: "identity", - icon: IdentityMenuIcon, - children: [ - { - component: NavLink, - id: "users", - to: IAM_PAGES.USERS, - customPermissionFnc: () => - hasPermission(CONSOLE_UI_RESOURCE, [IAM_SCOPES.ADMIN_LIST_USERS]) || - hasPermission(S3_ALL_RESOURCES, [IAM_SCOPES.ADMIN_CREATE_USER]), - name: "Users", - icon: UsersMenuIcon, - fsHidden: ldapIsEnabled, - }, - { - component: NavLink, - id: "groups", - to: IAM_PAGES.GROUPS, - name: "Groups", - icon: GroupsMenuIcon, - fsHidden: ldapIsEnabled, - }, - { - component: NavLink, - id: "serviceaccounts", - to: IAM_PAGES.ACCOUNT, - name: "Service Accounts", - icon: AccountsMenuIcon, - forceDisplay: true, - }, - ], - }, - { - name: "Access", - component: NavLink, - id: "access", - to: IAM_PAGES.POLICIES, - icon: AccessMenuIcon, - }, - - { - name: "Monitoring", - id: "tools", - icon: MonitoringMenuIcon, - children: [ - { - name: "Metrics", - id: "monitorMetrics", - to: IAM_PAGES.DASHBOARD, - icon: MetricsMenuIcon, - component: NavLink, - }, - { - name: "Logs ", - id: "monitorLogs", - to: IAM_PAGES.TOOLS_LOGS, - icon: LogsMenuIcon, - component: NavLink, - }, - { - name: "Audit", - id: "monitorAudit", - to: IAM_PAGES.TOOLS_AUDITLOGS, - icon: AuditLogsMenuIcon, - component: NavLink, - }, - { - name: "Trace", - id: "monitorTrace", - to: IAM_PAGES.TOOLS_TRACE, - icon: TraceMenuIcon, - component: NavLink, - }, - { - name: "Watch", - id: "watch", - component: NavLink, - icon: WatchIcon, - to: IAM_PAGES.TOOLS_WATCH, - }, - { - name: "Drives", - id: "monitorDrives", - to: IAM_PAGES.TOOLS_HEAL, - icon: DrivesMenuIcon, - component: NavLink, - }, - ], - }, - { - name: "Support", - id: "support", - icon: SupportMenuIcon, - children: [ - { - name: "Register", - id: "register", - component: NavLink, - icon: RegisterMenuIcon, - to: IAM_PAGES.REGISTER_SUPPORT, - }, - { - name: "Health", - id: "diagnostics", - component: NavLink, - icon: HealthMenuIcon, - to: IAM_PAGES.TOOLS_DIAGNOSTICS, - }, - { - name: "Performance", - id: "diagnostics", - component: NavLink, - icon: PerformanceMenuIcon, - to: IAM_PAGES.TOOLS_SPEEDTEST, - }, - - // { - // name: "Call Home", - // id: "callhome", - // component: NavLink, - // icon: CallHomeMenuIcon, - // to: IAM_PAGES.CALL_HOME, - // }, - // { - // name: "Inspect", - // id: "inspect", - // component: NavLink, - // icon: InspectMenuIcon, - // to: IAM_PAGES.TOOLS_WATCH, - // }, - // { - // name: "Profile", - // id: "profile", - // component: NavLink, - // icon: ProfileMenuIcon, - // to: IAM_PAGES.PROFILE, - // }, - ], - }, - { - component: NavLink, - to: IAM_PAGES.LICENSE, - name: "License", - id: "license", - icon: LicenseIcon, - forceDisplay: true, - }, - { - name: "Settings", - id: "settings", - icon: SettingsIcon, - children: [ - { - component: NavLink, - to: IAM_PAGES.SETTINGS, - name: "Configurations", - id: "configurations", - icon: SettingsIcon, - }, - { - component: NavLink, - to: IAM_PAGES.NOTIFICATIONS_ENDPOINTS, - name: "Notifications", - icon: LambdaIcon, - id: "lambda", - }, - { - component: NavLink, - to: IAM_PAGES.TIERS, - name: "Tiers", - icon: TiersIcon, - id: "tiers", - }, - ], - }, - { - type: "item", - component: NavLink, - to: IAM_PAGES.DOCUMENTATION, - name: "Documentation", - icon: DocumentationIcon, - forceDisplay: true, - onClick: ( - e: - | React.MouseEvent - | React.MouseEvent - | React.MouseEvent - ) => { - e.preventDefault(); - window.open("https://docs.min.io/?ref=con", "_blank"); - }, - }, - ]; - - let operatorMenus: IMenuItem[] = [ - { - group: "Operator", - type: "item", - component: NavLink, - to: IAM_PAGES.TENANTS, - name: "Tenants", - icon: TenantsOutlineIcon, - forceDisplay: true, - }, - { - group: "Operator", - type: "item", - component: NavLink, - to: IAM_PAGES.STORAGE, - name: "Storage", - icon: StorageIcon, - forceDisplay: true, - }, - { - group: "Operator", - type: "item", - component: NavLink, - to: IAM_PAGES.LICENSE, - name: "License", - icon: LicenseIcon, - forceDisplay: true, - }, - { - group: "Operator", - type: "item", - component: NavLink, - to: IAM_PAGES.DOCUMENTATION, - name: "Documentation", - icon: DocumentationIcon, - forceDisplay: true, - onClick: ( - e: - | React.MouseEvent - | React.MouseEvent - | React.MouseEvent - ) => { - e.preventDefault(); - window.open("https://docs.min.io/?ref=op", "_blank"); - }, - }, - ]; - - const allowedItems = (operatorMode ? operatorMenus : consoleMenus).filter( - (item: IMenuItem) => { - if (item.children && item.children.length > 0) { - const c = item.children?.filter((childItem: IMenuItem) => { - return ( - ((childItem.customPermissionFnc - ? childItem.customPermissionFnc() - : hasPermission( - CONSOLE_UI_RESOURCE, - IAM_PAGES_PERMISSIONS[childItem.to ?? ""] - )) || - childItem.forceDisplay) && - !childItem.fsHidden - ); - }); - return c.length > 0; - } - - const res = - ((item.customPermissionFnc - ? item.customPermissionFnc() - : hasPermission( - CONSOLE_UI_RESOURCE, - IAM_PAGES_PERMISSIONS[item.to ?? ""] - )) || - item.forceDisplay) && - !item.fsHidden; - return res; - } - ); + const allowedMenuItems = validRoutes(features, operatorMode); return ( diff --git a/portal-ui/src/screens/Console/Menu/MenuItem.tsx b/portal-ui/src/screens/Console/Menu/MenuItem.tsx index 727838ce2..85a8e2346 100644 --- a/portal-ui/src/screens/Console/Menu/MenuItem.tsx +++ b/portal-ui/src/screens/Console/Menu/MenuItem.tsx @@ -139,9 +139,19 @@ const MenuItem = ({ {hasChildren ? ( isActiveGroup ? ( - + ) : ( - + ) ) : null} diff --git a/portal-ui/src/screens/Console/valid-routes.ts b/portal-ui/src/screens/Console/valid-routes.ts new file mode 100644 index 000000000..d830bea0a --- /dev/null +++ b/portal-ui/src/screens/Console/valid-routes.ts @@ -0,0 +1,348 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, 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 . + +import { IMenuItem } from "./Menu/types"; +import { NavLink } from "react-router-dom"; +import { + CONSOLE_UI_RESOURCE, + IAM_PAGES, + IAM_PAGES_PERMISSIONS, + IAM_SCOPES, + S3_ALL_RESOURCES, +} from "../../common/SecureComponent/permissions"; +import { + AccessMenuIcon, + AccountsMenuIcon, + AuditLogsMenuIcon, + BucketsMenuIcon, + DrivesMenuIcon, + GroupsMenuIcon, + HealthMenuIcon, + IdentityMenuIcon, + LogsMenuIcon, + MetricsMenuIcon, + MonitoringMenuIcon, + PerformanceMenuIcon, + SupportMenuIcon, + TraceMenuIcon, + UsersMenuIcon, +} from "../../icons/SidebarMenus/MenuIcons"; +import { hasPermission } from "../../common/SecureComponent/SecureComponent"; +import WatchIcon from "../../icons/WatchIcon"; +import RegisterMenuIcon from "../../icons/SidebarMenus/RegisterMenuIcon"; +import { + DocumentationIcon, + LambdaIcon, + LicenseIcon, + StorageIcon, + TenantsOutlineIcon, + TiersIcon, +} from "../../icons"; +import SettingsIcon from "../../icons/SettingsIcon"; +import React from "react"; + +export const validRoutes = ( + features: string[] | null | undefined, + operatorMode: boolean +) => { + const ldapIsEnabled = (features && features.includes("ldap-idp")) || false; + + let consoleMenus: IMenuItem[] = [ + { + name: "Buckets", + id: "buckets", + component: NavLink, + to: IAM_PAGES.BUCKETS, + icon: BucketsMenuIcon, + forceDisplay: true, + children: [], + }, + { + name: "Identity", + id: "identity", + icon: IdentityMenuIcon, + children: [ + { + component: NavLink, + id: "users", + to: IAM_PAGES.USERS, + customPermissionFnc: () => + hasPermission(CONSOLE_UI_RESOURCE, [IAM_SCOPES.ADMIN_LIST_USERS]) || + hasPermission(S3_ALL_RESOURCES, [IAM_SCOPES.ADMIN_CREATE_USER]), + name: "Users", + icon: UsersMenuIcon, + fsHidden: ldapIsEnabled, + }, + { + component: NavLink, + id: "groups", + to: IAM_PAGES.GROUPS, + name: "Groups", + icon: GroupsMenuIcon, + fsHidden: ldapIsEnabled, + }, + { + component: NavLink, + id: "serviceaccounts", + to: IAM_PAGES.ACCOUNT, + name: "Service Accounts", + icon: AccountsMenuIcon, + forceDisplay: true, + }, + ], + }, + { + name: "Access", + component: NavLink, + id: "access", + to: IAM_PAGES.POLICIES, + icon: AccessMenuIcon, + }, + + { + name: "Monitoring", + id: "tools", + icon: MonitoringMenuIcon, + children: [ + { + name: "Metrics", + id: "monitorMetrics", + to: IAM_PAGES.DASHBOARD, + icon: MetricsMenuIcon, + component: NavLink, + }, + { + name: "Logs ", + id: "monitorLogs", + to: IAM_PAGES.TOOLS_LOGS, + icon: LogsMenuIcon, + component: NavLink, + }, + { + name: "Audit", + id: "monitorAudit", + to: IAM_PAGES.TOOLS_AUDITLOGS, + icon: AuditLogsMenuIcon, + component: NavLink, + }, + { + name: "Trace", + id: "monitorTrace", + to: IAM_PAGES.TOOLS_TRACE, + icon: TraceMenuIcon, + component: NavLink, + }, + { + name: "Watch", + id: "watch", + component: NavLink, + icon: WatchIcon, + to: IAM_PAGES.TOOLS_WATCH, + }, + { + name: "Drives", + id: "monitorDrives", + to: IAM_PAGES.TOOLS_HEAL, + icon: DrivesMenuIcon, + component: NavLink, + }, + ], + }, + { + name: "Support", + id: "support", + icon: SupportMenuIcon, + children: [ + { + name: "Register", + id: "register", + component: NavLink, + icon: RegisterMenuIcon, + to: IAM_PAGES.REGISTER_SUPPORT, + }, + { + name: "Health", + id: "diagnostics", + component: NavLink, + icon: HealthMenuIcon, + to: IAM_PAGES.TOOLS_DIAGNOSTICS, + }, + { + name: "Performance", + id: "performance", + component: NavLink, + icon: PerformanceMenuIcon, + to: IAM_PAGES.TOOLS_SPEEDTEST, + }, + + // { + // name: "Call Home", + // id: "callhome", + // component: NavLink, + // icon: CallHomeMenuIcon, + // to: IAM_PAGES.CALL_HOME, + // }, + // { + // name: "Inspect", + // id: "inspect", + // component: NavLink, + // icon: InspectMenuIcon, + // to: IAM_PAGES.TOOLS_WATCH, + // }, + // { + // name: "Profile", + // id: "profile", + // component: NavLink, + // icon: ProfileMenuIcon, + // to: IAM_PAGES.PROFILE, + // }, + ], + }, + { + component: NavLink, + to: IAM_PAGES.LICENSE, + name: "License", + id: "license", + icon: LicenseIcon, + forceDisplay: true, + }, + { + name: "Settings", + id: "settings", + icon: SettingsIcon, + children: [ + { + component: NavLink, + to: IAM_PAGES.SETTINGS, + name: "Configurations", + id: "configurations", + icon: SettingsIcon, + }, + { + component: NavLink, + to: IAM_PAGES.NOTIFICATIONS_ENDPOINTS, + name: "Notifications", + icon: LambdaIcon, + id: "lambda", + }, + { + component: NavLink, + to: IAM_PAGES.TIERS, + name: "Tiers", + icon: TiersIcon, + id: "tiers", + }, + ], + }, + { + type: "item", + component: NavLink, + to: IAM_PAGES.DOCUMENTATION, + name: "Documentation", + icon: DocumentationIcon, + forceDisplay: true, + onClick: ( + e: + | React.MouseEvent + | React.MouseEvent + | React.MouseEvent + ) => { + e.preventDefault(); + window.open("https://docs.min.io/?ref=con", "_blank"); + }, + }, + ]; + + let operatorMenus: IMenuItem[] = [ + { + group: "Operator", + type: "item", + component: NavLink, + to: IAM_PAGES.TENANTS, + name: "Tenants", + icon: TenantsOutlineIcon, + forceDisplay: true, + }, + { + group: "Operator", + type: "item", + component: NavLink, + to: IAM_PAGES.STORAGE, + name: "Storage", + icon: StorageIcon, + forceDisplay: true, + }, + { + group: "Operator", + type: "item", + component: NavLink, + to: IAM_PAGES.LICENSE, + name: "License", + icon: LicenseIcon, + forceDisplay: true, + }, + { + group: "Operator", + type: "item", + component: NavLink, + to: IAM_PAGES.DOCUMENTATION, + name: "Documentation", + icon: DocumentationIcon, + forceDisplay: true, + onClick: ( + e: + | React.MouseEvent + | React.MouseEvent + | React.MouseEvent + ) => { + e.preventDefault(); + window.open("https://docs.min.io/?ref=op", "_blank"); + }, + }, + ]; + + const allowedItems = (operatorMode ? operatorMenus : consoleMenus).filter( + (item: IMenuItem) => { + if (item.children && item.children.length > 0) { + const c = item.children?.filter((childItem: IMenuItem) => { + return ( + ((childItem.customPermissionFnc + ? childItem.customPermissionFnc() + : hasPermission( + CONSOLE_UI_RESOURCE, + IAM_PAGES_PERMISSIONS[childItem.to ?? ""] + )) || + childItem.forceDisplay) && + !childItem.fsHidden + ); + }); + return c.length > 0; + } + + const res = + ((item.customPermissionFnc + ? item.customPermissionFnc() + : hasPermission( + CONSOLE_UI_RESOURCE, + IAM_PAGES_PERMISSIONS[item.to ?? ""] + )) || + item.forceDisplay) && + !item.fsHidden; + return res; + } + ); + return allowedItems; +}; diff --git a/portal-ui/yarn.lock b/portal-ui/yarn.lock index 3c1b89a95..cd90dae38 100644 --- a/portal-ui/yarn.lock +++ b/portal-ui/yarn.lock @@ -2076,6 +2076,28 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9" integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA== +"@reach/observe-rect@^1.1.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2" + integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ== + +"@reach/portal@^0.16.0": + version "0.16.2" + resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.2.tgz#ca83696215ee03acc2bb25a5ae5d8793eaaf2f64" + integrity sha512-9ur/yxNkuVYTIjAcfi46LdKUvH0uYZPfEp4usWcpt6PIp+WDF57F/5deMe/uGi/B/nfDweQu8VVwuMVrCb97JQ== + dependencies: + "@reach/utils" "0.16.0" + tiny-warning "^1.0.3" + tslib "^2.3.0" + +"@reach/utils@0.16.0": + version "0.16.0" + resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce" + integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q== + dependencies: + tiny-warning "^1.0.3" + tslib "^2.3.0" + "@rollup/plugin-babel@^5.2.0": version "5.3.0" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz#9cb1c5146ddd6a4968ad96f209c50c62f92f9879" @@ -5743,7 +5765,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== -fast-equals@^2.0.0: +fast-equals@^2.0.0, fast-equals@^2.0.3: version "2.0.4" resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.4.tgz#3add9410585e2d7364c2deeb6a707beadb24b927" integrity sha512-caj/ZmjHljPrZtbzJ3kfH5ia/k4mTJe/qSiXAGzxZWRZgsgDV0cvNaQULqUX8t0/JVlzzEdYOwCN5DmzTxoD4w== @@ -7685,6 +7707,17 @@ jws@^3.2.2: jwa "^1.4.1" safe-buffer "^5.0.1" +kbar@^0.1.0-beta.27: + version "0.1.0-beta.27" + resolved "https://registry.yarnpkg.com/kbar/-/kbar-0.1.0-beta.27.tgz#6fec637054599dc4c6aa5a0cfc4042a50b3e32d1" + integrity sha512-4knRJxDQqx3LUduhjuJh9EDGxnFpaQKjXt11UOsjKQ4ByXTTQpPjfAaKagVcTp9uVwEXGDhvGrsGbMfrI+6/Kg== + dependencies: + "@reach/portal" "^0.16.0" + fast-equals "^2.0.3" + match-sorter "^6.3.0" + react-virtual "^2.8.2" + tiny-invariant "^1.2.0" + kind-of@^6.0.2: version "6.0.3" resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd" @@ -7942,6 +7975,14 @@ makeerror@1.0.12: dependencies: tmpl "1.0.5" +match-sorter@^6.3.0: + version "6.3.1" + resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda" + integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw== + dependencies: + "@babel/runtime" "^7.12.5" + remove-accents "0.4.2" + match-url-wildcard@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/match-url-wildcard/-/match-url-wildcard-0.0.4.tgz#c8533da7ec0901eddf01fc0893effa68d4e727d6" @@ -9758,6 +9799,13 @@ react-transition-group@^4.4.2: loose-envify "^1.4.0" prop-types "^15.6.2" +react-virtual@^2.8.2: + version "2.10.4" + resolved "https://registry.yarnpkg.com/react-virtual/-/react-virtual-2.10.4.tgz#08712f0acd79d7d6f7c4726f05651a13b24d8704" + integrity sha512-Ir6+oPQZTVHfa6+JL9M7cvMILstFZH/H3jqeYeKI4MSUX+rIruVwFC6nGVXw9wqAw8L0Kg2KvfXxI85OvYQdpQ== + dependencies: + "@reach/observe-rect" "^1.1.0" + react-virtualized@^9.22.2: version "9.22.3" resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.3.tgz#f430f16beb0a42db420dbd4d340403c0de334421" @@ -9952,6 +10000,11 @@ relateurl@^0.2.7: resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk= +remove-accents@0.4.2: + version "0.4.2" + resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5" + integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U= + renderkid@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a" @@ -11182,7 +11235,7 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= -tiny-invariant@^1.0.2: +tiny-invariant@^1.0.2, tiny-invariant@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9" integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg== @@ -11308,7 +11361,7 @@ tslib@^1.8.1: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== -tslib@^2.0.3: +tslib@^2.0.3, tslib@^2.3.0: version "2.3.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01" integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==