From 6dafe3b0501e7f82ad47add4cee5686eb97625aa Mon Sep 17 00:00:00 2001
From: Elinor <ekaguongo@gmail.com>
Date: Mon, 20 Jul 2020 22:15:24 +0300
Subject: [PATCH 1/2] add announced component

---
 .../views/query-runner/request/permissions/PanelList.tsx | 6 +++++-
 src/app/views/sidebar/sample-queries/SampleQueries.tsx   | 9 +++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/app/views/query-runner/request/permissions/PanelList.tsx b/src/app/views/query-runner/request/permissions/PanelList.tsx
index b8069c67f..c068129a6 100644
--- a/src/app/views/query-runner/request/permissions/PanelList.tsx
+++ b/src/app/views/query-runner/request/permissions/PanelList.tsx
@@ -1,4 +1,7 @@
-import { DetailsList, DetailsListLayoutMode, IColumn, Label, SearchBox, SelectionMode } from 'office-ui-fabric-react';
+import {
+  Announced, DetailsList, DetailsListLayoutMode, IColumn,
+  Label, SearchBox, SelectionMode
+} from 'office-ui-fabric-react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -37,6 +40,7 @@ const PanelList = ({ messages, permissions,
           searchValueChanged(event, newValue)}
         styles={{ field: { paddingLeft: 10 } }}
       />
+      <Announced message={`${permissions.length} search results available.`}/>
       <hr />
       <DetailsList
         onShouldVirtualize={() => false}
diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
index 3da61d8e6..c97dccc15 100644
--- a/src/app/views/sidebar/sample-queries/SampleQueries.tsx
+++ b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
@@ -1,8 +1,8 @@
 import {
-  DetailsList, DetailsRow, FontSizes,
-  FontWeights, getId, GroupHeader, IColumn, Icon,
-  MessageBar, MessageBarType, SearchBox,
-  SelectionMode, Spinner, SpinnerSize, styled, TooltipHost
+  Announced, DetailsList, DetailsRow,
+  FontSizes, FontWeights, getId, GroupHeader, IColumn,
+  Icon, MessageBar, MessageBarType,
+  SearchBox, SelectionMode, Spinner, SpinnerSize, styled, TooltipHost
 } from 'office-ui-fabric-react';
 import React, { ChangeEvent, Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
@@ -333,6 +333,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
             <FormattedMessage id='Microsoft Graph API Reference docs' />
           </a>
         </MessageBar>
+        <Announced message={`${groupedList.samples.length} search results available.`}/>
         <DetailsList className={classes.queryList}
           cellStyleProps={{
             cellRightPadding: 0,

From 1197893cc3648019fe60e307cefc248fe0e15643 Mon Sep 17 00:00:00 2001
From: Elinor <ekaguongo@gmail.com>
Date: Tue, 21 Jul 2020 10:43:45 +0300
Subject: [PATCH 2/2] improve code readability

---
 .../request/permissions/PanelList.tsx         |  9 ++++++--
 .../sidebar/sample-queries/SampleQueries.tsx  | 21 +++++++++++++++----
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/views/query-runner/request/permissions/PanelList.tsx b/src/app/views/query-runner/request/permissions/PanelList.tsx
index c068129a6..dd299fc32 100644
--- a/src/app/views/query-runner/request/permissions/PanelList.tsx
+++ b/src/app/views/query-runner/request/permissions/PanelList.tsx
@@ -1,6 +1,11 @@
 import {
-  Announced, DetailsList, DetailsListLayoutMode, IColumn,
-  Label, SearchBox, SelectionMode
+  Announced,
+  DetailsList,
+  DetailsListLayoutMode,
+  IColumn,
+  Label,
+  SearchBox,
+  SelectionMode
 } from 'office-ui-fabric-react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
index c97dccc15..61403d4dd 100644
--- a/src/app/views/sidebar/sample-queries/SampleQueries.tsx
+++ b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
@@ -1,8 +1,21 @@
 import {
-  Announced, DetailsList, DetailsRow,
-  FontSizes, FontWeights, getId, GroupHeader, IColumn,
-  Icon, MessageBar, MessageBarType,
-  SearchBox, SelectionMode, Spinner, SpinnerSize, styled, TooltipHost
+  Announced,
+  DetailsList,
+  DetailsRow,
+  FontSizes,
+  FontWeights,
+  getId,
+  GroupHeader,
+  IColumn,
+  Icon,
+  MessageBar,
+  MessageBarType,
+  SearchBox,
+  SelectionMode,
+  Spinner,
+  SpinnerSize,
+  styled,
+  TooltipHost
 } from 'office-ui-fabric-react';
 import React, { ChangeEvent, Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';