feat(web): Add tooltip and size parameter to EmbeddedHealthIcon (#14604)

Author: jayacryl

datahub-web-react/src/app/entityV2/shared/embed/EmbeddedHealthIcon.tsx

@@ -1,23 +1,30 @@
 import { orange } from '@ant-design/colors';
 import { WarningFilled } from '@ant-design/icons';
+import { Tooltip } from '@components';
 import React from 'react';
 import { useParams } from 'react-router';
 import styled from 'styled-components';
 
 import { generateQueryVariables } from '@app/entityV2/shared/embed/UpstreamHealth/utils';
 import { decodeUrn } from '@app/entityV2/shared/utils';
 import { useGetDefaultLineageStartTimeMillis } from '@app/lineage/utils/useGetLineageTimeParams';
+import { getEntityTypeFromEntityUrn } from '@app/lineageV3/utils/lineageUtils';
 import { HAS_ACTIVE_INCIDENTS_FILTER_NAME, HAS_FAILING_ASSERTIONS_FILTER_NAME } from '@app/search/utils/constants';
+import { useUrlQueryParam } from '@app/shared/useUrlQueryParam';
 import { useAppConfig } from '@app/useAppConfig';
+import { useEntityRegistry } from '@app/useEntityRegistry';
 
 import { useSearchAcrossLineageQuery } from '@graphql/search.generated';
 
 // Do not update unless you update the reference to this ID in our Chrome extension code
 const ICON_ID = 'embedded-datahub-health-icon';
 
-const StyledWarning = styled(WarningFilled)`
+// Default size for the warning icon in pixels
+const DEFAULT_ICON_SIZE = 16;
+
+const StyledWarning = styled(WarningFilled)<{ size: number }>`
     color: ${orange[5]};
-    font-size: 16px;
+    font-size: ${({ size }) => size}px;
 `;
 
 interface RouteParams {
@@ -26,8 +33,16 @@ interface RouteParams {
 
 // Used by our Chrome Extension to show a warning health icon if there are unhealthy upstreams
 export default function EmbeddedHealthIcon() {
+    const entityRegistry = useEntityRegistry();
     const { urn: encodedUrn } = useParams<RouteParams>();
+    const { value: showTooltipParam } = useUrlQueryParam('show-tooltip', 'false');
+    const { value: sizeParam } = useUrlQueryParam('size', DEFAULT_ICON_SIZE.toString());
+    const showTooltip = showTooltipParam === 'true';
+    const iconSize = parseInt(sizeParam || DEFAULT_ICON_SIZE.toString(), 10);
     const urn = decodeUrn(encodedUrn);
+    const entityType = getEntityTypeFromEntityUrn(urn, entityRegistry);
+    const [, , entityTypeFallback] = urn.split(':');
+
     const appConfig = useAppConfig();
     const lineageEnabled: boolean = appConfig?.config?.chromeExtensionConfig?.lineageEnabled || false;
     const startTimeMillis = useGetDefaultLineageStartTimeMillis();
@@ -59,7 +74,25 @@ export default function EmbeddedHealthIcon() {
     );
 
     if (incidentsData?.searchAcrossLineage?.total || assertionsData?.searchAcrossLineage?.total) {
-        return <StyledWarning id={ICON_ID} />;
+        const warningIcon = <StyledWarning id={ICON_ID} size={iconSize} />;
+
+        if (showTooltip) {
+            const title =
+                "Some upstream entities are unhealthy, which may impact this entity. Expand the DataHub browser extension's side panel for more details.";
+            return (
+                <Tooltip title={title}>
+                    <a
+                        href={`${window.location.origin}${entityType ? entityRegistry.getEntityUrl(entityType, urn) : `/${entityTypeFallback}/${encodeURIComponent(urn)}`}`}
+                        target="_blank"
+                        rel="noreferrer noopener"
+                    >
+                        {warningIcon}
+                    </a>
+                </Tooltip>
+            );
+        }
+
+        return warningIcon;
     }
 
     return null;

datahub-web-react/src/app/shared/useUrlQueryParam.ts

@@ -0,0 +1,25 @@
+import { useEffect, useMemo } from 'react';
+import { useHistory, useLocation } from 'react-router';
+
+import updateQueryParams from '@app/shared/updateQueryParams';
+
+export const useUrlQueryParam = (paramKey: string, defaultValue?: string) => {
+    const location = useLocation();
+    const history = useHistory();
+
+    const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
+
+    const value = searchParams.get(paramKey) || defaultValue;
+
+    useEffect(() => {
+        if (!searchParams.get(paramKey) && defaultValue) {
+            updateQueryParams({ [paramKey]: defaultValue }, location, history);
+        }
+    }, [paramKey, defaultValue, location, history, searchParams]);
+
+    const setValue = (paramValue: string) => {
+        updateQueryParams({ [paramKey]: paramValue }, location, history);
+    };
+
+    return { value, setValue };
+};