feat: Deep linking for the notification page

Composer/packages/client/__tests__/components/notificationList.test.js

@@ -3,14 +3,36 @@
 
 import * as React from 'react';
 import { render } from 'react-testing-library';
+import { formatMessage } from 'format-message';
 
 import { NotificationList } from '../../src/pages/notifications/NotificationList';
 
 describe('<NotificationList/>', () => {
   const items = [
-    { type: 'Error', location: 'test1', message: 'error1' },
-    { type: 'Warning', location: 'test2', message: 'error2' },
-    { type: 'Error', location: 'test3', message: 'error3' },
+    {
+      id: 'Main.dialog',
+      severity: formatMessage('Error'),
+      type: 'dialog',
+      location: formatMessage('test1'),
+      message: formatMessage('error1'),
+      diagnostic: '',
+    },
+    {
+      id: 'Main.lu',
+      severity: formatMessage('Warning'),
+      type: 'lu',
+      location: formatMessage('test2'),
+      message: formatMessage('error2'),
+      diagnostic: '',
+    },
+    {
+      id: 'common.lg',
+      severity: formatMessage('Error'),
+      type: 'lg',
+      location: formatMessage('test3'),
+      message: formatMessage('error3'),
+      diagnostic: '',
+    },
   ];
   it('should render the NotificationList', () => {
     const { container } = render(<NotificationList items={items} />);

Composer/packages/client/src/ShellApi.ts

@@ -5,6 +5,7 @@ import React, { useEffect, useContext, useMemo } from 'react';
 import { ShellData } from '@bfc/shared';
 import isEqual from 'lodash/isEqual';
 import get from 'lodash/get';
+import { LGTemplate } from 'botbuilder-lg';
 
 import { isExpression } from './utils';
 import * as lgUtil from './utils/lgUtil';
@@ -132,8 +133,13 @@ export const ShellApi: React.FC = () => {
     if (id === undefined) throw new Error('must have a file id');
     const file = lgFiles.find(file => file.id === id);
     if (!file) throw new Error(`lg file ${id} not found`);
+    let templates: LGTemplate[] = [];
+    try {
+      templates = lgUtil.parse(file.content);
+    } catch (error) {
+      console.error(error);
+    }
 
-    const templates = lgUtil.parse(file.content);
     const lines = file.content.split('\n');
 
     return templates.map(t => {

Composer/packages/client/src/pages/language-generation/code-editor.tsx

@@ -8,17 +8,19 @@ import get from 'lodash/get';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
 import { CodeRange, LgFile } from '@bfc/shared';
+import { editor } from '@bfcomposer/monaco-editor/esm/vs/editor/editor.api';
 
 import * as lgUtil from '../../utils/lgUtil';
 
 interface CodeEditorProps {
   file: LgFile;
   onChange: (value: string) => void;
-  codeRange?: Partial<CodeRange> | null;
+  codeRange?: Partial<CodeRange>;
+  onMount?: (editor: editor.IStandaloneCodeEditor) => void;
 }
 
 export default function CodeEditor(props: CodeEditorProps) {
-  const { file, codeRange } = props;
+  const { file, codeRange, onMount } = props;
   const onChange = debounce(props.onChange, 500);
   const [diagnostics, setDiagnostics] = useState(get(file, 'diagnostics', []));
   const [content, setContent] = useState(get(file, 'content', ''));
@@ -53,7 +55,8 @@ export default function CodeEditor(props: CodeEditorProps) {
         lineDecorationsWidth: undefined,
         lineNumbersMinChars: false,
       }}
-      codeRange={codeRange || -1}
+      codeRange={codeRange}
+      editorDidMount={onMount}
       errorMsg={errorMsg}
       value={content}
       onChange={_onChange}

Composer/packages/client/src/pages/language-generation/index.tsx

@@ -10,6 +10,7 @@ import { Nav, INavLinkGroup, INavLink } from 'office-ui-fabric-react/lib/Nav';
 import get from 'lodash/get';
 import { RouteComponentProps } from '@reach/router';
 import { CodeRange } from '@bfc/shared';
+import { editor } from '@bfcomposer/monaco-editor/esm/vs/editor/editor.api';
 
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { OpenAlertModal, DialogStyle } from '../../components/Modal';
@@ -37,12 +38,23 @@ const LGPage: React.FC<RouteComponentProps> = props => {
   const { lgFiles, dialogs } = state;
   const [editMode, setEditMode] = useState(false);
   const [fileValid, setFileValid] = useState(true);
-  const [codeRange, setCodeRange] = useState<CodeRange | null>(null);
+  const [codeRange, setCodeRange] = useState<CodeRange>();
+  const [lgEditor, setLgEditor] = useState<editor.IStandaloneCodeEditor | null>(null);
 
+  const hash = props.location ? props.location.hash : '';
   const subPath = props['*'];
   const isRoot = subPath === '';
   const activeDialog = dialogs.find(item => item.id === subPath);
 
+  useEffect(() => {
+    if (hash && lgEditor) {
+      const match = /line=(\d+)/g.exec(hash);
+      if (match) {
+        lgEditor.revealLine(+match[1]);
+      }
+    }
+  }, [hash, lgEditor]);
+
   // for now, one bot only have one lg file by default. all dialog share one lg
   // file.
   const lgFile = lgFiles.length ? lgFiles[0] : null;
@@ -96,7 +108,7 @@ const LGPage: React.FC<RouteComponentProps> = props => {
 
     //  fall back to the all-up page if we don't have an active dialog
     if (!isRoot && !activeDialog && dialogs.length) {
-      navigateTo('/language-generation');
+      navigateTo('/language-generation/');
     }
   }, [subPath, dialogs]);
 
@@ -113,15 +125,15 @@ const LGPage: React.FC<RouteComponentProps> = props => {
 
   function onSelect(id) {
     if (id === '_all') {
-      navigateTo('/language-generation');
+      navigateTo('/language-generation/');
     } else {
       navigateTo(`language-generation/${id}`);
     }
   }
 
   function onToggleEditMode() {
     setEditMode(!editMode);
-    setCodeRange(null);
+    setCodeRange(undefined);
   }
 
   async function onChange(newContent) {
@@ -173,8 +185,9 @@ const LGPage: React.FC<RouteComponentProps> = props => {
             css={actionButton}
             onText={formatMessage('Edit mode')}
             offText={formatMessage('Edit mode')}
+            defaultChecked={false}
             checked={editMode}
-            disabled={(!isRoot && editMode === false) || (codeRange === null && fileValid === false)}
+            disabled={(!isRoot && editMode === false) || (!codeRange && fileValid === false)}
             onChange={onToggleEditMode}
           />
         </div>
@@ -215,7 +228,7 @@ const LGPage: React.FC<RouteComponentProps> = props => {
           <div css={contentEditor}>
             {editMode ? (
               <Suspense fallback={<LoadingSpinner />}>
-                <CodeEditor file={lgFile} codeRange={codeRange} onChange={onChange} />
+                <CodeEditor file={lgFile} codeRange={codeRange} onChange={onChange} onMount={setLgEditor} />
               </Suspense>
             ) : (
               <TableView file={lgFile} activeDialog={activeDialog} onClickEdit={onTableViewClickEdit} />

Composer/packages/client/src/pages/notifications/NotificationList.tsx

@@ -11,6 +11,7 @@ import { notification, typeIcon, listRoot, icons } from './styles';
 
 export interface INotificationListProps {
   items: INotification[];
+  onItemInvoked: (item: INotification) => void;
 }
 
 const columns: IColumn[] = [
@@ -23,7 +24,8 @@ const columns: IColumn[] = [
     minWidth: 30,
     maxWidth: 30,
     onRender: (item: INotification) => {
-      return <FontIcon iconName={icons[item.type].iconName} css={typeIcon(icons[item.type])} />;
+      const icon = icons[item.severity];
+      return <FontIcon iconName={icon.iconName} css={typeIcon(icon)} />;
     },
   },
   {
@@ -36,7 +38,7 @@ const columns: IColumn[] = [
     isResizable: true,
     data: 'string',
     onRender: (item: INotification) => {
-      return <span>{item.type}</span>;
+      return <span>{item.severity}</span>;
     },
     isPadded: true,
   },
@@ -71,7 +73,7 @@ const columns: IColumn[] = [
 ];
 
 export const NotificationList: React.FC<INotificationListProps> = props => {
-  const { items } = props;
+  const { items, onItemInvoked } = props;
 
   return (
     <div css={listRoot} data-testid="notifications-table-view">
@@ -82,6 +84,7 @@ export const NotificationList: React.FC<INotificationListProps> = props => {
         setKey="none"
         layoutMode={DetailsListLayoutMode.justified}
         isHeaderVisible={true}
+        onItemInvoked={onItemInvoked}
       />
     </div>
   );

Composer/packages/client/src/pages/notifications/index.tsx

@@ -11,15 +11,31 @@ import useNotifications from './useNotifications';
 import { NotificationList } from './NotificationList';
 import { NotificationHeader } from './NotificationHeader';
 import { root } from './styles';
+import { INotification } from './types';
+import { navigateTo } from './../../utils';
 
+const navigations = {
+  lg: (item: INotification) => {
+    navigateTo(`/language-generation/#line=${item.diagnostic.Range.Start.Line || 0}`);
+  },
+  lu: (item: INotification) => {
+    navigateTo(`/dialogs/${item.id}`);
+  },
+  dialog: (item: INotification) => {
+    navigateTo(`/dialogs/${item.id}`);
+  },
+};
 const Notifications: React.FC<RouteComponentProps> = () => {
   const [filter, setFilter] = useState('');
   const { notifications, locations } = useNotifications(filter);
+  const handleItemInvoked = (item: INotification) => {
+    navigations[item.type](item);
+  };
   return (
     <div css={root} data-testid="notifications-page">
       <ToolBar />
       <NotificationHeader items={locations} onChange={setFilter} />
-      <NotificationList items={notifications} />
+      <NotificationList items={notifications} onItemInvoked={handleItemInvoked} />
     </div>
   );
 };

Composer/packages/client/src/pages/notifications/types.ts

@@ -2,7 +2,10 @@
 // Licensed under the MIT License.
 
 export interface INotification {
+  id: string;
+  severity: string;
   type: string;
   location: string;
   message: string;
+  diagnostic: any;
 }

Composer/packages/client/src/pages/notifications/useNotifications.tsx

@@ -21,24 +21,41 @@ export default function useNotifications(filter: string) {
       dialog.diagnostics.map(diagnostic => {
         const location = dialog.displayName;
         locations.add(location);
-        notifactions.push({ type: 'Error', location, message: diagnostic });
+        notifactions.push({
+          type: 'dialog',
+          location,
+          message: diagnostic,
+          severity: 'Error',
+          diagnostic,
+          id: dialog.id,
+        });
       });
     });
     luFiles.forEach(lufile => {
       lufile.diagnostics.map(diagnostic => {
         const location = `${lufile.id}.lu`;
         locations.add(location);
-        notifactions.push({ type: 'Error', location, message: diagnostic.text });
+        notifactions.push({
+          type: 'lu',
+          location,
+          message: diagnostic.text,
+          severity: 'Error',
+          diagnostic,
+          id: lufile.id,
+        });
       });
     });
-    lgFiles.forEach(lgFiles => {
-      lgFiles.diagnostics.map(diagnostic => {
-        const location = `${lgFiles.id}.lg`;
+    lgFiles.forEach(lgFile => {
+      lgFile.diagnostics.map(diagnostic => {
+        const location = `${lgFile.id}.lg`;
         locations.add(location);
         notifactions.push({
-          type: DiagnosticSeverity[diagnostic.Severity],
+          type: 'lg',
+          severity: DiagnosticSeverity[diagnostic.Severity],
           location,
           message: createSingleMessage(diagnostic),
+          diagnostic,
+          id: lgFile.id,
         });
       });
     });

Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/index.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useState, ReactElement, Suspense } from 'react';
+import React, { useState, ReactElement, Suspense, useEffect } from 'react';
 import formatMessage from 'format-message';
 import { FieldProps } from '@bfcomposer/react-jsonschema-form';
 import { Dropdown, ResponsiveMode, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
@@ -35,6 +35,18 @@ export const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = props
     selectedFile && typeof props.formData === 'string' && props.formData.startsWith(selectedFile.id)
   );
 
+  //make the inline editor show error message
+  useEffect(() => {
+    if (selectedFile && selectedFile.diagnostics.length > 0) {
+      const msg = selectedFile.diagnostics.reduce((msg: string, diagnostic) => {
+        return (msg += `${diagnostic.text}\n`);
+      }, '');
+      setErrorMsg(msg);
+    } else {
+      setErrorMsg('');
+    }
+  }, [selectedFile]);
+
   const handleChange = (_, option?: IDropdownOption): void => {
     if (option) {
       switch (option.key) {
@@ -142,12 +154,7 @@ export const RecognizerField: React.FC<FieldProps<MicrosoftIRecognizer>> = props
           {() => {
             if (selectedFile && isLuFileSelected) {
               const updateLuFile = (newValue?: string): void => {
-                shellApi
-                  .updateLuFile({ id: selectedFile.id, content: newValue })
-                  .then(() => setErrorMsg(''))
-                  .catch(error => {
-                    setErrorMsg(error);
-                  });
+                shellApi.updateLuFile({ id: selectedFile.id, content: newValue }).catch(setErrorMsg);
               };
 
               return (

Composer/packages/server/__tests__/models/bot/botProject.test.ts

@@ -228,11 +228,14 @@ describe('lu operation', () => {
     }
   });
 
-  it('should throw error when lu content is invalid', async () => {
+  it('should update diagnostics when lu content is invalid', async () => {
     const id = 'root';
     const content = 'hello \n hello3';
-
-    await expect(proj.updateLuFile(id, content)).rejects.toThrow();
+    const luFiles = await proj.updateLuFile(id, content);
+    const result = luFiles.find(f => f.id === id);
+    if (result !== undefined) {
+      await expect(result.diagnostics.length).toBeGreaterThan(0);
+    }
   });
 
   it('should delete lu file and update index', async () => {

Composer/packages/server/src/models/bot/botProject.ts

@@ -3,7 +3,6 @@
 
 import fs from 'fs';
 
-import isEqual from 'lodash/isEqual';
 import { FileInfo, DialogInfo, LgFile, LuFile, getNewDesigner } from '@bfc/shared';
 import { dialogIndexer, luIndexer, lgIndexer } from '@bfc/indexers';
 
@@ -267,16 +266,6 @@ export class BotProject {
     if (luFile === undefined) {
       throw new Error(`no such lu file ${id}`);
     }
-    let currentLufileParsedContentLUISJsonStructure = null;
-    try {
-      currentLufileParsedContentLUISJsonStructure = await luIndexer.parse(content);
-    } catch (error) {
-      throw new Error(`Update ${id}.lu Failed, ${error.text}`);
-    }
-
-    const preLufileParsedContentLUISJsonStructure = luFile.parsedContent.LUISJsonStructure;
-    const isUpdate = !isEqual(currentLufileParsedContentLUISJsonStructure, preLufileParsedContentLUISJsonStructure);
-    if (!isUpdate) return this.luFiles;
 
     await this._updateFile(luFile.relativePath, content);
     await this.luPublisher.onFileChange(luFile.relativePath, FileUpdateType.UPDATE);