From c6379cd95f683de0051e5a1fef724829b1600ac2 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Tue, 21 Sep 2021 22:47:09 +0530
Subject: [PATCH] Fixed #530 Add dashboard URL on dashboard details page (#555)

---
 .../common/entityPageInfo/EntityPageInfo.tsx  | 21 ++++++++++++++++++-
 .../ui/src/pages/dashboard-details/index.tsx  |  4 ++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx b/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
index bdbd6d4ddb3..3cd0e3f09e5 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
@@ -13,6 +13,7 @@ import { TitleBreadcrumbProps } from '../title-breadcrumb/title-breadcrumb.inter
 type ExtraInfo = {
   key?: string;
   value: string | number;
+  isLink?: boolean;
 };
 
 type Props = {
@@ -108,7 +109,25 @@ const EntityPageInfo = ({
                   {info.key} :
                 </span>{' '}
                 <span className="tw-pl-1 tw-font-normal">
-                  {info.value || '--'}
+                  {info.isLink ? (
+                    <a
+                      className="link-text"
+                      href={info.value as string}
+                      rel="noopener noreferrer"
+                      target="_blank">
+                      <>
+                        <span className="tw-mr-1">{info.value}</span>
+                        <SVGIcons
+                          alt="external-link"
+                          className="tw-align-middle"
+                          icon="external-link"
+                          width="12px"
+                        />
+                      </>
+                    </a>
+                  ) : (
+                    info.value || '--'
+                  )}
                 </span>
                 {extraInfo.length !== 1 && index < extraInfo.length - 1 ? (
                   <span className="tw-mx-3 tw-inline-block tw-text-gray-400">
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx
index c86dff77fe0..0146d867386 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx
@@ -68,6 +68,7 @@ const MyDashBoardPage = () => {
   const [activeTab, setActiveTab] = useState<number>(1);
   const [isEdit, setIsEdit] = useState<boolean>(false);
   const [charts, setCharts] = useState<ChartType[]>([]);
+  const [dashboardUrl, setDashboardUrl] = useState<string>('');
   // const [usage, setUsage] = useState('');
   // const [weeklyUsageCount, setWeeklyUsageCount] = useState('');
   const [slashedDashboardName, setSlashedDashboardName] = useState<
@@ -117,6 +118,7 @@ const MyDashBoardPage = () => {
   const extraInfo = [
     { key: 'Owner', value: owner?.name || '' },
     { key: 'Tier', value: tier ? tier.split('.')[1] : '' },
+    { key: 'Dashboard Url', value: dashboardUrl, isLink: true },
     // { key: 'Usage', value: usage },
     // { key: 'Queries', value: `${weeklyUsageCount} past week` },
   ];
@@ -178,6 +180,7 @@ const MyDashBoardPage = () => {
         owner,
         displayName,
         charts,
+        dashboardUrl,
         // usageSummary,
       } = res.data;
       setDashboardDetails(res.data);
@@ -218,6 +221,7 @@ const MyDashBoardPage = () => {
           });
         }
       );
+      setDashboardUrl(dashboardUrl);
       fetchCharts(charts).then((charts) => setCharts(charts));
       // if (!isNil(usageSummary?.weeklyStats.percentileRank)) {
       //   const percentile = getUsagePercentile(