Fix: sample query sample body (#775)

* fix display of non-json bodies

* fix sample query conditions

* abstract group generation function

* reuse group generation function

* remove unused functions

* show history items information

src/app/utils/generate-groups.ts

@@ -0,0 +1,32 @@
+export function generateGroupsFromList(list: any[], property: string) {
+    const map = new Map();
+    const groups: any[] = [];
+
+    let isCollapsed = false;
+    let previousCount = 0;
+    let count = 0;
+
+    if (!list || list.length === 0 || list.some(e => !e[property])) {
+        return groups;
+    }
+
+    for (const listItem of list) {
+        if (!map.has(listItem[property])) {
+            map.set(listItem[property], true);
+            count = list.filter(item => item[property] === listItem[property]).length;
+            if (groups.length > 0) {
+                isCollapsed = true;
+            }
+            groups.push({
+                name: listItem[property],
+                key: listItem[property],
+                startIndex: previousCount,
+                isCollapsed,
+                count,
+            });
+            previousCount += count;
+        }
+    }
+
+    return groups;
+}

src/app/views/query-runner/request/permissions/PanelList.tsx

@@ -13,7 +13,7 @@ import { FormattedMessage } from 'react-intl';
 import { SortOrder } from '../../../../../types/enums';
 import { IPermission } from '../../../../../types/permissions';
 import { dynamicSort } from '../../../../utils/dynamic-sort';
-import { generatePermissionGroups } from './util';
+import { generateGroupsFromList } from '../../../../utils/generate-groups';
 
 interface IPanelList {
   messages: any;
@@ -30,7 +30,16 @@ const PanelList = ({ messages, permissions,
   columns, classes, selection,
   renderItemColumn, searchValueChanged, renderDetailsHeader }: IPanelList) => {
 
-  const groups = generatePermissionGroups(permissions);
+  const permissionsList: any[] = [];
+  permissions.forEach(perm => {
+    const permission: any = {...perm};
+    const permissionValue = permission.value;
+    const groupName = permissionValue.split('.')[0];
+    permission.groupName = groupName;
+    permissionsList.push(permission);
+  });
+
+  const groups = generateGroupsFromList(permissionsList, 'groupName');
   permissions = permissions.sort(dynamicSort('value', SortOrder.ASC));
 
   return (

src/app/views/query-runner/request/permissions/Permission.tsx

@@ -14,23 +14,21 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
-import { telemetry } from '../../../../../telemetry';
 import { IPermission, IPermissionProps, IPermissionState } from '../../../../../types/permissions';
 import * as permissionActionCreators from '../../../../services/actions/permissions-action-creator';
 import { translateMessage } from '../../../../utils/translate-messages';
 import { classNames } from '../../../classnames';
 import PanelList from './PanelList';
 import { permissionStyles } from './Permission.styles';
 import TabList from './TabList';
-import { generatePermissionGroups, setConsentedStatus } from './util';
+import { setConsentedStatus } from './util';
 
 export class Permission extends Component<IPermissionProps, IPermissionState> {
 
   constructor(props: IPermissionProps) {
     super(props);
     this.state = {
       permissions: [],
-      groups: [],
     };
   }
 
@@ -44,10 +42,8 @@ export class Permission extends Component<IPermissionProps, IPermissionState> {
     }
     const permissions = this.props.scopes.data;
     if (prevProps.scopes.data !== permissions) {
-      const groups = generatePermissionGroups(permissions);
       this.setState({
-        permissions,
-        groups
+        permissions
       });
     }
   }

src/app/views/query-runner/request/permissions/util.ts

@@ -1,38 +1,5 @@
 import { IPermission } from '../../../../../types/permissions';
 
-export function generatePermissionGroups(permissions: any) {
-    const map = new Map();
-    const groups: any[] = [];
-
-    const isCollapsed = true;
-    let previousCount = 0;
-    let count = 0;
-
-    for (const permission of permissions) {
-        const permissionValue = permission.value;
-        const groupName = permissionValue.split('.')[0];
-        if (!map.has(groupName)) {
-            map.set(groupName, true);
-            count = permissions.filter(
-                (perm: IPermission) => {
-                    const value = perm.value.split('.')[0];
-                    return value === groupName;
-                }
-            ).length;
-            groups.push({
-                name: groupName,
-                key: groupName,
-                startIndex: previousCount,
-                isCollapsed,
-                count,
-            });
-            previousCount += count;
-        }
-    }
-
-    return groups;
-}
-
 export function setConsentedStatus(tokenPresent: any, permissions: IPermission[], consentedScopes: string[]) {
     if (tokenPresent) {
         permissions.forEach((permission: IPermission) => {

src/app/views/sidebar/history/History.tsx

@@ -1,23 +1,8 @@
 import {
-  ContextualMenuItemType,
-  DefaultButton,
-  DetailsList,
-  DetailsRow,
-  Dialog,
-  DialogFooter,
-  DialogType,
-  getId,
-  getTheme,
-  IColumn,
-  IconButton,
-  Label,
-  MessageBar,
-  MessageBarType,
-  PrimaryButton,
-  SearchBox,
-  SelectionMode,
-  styled,
-  TooltipHost,
+  Announced,
+  ContextualMenuItemType, DefaultButton, DetailsList, DetailsRow, Dialog,
+  DialogFooter, DialogType, getId, getTheme, IColumn, IconButton,
+  Label, MessageBar, MessageBarType, PrimaryButton, SearchBox, SelectionMode, styled, TooltipHost
 } from 'office-ui-fabric-react';
 import React, { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
@@ -39,6 +24,7 @@ import * as queryStatusActionCreators from '../../../services/actions/query-stat
 import * as requestHistoryActionCreators from '../../../services/actions/request-history-action-creators';
 import { GRAPH_URL } from '../../../services/graph-constants';
 import { dynamicSort } from '../../../utils/dynamic-sort';
+import { generateGroupsFromList } from '../../../utils/generate-groups';
 import { sanitizeQueryUrl } from '../../../utils/query-url-sanitization';
 import { parseSampleUrl } from '../../../utils/sample-url-generation';
 import { classNames } from '../../classnames';
@@ -49,38 +35,35 @@ export class History extends Component<IHistoryProps, any> {
   constructor(props: any) {
     super(props);
     this.state = {
-      groupedList: {
-        items: [],
-        categories: [],
-      },
+      historyItems: [],
       hideDialog: true,
       category: '',
     };
   }
 
   public componentDidMount = () => {
-    this.generateGroupedList(this.props.history);
-  };
-
+    this.setState({ historyItems: this.props.history});
+  }
   public componentDidUpdate = (prevProps: IHistoryProps) => {
     if (prevProps.history !== this.props.history) {
-      this.generateGroupedList(this.props.history);
+      this.setState({ historyItems: this.props.history});
     }
   };
 
   public searchValueChanged = (event: any, value?: string): void => {
     const { history } = this.props;
-    let filteredSamples = history;
+    let historyItems = history;
     if (value) {
       const keyword = value.toLowerCase();
-      filteredSamples = history.filter((sample: any) => {
+      historyItems = history.filter((sample: any) => {
         const name = sample.url.toLowerCase();
         return name.toLowerCase().includes(keyword);
       });
     }
 
-    this.generateGroupedList(filteredSamples);
-  };
+    this.setState({ historyItems });
+  }
+
 
   public formatDate = (date: any) => {
     const year = date.getFullYear();
@@ -91,7 +74,7 @@ export class History extends Component<IHistoryProps, any> {
     return `${year}-${month}-${day}`;
   };
 
-  public getItems(history: any) {
+  public getItems(history: any[]) {
     const {
       intl: { messages },
     }: any = this.props;
@@ -128,40 +111,6 @@ export class History extends Component<IHistoryProps, any> {
     return items;
   }
 
-  public generateGroupedList(history: any) {
-    const map = new Map();
-    const categories: any[] = [];
-    const items = this.getItems(history);
-
-    const isCollapsed = false;
-    let previousCount = 0;
-    let count = 0;
-
-    for (const historyItem of items) {
-      if (!map.has(historyItem.category)) {
-        map.set(historyItem.category, true);
-        count = items.filter(
-          (sample: IHistoryItem) => sample.category === historyItem.category
-        ).length;
-        categories.push({
-          name: historyItem.category,
-          key: historyItem.category,
-          startIndex: previousCount,
-          isCollapsed,
-          count,
-        });
-        previousCount += count;
-      }
-    }
-
-    this.setState({
-      groupedList: {
-        items,
-        categories,
-      },
-    });
-  }
-
   public renderRow = (props: any): any => {
     const classes = classNames(this.props);
     return (
@@ -369,14 +318,9 @@ export class History extends Component<IHistoryProps, any> {
   };
 
   private deleteHistoryCategory = (): any => {
-    const {
-      category,
-      groupedList: { items },
-    } = this.state;
+    const { category, historyItems } = this.state;
     const { actions } = this.props;
-    const itemsToDelete = items.filter(
-      (query: IHistoryItem) => query.category === category
-    );
+    const itemsToDelete = historyItems.filter((query: IHistoryItem) => query.category === category);
 
     if (actions) {
       actions.bulkRemoveHistoryItems(itemsToDelete);
@@ -386,12 +330,8 @@ export class History extends Component<IHistoryProps, any> {
   };
 
   private exportHistoryByCategory = (category: string) => {
-    const {
-      groupedList: { items },
-    } = this.state;
-    const itemsToExport = items.filter(
-      (query: IHistoryItem) => query.category === category
-    );
+    const { historyItems } = this.state;
+    const itemsToExport = historyItems.filter((query: IHistoryItem) => query.category === category);
     const entries: IHarPayload[] = [];
 
     itemsToExport.forEach((query: IHistoryItem) => {
@@ -519,7 +459,7 @@ export class History extends Component<IHistoryProps, any> {
   }
 
   public render() {
-    const { groupedList, hideDialog, category } = this.state;
+    const { hideDialog, category, historyItems } = this.state;
     const {
       intl: { messages },
     }: any = this.props;
@@ -536,14 +476,17 @@ export class History extends Component<IHistoryProps, any> {
       { key: 'button', name: '', fieldName: '', minWidth: 20, maxWidth: 20 },
     ];
 
-    if (groupedList.items.length === 0) {
+    if (!historyItems ) {
       return (
         <Label className={classes.spinner}>
           <FormattedMessage id='We did not find any history items' />
         </Label>
       );
     }
 
+    const items = this.getItems(historyItems);
+    const groups = generateGroupsFromList(items, 'category');
+
     return (
       <>
         <div>
@@ -562,20 +505,26 @@ export class History extends Component<IHistoryProps, any> {
             <FormattedMessage id='Your history includes queries made in the last 30 days' />
             .
           </MessageBar>
-          <DetailsList
+          {items.length === 0 && <Label className={classes.spinner}>
+            <FormattedMessage id='We did not find any history items' />
+          </Label>}
+          <Announced
+            message={`${items.length} search results available.`}
+          />
+          {items.length > 0 && <DetailsList
             className={classes.queryList}
             onRenderItemColumn={this.renderItemColumn}
-            items={groupedList.items}
+            items={items}
             columns={columns}
             selectionMode={SelectionMode.none}
-            groups={groupedList.categories}
+            groups={groups}
             groupProps={{
               showEmptyGroups: true,
               onRenderHeader: this.renderGroupHeader,
             }}
             onRenderRow={this.renderRow}
             onRenderDetailsHeader={this.renderDetailsHeader}
-          />
+          />}
         </div>
         <Dialog
           hidden={hideDialog}