[BUG] search-results doesn't render "no-data"-template when no results were found

[tobi1220]

When no search results could be found for the given search term, mgt-search-results doesn't render the given no-data template. This is because the component checks for this.response?.value[0]?.hitsContainers[0] as can be seen here:

microsoft-graph-toolkit/packages/mgt-components/src/components/mgt-search-results/mgt-search-results.ts

Line 463 in 5e1e4fc

} else if (this.response?.value[0]?.hitsContainers[0]) {

However this will be truthy even if no results were found, because in that case the API still returns { "total": 0, "moreResultsAvailable": false } as an element in hitsContainer:

{
    "value": [
        {
            "searchTerms": [
                "someSearchTermThatDoesntResultInAnything"
            ],
            "hitsContainers": [
                {
                    "total": 0,
                    "moreResultsAvailable": false
                }
            ]
        }
    ],
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#Collection(microsoft.graph.searchResponse)"
}

Instead, the component should check for this.response?.value[0]?.hitsContainers[0]?.hits. Then the condition would be false and the component can render the no-data template. Here is the fixed code:

    if (this.response && this.hasTemplate('default')) {
      renderedTemplate = this.renderTemplate('default', this.response) || html``;
    } else if (this.response?.value[0]?.hitsContainers[0]?.hits) {
      renderedTemplate = html`${this.response?.value[0]?.hitsContainers[0]?.hits?.map(result =>
        this.renderResult(result)
      )}`;
    } else if (this.hasTemplate('no-data')) {
      renderedTemplate = this.renderTemplate('no-data', null);
    } else {
      renderedTemplate = html``;
    }