Switch to using enableRequiredBehavior instead of isInsideNativeQuery (#38177)

frontend/src/metabase/parameters/components/ParameterValueWidget.jsx

@@ -2,7 +2,6 @@ import { createRef, Component } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 import cx from "classnames";
-import * as Lib from "metabase-lib";
 
 import {
   getParameterIconName,
@@ -61,6 +60,10 @@ class ParameterValueWidget extends Component {
     dashboard: PropTypes.object,
     question: PropTypes.object,
     setParameterValueToDefault: PropTypes.func,
+    // This means the widget will take care of the default value.
+    // Should be used for dashboards and native questions in the parameter bar,
+    // Don't use in settings sidebars.
+    enableRequiredBehavior: PropTypes.bool,
   };
 
   state = { isFocused: false };
@@ -73,13 +76,14 @@ class ParameterValueWidget extends Component {
   }
 
   onFocusChanged = isFocused => {
-    const { focusChanged: parentFocusChanged } = this.props;
+    const { focusChanged: parentFocusChanged, enableRequiredBehavior } =
+      this.props;
     if (parentFocusChanged) {
       parentFocusChanged(isFocused);
     }
     this.setState({ isFocused });
 
-    if (this.isInsideNativeQuery() && !isFocused) {
+    if (enableRequiredBehavior && !isFocused) {
       this.resetToDefault();
     }
   };
@@ -109,7 +113,7 @@ class ParameterValueWidget extends Component {
     }
 
     const icon =
-      this.isInsideNativeQuery() && this.props.parameter.required
+      this.props.enableRequiredBehavior && this.props.parameter.required
         ? this.getRequiredActionIcon()
         : this.getOptionalActionIcon();
 
@@ -150,15 +154,6 @@ class ParameterValueWidget extends Component {
     }
   }
 
-  isInsideNativeQuery() {
-    const query = this.props.question?.query();
-    if (query) {
-      const { isNative } = Lib.queryDisplayInfo(query);
-      return isNative;
-    }
-    return false;
-  }
-
   render() {
     const { parameter, value, isEditing, placeholder, className } = this.props;
     const { isFocused } = this.state;
@@ -260,6 +255,7 @@ function Widget({
   question,
   dashboard,
   target,
+  enableRequiredBehavior,
 }) {
   const normalizedValue = Array.isArray(value)
     ? value
@@ -302,7 +298,8 @@ function Widget({
     // TODO this is due to ParameterFieldWidget not supporting focusChanged callback.
     const setValueOrDefault = value => {
       const { required, default: defaultValue } = parameter;
-      const shouldUseDefault = required && defaultValue && !value?.length;
+      const shouldUseDefault =
+        enableRequiredBehavior && required && defaultValue && !value?.length;
 
       setValue(shouldUseDefault ? defaultValue : value);
       onPopoverClose();

frontend/src/metabase/parameters/components/ParameterWidget/ParameterWidget.jsx

@@ -34,6 +34,7 @@ export class ParameterWidget extends Component {
       commitImmediately,
       parameters,
       setParameterValueToDefault,
+      enableParameterRequiredBehavior,
     } = this.props;
 
     const isEditingParameter = editingParameter?.id === parameter.id;
@@ -53,6 +54,7 @@ export class ParameterWidget extends Component {
         isFullscreen={isFullscreen}
         commitImmediately={commitImmediately}
         setParameterValueToDefault={setParameterValueToDefault}
+        enableRequiredBehavior={enableParameterRequiredBehavior}
       />
     );
   }
@@ -72,6 +74,7 @@ export class ParameterWidget extends Component {
       setValue,
       children,
       dragHandle,
+      enableParameterRequiredBehavior,
     } = this.props;
 
     const isEditingParameter =
@@ -85,7 +88,7 @@ export class ParameterWidget extends Component {
       return (
         <ParameterFieldSet
           legend={legend}
-          required={Boolean(parameter.required)}
+          required={enableParameterRequiredBehavior && parameter.required}
           noPadding={true}
           fieldHasValueOrFocus={fieldHasValueOrFocus}
           className={className}

frontend/src/metabase/parameters/components/ParametersList.jsx

@@ -49,6 +49,7 @@ function ParametersList({
   setParameterValue,
   setParameterIndex,
   setEditingParameter,
+  enableParameterRequiredBehavior,
 }) {
   const handleSortStart = () => {
     document.body.classList.add("grabbing");
@@ -107,6 +108,7 @@ function ParametersList({
             (value => setParameterValue(valuePopulatedParameter.id, value))
           }
           setParameterValueToDefault={setParameterValueToDefault}
+          enableParameterRequiredBehavior={enableParameterRequiredBehavior}
           commitImmediately={commitImmediately}
           dragHandle={
             isEditing && setParameterIndex ? <SortableParameterHandle /> : null

frontend/src/metabase/parameters/components/SyncedParametersList/SyncedParametersList.jsx

@@ -22,6 +22,7 @@ const propTypes = {
   setParameterIndex: PropTypes.func,
   setEditingParameter: PropTypes.func,
   setParameterValueToDefault: PropTypes.func,
+  enableParameterRequiredBehavior: PropTypes.bool,
 };
 
 export function SyncedParametersList({
@@ -42,6 +43,7 @@ export function SyncedParametersList({
   setParameterIndex,
   setEditingParameter,
   setParameterValueToDefault,
+  enableParameterRequiredBehavior,
 }) {
   useSyncedQueryString(
     () => getParameterValuesBySlug(parameters),
@@ -64,6 +66,7 @@ export function SyncedParametersList({
       setParameterIndex={setParameterIndex}
       setEditingParameter={setEditingParameter}
       setParameterValueToDefault={setParameterValueToDefault}
+      enableParameterRequiredBehavior={enableParameterRequiredBehavior}
     />
   );
 }

frontend/src/metabase/query_builder/components/NativeQueryEditor/NativeQueryEditor.tsx

@@ -805,6 +805,7 @@ export class NativeQueryEditor extends Component<
                 setParameterValue={setParameterValue}
                 setParameterIndex={this.setParameterIndex}
                 setParameterValueToDefault={setParameterValueToDefault}
+                enableParameterRequiredBehavior
               />
             )}
             {query.hasWritePermission() && this.props.setIsNativeEditorOpen && (

frontend/src/metabase/query_builder/components/ResponsiveParametersList.tsx

@@ -19,6 +19,7 @@ interface ResponsiveParametersListProps {
   setParameterValue: (parameterId: string, value: string) => void;
   setParameterValueToDefault: (parameterId: ParameterId) => void;
   setParameterIndex: (parameterId: string, parameterIndex: number) => void;
+  enableParameterRequiredBehavior: boolean;
 }
 
 export const ResponsiveParametersList = ({
@@ -27,6 +28,7 @@ export const ResponsiveParametersList = ({
   setParameterValue,
   setParameterIndex,
   setParameterValueToDefault,
+  enableParameterRequiredBehavior,
 }: ResponsiveParametersListProps) => {
   const [mobileShowParameterList, setShowMobileParameterList] = useState(false);
   const isSmallScreen = useIsSmallScreen();
@@ -81,6 +83,7 @@ export const ResponsiveParametersList = ({
           setParameterValue={setParameterValue}
           setParameterIndex={setParameterIndex}
           setParameterValueToDefault={setParameterValueToDefault}
+          enableParameterRequiredBehavior={enableParameterRequiredBehavior}
           isEditing
           commitImmediately
         />