UX menu redesign (#1415)

Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

Author: prakashsvmx

portal-ui/src/common/Copyright.tsx

@@ -22,7 +22,7 @@ export default function Copyright() {
   return (
     <Typography variant="body2" color="textSecondary" align="center">
       {"Copyright © "}
-      <Link color="inherit" href="https://min.io/">
+      <Link color="inherit" href="https://min.io/?ref=con">
         MinIO
       </Link>{" "}
       {new Date().getFullYear()}

portal-ui/src/common/SecureComponent/permissions.ts

@@ -139,35 +139,58 @@ export const IAM_SCOPES = {
 };
 
 export const IAM_PAGES = {
-  POLICIES: "/policies",
-  POLICIES_VIEW: "/policies/*",
-  DASHBOARD: "/dashboard",
-  METRICS: "/metrics",
-  ADD_BUCKETS: "/add-bucket",
+  /* Buckets */
   BUCKETS: "/buckets",
+  ADD_BUCKETS: "/add-bucket",
   BUCKETS_ADMIN_VIEW: "/buckets/:bucketName/admin*",
   BUCKETS_BROWSE_VIEW: "/buckets/:bucketName/browse*",
-  TOOLS_WATCH: "/tools/watch",
-  TOOLS_SPEEDTEST: "/tools/speedtest",
-  USERS: "/users",
-  USERS_VIEW: "/users/:userName+",
-  GROUPS: "/groups",
-  GROUPS_VIEW: "/groups/:groupName+",
-  TOOLS_HEAL: "/tools/heal",
-  TOOLS_TRACE: "/tools/trace",
-  TOOLS_DIAGNOSTICS: "/tools/diagnostics",
+  /* Identity */
+  IDENTITY: "/identity",
+  USERS: "/identity/users",
+  USERS_VIEW: "/identity/users/:userName+",
+  GROUPS: "/identity/groups",
+  GROUPS_VIEW: "/identity/groups/:groupName+",
+  ACCOUNT: "/identity/account",
+  /* Access */
+  POLICIES: "/access/policies",
+  POLICIES_VIEW: "/access/policies/*",
+  /* Monitoring */
   TOOLS_LOGS: "/tools/logs",
   TOOLS_AUDITLOGS: "/tools/audit-logs",
-  TOOLS: "/tools",
+  TOOLS_TRACE: "/tools/trace",
+  METRICS: "/tools/metrics",
+  DASHBOARD: "/tools/dashboard",
+  TOOLS_HEAL: "/tools/heal",
+  /* Health */
+  HEALTH: "/health",
+
+  /* Support */
+  TOOLS: "/support",
+  REGISTER_SUPPORT: "/support/register",
+  TOOLS_DIAGNOSTICS: "/support/diagnostics",
+  TOOLS_SPEEDTEST: "/support/speedtest",
+  CALL_HOME: "/support/call-home",
+  INSPECT: "/support/inspect",
+  PROFILE: "/support/profile",
+  TOOLS_WATCH: "/support/watch",
+
+  /** License **/
+  LICENSE: "/license",
+  /* Settings **/
   SETTINGS: "/settings",
   SETTINGS_VIEW: "/settings/:option",
-  NOTIFICATIONS_ENDPOINTS_ADD: "/notification-endpoints/add",
-  NOTIFICATIONS_ENDPOINTS_ADD_SERVICE: "/notification-endpoints/add/:service",
-  NOTIFICATIONS_ENDPOINTS: "/notification-endpoints",
+  /* Documentation **/
+  DOCUMENTATION: "/documentation",
+  /* TBD ? */
+  NOTIFICATIONS_ENDPOINTS: "/lambda/notification-endpoints",
+  NOTIFICATIONS_ENDPOINTS_ADD: "/lambda/notification-endpoints/add",
+  NOTIFICATIONS_ENDPOINTS_ADD_SERVICE:
+    "/lambda/notification-endpoints/add/:service",
   TIERS: "/tiers",
   TIERS_ADD: "/tiers/add",
   TIERS_ADD_SERVICE: "/tiers/add/:service",
-  ACCOUNT: "/account",
+
+  /* Operator */
   TENANTS: "/tenants",
   TENANTS_ADD: "/tenants/add",
   STORAGE: "/storage",
@@ -195,8 +218,6 @@ export const IAM_PAGES = {
     "/namespaces/:tenantNamespace/tenants/:tenantName/monitoring",
   NAMESPACE_TENANT_LOGGING:
     "/namespaces/:tenantNamespace/tenants/:tenantName/logging",
-  LICENSE: "/license",
-  DOCUMENTATION: "/documentation",
 };
 
 // roles
@@ -366,6 +387,11 @@ export const IAM_PAGES_PERMISSIONS = {
     IAM_SCOPES.ADMIN_SERVER_INFO,
   ],
   [IAM_PAGES.TOOLS_SPEEDTEST]: [IAM_SCOPES.ADMIN_HEALTH_INFO],
+  [IAM_PAGES.REGISTER_SUPPORT]: [IAM_SCOPES.ADMIN_HEALTH_INFO],
+  [IAM_PAGES.CALL_HOME]: [IAM_SCOPES.ADMIN_HEALTH_INFO],
+  [IAM_PAGES.INSPECT]: [IAM_SCOPES.ADMIN_HEALTH_INFO],
+  [IAM_PAGES.PROFILE]: [IAM_SCOPES.ADMIN_HEALTH_INFO],
+  [IAM_PAGES.HEALTH]: [IAM_SCOPES.ADMIN_HEALTH_INFO],
 };
 
 export const S3_ALL_RESOURCES = "arn:aws:s3:::*";

portal-ui/src/icons/SidebarMenus/AccessMenuIcon.tsx

@@ -0,0 +1,55 @@
+// 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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AccessMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 11.749 16"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-access-menu-icon">
+        <rect
+          id="Rectángulo_1586"
+          data-name="Rectángulo 1586"
+          width="11.749"
+          height="16"
+          fill="#8399ab"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2439"
+      data-name="Grupo 2439"
+      clipPath="url(#clip-path-access-menu-icon)"
+    >
+      <path
+        id="Trazado_7102"
+        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"
+      />
+    </g>
+  </svg>
+);
+
+export default AccessMenuIcon;

portal-ui/src/icons/SidebarMenus/AccountsMenuIcon.tsx

@@ -0,0 +1,46 @@
+// 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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AccountsMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <defs>
+      <clipPath id="prefix__a">
+        <path d="M0 0h256v256H0z" />
+      </clipPath>
+    </defs>
+    <g clipPath="url(#prefix__a)">
+      <path fill="none" d="M0 0h256v256H0z" />
+      <g data-name="account">
+        <path
+          data-name="Trazado 463"
+          d="M32.291 232.53a32.336 32.336 0 0 1-32.289-32.3V76.935a32.33 32.33 0 0 1 32.289-32.3 8.837 8.837 0 0 1 8.832 8.822 8.845 8.845 0 0 1-8.832 8.831 14.663 14.663 0 0 0-14.648 14.648v123.295a14.661 14.661 0 0 0 14.648 14.64h191.4a14.66 14.66 0 0 0 14.641-14.64V76.936a14.661 14.661 0 0 0-14.641-14.648h-54.07a8.845 8.845 0 0 1-8.832-8.831 8.762 8.762 0 0 1 2.586-6.236 8.735 8.735 0 0 1 6.246-2.586h54.07a32.345 32.345 0 0 1 32.313 32.3V200.23a32.351 32.351 0 0 1-32.312 32.3Zm140.445-33.006a3.078 3.078 0 0 1-3.082-3.07V179.02a3.08 3.08 0 0 1 3.082-3.08h47.18a3.077 3.077 0 0 1 3.07 3.08v17.434a3.075 3.075 0 0 1-3.07 3.07Zm-113.141 0a22.643 22.643 0 0 1-20.648-12.767 26.835 26.835 0 0 1 1.891-26.579l.02-.019c.094-.143.2-.285.3-.428.273-.409.559-.827.871-1.245a70.651 70.651 0 0 1 52.277-28.5 62.967 62.967 0 0 1 3.543-.095 67.043 67.043 0 0 1 15.211 1.777 71.594 71.594 0 0 1 14.734 5.219 71.248 71.248 0 0 1 26.73 22.149 27.371 27.371 0 0 1 2.672 27.53 22.363 22.363 0 0 1-20.629 12.956Zm-3.719-30.372v.01l-.047.058c-.191.256-.371.5-.531.741v.028l-.258.371a8.365 8.365 0 0 0-.715 8.261 5.526 5.526 0 0 0 5.27 3.1h76.969a6.062 6.062 0 0 0 3.156-.761 4.988 4.988 0 0 0 1.949-2.243 8.485 8.485 0 0 0 .715-4.524 9.18 9.18 0 0 0-1.7-4.468 54.088 54.088 0 0 0-42.969-22.007c-.93 0-1.75.019-2.508.066h-.012a53.055 53.055 0 0 0-39.318 21.368Zm116.859-5.01a3.08 3.08 0 0 1-3.082-3.079v-17.425a3.08 3.08 0 0 1 3.082-3.08h47.18a3.077 3.077 0 0 1 3.07 3.08v17.425a3.077 3.077 0 0 1-3.07 3.079Zm-.59-38.7a2.5 2.5 0 0 1-2.492-2.5V82.066a2.5 2.5 0 0 1 2.492-2.5h48.348a2.5 2.5 0 0 1 2.492 2.5v40.876a2.5 2.5 0 0 1-2.492 2.5ZM50.981 74.213c0-28.233 22.09-51.209 49.242-51.209s49.258 22.976 49.258 51.209a52.579 52.579 0 0 1-3.867 19.906 51.257 51.257 0 0 1-10.551 16.274 49.07 49.07 0 0 1-15.656 11 47.257 47.257 0 0 1-19.184 4.041c-27.151 0-49.241-22.976-49.241-51.22Zm17.977 0c0 18.033 14.031 32.711 31.266 32.711 17.262 0 31.3-14.678 31.3-32.711s-14.039-32.7-31.3-32.7c-17.234 0-31.265 14.668-31.265 32.701Z"
+        />
+        <path data-name="Rect\xE1ngulo 883" fill="none" d="M0 0h256v256H0z" />
+      </g>
+    </g>
+  </svg>
+);
+
+export default AccountsMenuIcon;

portal-ui/src/icons/SidebarMenus/AuditLogsMenuIcon.tsx

@@ -0,0 +1,69 @@
+// 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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AuditLogsMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 14.117 13"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-audit-log-menu-icon">
+        <rect
+          id="Rectángulo_1591"
+          data-name="Rectángulo 1591"
+          width="14.117"
+          height="13"
+          fill="#fff"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2463"
+      data-name="Grupo 2463"
+      clipPath="url(#clip-path-audit-log-menu-icon)"
+    >
+      <path
+        id="Trazado_7111"
+        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"
+      />
+      <path
+        id="Trazado_7112"
+        data-name="Trazado 7112"
+        d="M2.636,41.038a5.331,5.331,0,0,1,.683-2.616H.731A.732.732,0,0,0,0,39.154v2.125H2.641c0-.08-.006-.16-.006-.241"
+        transform="translate(0 -36.296)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7114"
+        data-name="Trazado 7114"
+        d="M70.167,9.1h0L68.422,7.37a4.685,4.685,0,0,0,.809-2.629,4.795,4.795,0,0,0-9.589,0,4.773,4.773,0,0,0,4.793,4.741h.014a4.754,4.754,0,0,0,2.524-.719l1.779,1.757a1.008,1.008,0,0,0,.7.3h.011a1.005,1.005,0,0,0,.7-1.714M64.394,7.53a2.8,2.8,0,0,1-2.819-2.777,2.819,2.819,0,0,1,5.637,0A2.8,2.8,0,0,1,64.394,7.53"
+        transform="translate(-56.343)"
+        fill="#fff"
+      />
+    </g>
+  </svg>
+);
+
+export default AuditLogsMenuIcon;

portal-ui/src/icons/SidebarMenus/BucketsMenuIcon.tsx

@@ -0,0 +1,81 @@
+// 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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const BucketsMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 16 16"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-buckets">
+        <rect
+          id="Rectángulo_928"
+          data-name="Rectángulo 928"
+          width="15.957"
+          height="15.928"
+          fill="#8399ab"
+        />
+      </clipPath>
+    </defs>
+    <g id="BucketsIcons-Full" transform="translate(0.283)">
+      <g id="BucketsIcon-full" transform="translate(-0.283)">
+        <rect
+          id="Rectángulo_884"
+          data-name="Rectángulo 884"
+          width="15.939"
+          height="15.911"
+          transform="translate(0.061)"
+          fill="none"
+        />
+        <g
+          id="Grupo_2272"
+          data-name="Grupo 2272"
+          transform="translate(0 0.072)"
+        >
+          <g
+            id="Grupo_2271"
+            data-name="Grupo 2271"
+            clipPath="url(#clip-path-buckets)"
+          >
+            <path
+              id="Trazado_7002"
+              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"
+            />
+          </g>
+        </g>
+      </g>
+      <rect
+        id="Rectángulo_929"
+        data-name="Rectángulo 929"
+        width="15.957"
+        height="15.928"
+        transform="translate(-0.283 0.072)"
+        fill="none"
+      />
+    </g>
+  </svg>
+);
+
+export default BucketsMenuIcon;