Chore (release): 5.0.0

package.json

@@ -1,6 +1,6 @@
 {
         "name": "graph-explorer-v2",
-        "version": "4.18.1",
+        "version": "5.0.0",
         "private": true,
         "dependencies": {
                 "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",
@@ -22,7 +22,7 @@
                 "bootstrap": "4.3.1",
                 "case-sensitive-paths-webpack-plugin": "2.4.0",
                 "css-loader": "6.5.1",
-                "dotenv": "6.0.0",
+                "dotenv": "16.0.0",
                 "dotenv-expand": "4.2.0",
                 "eslint-config-react-app": "7.0.0",
                 "eslint-plugin-react": "7.28.0",
@@ -36,31 +36,31 @@
                 "jest": "27.3.1",
                 "jest-sonar-reporter": "2.0.0",
                 "jest-watch-typeahead": "1.0.0",
-                "localforage": "1.7.3",
-                "mini-css-extract-plugin": "1.6.2",
+                "localforage": "1.10.0",
+                "mini-css-extract-plugin": "2.6.0",
                 "monaco-editor": "0.25.2",
                 "monaco-editor-webpack-plugin": "4.2.0",
                 "office-ui-fabric-core": "11.0.0",
                 "postcss-flexbugs-fixes": "5.0.2",
                 "postcss-loader": "4.3.0",
-                "postcss-preset-env": "7.3.0",
+                "postcss-preset-env": "7.4.2",
                 "re-resizable": "6.9.1",
                 "react": "16.14.0",
                 "react-app-polyfill": "0.2.1",
                 "react-dom": "16.8.2",
                 "react-intl": "2.8.0",
                 "react-redux": "7.1.0",
                 "redux": "4.1.2",
-                "redux-thunk": "2.3.0",
+                "redux-thunk": "2.4.1",
                 "resolve": "1.10.0",
                 "sass": "1.49.8",
                 "sass-loader": "12.6.0",
                 "style-loader": "2.0.0",
-                "typescript": "4.5.4",
+                "typescript": "4.6.2",
                 "url": "0.11.0",
                 "url-loader": "4.1.1",
                 "webpack": "5.67.0",
-                "webpack-dev-server": "4.7.3",
+                "webpack-dev-server": "4.7.4",
                 "webpack-manifest-plugin": "4.1.1",
                 "workbox-webpack-plugin": "6.4.2"
         },
@@ -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",
@@ -103,8 +104,8 @@
                 "@typescript-eslint/eslint-plugin": "5.12.0",
                 "@typescript-eslint/parser": "5.12.0",
                 "acorn": "8.7.0",
-                "babel-jest": "26.6.3",
-                "chromedriver": "^88.0.0",
+                "babel-jest": "27.5.1",
+                "chromedriver": "^99.0.0",
                 "enzyme": "3.11.0",
                 "enzyme-adapter-react-16": "1.15.6",
                 "eslint": "8.7.0",
@@ -113,7 +114,7 @@
                 "node-notifier": "10.0.0",
                 "react-dev-utils": "12.0.0",
                 "redux-logger": "3.0.6",
-                "redux-mock-store": "1.5.3",
+                "redux-mock-store": "1.5.4",
                 "selenium-webdriver": "4.1.1",
                 "start-server-and-test": "1.11.7",
                 "ts-jest": "27.0.7"
@@ -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/app-sections/StatusMessages.tsx

@@ -53,20 +53,19 @@ const StatusMessages = () => {
   if (queryRunnerStatus) {
     const { messageType, statusText, status, duration, hint } = queryRunnerStatus;
     let urls: any = {};
-    let message = statusText;
-    const extractedUrls = extractUrl(statusText);
+    let message = status.toString();
+    const extractedUrls = extractUrl(status.toString());
     if (extractedUrls) {
-      message = replaceLinks(statusText);
+      message = replaceLinks(status.toString());
       urls = convertArrayToObject(extractedUrls);
     }
 
-
     return <MessageBar messageBarType={messageType}
       isMultiline={true}
       onDismiss={() => dispatch(clearQueryStatus())}
       dismissButtonAriaLabel='Close'
       aria-live={'assertive'}>
-      {`${status} - `}{displayStatusMessage(message, urls)}
+      {`${statusText} - `}{displayStatusMessage(message, urls)}
 
       {duration && <>
         {` - ${duration}`}<FormattedMessage id='milliseconds' />

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

@@ -34,13 +34,13 @@ const PanelList = ({ messages,
   columns, classes, selection,
   renderItemColumn, renderDetailsHeader, renderCustomCheckbox }: IPanelList) => {
 
-  const sortedPermissions = (permissionsToSort: IPermission[]) : IPermission[] => {
-    return permissionsToSort.sort(dynamicSort('value', SortOrder.ASC));
+  const sortPermissions = (permissionsToSort: IPermission[]): IPermission[] => {
+    return permissionsToSort ? permissionsToSort.sort(dynamicSort('value', SortOrder.ASC)) : [];
   }
 
   const { consentedScopes, scopes, authToken } = useSelector((state: IRootState) => state);
   const { fullPermissions } = scopes.data;
-  const [permissions, setPermissions] = useState(sortedPermissions(fullPermissions));
+  const [permissions, setPermissions] = useState(sortPermissions(fullPermissions));
   const permissionsList: any[] = [];
   const tokenPresent = !!authToken.token;
 

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

@@ -19,7 +19,7 @@ interface ITabList {
 const TabList = ({ columns, classes, renderItemColumn, renderDetailsHeader, maxHeight }: ITabList) => {
   const dispatch = useDispatch();
   const { consentedScopes, scopes, authToken } = useSelector((state: IRootState) => state);
-  const permissions: IPermission[] =  scopes.data.specificPermissions;
+  const permissions: IPermission[] = scopes.data.specificPermissions ? scopes.data.specificPermissions : [];
   const tokenPresent = !!authToken.token;
   const [isHoverOverPermissionsList, setIsHoverOverPermissionsList] = useState(false);
 
@@ -71,7 +71,7 @@ const TabList = ({ columns, classes, renderItemColumn, renderDetailsHeader, maxH
           layoutMode={DetailsListLayoutMode.justified}
           onRenderDetailsHeader={(props?: any, defaultRender?: any) => renderDetailsHeader(props, defaultRender)} />
       </div>
-      {permissions && permissions.length === 0 &&
+      {permissions.length === 0 &&
         displayNoPermissionsFoundMessage()
       }
     </>

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/history/History.tsx

@@ -216,7 +216,7 @@ export class History extends Component<IHistoryProps, any> {
                   shouldFocusOnMount: true,
                   items: buttonActions
                 }}
-                styles={{root: {paddingBottom: 10, marginLeft: -1.2}}}
+                styles={{root: {paddingBottom: 10, marginLeft: 1}}}
               />
             </TooltipHost>
           );
@@ -281,6 +281,7 @@ export class History extends Component<IHistoryProps, any> {
                 }}
                 ariaLabel={collapseButtonLabel}
                 onClick={() => this.onToggleCollapse(props)}
+                styles={{icon: {marginTop: '15px'}}}
               />
             </TooltipHost>
             <div className={classes.groupTitle}>

src/app/views/sidebar/history/history-utils.ts

@@ -17,7 +17,7 @@ export async function readHistoryData(): Promise<IHistoryItem[]> {
     if (historyItemHasExpired(creationTime)) {
       historyStorage.removeItem(creationTime);
     } else {
-      const historyItem: IHistoryItem = await historyStorage.getItem(creationTime);
+      const historyItem = await historyStorage.getItem(creationTime)! as IHistoryItem;
       historyData = [...historyData, historyItem];
     }
   }

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}
           />
         }}