From b48aa5f39384f1a19e4210cb58e5b6bdb50efbee Mon Sep 17 00:00:00 2001
From: Alexander Polyankin <alexander.polyankin@metabase.com>
Date: Thu, 3 Feb 2022 21:08:39 +0300
Subject: [PATCH] Migrate "nav" from grid-styled (#20210)
---
.../metabase/nav/components/ProfileLink.jsx | 5 +-
.../metabase/nav/components/SearchResults.jsx | 6 +--
.../nav/components/SearchResults.styled.tsx | 6 +++
.../src/metabase/nav/containers/Navbar.jsx | 41 ++++++++-------
.../metabase/nav/containers/Navbar.styled.tsx | 51 +++++++++++++++++++
5 files changed, 82 insertions(+), 27 deletions(-)
create mode 100644 frontend/src/metabase/nav/components/SearchResults.styled.tsx
create mode 100644 frontend/src/metabase/nav/containers/Navbar.styled.tsx
diff --git a/frontend/src/metabase/nav/components/ProfileLink.jsx b/frontend/src/metabase/nav/components/ProfileLink.jsx
index fe8fd3cd094..3437003d778 100644
--- a/frontend/src/metabase/nav/components/ProfileLink.jsx
+++ b/frontend/src/metabase/nav/components/ProfileLink.jsx
@@ -1,6 +1,5 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import { Box } from "grid-styled";
import { t } from "ttag";
import _ from "underscore";
@@ -85,7 +84,7 @@ export default class ProfileLink extends Component {
// don't show trademark if application name is whitelabeled
const showTrademark = t`Metabase` === "Metabase";
return (
- <Box>
+ <div>
<EntityMenu
tooltip={t`Settings`}
items={this.generateOptionsForUser()}
@@ -139,7 +138,7 @@ export default class ProfileLink extends Component {
)}
</Modal>
) : null}
- </Box>
+ </div>
);
}
}
diff --git a/frontend/src/metabase/nav/components/SearchResults.jsx b/frontend/src/metabase/nav/components/SearchResults.jsx
index e23d6458fe8..7bad9701eeb 100644
--- a/frontend/src/metabase/nav/components/SearchResults.jsx
+++ b/frontend/src/metabase/nav/components/SearchResults.jsx
@@ -1,12 +1,12 @@
import React from "react";
import PropTypes from "prop-types";
-import { Box } from "grid-styled";
import { t } from "ttag";
import { DEFAULT_SEARCH_LIMIT } from "metabase/lib/constants";
import Search from "metabase/entities/search";
import SearchResult from "metabase/search/components/SearchResult";
import EmptyState from "metabase/components/EmptyState";
+import { EmptyStateContainer } from "./SearchResults.styled";
const propTypes = {
searchText: PropTypes.string,
@@ -32,9 +32,9 @@ export const SearchResults = ({ searchText }) => {
</li>
))
) : (
- <Box mt={4} mb={3}>
+ <EmptyStateContainer>
<EmptyState message={t`Didn't find anything`} icon="search" />
- </Box>
+ </EmptyStateContainer>
)}
</ul>
);
diff --git a/frontend/src/metabase/nav/components/SearchResults.styled.tsx b/frontend/src/metabase/nav/components/SearchResults.styled.tsx
new file mode 100644
index 00000000000..7f9e4d252f4
--- /dev/null
+++ b/frontend/src/metabase/nav/components/SearchResults.styled.tsx
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const EmptyStateContainer = styled.div`
+ margin-top: 4rem;
+ margin-bottom: 2rem;
+`;
diff --git a/frontend/src/metabase/nav/containers/Navbar.jsx b/frontend/src/metabase/nav/containers/Navbar.jsx
index 8dd8579dbe0..6c810fb5137 100644
--- a/frontend/src/metabase/nav/containers/Navbar.jsx
+++ b/frontend/src/metabase/nav/containers/Navbar.jsx
@@ -6,7 +6,6 @@ import { connect } from "react-redux";
import { push } from "react-router-redux";
import { t } from "ttag";
-import { Flex, Box } from "grid-styled";
import * as Urls from "metabase/lib/urls";
import { color, darken } from "metabase/lib/colors";
@@ -42,6 +41,14 @@ const mapStateToProps = (state, props) => ({
});
import { getDefaultSearchColor } from "metabase/nav/constants";
+import {
+ EntityMenuContainer,
+ LogoIconContainer,
+ LogoLinkContainer,
+ NavRoot,
+ SearchBarContainer,
+ SearchBarContent,
+} from "./Navbar.styled";
const mapDispatchToProps = {
onChangeLocation: push,
@@ -110,16 +117,12 @@ export default class Navbar extends Component {
const { hasDataAccess, hasNativeWrite } = this.props;
return (
- <Flex
+ <NavRoot
// NOTE: DO NOT REMOVE `Nav` CLASS FOR NOW, USED BY MODALS, FULLSCREEN DASHBOARD, ETC
// TODO: hide nav using state in redux instead?
className="Nav relative bg-brand text-white z3 flex-no-shrink"
- align="center"
- style={{ backgroundColor: color("nav") }}
- py={1}
- pr={2}
>
- <Flex style={{ minWidth: 64 }} align="center" justify="center">
+ <LogoLinkContainer>
<Link
to="/"
data-metabase-event={"Navbar;Logo"}
@@ -128,24 +131,20 @@ export default class Navbar extends Component {
mx={1}
hover={{ backgroundColor: getDefaultSearchColor() }}
>
- <Flex
- style={{ minWidth: 32, height: 32 }}
- align="center"
- justify="center"
- >
+ <LogoIconContainer>
<LogoIcon dark height={32} />
- </Flex>
+ </LogoIconContainer>
</Link>
- </Flex>
- <Flex className="flex-full z1" pr={2} align="center">
- <Box width={1} style={{ maxWidth: 500 }}>
+ </LogoLinkContainer>
+ <SearchBarContainer>
+ <SearchBarContent>
<SearchBar
location={this.props.location}
onChangeLocation={this.props.onChangeLocation}
/>
- </Box>
- </Flex>
- <Flex ml="auto" align="center" pl={[1, 2]} className="relative z2">
+ </SearchBarContent>
+ </SearchBarContainer>
+ <EntityMenuContainer>
<EntityMenu
className="hide sm-show mr1"
trigger={
@@ -220,9 +219,9 @@ export default class Navbar extends Component {
</Link>
)}
<ProfileLink {...this.props} />
- </Flex>
+ </EntityMenuContainer>
{this.renderModal()}
- </Flex>
+ </NavRoot>
);
}
diff --git a/frontend/src/metabase/nav/containers/Navbar.styled.tsx b/frontend/src/metabase/nav/containers/Navbar.styled.tsx
new file mode 100644
index 00000000000..2ec64f4c85f
--- /dev/null
+++ b/frontend/src/metabase/nav/containers/Navbar.styled.tsx
@@ -0,0 +1,51 @@
+import styled from "styled-components";
+import { color } from "metabase/lib/colors";
+import { breakpointMinSmall } from "metabase/styled-components/theme";
+
+export const NavRoot = styled.div`
+ display: flex;
+ align-items: center;
+ padding: 0.5rem 1rem 0.5rem 0;
+ background-color: ${color("nav")};
+`;
+
+export const LogoLinkContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-width: 4rem;
+`;
+
+export const LogoIconContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-width: 2rem;
+ height: 2rem;
+`;
+
+export const SearchBarContainer = styled.div`
+ display: flex;
+ flex: 1 0 auto;
+ align-items: center;
+ padding-right: 1rem;
+ z-index: 1;
+`;
+
+export const SearchBarContent = styled.div`
+ width: 100%;
+ max-width: 500px;
+`;
+
+export const EntityMenuContainer = styled.div`
+ display: flex;
+ position: relative;
+ align-items: center;
+ margin-left: auto;
+ padding-left: 0.5rem;
+ z-index: 2;
+
+ ${breakpointMinSmall} {
+ padding-left: 1rem;
+ }
+`;
--
GitLab