FeatureHighlights the previously selected query (#1006)

* Highlights the previously selected query

* Rebase

* Using isCollapse to expand generateGroupsFromList

Co-authored-by: Charles Wahome <thewahome.cw@gmail.com>

* use groups instead of this.groups

Co-authored-by: Charles Wahome <thewahome.cw@gmail.com>

* set the entire props.item instead of just the id

Co-authored-by: Charles Wahome <thewahome.cw@gmail.com>

* Update the query id

Co-authored-by: Charles Wahome <thewahome.cw@gmail.com>

src/app/views/sidebar/sample-queries/SampleQueries.tsx

@@ -1,6 +1,6 @@
 import {
  Announced, DetailsList, DetailsRow, FontSizes, FontWeights, getId,
- GroupHeader, IColumn, Icon, MessageBar, MessageBarType, SearchBox,
+ GroupHeader, IColumn, Icon, IDetailsRowStyles, MessageBar, MessageBarType, SearchBox,
  SelectionMode, Spinner, SpinnerSize, styled, TooltipHost
 } from 'office-ui-fabric-react';
 import React, { Component } from 'react';
@@ -34,7 +34,8 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
  constructor(props: ISampleQueriesProps) {
  super(props);
  this.state = {
- sampleQueries: []
+ sampleQueries: [],
+ selectedQuery: null,
  };
  }
 
@@ -206,6 +207,10 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
  const { tokenPresent } = this.props;
  const classes = classNames(this.props);
  let selectionDisabled = false;
+ const customStyles: Partial<IDetailsRowStyles> = {};
+ if (this.state.selectedQuery?.id === props.item.id) {
+ customStyles.root = { backgroundColor: '#eaeaea' };
+ }
 
  if (props) {
  if (!tokenPresent && props.item.method !== 'GET') {
@@ -215,10 +220,12 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
  <div className={classes.groupHeader}>
  <DetailsRow
  {...props}
+ styles={customStyles}
  onClick={() => {
  if (!selectionDisabled) {
  this.querySelected(props.item);
  }
+ this.setState({ selectedQuery: props.item })
  }}
  className={
  classes.queryRow +
@@ -330,6 +337,10 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
  const { sampleQueries } = this.state;
  const classes = classNames(this.props);
  const groups = generateGroupsFromList(sampleQueries, 'category');
+ if (this.state.selectedQuery) {
+ const index = groups.findIndex(k => k.key === this.state.selectedQuery.category);
+ groups[index].isCollapsed = false;
+ }
 
  if (pending) {
  return (