[Feature]: Implement links for elements that have details page #2681 (#2772)

Author: olgenn

frontend/src/pages/Models/Details/index.tsx

@@ -328,7 +328,17 @@ export const ModelDetails: React.FC = () => {
                                 <ColumnLayout columns={4} variant="text-grid">
                                     <div>
                                         <Box variant="awsui-key-label">{t('models.details.run_name')}</Box>
-                                        <div>{modelData.run_name}</div>
+
+                                        <div>
+                                            <NavigateLink
+                                                href={ROUTES.PROJECT.DETAILS.RUNS.DETAILS.FORMAT(
+                                                    modelData.project_name,
+                                                    modelData.run_name ?? 'No run name',
+                                                )}
+                                            >
+                                                {modelData.run_name}
+                                            </NavigateLink>
+                                        </div>
                                     </div>
 
                                     <div>

frontend/src/pages/Runs/Details/RunDetails/index.tsx

@@ -4,14 +4,15 @@ import { useParams } from 'react-router-dom';
 import { get as _get } from 'lodash';
 import { format } from 'date-fns';
 
-import { Box, ColumnLayout, Container, Header, Loader, StatusIndicator } from 'components';
+import { Box, ColumnLayout, Container, Header, Loader, NavigateLink, StatusIndicator } from 'components';
 
 import { DATE_TIME_FORMAT } from 'consts';
 import { getRunError, getRunPriority, getRunStatusMessage, getStatusIconColor, getStatusIconType } from 'libs/run';
 import { useGetRunQuery } from 'services/run';
 
 import { finishedRunStatuses } from 'pages/Runs/constants';
 
+import { ROUTES } from '../../../../routes';
 import {
     getRunListItemBackend,
     getRunListItemInstanceId,
@@ -62,7 +63,12 @@ export const RunDetails = () => {
                 <ColumnLayout columns={4} variant="text-grid">
                     <div>
                         <Box variant="awsui-key-label">{t('projects.run.project')}</Box>
-                        <div>{runData.project_name}</div>
+
+                        <div>
+                            <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(runData.project_name)}>
+                                {runData.project_name}
+                            </NavigateLink>
+                        </div>
                     </div>
 
                     <div>
@@ -75,7 +81,10 @@ export const RunDetails = () => {
 
                     <div>
                         <Box variant="awsui-key-label">{t('projects.run.hub_user_name')}</Box>
-                        <div>{runData.user}</div>
+
+                        <div>
+                            <NavigateLink href={ROUTES.USER.DETAILS.FORMAT(runData.user)}>{runData.user}</NavigateLink>
+                        </div>
                     </div>
 
                     <div>

frontend/src/pages/User/Details/Settings/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { Box, Button, ColumnLayout, Container, Header, Loader, Popover, SpaceBetween, StatusIndicator } from 'components';
+import { Box, Button, ColumnLayout, Container, Header, Link, Loader, Popover, SpaceBetween, StatusIndicator } from 'components';
 import { PermissionGuard } from 'components/PermissionGuard';
 
 import { useAppSelector, useBreadcrumbs, usePermissionGuard } from 'hooks';
@@ -78,7 +78,7 @@ export const Settings: React.FC = () => {
 
                             <div>
                                 <Box variant="awsui-key-label">{t('users.email')}</Box>
-                                <div>{data.email ?? '-'}</div>
+                                <div>{data.email ? <Link href={`mailto:${data.email}`}>{data.email}</Link> : '-'}</div>
                             </div>
 
                             <PermissionGuard allowedGlobalRoles={[GlobalUserRole.ADMIN]}>

frontend/src/pages/User/List/index.tsx

@@ -7,6 +7,7 @@ import {
     Button,
     ConfirmationDialog,
     Header,
+    Link,
     ListEmptyMessage,
     NavigateLink,
     Pagination,
@@ -59,7 +60,7 @@ export const UserList: React.FC = () => {
         {
             id: 'email',
             header: t('users.email'),
-            cell: (item: IUser) => item.email ?? '-',
+            cell: (item: IUser) => (item.email ? <Link href={`mailto:${item.email}`}>{item.email}</Link> : '-'),
         },
         {
             id: 'global_role',