Add iconGap to TopNavControlButtonData abd TopNavControlLinkData

Signed-off-by: Miki <[email protected]>
opensearch-project · Aug 22, 2024 · 2cf9017 · 2cf9017
1 parent aca559a
commit 2cf9017
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_control_data.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_control_data.tsx
@@ -33,6 +33,7 @@ export type TopNavControlLinkData = TopNavControlButtonOrLinkOrIconData &
       run?: TopNavControlAction;
       iconType?: EuiHeaderLinkProps['iconType'];
       iconSide?: EuiHeaderLinkProps['iconSide'];
+      iconGap?: EuiHeaderLinkProps['iconGap'];
       color?: EuiHeaderLinkProps['color'];
       controlType: 'link';
     },
@@ -48,6 +49,7 @@ export type TopNavControlButtonData = TopNavControlButtonOrLinkOrIconData &
       run?: TopNavControlAction;
       iconType?: EuiButtonProps['iconType'];
       iconSide?: EuiButtonProps['iconSide'];
+      iconGap?: EuiHeaderLinkProps['iconGap'];
       color?: EuiButtonProps['color'];
       fill?: EuiButtonProps['fill'];
       controlType?: 'button';

diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_control_item.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_control_item.tsx
@@ -28,7 +28,14 @@
  * under the License.
  */
 
-import { EuiButton, EuiHeaderLink, EuiButtonIcon, EuiText, EuiToolTip } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiHeaderLink,
+  EuiButtonIcon,
+  EuiText,
+  EuiToolTip,
+  EuiHeaderLinkProps,
+} from '@elastic/eui';
 import { upperFirst } from 'lodash';
 import React, { MouseEvent } from 'react';
 import { TopNavControlData } from './top_nav_control_data';
@@ -103,12 +110,21 @@ export function TopNavControlItem(props: TopNavControlData) {
       break;
 
     case 'link':
+      let { iconType, iconSide } = props;
+      let iconGap: EuiHeaderLinkProps['iconGap'];
+      if (props.target === '_blank') {
+        iconType = 'popout';
+        iconSide = 'right';
+        iconGap = 's';
+      }
+
       component = (
         <EuiHeaderLink
           // @ts-ignore using an undefined property to prevent abuse
           size={props.sizeOverride || 's'}
-          iconType={props.iconType}
-          iconSide={props.iconSide}
+          iconType={iconType}
+          iconSide={iconSide}
+          iconGap={iconGap}
           iconSize={props.iconSize}
           color={props.color}
           className={props.className}