Chore (release): 6.2.0 (#1960)

* Chore: reduce PR body content (#1937) * Fix: Center method names on sample queries (#1940) * Feature: Add PHP Snippets tab. (#1923) * Fix: Return focus to feedback button (#1941) * Task: July dependabot upgrades (#1920) * Task: Add missing header telemetry (#1944) * Fix: Remove pivot tooltips (#1952) * Fix: Remove toggleCollapse string (#1951) * Fix: Toolkit component scrolling (#1946) * Chore(deps): Bump terser from 5.13.1 to 5.14.2 (#1953) * Fix: Use resources as a source of truth (#1956) * Task: Add PHP docs link telemetry (#1961) * Revert "Feature: Add PHP Snippets tab. (#1923)" (#1985) * Fix: Disable sanitization of query url when sharing query (#1993) * Bump version to 6.2.0
microsoftgraph · Aug 3, 2022 · 97ca0df · 97ca0df
1 parent e4a3615
commit 97ca0df
Show file tree

Hide file tree

Showing 17 changed files with 1,009 additions and 763 deletions.
diff --git a/.github/workflows/cut-release.yml b/.github/workflows/cut-release.yml
@@ -61,8 +61,8 @@ jobs:
           git fetch origin master --depth 100
           git fetch origin dev --depth 100
 
-          masterPrBody=$(git rev-list --oneline $branchName ^origin/master)
-          devPrBody=$(git rev-list --oneline $branchName ^origin/dev)
+          masterPrBody=$(git rev-list v$currentVersion.. --oneline $branchName ^origin/master)
+          devPrBody=$(git rev-list v$currentVersion.. --oneline $branchName ^origin/dev)
 
           echo 'masterPrBody<<END_OF_OUTPUT' >> $GITHUB_ENV
           echo "$masterPrBody" >> $GITHUB_ENV

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,17 +1,17 @@
 {
         "name": "graph-explorer-v2",
-        "version": "6.1.0",
+        "version": "6.2.0",
         "private": true,
         "dependencies": {
                 "@augloop/types-core": "file:packages/types-core-2.16.189.tgz",
-                "@axe-core/webdriverjs": "4.4.2",
-                "@azure/msal-browser": "2.23.0",
-                "@babel/core": "7.17.9",
-                "@babel/runtime": "7.18.3",
+                "@axe-core/webdriverjs": "4.4.3",
+                "@azure/msal-browser": "2.27.0",
+                "@babel/core": "7.18.6",
+                "@babel/runtime": "7.18.6",
                 "@fluentui/react": "8.72.1",
                 "@fluentui/react-icons-mdl2": "1.3.8",
                 "@microsoft/applicationinsights-react-js": "3.3.4",
-                "@microsoft/applicationinsights-web": "2.7.6",
+                "@microsoft/applicationinsights-web": "2.8.4",
                 "@microsoft/microsoft-graph-client": "3.0.2",
                 "@monaco-editor/react": "4.4.5",
                 "@ms-ofb/officebrowserfeedbacknpm": "file:packages/officebrowserfeedbacknpm-1.6.6.tgz",
@@ -30,18 +30,18 @@
                 "eslint-webpack-plugin": "3.1.1",
                 "express": "4.18.1",
                 "file-loader": "6.2.0",
-                "fork-ts-checker-webpack-plugin": "7.2.3",
+                "fork-ts-checker-webpack-plugin": "7.2.11",
                 "fs-extra": "10.1.0",
                 "guid-typescript": "1.0.9",
                 "isomorphic-fetch": "3.0.0",
                 "localforage": "1.10.0",
-                "mini-css-extract-plugin": "2.6.0",
+                "mini-css-extract-plugin": "2.6.1",
                 "monaco-editor": "0.33.0",
                 "monaco-editor-webpack-plugin": "7.0.1",
-                "office-ui-fabric-core": "11.0.0",
+                "office-ui-fabric-core": "11.0.1",
                 "postcss-flexbugs-fixes": "5.0.2",
                 "postcss-loader": "7.0.0",
-                "postcss-preset-env": "7.7.0",
+                "postcss-preset-env": "7.7.2",
                 "re-resizable": "6.9.9",
                 "react": "16.14.0",
                 "react-app-polyfill": "3.0.0",
@@ -54,10 +54,10 @@
                 "sass": "1.50.0",
                 "sass-loader": "12.6.0",
                 "style-loader": "3.3.1",
-                "typescript": "4.7.2",
+                "typescript": "4.7.4",
                 "url": "0.11.0",
                 "url-loader": "4.1.1",
-                "webpack": "5.72.1",
+                "webpack": "5.73.0",
                 "webpack-dev-server": "4.9.1",
                 "webpack-manifest-plugin": "5.0.0",
                 "workbox-webpack-plugin": "6.5.3"
@@ -86,7 +86,7 @@
         ],
         "devDependencies": {
                 "@testing-library/react": "12.1.5",
-                "@testing-library/user-event": "14.1.1",
+                "@testing-library/user-event": "14.2.1",
                 "@types/chromedriver": "81.0.1",
                 "@types/enzyme": "3.10.11",
                 "@types/enzyme-adapter-react-16": "1.0.6",
@@ -101,26 +101,26 @@
                 "@types/redux-mock-store": "1.0.3",
                 "@types/selenium-webdriver": "4.1.1",
                 "@typescript-eslint/eslint-plugin": "5.22.0",
-                "@typescript-eslint/parser": "5.27.0",
+                "@typescript-eslint/parser": "5.30.5",
                 "acorn": "8.7.1",
-                "babel-jest": "28.1.0",
+                "babel-jest": "28.1.2",
                 "chromedriver": "101.0.0",
                 "enzyme": "3.11.0",
                 "enzyme-adapter-react-16": "1.15.6",
                 "eslint": "8.12.0",
                 "html-webpack-plugin": "5.5.0",
                 "jest": "28.1.0",
-                "jest-environment-jsdom": "28.1.0",
+                "jest-environment-jsdom": "28.1.2",
                 "jest-fetch-mock": "3.0.3",
                 "jest-sonar-reporter": "2.0.0",
-                "jest-watch-typeahead": "1.0.0",
+                "jest-watch-typeahead": "1.1.0",
                 "node-notifier": "10.0.1",
                 "react-dev-utils": "12.0.1",
                 "redux-logger": "3.0.6",
                 "redux-mock-store": "1.5.4",
-                "selenium-webdriver": "4.2.0",
+                "selenium-webdriver": "4.3.0",
                 "start-server-and-test": "1.14.0",
-                "ts-jest": "28.0.1"
+                "ts-jest": "28.0.5"
         },
         "jestSonar": {
                 "reportPath": "reports",

diff --git a/src/app/utils/generate-groups.ts b/src/app/utils/generate-groups.ts
@@ -7,7 +7,6 @@ export function generateGroupsFromList(list: any[], property: string) : IGroup[]
   let isCollapsed = false;
   let previousCount = 0;
   let count = 0;
-  const toggleCollapse: string = isCollapsed ? 'collapsed ': 'expanded '
 
   if (!list || list.length === 0 || list.some(e => !e[property])) {
     return groups;
@@ -17,7 +16,7 @@ export function generateGroupsFromList(list: any[], property: string) : IGroup[]
     if (!map.has(listItem[property])) {
       map.set(listItem[property], true);
       count = list.filter(item => item[property] === listItem[property]).length;
-      const ariaLabel: string = listItem[property] + ' has ' + count + ' results ' + toggleCollapse;
+      const ariaLabel: string = listItem[property] + ' has ' + count + ' results ';
       if (groups.length > 0) {
         isCollapsed = true;
       }

diff --git a/src/app/views/authentication/Authentication.tsx b/src/app/views/authentication/Authentication.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { injectIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { authenticationWrapper } from '../../../modules/authentication';
-import { componentNames, errorTypes, telemetry } from '../../../telemetry';
+import { componentNames, errorTypes, eventTypes, telemetry } from '../../../telemetry';
 import { IRootState } from '../../../types/root';
 import { getAuthTokenSuccess, getConsentedScopesSuccess } from '../../services/actions/auth-action-creators';
 import { setQueryResponseStatus } from '../../services/actions/query-status-action-creator';
@@ -29,6 +29,9 @@ const Authentication = (props: any) => {
   }: any = props;
   const signIn = async (): Promise<void> => {
     setLoginInProgress(true);
+    telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT, {
+      ComponentName: componentNames.SIGN_IN_BUTTON
+    });
 
     try {
       const authResponse = await authenticationWrapper.logIn();
@@ -65,6 +68,9 @@ const Authentication = (props: any) => {
 
   const signInWithOther = async (): Promise<void> => {
     setLoginInProgress(true);
+    telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT, {
+      ComponentName: componentNames.SIGN_IN_WITH_OTHER_ACCOUNT_BUTTON
+    });
     try{
       const authResponse = await authenticationWrapper.logInWithOther();
       if (authResponse) {

diff --git a/src/app/views/common/monaco/Monaco.tsx b/src/app/views/common/monaco/Monaco.tsx
@@ -47,7 +47,7 @@ export function Monaco(props: IMonaco) {
               foldingStrategy: 'indentation',
               showFoldingControls: 'always',
               renderLineHighlight: 'none',
-              scrollBeyondLastLine: false,
+              scrollBeyondLastLine: true,
               overviewRulerBorder: false
             }}
             onChange={onChange}

diff --git a/src/app/views/main-header/FeedbackButton.tsx b/src/app/views/main-header/FeedbackButton.tsx
@@ -1,5 +1,5 @@
-import { getTheme, IconButton, IIconProps, TooltipHost } from '@fluentui/react';
-import React, { useState } from 'react';
+import { getTheme, IButton, IconButton, IIconProps, TooltipHost } from '@fluentui/react';
+import React, { useState, useEffect } from 'react';
 import { translateMessage } from '../../utils/translate-messages';
 import { useSelector } from 'react-redux';
 import FeedbackForm from '../query-runner/request/feedback/FeedbackForm';
@@ -17,6 +17,18 @@ export const FeedbackButton = () => {
   const feedbackTitle = translateMessage('Feedback');
   const content = <div style={{padding:'3px'}}>{translateMessage('Feedback')}</div>
 
+  const feedbackButtonRef = React.useRef<IButton>(null)
+  const isFirstRender = React.useRef(true);
+  useEffect( () => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if(!enableSurvey){
+      feedbackButtonRef.current?.focus();
+    }
+  },[enableSurvey])
+
   const feedbackIconStyles = {
     root:{
       height: '50px',
@@ -66,6 +78,7 @@ export const FeedbackButton = () => {
             styles={feedbackIconStyles}
             role={'button'}
             disabled={enableSurvey}
+            componentRef={feedbackButtonRef}
           />
         </TooltipHost>
 

diff --git a/src/app/views/main-header/Help.tsx b/src/app/views/main-header/Help.tsx
@@ -39,7 +39,7 @@ export const Help = () => {
         iconProps: {
           iconName: 'ReportWarning'
         },
-        onClick: () => trackLinkClickEvents(componentNames.REPORT_AN_ISSUE_LINK)
+        onClick: (e: any) => telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.REPORT_AN_ISSUE_LINK)
       },
       { key: 'divider_1', itemType: ContextualMenuItemType.Divider },
       {
@@ -50,7 +50,7 @@ export const Help = () => {
         iconProps: {
           iconName: 'TextDocument'
         },
-        onClick: () => trackLinkClickEvents(componentNames.GE_DOCUMENTATION_LINK)
+        onClick: (e: any) => telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.GE_DOCUMENTATION_LINK)
       },
       {
         key: 'graph-documentation',
@@ -60,7 +60,9 @@ export const Help = () => {
         iconProps: {
           iconName: 'Documentation'
         },
-        onClick: () => trackLinkClickEvents(componentNames.GRAPH_DOCUMENTATION_LINK)
+        onClick: (e: any) => telemetry.trackLinkClickEvent(
+          e.currentTarget.href,
+          componentNames.GRAPH_DOCUMENTATION_LINK)
       },
       {
         key: 'github',
@@ -76,17 +78,17 @@ export const Help = () => {
             }
           }
         },
-        onClick: () => trackLinkClickEvents(componentNames.GITHUB_LINK)
+        onClick: (e: any) => telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.GITHUB_LINK)
       }
     ];
     setItems(menuItems);
   }, [authenticated]);
 
-  const trackLinkClickEvents = (componentName: string) => {
-    telemetry.trackEvent(eventTypes.LINK_CLICK_EVENT, {
-      ComponentName: componentName
+  const trackHelpButtonClickEvent = () => {
+    telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT, {
+      ComponentName: componentNames.HELP_BUTTON
     });
-  };
+  }
 
   const calloutStyles: React.CSSProperties = {
     overflowY: 'hidden'
@@ -121,6 +123,7 @@ export const Help = () => {
           styles={helpButtonStyles}
           menuIconProps={{ iconName: 'Help' }}
           menuProps={menuProperties}
+          onMenuClick={trackHelpButtonClickEvent}
         />
       </TooltipHost>
     </div>

diff --git a/src/app/views/main-header/settings/Settings.tsx b/src/app/views/main-header/settings/Settings.tsx
@@ -82,6 +82,12 @@ export const Settings: React.FunctionComponent<ISettingsProps> = () => {
     });
   };
 
+  const trackSettingsButtonClickEvent = () => {
+    telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT, {
+      ComponentName: componentNames.SETTINGS_BUTTON
+    });
+  }
+
   const calloutStyles: React.CSSProperties = {
     overflowY: 'hidden'
   }
@@ -119,6 +125,7 @@ export const Settings: React.FunctionComponent<ISettingsProps> = () => {
           styles={settingsButtonStyles}
           menuIconProps={{ iconName: 'Settings' }}
           menuProps={menuProperties}
+          onMenuClick={trackSettingsButtonClickEvent}
         />
       </TooltipHost>
       <div>

diff --git a/src/app/views/query-response/QueryResponse.tsx b/src/app/views/query-response/QueryResponse.tsx
@@ -1,7 +1,7 @@
 import {
   Announced, Dialog, DialogFooter, DialogType,
-  DefaultButton, FontSizes, getId, Icon, IconButton,
-  Modal, Pivot, PivotItem, TooltipHost
+  DefaultButton, FontSizes, IconButton,
+  Modal, Pivot, PivotItem
 } from '@fluentui/react';
 import { Resizable } from 're-resizable';
 import React, { useState, useEffect } from 'react';
@@ -85,21 +85,15 @@ const QueryResponse = (props: IQueryResponseProps) => {
     if(!pivotItem){ return ;}
     setCurrentTab(pivotItem.props.itemKey!);
     onPivotItemClick(sampleQuery, pivotItem);
-  }
-
-  const renderItemLink = (link: any) => {
-    return (
-      <TooltipHost
-        content={link.title}
-        id={getId()}
-        calloutProps={{ gapSpace: 0 }}
-      >
-        <Icon iconName={link.itemIcon} style={{ paddingRight: 5 }} />
-        {link.headerText}
-      </TooltipHost>
-    );
   };
 
+  const onScroll = () => {
+    const queryResponseElements = document.getElementsByClassName('query-response');
+    if(queryResponseElements && queryResponseElements.length > 0){
+      queryResponseElements[0].scrollTop = 0;
+    }
+  }
+
   return (
     <>
       <Resizable
@@ -121,7 +115,8 @@ const QueryResponse = (props: IQueryResponseProps) => {
         <div className='query-response' style={{
           minHeight: 350,
           height: '100%'
-        }}>
+        }}
+        onScroll={onScroll}>
 
           <Pivot overflowBehavior='menu'
             overflowAriaLabel={translateMessage('More items')}
@@ -137,7 +132,6 @@ const QueryResponse = (props: IQueryResponseProps) => {
               itemKey='expand-response'
               ariaLabel={translateMessage('Expand response')}
               title={translateMessage('Expand response')}
-              onRenderItemLink={renderItemLink}
             />
           </Pivot>
         </div>

diff --git a/src/app/views/query-response/pivot-items/pivot-items.tsx b/src/app/views/query-response/pivot-items/pivot-items.tsx
@@ -1,4 +1,4 @@
-import { getId, getTheme, Icon, ITheme, PivotItem, TooltipHost } from '@fluentui/react';
+import { getTheme, Icon, ITheme, PivotItem } from '@fluentui/react';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
@@ -49,13 +49,14 @@ export const getPivotItems = () => {
 
   function renderItemLink(link: any) {
     return (
-      <TooltipHost content={link.title} id={getId()} calloutProps={{ gapSpace: 0 }}>
+      <>
         <Icon iconName={link.itemIcon} style={{ paddingRight: 5 }} />
         {link.headerText}
 
         {link.itemKey === 'adaptive-cards' && showDotIfAdaptiveCardPresent()}
         {link.itemKey === 'toolkit-component' && showDotIfGraphToolkitPresent()}
-      </TooltipHost>
+      </>
+
     );
   }
 

diff --git a/src/app/views/query-response/queryResponse.styles.ts b/src/app/views/query-response/queryResponse.styles.ts
@@ -30,14 +30,9 @@ export const queryResponseStyles = (theme: ITheme) => {
     },
     toolkitText: {
       root: {
-        padding: '20px',
-        width: '100%',
-        margin: 'auto',
         display: 'inline-block',
-        position: 'relative',
-        top: '160px',
-        lineHeight: '1.5',
-        textAlign: 'justify'
+        marginTop: '13%',
+        marginLeft: '16%'
       }
     }
   };

diff --git a/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx b/src/app/views/query-runner/query-input/share-query/ShareQuery.tsx
@@ -21,8 +21,7 @@ export const ShareQuery = () => {
 
   const query = { ...sampleQuery };
   const sanitizedQueryUrl = sanitizeQueryUrl(query.sampleUrl);
-  query.sampleUrl = sanitizedQueryUrl;
-  const shareLink = createShareLink(query);
+  const shareLink = createShareLink(sampleQuery);
 
   const toggleShareQueryDialogState = () => {
     setShareQuaryDialogStatus(prevState => !prevState);
@@ -37,7 +36,7 @@ export const ShareQuery = () => {
     telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT,
       {
         ComponentName: componentNames.SHARE_QUERY_COPY_BUTTON,
-        QuerySignature: `${sampleQuery.selectedVerb} ${sanitizedQueryUrl}`
+        QuerySignature: `${query.selectedVerb} ${sanitizedQueryUrl}`
       });
   }