Sidemenu: Refactor SignIn to use SideMenuItem (#38882)

public/app/core/components/sidemenu/BottomSection.test.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { BrowserRouter } from 'react-router-dom';
 import { ShowModalReactEvent } from '../../../types/events';
 import { HelpModal } from '../help/HelpModal';
 import appEvents from '../../app_events';
 import BottomSection from './BottomSection';
 
+jest.mock('./utils', () => ({
+  getForcedLoginUrl: () => '/mockForcedLoginUrl',
+}));
 jest.mock('../../app_events', () => ({
   publish: jest.fn(),
 }));
@@ -44,13 +48,21 @@ jest.mock('app/core/services/context_srv', () => ({
 
 describe('BottomSection', () => {
   it('should render the correct children', () => {
-    render(<BottomSection />);
+    render(
+      <BrowserRouter>
+        <BottomSection />
+      </BrowserRouter>
+    );
 
     expect(screen.getByTestId('bottom-section-items').children.length).toBe(3);
   });
 
   it('creates the correct children for the help link', () => {
-    render(<BottomSection />);
+    render(
+      <BrowserRouter>
+        <BottomSection />
+      </BrowserRouter>
+    );
 
     const documentation = screen.getByRole('link', { name: 'Documentation' });
     const support = screen.getByRole('link', { name: 'Support' });
@@ -63,7 +75,11 @@ describe('BottomSection', () => {
   });
 
   it('clicking the keyboard shortcuts button shows the modal', () => {
-    render(<BottomSection />);
+    render(
+      <BrowserRouter>
+        <BottomSection />
+      </BrowserRouter>
+    );
 
     const keyboardShortcuts = screen.getByText('Keyboard shortcuts');
     expect(keyboardShortcuts).toBeInTheDocument();
@@ -73,7 +89,11 @@ describe('BottomSection', () => {
   });
 
   it('shows the current organization and organization switcher if showOrgSwitcher is true', () => {
-    render(<BottomSection />);
+    render(
+      <BrowserRouter>
+        <BottomSection />
+      </BrowserRouter>
+    );
 
     const currentOrg = screen.getByText(new RegExp('Grafana', 'i'));
     const orgSwitcher = screen.getByText('Switch organization');

public/app/core/components/sidemenu/BottomSection.tsx

@@ -3,7 +3,7 @@ import { cloneDeep } from 'lodash';
 import { NavModelItem } from '@grafana/data';
 import { Icon, IconName } from '@grafana/ui';
 import appEvents from '../../app_events';
-import { SignIn } from './SignIn';
+import { useLocation } from 'react-router-dom';
 import SideMenuItem from './SideMenuItem';
 import { ShowModalReactEvent } from '../../../types/events';
 import { contextSrv } from 'app/core/services/context_srv';
@@ -11,11 +11,14 @@ import { OrgSwitcher } from '../OrgSwitcher';
 import { getFooterLinks } from '../Footer/Footer';
 import { HelpModal } from '../help/HelpModal';
 import config from '../../config';
+import { getForcedLoginUrl } from './utils';
 
 export default function BottomSection() {
   const navTree: NavModelItem[] = cloneDeep(config.bootData.navTree);
   const bottomNav = navTree.filter((item) => item.hideFromMenu);
   const isSignedIn = contextSrv.isSignedIn;
+  const location = useLocation();
+  const forcedLoginUrl = getForcedLoginUrl(location.pathname + location.search);
   const user = contextSrv.user;
   const [showSwitcherModal, setShowSwitcherModal] = useState(false);
 
@@ -37,7 +40,11 @@ export default function BottomSection() {
 
   return (
     <div data-testid="bottom-section-items" className="sidemenu__bottom">
-      {!isSignedIn && <SignIn />}
+      {!isSignedIn && (
+        <SideMenuItem label="Sign In" target="_self" url={forcedLoginUrl}>
+          <Icon name="signout" size="xl" />
+        </SideMenuItem>
+      )}
       {bottomNav.map((link, index) => {
         let menuItems = link.children || [];
 

public/app/core/components/sidemenu/SideMenuDropDown.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import DropDownChild from './DropDownChild';
 import { NavModelItem } from '@grafana/data';
 import { IconName, Link } from '@grafana/ui';
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 
 interface Props {
   headerText: string;
@@ -21,17 +21,13 @@ const SideMenuDropDown = ({
   reverseDirection = false,
   subtitleText,
 }: Props) => {
-  const resetButtonStyles = css`
-    background-color: transparent;
-    font-size: inherit;
-  `;
   const headerContent = <span className="sidemenu-item-text">{headerText}</span>;
   const header = headerUrl ? (
     <Link href={headerUrl} onClick={onHeaderClick} className="side-menu-header-link">
       {headerContent}
     </Link>
   ) : (
-    <button onClick={onHeaderClick} className={cx(resetButtonStyles, 'side-menu-header-link')}>
+    <button onClick={onHeaderClick} className="side-menu-header-link">
       {headerContent}
     </button>
   );

public/app/core/components/sidemenu/SideMenuItem.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import SideMenuDropDown from './SideMenuDropDown';
 import { Link } from '@grafana/ui';
 import { NavModelItem } from '@grafana/data';
-import { css, cx } from '@emotion/css';
+import { cx } from '@emotion/css';
 
 export interface Props {
   children: ReactNode;
@@ -25,10 +25,6 @@ const SideMenuItem = ({
   target,
   url,
 }: Props) => {
-  const resetButtonStyles = css`
-    background-color: transparent;
-  `;
-
   const anchor = url ? (
     <Link
       className="sidemenu-link"
@@ -41,7 +37,7 @@ const SideMenuItem = ({
       <span className="icon-circle sidemenu-icon">{children}</span>
     </Link>
   ) : (
-    <button className={cx(resetButtonStyles, 'sidemenu-link')} onClick={onClick} aria-label={label}>
+    <button className="sidemenu-link" onClick={onClick} aria-label={label}>
       <span className="icon-circle sidemenu-icon">{children}</span>
     </button>
   );

public/app/core/components/sidemenu/SignIn.test.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { SignIn } from './SignIn';
-import { Router } from 'react-router-dom';
-import { locationService } from '@grafana/runtime';
-
-describe('Render', () => {
-  it('should render component', async () => {
-    render(
-      <Router history={locationService.getHistory()}>
-        <SignIn url="/whatever" />
-      </Router>
-    );
-
-    const link = await screen.getByText('Sign In');
-    expect(link).toBeInTheDocument();
-  });
-});

public/app/core/components/sidemenu/SignIn.tsx

@@ -1,26 +0,0 @@
-import React, { FC } from 'react';
-import { Icon } from '@grafana/ui';
-import { useLocation } from 'react-router-dom';
-import { getForcedLoginUrl } from './utils';
-
-export const SignIn: FC<any> = () => {
-  const location = useLocation();
-  const forcedLoginUrl = getForcedLoginUrl(location.pathname + location.search);
-
-  return (
-    <div className="sidemenu-item">
-      <a href={forcedLoginUrl} className="sidemenu-link" target="_self">
-        <span className="icon-circle sidemenu-icon">
-          <Icon name="signout" size="xl" />
-        </span>
-      </a>
-      <a href={forcedLoginUrl} target="_self">
-        <ul className="dropdown-menu dropdown-menu--sidemenu" role="menu">
-          <li className="side-menu-header">
-            <span className="sidemenu-item-text">Sign In</span>
-          </li>
-        </ul>
-      </a>
-    </div>
-  );
-};

public/sass/components/_sidemenu.scss

@@ -85,6 +85,7 @@ $mobile-menu-breakpoint: md;
 }
 
 .sidemenu-link {
+  background-color: transparent;
   color: $side-menu-icon-color !important;
   line-height: 42px;
   padding: 0px 10px 0px 10px;
@@ -132,8 +133,10 @@ $mobile-menu-breakpoint: md;
 }
 
 .side-menu-header-link {
-  color: $side-menu-header-color !important;
+  background-color: transparent;
   border: none !important;
+  color: $side-menu-header-color !important;
+  font-size: inherit;
   padding: 0 !important;
 }