feat(form-builder): modal which shows in which form the question is used

---------

Co-authored-by: Falk <falk.neumann@adfinis.com>

packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs

@@ -0,0 +1,50 @@
+{{#if this.otherForms}}
+  <a
+    ...attributes
+    href="#"
+    {{on "click" (fn (mut this.modalVisible) true)}}
+    data-test-show-question-usage-modal-link
+  >
+    {{this.title}}
+  </a>
+{{/if}}
+
+<UkModal
+  @visible={{this.modalVisible}}
+  @stack={{true}}
+  @onHide={{fn (mut this.modalVisible) false}}
+  data-test-question-usage-modal
+  as |modal|
+>
+  <modal.header>
+    {{t "caluma.form-builder.question.usage.references-heading"}}
+  </modal.header>
+  <modal.body>
+    <ul class="uk-list uk-list-divider">
+      {{#each this.forms.value as |form|}}
+        <li data-test-question-form-item={{form.node.slug}}>
+          <div class="uk-flex uk-flex-middle">
+            <span class="uk-width-expand">
+              <LinkTo @route="edit" @model={{form.node.slug}}>
+                {{form.node.name}}
+              </LinkTo>
+            </span>
+
+            {{#if form.node.isArchived}}
+              <UkBadge>
+                {{t "caluma.form-builder.form.isArchived"}}
+              </UkBadge>
+            {{/if}}
+
+            {{#unless form.node.isPublished}}
+              <UkBadge class="uk-margin-small-left">
+                {{t "caluma.form-builder.question.usage.not-published"}}
+              </UkBadge>
+            {{/unless}}
+          </div>
+          <div class="uk-text-muted uk-text-small">{{form.node.slug}}</div>
+        </li>
+      {{/each}}
+    </ul>
+  </modal.body>
+</UkModal>

packages/form-builder/addon/components/cfb-form-editor/question-usage.js

@@ -0,0 +1,46 @@
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { queryManager } from "ember-apollo-client";
+import { trackedFunction } from "ember-resources/util/function";
+
+import allFormsForQuestionQuery from "@projectcaluma/ember-form-builder/gql/queries/all-forms-for-question.graphql";
+
+export default class CfbFormEditorQuestionUsage extends Component {
+  @service intl;
+  @queryManager apollo;
+
+  @tracked modalVisible = false;
+
+  get title() {
+    return this.intl.t("caluma.form-builder.question.usage.title", {
+      n: this.otherForms,
+      // for highlighting the number we use the <b> tag
+      htmlSafe: true,
+    });
+  }
+
+  get otherForms() {
+    return this.forms.value?.length - 1 ?? 0;
+  }
+
+  forms = trackedFunction(this, async () => {
+    try {
+      const forms = await this.apollo.query(
+        {
+          query: allFormsForQuestionQuery,
+          variables: {
+            slug: this.args.model.slug,
+          },
+          fetchPolicy: "no-cache",
+        },
+        "allForms.edges",
+      );
+
+      return forms;
+    } catch (error) {
+      console.error(error);
+      return { value: [] };
+    }
+  });
+}

packages/form-builder/addon/components/cfb-form-editor/question.hbs

@@ -440,7 +440,9 @@
         />
       {{/if}}
 
-      <div class="uk-text-right">
+      <div class="uk-flex uk-flex-between uk-flex-middle uk-flex-row-reverse">
+        <CfbFormEditor::QuestionUsage @model={{f.model}} class="uk-flex-last" />
+
         <f.submit
           @disabled={{f.loading}}
           @label={{t "caluma.form-builder.global.save"}}

packages/form-builder/addon/gql/queries/all-forms-for-question.graphql

@@ -0,0 +1,13 @@
+query AllFormsForQuestion($slug: String!) {
+  allForms(filter: [{ questions: [$slug] }]) {
+    edges {
+      node {
+        id
+        slug
+        name
+        isArchived
+        isPublished
+      }
+    }
+  }
+}

packages/form-builder/app/components/cfb-form-editor/question-usage.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form-builder/components/cfb-form-editor/question-usage";

packages/form-builder/tests/acceptance/question-usage-test.js

@@ -0,0 +1,46 @@
+import { visit, click } from "@ember/test-helpers";
+import { setupMirage } from "ember-cli-mirage/test-support";
+import { setupIntl } from "ember-intl/test-support";
+import { module, test } from "qunit";
+
+import { setupApplicationTest } from "dummy/tests/helpers";
+
+module("Acceptance | question usage", function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+  setupIntl(hooks);
+
+  test("can show the question usage", async function (assert) {
+    assert.expect(4);
+
+    const firstForm = this.server.create("form", { slug: "test-form" });
+    const secondForm = this.server.create("form", {
+      slug: "second-form",
+      isArchived: true,
+      isPublished: false,
+    });
+
+    this.server.create("question", {
+      label: "Test Question?",
+      slug: "test-question",
+      type: "TEXT",
+      formIds: [firstForm.id, secondForm.id],
+    });
+
+    await visit("/test-form/questions/test-question");
+
+    await click("[data-test-show-question-usage-modal-link]");
+
+    assert.dom("[data-test-question-usage-modal]").isVisible();
+
+    assert.dom("[data-test-question-form-item='test-form']").exists();
+
+    assert
+      .dom("[data-test-question-form-item='second-form']")
+      .containsText("Archived", "archived status is visible");
+
+    assert
+      .dom("[data-test-question-form-item='second-form']")
+      .containsText("not published", "not published status is visible");
+  });
+});

packages/form-builder/tests/integration/components/cfb-form-editor/question-usage-test.js

@@ -0,0 +1,58 @@
+import { render, click, waitFor } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupMirage } from "ember-cli-mirage/test-support";
+import { setupIntl } from "ember-intl/test-support";
+import { module, test } from "qunit";
+
+import { setupRenderingTest } from "dummy/tests/helpers";
+
+module(
+  "Integration | Component | cfb-form-editor/question-usage",
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupMirage(hooks);
+    setupIntl(hooks);
+
+    test("it renders", async function (assert) {
+      this.set(
+        "question",
+        this.server.create("question", {
+          label: "Test Label",
+          slug: "test-slug",
+          type: "TEXT",
+        }),
+      );
+
+      this.server.createList("form", 3, { questions: [this.question] });
+
+      await render(
+        hbs`<CfbFormEditor::QuestionUsage @model={{this.question}} />`,
+      );
+
+      await waitFor("[data-test-show-question-usage-modal-link]");
+      await click("[data-test-show-question-usage-modal-link]");
+
+      assert.dom("[data-test-question-usage-modal]").isVisible();
+      assert.dom("[data-test-question-form-item]").exists({ count: 3 });
+    });
+
+    test("it is hidden when no other reference to this question exists", async function (assert) {
+      this.set(
+        "question",
+        this.server.create("question", {
+          label: "Test Label",
+          slug: "test-slug",
+          type: "TEXT",
+        }),
+      );
+
+      this.server.create("form", { questions: [this.question] });
+
+      await render(
+        hbs`<CfbFormEditor::QuestionUsage @model={{this.question}} />`,
+      );
+
+      assert.dom("[data-test-show-question-usage-modal-link]").isNotVisible();
+    });
+  },
+);

packages/form-builder/translations/de.yaml

@@ -134,6 +134,11 @@ caluma:
 
       hideLabel: "Label verstecken"
 
+      usage:
+        title: "Diese Frage wird in {n,plural, =1 {<b>einem</b> Formular} other {<b>#</b> Formularen}} verwendet."
+        references-heading: "Alle Verweise auf diese Frage"
+        not-published: "nicht publiziert"
+
     options:
       delete: "Option löschen"
       archive: "Option archivieren (verstecken)"

packages/form-builder/translations/en.yaml

@@ -134,6 +134,11 @@ caluma:
 
       hideLabel: "Hide label"
 
+      usage:
+        title: "This question is used in {n,plural, =1 {<b>another</b> form} other {<b>#</b> other forms}}"
+        references-heading: "All references of this question"
+        not-published: "not published"
+
     options:
       delete: "Delete option"
       archive: "Archive (hide) option"

packages/form-builder/translations/fr.yaml

@@ -134,6 +134,11 @@ caluma:
 
       hideLabel: "Cacher l'étiquette"
 
+      usage:
+        title: "Cette question est {n,plural, =1 {utilisé sous <b>une</b> forme} other {utilisé sous <b>#</b> formes}}."
+        references-heading: "Toutes les références à cette question"
+        not-published: "non publié"
+
     options:
       delete: "Supprimer l'option"
       archive: "Archiver (masquer) l'option"