fix: Optimization of dialog validation

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

@@ -9,7 +9,7 @@ import { useRecoilValue } from 'recoil';
 import onboardingStorage from '../utils/onboardingStorage';
 import { OpenConfirmModal } from '../components/Modal/ConfirmDialog';
 import { useLocation } from '../utils/hooks';
-import { dispatcherState, onboardingState, botProjectIdsState, validateDialogSelectorFamily } from '../recoilModel';
+import { dispatcherState, onboardingState, botProjectIdsState, validateDialogsSelectorFamily } 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(validateDialogSelectorFamily(rootBotProjectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(rootBotProjectId));
   const { onboardingSetComplete } = useRecoilValue(dispatcherState);
   const onboarding = useRecoilValue(onboardingState);
   const complete = onboarding.complete;

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

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

Composer/packages/client/src/components/TestController/TestController.tsx

@@ -14,7 +14,7 @@ import { useRecognizerConfig } from '@bfc/extension-client';
 import {
   botEndpointsState,
   dispatcherState,
-  validateDialogSelectorFamily,
+  validateDialogsSelectorFamily,
   botStatusState,
   botDisplayNameState,
   luFilesState,
@@ -61,7 +61,7 @@ export const TestController: React.FC<{ projectId: string }> = (props) => {
   const botActionRef = useRef(null);
   const notifications = useNotifications(projectId);
 
-  const dialogs = useRecoilValue(validateDialogSelectorFamily(projectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
   const botStatus = useRecoilValue(botStatusState(projectId));
   const botName = useRecoilValue(botDisplayNameState(projectId));
   const luFiles = useRecoilValue(luFilesState(projectId));

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

@@ -42,7 +42,7 @@ import {
   dispatcherState,
   schemasState,
   displaySkillManifestState,
-  validateDialogSelectorFamily,
+  validateDialogsSelectorFamily,
   breadcrumbState,
   focusPathState,
   showCreateDialogModalState,
@@ -115,7 +115,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
 
   const qnaFiles = useRecoilValue(qnaFilesState(projectId));
   const schemas = useRecoilValue(schemasState(projectId));
-  const dialogs = useRecoilValue(validateDialogSelectorFamily(projectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
   const displaySkillManifest = useRecoilValue(displaySkillManifestState(projectId));
   const breadcrumb = useRecoilValue(breadcrumbState(projectId));
   const focusPath = useRecoilValue(focusPathState(projectId));

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

@@ -14,7 +14,7 @@ import { useShellApi } from '@bfc/extension-client';
 import grayComposerIcon from '../../images/grayComposerIcon.svg';
 import {
   dispatcherState,
-  validateDialogSelectorFamily,
+  validateDialogsSelectorFamily,
   schemasState,
   designPageLocationState,
 } from '../../recoilModel';
@@ -65,7 +65,7 @@ const VisualEditor: React.FC<VisualEditorProps> = (props) => {
   const { openNewTriggerModal, onFocus, onBlur } = props;
   const [triggerButtonVisible, setTriggerButtonVisibility] = useState(false);
   const { onboardingAddCoachMarkRef } = useRecoilValue(dispatcherState);
-  const dialogs = useRecoilValue(validateDialogSelectorFamily(projectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(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, nameRegex } from '../../constants';
 import { StorageFolder } from '../../recoilModel/types';
 import { FieldConfig, useForm } from '../../hooks/useForm';
-import { actionsSeedState, schemasState, validateDialogSelectorFamily } from '../../recoilModel';
+import { actionsSeedState, schemasState, validateDialogsSelectorFamily } from '../../recoilModel';
 
 import { name, description, styles as wizardStyles } from './styles';
 
@@ -36,7 +36,7 @@ export const CreateDialogModal: React.FC<CreateDialogModalProps> = (props) => {
   const { onSubmit, onDismiss, isOpen, projectId } = props;
 
   const schemas = useRecoilValue(schemasState(projectId));
-  const dialogs = useRecoilValue(validateDialogSelectorFamily(projectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(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, validateDialogSelectorFamily } from '../../../../recoilModel';
+import { dispatcherState, validateDialogsSelectorFamily } 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(validateDialogSelectorFamily(projectId));
+  const items = useRecoilValue(validateDialogsSelectorFamily(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(validateDialogSelectorFamily(projectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
   const items = useMemo(() => dialogs.map(({ id, content, displayName }) => ({ id, content, displayName })), [
     projectId,
   ]);

Composer/packages/client/src/pages/knowledge-base/QnAPage.tsx

@@ -14,7 +14,7 @@ import { navigateTo } from '../../utils/navigation';
 import { TestController } from '../../components/TestController/TestController';
 import { INavTreeItem } from '../../components/NavTree';
 import { Page } from '../../components/Page';
-import { dialogsState, qnaFilesState } from '../../recoilModel/atoms/botState';
+import { dialogsState, qnaFilesState } from '../../recoilModel';
 import { dispatcherState } from '../../recoilModel';
 import { CreateQnAModal } from '../../components/QnA';
 

Composer/packages/client/src/pages/knowledge-base/table-view.tsx

@@ -32,7 +32,7 @@ import { NeutralColors } from '@uifabric/fluent-theme';
 
 import emptyQnAIcon from '../../images/emptyQnAIcon.svg';
 import { navigateTo } from '../../utils/navigation';
-import { dialogsState, qnaFilesState, localeState } from '../../recoilModel/atoms/botState';
+import { dialogsState, qnaFilesState, localeState } from '../../recoilModel';
 import { dispatcherState } from '../../recoilModel';
 import { getBaseName } from '../../utils/fileUtil';
 import { EditableField } from '../../components/EditableField';

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

@@ -14,7 +14,7 @@ import { navigateTo } from '../../utils/navigation';
 import { TestController } from '../../components/TestController/TestController';
 import { INavTreeItem } from '../../components/NavTree';
 import { Page } from '../../components/Page';
-import { validateDialogSelectorFamily } from '../../recoilModel';
+import { validateDialogsSelectorFamily } from '../../recoilModel';
 
 import TableView from './table-view';
 const CodeEditor = React.lazy(() => import('./code-editor'));
@@ -26,7 +26,7 @@ interface LGPageProps {
 
 const LGPage: React.FC<RouteComponentProps<LGPageProps>> = (props: RouteComponentProps<LGPageProps>) => {
   const { dialogId = '', projectId = '' } = props;
-  const dialogs = useRecoilValue(validateDialogSelectorFamily(projectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
 
   const path = props.location?.pathname ?? '';
 

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

@@ -27,7 +27,7 @@ import {
   lgFilesState,
   localeState,
   settingsState,
-  validateDialogSelectorFamily,
+  validateDialogsSelectorFamily,
 } from '../../recoilModel';
 import { languageListTemplates } from '../../components/MultiLanguage';
 
@@ -42,7 +42,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
   const lgFiles = useRecoilValue(lgFilesState(projectId));
   const locale = useRecoilValue(localeState(projectId));
   const settings = useRecoilValue(settingsState(projectId));
-  const dialogs = useRecoilValue(validateDialogSelectorFamily(projectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
   const { createLgTemplate, copyLgTemplate, removeLgTemplate, setMessage, updateLgTemplate } = useRecoilValue(
     dispatcherState
   );

Composer/packages/client/src/pages/language-understanding/LUPage.tsx

@@ -13,7 +13,7 @@ import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { TestController } from '../../components/TestController/TestController';
 import { INavTreeItem } from '../../components/NavTree';
 import { Page } from '../../components/Page';
-import { validateDialogSelectorFamily } from '../../recoilModel';
+import { validateDialogsSelectorFamily } from '../../recoilModel';
 
 import TableView from './table-view';
 const CodeEditor = React.lazy(() => import('./code-editor'));
@@ -23,7 +23,7 @@ const LUPage: React.FC<RouteComponentProps<{
   projectId: string;
 }>> = (props) => {
   const { dialogId = '', projectId = '' } = props;
-  const dialogs = useRecoilValue(validateDialogSelectorFamily(projectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
 
   const path = props.location?.pathname ?? '';
   const edit = /\/edit(\/)?$/.test(path);

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

@@ -29,7 +29,7 @@ import {
   luFilesState,
   localeState,
   settingsState,
-  validateDialogSelectorFamily,
+  validateDialogsSelectorFamily,
 } from '../../recoilModel';
 
 import { formCell, luPhraseCell, tableCell, editableFieldContainer } from './styles';
@@ -54,7 +54,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
   const luFiles = useRecoilValue(luFilesState(projectId));
   const locale = useRecoilValue(localeState(projectId));
   const settings = useRecoilValue(settingsState(projectId));
-  const dialogs = useRecoilValue(validateDialogSelectorFamily(projectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
 
   const { languages, defaultLanguage } = settings;
 

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

@@ -18,7 +18,7 @@ import {
   qnaFilesState,
   settingsState,
   skillManifestsState,
-  validateDialogSelectorFamily,
+  validateDialogsSelectorFamily,
 } from '../../recoilModel';
 
 import { getReferredLuFiles } from './../../utils/luUtil';
@@ -34,7 +34,7 @@ import {
 } from './types';
 
 export default function useNotifications(projectId: string, filter?: string) {
-  const dialogs = useRecoilValue(validateDialogSelectorFamily(projectId));
+  const dialogs = useRecoilValue(validateDialogsSelectorFamily(projectId));
   const luFiles = useRecoilValue(luFilesState(projectId));
   const lgFiles = useRecoilValue(lgFilesState(projectId));
   const diagnostics = useRecoilValue(botDiagnosticsState(projectId));

Composer/packages/client/src/recoilModel/DispatcherWrapper.tsx

@@ -10,11 +10,11 @@ import { BotAssets } from '@bfc/shared';
 import { useRecoilValue } from 'recoil';
 import isEmpty from 'lodash/isEmpty';
 
+import { dialogsState } from './selectors';
 import { UndoRoot } from './undo/history';
 import { prepareAxios } from './../utils/auth';
 import createDispatchers, { Dispatcher } from './dispatchers';
 import {
-  dialogsState,
   luFilesState,
   qnaFilesState,
   lgFilesState,

Composer/packages/client/src/recoilModel/atoms/botState.ts

@@ -28,9 +28,33 @@ const getFullyQualifiedKey = (value: string) => {
   return `Bot_${value}_State`;
 };
 
-export const dialogsState = atomFamily<DialogInfo[], string>({
-  key: getFullyQualifiedKey('dialogs'),
-  default: (id) => {
+const emptyDialog: DialogInfo = {
+  content: { $kind: '' },
+  diagnostics: [],
+  displayName: '',
+  id: '',
+  isRoot: false,
+  lgFile: '',
+  lgTemplates: [],
+  luFile: '',
+  qnaFile: '',
+  referredLuIntents: [],
+  referredDialogs: [],
+  triggers: [],
+  intentTriggers: [],
+  skills: [],
+};
+type dialogStateParams = { projectId: string; dialogId: string };
+export const dialogState = atomFamily<DialogInfo, dialogStateParams>({
+  key: getFullyQualifiedKey('dialog'),
+  default: () => {
+    return emptyDialog;
+  },
+});
+
+export const dialogIdsState = atomFamily<string[], string>({
+  key: getFullyQualifiedKey('dialogIds'),
+  default: () => {
     return [];
   },
 });

Composer/packages/client/src/recoilModel/dispatchers/__tests__/dialog.test.tsx

@@ -8,7 +8,6 @@ import { act } from '@botframework-composer/test-utils/lib/hooks';
 import { dialogsDispatcher } from '../dialogs';
 import { renderRecoilHook } from '../../../../__tests__/testUtils';
 import {
-  dialogsState,
   lgFilesState,
   luFilesState,
   schemasState,
@@ -18,6 +17,7 @@ import {
   showCreateDialogModalState,
   qnaFilesState,
 } from '../../atoms';
+import { dialogsState } from '../../selectors';
 import { dispatcherState } from '../../../recoilModel/DispatcherWrapper';
 import { Dispatcher } from '..';
 

Composer/packages/client/src/recoilModel/dispatchers/__tests__/multilang.test.tsx

@@ -9,13 +9,13 @@ import {
   luFilesState,
   lgFilesState,
   settingsState,
-  dialogsState,
   localeState,
   actionsSeedState,
   onAddLanguageDialogCompleteState,
   onDelLanguageDialogCompleteState,
   currentProjectIdState,
 } from '../../atoms';
+import { dialogsState } from '../../selectors';
 import { dispatcherState } from '../../../recoilModel/DispatcherWrapper';
 import { Dispatcher } from '..';
 import { multilangDispatcher } from '../multilang';

Composer/packages/client/src/recoilModel/dispatchers/__tests__/navigation.test.tsx

@@ -7,7 +7,8 @@ import { SDKKinds } from '@bfc/shared';
 
 import { navigationDispatcher } from '../navigation';
 import { renderRecoilHook } from '../../../../__tests__/testUtils';
-import { focusPathState, breadcrumbState, designPageLocationState, dialogsState } from '../../atoms/botState';
+import { focusPathState, breadcrumbState, designPageLocationState } from '../../atoms/botState';
+import { dialogsState } from '../../selectors';
 import { dispatcherState } from '../../../recoilModel/DispatcherWrapper';
 import { Dispatcher } from '../../../recoilModel/dispatchers';
 import {

Composer/packages/client/src/recoilModel/dispatchers/__tests__/project.test.tsx

@@ -26,7 +26,6 @@ import {
   luFilesState,
   lgFilesState,
   settingsState,
-  dialogsState,
   botEnvironmentState,
   botDiagnosticsState,
   localeState,
@@ -42,6 +41,7 @@ import {
   botErrorState,
   botProjectSpaceLoadedState,
 } from '../../atoms';
+import { dialogsState } from '../../selectors';
 import { dispatcherState } from '../../../recoilModel/DispatcherWrapper';
 import { Dispatcher } from '../../dispatchers';
 import { BotStatus } from '../../../constants';

Composer/packages/client/src/recoilModel/dispatchers/builder.ts

@@ -11,7 +11,8 @@ import { Text, BotStatus } from '../../constants';
 import httpClient from '../../utils/httpUtil';
 import luFileStatusStorage from '../../utils/luFileStatusStorage';
 import qnaFileStatusStorage from '../../utils/qnaFileStatusStorage';
-import { luFilesState, qnaFilesState, dialogsState, botStatusState, botLoadErrorState } from '../atoms';
+import { luFilesState, qnaFilesState, botStatusState, botLoadErrorState } from '../atoms';
+import { dialogsState } from '../selectors';
 import { settingsState } from '../atoms/botState';
 
 const checkEmptyQuestionOrAnswerInQnAFile = (sections) => {