Remove filter sidebar completely (#24164)

* remove filter sidebar completely

* remove more dead code

* fix repro of #15620

frontend/src/metabase-types/store/mocks/qb.ts

@@ -13,7 +13,6 @@ export const createMockQueryBuilderUIControlsState = (
   isRunning: false,
   isQueryComplete: false,
   isShowingSummarySidebar: false,
-  isShowingFilterSidebar: false,
   isShowingChartTypeSidebar: false,
   isShowingChartSettingsSidebar: false,
   isShowingQuestionDetailsSidebar: false,

frontend/src/metabase-types/store/qb.ts

@@ -21,7 +21,6 @@ export interface QueryBuilderUIControls {
   isRunning: boolean;
   isQueryComplete: boolean;
   isShowingSummarySidebar: boolean;
-  isShowingFilterSidebar: boolean;
   isShowingChartTypeSidebar: boolean;
   isShowingChartSettingsSidebar: boolean;
   isShowingQuestionDetailsSidebar: boolean;

frontend/src/metabase/query_builder/actions/ui.js

@@ -40,8 +40,7 @@ export const setQueryBuilderMode =
 
 export const onEditSummary = createAction("metabase/qb/EDIT_SUMMARY");
 export const onCloseSummary = createAction("metabase/qb/CLOSE_SUMMARY");
-export const onAddFilter = createAction("metabase/qb/ADD_FILTER");
-export const onCloseFilter = createAction("metabase/qb/CLOSE_FILTER");
+
 export const onOpenChartSettings = createAction(
   "metabase/qb/OPEN_CHART_SETTINGS",
 );

frontend/src/metabase/query_builder/components/filters/FilterPopover.tsx

@@ -48,7 +48,6 @@ type Props = {
   dateShortcutOptions?: DateShortcutOptions;
   showCustom?: boolean;
   isNew?: boolean;
-  isSidebar?: boolean;
   isTopLevel?: boolean;
   checkedColor?: string;
 };
@@ -166,7 +165,6 @@ export default class FilterPopover extends Component<Props, State> {
       showFieldPicker,
       showOperatorSelector,
       fieldPickerTitle,
-      isSidebar,
       isTopLevel,
       showCustom,
       dateShortcutOptions,
@@ -223,8 +221,8 @@ export default class FilterPopover extends Component<Props, State> {
               // special case for segments
               this.handleCommitFilter(item.filter, item.query);
             }}
-            width={isSidebar ? null : "100%"}
-            alwaysExpanded={isTopLevel || isSidebar}
+            width="100%"
+            alwaysExpanded={isTopLevel}
           />
           {showCustom && (
             <div
@@ -247,7 +245,7 @@ export default class FilterPopover extends Component<Props, State> {
     } else {
       const field = dimension.field();
       const isNew = this.props.isNew || !this.props.filter?.operator();
-      const primaryColor = isSidebar ? color("filter") : color("brand");
+      const primaryColor = color("brand");
       const onBack = () => {
         this.setState({ choosingField: true });
       };
@@ -259,41 +257,37 @@ export default class FilterPopover extends Component<Props, State> {
           {shouldShowDatePicker ? (
             <DatePicker
               className={className}
-              isSidebar={isSidebar}
               filter={filter}
               dateShortcutOptions={dateShortcutOptions}
               primaryColor={primaryColor}
-              minWidth={isSidebar ? null : MIN_WIDTH}
-              maxWidth={isSidebar ? null : MAX_WIDTH}
+              minWidth={MIN_WIDTH}
+              maxWidth={MAX_WIDTH}
               onBack={onBack}
               onCommit={this.handleCommit}
               onFilterChange={this.handleFilterChange}
               disableChangingDimension={!showFieldPicker}
             >
-              {!isSidebar ? (
-                <Button
-                  data-ui-tag="add-filter"
-                  primaryColor={primaryColor}
-                  disabled={!filter.isValid()}
-                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                  // @ts-ignore
-                  ml="auto"
-                  onClick={() => this.handleCommit()}
-                >
-                  {isNew ? t`Add filter` : t`Update filter`}
-                </Button>
-              ) : null}
+              <Button
+                data-ui-tag="add-filter"
+                primaryColor={primaryColor}
+                disabled={!filter.isValid()}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                ml="auto"
+                onClick={() => this.handleCommit()}
+              >
+                {isNew ? t`Add filter` : t`Update filter`}
+              </Button>
             </DatePicker>
           ) : (
-            <div className={isSidebar ? "mx2 pt1" : ""}>
+            <div>
               {field?.isTime() ? (
                 <TimePicker
                   className={className}
-                  isSidebar={isSidebar}
                   filter={filter}
                   primaryColor={primaryColor}
-                  minWidth={isSidebar ? null : MIN_WIDTH}
-                  maxWidth={isSidebar ? null : MAX_WIDTH}
+                  minWidth={MIN_WIDTH}
+                  maxWidth={MAX_WIDTH}
                   onBack={onBack}
                   onCommit={this.handleCommit}
                   onFilterChange={this.handleFilterChange}
@@ -301,7 +295,6 @@ export default class FilterPopover extends Component<Props, State> {
               ) : (
                 <>
                   <FilterPopoverHeader
-                    isSidebar={isSidebar}
                     filter={filter}
                     onFilterChange={this.handleFilterChange}
                     onBack={onBack}
@@ -309,20 +302,18 @@ export default class FilterPopover extends Component<Props, State> {
                     forceShowOperatorSelector={showOperatorSelector}
                   />
                   <FilterPopoverPicker
-                    className={isSidebar ? "p1" : "px1 pt1 pb1"}
-                    isSidebar={isSidebar}
+                    className="px1 pt1 pb1"
                     filter={filter}
                     onFilterChange={this.handleFilterChange}
                     onCommit={this.handleCommit}
-                    maxWidth={isSidebar ? null : MAX_WIDTH}
+                    maxWidth={MAX_WIDTH}
                     primaryColor={primaryColor}
                     checkedColor={checkedColor}
                   />
                 </>
               )}
               <FilterPopoverFooter
-                className={isSidebar ? "p1" : "px1 pb1"}
-                isSidebar={isSidebar}
+                className="px1 pb1"
                 primaryColor={primaryColor}
                 filter={filter}
                 onFilterChange={this.handleFilterChange}

frontend/src/metabase/query_builder/components/filters/FilterPopoverFooter.tsx

@@ -14,7 +14,6 @@ type Props = {
   onFilterChange: (filter: any[]) => void;
   onCommit?: (() => void) | null;
 
-  isSidebar?: boolean;
   minWidth?: number;
   maxWidth?: number;
   isNew?: boolean;
@@ -23,16 +22,12 @@ type Props = {
 export default function FilterPopoverFooter({
   filter,
   isNew,
-  isSidebar,
   onFilterChange,
   onCommit,
   className,
   primaryColor,
 }: Props) {
-  const containerClassName = cx(className, "flex align-center", {
-    PopoverFooter: !isSidebar,
-  });
-
+  const containerClassName = cx(className, "flex align-center PopoverFooter");
   return (
     <div className={containerClassName}>
       <FilterOptions

frontend/src/metabase/query_builder/components/filters/FilterPopoverHeader.tsx

@@ -14,7 +14,6 @@ type Props = {
   filter: Filter;
   onFilterChange: (filter: any[]) => void;
   onBack: () => void;
-  isSidebar?: boolean;
 };
 
 export default function FilterPopoverHeader({
@@ -24,7 +23,6 @@ export default function FilterPopoverHeader({
   filter,
   onFilterChange,
   onBack,
-  isSidebar,
 }: Props) {
   const dimension = filter.dimension();
   if (!dimension) {
@@ -36,7 +34,7 @@ export default function FilterPopoverHeader({
 
   const showOperatorSelector = forceShowOperatorSelector ?? !field.isBoolean();
   const showHeader = showFieldPicker || showOperatorSelector;
-  const showOperatorSelectorOnOwnRow = isSidebar || !showFieldPicker;
+  const showOperatorSelectorOnOwnRow = !showFieldPicker;
 
   const setOperator = (operatorName: string) => {
     if (filter.operatorName() !== operatorName) {
@@ -46,10 +44,8 @@ export default function FilterPopoverHeader({
 
   return showHeader ? (
     <div
-      className={cx(className, "text-medium", {
+      className={cx(className, "text-medium p1 mb1 border-bottom", {
         "flex align-center": !showOperatorSelectorOnOwnRow,
-        "px1 pt1": isSidebar,
-        "p1 mb1 border-bottom": !isSidebar,
       })}
     >
       {showFieldPicker && (

frontend/src/metabase/query_builder/components/filters/FilterPopoverPicker.tsx

@@ -11,7 +11,6 @@ type Props = {
   onFilterChange: (filter: any[]) => void;
   onCommit: (filter: any[]) => void;
 
-  isSidebar?: boolean;
   minWidth?: number | null;
   maxWidth?: number | null;
   primaryColor?: string;
@@ -39,7 +38,6 @@ export default class FilterPopoverPicker extends React.Component<Props> {
       filter,
       onFilterChange,
       onCommit,
-      isSidebar,
       minWidth,
       maxWidth,
       primaryColor,
@@ -64,7 +62,6 @@ export default class FilterPopoverPicker extends React.Component<Props> {
         onFilterChange={onFilterChange}
         minWidth={minWidth}
         maxWidth={maxWidth}
-        isSidebar={isSidebar}
       />
     ) : field?.isBoolean() ? (
       <BooleanPicker
@@ -81,7 +78,6 @@ export default class FilterPopoverPicker extends React.Component<Props> {
         onCommit={onCommit}
         minWidth={minWidth}
         maxWidth={maxWidth}
-        isSidebar={isSidebar}
         checkedColor={checkedColor}
       />
     );

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/DatePicker.tsx

@@ -226,7 +226,6 @@ export function getOperator(filter: Filter, operators = DATE_OPERATORS) {
 }
 
 type Props = {
-  isSidebar?: boolean;
   className?: string;
 
   filter: Filter;
@@ -253,7 +252,6 @@ const DatePicker: React.FC<Props> = props => {
     filter,
     dateShortcutOptions,
     onFilterChange,
-    isSidebar,
     disableOperatorSelection,
     disableChangingDimension,
     primaryColor,
@@ -324,7 +322,6 @@ const DatePicker: React.FC<Props> = props => {
             />
           )}
           <DatePickerFooter
-            isSidebar={isSidebar}
             filter={filter}
             primaryColor={primaryColor}
             onFilterChange={onFilterChange}

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/DatePickerFooter.styled.tsx

@@ -4,17 +4,13 @@ import { space } from "metabase/styled-components/theme";
 
 import Button from "metabase/core/components/Button";
 
-export const Container = styled.div<{ isSidebar?: boolean }>`
+export const Container = styled.div`
   display: flex;
   flex-wrap: no-wrap;
   justify-content: space-between;
   align-items: center;
-  border-top: ${({ isSidebar }) =>
-    isSidebar ? "" : `1px solid ${color("border")}`};
-  padding: ${({ isSidebar }) =>
-    isSidebar
-      ? `0 ${space(2)} 0 ${space(2)}`
-      : `${space(1)} ${space(2)} ${space(2)} ${space(2)}`};
+  border-top: 1px solid ${color("border")};
+  padding: ${space(1)} ${space(2)} ${space(2)} ${space(2)};
 `;
 
 type ToggleButtonProps = {

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/DatePickerFooter.tsx

@@ -18,7 +18,6 @@ import {
 } from "metabase/lib/query_time";
 
 type Props = {
-  isSidebar?: boolean;
   primaryColor?: string;
   hideTimeSelectors?: boolean;
 
@@ -39,7 +38,6 @@ const getIntervalString = (filter: Filter) => {
 
 const DatePickerFooter: React.FC<Props> = ({
   filter,
-  isSidebar,
   primaryColor,
   onFilterChange,
   hideTimeSelectors,
@@ -109,7 +107,7 @@ const DatePickerFooter: React.FC<Props> = ({
   }
 
   return (
-    <Container isSidebar={isSidebar}>
+    <Container>
       {content || <div />}
       {children}
     </Container>

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/RangeDatePicker.styled.tsx

 import styled from "@emotion/styled";
 import { space } from "metabase/styled-components/theme";
 
-export const TimeContainer = styled.div<{ isSidebar?: boolean }>`
+export const TimeContainer = styled.div`
   display: flex;
   grid-gap: ${space(2)};
-  flex-wrap: ${({ isSidebar }) => (isSidebar ? "wrap" : "no-wrap")};
+  flex-wrap: no-wrap;
 `;

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/RangeDatePicker.tsx

@@ -16,7 +16,6 @@ import SingleDatePicker, { SingleDatePickerProps } from "./SingleDatePicker";
 import SpecificDatePicker from "./SpecificDatePicker";
 
 type BetweenPickerProps = {
-  isSidebar?: boolean;
   className?: string;
   primaryColor?: string;
   filter: Filter;
@@ -27,7 +26,6 @@ type BetweenPickerProps = {
 
 export const BetweenPicker = ({
   className,
-  isSidebar,
   filter: [op, field, startValue, endValue],
   onFilterChange,
   hideTimeSelectors,
@@ -43,7 +41,7 @@ export const BetweenPicker = ({
   }
   return (
     <div className={className}>
-      <TimeContainer isSidebar={isSidebar}>
+      <TimeContainer>
         <div>
           <SpecificDatePicker
             value={startValue}

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/SpecificDatePicker.tsx

@@ -15,7 +15,6 @@ import { getTimeComponent, setTimeComponent } from "metabase/lib/query_time";
 
 type Props = {
   className?: string;
-  isSidebar?: boolean;
   primaryColor?: string;
   calendar?: boolean;
   selectAll?: SelectAll;

frontend/src/metabase/query_builder/components/filters/pickers/DefaultPicker.jsx

@@ -33,7 +33,6 @@ const defaultPickerPropTypes = {
   setValues: PropTypes.func,
   onCommit: PropTypes.func,
   className: PropTypes.string,
-  isSidebar: PropTypes.bool,
   minWidth: PropTypes.number,
   maxWidth: PropTypes.number,
   checkedColor: PropTypes.string,
@@ -52,7 +51,6 @@ export default function DefaultPicker({
   className,
   minWidth,
   maxWidth,
-  isSidebar,
   checkedColor,
 }) {
   const operator = filter.operator();
@@ -178,7 +176,7 @@ export default function DefaultPicker({
 
   return (
     <DefaultPickerContainer
-      limitHeight={!isSidebar}
+      limitHeight
       className={cx(className, "PopoverBody--marginBottom")}
     >
       {layout}

frontend/src/metabase/query_builder/components/filters/pickers/DefaultPicker.styled.tsx

@@ -19,16 +19,7 @@ export const BetweenLayoutFieldSeparator = styled.div`
   color: ${color("text-medium")};
 `;
 
-interface DefaultPickerContainerProps {
-  limitHeight: boolean;
-}
-
-export const DefaultPickerContainer = styled.div<DefaultPickerContainerProps>`
-  ${props =>
-    props.limitHeight
-      ? css`
-          max-height: 300px;
-          overflow: auto;
-        `
-      : null}
+export const DefaultPickerContainer = styled.div`
+  max-height: 300px;
+  overflow: auto;
 `;

frontend/src/metabase/query_builder/components/filters/pickers/LegacyDatePicker/DatePicker.jsx

@@ -287,7 +287,6 @@ export default class DatePicker extends Component {
     className: PropTypes.string,
     hideEmptinessOperators: PropTypes.bool,
     hideTimeSelectors: PropTypes.bool,
-    isSidebar: PropTypes.bool,
     operators: PropTypes.array,
     disableOperatorSelection: PropTypes.bool,
   };
@@ -323,13 +322,8 @@ export default class DatePicker extends Component {
   }
 
   render() {
-    const {
-      className,
-      filter,
-      onFilterChange,
-      isSidebar,
-      disableOperatorSelection,
-    } = this.props;
+    const { className, filter, onFilterChange, disableOperatorSelection } =
+      this.props;
 
     const { operators } = this.state;
 
@@ -339,9 +333,8 @@ export default class DatePicker extends Component {
     return (
       <div
         // apply flex to align the operator selector and the "Widget" if necessary
-        className={cx(className, {
+        className={cx(className, "PopoverBody--marginBottom", {
           "flex align-center": Widget && Widget.horizontalLayout,
-          "PopoverBody--marginBottom": !isSidebar,
         })}
         style={{ minWidth: 300 }}
       >

frontend/src/metabase/query_builder/components/filters/pickers/TimePicker/TimePicker.jsx

@@ -36,8 +36,8 @@ const SingleTimePicker = ({ filter, onFilterChange }) => (
 
 SingleTimePicker.horizontalLayout = true;
 
-const MultiTimePicker = ({ filter, onFilterChange, isSidebar }) => (
-  <MultiTimePickerRoot direction={isSidebar ? "column" : "row"}>
+const MultiTimePicker = ({ filter, onFilterChange }) => (
+  <MultiTimePickerRoot>
     <TimeInput
       value={getTime(filter[2])}
       onChange={time =>

frontend/src/metabase/query_builder/components/filters/pickers/TimePicker/TimePicker.styled.tsx

@@ -10,11 +10,7 @@ export const BetweenConnector = styled.span`
   font-weight: 700;
 `;
 
-interface MultiTimePickerRootProps {
-  direction: string;
-}
-
-export const MultiTimePickerRoot = styled.div<MultiTimePickerRootProps>`
+export const MultiTimePickerRoot = styled.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;

frontend/src/metabase/query_builder/components/view/QuestionFilters.jsx

@@ -9,7 +9,7 @@ import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
 import { MODAL_TYPES } from "metabase/query_builder/constants";
 import FilterPopover from "metabase/query_builder/components/filters/FilterPopover";
 import ViewPill from "./ViewPill";
-import ViewButton from "./ViewButton";
+
 import {
   HeaderButton,
   FilterHeaderContainer,
@@ -165,28 +165,6 @@ export function QuestionFilterWidget({ onOpenModal, className }) {
   );
 }
 
-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}
-    >
-      &nbsp;
-    </ViewButton>
-  );
-}
-
 QuestionFilters.shouldRender = ({
   question,
   queryBuilderMode,

frontend/src/metabase/query_builder/components/view/View.jsx

@@ -28,7 +28,6 @@ import QueryModals from "../QueryModals";
 import ChartSettingsSidebar from "./sidebars/ChartSettingsSidebar";
 import ChartTypeSidebar from "./sidebars/ChartTypeSidebar";
 import SummarizeSidebar from "./sidebars/SummarizeSidebar/SummarizeSidebar";
-import FilterSidebar from "./sidebars/FilterSidebar";
 import { QuestionInfoSidebar } from "./sidebars/QuestionInfoSidebar";
 import TimelineSidebar from "./sidebars/TimelineSidebar";
 
@@ -147,7 +146,6 @@ class View extends React.Component {
       timelines,
       isResultDirty,
       isShowingSummarySidebar,
-      isShowingFilterSidebar,
       isShowingTimelineSidebar,
       isShowingQuestionInfoSidebar,
       runQuestionQuery,
@@ -160,7 +158,6 @@ class View extends React.Component {
       deselectTimelineEvents,
       onOpenModal,
       onCloseSummary,
-      onCloseFilter,
       onCloseTimelines,
       onSave,
     } = this.props;
@@ -178,10 +175,6 @@ class View extends React.Component {
       );
     }
 
-    if (isShowingFilterSidebar) {
-      return <FilterSidebar question={question} onClose={onCloseFilter} />;
-    }
-
     if (isShowingTimelineSidebar) {
       return (
         <TimelineSidebar