Fix locked parameters in embedded questions (#20635)

frontend/src/metabase/query_builder/containers/QuestionEmbedWidget.jsx

@@ -11,7 +11,8 @@ import EmbedModalContent from "metabase/public/components/widgets/EmbedModalCont
 import * as Urls from "metabase/lib/urls";
 import MetabaseSettings from "metabase/lib/settings";
 import * as MetabaseAnalytics from "metabase/lib/analytics";
-import { getParametersFromCard } from "metabase/parameters/utils/cards";
+import { getValueAndFieldIdPopulatedParametersFromCard } from "metabase/parameters/utils/cards";
+import { getMetadata } from "metabase/selectors/metadata";
 
 import {
   createPublicLink,
@@ -27,12 +28,17 @@ const QuestionEmbedWidgetPropTypes = {
   deletePublicLink: PropTypes.func,
   updateEnableEmbedding: PropTypes.func,
   updateEmbeddingParams: PropTypes.func,
+  metadata: PropTypes.object,
 };
 
 const QuestionEmbedWidgetTriggerPropTypes = {
   onClick: PropTypes.func,
 };
 
+const mapStateToProps = (state, props) => ({
+  metadata: getMetadata(state),
+});
+
 const mapDispatchToProps = {
   createPublicLink,
   deletePublicLink,
@@ -40,7 +46,7 @@ const mapDispatchToProps = {
   updateEmbeddingParams,
 };
 
-@connect(null, mapDispatchToProps)
+@connect(mapStateToProps, mapDispatchToProps)
 export default class QuestionEmbedWidget extends Component {
   render() {
     const {
@@ -50,6 +56,7 @@ export default class QuestionEmbedWidget extends Component {
       deletePublicLink,
       updateEnableEmbedding,
       updateEmbeddingParams,
+      metadata,
       ...props
     } = this.props;
     return (
@@ -58,7 +65,10 @@ export default class QuestionEmbedWidget extends Component {
         className={className}
         resource={card}
         resourceType="question"
-        resourceParameters={getParametersFromCard(card)}
+        resourceParameters={getValueAndFieldIdPopulatedParametersFromCard(
+          card,
+          metadata,
+        )}
         onCreatePublicLink={() => createPublicLink(card)}
         onDisablePublicLink={() => deletePublicLink(card)}
         onUpdateEnableEmbedding={enableEmbedding =>

frontend/test/metabase/scenarios/sharing/reproductions/20634-locked-parameters-in-embedded-question.cy.spec.js

+import { restore } from "__support__/e2e/cypress";
+
+describe("locked parameters in embedded question (metabase#20634)", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+
+    cy.createNativeQuestion({
+      name: "20634",
+      native: {
+        query: "select {{text}}",
+        "template-tags": {
+          text: {
+            id: "abc-123",
+            name: "text",
+            "display-name": "Text",
+            type: "text",
+            default: null,
+          },
+        },
+      },
+    }).then(({ body: { id } }) => {
+      cy.visit(`/question/${id}`);
+      cy.findByTestId("loading-spinner").should("not.exist");
+    });
+  });
+
+  it("should let the user lock parameters to specific values", () => {
+    cy.icon("share").click();
+    cy.findByText("Embed this question in an application").click();
+
+    cy.get(".Modal--full").within(() => {
+      // select the dropdown next to the Text parameter so that we can set the value to "Locked"
+      cy.findByText("Text")
+        .parent()
+        .within(() => {
+          cy.findByText("Disabled").click();
+        });
+    });
+
+    cy.findByText("Locked").click();
+
+    cy.get(".Modal--full").within(() => {
+      // set a parameter value
+      cy.findByPlaceholderText("Text").type("foo{enter}");
+
+      // publish the embedded question so that we can directly navigate to its url
+      cy.findByText("Publish").click();
+    });
+
+    // directly navigate to the embedded question
+    cy.document().then(doc => {
+      const iframe = doc.querySelector("iframe");
+      cy.visit(iframe.src);
+    });
+
+    // verify that the Text parameter doesn't show up but that its value is reflected in the dashcard
+    cy.findByText("Text").should("not.exist");
+    cy.get(".CardVisualization").within(() => {
+      cy.contains("foo");
+    });
+  });
+});