Encode URI for user/group name

alexjennings · alexjennings · commit ba5c3f8857f4 · 2025-08-26T11:51:19.000-07:00
diff --git a/src/components/group/GroupRow.jsx b/src/components/group/GroupRow.jsx
@@ -2,17 +2,17 @@ import IconButton from '@material-ui/core/IconButton';
 import Check from '@material-ui/icons/Check';
 import DeleteForever from '@material-ui/icons/DeleteForever';
 
+import routes from '../../const/routes';
 import TableCell from '../ui/TableCell';
 import TableRow from '../ui/TableRow';
 import UnstyledLink from '../ui/UnstyledLink';
 
 export default function GroupRow({ groupDocument = {}, onRemove }) {
+  const to = routes.group({ groupName: groupDocument.groupName });
   return (
-    <TableRow to={`/group/${groupDocument.groupName}/`} hover>
+    <TableRow to={to} hover>
       <TableCell>
-        <UnstyledLink to={`/group/${groupDocument.groupName}/`}>
-          {groupDocument.groupName}
-        </UnstyledLink>
+        <UnstyledLink to={to}>{groupDocument.groupName}</UnstyledLink>
       </TableCell>
       <TableCell>{groupDocument.role && <Check />}</TableCell>
       <TableCell disableOnClick>
diff --git a/src/components/group/GroupTitle.jsx b/src/components/group/GroupTitle.jsx
@@ -13,7 +13,7 @@ export default function GroupTitle({
   return (
     <TitleHeader
       helpTo="/ref/group.html"
-      title={groupName}
+      title={decodeURI(groupName)}
       parentTitle="Group"
       parentTo="/group/"
       {...props}
diff --git a/src/components/importaccess/ImportAccessRow.jsx b/src/components/importaccess/ImportAccessRow.jsx
@@ -2,14 +2,15 @@ import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import Typography from '@material-ui/core/Typography';
 
+import routes from '../../const/routes';
 import Menu, { MenuItem } from '../ui/Menu';
 import UnstyledLink from '../ui/UnstyledLink';
 
 export default function ImportAccessRow({ group, openRemove, openEdit }) {
   return (
     <TableRow hover>
       <TableCell>
-        <UnstyledLink to={`/group/${group.name}`}>{group.name}</UnstyledLink>
+        <UnstyledLink to={routes.group({ groupName: group.name })}>{group.name}</UnstyledLink>
       </TableCell>
       <TableCell>{group.permission}</TableCell>
       <TableCell numeric onClick={(e) => e.stopPropagation()}>
diff --git a/src/components/importaccess/ImportAccessTitle.jsx b/src/components/importaccess/ImportAccessTitle.jsx
@@ -1,3 +1,4 @@
+import routes from '../../const/routes';
 import TitleHeader from '../ui/TitleHeader';
 
 export default function ImportAccessTitle({ openCode, openCreate, onRefresh, userName }) {
@@ -6,8 +7,8 @@ export default function ImportAccessTitle({ openCode, openCreate, onRefresh, use
       title="Import Access"
       grandParentTitle="User"
       grandParentTo="/user/"
-      parentTitle={userName}
-      parentTo={`/user/${userName}/`}
+      parentTitle={decodeURI(userName)}
+      parentTo={routes.user({ userName })}
       onRefresh={onRefresh}
       openCode={openCode}
       openAction={openCreate}
diff --git a/src/components/ui/NavSelect.jsx b/src/components/ui/NavSelect.jsx
@@ -37,13 +37,13 @@ const goToOptions = [
     siteId: true,
   },
   {
-    value: (entityId) => `/user/${entityId}`,
+    value: (entityId) => routes.user({ userName: entityId }),
     label: 'User',
     synonyms: ['user'],
     siteId: false,
   },
   {
-    value: (entityId) => `/group/${entityId}`,
+    value: (entityId) => routes.group({ groupName: entityId }),
     label: 'Group',
     synonyms: ['group'],
     siteId: false,
diff --git a/src/components/ui/TextGridValue.jsx b/src/components/ui/TextGridValue.jsx
@@ -8,6 +8,7 @@ import Typography from '@material-ui/core/Typography';
 import clsx from 'clsx';
 import moment from 'moment';
 
+import routes from '../../const/routes';
 import { capitalizeString, bytesToSize, fromNow } from '../../utils';
 import { bitRateToSize, freqToSize } from '../../utils/bitsToSize';
 
@@ -242,14 +243,14 @@ const TextGridValue = forwardRef(
       case 'username':
         valueComponent = (
           <StyledTypography {...props} ref={ref} className={className}>
-            <UnstyledLink to={`/user/${value}/`}>{value}</UnstyledLink>
+            <UnstyledLink to={routes.user({ userName: value })}>{value}</UnstyledLink>
           </StyledTypography>
         );
         break;
       case 'group':
         valueComponent = (
           <StyledTypography {...props} ref={ref} className={className}>
-            <UnstyledLink to={`/group/${value}/`}>{value}</UnstyledLink>
+            <UnstyledLink to={routes.group({ groupName: value })}>{value}</UnstyledLink>
           </StyledTypography>
         );
         break;
diff --git a/src/components/user/UserRow.jsx b/src/components/user/UserRow.jsx
@@ -2,12 +2,14 @@ import IconButton from '@material-ui/core/IconButton';
 import Check from '@material-ui/icons/Check';
 import DeleteForever from '@material-ui/icons/DeleteForever';
 
+import routes from '../../const/routes';
 import TableCell from '../ui/TableCell';
 import TableRow from '../ui/TableRowLink';
 
 export default function UserRow({ userDocument = {}, onRemove }) {
+  const to = routes.user({ userName: userDocument.userName });
   return (
-    <TableRow to={`/user/${userDocument.userName}/`} hover>
+    <TableRow to={to} hover>
       <TableCell>{userDocument.userName}</TableCell>
       <TableCell>{userDocument.realName}</TableCell>
       <TableCell>{userDocument.disabled && <Check />}</TableCell>
diff --git a/src/components/user/UserTitle.jsx b/src/components/user/UserTitle.jsx
@@ -4,6 +4,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
 import VpnKeyIcon from '@material-ui/icons/VpnKey';
 
+import routes from '../../const/routes';
 import withModal from '../../hoc/withModal';
 import Menu, { MenuItem } from '../ui/Menu';
 import { OfflineIcon } from '../ui/StatusIcon';
@@ -37,13 +38,13 @@ function UserTitle({
   return (
     <TitleHeader
       helpTo="/ref/user.html"
-      title={userName}
+      title={decodeURI(userName)}
       parentTitle="User"
       parentTo="/user/"
       iconList={
         <>
           <Tooltip title="Access Keys">
-            <IconButton onClick={() => history.push(`/user/${userName}/key`)}>
+            <IconButton onClick={() => history.push(routes.userAccessKey({ userName }))}>
               <VpnKeyIcon />
             </IconButton>
           </Tooltip>
diff --git a/src/const/routes.js b/src/const/routes.js
@@ -27,4 +27,15 @@ export default {
   secret: (params) => generatePath('/secret/:alias', params),
   shapeTagList: (params) => generatePath('/shape-tag/', params),
   shapeTag: (params) => generatePath('/shape-tag/:tagName', params),
+  user: (params) =>
+    generatePath('/user/:userName/', { ...params, userName: encodeURI(params.userName) }),
+  userAccessKey: (params) =>
+    generatePath('/user/:userName/key', { ...params, userName: encodeURI(params.userName) }),
+  importAccessUser: (params) =>
+    generatePath('/import/access/:userName', {
+      ...params,
+      userName: encodeURI(params.userName),
+    }),
+  group: (params) =>
+    generatePath('/group/:groupName/', { ...params, groupName: encodeURI(params.groupName) }),
 };
diff --git a/src/containers/GroupList.jsx b/src/containers/GroupList.jsx
@@ -6,6 +6,7 @@ import GroupListCard from '../components/group/GroupListCard';
 import GroupListParams, { GROUP_LIST_PARAMS_FORM } from '../components/group/GroupListParams';
 import GroupListTitle from '../components/group/GroupListTitle';
 import GroupWizard from '../components/group/GroupWizard';
+import routes from '../const/routes';
 import withFormActions from '../hoc/withFormActions';
 import withUI from '../hoc/withUI';
 
@@ -92,7 +93,7 @@ class GroupList extends PureComponent {
         )}
         <GroupWizard
           dialogName={GROUP_CREATE_MODAL}
-          onSuccess={({ data }) => history.push(`/group/${data.groupName}`)}
+          onSuccess={({ data }) => history.push(routes.group({ groupName: data.groupName }))}
         />
       </>
     );
diff --git a/src/containers/TopAppBar.jsx b/src/containers/TopAppBar.jsx
@@ -22,6 +22,7 @@ import NavSelect from '../components/ui/NavSelect';
 import { useChangeTheme } from '../components/ui/Theme';
 import UnstyledLink from '../components/ui/UnstyledLink';
 import VidispineButton from '../components/ui/VidispineButton';
+import routes from '../const/routes';
 import getCookie from '../utils/getCookie';
 
 const styles = (theme) => ({
@@ -129,14 +130,14 @@ function TopAppBar({ toggleMainMenu, toggleHistory, classes, onLogout, userName,
         </Tooltip>
         <Menu icon={<AccountCircle />} iconProps={{ color: 'inherit' }}>
           <MenuItem disabled>
-            <Typography>{`User: ${userName}`}</Typography>
+            <Typography>{`User: ${decodeURI(userName)}`}</Typography>
           </MenuItem>
-          <UnstyledLink to={`/user/${userName}`}>
+          <UnstyledLink to={routes.user({ userName })}>
             <MenuItem>
               <Typography color="inherit">Profile</Typography>
             </MenuItem>
           </UnstyledLink>
-          <UnstyledLink to={`/import/access/${userName}`}>
+          <UnstyledLink to={routes.importAccessUser({ userName })}>
             <MenuItem>
               <Typography color="inherit">Import Access</Typography>
             </MenuItem>
diff --git a/src/containers/User.jsx b/src/containers/User.jsx
@@ -13,6 +13,7 @@ import UserPassword from '../components/user/UserPassword';
 import UserTitle from '../components/user/UserTitle';
 import UserToken from '../components/user/UserToken';
 import UserUserNameDialog from '../components/user/UserUserNameDialog';
+import routes from '../const/routes';
 import { withRouterProps } from '../hoc/withRouterProps';
 import withTabs from '../hoc/withTabs';
 import withUI from '../hoc/withUI';
@@ -127,7 +128,7 @@ class User extends PureComponent {
   onUserNameSuccess(response, dispatch, props) {
     const { history } = this.props;
     const userName = props?.values?.userDocument?.userName;
-    if (userName) history.push(`/user/${userName}`);
+    if (userName) history.push(routes.user({ userName }));
     else this.onRefresh();
   }
 
diff --git a/src/containers/UserList.jsx b/src/containers/UserList.jsx
@@ -6,6 +6,7 @@ import UserListCard from '../components/user/UserListCard';
 import UserListParams, { USER_LIST_PARAMS_FORM } from '../components/user/UserListParams';
 import UserListTitle from '../components/user/UserListTitle';
 import UserWizard from '../components/user/UserWizard';
+import routes from '../const/routes';
 import withFormActions from '../hoc/withFormActions';
 import withUI from '../hoc/withUI';
 
@@ -91,7 +92,13 @@ class UserList extends PureComponent {
         )}
         <UserWizard
           dialogName={USER_CREATE_MODAL}
-          onSuccess={(response) => history.push(`/user/${response.data.userName}`)}
+          onSuccess={(response) =>
+            history.push(
+              routes.user({
+                userName: response.data.userName,
+              }),
+            )
+          }
         />
       </>
     );
diff --git a/src/containers/user/UserKey.jsx b/src/containers/user/UserKey.jsx
@@ -4,6 +4,7 @@ import { user as api } from '@vidispine/vdt-api';
 
 import UserKeyCard from '../../components/user/UserKeyCard';
 import UserKeyDialog from '../../components/user/UserKeyDialog';
+import routes from '../../const/routes';
 import withUI from '../../hoc/withUI';
 
 const USERKEY_CREATE_MODAL = 'USERKEY_CREATE_MODAL';
@@ -71,7 +72,7 @@ class UserKey extends PureComponent {
             grandParentTitle="User"
             grandParentTo="/user/"
             parentTitle={userName}
-            parentTo={`/user/${userName}`}
+            parentTo={routes.user({ userName })}
             onRefresh={this.onRefresh}
             code={accessKeyListDocument}
             codeModal="AccessKeyListDocument"
