Menu Adjustments: Watch to Monitoring. Tiers to Settings. Notifications to Settings.

Signed-off-by: Daniel Valdivia <[email protected]>

Author: dvaldivia

.github/workflows/permissions.yml

@@ -1,4 +1,4 @@
-name: "Front-End Permission Tests"
+name: "UI"
 
 on:
   pull_request:
@@ -10,7 +10,7 @@ on:
 
 jobs:
   permissions:
-    name: Front-End Permission Tests
+    name: Permissions Tests
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:

portal-ui/package.json

@@ -58,7 +58,7 @@
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.3.1",
     "superagent": "^6.1.0",
-    "testcafe": "^1.17.1",
+    "testcafe": "^1.18.2",
     "typeface-roboto": "^0.0.75",
     "use-debounce": "^5.0.1",
     "websocket": "^1.0.31"

portal-ui/src/common/BackLink.tsx

@@ -27,7 +27,7 @@ const styles = (theme: Theme) =>
       display: "flex",
       alignItems: "center",
       textDecoration: "none",
-      maxWidth: "250px",
+      maxWidth: "300px",
       padding: "2rem 2rem 0rem 2rem",
       color: theme.palette.primary.light,
       fontSize: ".8rem",

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

@@ -161,6 +161,7 @@ export const IAM_PAGES = {
   METRICS: "/tools/metrics",
   DASHBOARD: "/tools/dashboard",
   TOOLS_HEAL: "/tools/heal",
+  TOOLS_WATCH: "/tools/watch",
   /* Health */
   HEALTH: "/health",
 
@@ -171,23 +172,22 @@ export const IAM_PAGES = {
   TOOLS_SPEEDTEST: "/support/speedtest",
   CALL_HOME: "/support/call-home",
   PROFILE: "/support/profile",
-  TOOLS_WATCH: "/support/inspect",
 
   /** License **/
   LICENSE: "/license",
   /* Settings **/
-  SETTINGS: "/settings",
-  SETTINGS_VIEW: "/settings/:option",
+  SETTINGS: "/settings/configurations",
+  SETTINGS_VIEW: "/settings/configurations/:option",
   /* Documentation **/
   DOCUMENTATION: "/documentation",
   /* TBD ? */
-  NOTIFICATIONS_ENDPOINTS: "/lambda/notification-endpoints",
-  NOTIFICATIONS_ENDPOINTS_ADD: "/lambda/notification-endpoints/add",
+  NOTIFICATIONS_ENDPOINTS: "/settings/notification-endpoints",
+  NOTIFICATIONS_ENDPOINTS_ADD: "/settings/notification-endpoints/add",
   NOTIFICATIONS_ENDPOINTS_ADD_SERVICE:
-    "/lambda/notification-endpoints/add/:service",
-  TIERS: "/tiers",
-  TIERS_ADD: "/tiers/add",
-  TIERS_ADD_SERVICE: "/tiers/add/:service",
+    "/settings/notification-endpoints/add/:service",
+  TIERS: "/settings/tiers",
+  TIERS_ADD: "/settings/tiers/add",
+  TIERS_ADD_SERVICE: "/settings/tiers/add/:service",
 
   /* Operator */
   TENANTS: "/tenants",

portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx

@@ -35,6 +35,7 @@ import {
 } from "../../../../common/SecureComponent/permissions";
 import SecureComponent from "../../../../common/SecureComponent/SecureComponent";
 import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
+import clsx from "clsx";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -195,7 +196,7 @@ const BucketListItem = ({
   };
 
   return (
-    <Grid container className={classes.root}>
+    <Grid container className={clsx(classes.root, "bucket-item")}>
       <Grid item xs={12}>
         <Grid container justifyContent={"space-between"}>
           <Grid item xs={12} sm={7}>

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -1273,5 +1273,5 @@ export const TableRowPredefStyles: any = {
     color: "#ACACAC",
     backgroundColor: "#FDFDFD",
     fontStyle: "italic",
-  }
-}
+  },
+};

portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationOptions.tsx

@@ -37,6 +37,7 @@ import get from "lodash/get";
 import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
 
 import withSuspense from "../../Common/Components/withSuspense";
+import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
 
 const ConfigurationForm = withSuspense(
   React.lazy(() => import("./ConfigurationForm"))
@@ -64,7 +65,7 @@ const styles = (theme: Theme) =>
   });
 
 const getRoutePath = (path: string) => {
-  return `/settings/${path}`;
+  return `${IAM_PAGES.SETTINGS}/${path}`;
 };
 
 const ConfigurationOptions = ({ classes, match }: IConfigurationOptions) => {
@@ -95,12 +96,12 @@ const ConfigurationOptions = ({ classes, match }: IConfigurationOptions) => {
                       <Route
                         exact
                         key={`configItem-${element.configuration_label}`}
-                        path={`/settings/${element.configuration_id}`}
+                        path={`${IAM_PAGES.SETTINGS}/${element.configuration_id}`}
                         component={ConfigurationForm}
                       />
                     ))}
-                    <Route exact path="/settings">
-                      <Redirect to="/settings/region" />
+                    <Route exact path={IAM_PAGES.SETTINGS}>
+                      <Redirect to={`${IAM_PAGES.SETTINGS}/region`} />
                     </Route>
                   </Switch>
                 </Router>

portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx

@@ -231,7 +231,7 @@ const HealthInfo = ({
 
   return (
     <Fragment>
-      <PageHeader label="Diagnostic" />
+      <PageHeader label="Health" />
       <PageLayout>
         <Grid item xs={12} className={classes.boxy}>
           <TestWrapper title={title} advancedVisible={false}>
@@ -286,6 +286,7 @@ const HealthInfo = ({
                       )}
                       <Grid item xs={12} className={classes.diagNew}>
                         <Button
+                          id="start-new-diagnostic"
                           type="submit"
                           variant="contained"
                           color="primary"

portal-ui/src/screens/Console/Menu/ConsoleMenuList.tsx

@@ -27,15 +27,9 @@ import {
   menuItemMiniStyles,
   menuItemTextStyles,
 } from "./MenuStyleUtils";
-import { DocumentationIcon, SettingsIcon } from "../../../icons";
+import { DocumentationIcon } from "../../../icons";
 import MenuItem from "./MenuItem";
-import { NavLink, useLocation } from "react-router-dom";
-import {
-  CONSOLE_UI_RESOURCE,
-  IAM_PAGES,
-  IAM_SCOPES,
-} from "../../../common/SecureComponent/permissions";
-import SecureComponent from "../../../common/SecureComponent/SecureComponent";
+import { useLocation } from "react-router-dom";
 
 const ConsoleMenuList = ({
   menuItems,
@@ -137,40 +131,6 @@ const ConsoleMenuList = ({
         }}
         className={`${stateClsName} group-wrapper bottom-list`}
       >
-        <SecureComponent
-          scopes={[IAM_SCOPES.ADMIN_CONFIG_UPDATE]}
-          resource={CONSOLE_UI_RESOURCE}
-        >
-          <ListItem
-            key={IAM_PAGES.SETTINGS}
-            button
-            to={IAM_PAGES.SETTINGS}
-            disableRipple
-            component={NavLink}
-            className={`$ ${stateClsName} bottom-menu-item`}
-            sx={{
-              ...menuItemContainerStyles,
-              ...menuItemMiniStyles,
-              marginBottom: "3px",
-            }}
-          >
-            <ListItemIcon
-              sx={{
-                ...menuItemIconStyles,
-              }}
-            >
-              <SettingsIcon />
-            </ListItemIcon>
-            <ListItemText
-              primary="Settings"
-              sx={{
-                ...menuItemTextStyles,
-              }}
-              className={stateClsName}
-            />
-          </ListItem>
-        </SecureComponent>
-
         <ListItem
           button
           onClick={(

portal-ui/src/screens/Console/Menu/Menu.tsx

@@ -70,8 +70,8 @@ import { hasPermission } from "../../../common/SecureComponent/SecureComponent";
 import MenuToggle from "./MenuToggle";
 import ConsoleMenuList from "./ConsoleMenuList";
 import RegisterMenuIcon from "../../../icons/SidebarMenus/RegisterMenuIcon";
-import DiagnosticsMenuIcon from "../../../icons/SidebarMenus/DiagnosticsMenuIcon";
-import InspectMenuIcon from "../../../icons/SidebarMenus/InspectMenuIcon";
+import SettingsIcon from "../../../icons/SettingsIcon";
+import WatchIcon from "../../../icons/WatchIcon";
 
 const drawerWidth = 245;
 
@@ -196,20 +196,7 @@ const Menu = ({
       to: IAM_PAGES.POLICIES,
       icon: AccessMenuIcon,
     },
-    {
-      component: NavLink,
-      to: IAM_PAGES.NOTIFICATIONS_ENDPOINTS,
-      name: "Notification Endpoints",
-      icon: LambdaIcon,
-      id: "lambda",
-    },
-    {
-      component: NavLink,
-      to: IAM_PAGES.TIERS,
-      name: "Tiers",
-      icon: TiersIcon,
-      id: "tiers",
-    },
+
     {
       name: "Monitoring",
       id: "tools",
@@ -243,7 +230,13 @@ const Menu = ({
           icon: TraceMenuIcon,
           component: NavLink,
         },
-
+        {
+          name: "Watch",
+          id: "watch",
+          component: NavLink,
+          icon: WatchIcon,
+          to: IAM_PAGES.TOOLS_WATCH,
+        },
         {
           name: "Drives",
           id: "monitorDrives",
@@ -253,14 +246,6 @@ const Menu = ({
         },
       ],
     },
-    {
-      name: "Health",
-      id: "health",
-      component: NavLink,
-      icon: HealthMenuIcon,
-      to: IAM_PAGES.HEALTH,
-      children: [],
-    },
     {
       name: "Support",
       id: "support",
@@ -274,10 +259,10 @@ const Menu = ({
           to: IAM_PAGES.REGISTER_SUPPORT,
         },
         {
-          name: "Diagnostic",
+          name: "Health",
           id: "diagnostics",
           component: NavLink,
-          icon: DiagnosticsMenuIcon,
+          icon: HealthMenuIcon,
           to: IAM_PAGES.TOOLS_DIAGNOSTICS,
         },
         {
@@ -287,20 +272,21 @@ const Menu = ({
           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: "Inspect",
+        //   id: "inspect",
+        //   component: NavLink,
+        //   icon: InspectMenuIcon,
+        //   to: IAM_PAGES.TOOLS_WATCH,
+        // },
         // {
         //   name: "Profile",
         //   id: "profile",
@@ -318,6 +304,34 @@ const Menu = ({
       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",
+        },
+      ],
+    },
   ];
 
   let operatorMenus: IMenuItem[] = [