From 10c2b464b1ad5024ae883fe79edb4784cc290392 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Wed, 9 Mar 2022 16:11:08 +0800
Subject: [PATCH] refactor(console): support `to` in `<ItemPreview>` (#345)

---
 .../components/ItemPreview/index.module.scss    |  1 +
 .../src/components/ItemPreview/index.tsx        | 17 +++++++++++++++--
 .../console/src/pages/Applications/index.tsx    |  1 +
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/console/src/components/ItemPreview/index.module.scss b/packages/console/src/components/ItemPreview/index.module.scss
index 05a753f9b..5fda44c9c 100644
--- a/packages/console/src/components/ItemPreview/index.module.scss
+++ b/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 {
diff --git a/packages/console/src/components/ItemPreview/index.tsx b/packages/console/src/components/ItemPreview/index.tsx
index 096ec9b72..74d41786c 100644
--- a/packages/console/src/components/ItemPreview/index.tsx
+++ b/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>
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index 9c669efe8..95138abd3 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/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>