diff --git a/frontend/src/metabase/core/components/Button/Button.tsx b/frontend/src/metabase/core/components/Button/Button.tsx
index 8a433f58679dae9f01114fb13cb5b7a5069166d0..896926f3a55466a017d2803400c8498bbc846e58 100644
--- a/frontend/src/metabase/core/components/Button/Button.tsx
+++ b/frontend/src/metabase/core/components/Button/Button.tsx
@@ -12,6 +12,7 @@ const BUTTON_VARIANTS = [
"large",
"round",
"primary",
+ "secondary",
"danger",
"warning",
"cancel",
@@ -38,6 +39,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
large?: boolean;
primary?: boolean;
+ secondary?: boolean;
success?: boolean;
danger?: boolean;
warning?: boolean;
diff --git a/frontend/src/metabase/css/components/buttons.css b/frontend/src/metabase/css/components/buttons.css
index ead6da123c46bec53d39992f2b9eaec57448ad3b..e8ca35a78145d124b1c876d7badc99b09e2f4620 100644
--- a/frontend/src/metabase/css/components/buttons.css
+++ b/frontend/src/metabase/css/components/buttons.css
@@ -73,6 +73,28 @@
background-color: color-mod(var(--color-brand) alpha(-12%));
}
+.Button--secondary {
+ color: var(--color-text-dark);
+ background-color: transparent;
+ border: 1px solid var(--color-border);
+}
+
+.Button--secondary:hover {
+ color: var(--color-text-dark);
+ background-color: transparent;
+ border: 1px solid transparent;
+ outline: 2px solid var(--color-outline);
+ transition: none;
+}
+
+.Button--secondary:focus {
+ outline: 2px solid var(--color-outline);
+}
+
+.Button.Button--secondary:focus:not(:focus-visible):hover {
+ outline: 2px solid var(--color-outline);
+}
+
.Button--warning {
color: var(--color-text-white);
background: var(--color-error);
diff --git a/frontend/src/metabase/css/core/colors.css b/frontend/src/metabase/css/core/colors.css
index 5cffdd5e9ca20480e03aafda6a5ead000302a091..d217292f32c504c57592b90b8fe60b4cc58ff0e3 100644
--- a/frontend/src/metabase/css/core/colors.css
+++ b/frontend/src/metabase/css/core/colors.css
@@ -30,6 +30,7 @@
--color-bg-yellow: #fffcf2;
--color-shadow: rgba(0, 0, 0, 0.13);
--color-border: #f0f0f0;
+ --color-outline: #cbe7ff;
/* Saturated colors for the SQL editor. Shouldn't be used elsewhere since they're not white-labelable. */
--color-saturated-blue: #2d86d4;
diff --git a/frontend/src/metabase/lib/colors.ts b/frontend/src/metabase/lib/colors.ts
index 9c0c41212a7ee89c08f6144b8d0ec42cc3756513..73ab55b5973be2993a55b06924d60048857ca345 100644
--- a/frontend/src/metabase/lib/colors.ts
+++ b/frontend/src/metabase/lib/colors.ts
@@ -35,6 +35,7 @@ const colors: Record<string, string> = {
"bg-yellow": "#FFFCF2",
shadow: "rgba(0,0,0,0.08)",
border: "#F0F0F0",
+ outline: "#CBE7FF",
/* Saturated colors for the SQL editor. Shouldn't be used elsewhere since they're not white-labelable. */
"saturated-blue": "#2D86D4",
diff --git a/frontend/src/metabase/query_builder/components/view/NativeQueryButton.jsx b/frontend/src/metabase/query_builder/components/view/NativeQueryButton.jsx
index 0b44b47086c76ccfd2bc862426a9fdc132571b18..7fe8f81503ab557d3e06a6ae639eaa855baf187e 100644
--- a/frontend/src/metabase/query_builder/components/view/NativeQueryButton.jsx
+++ b/frontend/src/metabase/query_builder/components/view/NativeQueryButton.jsx
@@ -2,6 +2,7 @@
import React from "react";
import { t } from "ttag";
import _ from "underscore";
+import cx from "classnames";
import Modal from "metabase/components/Modal";
import Button from "metabase/core/components/Button";
@@ -88,7 +89,11 @@ export default class NativeQueryButton extends React.Component {
title={title}
footer={
loading || error ? null : (
- <Button primary onClick={this.handleConvert}>
+ <Button
+ primary
+ className={cx("text-dark")}
+ onClick={this.handleConvert}
+ >
{button}
</Button>
)
diff --git a/frontend/src/metabase/query_builder/components/view/QuestionFilters.jsx b/frontend/src/metabase/query_builder/components/view/QuestionFilters.jsx
index 4cea5e838754bb045a70ecda961af39f14ac1364..dfecaf95536fd98b114f6ce133e90d1e5f9ad017 100644
--- a/frontend/src/metabase/query_builder/components/view/QuestionFilters.jsx
+++ b/frontend/src/metabase/query_builder/components/view/QuestionFilters.jsx
@@ -9,21 +9,16 @@ import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
import FilterPopover from "metabase/query_builder/components/filters/FilterPopover";
import ViewPill from "./ViewPill";
import ViewButton from "./ViewButton";
+import {
+ HeaderButton,
+ FilterHeaderContainer,
+ FilterHeaderButton,
+} from "./ViewHeader.styled";
import { color } from "metabase/lib/colors";
const FilterPill = props => <ViewPill color={color("filter")} {...props} />;
-const FilterButton = props => (
- <ViewButton
- medium
- icon="filter"
- color={color("filter")}
- labelBreakpoint="sm"
- {...props}
- />
-);
-
export default function QuestionFilters({
className,
question,
@@ -85,6 +80,74 @@ export default function QuestionFilters({
);
}
+export function FilterHeaderToggle({
+ className,
+ question,
+ onExpand,
+ expanded,
+ onCollapse,
+}) {
+ const query = question.query();
+ const filters = query.topLevelFilters();
+ if (filters.length === 0) {
+ return null;
+ }
+ return (
+ <div className={className}>
+ <Tooltip tooltip={expanded ? t`Hide filters` : t`Show filters`}>
+ <FilterHeaderButton
+ small
+ rounded
+ icon="filter"
+ onClick={expanded ? onCollapse : onExpand}
+ active={expanded}
+ data-testid="filters-visibility-control"
+ >
+ <span>{filters.length}</span>
+ </FilterHeaderButton>
+ </Tooltip>
+ </div>
+ );
+}
+
+export function FilterHeader({ className, question, expanded }) {
+ const query = question.query();
+ const filters = query.topLevelFilters();
+ if (filters.length === 0 || !expanded) {
+ return null;
+ }
+ return (
+ <FilterHeaderContainer className={className}>
+ <div className="flex flex-wrap align-center">
+ {filters.map((filter, index) => (
+ <PopoverWithTrigger
+ key={index}
+ triggerElement={
+ <FilterPill
+ onRemove={() => filter.remove().update(null, { run: true })}
+ >
+ {filter.displayName()}
+ </FilterPill>
+ }
+ triggerClasses="flex flex-no-shrink align-center mr1 mb1"
+ sizeToFit
+ >
+ <FilterPopover
+ isTopLevel
+ query={query}
+ filter={filter}
+ onChangeFilter={newFilter =>
+ newFilter.replace().update(null, { run: true })
+ }
+ className="scroll-y"
+ />
+ </PopoverWithTrigger>
+ ))}
+ </div>
+ </FilterHeaderContainer>
+ );
+}
+
export function QuestionFilterWidget({
isShowingFilterSidebar,
onAddFilter,
@@ -92,13 +155,39 @@ export function QuestionFilterWidget({
...props
}) {
return (
- <FilterButton
+ <HeaderButton
+ large
+ secondary
+ labelBreakpoint="sm"
+ color={color("filter")}
onClick={isShowingFilterSidebar ? onCloseFilter : onAddFilter}
active={isShowingFilterSidebar}
{...props}
>
{t`Filter`}
- </FilterButton>
+ </HeaderButton>
+ );
+}
+
+export function MobileQuestionFilterWidget({
+ isShowingFilterSidebar,
+ onAddFilter,
+ onCloseFilter,
+ ...props
+}) {
+ return (
+ <ViewButton
+ large
+ primary
+ color={color("filter")}
+ labelBreakpoint="sm"
+ icon="filter"
+ onClick={isShowingFilterSidebar ? onCloseFilter : onAddFilter}
+ active={isShowingFilterSidebar}
+ {...props}
+ >
+
+ </ViewButton>
);
}
diff --git a/frontend/src/metabase/query_builder/components/view/QuestionNotebookButton.jsx b/frontend/src/metabase/query_builder/components/view/QuestionNotebookButton.jsx
index 7a597e0de8fdac114df2ada9c2af5caca8599fa3..6810e106410bed07bf7f6b49e08d3af08a2af891 100644
--- a/frontend/src/metabase/query_builder/components/view/QuestionNotebookButton.jsx
+++ b/frontend/src/metabase/query_builder/components/view/QuestionNotebookButton.jsx
@@ -23,7 +23,7 @@ export default function QuestionNotebookButton({
borderless={!isShowingNotebook}
primary={isShowingNotebook}
medium
- className={cx(className, {
+ className={cx(className, "text-dark", {
"text-brand-hover": !isShowingNotebook,
})}
icon="notebook"
diff --git a/frontend/src/metabase/query_builder/components/view/QuestionSummaries.jsx b/frontend/src/metabase/query_builder/components/view/QuestionSummaries.jsx
index c468c074c731eacc3fbefa8d5d6fd925694cd1c1..08e931ce77fbfad84c87071d1b678d96f4b2077e 100644
--- a/frontend/src/metabase/query_builder/components/view/QuestionSummaries.jsx
+++ b/frontend/src/metabase/query_builder/components/view/QuestionSummaries.jsx
@@ -6,6 +6,7 @@ import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
import ViewPill from "./ViewPill";
import ViewButton from "./ViewButton";
+import { HeaderButton } from "./ViewHeader.styled";
import SummarizeSidebar from "./sidebars/SummarizeSidebar/SummarizeSidebar";
@@ -14,18 +15,6 @@ import { color } from "metabase/lib/colors";
const SummarizePill = props => (
<ViewPill icon="insight" color={color("accent1")} {...props} />
);
-
-const SummarizeButton = props => (
- <ViewButton
- medium
- data-testid="toggle-summarize-sidebar-button"
- icon="insight"
- color={color("accent1")}
- labelBreakpoint="sm"
- {...props}
- />
-);
-
export default function QuestionSummaries({
question,
onEditSummary,
@@ -48,7 +37,12 @@ export function QuestionSummarizeWidget({
...props
}) {
return (
- <SummarizeButton
+ <HeaderButton
+ large
+ secondary
+ data-testid="toggle-summarize-sidebar-button"
+ color={color("accent1")}
+ labelBreakpoint="sm"
onClick={async () => {
if (isShowingSummarySidebar) {
onCloseSummary();
@@ -60,7 +54,36 @@ export function QuestionSummarizeWidget({
{...props}
>
{t`Summarize`}
- </SummarizeButton>
+ </HeaderButton>
+ );
+}
+
+export function MobileQuestionSummarizeWidget({
+ isShowingSummarySidebar,
+ onEditSummary,
+ onCloseSummary,
+ ...props
+}) {
+ return (
+ <ViewButton
+ medium
+ primary
+ icon="insight"
+ data-testid="toggle-summarize-sidebar-button"
+ color={color("accent1")}
+ labelBreakpoint="sm"
+ onClick={async () => {
+ if (isShowingSummarySidebar) {
+ onCloseSummary();
+ } else {
+ onEditSummary();
+ }
+ }}
+ active={isShowingSummarySidebar}
+ {...props}
+ >
+
+ </ViewButton>
);
}
diff --git a/frontend/src/metabase/query_builder/components/view/ViewFooter.jsx b/frontend/src/metabase/query_builder/components/view/ViewFooter.jsx
index 948fce065021b2afda409d4ff30a2cbf4f237f87..6bef3ee36508d2b167d7f6eef6adf8333ac67845 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewFooter.jsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewFooter.jsx
@@ -20,8 +20,14 @@ import QuestionEmbedWidget, {
QuestionEmbedWidgetTrigger,
} from "metabase/query_builder/containers/QuestionEmbedWidget";
-import { QuestionFilterWidget } from "./QuestionFilters";
-import { QuestionSummarizeWidget } from "./QuestionSummaries";
+import {
+ QuestionFilterWidget,
+ MobileQuestionFilterWidget,
+} from "./QuestionFilters";
+import {
+ QuestionSummarizeWidget,
+ MobileQuestionSummarizeWidget,
+} from "./QuestionSummaries";
import QuestionRowCount from "./QuestionRowCount";
import QuestionLastUpdated from "./QuestionLastUpdated";
@@ -70,7 +76,7 @@ const ViewFooter = ({
className="flex-full"
left={[
QuestionFilterWidget.shouldRender({ question, queryBuilderMode }) && (
- <QuestionFilterWidget
+ <MobileQuestionFilterWidget
className="sm-hide"
mr={1}
p={2}
@@ -83,7 +89,7 @@ const ViewFooter = ({
question,
queryBuilderMode,
}) && (
- <QuestionSummarizeWidget
+ <MobileQuestionSummarizeWidget
className="sm-hide"
mr={1}
p={2}
diff --git a/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx b/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx
index d763a188d449b07a268f3b57b0be7f2c851ecf53..34cfed53521c02757a048e28922cf1da5fc605ac 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewHeader.jsx
@@ -25,7 +25,11 @@ import QuestionDescription from "./QuestionDescription";
import QuestionLineage from "./QuestionLineage";
import QuestionPreviewToggle from "./QuestionPreviewToggle";
import QuestionNotebookButton from "./QuestionNotebookButton";
-import QuestionFilters, { QuestionFilterWidget } from "./QuestionFilters";
+import QuestionFilters, {
+ FilterHeaderToggle,
+ FilterHeader,
+ QuestionFilterWidget,
+} from "./QuestionFilters";
import { QuestionSummarizeWidget } from "./QuestionSummaries";
import NativeQueryButton from "./NativeQueryButton";
import ViewSection from "./ViewSection";
@@ -115,55 +119,47 @@ export function ViewTitleHeader(props) {
.topLevelQuery()
.hasAggregations();
- const showFiltersInHeading = !isSummarized && !areFiltersExpanded;
-
return (
- <ViewHeaderContainer className={className} style={style}>
- {isDataset ? (
- <DatasetLeftSide
- {...props}
- areFiltersExpanded={areFiltersExpanded}
- onExpandFilters={expandFilters}
- onCollapseFilters={collapseFilters}
- />
- ) : isSaved ? (
- <SavedQuestionLeftSide
- {...props}
- lastEditInfo={lastEditInfo}
- areFiltersExpanded={areFiltersExpanded}
- onExpandFilters={expandFilters}
- onCollapseFilters={collapseFilters}
- />
- ) : (
- <AhHocQuestionLeftSide
+ <>
+ <ViewHeaderContainer className={className} style={style}>
+ {isDataset ? (
+ <DatasetLeftSide {...props} />
+ ) : isSaved ? (
+ <SavedQuestionLeftSide {...props} lastEditInfo={lastEditInfo} />
+ ) : (
+ <AhHocQuestionLeftSide
+ {...props}
+ isNative={isNative}
+ isSummarized={isSummarized}
+ />
+ )}
+ <ViewTitleHeaderRightSide
{...props}
+ isSaved={isSaved}
+ isDataset={isDataset}
isNative={isNative}
isSummarized={isSummarized}
areFiltersExpanded={areFiltersExpanded}
- showFiltersInHeading={showFiltersInHeading}
onExpandFilters={expandFilters}
onCollapseFilters={collapseFilters}
/>
+ </ViewHeaderContainer>
+ {QuestionFilters.shouldRender(props) && (
+ <FilterHeader
+ {...props}
+ expanded={areFiltersExpanded}
+ question={question}
+ />
)}
- <ViewTitleHeaderRightSide
- {...props}
- isSaved={isSaved}
- isDataset={isDataset}
- isNative={isNative}
- isSummarized={isSummarized}
- />
- </ViewHeaderContainer>
+ </>
);
}
SavedQuestionLeftSide.propTypes = {
question: PropTypes.object.isRequired,
lastEditInfo: PropTypes.object,
- areFiltersExpanded: PropTypes.bool.isRequired,
isShowingQuestionDetailsSidebar: PropTypes.bool,
isObjectDetail: PropTypes.bool,
- onExpandFilters: PropTypes.func.isRequired,
- onCollapseFilters: PropTypes.func.isRequired,
onOpenQuestionDetails: PropTypes.func.isRequired,
onCloseQuestionDetails: PropTypes.func.isRequired,
onOpenQuestionHistory: PropTypes.func.isRequired,
@@ -172,11 +168,8 @@ SavedQuestionLeftSide.propTypes = {
function SavedQuestionLeftSide(props) {
const {
question,
- areFiltersExpanded,
isObjectDetail,
isShowingQuestionDetailsSidebar,
- onExpandFilters,
- onCollapseFilters,
onOpenQuestionDetails,
onCloseQuestionDetails,
lastEditInfo,
@@ -226,15 +219,6 @@ function SavedQuestionLeftSide(props) {
subHead
/>
)}
- {QuestionFilters.shouldRender(props) && (
- <QuestionFilters
- className="mb1"
- question={question}
- expanded={areFiltersExpanded}
- onExpand={onExpandFilters}
- onCollapse={onCollapseFilters}
- />
- )}
</ViewHeaderLeftSubHeading>
</div>
);
@@ -246,8 +230,6 @@ AhHocQuestionLeftSide.propTypes = {
isNative: PropTypes.bool,
isObjectDetail: PropTypes.bool,
isSummarized: PropTypes.bool,
- areFiltersExpanded: PropTypes.bool,
- showFiltersInHeading: PropTypes.bool,
onExpandFilters: PropTypes.func.isRequired,
onCollapseFilters: PropTypes.func.isRequired,
};
@@ -259,10 +241,6 @@ function AhHocQuestionLeftSide(props) {
isNative,
isObjectDetail,
isSummarized,
- areFiltersExpanded,
- showFiltersInHeading,
- onExpandFilters,
- onCollapseFilters,
} = props;
return (
<div>
@@ -278,15 +256,6 @@ function AhHocQuestionLeftSide(props) {
/>
)}
</AdHocViewHeading>
- {showFiltersInHeading && QuestionFilters.shouldRender(props) && (
- <QuestionFilters
- className="mr2"
- question={question}
- expanded={areFiltersExpanded}
- onExpand={onExpandFilters}
- onCollapse={onCollapseFilters}
- />
- )}
{QuestionLineage.shouldRender(props) && (
<QuestionLineage
question={question}
@@ -304,15 +273,6 @@ function AhHocQuestionLeftSide(props) {
data-metabase-event={`Question Data Source Click`}
/>
)}
- {!showFiltersInHeading && QuestionFilters.shouldRender(props) && (
- <QuestionFilters
- className={cx("mb1", { ml2: isSummarized })}
- question={question}
- expanded={areFiltersExpanded}
- onExpand={onExpandFilters}
- onCollapse={onCollapseFilters}
- />
- )}
</ViewHeaderLeftSubHeading>
</div>
);
@@ -320,11 +280,7 @@ function AhHocQuestionLeftSide(props) {
DatasetLeftSide.propTypes = {
question: PropTypes.object.isRequired,
- areFiltersExpanded: PropTypes.bool.isRequired,
- showFiltersInHeading: PropTypes.bool.isRequired,
isShowingQuestionDetailsSidebar: PropTypes.bool,
- onExpandFilters: PropTypes.func.isRequired,
- onCollapseFilters: PropTypes.func.isRequired,
onOpenQuestionDetails: PropTypes.func.isRequired,
onCloseQuestionDetails: PropTypes.func.isRequired,
};
@@ -332,13 +288,9 @@ DatasetLeftSide.propTypes = {
function DatasetLeftSide(props) {
const {
question,
- areFiltersExpanded,
isShowingQuestionDetailsSidebar,
- showFiltersInHeading,
onOpenQuestionDetails,
onCloseQuestionDetails,
- onExpandFilters,
- onCollapseFilters,
} = props;
const onHeaderClick = useCallback(() => {
@@ -371,27 +323,7 @@ function DatasetLeftSide(props) {
]}
/>
</AdHocViewHeading>
- {showFiltersInHeading && QuestionFilters.shouldRender(props) && (
- <QuestionFilters
- className="mr2"
- question={question}
- expanded={areFiltersExpanded}
- onExpand={onExpandFilters}
- onCollapse={onCollapseFilters}
- />
- )}
</ViewHeaderMainLeftContentContainer>
- <ViewHeaderLeftSubHeading>
- {!showFiltersInHeading && QuestionFilters.shouldRender(props) && (
- <QuestionFilters
- className="mb1"
- question={question}
- expanded={areFiltersExpanded}
- onExpand={onExpandFilters}
- onCollapse={onCollapseFilters}
- />
- )}
- </ViewHeaderLeftSubHeading>
</div>
);
}
@@ -432,6 +364,9 @@ ViewTitleHeaderRightSide.propTypes = {
onEditSummary: PropTypes.func,
onCloseSummary: PropTypes.func,
setQueryBuilderMode: PropTypes.func,
+ areFiltersExpanded: PropTypes.bool,
+ onExpandFilters: PropTypes.func,
+ onCollapseFilters: PropTypes.func,
};
function ViewTitleHeaderRightSide(props) {
@@ -458,6 +393,9 @@ function ViewTitleHeaderRightSide(props) {
onEditSummary,
onCloseSummary,
setQueryBuilderMode,
+ areFiltersExpanded,
+ onExpandFilters,
+ onCollapseFilters,
} = props;
const isShowingNotebook = queryBuilderMode === "notebook";
const hasExploreResultsLink =
@@ -481,6 +419,15 @@ function ViewTitleHeaderRightSide(props) {
{t`Save`}
</SaveButton>
)}
+ {QuestionFilters.shouldRender(props) && (
+ <FilterHeaderToggle
+ className="ml2 mr1"
+ question={question}
+ expanded={areFiltersExpanded}
+ onExpand={onExpandFilters}
+ onCollapse={onCollapseFilters}
+ />
+ )}
{QuestionFilterWidget.shouldRender(props) && (
<QuestionFilterWidget
className="hide sm-show"
@@ -525,7 +472,7 @@ function ViewTitleHeaderRightSide(props) {
{hasExploreResultsLink && <ExploreResultsLink question={question} />}
{isRunnable && !isNativeEditorOpen && (
<RunButtonWithTooltip
- className={cx("text-brand-hover hide", {
+ className={cx("text-brand-hover text-dark hide", {
"sm-show": !isShowingNotebook || isNative,
"text-white-hover": isResultDirty,
})}
diff --git a/frontend/src/metabase/query_builder/components/view/ViewHeader.styled.jsx b/frontend/src/metabase/query_builder/components/view/ViewHeader.styled.jsx
index b257ad03d1149a8f1027301396985d5e199dbd68..5c03d670412f79abf4ba0c9c20797dc824e5bbcf 100644
--- a/frontend/src/metabase/query_builder/components/view/ViewHeader.styled.jsx
+++ b/frontend/src/metabase/query_builder/components/view/ViewHeader.styled.jsx
@@ -1,6 +1,7 @@
import styled from "styled-components";
+import Button from "metabase/core/components/Button";
import Link from "metabase/components/Link";
-import { color } from "metabase/lib/colors";
+import { color, alpha } from "metabase/lib/colors";
import { space } from "metabase/styled-components/theme";
import ViewSection, { ViewSubHeading, ViewHeading } from "./ViewSection";
@@ -53,3 +54,46 @@ export const DatasetHeaderButtonContainer = styled.div`
position: relative;
right: 0.3rem;
`;
+
+export const HeaderButton = styled(Button)`
+ background-color: ${({ active, color = getDefaultColor() }) =>
+ active ? alpha(color, 0.8) : "transparent"};
+ color: ${({ active }) => (active ? "white" : color("text-dark"))};
+ &:hover {
+ background-color: ${({ active, color = getDefaultColor() }) =>
+ active ? alpha(color, 0.8) : "transparent"};
+ color: ${({ active }) => (active ? "white" : color("text-dark"))};
+ }
+ transition: background 300ms linear, border 300ms linear;
+ > .Icon {
+ opacity: 0.6;
+ }
+
+ @media (prefers-reduced-motion) {
+ transition: none;
+ }
+`;
+
+export const FilterHeaderButton = styled(Button)`
+ background-color: ${({ active }) =>
+ active ? alpha(color("filter"), 0.8) : alpha(color("filter"), 0.2)};
+ color: ${({ active }) => (active ? "white" : color("filter"))};
+ border-radius: 99px;
+ padding-top: ${space(0.5)};
+ padding-bottom: ${space(0.5)};
+ &:hover {
+ background-color: ${color("filter")};
+ color: white;
+ }
+ transition: background 300ms linear, border 300ms linear;
+
+ @media (prefers-reduced-motion) {
+ transition: none;
+ }
+`;
+
+const getDefaultColor = () => color("brand");
+
+export const FilterHeaderContainer = styled.div`
+ padding: ${space(2)} ${space(3)} ${space(1)} ${space(3)};
+`;
diff --git a/frontend/test/metabase/scenarios/question/filter.cy.spec.js b/frontend/test/metabase/scenarios/question/filter.cy.spec.js
index da2ed87ae0bd8c62e7cd6d5133fe9c2ca0348634..ef51ec3cfd721ad28e16eaf843b81dda252a0750 100644
--- a/frontend/test/metabase/scenarios/question/filter.cy.spec.js
+++ b/frontend/test/metabase/scenarios/question/filter.cy.spec.js
@@ -902,6 +902,7 @@ describe("scenarios > question > filter", () => {
.check({ force: true }) // the radio input is hidden
.should("be.checked");
cy.button("Update filter").click();
+ cy.wait("@dataset");
});
assertOnTheResult();
@@ -930,9 +931,9 @@ describe("scenarios > question > filter", () => {
addBooleanFilter();
});
- visualize();
-
- assertOnTheResult();
+ visualize(() => {
+ assertOnTheResult();
+ });
});
function addBooleanFilter() {
@@ -945,8 +946,8 @@ describe("scenarios > question > filter", () => {
function assertOnTheResult() {
// Filter name
- cy.findByText(`boolean is ${condition}`);
- cy.findByText(integerAssociatedWithCondition);
+ cy.findByTextEnsureVisible(`boolean is ${condition}`);
+ cy.get(".cellData").should("contain", integerAssociatedWithCondition);
}
});
});