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' }
   }
 );