Enhancement: error hints (#1060)

* initial commit on auth error hints

* added more errors to error library

* fixed auth errors and added error tips

* updating local branch with dev

* removed interaction_status from cookies

* added return type to createCookie

* removed uri extension and added consent error tips

* error hints now appear below error-code

* fixed formating errors

* maintained fluentui at 8.28.0

* adjustment to hints wording

* corrected hinting language

* code refactors in error hinting

.vscode/settings.json

@@ -1,21 +1,18 @@
 {
-    "search.exclude": {
-        "**/node_modules": true,
-        "**/all.min.js": true
-    },
-    "files.exclude": {
-        "**/node_modules": true,
-        "**/.github": true,
-    },
-    "files.trimTrailingWhitespace": true,
-    "editor.codeActionsOnSave": {
-        "source.fixAll.tslint": true
-    },
-    "editor.formatOnSave": true,
-    "editor.formatOnPaste": true,
-    "typescript.updateImportsOnFileMove.enabled": "always",
-    "eslint.validate": [
-        "typescript",
-        "typescriptreact"
-    ],
-}
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/all.min.js": true
+  },
+  "files.exclude": {
+    "**/node_modules": true,
+    "**/.github": true
+  },
+  "files.trimTrailingWhitespace": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.tslint": true
+  },
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": true,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "eslint.validate": ["typescript", "typescriptreact"]
+}

package.json

@@ -154,4 +154,4 @@
     "ws": "8.0.0",
     "yargs-parser": "13.1.2"
   }
-}
+}

src/app/services/actions/permissions-action-creator.ts

@@ -9,6 +9,7 @@ import { IRootState } from '../../../types/root';
 import { sanitizeQueryUrl } from '../../utils/query-url-sanitization';
 import { parseSampleUrl } from '../../utils/sample-url-generation';
 import { translateMessage } from '../../utils/translate-messages';
+import { getConsentAuthErrorHint } from '../../views/authentication/AuthenticationErrorsHints';
 import { ACCOUNT_TYPE, PERMS_SCOPE } from '../graph-constants';
 import {
   FETCH_SCOPES_ERROR,
@@ -118,9 +119,10 @@ export function consentToScopes(scopes: string[]): Function {
       dispatch(
         setQueryResponseStatus({
           statusText: translateMessage('Scope consent failed'),
-          status: errorCode,
+          status:errorCode,
           ok: false,
           messageType: MessageBarType.error,
+          hint: getConsentAuthErrorHint(errorCode)
         })
       );
     }

src/app/views/App.tsx

@@ -1,9 +1,4 @@
-import {
-  Announced,
-  IStackTokens,
-  ITheme,
-  styled,
-} from '@fluentui/react';
+import { Announced, IStackTokens, ITheme, styled } from '@fluentui/react';
 import React, { Component } from 'react';
 import { InjectedIntl, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
@@ -15,11 +10,7 @@ import { componentNames, eventTypes, telemetry } from '../../telemetry';
 import { loadGETheme } from '../../themes';
 import { ThemeContext } from '../../themes/theme-context';
 import { Mode } from '../../types/enums';
-import {
-  IInitMessage,
-  IQuery,
-  IThemeChangedMessage,
-} from '../../types/query-runner';
+import { IInitMessage, IQuery, IThemeChangedMessage } from '../../types/query-runner';
 import { IRootState } from '../../types/root';
 import { ISharedQueryParams } from '../../types/share-query';
 import { ISidebarProps } from '../../types/sidebar';
@@ -34,10 +25,7 @@ import { GRAPH_URL } from '../services/graph-constants';
 import { parseSampleUrl } from '../utils/sample-url-generation';
 import { substituteTokens } from '../utils/token-helpers';
 import { translateMessage } from '../utils/translate-messages';
-import {
-  appTitleDisplayOnFullScreen,
-  appTitleDisplayOnMobileScreen,
-} from './app-sections/AppTitle';
+import { appTitleDisplayOnFullScreen, appTitleDisplayOnMobileScreen } from './app-sections/AppTitle';
 import { headerMessaging } from './app-sections/HeaderMessaging';
 import { statusMessages } from './app-sections/StatusMessages';
 import { termsOfUseMessage } from './app-sections/TermsOfUseMessage';
@@ -157,8 +145,7 @@ class App extends Component<IAppProps, IAppState> {
   }
 
   private generateQueryObjectFrom(queryParams: any) {
-    const { request, method, version, graphUrl, requestBody, headers } =
-      queryParams;
+    const { request, method, version, graphUrl, requestBody, headers } = queryParams;
 
     if (!request) {
       return null;
@@ -273,9 +260,11 @@ class App extends Component<IAppProps, IAppState> {
     const properties = { ...sidebarProperties };
     properties.showSidebar = !properties.showSidebar;
     this.props.actions!.toggleSidebar(properties);
-    telemetry.trackEvent(eventTypes.BUTTON_CLICK_EVENT, {
-      ComponentName: componentNames.SIDEBAR_HAMBURGER_BUTTON,
-    });
+    telemetry.trackEvent(
+      eventTypes.BUTTON_CLICK_EVENT,
+      {
+        ComponentName: componentNames.SIDEBAR_HAMBURGER_BUTTON,
+      });
   };
 
   public displayToggleButton = (mediaQueryList: any) => {
@@ -301,8 +290,8 @@ class App extends Component<IAppProps, IAppState> {
           justifyContent: minimised ? '' : 'center',
           alignItems: minimised ? '' : 'center',
           marginLeft: minimised ? '' : '-0.9em',
-        }}
-      >
+
+        }}>
         <div className={minimised ? '' : 'col-10'}>
           <Authentication />
         </div>
@@ -315,17 +304,9 @@ class App extends Component<IAppProps, IAppState> {
 
   public render() {
     const classes = classNames(this.props);
-    const {
-      authenticated,
-      graphExplorerMode,
-      queryState,
-      minimised,
-      termsOfUse,
-      sampleQuery,
-      actions,
-      sidebarProperties,
-      intl: { messages },
-    }: any = this.props;
+    const { authenticated, graphExplorerMode, queryState, minimised, termsOfUse, sampleQuery,
+      actions, sidebarProperties, intl: { messages }, }: any = this.props;
+
     const query = createShareLink(sampleQuery, authenticated);
     const sampleHeaderText = messages['Sample Queries'];
     // tslint:disable-next-line:no-string-literal
@@ -364,25 +345,18 @@ class App extends Component<IAppProps, IAppState> {
       // @ts-ignore
       <ThemeContext.Provider value={this.props.appTheme}>
         <div className={`container-fluid ${classes.app}`}>
-          <Announced
-            message={
-              !showSidebar
-                ? translateMessage('Sidebar minimized')
-                : translateMessage('Sidebar maximized')
-            }
-          />
+          <Announced message={!showSidebar ?
+            translateMessage('Sidebar minimized') : translateMessage('Sidebar maximized')} />
           <div className='row'>
             {graphExplorerMode === Mode.Complete && (
               <div className={sidebarWidth}>
-                {mobileScreen &&
-                  appTitleDisplayOnMobileScreen(
+                {mobileScreen && appTitleDisplayOnMobileScreen(
                     stackTokens,
                     classes,
                     this.toggleSidebar
                   )}
 
-                {!mobileScreen &&
-                  appTitleDisplayOnFullScreen(
+                {!mobileScreen && appTitleDisplayOnFullScreen(
                     classes,
                     minimised,
                     this.toggleSidebar
@@ -395,10 +369,7 @@ class App extends Component<IAppProps, IAppState> {
 
                 {showSidebar && (
                   <>
-                    <Sidebar
-                      sampleHeaderText={sampleHeaderText}
-                      historyHeaderText={historyHeaderText}
-                    />
+                    <Sidebar sampleHeaderText={sampleHeaderText} historyHeaderText={historyHeaderText} />
                   </>
                 )}
               </div>
@@ -428,15 +399,8 @@ class App extends Component<IAppProps, IAppState> {
   }
 }
 
-const mapStateToProps = ({
-  sidebarProperties,
-  theme,
-  queryRunnerStatus,
-  profile,
-  sampleQuery,
-  termsOfUse,
-  authToken,
-  graphExplorerMode,
+const mapStateToProps = ({ sidebarProperties, theme,
+  queryRunnerStatus, profile, sampleQuery, termsOfUse, authToken, graphExplorerMode,
 }: IRootState) => {
   const mobileScreen = !!sidebarProperties.mobileScreen;
   const showSidebar = !!sidebarProperties.showSidebar;

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

@@ -43,7 +43,7 @@ export function statusMessages(queryState: any, sampleQuery: IQuery, actions: an
   };
 
   if (queryState) {
-    const { messageType, statusText, status, duration } = queryState;
+    const { messageType, statusText, status, duration, hint } = queryState;
     let urls: any = {};
     let message = status;
     const extractedUrls = extractUrl(status);
@@ -72,6 +72,8 @@ export function statusMessages(queryState: any, sampleQuery: IQuery, actions: an
           <FormattedMessage id='tab' />
         </>}
 
+        {hint && <div>{hint}</div>}
+
       </MessageBar>);
   }
 }