fix: validate dialog take a long time when updating lg in form

Composer/packages/client/__tests__/pages/language-generation/LGPage.test.tsx

@@ -9,7 +9,7 @@ import TableView from '../../../src/pages/language-generation/table-view';
 import CodeEditor from '../../../src/pages/language-generation/code-editor';
 import {
   localeState,
-  lgFilesState,
+  lgFilesSelectorFamily,
   settingsState,
   schemasState,
   dialogsSelectorFamily,
@@ -51,7 +51,7 @@ const initRecoilState = ({ set }) => {
   set(currentProjectIdState, state.projectId);
   set(localeState(state.projectId), state.locale);
   set(dialogsSelectorFamily(state.projectId), state.dialogs);
-  set(lgFilesState(state.projectId), state.lgFiles);
+  set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
   set(settingsState(state.projectId), state.settings);
   set(schemasState(state.projectId), mockProjectResponse.schemas);
 };

Composer/packages/client/__tests__/pages/notifications/diagnosticList.test.tsx

@@ -13,7 +13,7 @@ import {
   dialogIdsState,
   formDialogSchemaIdsState,
   jsonSchemaFilesState,
-  lgFilesState,
+  lgFilesSelectorFamily,
   luFilesState,
   schemasState,
   settingsState,
@@ -111,7 +111,7 @@ describe('<DiagnosticList/>', () => {
     set(botProjectIdsState, [state.projectId]);
     set(dialogIdsState(state.projectId), []);
     set(luFilesState(state.projectId), state.luFiles);
-    set(lgFilesState(state.projectId), state.lgFiles);
+    set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
     set(jsonSchemaFilesState(state.projectId), state.jsonSchemaFiles);
     set(botDiagnosticsState(state.projectId), state.diagnostics);
     set(settingsState(state.projectId), state.settings);

Composer/packages/client/__tests__/pages/notifications/diagnostics.test.tsx

@@ -13,7 +13,7 @@ import {
   dialogState,
   formDialogSchemaIdsState,
   jsonSchemaFilesState,
-  lgFilesState,
+  lgFilesSelectorFamily,
   luFilesState,
   qnaFilesState,
   schemasState,
@@ -142,7 +142,7 @@ describe('<Diagnostics/>', () => {
     set(dialogIdsState(state.projectId), ['test']);
     set(dialogState({ projectId: state.projectId, dialogId: 'test' }), state.dialogs[0]);
     set(luFilesState(state.projectId), state.luFiles);
-    set(lgFilesState(state.projectId), state.lgFiles);
+    set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
     set(qnaFilesState(state.projectId), state.qnaFiles);
     set(jsonSchemaFilesState(state.projectId), state.jsonSchemaFiles);
     set(botDiagnosticsState(state.projectId), state.diagnostics);

Composer/packages/client/__tests__/shell/lgApi.test.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { RecoilRoot } from 'recoil';
 
 import { useLgApi } from '../../src/shell/lgApi';
-import { lgFilesState, localeState, dispatcherState, currentProjectIdState } from '../../src/recoilModel';
+import { lgFilesSelectorFamily, localeState, dispatcherState, currentProjectIdState } from '../../src/recoilModel';
 import { Dispatcher } from '../../src/recoilModel/dispatchers';
 
 const state = {
@@ -42,7 +42,7 @@ describe('use lgApi hooks', () => {
     initRecoilState = ({ set }) => {
       set(currentProjectIdState, state.projectId);
       set(localeState(state.projectId), 'en-us');
-      set(lgFilesState(state.projectId), state.lgFiles);
+      set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
       set(dispatcherState, (current: Dispatcher) => ({
         ...current,
         updateLgTemplate: updateLgTemplateMock,

Composer/packages/client/__tests__/shell/triggerApi.test.tsx

@@ -9,7 +9,7 @@ import { useTriggerApi } from '../../src/shell/triggerApi';
 import {
   localeState,
   luFilesState,
-  lgFilesState,
+  lgFilesSelectorFamily,
   dialogsSelectorFamily,
   schemasState,
   dispatcherState,
@@ -53,7 +53,7 @@ describe('use triggerApi hooks', () => {
       set(currentProjectIdState, state.projectId);
       set(localeState(state.projectId), 'en-us');
       set(luFilesState(state.projectId), state.luFiles);
-      set(lgFilesState(state.projectId), state.lgFiles);
+      set(lgFilesSelectorFamily(state.projectId), state.lgFiles);
       set(dialogsSelectorFamily(state.projectId), state.dialogs);
       set(schemasState(state.projectId), state.schemas);
       set(dispatcherState, (current: Dispatcher) => ({

Composer/packages/client/src/Onboarding/Onboarding.tsx

@@ -9,7 +9,7 @@ import { OpenConfirmModal } from '@bfc/ui-shared';
 
 import onboardingStorage from '../utils/onboardingStorage';
 import { useLocation } from '../utils/hooks';
-import { dispatcherState, onboardingState, botProjectIdsState, validateDialogsSelectorFamily } from '../recoilModel';
+import { dispatcherState, onboardingState, botProjectIdsState, dialogsSelectorFamily } from '../recoilModel';
 
 import OnboardingContext from './OnboardingContext';
 import TeachingBubbles from './TeachingBubbles/TeachingBubbles';
@@ -22,7 +22,7 @@ const Onboarding: React.FC = () => {
   const didMount = useRef(false);
   const botProjects = useRecoilValue(botProjectIdsState);
   const rootBotProjectId = botProjects[0];
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(rootBotProjectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(rootBotProjectId));
   const { onboardingSetComplete } = useRecoilValue(dispatcherState);
   const onboarding = useRecoilValue(onboardingState);
   const complete = onboarding.complete;

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

@@ -22,7 +22,7 @@ import { Text, Tips, Links, nameRegex, LUIS_REGIONS } from '../../constants';
 import { FieldConfig, useForm } from '../../hooks/useForm';
 import { getReferredQnaFiles } from '../../utils/qnaUtil';
 import { getLuisBuildLuFiles } from '../../utils/luUtil';
-import { luFilesState, qnaFilesState, validateDialogsSelectorFamily } from '../../recoilModel';
+import { luFilesState, qnaFilesState, dialogsSelectorFamily } from '../../recoilModel';
 
 // -------------------- Styles -------------------- //
 const textFieldLabel = css`
@@ -90,7 +90,7 @@ interface IPublishDialogProps {
 
 export const PublishDialog: React.FC<IPublishDialogProps> = (props) => {
   const { isOpen, onDismiss, onPublish, botName, config, projectId } = props;
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const luFiles = useRecoilValue(luFilesState(projectId));
   const qnaFiles = useRecoilValue(qnaFilesState(projectId));
   const qnaConfigShow = getReferredQnaFiles(qnaFiles, dialogs).length > 0;

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

@@ -38,7 +38,7 @@ import {
 import { schemasState, userSettingsState } from '../../recoilModel/atoms';
 import { nameRegex } from '../../constants';
 import { isRegExRecognizerType, isLUISnQnARecognizerType } from '../../utils/dialogValidator';
-import { validateDialogsSelectorFamily } from '../../recoilModel';
+import { dialogsSelectorFamily } from '../../recoilModel';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 // -------------------- Styles -------------------- //
 
@@ -210,7 +210,7 @@ interface TriggerCreationModalProps {
 
 export const TriggerCreationModal: React.FC<TriggerCreationModalProps> = (props) => {
   const { isOpen, onDismiss, onSubmit, dialogId, projectId } = props;
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const schemas = useRecoilValue(schemasState(projectId));
   const userSettings = useRecoilValue(userSettingsState);
   const dialogFile = dialogs.find((dialog) => dialog.id === dialogId);

Composer/packages/client/src/hooks/useResolver.ts

@@ -4,12 +4,13 @@ import { useRef } from 'react';
 import { lgImportResolverGenerator } from '@bfc/shared';
 import { useRecoilValue } from 'recoil';
 
-import { dialogsSelectorFamily, luFilesState, lgFilesState, localeState, qnaFilesState } from '../recoilModel';
+import { dialogsSelectorFamily, luFilesState, localeState, qnaFilesState } from '../recoilModel';
+import { lgFilesSelectorFamily } from '../recoilModel/selectors/lg';
 
 export const useResolvers = (projectId: string) => {
   const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const luFiles = useRecoilValue(luFilesState(projectId));
-  const lgFiles = useRecoilValue(lgFilesState(projectId));
+  const lgFiles = useRecoilValue(lgFilesSelectorFamily(projectId));
   const locale = useRecoilValue(localeState(projectId));
   const qnaFiles = useRecoilValue(qnaFilesState(projectId));
 

Composer/packages/client/src/pages/botProject/RootBotExternalService.tsx

@@ -22,7 +22,7 @@ import {
   settingsState,
   luFilesState,
   qnaFilesState,
-  validateDialogsSelectorFamily,
+  dialogsSelectorFamily,
   botDisplayNameState,
 } from '../../recoilModel';
 import settingStorage from '../../utils/dialogSettingStorage';
@@ -171,7 +171,7 @@ export const RootBotExternalService: React.FC<RootBotExternalServiceProps> = (pr
   const groupQnAKey = get(sensitiveGroupManageProperty, 'qna.subscriptionKey', {});
   const rootqnaKey = groupQnAKey.root;
 
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const luFiles = useRecoilValue(luFilesState(projectId));
   const qnaFiles = useRecoilValue(qnaFilesState(projectId));
   const botName = useRecoilValue(botDisplayNameState(projectId));

Composer/packages/client/src/pages/botProject/SkillBotExternalService.tsx

@@ -17,7 +17,7 @@ import {
   settingsState,
   luFilesState,
   qnaFilesState,
-  validateDialogsSelectorFamily,
+  dialogsSelectorFamily,
   botDisplayNameState,
 } from '../../recoilModel';
 import settingStorage from '../../utils/dialogSettingStorage';
@@ -71,7 +71,7 @@ export const SkillBotExternalService: React.FC<SkillBotExternalServiceProps> = (
   const rootQnAKey = groupQnAKey.root;
   const skillQnAKey = groupQnAKey[projectId];
 
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const luFiles = useRecoilValue(luFilesState(projectId));
   const qnaFiles = useRecoilValue(qnaFilesState(projectId));
 

Composer/packages/client/src/pages/design/DesignPage.tsx

@@ -33,7 +33,7 @@ import {
   userSettingsState,
   dispatcherState,
   schemasState,
-  validateDialogsSelectorFamily,
+  dialogsSelectorFamily,
   focusPathState,
   showCreateDialogModalState,
   localeState,
@@ -133,7 +133,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
 
   const qnaFiles = useRecoilValue(qnaFilesState(skillId ?? projectId));
   const schemas = useRecoilValue(schemasState(skillId ?? projectId));
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(skillId ?? projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(skillId ?? projectId));
   const skills = useRecoilValue(skillsStateSelector);
   const displaySkillManifestNameIdentifier = useRecoilValue(displaySkillManifestState);
   const skillsByProjectId = useRecoilValue(skillNameIdentifierByProjectIdSelector);

Composer/packages/client/src/pages/design/PropertyEditor.tsx

@@ -14,7 +14,7 @@ import { MicrosoftAdaptiveDialog } from '@bfc/shared';
 import { useRecoilValue } from 'recoil';
 import { css } from '@emotion/core';
 
-import { botDisplayNameState, projectMetaDataState } from '../../recoilModel';
+import { botDisplayNameState, dialogDiagnosticsSelectorFamily, projectMetaDataState } from '../../recoilModel';
 
 import { PropertyEditorHeader } from './PropertyEditorHeader';
 import { formEditor } from './styles';
@@ -41,6 +41,7 @@ const PropertyEditor: React.FC = () => {
   const { onFocusSteps } = shellApi;
   const botName = useRecoilValue(botDisplayNameState(projectId));
   const projectData = useRecoilValue(projectMetaDataState(projectId));
+  const diagnostics = useRecoilValue(dialogDiagnosticsSelectorFamily({ projectId, dialogId: currentDialog.id }));
 
   const dialogData = useMemo(() => {
     if (currentDialog?.content) {
@@ -81,8 +82,7 @@ const PropertyEditor: React.FC = () => {
   }, [$schema, formUIOptions]);
 
   const errors = useMemo(() => {
-    const diagnostics = currentDialog?.diagnostics;
-    if (diagnostics) {
+    if (diagnostics.length) {
       const currentPath = focusPath.replace('#', '');
 
       return diagnostics.reduce((errors, d) => {

Composer/packages/client/src/pages/design/VisualEditor.tsx

@@ -13,12 +13,7 @@ import { useFormConfig, useShellApi } from '@bfc/extension-client';
 import cloneDeep from 'lodash/cloneDeep';
 
 import grayComposerIcon from '../../images/grayComposerIcon.svg';
-import {
-  dispatcherState,
-  validateDialogsSelectorFamily,
-  schemasState,
-  designPageLocationState,
-} from '../../recoilModel';
+import { dispatcherState, dialogsSelectorFamily, schemasState, designPageLocationState } from '../../recoilModel';
 
 import { middleTriggerContainer, middleTriggerElements, triggerButton, visualEditor } from './styles';
 
@@ -72,7 +67,7 @@ const VisualEditor: React.FC<VisualEditorProps> = (props) => {
   const { openNewTriggerModal, onFocus, onBlur, isRemoteSkill } = props;
   const [triggerButtonVisible, setTriggerButtonVisibility] = useState(false);
   const { onboardingAddCoachMarkRef } = useRecoilValue(dispatcherState);
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const schemas = useRecoilValue(schemasState(projectId));
   const designPageLocation = useRecoilValue(designPageLocationState(projectId));
   const { dialogId, selected } = designPageLocation;

Composer/packages/client/src/pages/design/createDialogModal.tsx

@@ -14,7 +14,7 @@ import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 import { DialogCreationCopy } from '../../constants';
 import { StorageFolder } from '../../recoilModel/types';
 import { FieldConfig, useForm } from '../../hooks/useForm';
-import { actionsSeedState, botDisplayNameState, schemasState, validateDialogsSelectorFamily } from '../../recoilModel';
+import { actionsSeedState, botDisplayNameState, schemasState, dialogsSelectorFamily } from '../../recoilModel';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 
 import { name, description, styles as wizardStyles } from './styles';
@@ -37,7 +37,7 @@ export const CreateDialogModal: React.FC<CreateDialogModalProps> = (props) => {
   const { onSubmit, onDismiss, isOpen, projectId } = props;
 
   const schemas = useRecoilValue(schemasState(projectId));
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const botName = useRecoilValue(botDisplayNameState(projectId));
   const actionsSeed = useRecoilValue(actionsSeedState(projectId));
   const { shellApi, ...shellData } = useShellApi();

Composer/packages/client/src/pages/design/exportSkillModal/content/SelectDialogs.tsx

@@ -11,7 +11,7 @@ import debounce from 'lodash/debounce';
 import formatMessage from 'format-message';
 
 import { ContentProps } from '../constants';
-import { dispatcherState, validateDialogsSelectorFamily } from '../../../../recoilModel';
+import { dispatcherState, dialogsSelectorFamily } from '../../../../recoilModel';
 
 import { SelectItems } from './SelectItems';
 
@@ -35,7 +35,7 @@ interface DescriptionColumnProps extends DialogInfo {
 
 const DescriptionColumn: React.FC<DescriptionColumnProps> = (props) => {
   const { id, displayName, projectId } = props;
-  const items = useRecoilValue(validateDialogsSelectorFamily(projectId));
+  const items = useRecoilValue(dialogsSelectorFamily(projectId));
   const { content } = items.find(({ id: dialogId }) => dialogId === id) || {};
 
   const [value, setValue] = useState(content?.$designer?.description);
@@ -94,7 +94,7 @@ const DescriptionColumn: React.FC<DescriptionColumnProps> = (props) => {
 };
 
 export const SelectDialogs: React.FC<ContentProps> = ({ setSelectedDialogs, projectId }) => {
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const items = useMemo(() => dialogs.map(({ id, content, displayName }) => ({ id, content, displayName })), [
     projectId,
   ]);

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

@@ -15,9 +15,10 @@ import { CodeEditorSettings } from '@bfc/shared';
 import { useRecoilValue } from 'recoil';
 import { LgFile } from '@bfc/extension-client';
 
-import { localeState, lgFilesState, settingsState } from '../../recoilModel/atoms/botState';
+import { localeState, settingsState } from '../../recoilModel/atoms/botState';
 import { userSettingsState, dispatcherState } from '../../recoilModel';
 import { DiffCodeEditor } from '../language-understanding/diff-editor';
+import { lgFilesSelectorFamily } from '../../recoilModel/selectors/lg';
 
 const lspServerPath = '/lg-language-server';
 
@@ -34,7 +35,7 @@ const CodeEditor: React.FC<CodeEditorProps> = (props) => {
 
   const userSettings = useRecoilValue(userSettingsState);
   const locale = useRecoilValue(localeState(actualProjectId));
-  const lgFiles = useRecoilValue(lgFilesState(actualProjectId));
+  const lgFiles = useRecoilValue(lgFilesSelectorFamily(actualProjectId));
   const settings = useRecoilValue(settingsState(actualProjectId));
 
   const { languages, defaultLanguage } = settings;

Composer/packages/client/src/pages/language-generation/table-view.tsx

@@ -22,15 +22,10 @@ import { lgUtil } from '@bfc/indexers';
 import { EditableField } from '../../components/EditableField';
 import { navigateTo } from '../../utils/navigation';
 import { actionButton, formCell, editableFieldContainer } from '../language-understanding/styles';
-import {
-  dispatcherState,
-  lgFilesState,
-  localeState,
-  settingsState,
-  validateDialogsSelectorFamily,
-} from '../../recoilModel';
+import { dispatcherState, localeState, settingsState, dialogsSelectorFamily } from '../../recoilModel';
 import { languageListTemplates } from '../../components/MultiLanguage';
 import TelemetryClient from '../../telemetry/TelemetryClient';
+import { lgFilesSelectorFamily } from '../../recoilModel/selectors/lg';
 
 interface TableViewProps extends RouteComponentProps<{ dialogId: string; skillId: string; projectId: string }> {
   projectId: string;
@@ -44,10 +39,10 @@ const TableView: React.FC<TableViewProps> = (props) => {
 
   const actualProjectId = skillId ?? projectId;
 
-  const lgFiles = useRecoilValue(lgFilesState(actualProjectId));
+  const lgFiles = useRecoilValue(lgFilesSelectorFamily(actualProjectId));
   const locale = useRecoilValue(localeState(actualProjectId));
   const settings = useRecoilValue(settingsState(actualProjectId));
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(actualProjectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(actualProjectId));
   const { createLgTemplate, copyLgTemplate, removeLgTemplate, setMessage, updateLgTemplate } = useRecoilValue(
     dispatcherState
   );

Composer/packages/client/src/pages/language-understanding/table-view.tsx

@@ -24,13 +24,7 @@ import { EditableField } from '../../components/EditableField';
 import { getExtension } from '../../utils/fileUtil';
 import { languageListTemplates } from '../../components/MultiLanguage';
 import { navigateTo } from '../../utils/navigation';
-import {
-  dispatcherState,
-  luFilesState,
-  localeState,
-  settingsState,
-  validateDialogsSelectorFamily,
-} from '../../recoilModel';
+import { dispatcherState, luFilesState, localeState, settingsState, dialogsSelectorFamily } from '../../recoilModel';
 
 import { formCell, luPhraseCell, tableCell, editableFieldContainer } from './styles';
 interface TableViewProps extends RouteComponentProps<{ dialogId: string; skillId: string; projectId: string }> {
@@ -60,7 +54,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
   const luFiles = useRecoilValue(luFilesState(actualProjectId));
   const locale = useRecoilValue(localeState(actualProjectId));
   const settings = useRecoilValue(settingsState(actualProjectId));
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(actualProjectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(actualProjectId));
 
   const { languages, defaultLanguage } = settings;