diff --git a/frontend/src/metabase/admin/people/components/GroupDetail.jsx b/frontend/src/metabase/admin/people/components/GroupDetail.jsx
index 2d8d5d647edc146638fa5cc536ac4569e97e5949..add1f3a65aec188838d9ee14cfea4c1774d57f74 100644
--- a/frontend/src/metabase/admin/people/components/GroupDetail.jsx
+++ b/frontend/src/metabase/admin/people/components/GroupDetail.jsx
@@ -115,7 +115,7 @@ const AddUserRow = ({
onCancel={onCancel}
>
{selectedUsers.map(user => (
- <div className="bg-slate-light p1 px2 mr1 rounded flex align-center">
+ <div className="bg-medium p1 px2 mr1 rounded flex align-center">
{user.common_name}
<Icon
className="pl1 cursor-pointer text-slate text-grey-4-hover"
diff --git a/frontend/src/metabase/components/ArchivedItem.jsx b/frontend/src/metabase/components/ArchivedItem.jsx
index b4f7b4f527888336accf7b8b6f11138cbd3a848f..636be28e985adf3e6cb22e3fb678dfb317b1278d 100644
--- a/frontend/src/metabase/components/ArchivedItem.jsx
+++ b/frontend/src/metabase/components/ArchivedItem.jsx
@@ -24,7 +24,7 @@ const ArchivedItem = ({
onToggleSelected,
showSelect,
}) => (
- <div className="flex align-center p2 hover-parent hover--visibility border-bottom bg-grey-0-hover">
+ <div className="flex align-center p2 hover-parent hover--visibility border-bottom bg-light-hover">
<IconWrapper p={1} mr={1} align="center" justify="center">
<Swapper
startSwapped={showSelect}
diff --git a/frontend/src/metabase/components/BrowseApp.jsx b/frontend/src/metabase/components/BrowseApp.jsx
index 4952947395bf83e1be803016a4cce70b9bee7d30..23bc6034a1a074c7267a405f654f480952b4737e 100644
--- a/frontend/src/metabase/components/BrowseApp.jsx
+++ b/frontend/src/metabase/components/BrowseApp.jsx
@@ -21,6 +21,9 @@ export const DatabaseListLoader = props => (
<EntityListLoader entityType="databases" {...props} />
);
+const PAGE_PADDING = [1, 2, 4];
+const ITEM_WIDTHS = [1, 1 / 2, 1 / 3];
+
const SchemaListLoader = ({ dbId, ...props }) => (
<EntityListLoader entityType="schemas" entityQuery={{ dbId }} {...props} />
);
@@ -63,7 +66,7 @@ export class SchemaBrowser extends React.Component {
</Box>
<Grid>
{schemas.map(schema => (
- <GridItem w={1 / 3}>
+ <GridItem w={ITEM_WIDTHS}>
<Link
to={`/browse/${dbId}/schema/${schema.name}`}
mb={1}
@@ -101,7 +104,7 @@ export class TableBrowser extends React.Component {
{({ tables, loading, error }) => {
return (
<Box>
- <Box my={2}>
+ <Box mt={3} mb={2}>
<BrowserCrumbs
crumbs={[
{ title: t`Our data`, to: "browse" },
@@ -121,7 +124,7 @@ export class TableBrowser extends React.Component {
}).getUrl();
return (
- <GridItem w={1 / 3}>
+ <GridItem w={ITEM_WIDTHS}>
<Card
hoverable
px={1}
@@ -183,7 +186,7 @@ export class TableBrowser extends React.Component {
export class BrowseApp extends React.Component {
render() {
- return <Box mx={4}>{this.props.children}</Box>;
+ return <Box mx={PAGE_PADDING}>{this.props.children}</Box>;
}
}
@@ -199,7 +202,7 @@ export class DatabaseBrowser extends React.Component {
return (
<Grid>
{databases.map(database => (
- <GridItem>
+ <GridItem w={ITEM_WIDTHS}>
<Link to={`browse/${database.id}`}>
<Card p={3} hover={{ color: normal.blue }}>
<Icon name="database" color={normal.grey2} mb={3} />
diff --git a/frontend/src/metabase/components/Card.jsx b/frontend/src/metabase/components/Card.jsx
index e6072c9ac137922ff8073cca40cebef9117373c6..13b9acedd4ba53024bc2bd54efc20e71536cd3b8 100644
--- a/frontend/src/metabase/components/Card.jsx
+++ b/frontend/src/metabase/components/Card.jsx
@@ -5,14 +5,17 @@ import colors, { alpha } from "metabase/lib/colors";
const Card = styled.div`
${space} background-color: ${props =>
props.dark ? colors["text-dark"] : "white"};
- border: 1px solid ${props => (props.dark ? "transparent" : colors["border"])};
+ border: 1px solid
+ ${props => (props.dark ? "transparent" : colors["bg-medium"])};
${props => props.dark && `color: white`};
border-radius: 6px;
- box-shadow: 0 5px 22px ${props => colors["shadow"]};
+ box-shadow: 0 7px 20px ${props => colors["shadow"]};
+ transition: all 0.2s linear;
+ line-height: 24px;
${props =>
props.hoverable &&
`&:hover {
- box-shadow: 0 5px 16px ${alpha(colors["shadow"], 0.1)};
+ box-shadow: 0 10px 22px ${alpha(colors["shadow"], 0.09)};
}`};
`;
diff --git a/frontend/src/metabase/components/CollectionItem.jsx b/frontend/src/metabase/components/CollectionItem.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..af2cbd955425681ef824160c8c34928691a3a2cf
--- /dev/null
+++ b/frontend/src/metabase/components/CollectionItem.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { Flex } from "grid-styled";
+import Ellipsified from "metabase/components/Ellipsified";
+import Icon from "metabase/components/Icon";
+import Link from "metabase/components/Link";
+
+import colors, { normal } from "metabase/lib/colors";
+
+const CollectionItem = ({ collection, color, iconName = "all" }) => (
+ <Link
+ to={`collection/${collection.id}`}
+ color={normal.grey2}
+ bg={colors["bg-medium"]}
+ className="block rounded"
+ hover={{
+ color: colors.primary,
+ backgroundColor: colors["bg-medium"],
+ }}
+ p={[1, 2]}
+ >
+ <Flex align="center" py={1} key={`collection-${collection.id}`}>
+ <Icon name={iconName} mx={1} />
+ <h4 className="overflow-hidden">
+ <Ellipsified>{collection.name}</Ellipsified>
+ </h4>
+ </Flex>
+ </Link>
+);
+
+export default CollectionItem;
diff --git a/frontend/src/metabase/components/CollectionLanding.jsx b/frontend/src/metabase/components/CollectionLanding.jsx
index 8612d0853c02ae955e30c0ea868101af8d8422d7..746f414d41e3ea76ed02101988043d68165bb0b7 100644
--- a/frontend/src/metabase/components/CollectionLanding.jsx
+++ b/frontend/src/metabase/components/CollectionLanding.jsx
@@ -39,6 +39,7 @@ import PinDropTarget from "metabase/containers/dnd/PinDropTarget";
import ItemsDragLayer from "metabase/containers/dnd/ItemsDragLayer";
const ROW_HEIGHT = 72;
+const PAGE_PADDING = [2, 3, 4];
import { entityListLoader } from "metabase/entities/containers/EntityListLoader";
@@ -74,6 +75,7 @@ class DefaultLanding extends React.Component {
render() {
const {
+ ancestors,
collection,
collectionId,
@@ -81,6 +83,7 @@ class DefaultLanding extends React.Component {
pinned,
unpinned,
+ isRoot,
selected,
selection,
onToggleSelected,
@@ -97,17 +100,58 @@ class DefaultLanding extends React.Component {
onSelectNone();
};
- const collectionWidth = unpinned.length > 0 ? 1 / 3 : 1;
- const itemWidth = unpinned.length > 0 ? 2 / 3 : 0;
- const collectionGridSize = unpinned.length > 0 ? 1 : 1 / 4;
+ const collectionWidth = unpinned.length > 0 ? [1, 1 / 3] : 1;
+ const itemWidth = unpinned.length > 0 ? [1, 2 / 3] : 0;
+ const collectionGridSize = unpinned.length > 0 ? 1 : [1, 1 / 4];
return (
<Box>
<Box>
+ <Flex
+ align="center"
+ pt={2}
+ pb={3}
+ px={4}
+ bg={pinned.length ? colors["bg-medium"] : null}
+ >
+ <Box>
+ <Box mb={1}>
+ <BrowserCrumbs
+ crumbs={[
+ ...ancestors.map(({ id, name }) => ({
+ title: (
+ <CollectionDropTarget collection={{ id }} margin={8}>
+ {name}
+ </CollectionDropTarget>
+ ),
+ to: Urls.collection(id),
+ })),
+ ]}
+ />
+ </Box>
+ <h1 style={{ fontWeight: 900 }}>{collection.name}</h1>
+ </Box>
+
+ <Flex ml="auto">
+ {collection &&
+ collection.can_write &&
+ !collection.personal_owner_id && (
+ <Box ml={1}>
+ <CollectionEditMenu
+ collectionId={collectionId}
+ isRoot={isRoot}
+ />
+ </Box>
+ )}
+ <Box ml={1}>
+ <CollectionBurgerMenu />
+ </Box>
+ </Flex>
+ </Flex>
<Box>
<Box>
{pinned.length > 0 ? (
- <Box mx={4} mt={2} mb={3}>
+ <Box px={PAGE_PADDING} pt={2} pb={3} bg={colors["bg-medium"]}>
<CollectionSectionHeading>{t`Pins`}</CollectionSectionHeading>
<PinDropTarget
pinIndex={pinned[pinned.length - 1].collection_position + 1}
@@ -117,7 +161,11 @@ class DefaultLanding extends React.Component {
>
<Grid>
{pinned.map((item, index) => (
- <GridItem w={1 / 3} className="relative">
+ <GridItem
+ w={[1, 1 / 3]}
+ className="relative"
+ key={index}
+ >
<ItemDragSource item={item}>
<PinnedItem
key={`${item.type}:${item.id}`}
@@ -163,10 +211,10 @@ class DefaultLanding extends React.Component {
)}
</PinDropTarget>
)}
- <Box pt={2} px={4} bg="white">
+ <Box pt={[1, 2]} px={[2, 4]}>
<Grid>
<GridItem w={collectionWidth}>
- <Box pr={2}>
+ <Box pr={2} className="relative">
<Box py={2}>
<CollectionSectionHeading>
{t`Collections`}
@@ -185,41 +233,43 @@ class DefaultLanding extends React.Component {
<PinDropTarget pinIndex={null} margin={8}>
<Box>
<ItemTypeFilterBar />
- <Box
- mb={selected.length > 0 ? 5 : 2}
- style={{
- position: "relative",
- height: ROW_HEIGHT * unpinned.length,
- }}
- >
- <VirtualizedList
- items={
- location.query.type
- ? unpinned.filter(
- u => u.model === location.query.type,
- )
- : unpinned
- }
- rowHeight={ROW_HEIGHT}
- renderItem={({ item, index }) => (
- <ItemDragSource
- item={item}
- selection={selection}
- >
- <NormalItem
- key={`${item.type}:${item.id}`}
+ <Card mt={1}>
+ <Box
+ mb={selected.length > 0 ? 5 : 2}
+ style={{
+ position: "relative",
+ height: ROW_HEIGHT * unpinned.length,
+ }}
+ >
+ <VirtualizedList
+ items={
+ location.query.type
+ ? unpinned.filter(
+ u => u.model === location.query.type,
+ )
+ : unpinned
+ }
+ rowHeight={ROW_HEIGHT}
+ renderItem={({ item, index }) => (
+ <ItemDragSource
item={item}
- collection={collection}
selection={selection}
- onToggleSelected={onToggleSelected}
- onMove={moveItems =>
- this.setState({ moveItems })
- }
- />
- </ItemDragSource>
- )}
- />
- </Box>
+ >
+ <NormalItem
+ key={`${item.type}:${item.id}`}
+ item={item}
+ collection={collection}
+ selection={selection}
+ onToggleSelected={onToggleSelected}
+ onMove={moveItems =>
+ this.setState({ moveItems })
+ }
+ />
+ </ItemDragSource>
+ )}
+ />
+ </Box>
+ </Card>
</Box>
</PinDropTarget>
) : (
@@ -308,8 +358,9 @@ export const NormalItem = ({
onToggleSelected,
onMove,
}) => (
- <Link to={item.getUrl()}>
+ <Link to={item.getUrl()} px={2}>
<EntityItem
+ variant="list"
showSelect={selection.size > 0}
selectable
item={item}
@@ -413,53 +464,16 @@ class CollectionLanding extends React.Component {
return (
<Box>
- <Box>
- <Flex align="center" mt={2} mb={3} mx={4}>
- <Box>
- <Box mb={1}>
- <BrowserCrumbs
- crumbs={[
- ...ancestors.map(({ id, name }) => ({
- title: (
- <CollectionDropTarget collection={{ id }} margin={8}>
- {name}
- </CollectionDropTarget>
- ),
- to: Urls.collection(id),
- })),
- ]}
- />
- </Box>
- <h1 style={{ fontWeight: 900 }}>{currentCollection.name}</h1>
- </Box>
-
- <Flex ml="auto">
- {currentCollection &&
- currentCollection.can_write &&
- !currentCollection.personal_owner_id && (
- <Box ml={1}>
- <CollectionEditMenu
- collectionId={collectionId}
- isRoot={isRoot}
- />
- </Box>
- )}
- <Box ml={1}>
- <CollectionBurgerMenu />
- </Box>
- </Flex>
- </Flex>
- </Box>
- <Box>
- <DefaultLanding
- collection={currentCollection}
- collectionId={collectionId}
- />
- {
- // Need to have this here so the child modals will show up
- this.props.children
- }
- </Box>
+ <DefaultLanding
+ isRoot={isRoot}
+ ancestors={ancestors}
+ collection={currentCollection}
+ collectionId={collectionId}
+ />
+ {
+ // Need to have this here so the child modals will show up
+ this.props.children
+ }
</Box>
);
}
diff --git a/frontend/src/metabase/components/CollectionList.jsx b/frontend/src/metabase/components/CollectionList.jsx
index 48f3a54201857d536986808807fe821dd856866d..2bc0bc3a1535458773c4844acb43d637579ca9be 100644
--- a/frontend/src/metabase/components/CollectionList.jsx
+++ b/frontend/src/metabase/components/CollectionList.jsx
@@ -3,10 +3,10 @@ import { t } from "c-3po";
import { Box, Flex } from "grid-styled";
import { connect } from "react-redux";
-import colors, { normal } from "metabase/lib/colors";
import * as Urls from "metabase/lib/urls";
-import Ellipsified from "metabase/components/Ellipsified";
+import CollectionItem from "metabase/components/CollectionItem";
+import { normal } from "metabase/lib/colors";
import { Grid, GridItem } from "metabase/components/Grid";
import Icon from "metabase/components/Icon";
import Link from "metabase/components/Link";
@@ -14,23 +14,6 @@ import Link from "metabase/components/Link";
import CollectionDropTarget from "metabase/containers/dnd/CollectionDropTarget";
import ItemDragSource from "metabase/containers/dnd/ItemDragSource";
-const CollectionItem = ({ collection, color, iconName = "all" }) => (
- <Link
- to={`collection/${collection.id}`}
- color={color || normal.grey2}
- className="text-brand-hover"
- >
- <Box bg={colors["bg-light"]} p={2}>
- <Flex align="center" py={1} key={`collection-${collection.id}`}>
- <Icon name={iconName} mx={1} />
- <h4 className="overflow-hidden">
- <Ellipsified>{collection.name}</Ellipsified>
- </h4>
- </Flex>
- </Box>
- </Link>
-);
-
@connect(({ currentUser }) => ({ currentUser }), null)
class CollectionList extends React.Component {
render() {
@@ -47,7 +30,7 @@ class CollectionList extends React.Component {
{collections
.filter(c => c.id !== currentUser.personal_collection_id)
.map(collection => (
- <GridItem w={w}>
+ <GridItem w={w} key={collection.id}>
<CollectionDropTarget collection={collection}>
<ItemDragSource item={collection}>
<CollectionItem collection={collection} />
diff --git a/frontend/src/metabase/components/EntityItem.jsx b/frontend/src/metabase/components/EntityItem.jsx
index b77542e0675cdeaa7eb348020405d38364420e8a..e341992e3f659b096addce7be35f9ca02159c9c1 100644
--- a/frontend/src/metabase/components/EntityItem.jsx
+++ b/frontend/src/metabase/components/EntityItem.jsx
@@ -1,7 +1,8 @@
import React from "react";
import { t } from "c-3po";
-
+import cx from "classnames";
import { Flex } from "grid-styled";
+
import EntityMenu from "metabase/components/EntityMenu";
import Swapper from "metabase/components/Swapper";
import IconWrapper from "metabase/components/IconWrapper";
@@ -12,7 +13,7 @@ import Icon from "metabase/components/Icon";
import colors from "metabase/lib/colors";
const EntityItemWrapper = Flex.extend`
- border-bottom: 1px solid ${colors["bg-light"]};
+ border-bottom: 1px solid ${colors["bg-medium"]};
/* TODO - figure out how to use the prop instead of this? */
align-items: center;
&:hover {
@@ -32,6 +33,7 @@ const EntityItem = ({
selected,
onToggleSelected,
selectable,
+ variant,
}) => {
const actions = [
onPin && {
@@ -51,11 +53,32 @@ const EntityItem = ({
},
].filter(action => action);
+ let spacing;
+
+ switch (variant) {
+ case "list":
+ spacing = {
+ px: 2,
+ py: 2,
+ };
+ break;
+ default:
+ spacing = {
+ py: 2,
+ };
+ break;
+ }
+
return (
- <EntityItemWrapper py={2} className="hover-parent hover--visibility">
+ <EntityItemWrapper
+ {...spacing}
+ className={cx("hover-parent hover--visibility", {
+ "bg-light-hover": variant === "list",
+ })}
+ >
<IconWrapper
p={1}
- mr={1}
+ mr={2}
align="center"
justify="center"
onClick={
@@ -70,11 +93,13 @@ const EntityItem = ({
{selectable ? (
<Swapper
startSwapped={selected}
- defaultElement={<Icon name={iconName} color={iconColor} />}
- swappedElement={<CheckBox checked={selected} />}
+ defaultElement={
+ <Icon name={iconName} color={iconColor} size={18} />
+ }
+ swappedElement={<CheckBox checked={selected} size={18} />}
/>
) : (
- <Icon name={iconName} color={iconColor} />
+ <Icon name={iconName} color={iconColor} size={18} />
)}
</IconWrapper>
<h3>
diff --git a/frontend/src/metabase/components/ErrorDetails.jsx b/frontend/src/metabase/components/ErrorDetails.jsx
index e493754382da666aee6af00795f53a78ee7856fd..82a04ca2c19b444b4d959304dc82c3e79a8cdfef 100644
--- a/frontend/src/metabase/components/ErrorDetails.jsx
+++ b/frontend/src/metabase/components/ErrorDetails.jsx
@@ -26,7 +26,7 @@ export default class ErrorDetails extends React.Component {
<h2>{t`Here's the full error message`}</h2>
<div
style={{ fontFamily: "monospace" }}
- className="QueryError2-detailBody bordered rounded bg-grey-0 text-bold p2 mt1"
+ className="QueryError2-detailBody bordered rounded bg-light text-bold p2 mt1"
>
{/* ensure we don't try to render anything except a string */}
{typeof details === "string"
diff --git a/frontend/src/metabase/components/ExplorePane.jsx b/frontend/src/metabase/components/ExplorePane.jsx
index f5f062d293485f78762fd5b6a9ca90e00a79ca93..4ee8aee50e161d7840d3cc80bb95ceea2e87f8a5 100644
--- a/frontend/src/metabase/components/ExplorePane.jsx
+++ b/frontend/src/metabase/components/ExplorePane.jsx
@@ -158,7 +158,7 @@ export const ExploreList = ({
export const ExploreOption = ({ option }: { option: Candidate }) => (
<Link
to={option.url}
- className="flex align-center text-bold no-decoration text-grey-5 text-brand-hover bg-grey-0 p2 py3"
+ className="flex align-center text-bold no-decoration text-grey-5 text-brand-hover bg-light p2 py3"
>
<Icon
name="bolt"
diff --git a/frontend/src/metabase/components/Grid.jsx b/frontend/src/metabase/components/Grid.jsx
index dff56b703c94e2aec7dc66d5d263ad3ad5908615..234be85b0fa8796b7b649294c7624543e698dee5 100644
--- a/frontend/src/metabase/components/Grid.jsx
+++ b/frontend/src/metabase/components/Grid.jsx
@@ -14,7 +14,7 @@ GridItem.defaultProps = {
};
export const Grid = ({ children }) => (
- <Flex wrap mx={-1}>
+ <Flex mx={-1} style={{ flexWrap: "wrap" }}>
{children}
</Flex>
);
diff --git a/frontend/src/metabase/components/Icon.jsx b/frontend/src/metabase/components/Icon.jsx
index cc1d98c3be865daa17055e24bcf9d53dd5bbbc01..5d3221a19e41a826245b818d0a618fedea3f5460 100644
--- a/frontend/src/metabase/components/Icon.jsx
+++ b/frontend/src/metabase/components/Icon.jsx
@@ -7,6 +7,7 @@ import { color, space, hover } from "styled-system";
import cx from "classnames";
import { loadIcon } from "metabase/icon_paths";
+import { stripLayoutProps } from "metabase/lib/utils";
import Tooltipify from "metabase/hoc/Tooltipify";
@@ -56,7 +57,7 @@ class BaseIcon extends Component {
return <svg {...props} dangerouslySetInnerHTML={{ __html: icon.svg }} />;
} else {
return (
- <svg {...props}>
+ <svg {...stripLayoutProps(props)}>
<path d={icon.path} />
</svg>
);
diff --git a/frontend/src/metabase/components/IconWrapper.jsx b/frontend/src/metabase/components/IconWrapper.jsx
index 27120f2fbf966217b362eb7e638de8256879b29e..5deb01190c3255c5a2317ce3c1f0ac6a6daff805 100644
--- a/frontend/src/metabase/components/IconWrapper.jsx
+++ b/frontend/src/metabase/components/IconWrapper.jsx
@@ -2,7 +2,7 @@ import { Flex } from "grid-styled";
import colors from "metabase/lib/colors";
const IconWrapper = Flex.extend`
- background: ${props => colors["bg-light"]};
+ background: ${colors["bg-medium"]};
border-radius: 6px;
`;
diff --git a/frontend/src/metabase/components/ItemTypeFilterBar.jsx b/frontend/src/metabase/components/ItemTypeFilterBar.jsx
index 9be9685b03b0810c28b94eda1fd4d5129bfed323..4953391d024b6bcf4411efbdb7a85d36678d694b 100644
--- a/frontend/src/metabase/components/ItemTypeFilterBar.jsx
+++ b/frontend/src/metabase/components/ItemTypeFilterBar.jsx
@@ -3,6 +3,7 @@ import { Flex } from "grid-styled";
import { t } from "c-3po";
import { withRouter } from "react-router";
+import Icon from "metabase/components/Icon";
import Link from "metabase/components/Link";
import colors from "metabase/lib/colors";
@@ -11,27 +12,31 @@ export const FILTERS = [
{
name: t`Everything`,
filter: null,
+ icon: "list",
},
{
name: t`Dashboards`,
filter: "dashboard",
+ icon: "dashboard",
},
{
name: t`Questions`,
filter: "card",
+ icon: "beaker",
},
{
name: t`Pulses`,
filter: "pulse",
+ icon: "pulse",
},
];
const ItemTypeFilterBar = props => {
const { location } = props;
return (
- <Flex align="center" className="border-bottom">
+ <Flex align="center" className="border-bottom mt1">
{props.filters.map(f => {
- let isActive = location.query.type === f.filter;
+ let isActive = location && location.query.type === f.filter;
if (!location.query.type && !f.filter) {
isActive = true;
@@ -47,7 +52,9 @@ const ItemTypeFilterBar = props => {
}}
color={color}
hover={{ color: colors.brand }}
- mr={2}
+ className="flex-full flex align-center justify-center sm-block"
+ mr={[0, 2]}
+ key={f.filter}
py={1}
style={{
borderBottom: `2px solid ${
@@ -55,8 +62,9 @@ const ItemTypeFilterBar = props => {
}`,
}}
>
+ <Icon name={f.icon} className="sm-hide" size={20} />
<h5
- className="text-uppercase"
+ className="text-uppercase hide sm-show"
style={{
color: isActive ? colors.brand : colors["text-medium"],
fontWeight: 900,
diff --git a/frontend/src/metabase/components/Link.jsx b/frontend/src/metabase/components/Link.jsx
index 34cf81f5c560d635f4cf25c93e17d57ba34fb1c2..15cafa2f180d8ee0ccda4c8bdc6d04615b305f92 100644
--- a/frontend/src/metabase/components/Link.jsx
+++ b/frontend/src/metabase/components/Link.jsx
@@ -2,9 +2,14 @@ import React from "react";
import { Link as ReactRouterLink } from "react-router";
import styled from "styled-components";
import { display, color, hover, space } from "styled-system";
+import { stripLayoutProps } from "metabase/lib/utils";
const BaseLink = ({ to, className, children, ...props }) => (
- <ReactRouterLink to={to} className={className || "link"} {...props}>
+ <ReactRouterLink
+ to={to}
+ className={className || "link"}
+ {...stripLayoutProps(props)}
+ >
{children}
</ReactRouterLink>
);
diff --git a/frontend/src/metabase/components/ToggleLarge.jsx b/frontend/src/metabase/components/ToggleLarge.jsx
index 964b9d624feb626978100ca8d9c6d11ca5acc5d1..96307e6cac8781e9e3d8620f1f7392ad4fbb9714 100644
--- a/frontend/src/metabase/components/ToggleLarge.jsx
+++ b/frontend/src/metabase/components/ToggleLarge.jsx
@@ -11,7 +11,7 @@ const ToggleLarge = ({
textRight,
}) => (
<div
- className={cx(className, "bg-grey-1 flex relative text-bold", {
+ className={cx(className, "bg-medium flex relative text-bold", {
"cursor-pointer": onChange,
})}
style={{ borderRadius: 8, ...style }}
diff --git a/frontend/src/metabase/components/TokenField.jsx b/frontend/src/metabase/components/TokenField.jsx
index f7f3608ca257fb73ceaf985662e3b35d56b58246..587d80046a73ca5d924662bc18c39b759bb4ba43 100644
--- a/frontend/src/metabase/components/TokenField.jsx
+++ b/frontend/src/metabase/components/TokenField.jsx
@@ -556,7 +556,7 @@ export default class TokenField extends Component {
<li
key={index}
className={cx(
- `mt1 ml1 py1 pl2 rounded bg-grey-05`,
+ `mt1 ml1 py1 pl2 rounded bg-medium`,
multi ? "pr1" : "pr2",
)}
>
@@ -612,9 +612,9 @@ export default class TokenField extends Component {
}
className={cx(
`py1 pl1 pr2 block rounded text-bold text-${color}-hover inline-block full cursor-pointer`,
- `bg-grey-0-hover`,
+ `bg-light-hover`,
{
- [`text-${color} bg-grey-0`]:
+ [`text-${color} bg-light`]:
!this.state.listIsHovered &&
this._valueIsEqual(
selectedOptionValue,
diff --git a/frontend/src/metabase/containers/EntitySearch.jsx b/frontend/src/metabase/containers/EntitySearch.jsx
index 781b783faa6626e11079faeabb4b430e081a1223..89af5acc902571b5ebcc49388fce82d0066db9c0 100644
--- a/frontend/src/metabase/containers/EntitySearch.jsx
+++ b/frontend/src/metabase/containers/EntitySearch.jsx
@@ -185,7 +185,7 @@ export default class EntitySearch extends Component {
filteredEntities.length > 0;
return (
- <div className="bg-slate-extra-light full Entity-search">
+ <div className="bg-light full Entity-search">
<div className="wrapper wrapper--small pt4 pb4">
<div className="flex mb4 align-center" style={{ height: "50px" }}>
<div
@@ -449,7 +449,7 @@ export const SearchResultsGroup = ({
}) => (
<div>
{groupName !== null && (
- <div className="flex align-center bg-slate-almost-extra-light bordered mt3 px3 py2">
+ <div className="flex align-center bg-medium bordered mt3 px3 py2">
<Icon
className="mr1"
style={{ color: colors["text-light"] }}
@@ -497,8 +497,8 @@ class SearchResultsList extends Component {
<span
className={cx(
"mx1 flex align-center justify-center rounded",
- { "cursor-pointer bg-grey-2 text-white": !isInBeginning },
- { "bg-grey-0 text-grey-1": isInBeginning },
+ { "cursor-pointer bg-medium text-white": !isInBeginning },
+ { "bg-light text-grey-1": isInBeginning },
)}
style={{ width: "22px", height: "22px" }}
onClick={() =>
@@ -510,8 +510,8 @@ class SearchResultsList extends Component {
<span
className={cx(
"flex align-center justify-center rounded",
- { "cursor-pointer bg-grey-2 text-white": !isInEnd },
- { "bg-grey-0 text-grey-2": isInEnd },
+ { "cursor-pointer bg-medium text-white": !isInEnd },
+ { "bg-light text-grey-2": isInEnd },
)}
style={{ width: "22px", height: "22px" }}
onClick={() => !isInEnd && setCurrentPage(entities, currentPage + 1)}
@@ -587,8 +587,8 @@ export class SearchResultListItem extends Component {
<li>
<Link
className={cx(
- "no-decoration flex py2 px3 cursor-pointer bg-slate-extra-light-hover border-bottom",
- { "bg-grey-0": highlight },
+ "no-decoration flex py2 px3 cursor-pointer bg-light-hover border-bottom",
+ { "bg-light": highlight },
)}
to={getUrlForEntity(entity)}
>
diff --git a/frontend/src/metabase/containers/Overworld.jsx b/frontend/src/metabase/containers/Overworld.jsx
index 74eca11aecc53e904279a867de8486eea39fc3d3..61eb23bf7497484a49b2ce93e69c3af77db80a11 100644
--- a/frontend/src/metabase/containers/Overworld.jsx
+++ b/frontend/src/metabase/containers/Overworld.jsx
@@ -109,7 +109,10 @@ class Overworld extends React.Component {
<Grid>
{pinnedDashboards.map(pin => {
return (
- <GridItem w={[1, 1 / 2, 1 / 3]}>
+ <GridItem
+ w={[1, 1 / 2, 1 / 3]}
+ key={`${pin.model}-${pin.id}`}
+ >
<Link
to={Urls.dashboard(pin.id)}
hover={{ color: normal.blue }}
@@ -146,10 +149,10 @@ class Overworld extends React.Component {
color={normal.grey2}
className="text-brand-hover"
>
- <Flex bg={colors["bg-light"]} p={2} mb={1} align="center">
+ <Flex bg={colors["bg-light"]} p={2} my={1} align="center">
<Box ml="auto" mr="auto">
<Flex align="center">
- <h3>{t`Browse all items`}</h3>
+ <h4>{t`Browse all items`}</h4>
<Icon name="chevronright" size={14} ml={1} />
</Flex>
</Box>
@@ -166,7 +169,7 @@ class Overworld extends React.Component {
return (
<Grid>
{databases.map(database => (
- <GridItem w={[1, 1 / 3]}>
+ <GridItem w={[1, 1 / 3]} key={database.id}>
<Link
to={`browse/${database.id}`}
hover={{ color: normal.blue }}
diff --git a/frontend/src/metabase/containers/dnd/DropArea.jsx b/frontend/src/metabase/containers/dnd/DropArea.jsx
index 3288f9874c3c92d5ce75b1aa82120abf2dd5b3af..5d0647582d3bf1a9fc84cf717b525eb5cc990364 100644
--- a/frontend/src/metabase/containers/dnd/DropArea.jsx
+++ b/frontend/src/metabase/containers/dnd/DropArea.jsx
@@ -15,7 +15,7 @@ const DropTargetBackgroundAndBorder = ({
<div
className={cx("absolute rounded", {
"pointer-events-none": !highlighted,
- "bg-slate-almost-extra-light": highlighted,
+ "bg-medium": highlighted,
})}
style={{
top: -marginTop,
diff --git a/frontend/src/metabase/css/core/colors.css b/frontend/src/metabase/css/core/colors.css
index 2cb4a7fc5b72660fb33063f477b5cd9d92e8acbf..17a38cd87b37915f6d126138cc83647c1f710540 100644
--- a/frontend/src/metabase/css/core/colors.css
+++ b/frontend/src/metabase/css/core/colors.css
@@ -225,48 +225,24 @@
color: var(--color-text-medium);
}
-.bg-grey-0,
-.bg-grey-0-hover:hover {
- background-color: var(--color-bg-light);
-}
-.bg-grey-05 {
- background-color: var(--color-bg-medium);
-}
-.bg-grey-1 {
- background-color: var(--color-bg-medium);
-}
-.bg-grey-2 {
- background-color: var(--color-bg-medium);
-}
-.bg-grey-3 {
- background-color: var(--color-bg-dark);
-}
-.bg-grey-4 {
- background-color: var(--color-bg-dark);
-}
-.bg-grey-5 {
- background-color: var(--color-bg-dark);
+.text-dark,
+:local(.text-dark) {
+ color: var(--color-text-dark);
}
-.bg-slate {
- background-color: var(--color-bg-dark);
-}
-.bg-slate-light {
- background-color: var(--color-bg-medium);
-}
-.bg-slate-almost-extra-light {
- background-color: var(--color-bg-medium);
-}
-.bg-slate-extra-light {
+.bg-light,
+.bg-light-hover:hover {
background-color: var(--color-bg-light);
}
-.bg-slate-extra-light-hover:hover {
- background-color: var(--color-bg-light);
+
+.bg-medium,
+.bg-medium-hover:hover {
+ background-color: var(--color-bg-medium);
}
-.text-dark,
-:local(.text-dark) {
- color: var(--color-text-dark);
+.bg-dark,
+.bg-dark-hover:hover {
+ background-color: var(--color-bg-dark);
}
/* white - move to bottom for specificity since its often used on hovers, etc */
diff --git a/frontend/src/metabase/css/pulse.css b/frontend/src/metabase/css/pulse.css
index aff2e4fd7f24bf73e22c73b759de462b4d8d664b..d258aebab5094a39462a691030f74f1e5f0ee697 100644
--- a/frontend/src/metabase/css/pulse.css
+++ b/frontend/src/metabase/css/pulse.css
@@ -41,10 +41,6 @@
font-family: "Lato", Helvetica, sans-serif;
}
-.bg-grey-0 {
- background-color: var(--color-bg-white);
-}
-
.PulseEditButton {
opacity: 0;
transition: opacity 0.3s linear;
diff --git a/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx b/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
index d447ddcb3410bc036b5b6fac3cb0a46f84fde9d4..a642330254a7a17cf92b3acde7290e3e6459b8fe 100644
--- a/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
+++ b/frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx
@@ -230,7 +230,7 @@ const SuggestionsList = ({ suggestions, section }) => (
}
>
<div
- className="bg-slate-extra-light rounded flex align-center justify-center text-slate mr1 flex-no-shrink"
+ className="bg-light rounded flex align-center justify-center text-slate mr1 flex-no-shrink"
style={{ width: 48, height: 48 }}
>
<Icon name="bolt" className="Icon text-grey-1" size={22} />
@@ -246,7 +246,7 @@ const SuggestionsList = ({ suggestions, section }) => (
);
const SuggestionsSidebar = ({ related }) => (
- <div className="flex flex-column bg-slate-almost-extra-light full-height">
+ <div className="flex flex-column bg-medium full-height">
<div className="py2 text-centered my3">
<h3 className="text-grey-3">More X-rays</h3>
</div>
diff --git a/frontend/src/metabase/home/components/Activity.jsx b/frontend/src/metabase/home/components/Activity.jsx
index c4fc62ccd71c2711bcd6ffc09fcb5b5328b4f0d9..7a31be22737c3f9ef84dc1508add0fa4aafe3f21 100644
--- a/frontend/src/metabase/home/components/Activity.jsx
+++ b/frontend/src/metabase/home/components/Activity.jsx
@@ -21,7 +21,7 @@ export default class Activity extends Component {
"bg-error",
"bg-green",
"bg-gold",
- "bg-grey-2",
+ "bg-medium",
];
}
diff --git a/frontend/src/metabase/home/containers/SearchApp.jsx b/frontend/src/metabase/home/containers/SearchApp.jsx
index 804ed062bd9dd0519ea71d8c6e6cda89c64b03ee..e02312b06468a24c2d19965dc53e72da042e565f 100644
--- a/frontend/src/metabase/home/containers/SearchApp.jsx
+++ b/frontend/src/metabase/home/containers/SearchApp.jsx
@@ -15,21 +15,24 @@ import ItemTypeFilterBar, {
FILTERS,
} from "metabase/components/ItemTypeFilterBar";
+const PAGE_PADDING = [1, 2, 4];
+
export default class SearchApp extends React.Component {
render() {
const { location } = this.props;
return (
- <Box mx={4}>
- <Flex align="center" mb={2} py={3}>
+ <Box mx={PAGE_PADDING}>
+ <Flex align="center" mb={2} py={[2, 3]}>
<Subhead>{jt`Results for "${location.query.q}"`}</Subhead>
</Flex>
<ItemTypeFilterBar
filters={FILTERS.concat({
name: t`'Collections`,
filter: "collection",
+ icon: "all",
})}
/>
- <Box w={2 / 3}>
+ <Box w={[1, 2 / 3]}>
<EntityListLoader
entityType="search"
entityQuery={location.query}
@@ -67,7 +70,7 @@ export default class SearchApp extends React.Component {
</div>
<Card px={2}>
{types.dashboard.map(item => (
- <Link to={item.getUrl()}>
+ <Link to={item.getUrl()} key={item.id}>
<EntityItem
name={item.getName()}
iconName={item.getIcon()}
@@ -85,7 +88,7 @@ export default class SearchApp extends React.Component {
</div>
<Card px={2}>
{types.collection.map(item => (
- <Link to={item.getUrl()}>
+ <Link to={item.getUrl()} key={item.id}>
<EntityItem
name={item.getName()}
iconName={item.getIcon()}
@@ -103,7 +106,7 @@ export default class SearchApp extends React.Component {
</div>
<Card px={2}>
{types.card.map(item => (
- <Link to={item.getUrl()}>
+ <Link to={item.getUrl()} key={item.id}>
<EntityItem
name={item.getName()}
iconName={item.getIcon()}
@@ -121,7 +124,7 @@ export default class SearchApp extends React.Component {
</div>
<Card px={2}>
{types.pulse.map(item => (
- <Link to={item.getUrl()}>
+ <Link to={item.getUrl()} key={item.id}>
<EntityItem
name={item.getName()}
iconName={item.getIcon()}
diff --git a/frontend/src/metabase/internal/components/ComponentsApp.jsx b/frontend/src/metabase/internal/components/ComponentsApp.jsx
index 9b5d5455a5a5a71fd0f6287ce4505c182b1aaf69..761c82057bde8e54487cfd7011a7b9c054a84bb2 100644
--- a/frontend/src/metabase/internal/components/ComponentsApp.jsx
+++ b/frontend/src/metabase/internal/components/ComponentsApp.jsx
@@ -48,16 +48,13 @@ export default class ComponentsApp extends Component {
))}
</ul>
</nav>
- <div
- className="bg-slate-extra-light flex-full"
- style={{ flex: "66.66%" }}
- >
+ <div className="bg-light flex-full bg-white" style={{ flex: "66.66%" }}>
<div className="p4">
{COMPONENTS.filter(
({ component, description, examples }) =>
!componentName || componentName === slugify(component.name),
- ).map(({ component, description, examples }) => (
- <div id={component.name}>
+ ).map(({ component, description, examples }, index) => (
+ <div id={component.name} key={index}>
<h2>
<Link
to={`_internal/components/${slugify(component.name)}`}
diff --git a/frontend/src/metabase/lib/formatting.js b/frontend/src/metabase/lib/formatting.js
index aaecec0d4f322965cb202bcb2a18d273a9a8b3e5..7550cc1329835ee0af755aa3dc7ec41666e66015 100644
--- a/frontend/src/metabase/lib/formatting.js
+++ b/frontend/src/metabase/lib/formatting.js
@@ -467,7 +467,7 @@ export function assignUserColors(
"bg-error",
"bg-green",
"bg-gold",
- "bg-grey-2",
+ "bg-medium",
],
) {
let assignments = {};
diff --git a/frontend/src/metabase/lib/utils.js b/frontend/src/metabase/lib/utils.js
index a1077a37bffb2bf78e8ad408cb34bf5163d9fa37..9304214d0db0b6eef47b71d1871a873a22868c4d 100644
--- a/frontend/src/metabase/lib/utils.js
+++ b/frontend/src/metabase/lib/utils.js
@@ -1,6 +1,39 @@
import generatePassword from "password-generator";
import { t } from "c-3po";
+const LAYOUT_PROPS = [
+ "m",
+ "ml",
+ "mr",
+ "mt",
+ "mb",
+ "mx",
+ "my",
+ "p",
+ "pl",
+ "pr",
+ "pt",
+ "pb",
+ "px",
+ "py",
+ "bg",
+ "color",
+ "hover",
+ "bordered",
+];
+
+export function stripLayoutProps(props) {
+ const newProps = props;
+
+ LAYOUT_PROPS.map(l => {
+ if (Object.keys(newProps).includes(l)) {
+ delete newProps[l];
+ }
+ });
+
+ return newProps;
+}
+
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
diff --git a/frontend/src/metabase/nav/containers/Navbar.jsx b/frontend/src/metabase/nav/containers/Navbar.jsx
index 0a06e8ce43a7739c607058ae4f861e41005ff4e5..cb52ea0b82e5bd9f9e2d12f1000a3b0f654faf51 100644
--- a/frontend/src/metabase/nav/containers/Navbar.jsx
+++ b/frontend/src/metabase/nav/containers/Navbar.jsx
@@ -270,10 +270,11 @@ export default class Navbar extends Component {
</Box>
</Flex>
<Flex ml="auto" align="center" className="relative z2">
- <Link to={Urls.newQuestion()} mx={2}>
+ <Link to={Urls.newQuestion()} mx={2} className="hide sm-show">
<Button medium>{t`Ask a question`}</Button>
</Link>
<EntityMenu
+ className="hide sm-show"
triggerIcon="add"
items={[
{
diff --git a/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx b/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx
index 783ff8bcf8f813dafa6e84ee0fa8f767ac7e6aa8..64ad10bfe22ee3c6b1a80d97abd473ff2964897b 100644
--- a/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx
+++ b/frontend/src/metabase/public/components/widgets/AdvancedSettingsPane.jsx
@@ -64,10 +64,7 @@ const AdvancedSettingsPane = ({
onChangeParameterValue,
}: Props) => (
<div
- className={cx(
- className,
- "p4 full-height flex flex-column bg-slate-extra-light",
- )}
+ className={cx(className, "p4 full-height flex flex-column bg-light")}
style={{ width: 400 }}
>
<Section title={t`Style`}>
diff --git a/frontend/src/metabase/pulse/components/PulseEditChannels.jsx b/frontend/src/metabase/pulse/components/PulseEditChannels.jsx
index 6dd43b1d1a6e16d2c117f848193f39873b85c140..cfb60fd8475ef7d1529c252f9bf90f6d0844ce48 100644
--- a/frontend/src/metabase/pulse/components/PulseEditChannels.jsx
+++ b/frontend/src/metabase/pulse/components/PulseEditChannels.jsx
@@ -276,7 +276,7 @@ export default class PulseEditChannels extends Component {
/>
</div>
{channels.length > 0 && channelSpec.configured ? (
- <ul className="bg-grey-0 px3">{channels}</ul>
+ <ul className="bg-light px3">{channels}</ul>
) : channels.length > 0 && !channelSpec.configured ? (
<div className="p4 text-centered">
<h3 className="mb2">{t`${
diff --git a/frontend/src/metabase/pulse/components/PulseListItem.jsx b/frontend/src/metabase/pulse/components/PulseListItem.jsx
index db66a0ca628d6e55e9a7f5112a446dcfbe39e5f8..245f15b3ae54c0e8b57b5a9a93714d33db995a97 100644
--- a/frontend/src/metabase/pulse/components/PulseListItem.jsx
+++ b/frontend/src/metabase/pulse/components/PulseListItem.jsx
@@ -68,7 +68,7 @@ export default class PulseListItem extends Component {
</li>
))}
</ol>
- <ul className="border-top px4 bg-grey-0">
+ <ul className="border-top px4 bg-light">
{pulse.channels.filter(channel => channel.enabled).map(channel => (
<li key={channel.id} className="border-row-divider">
<PulseListChannel
diff --git a/frontend/src/metabase/query_builder/components/AlertListPopoverContent.jsx b/frontend/src/metabase/query_builder/components/AlertListPopoverContent.jsx
index 23ebc1abe6eaa1a2828252abb6911d5a33a6499f..1417e6bcb8a39dc29f1fca46c5d2842a60d1a2d6 100644
--- a/frontend/src/metabase/query_builder/components/AlertListPopoverContent.jsx
+++ b/frontend/src/metabase/query_builder/components/AlertListPopoverContent.jsx
@@ -266,7 +266,7 @@ export class AlertListItem extends Component {
export const UnsubscribedListItem = () => (
<li className="border-bottom flex align-center py4 text-bold">
- <div className="circle flex align-center justify-center p1 bg-grey-0 ml2">
+ <div className="circle flex align-center justify-center p1 bg-light ml2">
<Icon name="check" className="text-success" />
</div>
<h3
diff --git a/frontend/src/metabase/query_builder/components/AlertModals.jsx b/frontend/src/metabase/query_builder/components/AlertModals.jsx
index ac628c037dfdbb50b1b08e793b134825e67c005d..5b067c24f741aa2c6dccc3386b3880e076f28587 100644
--- a/frontend/src/metabase/query_builder/components/AlertModals.jsx
+++ b/frontend/src/metabase/query_builder/components/AlertModals.jsx
@@ -557,7 +557,7 @@ export class AlertEditSchedule extends Component {
<div className="bordered rounded mb2">
{alertType === ALERT_TYPE_ROWS && <RawDataAlertTip />}
- <div className="p3 bg-grey-0">
+ <div className="p3 bg-light">
<SchedulePicker
schedule={schedule}
scheduleOptions={["hourly", "daily", "weekly"]}
@@ -652,7 +652,7 @@ export class RawDataAlertTip extends Component {
return (
<div className="border-row-divider p3 flex align-center">
- <div className="circle flex align-center justify-center bg-grey-0 p2 mr2 text-grey-3">
+ <div className="circle flex align-center justify-center bg-light p2 mr2 text-grey-3">
<Icon name="lightbulb" size="20" />
</div>
{showMultiSeriesGoalAlert ? (
diff --git a/frontend/src/metabase/query_builder/components/DataSelector.jsx b/frontend/src/metabase/query_builder/components/DataSelector.jsx
index 1c6cff6889b2e3d399b01e7a7c6d3c69896c13e3..302c631e41372aa113c21a0790d8e742160bc0ad 100644
--- a/frontend/src/metabase/query_builder/components/DataSelector.jsx
+++ b/frontend/src/metabase/query_builder/components/DataSelector.jsx
@@ -697,7 +697,7 @@ export const DatabaseSchemaPicker = ({
const sections = databases.map(database => ({
name: database.name,
items: database.schemas.length > 1 ? database.schemas : [],
- className: database.is_saved_questions ? "bg-slate-extra-light" : null,
+ className: database.is_saved_questions ? "bg-light" : null,
icon: database.is_saved_questions ? "all" : "database",
}));
@@ -817,7 +817,7 @@ export const TablePicker = ({
showItemArrows={hasAdjacentStep}
/>
{isSavedQuestionList && (
- <div className="bg-slate-extra-light p2 text-centered border-top">
+ <div className="bg-light p2 text-centered border-top">
{t`Is a question missing?`}
<a
href="http://metabase.com/docs/latest/users-guide/04-asking-questions.html#source-data"
diff --git a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
index 054f5391eb531a2b83a0e56201d375c3c3b0c0db..5fc6542547384a184a35eda020231ad8f45232ff 100644
--- a/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
+++ b/frontend/src/metabase/visualizations/components/settings/ChartSettingsTableFormatting.jsx
@@ -188,7 +188,7 @@ const RulePreview = ({ rule, cols, onClick, onRemove }) => (
className="my2 bordered rounded shadowed cursor-pointer overflow-hidden bg-white"
onClick={onClick}
>
- <div className="p1 border-bottom relative bg-grey-0">
+ <div className="p1 border-bottom relative bg-light">
<div className="px1 flex align-center relative">
<span className="h4 flex-full text-dark">
{rule.columns.length > 0 ? (
diff --git a/frontend/src/metabase/visualizations/visualizations/Text.jsx b/frontend/src/metabase/visualizations/visualizations/Text.jsx
index 36491ff7ab759355f9829cd6eda267cc14dc5133..d465dfbcae98d256fd7595dffb7fe84e237d10b3 100644
--- a/frontend/src/metabase/visualizations/visualizations/Text.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Text.jsx
@@ -160,7 +160,7 @@ export default class Text extends Component {
) : (
<textarea
className={cx(
- "full flex-full flex flex-column bg-grey-0 bordered drag-disabled",
+ "full flex-full flex flex-column bg-light bordered drag-disabled",
styles["text-card-textarea"],
)}
name="text"
diff --git a/frontend/test/internal/__snapshots__/components.unit.spec.js.snap b/frontend/test/internal/__snapshots__/components.unit.spec.js.snap
index 70fb8030fb5b216bb6e5ccefa1a879224d149b02..75d61bedb0fda48283ce79007bd969091ebf73f8 100644
--- a/frontend/test/internal/__snapshots__/components.unit.spec.js.snap
+++ b/frontend/test/internal/__snapshots__/components.unit.spec.js.snap
@@ -2,7 +2,7 @@
exports[`Card should render "dark" correctly 1`] = `
<div
- className="Card-RQot jvlGhM"
+ className="Card-RQot fgzjUV"
>
<div
className="p4"
@@ -14,7 +14,7 @@ exports[`Card should render "dark" correctly 1`] = `
exports[`Card should render "hoverable" correctly 1`] = `
<div
- className="Card-RQot lhSKsP"
+ className="Card-RQot gCQWtx"
>
<div
className="p4"
@@ -26,7 +26,7 @@ exports[`Card should render "hoverable" correctly 1`] = `
exports[`Card should render "normal" correctly 1`] = `
<div
- className="Card-RQot eykJzW"
+ className="Card-RQot krKrLM"
>
<div
className="p4"
@@ -988,7 +988,7 @@ exports[`TokenField should render "" correctly 1`] = `
className="mr1"
>
<div
- className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-grey-0-hover"
+ className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-light-hover"
onClick={[Function]}
onMouseDown={[Function]}
>
@@ -1001,7 +1001,7 @@ exports[`TokenField should render "" correctly 1`] = `
className="mr1"
>
<div
- className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-grey-0-hover"
+ className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-light-hover"
onClick={[Function]}
onMouseDown={[Function]}
>
@@ -1014,7 +1014,7 @@ exports[`TokenField should render "" correctly 1`] = `
className="mr1"
>
<div
- className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-grey-0-hover"
+ className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-light-hover"
onClick={[Function]}
onMouseDown={[Function]}
>
@@ -1027,7 +1027,7 @@ exports[`TokenField should render "" correctly 1`] = `
className="mr1"
>
<div
- className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-grey-0-hover"
+ className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-light-hover"
onClick={[Function]}
onMouseDown={[Function]}
>
@@ -1078,7 +1078,7 @@ exports[`TokenField should render "updateOnInputChange" correctly 1`] = `
className="mr1"
>
<div
- className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-grey-0-hover"
+ className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-light-hover"
onClick={[Function]}
onMouseDown={[Function]}
>
@@ -1091,7 +1091,7 @@ exports[`TokenField should render "updateOnInputChange" correctly 1`] = `
className="mr1"
>
<div
- className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-grey-0-hover"
+ className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-light-hover"
onClick={[Function]}
onMouseDown={[Function]}
>
@@ -1104,7 +1104,7 @@ exports[`TokenField should render "updateOnInputChange" correctly 1`] = `
className="mr1"
>
<div
- className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-grey-0-hover"
+ className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-light-hover"
onClick={[Function]}
onMouseDown={[Function]}
>
@@ -1117,7 +1117,7 @@ exports[`TokenField should render "updateOnInputChange" correctly 1`] = `
className="mr1"
>
<div
- className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-grey-0-hover"
+ className="py1 pl1 pr2 block rounded text-bold text-brand-hover inline-block full cursor-pointer bg-light-hover"
onClick={[Function]}
onMouseDown={[Function]}
>
diff --git a/src/metabase/models/collection.clj b/src/metabase/models/collection.clj
index 09d5a673c38b33668676983628fe42b8e8eaaa02..0376b0fdcac430da13a8fdf0f6f446f13f817fd4 100644
--- a/src/metabase/models/collection.clj
+++ b/src/metabase/models/collection.clj
@@ -1008,7 +1008,12 @@
{:batched-hydrate :personal_collection_id}
[users]
(when (seq users)
+ ;; efficiently create a map of user ID -> personal collection ID
(let [user-id->collection-id (db/select-field->id :personal_owner_id Collection
:personal_owner_id [:in (set (map u/get-id users))])]
+ ;; now for each User, try to find the corresponding ID out of that map. If it's not present (the personal
+ ;; Collection hasn't been created yet), then instead call `user->personal-collection-id`, which will create it
+ ;; as a side-effect. This will ensure this property never comes back as `nil`
(for [user users]
- (assoc user :personal_collection_id (user-id->collection-id (u/get-id user)))))))
+ (assoc user :personal_collection_id (or (user-id->collection-id (u/get-id user))
+ (user->personal-collection-id (u/get-id user))))))))
diff --git a/test/metabase/models/collection_test.clj b/test/metabase/models/collection_test.clj
index 766410e9d8239b9993d279291410593a09bfbb59..159aad11adb1bc08ce9f7bf9dd03946b43cf2f7e 100644
--- a/test/metabase/models/collection_test.clj
+++ b/test/metabase/models/collection_test.clj
@@ -7,14 +7,16 @@
[card :refer [Card]]
[collection :as collection :refer [Collection]]
[dashboard :refer [Dashboard]]
- [permissions :refer [Permissions] :as perms]
+ [permissions :as perms :refer [Permissions]]
[permissions-group :as group :refer [PermissionsGroup]]
[pulse :refer [Pulse]]
[user :refer [User]]]
[metabase.test.data.users :as test-users]
[metabase.test.util :as tu]
[metabase.util :as u]
- [toucan.db :as db]
+ [toucan
+ [db :as db]
+ [hydrate :refer [hydrate]]]
[toucan.util.test :as tt]))
(defn force-create-personal-collections!
@@ -1460,6 +1462,13 @@
(let [personal-collection (collection/user->personal-collection my-cool-user)]
(db/update! Collection (u/get-id personal-collection) :personal_owner_id (test-users/user->id :crowberto)))))
+;; Does hydrating `:personal_collection_id` force creation of Personal Collections?
+(expect
+ (tt/with-temp User [temp-user]
+ (-> (hydrate temp-user :personal_collection_id)
+ :personal_collection_id
+ integer?)))
+
;;; +----------------------------------------------------------------------------------------------------------------+
;;; | Moving Collections "Across the Boundary" |