Merge pull request #1268 from andypols/fix-broken-user-links

fix: broken user links

Author: jescalada

src/routes.tsx

@@ -28,7 +28,7 @@ import RepoList from './ui/views/RepoList/RepoList';
 import SettingsView from './ui/views/Settings/Settings';
 
 import { RepoIcon } from '@primer/octicons-react';
-import { Group, AccountCircle, Dashboard, Settings } from '@material-ui/icons';
+import { AccountCircle, Dashboard, Group, Settings } from '@material-ui/icons';
 
 import { Route } from './types/models';
 
@@ -90,12 +90,10 @@ const dashboardRoutes: Route[] = [
     visible: true,
   },
   {
-    path: '/admin/user/:id',
+    path: '/user/:id',
     name: 'User',
     icon: Person,
-    component: (props) => (
-      <RouteGuard component={User} fullRoutePath={`/dashboard/admin/user/:id`} />
-    ),
+    component: (props) => <RouteGuard component={User} fullRoutePath={`/dashboard/user/:id`} />,
     layout: '/dashboard',
     visible: false,
   },

src/ui/components/UserLink/UserLink.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+interface UserLinkProps {
+  username: string;
+  children?: React.ReactNode;
+}
+
+const UserLink: React.FC<UserLinkProps> = ({ username, children }) => {
+  return <Link to={`/dashboard/user/${username}`}>{children || username}</Link>;
+};
+
+export default UserLink;

src/ui/views/PushDetails/PushDetails.tsx

@@ -25,6 +25,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import { PushData } from '../../../types/models';
 import { trimPrefixRefsHeads, trimTrailingDotGit } from '../../../db/helper';
 import { generateEmailLink, getGitProvider } from '../../utils';
+import UserLink from '../../components/UserLink/UserLink';
 
 const Dashboard: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -198,25 +199,21 @@ const Dashboard: React.FC = () => {
                   ) : (
                     <>
                       {isGitHub && (
-                        <a href={`/dashboard/user/${data.attestation.reviewer.username}`}>
+                        <UserLink username={data.attestation.reviewer.username}>
                           <img
                             style={{ width: '45px', borderRadius: '20px' }}
                             src={`https://github.com/${data.attestation.reviewer.gitAccount}.png`}
                           />
-                        </a>
+                        </UserLink>
                       )}
                       <div>
                         <p>
                           {isGitHub && (
-                            <a href={`/dashboard/user/${data.attestation.reviewer.username}`}>
+                            <UserLink username={data.attestation.reviewer.username}>
                               {data.attestation.reviewer.gitAccount}
-                            </a>
+                            </UserLink>
                           )}
-                          {!isGitHub && (
-                            <a href={`/dashboard/user/${data.attestation.reviewer.username}`}>
-                              {data.attestation.reviewer.username}
-                            </a>
-                          )}{' '}
+                          {!isGitHub && <UserLink username={data.attestation.reviewer.username} />}{' '}
                           approved this contribution
                         </p>
                       </div>

src/ui/views/PushDetails/components/AttestationView.tsx

@@ -12,6 +12,7 @@ import { withStyles } from '@material-ui/core/styles';
 import { green } from '@material-ui/core/colors';
 import { setURLShortenerData } from '../../../services/config';
 import { AttestationViewProps } from '../attestation.types';
+import UserLink from '../../../components/UserLink/UserLink';
 
 const StyledFormControlLabel = withStyles({
   root: {
@@ -70,17 +71,15 @@ const AttestationView: React.FC<AttestationViewProps> = ({ attestation, setAttes
         <p style={{ fontSize: '15px', paddingLeft: '34px' }}>
           Prior to making this code contribution publicly accessible via GitHub, this code
           contribution was reviewed and approved by{' '}
-          <a href={`/dashboard/admin/user/${data.reviewer.username}`}>{data.reviewer.gitAccount}</a>
-          . As a reviewer, it was their responsibility to confirm that open sourcing this
-          contribution followed the requirements of the company open source contribution policy.
+          <UserLink username={data.reviewer.username}>{data.reviewer.gitAccount}</UserLink>. As a
+          reviewer, it was their responsibility to confirm that open sourcing this contribution
+          followed the requirements of the company open source contribution policy.
         </p>
       </span>
       <DialogContent>
         <p>
           <span>
-            <a href={`/dashboard/admin/user/${data.reviewer.username}`}>
-              {data.reviewer.gitAccount}
-            </a>{' '}
+            <UserLink username={data.reviewer.username}>{data.reviewer.gitAccount}</UserLink>{' '}
             approved this contribution{' '}
             <Tooltip title={moment(data.timestamp).format('dddd, MMMM Do YYYY, h:mm:ss a')} arrow>
               <kbd

src/ui/views/RepoDetails/RepoDetails.tsx

@@ -23,6 +23,7 @@ import CodeActionButton from '../../components/CustomButtons/CodeActionButton';
 import { trimTrailingDotGit } from '../../../db/helper';
 import { fetchRemoteRepositoryData } from '../../utils';
 import { SCMRepositoryMetadata } from '../../../types/models';
+import UserLink from '../../components/UserLink/UserLink';
 import DeleteRepoDialog from './Components/DeleteRepoDialog';
 
 interface RepoData {
@@ -202,7 +203,7 @@ const RepoDetails: React.FC = () => {
                       {data.users.canAuthorise.map((row) => (
                         <TableRow key={row}>
                           <TableCell align='left'>
-                            <a href={`/dashboard/user/${row}`}>{row}</a>
+                            <UserLink username={row} />
                           </TableCell>
                           {user.admin && (
                             <TableCell align='right' component='th' scope='row'>
@@ -245,7 +246,7 @@ const RepoDetails: React.FC = () => {
                       {data.users.canPush.map((row) => (
                         <TableRow key={row}>
                           <TableCell align='left'>
-                            <a href={`/dashboard/user/${row}`}>{row}</a>
+                            <UserLink username={row} />
                           </TableCell>
                           {user.admin && (
                             <TableCell align='right' component='th' scope='row'>

src/ui/views/UserList/Components/UserList.tsx

@@ -32,8 +32,7 @@ const UserList: React.FC = () => {
   const itemsPerPage = 5;
   const [searchQuery, setSearchQuery] = useState<string>('');
 
-  const openUser = (username: string) =>
-    navigate(`/dashboard/admin/user/${username}`, { replace: true });
+  const openUser = (username: string) => navigate(`/dashboard/user/${username}`, { replace: true });
 
   useEffect(() => {
     getUsers(setIsLoading, setData, setAuth, setErrorMessage);