fix: execute beta queries and eliminate re-renders (#2391)

eliminates re-renders with extracting inline arrays to const
query now has value set when in beta

Author: sebastienlevert

packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.ts

@@ -214,8 +214,7 @@ export class MgtSearchResults extends MgtTemplatedComponent {
     attribute: 'scopes',
     converter: (value, type) => {
       return value ? value.toLowerCase().split(',') : null;
-    },
-    reflect: true
+    }
   })
   public scopes: string[] = [];
 
@@ -229,8 +228,7 @@ export class MgtSearchResults extends MgtTemplatedComponent {
     attribute: 'content-sources',
     converter: (value, type) => {
       return value ? value.toLowerCase().split(',') : null;
-    },
-    reflect: true
+    }
   })
   public contentSources: string[] = [];
 
@@ -1246,7 +1244,7 @@ export class MgtSearchResults extends MgtTemplatedComponent {
     }
 
     if (this.version === 'beta') {
-      requestOptions.query.queryString = this.queryTemplate ? this.queryTemplate : undefined;
+      (requestOptions as BetaSearchRequest).query.queryTemplate = this.queryTemplate ? this.queryTemplate : undefined;
     }
 
     return requestOptions;

packages/mgt-element/src/utils/version.ts

@@ -8,4 +8,4 @@
 // THIS FILE IS AUTO GENERATED
 // ANY CHANGES WILL BE LOST DURING BUILD
 
-export const PACKAGE_VERSION = '3.0.0-preview.2';
+export const PACKAGE_VERSION = '3.0.0-rc.1';

samples/react-admin-app/src/pages/Search/AllResults.tsx

@@ -1,23 +1,28 @@
-import { SearchBox, SearchResults } from '@microsoft/mgt-react';
+import { SearchBox, SearchResults } from '@microsoft/mgt-react/dist/es6/generated/react-preview';
 import * as React from 'react';
 
+const filesScopes = ['Files.Read.All', 'Sites.Read.All'];
+const filesEntityTypes = ['driveItem', 'listItem', 'site'];
+const bookmarksScopes = ['Bookmark.Read.All'];
+const bookmarksEntityTypes = ['bookmark'];
+
 export const AllResults: React.FunctionComponent = () => {
   const [searchTerm, setSearchTerm] = React.useState<string>('');
 
   return (
     <>
       <SearchBox searchTermChanged={e => setSearchTerm(e.detail)}></SearchBox>
       <SearchResults
-        entityTypes={['bookmark']}
+        entityTypes={bookmarksEntityTypes}
         queryString={searchTerm}
         version="beta"
         size={1}
-        scopes={['Bookmark.Read.All']}
+        scopes={bookmarksScopes}
       ></SearchResults>
       <SearchResults
-        entityTypes={['driveItem', 'listItem', 'site']}
+        entityTypes={filesEntityTypes}
         queryString={searchTerm}
-        scopes={['Files.Read.All', 'Sites.Read.All']}
+        scopes={filesScopes}
         fetchThumbnail={true}
       ></SearchResults>
     </>

samples/react-admin-app/src/pages/Search/ExternalItems.tsx

@@ -1,18 +1,19 @@
-import { MgtTemplateProps, SearchBox, SearchResults } from '@microsoft/mgt-react';
+import { MgtTemplateProps } from '@microsoft/mgt-react';
+import { SearchBox, SearchResults } from '@microsoft/mgt-react/dist/es6/generated/react-preview';
+
 import * as React from 'react';
 
+const entityTypes = ['externalItem'];
+const scopes = ['ExternalItem.Read.All'];
+const contentSources = ['/external/connections/contosopartsinventory'];
+
 export const ExternalItems: React.FunctionComponent = () => {
   const [searchTerm, setSearchTerm] = React.useState<string>('');
 
   return (
     <>
       <SearchBox searchTermChanged={e => setSearchTerm(e.detail)}></SearchBox>
-      <SearchResults
-        entityTypes={['externalItem']}
-        contentSources={['/external/connections/contosopartsinventory']}
-        queryString={searchTerm}
-        scopes={['ExternalItem.Read.All']}
-      >
+      <SearchResults entityTypes={entityTypes} contentSources={contentSources} queryString={searchTerm} scopes={scopes}>
         <ExternalItemTemplate template="result-externalItem"></ExternalItemTemplate>
       </SearchResults>
     </>

samples/react-admin-app/src/pages/Search/Interleaving.tsx

@@ -1,18 +1,23 @@
-import { MgtTemplateProps, SearchBox, SearchResults } from '@microsoft/mgt-react';
+import { MgtTemplateProps } from '@microsoft/mgt-react';
+import { SearchBox, SearchResults } from '@microsoft/mgt-react/dist/es6/generated/react-preview';
 import * as React from 'react';
 
+const entityTypes = ['externalItem', 'driveItem'];
+const scopes = ['Files.Read.All', 'ExternalItem.Read.All'];
+const contentSources = ['/external/connections/*'];
+
 export const Interleaving: React.FunctionComponent = () => {
   const [searchTerm, setSearchTerm] = React.useState<string>('');
 
   return (
     <>
       <SearchBox searchTermChanged={e => setSearchTerm(e.detail)}></SearchBox>
       <SearchResults
-        entityTypes={['externalItem', 'driveItem']}
-        contentSources={['/external/connections/*']}
+        entityTypes={entityTypes}
+        contentSources={contentSources}
         queryString={searchTerm}
         version={'beta'}
-        scopes={['Files.Read.All', 'ExternalItem.Read.All']}
+        scopes={scopes}
       >
         <ExternalItemTemplate template="result-externalItem"></ExternalItemTemplate>
       </SearchResults>

samples/react-admin-app/src/pages/Search/PeopleResults.tsx

@@ -1,4 +1,4 @@
-import { SearchBox, SearchResults } from '@microsoft/mgt-react';
+import { SearchBox, SearchResults } from '@microsoft/mgt-react/dist/es6/generated/react-preview';
 import * as React from 'react';
 
 export const PeopleResults: React.FunctionComponent = () => {

stories/components/preview/searchBox/searchBox.a.js

@@ -44,11 +44,13 @@ export const events = () => html`
   <!-- See js tab for event subscription -->
 
   <mgt-search-box></mgt-search-box>
+  <mgt-search-results entity-types="driveItem"></mgt-search-results>
   <script>
     import '@microsoft/mgt-components/dist/es6/components/preview';
     const searchBox = document.querySelector('mgt-search-box');
+    const searchResults = document.querySelector('mgt-search-box');
     searchBox.addEventListener('searchTermChanged', (e) => {
-      console.log(e.detail);
+      searchResults.queryString = e.detail;
     })
   </script>
 `;