[R20-1183] search listing hide form option

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

@@ -177,3 +177,12 @@ Feature: Search listing - Filter
       | Apples  |
       | Oranges |
 
+  @mockserver
+  Example: Should hide the search form when hideSearchForm is set
+    Given the page endpoint for path "/no-search-form" returns fixture "/search-listing/filters/page-no-search-form" with status 200
+    And the search network request is stubbed with fixture "/search-listing/filters/response" and status 200
+
+    When I visit the page "/no-search-form"
+    Then the search listing page should have 2 results
+    And the search form should be hidden
+

examples/nuxt-app/test/fixtures/search-listing/filters/page-no-search-form.json

@@ -0,0 +1,31 @@
+{
+  "title": "Listing without search form",
+  "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-000000000332",
+  "showTopicTags": true,
+  "summary": "",
+  "config": {
+    "searchListingConfig": {
+      "hideSearchForm": true,
+      "resultsPerPage": 10
+    },
+    "queryConfig": {},
+    "results": {
+      "layout": {
+        "component": "TideSearchResultsGrid"
+      },
+      "item": {
+        "*": {
+          "component": "TideSearchResultCard"
+        }
+      }
+    },
+    "globalFilters": [
+      { "terms": { "type": ["grant"] } },
+      { "terms": { "field_node_site": [8888] } }
+    ],
+    "userFilters": []
+  }
+}

packages/ripple-test-utils/step_definitions/content-types/listing.ts

@@ -260,3 +260,7 @@ Then(
     cy.get(`#search-listing-sort-options`).should('contain', option)
   }
 )
+
+Then('the search form should be hidden', () => {
+  cy.get(`.tide-search-header`).should('not.exist')
+})

packages/ripple-tide-search/components/TideSearchListingPage.vue

@@ -57,6 +57,7 @@ const props = withDefaults(defineProps<Props>(), {
     }
   }),
   searchListingConfig: () => ({
+    hideSearchForm: false,
     resultsPerPage: 9,
     labels: {
       submit: 'Submit',
@@ -336,7 +337,10 @@ watch(
         :corner-bottom="false"
       >
         <p v-if="introText" class="rpl-type-p-large">{{ introText }}</p>
-        <div class="tide-search-header">
+        <div
+          v-if="!searchListingConfig.hideSearchForm"
+          class="tide-search-header"
+        >
           <RplSearchBar
             id="tide-search-bar"
             variant="default"

packages/ripple-tide-search/mapping/index.ts

@@ -105,6 +105,7 @@ const parseResultsConfigFromDrupal = (src) => {
 const buildConfigFromDrupalFields = (src) => {
   return {
     searchListingConfig: {
+      hideSearchForm: src?.field_listing_hide_search_form ?? false,
       resultsPerPage: src.field_listing_results_per_page || 10,
       labels: {
         submit: src.field_search_submit_label,

packages/ripple-tide-search/types.ts

@@ -115,9 +115,12 @@ export type TideSearchListingConfig = {
      */
     index: string
     /**
-     * @description Toggle grid and list view of results, cards need to be a grid view
+     * @description Set the number of results to show per page
      */
     resultsPerPage?: number
+    /**
+     * @description Override the default labels
+     */
     labels: {
       submit: string
       reset: string
@@ -133,6 +136,10 @@ export type TideSearchListingConfig = {
      * @description whether to display map tab and include map search results
      */
     displayMapTab?: boolean
+    /**
+     * @description optionally hide the search form
+     */
+    hideSearchForm?: boolean
   }
   /**
    * @description Elastic Query DSL for query clause