Restore resources tab

package.json

@@ -93,6 +93,7 @@
  "@types/enzyme-adapter-react-16": "1.0.5",
  "@types/isomorphic-fetch": "0.0.35",
  "@types/jest": "24.0.6",
+ "@types/lodash.debounce": "4.0.6",
  "@types/react": "17.0.35",
  "@types/react-dom": "17.0.11",
  "@types/react-intl": "3.0.0",
@@ -123,4 +124,4 @@
  "reportFile": "test-report.xml",
  "indent": 4
  }
-}
+}

src/app/utils/string-operations.ts

@@ -1,11 +1,24 @@
 declare global {
  interface String {
- toSentenceCase(): String;
+ toSentenceCase(): string;
+ contains(searchText: string): boolean;
  }
 }
 
-String.prototype.toSentenceCase = function () {
+/**
+ * Converts the first character to uppercase if character is alphanumeric and the rest to lowercase
+ */
+String.prototype.toSentenceCase = function (): string {
  return `${this.charAt(0).toUpperCase()}${this.toLowerCase().slice(1)}`;
 };
 
+/**
+ * Performs a case-insenstive search of a substring within a string and
+ * returns true if searchString appears as a substring of a string
+ * @param searchString search string
+ */
+String.prototype.contains = function (searchString: string): boolean {
+ return this.toLowerCase().includes(searchString.toLowerCase());
+};
+
 export {};

src/app/views/sidebar/Sidebar.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { telemetry } from '../../../telemetry';
 import { translateMessage } from '../../utils/translate-messages';
 import History from './history/History';
+import { ResourceExplorer } from './resource-explorer';
 import SampleQueries from './sample-queries/SampleQueries';
 export const Sidebar = () => {
  return (
@@ -19,6 +20,16 @@ export const Sidebar = () => {
  >
  <div id={'sample-queries-tab'}><SampleQueries /></div>
  </PivotItem>
+ <PivotItem
+ headerText={translateMessage('Resources')}
+ itemIcon='ExploreData'
+ itemKey='resources'
+ headerButtonProps={{
+ 'aria-controls': 'resources-tab'
+ }}
+ >
+ <div id={'resources-tab'}><ResourceExplorer /></div>
+ </PivotItem>
  <PivotItem
  headerText={translateMessage('History')}
  itemIcon='History'

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

@@ -1,14 +1,16 @@
 import {
- Breadcrumb, ChoiceGroup, DefaultButton,
- IBreadcrumbItem, IChoiceGroupOption, INavLink, INavLinkGroup, Label, Nav, SearchBox, Spinner, SpinnerSize,
- Stack, styled
+ Breadcrumb, DefaultButton,
+ IBreadcrumbItem, INavLink, INavLinkGroup, Label, Nav,
+ SearchBox, Spinner, SpinnerSize,
+ Stack, styled, Toggle
 } from '@fluentui/react';
-import React, { useEffect, useState } from 'react';
+import debouce from 'lodash.debounce';
+import React, { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { telemetry, eventTypes, componentNames } from '../../../../telemetry';
-import { IQuery } from '../../../../types/query-runner';
 
+import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
+import { IQuery } from '../../../../types/query-runner';
 import { IResource, IResourceLink, ResourceLinkType, ResourceOptions } from '../../../../types/resources';
 import { IRootState } from '../../../../types/root';
 import { setSampleQuery } from '../../../services/actions/query-input-action-creators';
@@ -40,27 +42,20 @@ const unstyledResourceExplorer = (props: any) => {
  { key: 'beta', text: 'beta', iconProps: { iconName: 'PartlyCloudyNight' } }
  ];
  const [version, setVersion] = useState(versions[0].key);
- const filteredPayload = getResourcesSupportedByVersion(data, version);
- const navigationGroup = createResourcesList(filteredPayload.children, version);
+ const [searchText, setSearchText] = useState<string>('');
+ const filteredPayload = getResourcesSupportedByVersion(data.children, version, searchText);
+ const navigationGroup = createResourcesList(filteredPayload, version, searchText);
 
- const [resourceItems, setResourceItems] = useState<IResource[]>(filteredPayload.children);
+ const [resourceItems, setResourceItems] = useState<IResource[]>(filteredPayload);
  const [items, setItems] = useState<INavLinkGroup[]>(navigationGroup);
 
  useEffect(() => {
  setItems(navigationGroup);
- setResourceItems(filteredPayload.children)
- }, [filteredPayload.children.length]);
+ setResourceItems(filteredPayload)
+ }, [filteredPayload.length]);
 
  const [isolated, setIsolated] = useState<any>(null);
- const [searchText, setSearchText] = useState<string>('');
-
- const performSearch = (needle: string, haystack: IResource[]) => {
- const keyword = needle.toLowerCase();
- return haystack.filter((sample: IResource) => {
- const name = sample.segment.toLowerCase();
- return name.toLowerCase().includes(keyword);
- });
- }
+ const [linkLevel, setLinkLevel] = useState(-1);
 
  const generateBreadCrumbs = () => {
  if (!!isolated && isolated.paths.length > 0) {
@@ -81,31 +76,20 @@ const unstyledResourceExplorer = (props: any) => {
  dispatch(addResourcePaths(getResourcePaths(item, version)));
  }
 
- const changeVersion = (ev: React.FormEvent<HTMLElement | HTMLInputElement> | undefined,
- option: IChoiceGroupOption | undefined): void => {
- const selectedVersion = option!.key;
+ const changeVersion = (_event: React.MouseEvent<HTMLElement>, checked?: boolean | undefined): void => {
+ const selectedVersion = checked ? versions[1].key : versions[0].key;
  setVersion(selectedVersion);
- const list = getResourcesSupportedByVersion(data, selectedVersion);
- const dataSet = (searchText) ? performSearch(searchText, list.children) : list.children;
- setResourceItems(dataSet);
- setItems(createResourcesList(dataSet, selectedVersion));
  }
 
  const changeSearchValue = (event: any, value?: string) => {
- let filtered: any[] = [...data.children];
- setSearchText(value || '');
- if (value) {
- filtered = performSearch(value, filtered);
- }
- const dataSet = getResourcesSupportedByVersion({
- children: filtered,
- labels: data.labels,
- segment: data.segment
- }, version).children;
- setResourceItems(dataSet);
- setItems(createResourcesList(dataSet, version));
+ const trimmedSearchText = value ? value.trim() : '';
+ setSearchText(trimmedSearchText);
  }
 
+ const debouncedSearch = useMemo(() => {
+ return debouce(changeSearchValue, 300);
+ }, []);
+
  const navigateToBreadCrumb = (ev?: any, item?: IBreadcrumbItem): void => {
  const iterator = item!.key;
  if (iterator === '/') {
@@ -130,6 +114,7 @@ const unstyledResourceExplorer = (props: any) => {
  ];
  setItems(tree);
  setIsolated(navLink);
+ setLinkLevel(navLink.level);
  telemetry.trackEvent(eventTypes.LISTITEM_CLICK_EVENT,
  {
  ComponentName: componentNames.RESOURCES_ISOLATE_QUERY_LIST_ITEM,
@@ -140,8 +125,9 @@ const unstyledResourceExplorer = (props: any) => {
  const disableIsolation = (): void => {
  setIsolated(null);
  setSearchText('');
- const filtered = getResourcesSupportedByVersion(data, version);
- setItems(createResourcesList(filtered.children, version));
+ const filtered = getResourcesSupportedByVersion(data.children, version);
+ setLinkLevel(-1);
+ setItems(createResourcesList(filtered, version));
  }
 
  const clickLink = (ev?: React.MouseEvent<HTMLElement>, item?: INavLink) => {
@@ -196,17 +182,17 @@ const unstyledResourceExplorer = (props: any) => {
  {!isolated && <>
  <SearchBox
  placeholder={translateMessage('Search resources')}
- onChange={changeSearchValue}
+ onChange={debouncedSearch}
  disabled={!!isolated}
  styles={searchBoxStyles}
  />
  <hr />
  <Stack wrap tokens={{ childrenGap: 10, padding: 10 }}>
- <ChoiceGroup
- label={translateMessage('Select version')}
- defaultSelectedKey={version}
- options={versions}
+ <Toggle label={`${translateMessage('Switch to beta')}`}
  onChange={changeVersion}
+ onText={translateMessage('On')}
+ offText={translateMessage('Off')}
+ inlineLabel
  />
  </Stack>
  </>}
@@ -246,6 +232,7 @@ const unstyledResourceExplorer = (props: any) => {
  link={link}
  isolateTree={isolateTree}
  resourceOptionSelected={(activity: string, context: unknown) => resourceOptionSelected(activity, context)}
+ linkLevel={linkLevel}
  classes={classes}
  />
  }}

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

@@ -8,11 +8,11 @@ import { FormattedMessage } from 'react-intl';
 import { ResourceLinkType, ResourceOptions } from '../../../../types/resources';
 import { getStyleFor } from '../../../utils/http-methods.utils';
 import { translateMessage } from '../../../utils/translate-messages';
-
 interface IResourceLinkProps {
  link: any;
  isolateTree: Function;
  resourceOptionSelected: Function;
+ linkLevel: number;
  classes: any;
 }
 
@@ -22,9 +22,10 @@ const ResourceLink = (props: IResourceLinkProps) => {
  const tooltipId = getId('tooltip');
  const buttonId = getId('targetButton');
 
+
  const iconButtonStyles = {
- root: { paddingBottom: 10 },
- menuIcon: { fontSize: 20, padding: 10 }
+ root: { paddingBottom:10, marginTop: -5, marginRight: 2 },
+ menuIcon: { fontSize: 20, padding: 5 }
  };
 
  const methodButtonStyles: CSSProperties = {
@@ -44,8 +45,12 @@ const ResourceLink = (props: IResourceLinkProps) => {
  >
  {resourceLink.method}
  </span>}
- {resourceLink.name}
 
+ <span className={linkStyle.resourceLinkNameContainer}>
+ <span className={linkStyle.resourceLinkText}>
+ {resourceLink.name}
+ </span>
+ </span>
 
  {items.length > 0 &&
  <TooltipHost
@@ -65,7 +70,6 @@ const ResourceLink = (props: IResourceLinkProps) => {
  role='button'
  id={buttonId}
  aria-describedby={tooltipId}
- className={linkStyle.button}
  styles={iconButtonStyles}
  menuIconProps={{ iconName: 'MoreVertical' }}
  title={translateMessage('More actions')}
@@ -77,7 +81,7 @@ const ResourceLink = (props: IResourceLinkProps) => {
  />
  </TooltipHost>
  }
- </span>;
+ </span>
 
  function getMenuItems() {
  const menuItems: IContextualMenuItem[] = [];
@@ -108,8 +112,9 @@ const ResourceLink = (props: IResourceLinkProps) => {
 
 const linkStyle = mergeStyleSets(
  {
- link: { display: 'flex', lineHeight: 'normal' },
- button: { float: 'right', position: 'absolute', right: 0 }
+ link: { display: 'flex', lineHeight: 'normal', width: '100%', overflow: 'hidden' },
+ resourceLinkNameContainer: { textAlign: 'left', flex: '1', overflow:'hidden', display: 'flex' },
+ resourceLinkText: { textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }
  }
 );