Add empty states to references page

RISDEV-4639

Author: VictorDelCampo

frontend/e2e/amending-law-references.spec.ts

@@ -1,6 +1,8 @@
 import { test, expect } from "@playwright/test"
 
-test("navigate to amending law overview", async ({ page }) => {
+test("navigate to amending law references page without selected mods", async ({
+  page,
+}) => {
   await page.goto("/amending-laws")
   await page.getByRole("link", { name: "BGBl. I 1002 Nr. 10" }).click()
   await page.getByRole("link", { name: "Betroffene Normenkomplexe" }).click()
@@ -9,6 +11,34 @@ test("navigate to amending law overview", async ({ page }) => {
   await expect(page).toHaveURL(
     "/amending-laws/eli/bund/bgbl-1/1002/10/1002-01-10/1/deu/regelungstext-1/affected-documents/eli/bund/bgbl-1/1002/1/1002-01-10/1/deu/regelungstext-1/references",
   )
+
+  await expect(
+    page.getByText(
+      "Wählen Sie links einen Änderungsbefehl zur Dokumentation von textbasierten Metadaten aus.",
+    ),
+  ).toBeVisible()
+})
+
+test("selects a mod but not references present so it shows the empty state for the ref table", async ({
+  page,
+}) => {
+  await page.goto(
+    "/amending-laws/eli/bund/bgbl-1/1002/10/1002-01-10/1/deu/regelungstext-1/affected-documents/eli/bund/bgbl-1/1002/1/1002-01-10/1/deu/regelungstext-1/references",
+  )
+
+  await page
+    .getByRole("button", { name: /Absatz 2 bis Absatz 3 wird ersetzt durch/ })
+    .click()
+
+  await expect(page).toHaveURL(
+    "/amending-laws/eli/bund/bgbl-1/1002/10/1002-01-10/1/deu/regelungstext-1/affected-documents/eli/bund/bgbl-1/1002/1/1002-01-10/1/deu/regelungstext-1/references/hauptteil-1_art-1_abs-1_untergl-1_listenelem-6_untergl-1_listenelem-a_inhalt-1_text-1_ändbefehl-1",
+  )
+
+  await expect(
+    page.getByText(
+      "Für die ausgewählte Textpassage sind noch keine Verweise dokumentiert. Markieren Sie links Text, um neue Verweise hinzuzufügen.",
+    ),
+  ).toBeVisible()
 })
 
 test("handles API call still in progress and disables mod selection", async ({

frontend/src/components/references/RisModRefsEditor.spec.ts

@@ -27,6 +27,29 @@ describe("RisModRefsEditor", () => {
     renderError.value = undefined
   })
 
+  it("Should not render component if no mod was selected", async () => {
+    const { default: RisModRefsEditor } = await import(
+      "@/components/references/RisModRefsEditor.vue"
+    )
+
+    render(RisModRefsEditor, {
+      props: {
+        normXml: "",
+        selectedModEId: "",
+        isSaving: false,
+        hasSaved: false,
+        saveError: null,
+      },
+    })
+
+    await nextTick()
+
+    const emptyState = screen.getByText(
+      "Wählen Sie links einen Änderungsbefehl zur Dokumentation von textbasierten Metadaten aus.",
+    )
+    expect(emptyState).toBeInTheDocument()
+  })
+
   it("Should render the html of the second quotedText of the selected mod", async () => {
     vi.doMock("vue-router", () => ({
       useRoute: vi.fn().mockReturnValue({

frontend/src/components/references/RisModRefsEditor.vue

@@ -117,10 +117,14 @@ function handleSave() {
       />
       <RisEmptyState
         v-else
-        text-content="Wählen sie einen Änderungsbefehl zur Bearbeitung aus."
+        text-content="Wählen Sie links einen Änderungsbefehl zur Dokumentation von textbasierten Metadaten aus."
       />
     </section>
-    <section aria-labelledby="referencesHeading" class="flex flex-col">
+    <section
+      v-if="selectedModQuotedContentXmlString"
+      aria-labelledby="referencesHeading"
+      class="flex flex-col"
+    >
       <h3 id="referencesHeading" class="ds-label-02-bold mb-12 block">
         Verweise
       </h3>

frontend/src/components/references/RisRefEditorTable.spec.ts

@@ -6,6 +6,20 @@ import { describe, expect, it } from "vitest"
 import { nextTick } from "vue"
 
 describe("RisRefEditorTable", () => {
+  it("Should not render the ref editor because no akn:ref present in the xml snippet", async () => {
+    render(RisRefEditorTable, {
+      props: {
+        xmlSnippet:
+          "<akn:quotedText xmlns:akn=\"http://Inhaltsdaten.LegalDocML.de/1.6/\" eId='quot-1'>Render of a ref and a second ref and <akn:p eId='quot-1_p-1'>place for a third ref</akn:p></akn:quotedText>",
+      },
+    })
+    await nextTick()
+    const emptyState = screen.getByText(
+      "Für die ausgewählte Textpassage sind noch keine Verweise dokumentiert. Markieren Sie links Text, um neue Verweise hinzuzufügen.",
+    )
+    expect(emptyState).toBeInTheDocument()
+  })
+
   it("Should render a ref editor for every akn:ref of the xml snippet", async () => {
     render(RisRefEditorTable, {
       props: {

frontend/src/components/references/RisRefEditorTable.vue

@@ -10,6 +10,7 @@ import {
 } from "@/services/xmlService"
 import { useDebounceFn } from "@vueuse/core"
 import { deleteRef } from "@/lib/ref"
+import RisEmptyState from "@/components/RisEmptyState.vue"
 
 /**
  * The eId of the currently selected akn:ref element.
@@ -78,6 +79,7 @@ function selectNextRef(relativeTo: number) {
 <template>
   <div>
     <div
+      v-if="refs.length > 0"
       class="grid max-h-full grid-cols-[3fr,8fr,max-content] items-center overflow-auto"
     >
       <div>Typ</div>
@@ -104,5 +106,9 @@ function selectNextRef(relativeTo: number) {
         ></RefEditor>
       </section>
     </div>
+    <RisEmptyState
+      v-else
+      text-content="Für die ausgewählte Textpassage sind noch keine Verweise dokumentiert. Markieren Sie links Text, um neue Verweise hinzuzufügen."
+    />
   </div>
 </template>

frontend/src/views/References.vue

@@ -174,7 +174,7 @@ const breadcrumbs = ref<HeaderBreadcrumb[]>([
         </section>
 
         <RisModRefsEditor
-          v-if="selectedModEId && amendingNormXml"
+          v-if="amendingNormXml"
           :norm-xml="amendingNormXml"
           :selected-mod-e-id="selectedModEId"
           :eli="amendingNormEli"