From 3e9d77956dd6df37c9dcde838e24be1eb2768721 Mon Sep 17 00:00:00 2001
From: Alexander Lesnenko <alxnddr@users.noreply.github.com>
Date: Tue, 21 Dec 2021 13:45:57 +0200
Subject: [PATCH] Indicate selected item in the admin nav (#19424)

---
 frontend/src/metabase/components/Link.tsx     |  4 +-
 frontend/src/metabase/css/admin.css           | 37 +------------------
 .../AdminNavbar/AdminNavItem.styled.tsx       | 13 +++++++
 .../components/AdminNavbar/AdminNavItem.tsx   |  9 ++---
 .../components/AdminNavbar/AdminNavbar.tsx    |  1 -
 5 files changed, 20 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.styled.tsx

diff --git a/frontend/src/metabase/components/Link.tsx b/frontend/src/metabase/components/Link.tsx
index dc968bb55c0..7fa9625c114 100644
--- a/frontend/src/metabase/components/Link.tsx
+++ b/frontend/src/metabase/components/Link.tsx
@@ -6,7 +6,7 @@ import { color, display, hover, space } from "styled-system";
 import Tooltip from "metabase/components/Tooltip";
 import { stripLayoutProps } from "metabase/lib/utils";
 
-interface Props extends HTMLProps<HTMLAnchorElement> {
+export interface LinkProps extends HTMLProps<HTMLAnchorElement> {
   to: string;
   disabled?: boolean;
   className?: string;
@@ -24,7 +24,7 @@ function BaseLink({
   disabled,
   tooltip,
   ...props
-}: Props) {
+}: LinkProps) {
   const link = (
     <ReactRouterLink
       to={to}
diff --git a/frontend/src/metabase/css/admin.css b/frontend/src/metabase/css/admin.css
index 27e4977a45f..eaa724c3dc7 100644
--- a/frontend/src/metabase/css/admin.css
+++ b/frontend/src/metabase/css/admin.css
@@ -6,47 +6,12 @@
   --page-header-padding: 2.375rem;
 }
 
-.AdminNav {
-  background: var(--color-admin-navbar);
-  color: var(--color-text-white);
-  font-size: 0.85rem;
-}
-
-.AdminNav .NavItem {
-  color: color-mod(var(--color-text-white) alpha(-37%));
-}
-
-.AdminNav .NavItem:hover,
-.AdminNav .NavItem.is--selected {
-  color: var(--color-text-white);
-}
-
-/* TODO: this feels itchy. should refactor .NavItem.is--selected to be less cascadey */
-.AdminNav .NavItem:hover:after,
-.AdminNav .NavItem.is--selected:after {
-  display: none;
-}
-
-.AdminNav .NavDropdown.open .NavDropdown-button,
-.AdminNav .NavDropdown .NavDropdown-content-layer {
-  background-color: var(--color-bg-dark);
-}
-
-.AdminNav .Dropdown-item:hover {
-  background-color: var(--color-bg-dark);
-}
-
 /* utility to get a simple common hover state for admin items */
-.HoverItem:hover,
-.AdminHoverItem:hover {
+.HoverItem:hover {
   background-color: var(--color-bg-medium);
   transition: background 0.2s linear;
 }
 
-.AdminNav .Dropdown-chevron {
-  color: var(--color-text-white);
-}
-
 .Actions-group {
   margin-bottom: 2em;
 }
diff --git a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.styled.tsx b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.styled.tsx
new file mode 100644
index 00000000000..4188f56f945
--- /dev/null
+++ b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.styled.tsx
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+import Link, { LinkProps } from "metabase/components/Link";
+import { alpha, color } from "metabase/lib/colors";
+
+interface AdminNavLinkProps extends LinkProps {
+  isSelected?: boolean;
+}
+
+export const AdminNavLink = styled<AdminNavLinkProps>(Link)`
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  color: ${props => (props.isSelected ? color("white") : alpha("white", 0.63))};
+`;
diff --git a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.tsx b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.tsx
index 0fa28dc4665..c39bf531123 100644
--- a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.tsx
+++ b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavItem.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import cx from "classnames";
 import Link from "metabase/components/Link";
+import { AdminNavLink } from "./AdminNavItem.styled";
 
 interface AdminNavItem {
   name: string;
@@ -10,14 +11,12 @@ interface AdminNavItem {
 
 export const AdminNavItem = ({ name, path, currentPath }: AdminNavItem) => (
   <li>
-    <Link
+    <AdminNavLink
       to={path}
       data-metabase-event={`NavBar;${name}`}
-      className={cx("NavItem py1 px2 no-decoration", {
-        "is--selected": currentPath.startsWith(path),
-      })}
+      isSelected={currentPath.startsWith(path)}
     >
       {name}
-    </Link>
+    </AdminNavLink>
   </li>
 );
diff --git a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.tsx b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.tsx
index 5603c7ee5cc..9f59a424eca 100644
--- a/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.tsx
+++ b/frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.tsx
@@ -3,7 +3,6 @@ import { t } from "ttag";
 import { PLUGIN_ADMIN_NAV_ITEMS } from "metabase/plugins";
 import MetabaseSettings from "metabase/lib/settings";
 import { AdminNavItem } from "./AdminNavItem";
-import Link from "metabase/components/Link";
 import StoreLink from "../StoreLink";
 import LogoIcon from "metabase/components/LogoIcon";
 import {
-- 
GitLab