Fix: Remove extra outline from search boxes (#1438)

* remove search box outline

* fix linting error

* add correct types on History component

src/app/utils/searchbox.styles.ts

@@ -0,0 +1,14 @@
+export const searchBoxStyles: any = () => ({
+ field: [
+ {
+ paddingLeft: 10
+ },
+ {
+ selectors: {
+ ':focus': {
+ outline: 'none !important'
+ }
+ }
+ }
+ ]
+})

src/app/views/app-sections/ResponseMessages.tsx

@@ -49,7 +49,7 @@ export function responseMessages(graphResponse: IGraphResponse, sampleQuery: IQu
  if (odataLink) {
  return (
  <MessageBar messageBarType={MessageBarType.info}>
- <FormattedMessage id={'This response contains an @odata property'} />: @odata.{odataLink!.name}
+ <FormattedMessage id={'This response contains an @odata property.'} />: @odata.{odataLink!.name}
  <Link onClick={() => setQuery()}>
  &nbsp;<FormattedMessage id='Click here to follow the link' />
  </Link>

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

@@ -17,6 +17,7 @@ import { IPermission } from '../../../../../types/permissions';
 import { IRootState } from '../../../../../types/root';
 import { dynamicSort } from '../../../../utils/dynamic-sort';
 import { generateGroupsFromList } from '../../../../utils/generate-groups';
+import { searchBoxStyles } from '../../../../utils/searchbox.styles';
 import { setConsentedStatus } from './util';
 
 interface IPanelList {
@@ -84,7 +85,7 @@ const PanelList = ({ messages,
  placeholder={messages['Search permissions']}
  onChange={(event?: React.ChangeEvent<HTMLInputElement>, newValue?: string) =>
  searchValueChanged(event, newValue)}
- styles={{ field: { paddingLeft: 10 } }}
+ styles={searchBoxStyles}
  />
  <Announced message={`${permissions.length} search results available.`} />
  <hr />

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

@@ -24,6 +24,7 @@ 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 { searchBoxStyles } from '../../../utils/searchbox.styles';
 import { translateMessage } from '../../../utils/translate-messages';
 import { classNames } from '../../classnames';
 import { sidebarStyles } from '../Sidebar.styles';
@@ -72,12 +73,12 @@ export class History extends Component<IHistoryProps, any> {
  return `${year}-${month}-${day}`;
  };
 
- public getItems(history: any[]) {
+ public getItems(history: History[]) {
  const {
  intl: { messages }
  }: any = this.props;
 
- const items: any[] = [];
+ const items: History[] = [];
 
  // tslint:disable-next-line:no-string-literal
  const olderText = messages.older;
@@ -101,11 +102,14 @@ export class History extends Component<IHistoryProps, any> {
  element.category = date;
  items.push(element);
  });
- items
- .sort(dynamicSort('createdAt', SortOrder.DESC))
- .forEach((value, index) => {
- value.index = index;
- });
+ return this.sortItems(items);
+ }
+
+ private sortItems = ( items: History[] ) => {
+ items.sort(dynamicSort('createdAt', SortOrder.DESC));
+ items.forEach((value : any, index: number) => {
+ value.index = index;
+ });
  return items;
  }
 
@@ -509,7 +513,7 @@ export class History extends Component<IHistoryProps, any> {
  placeholder={messages['Search history items']}
  className={classes.searchBox}
  onChange={this.searchValueChanged}
- styles={{ field: { paddingLeft: 10 } }}
+ styles={searchBoxStyles}
  />
  <hr />
  <MessageBar

src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx

@@ -14,6 +14,7 @@ import { IRootState } from '../../../../types/root';
 import { setSampleQuery } from '../../../services/actions/query-input-action-creators';
 import { addResourcePaths } from '../../../services/actions/resource-explorer-action-creators';
 import { GRAPH_URL } from '../../../services/graph-constants';
+import { searchBoxStyles } from '../../../utils/searchbox.styles';
 import { translateMessage } from '../../../utils/translate-messages';
 import { classNames } from '../../classnames';
 import { sidebarStyles } from '../Sidebar.styles';
@@ -197,7 +198,7 @@ const unstyledResourceExplorer = (props: any) => {
  placeholder={translateMessage('Search resources')}
  onChange={changeSearchValue}
  disabled={!!isolated}
- styles={{ field: { paddingLeft: 10 } }}
+ styles={searchBoxStyles}
  />
  <hr />
  <Stack wrap tokens={{ childrenGap: 10, padding: 10 }}>

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

@@ -30,6 +30,7 @@ import { substituteTokens } from '../../../utils/token-helpers';
 import { classNames } from '../../classnames';
 import { sidebarStyles } from '../Sidebar.styles';
 import { isJsonString } from './sample-query-utils';
+import { searchBoxStyles } from '../../../utils/searchbox.styles';
 
 export class SampleQueries extends Component<ISampleQueriesProps, any> {
  constructor(props: ISampleQueriesProps) {
@@ -410,7 +411,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
  className={classes.searchBox}
  placeholder={messages['Search sample queries']}
  onChange={this.searchValueChanged}
- styles={{ field: { paddingLeft: 10 } }}
+ styles={searchBoxStyles}
  aria-label={'Search'}
  />
  <hr />