tooltip, icons fix

Author: GurinderRawala

.coderabbit.yaml

@@ -6,7 +6,7 @@
   "version": "11.3.0-pre",
   "repository": "github:grafana/grafana",
   "scripts": {
-    "build": "NODE_ENV=dev nx exec --verbose -- webpack --config scripts/webpack/webpack.prod.js",
+    "build": "NODE_ENV=production nx exec --verbose -- webpack --config scripts/webpack/webpack.prod.js",
     "build:nominify": "yarn run build -- --env noMinify=1",
     "dev": "NODE_ENV=dev nx exec -- webpack --config scripts/webpack/webpack.dev.js",
     "e2e": "./e2e/start-and-run-suite",

package.json

@@ -218,9 +218,9 @@ export const TimeRangeContent = (props: Props) => {
           type="button"
           onClick={onApply}
           style={{
-            width: '100%',
+            width: 193,
             textAlign: 'center',
-            paddingLeft: '55px',
+            paddingLeft: 45,
           }}
         >
           <Trans i18nKey="time-picker.range-content.apply-button">Apply time range</Trans>

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx

@@ -128,6 +128,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     menuWrapper: css({
       zIndex: theme.zIndex.dropdown,
+      marginLeft: -25,
     }),
   };
 };

packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx

@@ -42,6 +42,7 @@ const getIconStyles = (theme: GrafanaTheme2) => {
   };
 };
 
+const cachedIcon = new Map<string, string>();
 export const Icon = React.forwardRef<SVGElement, IconProps>(
   ({ size = 'md', type = 'default', name, className, style, title = '', ...rest }, ref) => {
     const styles = useStyles2(getIconStyles);
@@ -58,7 +59,28 @@ export const Icon = React.forwardRef<SVGElement, IconProps>(
     const svgHgt = svgSize;
     const svgWid = name.startsWith('gf-bar-align') ? 16 : name.startsWith('gf-interp') ? 30 : svgSize;
     const subDir = getIconSubDir(iconName, type);
-    const svgPath = `${iconRoot}${subDir}/${iconName}.svg`;
+    const [svgPath, setSvgPath] = React.useState<string | null | undefined>(null);
+
+    React.useEffect(() => {
+      const iconPath = `${iconRoot}${subDir}/${iconName}.svg`;
+      if (cachedIcon.has(iconPath)) {
+        setSvgPath(cachedIcon.get(iconPath));
+        return;
+      }
+      /**
+       * For microfrontend, all the Grafana routes are behind the proxy, so we need to fetch the icon from the proxy.
+       * When we use fetch request get intercepted and url is changed to the proxy url.
+       */
+      fetch(iconPath).then(async (response) => {
+        if (response.ok) {
+          const icon = await response.text();
+          cachedIcon.set(iconPath, icon);
+          setSvgPath(icon);
+        } else {
+          console.error(`Icon ${iconName} not found`);
+        }
+      });
+    }, [iconName, iconRoot, subDir]);
 
     const composedClassName = cx(
       styles.icon,
@@ -70,23 +92,27 @@ export const Icon = React.forwardRef<SVGElement, IconProps>(
     );
 
     return (
-      <SVG
-        aria-hidden={
-          rest.tabIndex === undefined &&
-          !title &&
-          !rest['aria-label'] &&
-          !rest['aria-labelledby'] &&
-          !rest['aria-describedby']
-        }
-        innerRef={ref}
-        src={svgPath}
-        width={svgWid}
-        height={svgHgt}
-        title={title}
-        className={composedClassName}
-        style={style}
-        {...rest}
-      />
+      <>
+        {svgPath && (
+          <SVG
+            aria-hidden={
+              rest.tabIndex === undefined &&
+              !title &&
+              !rest['aria-label'] &&
+              !rest['aria-labelledby'] &&
+              !rest['aria-describedby']
+            }
+            innerRef={ref}
+            src={svgPath}
+            width={svgWid}
+            height={svgHgt}
+            title={title}
+            className={composedClassName}
+            style={style}
+            {...rest}
+          />
+        )}
+      </>
     );
   }
 );

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -1,15 +1,14 @@
 import { css, cx } from '@emotion/css';
 import { useLayoutEffect, useRef, useReducer, CSSProperties } from 'react';
 import * as React from 'react';
-import { createPortal } from 'react-dom';
 import uPlot from 'uplot';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { DashboardCursorSync } from '@grafana/schema';
 
 import { useStyles2 } from '../../../themes';
 import { RangeSelection1D, RangeSelection2D, OnSelectRangeCallback } from '../../PanelChrome';
-import { getPortalContainer } from '../../Portal/Portal';
+import { getPortalContainer, Portal } from '../../Portal/Portal';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 
 import { CloseButton } from './CloseButton';
@@ -651,18 +650,18 @@ export const TooltipPlugin2 = ({
   }, [isHovering]);
 
   if (plot && isHovering) {
-    return createPortal(
-      <div
-        className={cx(styles.tooltipWrapper, isPinned && styles.pinned)}
-        style={style}
-        aria-live="polite"
-        aria-atomic="true"
-        ref={domRef}
-      >
-        {isPinned && <CloseButton onClick={dismiss} />}
-        {contents}
-      </div>,
-      portalRoot.current
+    return (
+      <Portal>
+        <div
+          className={cx(styles.tooltipWrapper, isPinned && styles.pinned)}
+          aria-live="polite"
+          aria-atomic="true"
+          ref={domRef}
+        >
+          {isPinned && <CloseButton onClick={dismiss} />}
+          {contents}
+        </div>
+      </Portal>
     );
   }