chore: update the navigation link for setting page

Composer/cypress/integration/LuisDeploy.spec.ts

@@ -12,9 +12,12 @@ context('Luis Deploy', () => {
   });
 
   it('can deploy luis success', () => {
-    cy.findByTestId('LeftNav-CommandBarButtonUser Input').click();
+    cy.visitPage('Bot Projects');
+    cy.findAllByTestId('rootLUISKey').type('12345678', { delay: 200 });
+    cy.findAllByTestId('rootLUISRegion').type('westus', { delay: 200 });
+    cy.visitPage('User Input');
     cy.url().should('contain', 'language-understanding/all');
-    cy.findByTestId('LeftNav-CommandBarButtonDesign').click();
+    cy.visitPage('Design');
     cy.route({
       method: 'POST',
       url: 'api/projects/*/build',

Composer/cypress/integration/NotificationPage.spec.ts

@@ -7,29 +7,35 @@ context('Notification Page', () => {
   });
 
   it('can show lg syntax error ', () => {
+    cy.visitPage('Design');
     cy.visitPage('Bot Responses');
 
+    cy.findByTestId('ProjectTree').within(() => {
+      cy.findAllByText('__TestToDoBotWithLuisSample').last().click();
+    });
+
     cy.findByTestId('showcode').click();
     cy.get('textarea').type('#', { delay: 200 });
 
     cy.findByTestId('LeftNav-CommandBarButtonDiagnostics').click();
 
     cy.findByTestId('diagnostics-table-view').within(() => {
-      cy.findAllByText('common.en-us.lg').should('exist').first().click();
+      cy.findAllByText('__TestToDoBotWithLuisSample.en-us.lg').should('exist').first().click();
     });
 
     cy.findAllByText('Bot Responses').should('exist');
   });
 
   it('can show lu syntax error ', () => {
+    cy.visitPage('Design');
     cy.visitPage('User Input');
 
     cy.findByTestId('ProjectTree').within(() => {
       cy.findAllByText('__TestToDoBotWithLuisSample').last().click();
     });
 
     cy.findByTestId('showcode').click();
-    cy.get('textarea').type('t', { delay: 200 });
+    cy.get('textarea').type('t*', { delay: 200 });
 
     cy.findByTestId('LeftNav-CommandBarButtonDiagnostics').click();
 

Composer/packages/client/src/components/BotRuntimeController/BotController.tsx

@@ -11,7 +11,12 @@ import formatMessage from 'format-message';
 import { css } from '@emotion/core';
 import { NeutralColors } from '@uifabric/fluent-theme';
 
-import { buildConfigurationSelector, dispatcherState, runningBotsSelector } from '../../recoilModel';
+import {
+  buildConfigurationSelector,
+  dispatcherState,
+  runningBotsSelector,
+  allDiagnosticsSelectorFamily,
+} from '../../recoilModel';
 import { BotStatus } from '../../constants';
 import { useClickOutside } from '../../utils/hooks';
 
@@ -51,6 +56,7 @@ const transparentBackground = 'rgba(255, 255, 255, 0.5)';
 const BotController: React.FC = () => {
   const runningBots = useRecoilValue(runningBotsSelector);
   const projectCollection = useRecoilValue(buildConfigurationSelector);
+  const errors = useRecoilValue(allDiagnosticsSelectorFamily('Error'));
   const [isControllerHidden, setControllerVisibility] = useState(true);
   const { onboardingAddCoachMarkRef } = useRecoilValue(dispatcherState);
   const onboardRef = useCallback((startBot) => onboardingAddCoachMarkRef({ startBot }), []);
@@ -64,12 +70,12 @@ const BotController: React.FC = () => {
   });
 
   useEffect(() => {
-    if (projectCollection.length === 0) {
+    if (projectCollection.length === 0 || errors.length) {
       setDisableOnStartBotsWidget(true);
       return;
     }
     setDisableOnStartBotsWidget(false);
-  }, [projectCollection]);
+  }, [projectCollection, errors]);
 
   const running = useMemo(() => !projectCollection.every(({ status }) => status === BotStatus.unConnected), [
     projectCollection,

Composer/packages/client/src/components/ProjectTree/treeItem.tsx

@@ -19,6 +19,8 @@ import { IContextualMenuStyles } from 'office-ui-fabric-react/lib/ContextualMenu
 import { ICalloutContentStyles } from 'office-ui-fabric-react/lib/Callout';
 import { DiagnosticSeverity, Diagnostic } from '@bfc/shared';
 
+import { createBotSettingUrl, navigateTo } from '../../utils/navigation';
+
 import { TreeLink, TreeMenuItem } from './ProjectTree';
 import { SUMMARY_ARROW_SPACE } from './constants';
 
@@ -230,7 +232,7 @@ const renderTreeMenuItem = (link: TreeLink) => (item: TreeMenuItem) => {
 };
 
 const onRenderItem = (textWidth: number) => (item: IOverflowSetItemProps) => {
-  const { diagnostics = [] } = item;
+  const { diagnostics = [], projectId, skillId } = item;
   const warnings: Diagnostic[] = diagnostics.filter((diag) => diag.severity === DiagnosticSeverity.Warning);
   const errors: Diagnostic[] = diagnostics.filter((diag) => diag.severity === DiagnosticSeverity.Error);
 
@@ -265,7 +267,7 @@ const onRenderItem = (textWidth: number) => (item: IOverflowSetItemProps) => {
         <span css={diagnosticLinkMessages} title={item.message}>
           {item.message}
         </span>
-        <Link>{linkText}</Link>
+        <Link onClick={() => navigateTo(createBotSettingUrl(projectId, skillId ?? projectId))}>{linkText}</Link>
       </div>
     );
   });

Composer/packages/client/src/pages/diagnostics/Diagnostics.tsx

@@ -47,7 +47,7 @@ const Diagnostics: React.FC<RouteComponentProps<{ projectId: string; skillId: st
   ];
 
   const handleItemClick = (item: IDiagnosticInfo) => {
-    navigateTo(item.getUrl(projectId));
+    navigateTo(item.getUrl());
   };
 
   const onRenderHeaderContent = () => {

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

@@ -6,7 +6,7 @@ import get from 'lodash/get';
 
 import { getBaseName } from '../../utils/fileUtil';
 import { replaceDialogDiagnosticLabel } from '../../utils/dialogUtil';
-import { convertPathToUrl } from '../../utils/navigation';
+import { convertPathToUrl, createBotSettingUrl } from '../../utils/navigation';
 export const DiagnosticSeverity = ['Error', 'Warning']; //'Information', 'Hint'
 
 export enum DiagnosticType {
@@ -20,6 +20,7 @@ export enum DiagnosticType {
 }
 
 export interface IDiagnosticInfo {
+  rootProjectId: string;
   projectId: string;
   id: string;
   severity: string;
@@ -29,10 +30,11 @@ export interface IDiagnosticInfo {
   diagnostic: any;
   dialogPath?: string; //the data path in dialog
   resourceId: string; // id without locale
-  getUrl: (projectId: string) => string;
+  getUrl: () => string;
 }
 
 export abstract class DiagnosticInfo implements IDiagnosticInfo {
+  rootProjectId: string;
   projectId: string;
   id: string;
   severity: string;
@@ -42,9 +44,10 @@ export abstract class DiagnosticInfo implements IDiagnosticInfo {
   diagnostic: Diagnostic;
   dialogPath?: string;
   resourceId: string;
-  getUrl = (projectId: string) => '';
+  getUrl = () => '';
 
-  constructor(projectId: string, id: string, location: string, diagnostic: Diagnostic) {
+  constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
+    this.rootProjectId = rootProjectId;
     this.projectId = projectId;
     this.id = id;
     this.resourceId = getBaseName(id);
@@ -54,67 +57,78 @@ export abstract class DiagnosticInfo implements IDiagnosticInfo {
   }
 }
 
-export class ServerDiagnostic extends DiagnosticInfo {
+export class BotDiagnostic extends DiagnosticInfo {
   type = DiagnosticType.GENERAL;
-  constructor(projectId: string, id: string, location: string, diagnostic: Diagnostic) {
-    super(projectId, id, location, diagnostic);
+  constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
+    super(rootProjectId, projectId, id, location, diagnostic);
     this.message = diagnostic.message;
   }
 
-  getUrl = () => '';
+  getUrl = () => {
+    let url = '';
+    switch (this.location) {
+      case 'appsettings.json': {
+        url = createBotSettingUrl(this.rootProjectId, this.projectId);
+        break;
+      }
+    }
+
+    return url;
+  };
 }
 
 export class DialogDiagnostic extends DiagnosticInfo {
   type = DiagnosticType.DIALOG;
-  constructor(projectId: string, id: string, location: string, diagnostic: Diagnostic) {
-    super(projectId, id, location, diagnostic);
+  constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
+    super(rootProjectId, projectId, id, location, diagnostic);
     this.message = `In ${replaceDialogDiagnosticLabel(diagnostic.path)} ${diagnostic.message}`;
     this.dialogPath = diagnostic.path;
   }
 
-  getUrl = (rootProjectId: string) => {
+  getUrl = () => {
     //path is like main.trigers[0].actions[0]
     //uri = id?selected=triggers[0]&focused=triggers[0].actions[0]
-    const { projectId, id, dialogPath = '' } = this;
+    const { rootProjectId, projectId, id, dialogPath = '' } = this;
     return convertPathToUrl(rootProjectId, rootProjectId === projectId ? null : projectId, id, dialogPath);
   };
 }
 
 export class SkillDiagnostic extends DiagnosticInfo {
   type = DiagnosticType.SKILL;
-  constructor(projectId: string, id: string, location: string, diagnostic: Diagnostic) {
-    super(projectId, id, location, diagnostic);
+  constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
+    super(rootProjectId, projectId, id, location, diagnostic);
     this.message = `${replaceDialogDiagnosticLabel(diagnostic.path)} ${diagnostic.message}`;
     this.dialogPath = diagnostic.path;
   }
-  getUrl = (rootProjectId: string) => {
-    return `/bot/${rootProjectId}/skills`;
+  getUrl = () => {
+    return `/bot/${this.rootProjectId}/skills`;
   };
 }
 
 export class SettingDiagnostic extends DiagnosticInfo {
   type = DiagnosticType.SETTING;
-  constructor(projectId: string, id: string, location: string, diagnostic: Diagnostic) {
-    super(projectId, id, location, diagnostic);
+  constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
+    super(rootProjectId, projectId, id, location, diagnostic);
     this.message = `${replaceDialogDiagnosticLabel(diagnostic.path)} ${diagnostic.message}`;
     this.dialogPath = diagnostic.path;
   }
-  getUrl = (rootProjectId: string) => {
-    return `/settings/bot/${rootProjectId}/dialog-settings`;
+  getUrl = () => {
+    return `/settings/bot/${this.rootProjectId}/dialog-settings`;
   };
 }
 
 export class LgDiagnostic extends DiagnosticInfo {
   type = DiagnosticType.LG;
   constructor(
+    rootProjectId: string,
     projectId: string,
     id: string,
     location: string,
     diagnostic: Diagnostic,
     lgFile: LgFile,
     dialogs: DialogInfo[]
   ) {
-    super(projectId, id, location, diagnostic);
+    super(rootProjectId, projectId, id, location, diagnostic);
     this.message = createSingleMessage(diagnostic);
     this.dialogPath = this.findDialogPath(lgFile, dialogs, diagnostic);
   }
@@ -134,8 +148,8 @@ export class LgDiagnostic extends DiagnosticInfo {
     }
   }
 
-  getUrl = (rootProjectId: string) => {
-    const { projectId, resourceId, diagnostic, dialogPath } = this;
+  getUrl = () => {
+    const { rootProjectId, projectId, resourceId, diagnostic, dialogPath } = this;
     let uri = `/bot/${rootProjectId}/language-generation/${resourceId}/edit#L=${diagnostic.range?.start.line || 0}`;
     //the format of item.id is lgFile#inlineTemplateId
     if (dialogPath) {
@@ -149,14 +163,15 @@ export class LgDiagnostic extends DiagnosticInfo {
 export class LuDiagnostic extends DiagnosticInfo {
   type = DiagnosticType.LU;
   constructor(
+    rootProjectId: string,
     projectId: string,
     id: string,
     location: string,
     diagnostic: Diagnostic,
     luFile: LuFile,
     dialogs: DialogInfo[]
   ) {
-    super(projectId, id, location, diagnostic);
+    super(rootProjectId, projectId, id, location, diagnostic);
     this.dialogPath = this.findDialogPath(luFile, dialogs, diagnostic);
     this.message = createSingleMessage(diagnostic);
   }
@@ -173,8 +188,8 @@ export class LuDiagnostic extends DiagnosticInfo {
       ?.referredLuIntents.find((lu) => lu.name === intentName)?.path;
   }
 
-  getUrl = (rootProjectId: string) => {
-    const { projectId, resourceId, diagnostic, dialogPath } = this;
+  getUrl = () => {
+    const { rootProjectId, projectId, resourceId, diagnostic, dialogPath } = this;
     let uri = `/bot/${projectId}/language-understanding/${resourceId}/edit#L=${diagnostic.range?.start.line || 0}`;
     if (dialogPath) {
       uri = convertPathToUrl(rootProjectId, rootProjectId === projectId ? null : projectId, resourceId, dialogPath);
@@ -185,14 +200,14 @@ export class LuDiagnostic extends DiagnosticInfo {
 
 export class QnADiagnostic extends DiagnosticInfo {
   type = DiagnosticType.QNA;
-  constructor(projectId: string, id: string, location: string, diagnostic: Diagnostic) {
-    super(projectId, id, location, diagnostic);
+  constructor(rootProjectId: string, projectId: string, id: string, location: string, diagnostic: Diagnostic) {
+    super(rootProjectId, projectId, id, location, diagnostic);
     this.dialogPath = '';
     this.message = createSingleMessage(diagnostic);
   }
 
-  getUrl = (rootProjectId: string) => {
-    const { resourceId, diagnostic } = this;
+  getUrl = () => {
+    const { rootProjectId, resourceId, diagnostic } = this;
     return `/bot/${rootProjectId}/knowledge-base/${resourceId}/edit#L=${diagnostic.range?.start.line || 0}`;
   };
 }

Composer/packages/client/src/recoilModel/dispatchers/utils/project.ts

@@ -394,7 +394,7 @@ export const initBotState = async (callbackHelpers: CallbackInterface, data: any
   }
   set(schemasState(projectId), schemas);
   set(localeState(projectId), locale);
-  set(botDiagnosticsState(projectId), [...diagnostics, ...botFiles.diagnostics]);
+  set(botDiagnosticsState(projectId), diagnostics);
   refreshLocalStorage(projectId, settings);
   set(settingsState(projectId), mergedSettings);