fix(form-builder): don't refetch the forms for the "used by" modal on…

… changeset change (#2611)
projectcaluma · Jan 25, 2024 · 077e7a0 · 077e7a0
1 parent a2657ba
commit 077e7a0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/packages/form-builder/addon/components/cfb-form-editor/question-usage.js b/packages/form-builder/addon/components/cfb-form-editor/question-usage.js
@@ -11,6 +11,7 @@ export default class CfbFormEditorQuestionUsage extends Component {
   @queryManager apollo;
 
   @tracked modalVisible = false;
+  @tracked _forms = null;
 
   get title() {
     return this.intl.t("caluma.form-builder.question.usage.title", {
@@ -25,18 +26,29 @@ export default class CfbFormEditorQuestionUsage extends Component {
   }
 
   forms = trackedFunction(this, async () => {
+    if (!this.args.slug) {
+      // The shown question hasn't completely loaded yet
+      return [];
+    }
+    if (this._forms) {
+      // we have already fetched the forms previously
+      return this._forms;
+    }
+
     try {
       const forms = await this.apollo.query(
         {
           query: allFormsForQuestionQuery,
           variables: {
-            slug: this.args.model.slug,
+            slug: this.args.slug,
           },
           fetchPolicy: "no-cache",
         },
         "allForms.edges",
       );
 
+      this._forms = forms; // cache the result
+
       return forms;
     } catch (error) {
       console.error(error);

diff --git a/packages/form-builder/addon/components/cfb-form-editor/question.hbs b/packages/form-builder/addon/components/cfb-form-editor/question.hbs
@@ -441,7 +441,10 @@
       {{/if}}
 
       <div class="uk-flex uk-flex-between uk-flex-middle uk-flex-row-reverse">
-        <CfbFormEditor::QuestionUsage @model={{f.model}} class="uk-flex-last" />
+        <CfbFormEditor::QuestionUsage
+          @slug={{changeset-get f.model "slug"}}
+          class="uk-flex-last"
+        />
 
         <f.submit
           @disabled={{f.loading}}

diff --git a/packages/form-builder/tests/integration/components/cfb-form-editor/question-usage-test.js b/packages/form-builder/tests/integration/components/cfb-form-editor/question-usage-test.js
@@ -26,7 +26,7 @@ module(
       this.server.createList("form", 3, { questions: [this.question] });
 
       await render(
-        hbs`<CfbFormEditor::QuestionUsage @model={{this.question}} />`,
+        hbs`<CfbFormEditor::QuestionUsage @slug={{this.question.slug}} />`,
       );
 
       await waitFor("[data-test-show-question-usage-modal-link]");
@@ -49,7 +49,7 @@ module(
       this.server.create("form", { questions: [this.question] });
 
       await render(
-        hbs`<CfbFormEditor::QuestionUsage @model={{this.question}} />`,
+        hbs`<CfbFormEditor::QuestionUsage @slug={{this.question.slug}} />`,
       );
 
       assert.dom("[data-test-show-question-usage-modal-link]").isNotVisible();