Added icon for external link (#507)

* Added icon for external link

* added externallink to need help options

catalog-rest-service/src/main/resources/ui/src/assets/svg/external-link.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1792" fill="#5523E0"><path d="M1408 928v320q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h704q14 0 23 9t9 23v64q0 14-9 23t-23 9h-704q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-320q0-14 9-23t23-9h64q14 0 23 9t9 23zm384-864v512q0 26-19 45t-45 19-45-19l-176-176-652 652q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l652-652-176-176q-19-19-19-45t19-45 45-19h512q26 0 45 19t19 45z"/></svg>

catalog-rest-service/src/main/resources/ui/src/components/app-bar/Appbar.tsx

@@ -106,7 +106,7 @@ const Appbar: React.FC = (): JSX.Element => {
       ),
     },
     {
-      name: `Slack Channel`,
+      name: `Slack`,
       to: 'https://openmetadata.slack.com/join/shared_invite/zt-udl8ris3-Egq~YtJU_yJgJTtROo00dQ#/shared-invite/email',
       disabled: false,
       isOpenNewTab: true,
@@ -252,8 +252,8 @@ const Appbar: React.FC = (): JSX.Element => {
                       <IconDefaultUserProfile
                         className=""
                         style={{
-                          height: '24px',
+                          height: '22px',
-                          width: '24px',
+                          width: '22px',
                           borderRadius: '50%',
                         }}
                       />

catalog-rest-service/src/main/resources/ui/src/components/dropdown/AnchorDropDownList.tsx

@@ -18,6 +18,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { Link } from 'react-router-dom';
+import SVGIcons from '../../utils/SvgUtils';
 import { DropDownListItem, DropDownListProp } from './types';
 
 const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => {
@@ -54,9 +55,37 @@ const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => {
                   setIsOpen && setIsOpen(false);
                 }}>
                 {item.icon ? (
-                  <button className="tw-text-grey-body">{item.name}</button>
+                  <button className="tw-text-grey-body">
+                    {item.isOpenNewTab ? (
+                      <span className="tw-flex">
+                        <span className="tw-mr-1">{item.name}</span>
+                        <SVGIcons
+                          alt="external-link"
+                          className="tw-align-middle"
+                          icon="external-link"
+                          width="12px"
+                        />
+                      </span>
                     ) : (
                       item.name
+                    )}{' '}
+                  </button>
+                ) : (
+                  <>
+                    {item.isOpenNewTab ? (
+                      <span className="tw-flex">
+                        <span className="tw-mr-1">{item.name}</span>
+                        <SVGIcons
+                          alt="external-link"
+                          className="tw-align-middle"
+                          icon="external-link"
+                          width="12px"
+                        />
+                      </span>
+                    ) : (
+                      item.name
+                    )}
+                  </>
                 )}
               </Link>
             </div>

catalog-rest-service/src/main/resources/ui/src/pages/dashboard-details/index.tsx

@@ -1,7 +1,6 @@
 import { AxiosPromise, AxiosResponse } from 'axios';
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
-import { isNil } from 'lodash';
 import { ColumnTags, TableDetail, User } from 'Models';
 import React, { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
@@ -42,7 +41,6 @@ import {
   getOwnerFromId,
   getTagsWithoutTier,
   getTierFromTableTags,
-  getUsagePercentile,
 } from '../../utils/TableUtils';
 import { getTagCategories, getTaglist } from '../../utils/TagsUtils';
 type ChartType = {
@@ -70,8 +68,8 @@ const MyDashBoardPage = () => {
   const [activeTab, setActiveTab] = useState<number>(1);
   const [isEdit, setIsEdit] = useState<boolean>(false);
   const [charts, setCharts] = useState<ChartType[]>([]);
-  const [usage, setUsage] = useState('');
+  // const [usage, setUsage] = useState('');
-  const [weeklyUsageCount, setWeeklyUsageCount] = useState('');
+  // const [weeklyUsageCount, setWeeklyUsageCount] = useState('');
   const [slashedDashboardName, setSlashedDashboardName] = useState<
     TitleBreadcrumbProps['titleLinks']
   >([]);
@@ -119,8 +117,8 @@ const MyDashBoardPage = () => {
   const extraInfo = [
     { key: 'Owner', value: owner?.name || '' },
     { key: 'Tier', value: tier ? tier.split('.')[1] : '' },
-    { key: 'Usage', value: usage },
+    // { key: 'Usage', value: usage },
-    { key: 'Queries', value: `${weeklyUsageCount} past week` },
+    // { key: 'Queries', value: `${weeklyUsageCount} past week` },
   ];
   const fetchTags = () => {
     getTagCategories().then((res) => {
@@ -180,7 +178,7 @@ const MyDashBoardPage = () => {
         owner,
         displayName,
         charts,
-        usageSummary,
+        // usageSummary,
       } = res.data;
       setDashboardDetails(res.data);
       setDashboardId(id);
@@ -221,17 +219,17 @@ const MyDashBoardPage = () => {
         }
       );
       fetchCharts(charts).then((charts) => setCharts(charts));
-      if (!isNil(usageSummary?.weeklyStats.percentileRank)) {
+      // if (!isNil(usageSummary?.weeklyStats.percentileRank)) {
-        const percentile = getUsagePercentile(
+      //   const percentile = getUsagePercentile(
-          usageSummary.weeklyStats.percentileRank
+      //     usageSummary.weeklyStats.percentileRank
-        );
+      //   );
-        setUsage(percentile);
+      //   setUsage(percentile);
-      } else {
+      // } else {
-        setUsage('--');
+      //   setUsage('--');
-      }
+      // }
-      setWeeklyUsageCount(
+      // setWeeklyUsageCount(
-        usageSummary?.weeklyStats.count.toLocaleString() || '--'
+      //   usageSummary?.weeklyStats.count.toLocaleString() || '--'
-      );
+      // );
 
       setLoading(false);
     });
@@ -480,7 +478,17 @@ const MyDashBoardPage = () => {
                               <Link
                                 target="_blank"
                                 to={{ pathname: chart.chartUrl }}>
+                                <span className="tw-flex">
+                                  <span className="tw-mr-1">
                                     {chart.displayName}
+                                  </span>
+                                  <SVGIcons
+                                    alt="external-link"
+                                    className="tw-align-middle"
+                                    icon="external-link"
+                                    width="12px"
+                                  />
+                                </span>
                               </Link>
                             </td>
                             <td className="tableBody-cell">

catalog-rest-service/src/main/resources/ui/src/pages/service/index.tsx

@@ -235,7 +235,17 @@ const ServicePage: FunctionComponent = () => {
                     href={serviceDetails.schemaRegistry}
                     rel="noopener noreferrer"
                     target="_blank">
+                    <>
+                      <span className="tw-mr-1">
                         {serviceDetails.schemaRegistry}
+                      </span>
+                      <SVGIcons
+                        alt="external-link"
+                        className="tw-align-middle"
+                        icon="external-link"
+                        width="12px"
+                      />
+                    </>
                   </a>
                 ) : (
                   '--'
@@ -270,7 +280,17 @@ const ServicePage: FunctionComponent = () => {
                           href={serviceDetails.dashboardUrl}
                           rel="noopener noreferrer"
                           target="_blank">
+                          <>
+                            <span className="tw-mr-1">
                               {serviceDetails.dashboardUrl}
+                            </span>
+                            <SVGIcons
+                              alt="external-link"
+                              className="tw-align-middle"
+                              icon="external-link"
+                              width="12px"
+                            />
+                          </>
                         </a>
                       ) : (
                         '--'
@@ -296,7 +316,17 @@ const ServicePage: FunctionComponent = () => {
                       href={serviceDetails.dashboardUrl}
                       rel="noopener noreferrer"
                       target="_blank">
+                      <>
+                        <span className="tw-mr-1">
                           {serviceDetails.dashboardUrl}
+                        </span>
+                        <SVGIcons
+                          alt="external-link"
+                          className="tw-align-middle"
+                          icon="external-link"
+                          width="12px"
+                        />
+                      </>
                     </a>
                   ) : (
                     '--'

catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx

@@ -12,6 +12,7 @@ import IconDashboard from '../assets/svg/dashboard.svg';
 import IconAsstest from '../assets/svg/data-assets.svg';
 import IconDoc from '../assets/svg/doc.svg';
 import IconError from '../assets/svg/error.svg';
+import IconExternalLink from '../assets/svg/external-link.svg';
 import IconCheckCircle from '../assets/svg/ic-check-circle.svg';
 import IconDelete from '../assets/svg/ic-delete.svg';
 import IconDownArrow from '../assets/svg/ic-down-arrow.svg';
@@ -132,6 +133,7 @@ export const Icons = {
   DASHBOARD_GREY: 'dashboard-grey',
   CONFIG: 'icon-config',
   SLACK: 'slack',
+  EXTERNAL_LINK: 'external-link',
 };
 
 const SVGIcons: FunctionComponent<Props> = ({
@@ -393,6 +395,10 @@ const SVGIcons: FunctionComponent<Props> = ({
     case Icons.SLACK:
       IconComponent = IconSlack;
 
+      break;
+    case Icons.EXTERNAL_LINK:
+      IconComponent = IconExternalLink;
+
       break;
 
     default: