feat(@dpc-sdp/ripple-ui-core): add support for custom components in d…

…ata table extra content

this also adds support for extra content in search listings/custom collections, and removes some unused props like content and items

examples/nuxt-app/components/global/TableExtraContentComponentExample.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="tide-extra-component-example">
+    <RplTag
+      v-if="item?.field_fv_recommendation_number"
+      :label="item.field_fv_recommendation_number[0]"
+    />
+    <p v-if="item?.fv_recommendation_status">
+      {{ ` ${item.fv_recommendation_status[0]}` }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  item: any
+}
+
+defineProps<Props>()
+</script>
+
+<style>
+.tide-extra-component-example {
+  display: flex;
+  gap: var(--rpl-sp-2);
+  align-items: center;
+  padding: var(--rpl-sp-5);
+}
+</style>

examples/nuxt-app/test/features/search-listing/table.feature

@@ -15,3 +15,31 @@ Feature: Search listing table layout
     And the search network request should be called with the "/search-listing/table/request" fixture
     And the search listing layout should be "table"
 
+    Given a data table with type "search-listing-layout-table"
+    Then the table should not display extra content
+
+  @mockserver
+  Example: Table shows extra content using a custom component
+    Given the page endpoint for path "/search-listing-table-extra-components" returns fixture "/search-listing/table/page-extra-component" with status 200
+    And the search network request is stubbed with fixture "/search-listing/table/response" and status 200
+    When I visit the page "/search-listing-table-extra-components"
+    And the search network request should be called with the "/search-listing/table/request" fixture
+    And the search listing layout should be "table"
+
+    Given a data table with type "search-listing-layout-table"
+    And the table should have the caption "My Table"
+    And the table should have the footer "Some notes about the table"
+    When I toggle the tables extra content row
+    Then the tables extra content should contain the text "1 Implemented"
+
+  @mockserver
+  Example: Table shows extra structured content using object keys
+    Given the page endpoint for path "/search-listing-table-structured" returns fixture "/search-listing/table/page-extra-structured" with status 200
+    And the search network request is stubbed with fixture "/search-listing/table/response" and status 200
+    When I visit the page "/search-listing-table-structured"
+    And the search network request should be called with the "/search-listing/table/request" fixture
+    And the search listing layout should be "table"
+
+    Given a data table with type "search-listing-layout-table"
+    When I toggle the tables extra content row
+    Then the tables extra content should contain the text "Review and begin implementing the Common Risk Assessment Framework"

examples/nuxt-app/test/fixtures/search-listing/table/page-extra-component.json

@@ -0,0 +1,133 @@
+{
+  "title": "Table with component extra data",
+  "changed": "2022-11-02T12:47:29+11:00",
+  "created": "2022-11-02T12:47:29+11:00",
+  "type": "tide_search_listing",
+  "nid": "11dede11-10c0-111e1-1100-000000000330",
+  "showTopicTags": true,
+  "summary": "On 28 January 2023 the Victorian Government announced the implementation of the final recommendations of the Royal Commission into Family Violence. This marks our public commitment to implementing all 227 recommendations.",
+  "config": {
+    "searchListingConfig": {
+      "resultsPerPage": 40,
+      "customSort": [
+        { "_score": "desc" },
+        { "field_fv_recommendation_number": "asc" },
+        { "_doc": "desc" }
+      ]
+    },
+    "queryConfig": {
+      "multi_match": {
+        "query": "{{query}}",
+        "fields": [
+          "title^3",
+          "field_landing_page_summary^2",
+          "body",
+          "field_paragraph_body",
+          "summary_processed"
+        ]
+      }
+    },
+    "results": {
+      "layout": {
+        "component": "TideSearchResultsTable",
+        "props": {
+          "offset": 0,
+          "showExtraContent": true,
+          "caption": "My Table",
+          "footer": "Some notes about the table",
+          "headingType": { "horizontal": true, "vertical": true },
+          "columns": [
+            {
+              "label": "Recommendation",
+              "objectKey": "field_fv_recommendation_number"
+            },
+            { "label": "Title", "component": "TideSearchListingTableLink" },
+            {
+              "label": "Category",
+              "objectKey": "field_fv_recommendation_category_name"
+            },
+            { "label": "Status", "objectKey": "fv_recommendation_status" }
+          ],
+          "extraContent": {
+            "component": "TableExtraContentComponentExample"
+          }
+        }
+      }
+    },
+    "globalFilters": [
+      { "terms": { "type": ["fv_recommendation"] } },
+      { "terms": { "field_node_site": ["4"] } }
+    ],
+    "userFilters": [
+      {
+        "id": "category",
+        "component": "TideSearchFilterDropdown",
+        "filter": {
+          "type": "terms",
+          "value": "field_fv_recommendation_category_name.keyword"
+        },
+        "aggregations": {
+          "field": "field_fv_recommendation_category_name.keyword",
+          "source": "elastic"
+        },
+        "props": {
+          "id": "category",
+          "label": "Category",
+          "placeholder": "Select a category",
+          "type": "RplFormDropdown",
+          "multiple": true
+        }
+      },
+      {
+        "id": "department",
+        "component": "TideSearchFilterDropdown",
+        "filter": {
+          "type": "terms",
+          "value": "field_fv_recommendation_dpt_name.keyword"
+        },
+        "aggregations": {
+          "field": "field_fv_recommendation_dpt_name.keyword",
+          "source": "elastic"
+        },
+        "props": {
+          "id": "department",
+          "label": "Deparment",
+          "placeholder": "Select a department",
+          "type": "RplFormDropdown",
+          "multiple": true
+        }
+      },
+      {
+        "id": "status",
+        "component": "TideSearchFilterDropdown",
+        "filter": {
+          "type": "terms",
+          "value": "fv_recommendation_status.keyword"
+        },
+        "aggregations": {
+          "field": "recommendation_status",
+          "source": "taxonomy"
+        },
+        "props": {
+          "id": "status",
+          "label": "Status",
+          "placeholder": "Select a status",
+          "type": "RplFormDropdown",
+          "multiple": true,
+          "options": [
+            {
+              "id": "1",
+              "label": "Implemented",
+              "value": "Implemented"
+            },
+            {
+              "id": "2",
+              "label": "Not Implemented",
+              "value": "Not Implemented"
+            }
+          ]
+        }
+      }
+    ]
+  }
+}

examples/nuxt-app/test/fixtures/search-listing/table/page-extra-structured.json

@@ -0,0 +1,137 @@
+{
+  "title": "Table with structure extra data",
+  "changed": "2022-11-02T12:47:29+11:00",
+  "created": "2022-11-02T12:47:29+11:00",
+  "type": "tide_search_listing",
+  "nid": "11dede11-10c0-111e1-1100-000000000330",
+  "showTopicTags": true,
+  "summary": "On 28 January 2023 the Victorian Government announced the implementation of the final recommendations of the Royal Commission into Family Violence. This marks our public commitment to implementing all 227 recommendations.",
+  "config": {
+    "searchListingConfig": {
+      "resultsPerPage": 40,
+      "customSort": [
+        { "_score": "desc" },
+        { "field_fv_recommendation_number": "asc" },
+        { "_doc": "desc" }
+      ]
+    },
+    "queryConfig": {
+      "multi_match": {
+        "query": "{{query}}",
+        "fields": [
+          "title^3",
+          "field_landing_page_summary^2",
+          "body",
+          "field_paragraph_body",
+          "summary_processed"
+        ]
+      }
+    },
+    "results": {
+      "layout": {
+        "component": "TideSearchResultsTable",
+        "props": {
+          "showExtraContent": true,
+          "caption": "My Table",
+          "footer": "Some notes about the table",
+          "headingType": { "horizontal": true, "vertical": true },
+          "columns": [
+            {
+              "label": "Recommendation",
+              "objectKey": "field_fv_recommendation_number"
+            },
+            { "label": "Title", "component": "TideSearchListingTableLink" },
+            {
+              "label": "Category",
+              "objectKey": "field_fv_recommendation_category_name"
+            },
+            { "label": "Status", "objectKey": "fv_recommendation_status" }
+          ],
+          "extraContent": {
+            "items": [
+              {
+                "label": "More info",
+                "objectKey": "title"
+              }
+            ]
+          }
+        }
+      }
+    },
+    "globalFilters": [
+      { "terms": { "type": ["fv_recommendation"] } },
+      { "terms": { "field_node_site": ["4"] } }
+    ],
+    "userFilters": [
+      {
+        "id": "category",
+        "component": "TideSearchFilterDropdown",
+        "filter": {
+          "type": "terms",
+          "value": "field_fv_recommendation_category_name.keyword"
+        },
+        "aggregations": {
+          "field": "field_fv_recommendation_category_name.keyword",
+          "source": "elastic"
+        },
+        "props": {
+          "id": "category",
+          "label": "Category",
+          "placeholder": "Select a category",
+          "type": "RplFormDropdown",
+          "multiple": true
+        }
+      },
+      {
+        "id": "department",
+        "component": "TideSearchFilterDropdown",
+        "filter": {
+          "type": "terms",
+          "value": "field_fv_recommendation_dpt_name.keyword"
+        },
+        "aggregations": {
+          "field": "field_fv_recommendation_dpt_name.keyword",
+          "source": "elastic"
+        },
+        "props": {
+          "id": "department",
+          "label": "Deparment",
+          "placeholder": "Select a department",
+          "type": "RplFormDropdown",
+          "multiple": true
+        }
+      },
+      {
+        "id": "status",
+        "component": "TideSearchFilterDropdown",
+        "filter": {
+          "type": "terms",
+          "value": "fv_recommendation_status.keyword"
+        },
+        "aggregations": {
+          "field": "recommendation_status",
+          "source": "taxonomy"
+        },
+        "props": {
+          "id": "status",
+          "label": "Status",
+          "placeholder": "Select a status",
+          "type": "RplFormDropdown",
+          "multiple": true,
+          "options": [
+            {
+              "id": "1",
+              "label": "Implemented",
+              "value": "Implemented"
+            },
+            {
+              "id": "2",
+              "label": "Not Implemented",
+              "value": "Not Implemented"
+            }
+          ]
+        }
+      }
+    ]
+  }
+}

packages/ripple-test-utils/step_definitions/components/data-table.ts

@@ -1,4 +1,9 @@
-import { Then, Given, DataTable } from '@badeball/cypress-cucumber-preprocessor'
+import {
+  Then,
+  Given,
+  When,
+  DataTable
+} from '@badeball/cypress-cucumber-preprocessor'
 
 Given('a data table with ID {string}', (id: string) => {
   cy.get(`[data-component-id="${id}"]`).as('component')
@@ -7,6 +12,11 @@ Given('a data table with ID {string}', (id: string) => {
     .should('have.attr', 'data-component-type', 'TideLandingPageDataTable')
 })
 
+Given('a data table with type {string}', (id: string) => {
+  cy.get(`[data-component-type="${id}"]`).as('component')
+  cy.get('@component').should('exist')
+})
+
 Then(
   'have {int} rows and {int} columns',
   (rowCount: number, colCount: number, dataTable: DataTable) => {
@@ -44,3 +54,36 @@ Then('it should have no heading', () => {
     cy.get('table thead tr').should('not.exist')
   })
 })
+
+Then('the table should have the caption {string}', (text: string) => {
+  cy.get('@component').within(() => {
+    cy.get('caption').contains(text)
+  })
+})
+
+Then('the table should have the footer {string}', (text: string) => {
+  cy.get('@component').within(() => {
+    cy.get('tfoot').contains(text)
+  })
+})
+
+When('I toggle the tables extra content row', () => {
+  cy.get('@component').within(() => {
+    cy.get('.rpl-data-table__toggle').first().click()
+  })
+})
+
+Then('the table should not display extra content', () => {
+  cy.get('@component').within(() => {
+    cy.get('.rpl-data-table__toggle').should('not.exist')
+  })
+})
+
+Then(
+  'the tables extra content should contain the text {string}',
+  (text: string) => {
+    cy.get('@component').within(() => {
+      cy.get('.rpl-data-table__details-content:visible').contains(text)
+    })
+  }
+)