22788 fix custom column filter lose their settings when editing dashboards a...

22788 fix custom column filter lose their settings when editing dashboards a second time (#28903) (#28913)

* Refactor: Simplify code

* Fix custom field parameter lose their settings

Ref: https://github.com/metabase/metabase/issues/22788 this fixes the
issue where custom field parameter seems to be unselected when editing
dashboard a second time. The reason is because how current Metabase lib
is handling expression's MBQL. In FE, we uses `["expression", "name",
null] while in BE, we will normalize it to `["expression" "name"]`.

e2e/test/scenarios/dashboard-filters/reproductions/22788-flter-cc-dropped-on-second-edit.cy.spec.js

@@ -10,6 +10,7 @@ import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
 const { PRODUCTS_ID, PRODUCTS } = SAMPLE_DATABASE;
 
 const ccName = "Custom Category";
+const ccDisplayName = "Product.Custom Category";
 
 const questionDetails = {
   name: "22788",
@@ -33,7 +34,7 @@ const dashboardDetails = {
   parameters: [filter],
 };
 
-describe.skip("issue 22788", () => {
+describe("issue 22788", () => {
   beforeEach(() => {
     restore();
     cy.signInAsAdmin();
@@ -76,7 +77,7 @@ describe.skip("issue 22788", () => {
     cy.findByText("Column to filter on")
       .parent()
       .within(() => {
-        cy.findByText(ccName);
+        cy.findByText(ccDisplayName);
       });
 
     saveDashboard();

frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.jsx

@@ -24,10 +24,11 @@ import Question from "metabase-lib/Question";
 import { isDateParameter } from "metabase-lib/parameters/utils/parameter-type";
 import { isVariableTarget } from "metabase-lib/parameters/utils/targets";
 
+import { normalize } from "metabase-lib/queries/utils/normalize";
 import {
   getEditingParameter,
   getParameterTarget,
-  makeGetParameterMappingOptions,
+  getParameterMappingOptions,
 } from "../../../selectors";
 import { setParameterMapping } from "../../../actions";
 
@@ -59,7 +60,7 @@ function formatSelected({ name, sectionName }) {
 const mapStateToProps = (state, props) => ({
   editingParameter: getEditingParameter(state, props),
   target: getParameterTarget(state, props),
-  mappingOptions: makeGetParameterMappingOptions()(state, props),
+  mappingOptions: getParameterMappingOptions(state, props),
   metadata: getMetadata(state),
 });
 
@@ -94,8 +95,8 @@ function DashCardCardParameterMapper({
   const onlyAcceptsSingleValue =
     isVariableTarget(target) && !isDateParameter(editingParameter);
   const isDisabled = mappingOptions.length === 0;
-  const selectedMappingOption = _.find(mappingOptions, o =>
-    _.isEqual(o.target, target),
+  const selectedMappingOption = _.find(mappingOptions, option =>
+    _.isEqual(normalize(option.target), normalize(target)),
   );
 
   const handleChangeTarget = useCallback(

frontend/src/metabase/dashboard/selectors.js

@@ -178,15 +178,12 @@ export const getParameters = createSelector(
   },
 );
 
-export const makeGetParameterMappingOptions = () => {
-  const getParameterMappingOptions = createSelector(
-    [getMetadata, getEditingParameter, getCard, getDashCard],
-    (metadata, parameter, card, dashcard) => {
-      return _getParameterMappingOptions(metadata, parameter, card, dashcard);
-    },
-  );
-  return getParameterMappingOptions;
-};
+export const getParameterMappingOptions = createSelector(
+  [getMetadata, getEditingParameter, getCard, getDashCard],
+  (metadata, parameter, card, dashcard) => {
+    return _getParameterMappingOptions(metadata, parameter, card, dashcard);
+  },
+);
 
 export const getDefaultParametersById = createSelector(
   [getDashboard],