Add hrefOnly option to useLinkProps

elastic · Apr 23, 2020 · 7942328 · 7942328
1 parent f717a51
commit 7942328
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/x-pack/plugins/infra/public/components/alerting/logs/alert_dropdown.tsx b/x-pack/plugins/infra/public/components/alerting/logs/alert_dropdown.tsx
@@ -13,10 +13,15 @@ import { useLinkProps } from '../../../hooks/use_link_props';
 export const AlertDropdown = () => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [flyoutVisible, setFlyoutVisible] = useState(false);
-  const manageAlertsLinkProps = useLinkProps({
-    app: 'kibana',
-    hash: 'management/kibana/triggersActions/alerts',
-  });
+  const manageAlertsLinkProps = useLinkProps(
+    {
+      app: 'kibana',
+      hash: 'management/kibana/triggersActions/alerts',
+    },
+    {
+      hrefOnly: true,
+    }
+  );
 
   const closePopover = useCallback(() => {
     setPopoverOpen(false);

diff --git a/x-pack/plugins/infra/public/hooks/use_link_props.tsx b/x-pack/plugins/infra/public/hooks/use_link_props.tsx
@@ -26,12 +26,20 @@ interface LinkProps {
   onClick?: (e: React.MouseEvent | React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
 }
 
-export const useLinkProps = ({ app, pathname, hash, search }: LinkDescriptor): LinkProps => {
+interface Options {
+  hrefOnly?: boolean;
+}
+
+export const useLinkProps = (
+  { app, pathname, hash, search }: LinkDescriptor,
+  options: Options = {}
+): LinkProps => {
   validateParams({ app, pathname, hash, search });
 
   const { prompt } = useNavigationWarningPrompt();
   const prefixer = usePrefixPathWithBasepath();
   const navigateToApp = useKibana().services.application?.navigateToApp;
+  const { hrefOnly } = options;
 
   const encodedSearch = useMemo(() => {
     return search ? encodeSearch(search) : undefined;
@@ -86,7 +94,10 @@ export const useLinkProps = ({ app, pathname, hash, search }: LinkDescriptor): L
 
   return {
     href,
-    onClick,
+    // Sometimes it may not be desirable to have onClick call "navigateToApp".
+    // E.g. the management section of Kibana cannot be successfully deeplinked to via
+    // "navigateToApp". In those cases we can choose to defer to legacy behaviour.
+    onClick: hrefOnly ? undefined : onClick,
   };
 };