Return settings to top nav (#23509)

frontend/src/metabase/nav/components/AppBar/AppBar.tsx

 import React from "react";
 import useIsSmallScreen from "metabase/hooks/use-is-small-screen";
-import { CollectionId } from "metabase-types/api";
+import { CollectionId, User } from "metabase-types/api";
 import AppBarSmall from "./AppBarSmall";
 import AppBarLarge from "./AppBarLarge";
 import { AppBarRoot } from "./AppBar.styled";
 
 export interface AppBarProps {
+  currentUser: User;
   collectionId?: CollectionId;
   isNavBarOpen?: boolean;
   isNavBarVisible?: boolean;
   isSearchVisible?: boolean;
   isNewButtonVisible?: boolean;
+  isProfileLinkVisible?: boolean;
   isCollectionPathVisible?: boolean;
   isQuestionLineageVisible?: boolean;
   onToggleNavbar: () => void;
   onCloseNavbar: () => void;
+  onLogout: () => void;
 }
 
 const AppBar = (props: AppBarProps): JSX.Element => {

frontend/src/metabase/nav/components/AppBar/AppBarLarge.styled.tsx

@@ -48,11 +48,11 @@ export const AppBarRightContainer = styled.div`
   max-width: 32.5rem;
 `;
 
-export interface InfoBarContainerProps {
+export interface AppBarInfoContainerProps {
   isNavBarOpen?: boolean;
 }
 
-export const AppBarInfoContainer = styled.div<InfoBarContainerProps>`
+export const AppBarInfoContainer = styled.div<AppBarInfoContainerProps>`
   display: flex;
   min-width: 0;
   opacity: ${props => (props.isNavBarOpen ? 0 : 1)};
@@ -60,3 +60,7 @@ export const AppBarInfoContainer = styled.div<InfoBarContainerProps>`
   transition: ${props =>
     props.isNavBarOpen ? `opacity 0.5s, visibility 0s` : `opacity 0.5s`};
 `;
+
+export const AppBarProfileLinkContainer = styled.div`
+  color: ${color("text-light")};
+`;

frontend/src/metabase/nav/components/AppBar/AppBarLarge.tsx

 import React from "react";
-import { CollectionId } from "metabase-types/api";
+import { CollectionId, User } from "metabase-types/api";
 import AppBarLogo from "./AppBarLogo";
 import NewItemButton from "../NewItemButton";
+import ProfileLink from "../ProfileLink";
 import SearchBar from "../SearchBar";
 import CollectionBreadcrumbs from "../../containers/CollectionBreadcrumbs";
 import QuestionLineage from "../../containers/QuestionLineage";
@@ -10,28 +11,35 @@ import {
   AppBarRightContainer,
   AppBarRoot,
   AppBarInfoContainer,
+  AppBarProfileLinkContainer,
 } from "./AppBarLarge.styled";
 
 export interface AppBarLargeProps {
+  currentUser: User;
   collectionId?: CollectionId;
   isNavBarOpen?: boolean;
   isNavBarVisible?: boolean;
   isSearchVisible?: boolean;
   isNewButtonVisible?: boolean;
+  isProfileLinkVisible?: boolean;
   isCollectionPathVisible?: boolean;
   isQuestionLineageVisible?: boolean;
   onToggleNavbar: () => void;
+  onLogout: () => void;
 }
 
 const AppBarLarge = ({
+  currentUser,
   collectionId,
   isNavBarOpen,
   isNavBarVisible,
   isSearchVisible,
   isNewButtonVisible,
+  isProfileLinkVisible,
   isCollectionPathVisible,
   isQuestionLineageVisible,
   onToggleNavbar,
+  onLogout,
 }: AppBarLargeProps): JSX.Element => {
   return (
     <AppBarRoot>
@@ -49,10 +57,15 @@ const AppBarLarge = ({
           ) : null}
         </AppBarInfoContainer>
       </AppBarLeftContainer>
-      {(isSearchVisible || isNewButtonVisible) && (
+      {(isSearchVisible || isNewButtonVisible || isProfileLinkVisible) && (
         <AppBarRightContainer>
           {isSearchVisible && <SearchBar />}
           {isNewButtonVisible && <NewItemButton />}
+          {isProfileLinkVisible && (
+            <AppBarProfileLinkContainer>
+              <ProfileLink user={currentUser} onLogout={onLogout} />
+            </AppBarProfileLinkContainer>
+          )}
         </AppBarRightContainer>
       )}
     </AppBarRoot>

frontend/src/metabase/nav/components/AppBar/AppBarSmall.styled.tsx

@@ -53,3 +53,7 @@ export const AppBarLogoContainer = styled.div<AppBarLogoContainerProps>`
   transition: ${props =>
     props.isVisible ? "opacity 0.3s linear 0.2s" : "none"};
 `;
+
+export const AppBarProfileLinkContainer = styled.div`
+  color: ${color("text-light")};
+`;

frontend/src/metabase/nav/components/AppBar/AppBarSmall.tsx

 import React, { useCallback, useState } from "react";
-import { CollectionId } from "metabase-types/api";
+import { CollectionId, User } from "metabase-types/api";
 import AppBarLogo from "./AppBarLogo";
 import AppBarToggle from "./AppBarToggle";
 import SearchBar from "../SearchBar";
+import ProfileLink from "../ProfileLink";
 import CollectionBreadcrumbs from "../../containers/CollectionBreadcrumbs";
 import QuestionLineage from "../../containers/QuestionLineage";
 import {
   AppBarHeader,
   AppBarLogoContainer,
   AppBarMainContainer,
+  AppBarProfileLinkContainer,
   AppBarRoot,
   AppBarSearchContainer,
   AppBarSubheader,
@@ -16,25 +18,31 @@ import {
 } from "./AppBarSmall.styled";
 
 export interface AppBarSmallProps {
+  currentUser: User;
   collectionId?: CollectionId;
   isNavBarOpen?: boolean;
   isNavBarVisible?: boolean;
   isSearchVisible?: boolean;
+  isProfileLinkVisible?: boolean;
   isCollectionPathVisible?: boolean;
   isQuestionLineageVisible?: boolean;
   onToggleNavbar: () => void;
   onCloseNavbar: () => void;
+  onLogout: () => void;
 }
 
 const AppBarSmall = ({
+  currentUser,
   collectionId,
   isNavBarOpen,
   isNavBarVisible,
   isSearchVisible,
+  isProfileLinkVisible,
   isCollectionPathVisible,
   isQuestionLineageVisible,
   onToggleNavbar,
   onCloseNavbar,
+  onLogout,
 }: AppBarSmallProps): JSX.Element => {
   const [isSearchActive, setSearchActive] = useState(false);
   const isInfoVisible = isQuestionLineageVisible || isCollectionPathVisible;
@@ -73,6 +81,11 @@ const AppBarSmall = ({
               />
             )}
           </AppBarSearchContainer>
+          {isProfileLinkVisible && (
+            <AppBarProfileLinkContainer>
+              <ProfileLink user={currentUser} onLogout={onLogout} />
+            </AppBarProfileLinkContainer>
+          )}
         </AppBarMainContainer>
         <AppBarLogoContainer isVisible={!isSearchActive}>
           <AppBarLogo onLogoClick={handleLogoClick} />

frontend/src/metabase/nav/components/ProfileLink.jsx

@@ -24,7 +24,7 @@ const mapStateToProps = state => ({
 
 export default connect(mapStateToProps)(ProfileLink);
 
-function ProfileLink({ user, handleCloseNavbar, adminItems, handleLogout }) {
+function ProfileLink({ user, adminItems, onLogout }) {
   const [modalOpen, setModalOpen] = useState(null);
   const [bugReportDetails, setBugReportDetails] = useState(null);
 
@@ -50,7 +50,6 @@ function ProfileLink({ user, handleCloseNavbar, adminItems, handleLogout }) {
         icon: null,
         link: Urls.accountSettings(),
         event: `Navbar;Profile Dropdown;Edit Profile`,
-        onClose: handleCloseNavbar,
       },
       showAdminSettingsItem && {
         title: t`Admin settings`,
@@ -63,7 +62,6 @@ function ProfileLink({ user, handleCloseNavbar, adminItems, handleLogout }) {
         icon: null,
         link: "/activity",
         event: `Navbar;Profile Dropdown;Activity ${tag}`,
-        onClose: handleCloseNavbar,
       },
       {
         title: t`Help`,
@@ -85,7 +83,7 @@ function ProfileLink({ user, handleCloseNavbar, adminItems, handleLogout }) {
       {
         title: t`Sign out`,
         icon: null,
-        action: () => handleLogout(),
+        action: () => onLogout(),
         event: `Navbar;Profile Dropdown;Logout`,
       },
     ].filter(Boolean);
@@ -107,7 +105,6 @@ function ProfileLink({ user, handleCloseNavbar, adminItems, handleLogout }) {
         tooltip={t`Settings`}
         items={generateOptionsForUser()}
         triggerIcon="gear"
-        targetOffsetY={20}
         triggerProps={{
           color: color("text-medium"),
           hover: {
@@ -164,7 +161,6 @@ function ProfileLink({ user, handleCloseNavbar, adminItems, handleLogout }) {
 
 ProfileLink.propTypes = {
   user: PropTypes.object.isRequired,
-  handleCloseNavbar: PropTypes.func.isRequired,
   adminItems: PropTypes.array,
-  handleLogout: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
 };

frontend/src/metabase/nav/containers/AppBar/AppBar.tsx

 import { connect } from "react-redux";
 import { withRouter } from "react-router";
 import _ from "underscore";
+import { logout } from "metabase/auth/actions";
 import { closeNavbar, getIsNavbarOpen, toggleNavbar } from "metabase/redux/app";
 import {
   getCollectionId,
   getIsCollectionPathVisible,
   getIsNewButtonVisible,
+  getIsProfileLinkVisible,
   getIsQuestionLineageVisible,
   getIsSearchVisible,
   RouterProps,
 } from "metabase/selectors/app";
 import { State } from "metabase-types/store";
 import AppBar from "../../components/AppBar";
+import { getUser } from "metabase/selectors/user";
 
 const mapStateToProps = (state: State, props: RouterProps) => ({
+  currentUser: getUser(state),
   collectionId: getCollectionId(state),
   isNavBarOpen: getIsNavbarOpen(state),
   isSearchVisible: getIsSearchVisible(state),
   isNewButtonVisible: getIsNewButtonVisible(state),
+  isProfileLinkVisible: getIsProfileLinkVisible(state),
   isCollectionPathVisible: getIsCollectionPathVisible(state, props),
   isQuestionLineageVisible: getIsQuestionLineageVisible(state),
 });
@@ -25,6 +30,7 @@ const mapStateToProps = (state: State, props: RouterProps) => ({
 const mapDispatchToProps = {
   onToggleNavbar: toggleNavbar,
   onCloseNavbar: closeNavbar,
+  onLogout: logout,
 };
 
 export default _.compose(

frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.styled.tsx

@@ -133,25 +133,6 @@ export const LoadingTitle = styled.h2`
   margin-top: ${space(1)};
 `;
 
-export const ProfileLinkContainer = styled.div<{ isOpen: boolean }>`
-  position: fixed;
-  bottom: 0;
-  // Height is hard-set so it remains
-  // the same as the ArchiveBarContent
-  // in ArchiveApp
-  height: 49px;
-  left: 0;
-  padding: ${space(0)};
-  width: ${props => (props.isOpen ? NAV_SIDEBAR_WIDTH : 0)};
-  border-top: 1px solid ${color("border")};
-  background-color: ${color("white")};
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  margin-right: ${space(2)};
-  color: ${color("text-light")};
-`;
-
 export const HomePageLink = styled(SidebarLink)`
   padding-left: 12px;
 `;

frontend/src/metabase/nav/containers/MainNavbar/MainNavbarView.tsx

@@ -3,13 +3,10 @@ import { t } from "ttag";
 
 import { BookmarksType, Collection, User } from "metabase-types/api";
 
-import Link from "metabase/core/components/Link";
 import { IconProps } from "metabase/components/Icon";
 import { Tree } from "metabase/components/tree";
 import TippyPopoverWithTrigger from "metabase/components/PopoverWithTrigger/TippyPopoverWithTrigger";
 
-import ProfileLink from "metabase/nav/components/ProfileLink";
-
 import {
   getCollectionIcon,
   PERSONAL_COLLECTIONS,
@@ -27,7 +24,6 @@ import {
   CollectionsMoreIcon,
   CollectionMenuList,
   HomePageLink,
-  ProfileLinkContainer,
   SidebarContentRoot,
   SidebarHeading,
   SidebarSection,
@@ -67,7 +63,6 @@ const ADD_YOUR_OWN_DATA_URL = "/admin/databases/create";
 
 function MainNavbarView({
   isAdmin,
-  isOpen,
   currentUser,
   bookmarks,
   collections,
@@ -77,7 +72,6 @@ function MainNavbarView({
   reorderBookmarks,
   handleCreateNewCollection,
   handleCloseNavbar,
-  handleLogout,
 }: Props) {
   const isNonEntityLinkSelected = selectedItem.type === "non-entity";
   const isCollectionSelected =
@@ -167,15 +161,6 @@ function MainNavbarView({
           )}
         </ul>
       </div>
-      {!IFRAMED && (
-        <ProfileLinkContainer isOpen={isOpen}>
-          <ProfileLink
-            user={currentUser}
-            handleCloseNavbar={onItemSelect}
-            handleLogout={handleLogout}
-          />
-        </ProfileLinkContainer>
-      )}
     </SidebarContentRoot>
   );
 }

frontend/src/metabase/selectors/app.ts

@@ -111,6 +111,11 @@ export const getIsNewButtonVisible = createSelector(
   },
 );
 
+export const getIsProfileLinkVisible = createSelector(
+  [getIsEmbedded],
+  isEmbedded => !isEmbedded,
+);
+
 export const getErrorPage = (state: State) => {
   return state.app.errorPage;
 };

frontend/test/metabase/scenarios/dashboard/reproductions/21597-query-build-card-save-modal.cy.spec.js

@@ -29,7 +29,7 @@ describe("display the relevant error message in save question modal (metabase#21
 
     // Second DB (copy)
     cy.visit("/");
-    cy.get(".Nav .Icon-gear").click();
+    cy.icon("gear").click();
     cy.findByText("Admin settings").click();
     cy.findByText("Databases").click();
     cy.findByText("Add database").click();