From 05ff0aeffd2d0bb57856330584e59e631f9ec2d6 Mon Sep 17 00:00:00 2001
From: Dalton <daltojohnso@users.noreply.github.com>
Date: Wed, 2 Mar 2022 09:30:48 -0800
Subject: [PATCH] Fix Help link for nested site users (#20740)
---
.../metabase/components/EntityMenuItem.jsx | 74 ++++++-------------
.../components/EntityMenuItem.styled.jsx | 48 ++++++++++++
2 files changed, 69 insertions(+), 53 deletions(-)
create mode 100644 frontend/src/metabase/components/EntityMenuItem.styled.jsx
diff --git a/frontend/src/metabase/components/EntityMenuItem.jsx b/frontend/src/metabase/components/EntityMenuItem.jsx
index b7fb65cea69..d6836e11bbf 100644
--- a/frontend/src/metabase/components/EntityMenuItem.jsx
+++ b/frontend/src/metabase/components/EntityMenuItem.jsx
@@ -1,62 +1,30 @@
/* eslint-disable react/prop-types */
import React from "react";
-import styled from "@emotion/styled";
import { Link } from "react-router";
import Icon from "metabase/components/Icon";
+import { Item, StyledExternalLink } from "./EntityMenuItem.styled";
-import { color } from "metabase/lib/colors";
-
-const Item = styled.div`
- display: flex;
- align-items: center;
- cursor: pointer;
- color: ${color("text-medium")};
- padding: 0.85em 1.45em;
- text-decoration: none;
- transition: all 300ms linear;
- :hover {
- color: ${color("brand")};
- }
- > .Icon {
- color: ${color("text-light")};
- margin-right: 0.65em;
- }
- :hover > .Icon {
- color: ${color("brand")};
- transition: all 300ms linear;
- },
- /* icon specific tweaks
- the alert icon should be optically aligned with the x-height of the text */
- > .Icon.Icon-alert {
- transform: translate-y(1px),
- }
- /* the embed icon should be optically aligned with the x-height of the text */
- > .Icon.Icon-embed {
- transform: translate-y(1px);
- }
- /* the download icon should be optically aligned with the x-height of the text */
- > .Icon.Icon-download: {
- transform: translate-y(1px);
- }
- /* the history icon is wider so it needs adjustment to center it with other
- icons */
- "> .Icon.Icon-history": {
- transform: translate-x(-2px);
- },
-`;
-
-const LinkMenuItem = ({ children, link, onClose, event, externalLink }) => (
- <Link
- to={link}
- target={externalLink ? "_blank" : null}
- onClick={onClose}
- data-metabase-event={event}
- style={{ display: "block" }}
- >
- {children}
- </Link>
-);
+const LinkMenuItem = ({ children, link, onClose, event, externalLink }) =>
+ externalLink ? (
+ <StyledExternalLink
+ href={link}
+ target="_blank"
+ onClick={onClose}
+ data-metabase-event={event}
+ >
+ {children}
+ </StyledExternalLink>
+ ) : (
+ <Link
+ to={link}
+ onClick={onClose}
+ data-metabase-event={event}
+ className="block"
+ >
+ {children}
+ </Link>
+ );
const ActionMenuItem = ({ children, action, event }) => (
<div onClick={action} data-metabase-event={event}>
diff --git a/frontend/src/metabase/components/EntityMenuItem.styled.jsx b/frontend/src/metabase/components/EntityMenuItem.styled.jsx
new file mode 100644
index 00000000000..33ca602e79a
--- /dev/null
+++ b/frontend/src/metabase/components/EntityMenuItem.styled.jsx
@@ -0,0 +1,48 @@
+import styled from "@emotion/styled";
+
+import ExternalLink from "metabase/core/components/ExternalLink";
+import { color } from "metabase/lib/colors";
+
+export const Item = styled.div`
+ display: flex;
+align-items: center;
+ cursor: pointer;
+ color: ${color("text-medium")};
+ padding: 0.85em 1.45em;
+ text-decoration: none;
+ transition: all 300ms linear;
+ :hover {
+ color: ${color("brand")};
+ }
+ > .Icon {
+ color: ${color("text-light")};
+ margin-right: 0.65em;
+ }
+ :hover > .Icon {
+ color: ${color("brand")};
+ transition: all 300ms linear;
+ },
+ /* icon specific tweaks
+ the alert icon should be optically aligned with the x-height of the text */
+ > .Icon.Icon-alert {
+ transform: translate-y(1px),
+}
+ /* the embed icon should be optically aligned with the x-height of the text */
+ > .Icon.Icon-embed {
+ transform: translate-y(1px);
+ }
+ /* the download icon should be optically aligned with the x-height of the text */
+ > .Icon.Icon-download: {
+ transform: translate-y(1px);
+ }
+ /* the history icon is wider so it needs adjustment to center it with other
+ icons */
+ "> .Icon.Icon-history": {
+ transform: translate-x(-2px);
+ },
+`;
+
+export const StyledExternalLink = styled(ExternalLink)`
+ text-decoration: none;
+ display: block;
+`;
--
GitLab