feat: modal which shows in which form the question is used

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

@@ -0,0 +1,56 @@
+<UkButton
+  {{on "click" (fn (mut this.modalVisible) true)}}
+  data-test-show-question-usage-modal-btn
+>
+  {{t "caluma.form-builder.question.usage.button"}}
+</UkButton>
+
+<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.title"}}
+  </modal.header>
+  <modal.body>
+    {{#if this.forms.isLoading}}
+      <div class="uk-text-center">
+        <UkSpinner @ratio={{1}} />
+      </div>
+    {{else}}
+      <ul class="uk-list uk-list-divider" id="question-list">
+        {{#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>
+        {{else}}
+          <li class="uk-text-muted">
+            {{t "caluma.form-builder.question.usage.no-forms-found"}}
+          </li>
+        {{/each}}
+      </ul>
+    {{/if}}
+  </modal.body>
+</UkModal>

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

@@ -0,0 +1,29 @@
+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 {
+  @tracked modalVisible = false;
+  @queryManager apollo;
+
+  forms = trackedFunction(this, async () => {
+    if (!this.modalVisible) {
+      return null;
+    }
+
+    const forms = await this.apollo.query(
+      {
+        query: allFormsForQuestionQuery,
+        variables: {
+          slug: this.args.model.slug,
+        },
+      },
+      "allForms.edges",
+    );
+
+    return forms;
+  });
+}

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

@@ -435,6 +435,8 @@
       {{/if}}
 
       <div class="uk-text-right">
+        <CfbFormEditor::QuestionUsage @model={{f.model}} />
+
         <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/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-btn]");
+
+    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/translations/de.yaml

@@ -133,6 +133,12 @@ caluma:
 
       hideLabel: "Label verstecken"
 
+      usage:
+        button: "Formulare mit dieser Frage"
+        title: "Formulare mit dieser Frage"
+        no-forms-found: "Es wurde keine Formular gefunden welche diese Frage verwenden"
+        not-published: "nicht publiziert"
+
     options:
       delete: "Option löschen"
       archive: "Option archivieren (verstecken)"

packages/form-builder/translations/en.yaml

@@ -133,6 +133,12 @@ caluma:
 
       hideLabel: "Hide label"
 
+      usage:
+        button: "Forms with this question"
+        title: "Forms with this question"
+        no-forms-found: "No form was found that uses this question"
+        not-published: "not published"
+
     options:
       delete: "Delete option"
       archive: "Archive (hide) option"

packages/form-builder/translations/fr.yaml

@@ -133,6 +133,12 @@ caluma:
 
       hideLabel: "Cacher l'étiquette"
 
+      usage:
+        button: "Formulaires avec cette question"
+        title: "Formulaires avec cette question"
+        no-forms-found: "Aucun formulaire n'a été trouvé qui utilise cette question"
+        not-published: "non publié"
+
     options:
       delete: "Supprimer l'option"
       archive: "Archiver (masquer) l'option"