fix: Optimization of dialog validation

Composer/packages/client/__tests__/components/design.test.tsx

@@ -9,7 +9,7 @@ import { SAMPLE_DIALOG } from '../mocks/sampleDialog';
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { TriggerCreationModal } from '../../src/components/ProjectTree/TriggerCreationModal';
 import { CreateDialogModal } from '../../src/pages/design/createDialogModal';
-import { dialogsState, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
+import { dialogsSelectorFamily, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
 
 jest.mock('@bfc/code-editor', () => {
   return {
@@ -22,7 +22,7 @@ const dialogs = [SAMPLE_DIALOG];
 const initRecoilState = ({ set }) => {
   set(currentProjectIdState, projectId);
   set(botProjectIdsState, [projectId]);
-  set(dialogsState(projectId), dialogs);
+  set(dialogsSelectorFamily(projectId), dialogs);
   set(schemasState(projectId), { sdk: { content: {} } });
 };
 

Composer/packages/client/__tests__/components/projecttree.test.tsx

@@ -7,15 +7,15 @@ import { fireEvent } from '@botframework-composer/test-utils';
 import { ProjectTree } from '../../src/components/ProjectTree/ProjectTree';
 import { renderWithRecoil } from '../testUtils';
 import { SAMPLE_DIALOG } from '../mocks/sampleDialog';
-import { dialogsState, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
+import { dialogsSelectorFamily, currentProjectIdState, botProjectIdsState, schemasState } from '../../src/recoilModel';
 
 const projectId = '12345.6789';
 const dialogs = [SAMPLE_DIALOG];
 
 const initRecoilState = ({ set }) => {
   set(currentProjectIdState, projectId);
   set(botProjectIdsState, [projectId]);
-  set(dialogsState(projectId), dialogs);
+  set(dialogsSelectorFamily(projectId), dialogs);
   set(schemasState(projectId), { sdk: { content: {} } });
 };
 

Composer/packages/client/__tests__/pages/knowledge-base/QnAPage.test.tsx

@@ -9,7 +9,7 @@ import CodeEditor from '../../../src/pages/knowledge-base/code-editor';
 import { renderWithRecoil } from '../../testUtils';
 import {
   localeState,
-  dialogsState,
+  dialogsSelectorFamily,
   qnaFilesState,
   settingsState,
   schemasState,
@@ -57,7 +57,7 @@ const updateQnAFileMock = jest.fn();
 const initRecoilState = ({ set }) => {
   set(currentProjectIdState, state.projectId);
   set(localeState(state.projectId), state.locale);
-  set(dialogsState(state.projectId), state.dialogs);
+  set(dialogsSelectorFamily(state.projectId), state.dialogs);
   set(qnaFilesState(state.projectId), state.qnaFiles);
   set(settingsState(state.projectId), state.settings);
   set(schemasState(state.projectId), mockProjectResponse.schemas);

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

@@ -12,7 +12,7 @@ import {
   lgFilesState,
   settingsState,
   schemasState,
-  dialogsState,
+  dialogsSelectorFamily,
   currentProjectIdState,
 } from '../../../src/recoilModel';
 import mockProjectResponse from '../../../src/recoilModel/dispatchers/__tests__/mocks/mockProjectResponse.json';
@@ -50,7 +50,7 @@ const state = {
 const initRecoilState = ({ set }) => {
   set(currentProjectIdState, state.projectId);
   set(localeState(state.projectId), state.locale);
-  set(dialogsState(state.projectId), state.dialogs);
+  set(dialogsSelectorFamily(state.projectId), state.dialogs);
   set(lgFilesState(state.projectId), state.lgFiles);
   set(settingsState(state.projectId), state.settings);
   set(schemasState(state.projectId), mockProjectResponse.schemas);

Composer/packages/client/__tests__/pages/language-understanding/LUPage.test.tsx

@@ -9,7 +9,7 @@ import CodeEditor from '../../../src/pages/language-understanding/code-editor';
 import { renderWithRecoil } from '../../testUtils';
 import {
   localeState,
-  dialogsState,
+  dialogsSelectorFamily,
   luFilesState,
   settingsState,
   schemasState,
@@ -49,7 +49,7 @@ const state = {
 const initRecoilState = ({ set }) => {
   set(currentProjectIdState, state.projectId);
   set(localeState(state.projectId), state.locale);
-  set(dialogsState(state.projectId), state.dialogs);
+  set(dialogsSelectorFamily(state.projectId), state.dialogs);
   set(luFilesState(state.projectId), state.luFiles);
   set(settingsState(state.projectId), state.settings);
   set(schemasState(state.projectId), mockProjectResponse.schemas);

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

@@ -8,7 +8,7 @@ import { Range, Position } from '@bfc/shared';
 
 import useNotifications from '../../../src/pages/notifications/useNotifications';
 import {
-  dialogsState,
+  dialogsSelectorFamily,
   luFilesState,
   lgFilesState,
   settingsState,
@@ -109,7 +109,7 @@ const state = {
 const initRecoilState = ({ set }) => {
   set(currentProjectIdState, state.projectId);
   set(botProjectIdsState, [state.projectId]);
-  set(dialogsState(state.projectId), state.dialogs);
+  set(dialogsSelectorFamily(state.projectId), state.dialogs);
   set(luFilesState(state.projectId), state.luFiles);
   set(lgFilesState(state.projectId), state.lgFiles);
   set(jsonSchemaFilesState(state.projectId), state.jsonSchemaFiles);

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

@@ -10,7 +10,7 @@ import {
   localeState,
   luFilesState,
   lgFilesState,
-  dialogsState,
+  dialogsSelectorFamily,
   schemasState,
   dispatcherState,
   currentProjectIdState,
@@ -57,7 +57,7 @@ describe('use triggerApi hooks', () => {
       set(localeState(state.projectId), 'en-us');
       set(luFilesState(state.projectId), state.luFiles);
       set(lgFilesState(state.projectId), state.lgFiles);
-      set(dialogsState(state.projectId), state.dialogs);
+      set(dialogsSelectorFamily(state.projectId), state.dialogs);
       set(schemasState(state.projectId), state.schemas);
       set(dispatcherState, (current: Dispatcher) => ({
         ...current,

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/components/TestController/publishDialog.tsx

@@ -22,7 +22,7 @@ import { Text, Tips, Links, nameRegex } from '../../constants';
 import { FieldConfig, useForm } from '../../hooks/useForm';
 import { getReferredQnaFiles } from '../../utils/qnaUtil';
 import { getReferredLuFiles } from '../../utils/luUtil';
-import { dialogsState, luFilesState, qnaFilesState } from '../../recoilModel';
+import { dialogsSelectorFamily, luFilesState, qnaFilesState } from '../../recoilModel';
 
 // -------------------- Styles -------------------- //
 const textFieldLabel = css`
@@ -105,7 +105,7 @@ interface IPublishDialogProps {
 
 export const PublishDialog: React.FC<IPublishDialogProps> = (props) => {
   const { isOpen, onDismiss, onPublish, botName, config, projectId } = props;
-  const dialogs = useRecoilValue(dialogsState(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/hooks/useResolver.ts

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

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

@@ -42,7 +42,7 @@ import {
   dispatcherState,
   schemasState,
   displaySkillManifestState,
-  validateDialogSelectorFamily,
+  validateDialogsSelectorFamily,
   breadcrumbState,
   focusPathState,
   showCreateDialogModalState,
@@ -116,7 +116,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

@@ -15,7 +15,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import grayComposerIcon from '../../images/grayComposerIcon.svg';
 import {
   dispatcherState,
-  validateDialogSelectorFamily,
+  validateDialogsSelectorFamily,
   schemasState,
   designPageLocationState,
 } from '../../recoilModel';
@@ -66,7 +66,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 } 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/design/exportSkillModal/content/SelectTriggers.tsx

@@ -12,7 +12,7 @@ import formatMessage from 'format-message';
 import { ContentProps } from '../constants';
 import { getFriendlyName } from '../../../../utils/dialogUtil';
 import { isSupportedTrigger } from '../generateSkillManifest';
-import { dialogsState, schemasState } from '../../../../recoilModel';
+import { dialogsSelectorFamily, schemasState } from '../../../../recoilModel';
 
 import { SelectItems } from './SelectItems';
 
@@ -22,7 +22,7 @@ const getLabel = (kind: SDKKinds, uiSchema) => {
 };
 
 export const SelectTriggers: React.FC<ContentProps> = ({ setSelectedTriggers, projectId }) => {
-  const dialogs = useRecoilValue(dialogsState(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const schemas = useRecoilValue(schemasState(projectId));
 
   const items = useMemo(() => {

Composer/packages/client/src/pages/design/exportSkillModal/index.tsx

@@ -16,7 +16,7 @@ import {
   dispatcherState,
   skillManifestsState,
   qnaFilesState,
-  dialogsState,
+  dialogsSelectorFamily,
   dialogSchemasState,
   luFilesState,
 } from '../../../recoilModel';
@@ -33,7 +33,7 @@ interface ExportSkillModalProps {
 }
 
 const ExportSkillModal: React.FC<ExportSkillModalProps> = ({ onSubmit, onDismiss: handleDismiss, projectId }) => {
-  const dialogs = useRecoilValue(dialogsState(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const dialogSchemas = useRecoilValue(dialogSchemasState(projectId));
   const luFiles = useRecoilValue(luFilesState(projectId));
   const qnaFiles = useRecoilValue(qnaFilesState(projectId));

Composer/packages/client/src/pages/form-dialog/CreateFormDialogSchemaModal.tsx

@@ -12,7 +12,7 @@ import { useRecoilValue } from 'recoil';
 
 import { nameRegex } from '../../constants';
 import { FieldConfig, useForm } from '../../hooks/useForm';
-import { dialogsState } from '../../recoilModel';
+import { dialogsSelectorFamily } from '../../recoilModel';
 
 type FormDialogSchemaFormData = {
   name: string;
@@ -28,7 +28,7 @@ type Props = {
 const CreateFormDialogSchemaModal: React.FC<Props> = (props) => {
   const { isOpen, projectId, onSubmit, onDismiss } = props;
 
-  const dialogs = useRecoilValue(dialogsState(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
 
   const formConfig: FieldConfig<FormDialogSchemaFormData> = {
     name: {

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 { dialogsSelectorFamily, qnaFilesState } from '../../recoilModel';
 import { dispatcherState } from '../../recoilModel';
 import { CreateQnAModal } from '../../components/QnA';
 
@@ -31,7 +31,7 @@ const QnAPage: React.FC<QnAPageProps> = (props) => {
   const { dialogId = '', projectId = '' } = props;
 
   const actions = useRecoilValue(dispatcherState);
-  const dialogs = useRecoilValue(dialogsState(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const qnaFiles = useRecoilValue(qnaFilesState(projectId));
   //To do: support other languages
   const locale = 'en-us';

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 { dialogsSelectorFamily, qnaFilesState, localeState } from '../../recoilModel';
 import { dispatcherState } from '../../recoilModel';
 import { getBaseName } from '../../utils/fileUtil';
 import { EditableField } from '../../components/EditableField';
@@ -81,7 +81,7 @@ interface TableViewProps extends RouteComponentProps<{}> {
 const TableView: React.FC<TableViewProps> = (props) => {
   const { dialogId = '', projectId = '' } = props;
   const actions = useRecoilValue(dispatcherState);
-  const dialogs = useRecoilValue(dialogsState(projectId));
+  const dialogs = useRecoilValue(dialogsSelectorFamily(projectId));
   const qnaFiles = useRecoilValue(qnaFilesState(projectId));
   const locale = useRecoilValue(localeState(projectId));
   const {

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 ?? '';