Fix route navigation paths to match menus (#1978)

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

@@ -113,21 +113,21 @@ export const IAM_SCOPES = {
 export const IAM_PAGES = {
   /* Buckets */
   BUCKETS: "/buckets",
-  ADD_BUCKETS: "/add-bucket",
+  ADD_BUCKETS: "/buckets/add-bucket",
   BUCKETS_ADMIN_VIEW: "/buckets/:bucketName/admin*",
   BUCKETS_BROWSE_VIEW: "/buckets/:bucketName/browse*",
   /* Identity */
   IDENTITY: "/identity",
   USERS: "/identity/users",
-  USERS_VIEW: "/identity/users/:userName+",
-  USER_ADD: "/identity/add-user",
+  USERS_VIEW: "/identity/users/:userName",
+  USER_ADD: "/identity/users/add-user",
   GROUPS: "/identity/groups",
-  GROUPS_ADD: "/identity/create-group",
+  GROUPS_ADD: "/identity/groups/create-group",
   GROUPS_VIEW: "/identity/groups/:groupName+",
   ACCOUNT: "/identity/account",
-  ACCOUNT_ADD: "/identity/new-account",
-  USER_ACCOUNT: "/identity/new-user-sa",
-  USER_ACCOUNT_ADD: "/identity/new-user-sa/:userName+",
+  ACCOUNT_ADD: "/identity/account/new-account",
+  USER_SA_ACCOUNT_ADD: "/identity/users/new-user-sa/:userName",
+
   /* Access */
   POLICIES: "/access/policies",
   POLICY_ADD: "/access/add-policy",
@@ -316,7 +316,7 @@ export const IAM_PAGES_PERMISSIONS = {
     IAM_SCOPES.ADMIN_DISABLE_USER,
     IAM_SCOPES.ADMIN_DELETE_USER,
   ],
-  [IAM_PAGES.USER_ACCOUNT_ADD]: [
+  [IAM_PAGES.USER_SA_ACCOUNT_ADD]: [
     IAM_SCOPES.ADMIN_CREATE_SERVICEACCOUNT,
     IAM_SCOPES.ADMIN_UPDATE_SERVICEACCOUNT,
     IAM_SCOPES.ADMIN_REMOVE_SERVICEACCOUNT,

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

@@ -22,6 +22,7 @@ import { AppState } from "../../../store";
 import { setMenuOpen } from "../../../actions";
 import NotFoundPage from "../../NotFoundPage";
 import LoadingComponent from "../../../common/LoadingComponent";
+import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 
 const ListBuckets = React.lazy(() => import("./ListBuckets/ListBuckets"));
 const BucketDetails = React.lazy(() => import("./BucketDetails/BucketDetails"));
@@ -41,7 +42,7 @@ const Buckets = () => {
     <Router history={history}>
       <Switch>
         <Route
-          path="/add-bucket"
+          path={IAM_PAGES.ADD_BUCKETS}
           children={(routerProps) => (
             <Suspense fallback={<LoadingComponent />}>
               <AddBucket />

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

@@ -46,6 +46,7 @@ import SelectMultipleIcon from "../../../../icons/SelectMultipleIcon";
 import { SecureComponent } from "../../../../common/SecureComponent";
 import {
   CONSOLE_UI_RESOURCE,
+  IAM_PAGES,
   IAM_SCOPES,
 } from "../../../../common/SecureComponent/permissions";
 import PageLayout from "../../Common/Layout/PageLayout";
@@ -293,7 +294,7 @@ const ListBuckets = ({
             <RBIconButton
               tooltip={"Create Bucket"}
               onClick={() => {
-                history.push("/add-bucket");
+                history.push(IAM_PAGES.ADD_BUCKETS);
               }}
               text={"Create Bucket"}
               icon={<AddIcon />}
@@ -358,7 +359,7 @@ const ListBuckets = ({
                           To get started,&nbsp;
                           <AButton
                             onClick={() => {
-                              history.push("/add-bucket");
+                              history.push(IAM_PAGES.ADD_BUCKETS);
                             }}
                           >
                             Create a Bucket.

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

@@ -424,7 +424,7 @@ const Console = ({
     },
     {
       component: UserSACreate,
-      path: IAM_PAGES.USER_ACCOUNT_ADD,
+      path: IAM_PAGES.USER_SA_ACCOUNT_ADD,
       forceDisplay: true, // user has implicit access to service-accounts
     },
     {

portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx

@@ -41,9 +41,11 @@ import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 import DeleteMultipleServiceAccounts from "./DeleteMultipleServiceAccounts";
 import { selectSAs } from "../../Console/Configurations/utils";
 import ServiceAccountPolicy from "../Account/ServiceAccountPolicy";
-import { IAM_PAGES,
-         CONSOLE_UI_RESOURCE,
-         IAM_SCOPES } from "../../../common/SecureComponent/permissions";
+import {
+  IAM_PAGES,
+  CONSOLE_UI_RESOURCE,
+  IAM_SCOPES,
+} from "../../../common/SecureComponent/permissions";
 import { SecureComponent } from "../../../common/SecureComponent";
 
 interface IUserServiceAccountsProps {
@@ -235,25 +237,30 @@ const UserServiceAccountsPanel = ({
             variant={"outlined"}
           />
           <SecureComponent
-            scopes={[IAM_SCOPES.ADMIN_CREATE_SERVICEACCOUNT,
+            scopes={[
+              IAM_SCOPES.ADMIN_CREATE_SERVICEACCOUNT,
               IAM_SCOPES.ADMIN_UPDATE_SERVICEACCOUNT,
               IAM_SCOPES.ADMIN_REMOVE_SERVICEACCOUNT,
-              IAM_SCOPES.ADMIN_LIST_SERVICEACCOUNTS]}
+              IAM_SCOPES.ADMIN_LIST_SERVICEACCOUNTS,
+            ]}
             resource={CONSOLE_UI_RESOURCE}
             matchAll
             errorProps={{ disabled: true }}
           >
-          <RBIconButton
-            tooltip={"Create service account"}
-            text={"Create service account"}
-            variant="contained"
-            color="primary"
-            icon={<AddIcon />}
-            onClick={() => {
-              history.push(`${IAM_PAGES.USER_ACCOUNT}/${user}`);
-            }}
-            disabled={!hasPolicy}
-          />
+            <RBIconButton
+              tooltip={"Create service account"}
+              text={"Create service account"}
+              variant="contained"
+              color="primary"
+              icon={<AddIcon />}
+              onClick={() => {
+                let newSAPath = `/identity/users/${user}/new-user-sa`;
+                newSAPath = `${IAM_PAGES.USER_SA_ACCOUNT_ADD}/${user}`;
+                newSAPath = `/identity/users/new-user-sa/${user}`;
+                history.push(newSAPath);
+              }}
+              disabled={!hasPolicy}
+            />
           </SecureComponent>
         </Box>
       </div>

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

@@ -37,9 +37,9 @@ const Users = () => {
   return (
     <Router history={history}>
       <Switch>
-        <Route path={IAM_PAGES.USERS_VIEW} component={UserDetails} />
-        <Route path={IAM_PAGES.USERS} component={ListUsers} />
-        <Route path={IAM_PAGES.USER_ADD} component={AddUserScreen} />
+        <Route path={IAM_PAGES.USER_ADD} exact component={AddUserScreen} />
+        <Route path={IAM_PAGES.USERS_VIEW} exact component={UserDetails} />
+        <Route path={IAM_PAGES.USERS} exact component={ListUsers} />
         <Route component={NotFoundPage} />
       </Switch>
     </Router>

portal-ui/src/screens/Console/kbar-actions.tsx

@@ -18,6 +18,7 @@ import { Action } from "kbar/lib/types";
 import history from "../../history";
 import { BucketsIcon } from "../../icons";
 import { validRoutes } from "./valid-routes";
+import { IAM_PAGES } from "../../common/SecureComponent/permissions";
 import { Bucket } from "./Buckets/types";
 
 export const routesAsKbarActions = (
@@ -56,7 +57,7 @@ export const routesAsKbarActions = (
       id: `create-bucket`,
       name: "Create Bucket",
       section: "Buckets",
-      perform: () => history.push(`/add-bucket`),
+      perform: () => history.push(IAM_PAGES.ADD_BUCKETS),
       icon: <BucketsIcon />,
     };
     initialActions.push(a);

portal-ui/tests/permissions-1/groups.ts

@@ -20,18 +20,21 @@ import * as constants from "../utils/constants";
 import * as functions from "../utils/functions";
 import { Selector } from "testcafe";
 import { groupsElement, identityElement } from "../utils/elements-menu";
+import { IAM_PAGES } from "../../src/common/SecureComponent/permissions";
 
-const groupsListItemFor = (modifier) => {
+const groupsListItemFor = (modifier: string) => {
   return Selector(".ReactVirtualized__Table__rowColumn").withText(
     `${constants.TEST_GROUP_NAME}-${modifier}`
   );
 };
 
-const createGroup = async (t, modifier) => {
+const appBaseUrl = "http://localhost:9090";
+let groupsPageUrl = `${appBaseUrl}${IAM_PAGES.GROUPS}`;
+let groupsAddPageUrl = `${appBaseUrl}${IAM_PAGES.GROUPS_ADD}`;
+const createGroup = async (t: TestController, modifier: string) => {
   await t
     .useRole(roles.groups)
-    .navigateTo("http://localhost:9090/identity/groups")
-    .click(elements.createGroupButton)
+    .navigateTo(groupsAddPageUrl)
     .typeText(
       elements.groupNameInput,
       `${constants.TEST_GROUP_NAME}-${modifier}`
@@ -42,7 +45,7 @@ const createGroup = async (t, modifier) => {
 };
 
 fixture("For user with Groups permissions")
-  .page("http://localhost:9090")
+  .page(appBaseUrl)
   .beforeEach(async (t) => {
     await t.useRole(roles.groups);
   });
@@ -58,30 +61,25 @@ test("Groups sidebar item exists", async (t) => {
 
 test("Create Group button exists", async (t) => {
   const createGroupButtonExists = elements.createGroupButton.exists;
-  await t
-    .navigateTo("http://localhost:9090/identity/groups")
-    .expect(createGroupButtonExists)
-    .ok();
+  await t.navigateTo(groupsPageUrl).expect(createGroupButtonExists).ok();
 });
 
 test("Create Group button is clickable", async (t) => {
-  await t
-    .navigateTo("http://localhost:9090/identity/groups")
-    .click(elements.createGroupButton);
+  await t.navigateTo(groupsPageUrl).click(elements.createGroupButton);
 });
 
-test("Group Name input exists in the Create Group modal", async (t) => {
+test("Group Name input exists in the Create Group page", async (t) => {
   await t
-    .navigateTo("http://localhost:9090/identity/groups")
+    .navigateTo(groupsPageUrl)
     .click(elements.createGroupButton)
     .expect(elements.groupNameInput.exists)
     .ok();
 });
 
-test("Users table exists in the Create Group modal", async (t) => {
+test("Users table exists in the Create Groups page", async (t) => {
   const createGroupUserTableExists = elements.table.exists;
   await t
-    .navigateTo("http://localhost:9090/identity/groups")
+    .navigateTo(groupsPageUrl)
     .click(elements.createGroupButton)
     .expect(createGroupUserTableExists)
     .ok();
@@ -90,31 +88,24 @@ test("Users table exists in the Create Group modal", async (t) => {
 test.before(async (t) => {
   // A user must be created as we need to choose a user from the dropdown
   await functions.createUser(t);
-})(
-  "Create Group modal can be submitted after inputs are entered",
-  async (t) => {
-    // We need to log back in after we use the admin account to create bucket,
-    // using the specific role we use in this module
-    await t
-      .useRole(roles.groups)
-      .navigateTo("http://localhost:9090/identity/groups")
-      .click(elements.createGroupButton)
-      .typeText(elements.groupNameInput, constants.TEST_GROUP_NAME)
-      .typeText(elements.filterUserInput, constants.TEST_USER_NAME)
-      .click(elements.groupUserCheckbox)
-      .click(elements.saveButton);
-  }
-);
+})("Create Group page can be submitted after inputs are entered", async (t) => {
+  // We need to log back in after we use the admin account to create bucket,
+  // using the specific role we use in this module
+  await t
+    .useRole(roles.groups)
+    .navigateTo(groupsAddPageUrl)
+    .typeText(elements.groupNameInput, constants.TEST_GROUP_NAME)
+    .typeText(elements.filterUserInput, constants.TEST_USER_NAME)
+    .click(elements.groupUserCheckbox)
+    .click(elements.saveButton);
+});
 
 test.before(async (t) => {
   // A user must be created as we need to choose a user from the dropdown
   await functions.createUser(t);
   await createGroup(t, "groups-table");
 })("Groups table exists", async (t) => {
-  await t
-    .navigateTo("http://localhost:9090/identity/groups")
-    .expect(elements.table.exists)
-    .ok();
+  await t.navigateTo(groupsPageUrl).expect(elements.table.exists).ok();
 });
 
 test.before(async (t) => {
@@ -123,7 +114,7 @@ test.before(async (t) => {
   await createGroup(t, "disable-enable");
 })("Created Group can be disabled and enabled back", async (t) => {
   await t
-    .navigateTo("http://localhost:9090/identity/groups")
+    .navigateTo(groupsPageUrl)
     .click(groupsListItemFor("disable-enable"))
     .click(elements.switchInput)
     .expect(elements.groupStatusText.innerText)
@@ -132,19 +123,3 @@ test.before(async (t) => {
     .expect(elements.groupStatusText.innerText)
     .eql("Enabled");
 });
-
-test.before(async (t) => {
-  // A user must be created as we need to choose a user from the dropdown
-  await functions.createUser(t);
-  await createGroup(t, "view-delete");
-})("Created Group can be viewed and deleted", async (t) => {
-  await t
-    .navigateTo("http://localhost:9090/identity/groups")
-    .click(groupsListItemFor("view-delete"))
-    .click(elements.editMembersButton)
-    .typeText(elements.filterUserInput, constants.TEST_USER_NAME)
-    .click(elements.groupUserCheckbox)
-    .click(elements.saveButton)
-    .click(elements.deleteGroupIconButton)
-    .click(elements.deleteButton);
-});

portal-ui/tests/permissions-1/users.ts

@@ -19,6 +19,7 @@ import * as elements from "../utils/elements";
 import * as constants from "../utils/constants";
 import { Selector } from "testcafe";
 import { identityElement, usersElement } from "../utils/elements-menu";
+import { IAM_PAGES } from "../../src/common/SecureComponent/permissions";
 
 const userListItem = Selector(".ReactVirtualized__Table__rowColumn").withText(
   constants.TEST_USER_NAME
@@ -44,43 +45,27 @@ test("Users sidebar item exists", async (t) => {
     .expect(usersExist)
     .ok();
 });
-
+const appBaseUrl = "http://localhost:9090";
+let usersPageUrl = `${appBaseUrl}${IAM_PAGES.USERS}`;
+let usersAddPageUrl = `${appBaseUrl}${IAM_PAGES.USER_ADD}`;
 test("Create User button exists", async (t) => {
   const createUserButtonExists = elements.createUserButton.exists;
-  await t
-    .navigateTo("http://localhost:9090/identity/users")
-    .expect(createUserButtonExists)
-    .ok();
+  await t.navigateTo(usersPageUrl).expect(createUserButtonExists).ok();
 });
 
 test("Create User button is clickable", async (t) => {
-  await t
-    .navigateTo("http://localhost:9090/identity/users")
-    .click(elements.createUserButton);
+  await t.navigateTo(usersPageUrl).click(elements.createUserButton);
 });
 
-test("Access Key input exists in the Create User modal", async (t) => {
+test("Create User Page to create a user", async (t) => {
   const accessKeyInputExists = elements.usersAccessKeyInput.exists;
-  await t
-    .navigateTo("http://localhost:9090/identity/users")
-    .click(elements.createUserButton)
-    .expect(accessKeyInputExists)
-    .ok();
-});
-
-test("Secret Key input exists in the Create User modal", async (t) => {
   const secretKeyInputExists = elements.usersSecretKeyInput.exists;
   await t
-    .navigateTo("http://localhost:9090/identity/users")
-    .click(elements.createUserButton)
+    .navigateTo(usersAddPageUrl)
+    .expect(accessKeyInputExists)
+    .ok()
     .expect(secretKeyInputExists)
-    .ok();
-});
-
-test("Create User modal can be submitted after inputs are entered", async (t) => {
-  await t
-    .navigateTo("http://localhost:9090/identity/users")
-    .click(elements.createUserButton)
+    .ok()
     .typeText(elements.usersAccessKeyInput, constants.TEST_USER_NAME)
     .typeText(elements.usersSecretKeyInput, constants.TEST_PASSWORD)
     .click(elements.saveButton);
@@ -88,16 +73,13 @@ test("Create User modal can be submitted after inputs are entered", async (t) =>
 
 test("Users table exists", async (t) => {
   const usersTableExists = elements.table.exists;
-  await t
-    .navigateTo("http://localhost:9090/identity/users")
-    .expect(usersTableExists)
-    .ok();
+  await t.navigateTo(usersPageUrl).expect(usersTableExists).ok();
 });
 
 test("Created User can be viewed and deleted", async (t) => {
   const userListItemExists = userListItem.exists;
   await t
-    .navigateTo("http://localhost:9090/identity/users")
+    .navigateTo(usersPageUrl)
     .typeText(elements.searchResourceInput, constants.TEST_USER_NAME)
     .expect(userListItemExists)
     .ok()

portal-ui/tests/utils/elements.ts

@@ -16,7 +16,7 @@
 
 import * as constants from "./constants";
 import { Selector } from "testcafe";
-
+import { IAM_PAGES } from "../../src/common/SecureComponent/permissions";
 //----------------------------------------------------
 // Buttons
 //----------------------------------------------------

portal-ui/tests/utils/functions.ts

@@ -18,7 +18,6 @@ import * as roles from "./roles";
 import * as elements from "./elements";
 import * as constants from "./constants";
 import { Selector } from "testcafe";
-import { logoutItem } from "./elements-menu";
 
 import * as Minio from "minio";
 
@@ -157,8 +156,7 @@ export const cleanUpBucketAndUploads = (t, modifier) => {
 export const createUser = (t) => {
   return t
     .useRole(roles.admin)
-    .navigateTo("http://localhost:9090/identity/users")
-    .click(elements.createUserButton)
+    .navigateTo(`http://localhost:9090/identity/users/add-user`)
     .typeText(elements.usersAccessKeyInput, constants.TEST_USER_NAME)
     .typeText(elements.usersSecretKeyInput, constants.TEST_PASSWORD)
     .click(elements.saveButton);