refactor(console): support to in <ItemPreview> (#345)

packages/console/src/components/ItemPreview/index.module.scss

@@ -12,6 +12,7 @@
   .title {
     font: var(--font-body);
     color: var(--color-primary);
+    text-decoration: none;
   }
 
   .subtitle {

packages/console/src/components/ItemPreview/index.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react';
+import { Link, To } from 'react-router-dom';
 
 import * as styles from './index.module.scss';
 
@@ -6,14 +7,26 @@ type Props = {
   title: string;
   subtitle?: string;
   icon?: ReactNode;
+  to?: To;
 };
 
-const ItemPreview = ({ title, subtitle, icon }: Props) => {
+const ItemPreview = ({ title, subtitle, icon, to }: Props) => {
   return (
     <div className={styles.item}>
       {icon}
       <div>
-        <div className={styles.title}>{title}</div>
+        {to && (
+          <Link
+            className={styles.title}
+            to={to}
+            onClick={(event) => {
+              event.stopPropagation();
+            }}
+          >
+            {title}
+          </Link>
+        )}
+        {!to && <div className={styles.title}>{title}</div>}
         {subtitle && <div className={styles.subtitle}>{String(subtitle)}</div>}
       </div>
     </div>

packages/console/src/pages/Applications/index.tsx

@@ -84,6 +84,7 @@ const Applications = () => {
                   title={name}
                   subtitle={t(`${applicationTypeI18nKey[type]}.title`)}
                   icon={<ImagePlaceholder />}
+                  to={`/applications/${id}`}
                 />
               </td>
               <td>