chore: Avoid re-render from states value change

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

@@ -12,7 +12,7 @@ import { RouteComponentProps, Router } from '@reach/router';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { navigateTo } from '../../utils/navigation';
 import { Page } from '../../components/Page';
-import { dialogsSelectorFamily, qnaFilesState, dispatcherState, createQnAOnState } from '../../recoilModel';
+import { dialogIdsState, qnaFilesState, dispatcherState, createQnAOnState } from '../../recoilModel';
 import { CreateQnAModal } from '../../components/QnA';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 
@@ -24,14 +24,15 @@ const QnAPage: React.FC<RouteComponentProps<{
   dialogId: string;
   projectId: string;
   skillId: string;
+  qnaFileId: string;
 }>> = (props) => {
-  const { dialogId = '', projectId = '', skillId } = props;
+  const { dialogId = '', projectId = '', skillId, qnaFileId = '' } = props;
 
   const actualProjectId = skillId ?? projectId;
   const baseURL = skillId == null ? `/bot/${projectId}/` : `/bot/${projectId}/skill/${skillId}/`;
 
   const actions = useRecoilValue(dispatcherState);
-  const dialogs = useRecoilValue(dialogsSelectorFamily(actualProjectId));
+  const dialogs = useRecoilValue(dialogIdsState(actualProjectId));
   const qnaFiles = useRecoilValue(qnaFilesState(actualProjectId));
   //To do: support other languages
   const locale = 'en-us';
@@ -44,7 +45,7 @@ const QnAPage: React.FC<RouteComponentProps<{
   const isRoot = dialogId === 'all';
 
   useEffect(() => {
-    const activeDialog = dialogs.find(({ id }) => id === dialogId);
+    const activeDialog = dialogs.find((id) => id === dialogId);
     if (!activeDialog && dialogs.length && dialogId !== 'all') {
       navigateTo(`${baseURL}knowledge-base/${dialogId}`);
     }
@@ -87,8 +88,8 @@ const QnAPage: React.FC<RouteComponentProps<{
     >
       <Suspense fallback={<LoadingSpinner />}>
         <Router component={Fragment} primary={false}>
-          <CodeEditor dialogId={dialogId} path="/edit" projectId={projectId} skillId={skillId} />
-          <TableView path="/" projectId={projectId} />
+          <CodeEditor dialogId={dialogId} path="/edit" projectId={projectId} qnaFileId={qnaFileId} skillId={skillId} />
+          <TableView dialogId={dialogId} path="/" projectId={projectId} qnaFileId={qnaFileId} skillId={skillId} />
         </Router>
         <CreateQnAModal
           dialogId={creatQnAOnInfo.dialogId}

Composer/packages/client/src/pages/knowledge-base/code-editor.tsx

@@ -19,11 +19,15 @@ import { getBaseName } from '../../utils/fileUtil';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 
 import { backIcon } from './styles';
+interface CodeEditorProps extends RouteComponentProps<{}> {
+  dialogId: string;
+  projectId: string;
+  skillId?: string;
+  qnaFileId?: string;
+}
 
 const lspServerPath = '/lu-language-server';
-const CodeEditor: React.FC<RouteComponentProps<{ dialogId: string; projectId: string; skillId?: string }>> = (
-  props
-) => {
+const CodeEditor: React.FC<CodeEditorProps> = (props) => {
   const { projectId = '', dialogId = '', skillId } = props;
   const actualProjectId = skillId ?? projectId;
   const baseURL = skillId == null ? `/bot/${projectId}/` : `/bot/${projectId}/skill/${skillId}/`;

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

@@ -77,8 +77,15 @@ const createQnASectionItem = (fileId: string): QnASectionItem => {
   };
 };
 
-const TableView: React.FC<RouteComponentProps<{ dialogId: string; projectId: string; skillId?: string }>> = (props) => {
-  const { dialogId = '', projectId = '', skillId } = props;
+interface TableViewProps extends RouteComponentProps<{ dialogId: string; skillId: string; projectId: string }> {
+  projectId: string;
+  dialogId: string;
+  skillId?: string;
+  qnaFileId?: string;
+}
+
+const TableView: React.FC<TableViewProps> = (props) => {
+  const { dialogId, projectId, skillId, qnaFileId } = props;
 
   const actualProjectId = skillId ?? projectId;
   const baseURL = skillId == null ? `/bot/${projectId}/` : `/bot/${projectId}/skill/${skillId}/`;
@@ -98,7 +105,10 @@ const TableView: React.FC<RouteComponentProps<{ dialogId: string; projectId: str
   } = useRecoilValue(dispatcherState);
 
   const targetFileId = dialogId.endsWith('.source') ? dialogId : `${dialogId}.${locale}`;
-  const qnaFile = qnaFiles.find(({ id }) => id === targetFileId);
+  const qnaFile = qnaFileId
+    ? qnaFiles.find(({ id }) => id === qnaFileId)
+    : qnaFiles.find(({ id }) => id === targetFileId);
+
   const generateQnASections = (file: QnAFile): QnASectionItem[] => {
     if (!file) return [];
     const usedInDialog: any[] = [];

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

@@ -12,7 +12,7 @@ import { useRecoilValue } from 'recoil';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { navigateTo } from '../../utils/navigation';
 import { Page } from '../../components/Page';
-import { validateDialogsSelectorFamily } from '../../recoilModel';
+import { dialogIdsState } from '../../recoilModel';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 
 import TableView from './table-view';
@@ -25,16 +25,15 @@ const LGPage: React.FC<RouteComponentProps<{
   lgFileId: string;
 }>> = (props) => {
   const { dialogId = '', projectId = '', skillId, lgFileId = '' } = props;
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(skillId ?? projectId ?? ''));
-
+  const dialogs = useRecoilValue(dialogIdsState(skillId ?? projectId));
   const path = props.location?.pathname ?? '';
 
   const edit = /\/edit(\/)?$/.test(path);
 
   const baseURL = skillId == null ? `/bot/${projectId}/` : `/bot/${projectId}/skill/${skillId}/`;
 
   useEffect(() => {
-    const activeDialog = dialogs.find(({ id }) => id === dialogId);
+    const activeDialog = dialogs.find((id) => id === dialogId);
     if (!activeDialog && dialogs.length && dialogId !== 'common' && !lgFileId) {
       navigateTo(`${baseURL}language-generation/common`);
     }
@@ -78,7 +77,7 @@ const LGPage: React.FC<RouteComponentProps<{
       <Suspense fallback={<LoadingSpinner />}>
         <Router component={Fragment} primary={false}>
           <CodeEditor dialogId={dialogId} lgFileId={lgFileId} path="/edit/*" projectId={projectId} skillId={skillId} />
-          <TableView dialogId={dialogId} lgFileId={lgFileId} path="/" projectId={projectId} />
+          <TableView dialogId={dialogId} lgFileId={lgFileId} path="/" projectId={projectId} skillId={skillId} />
         </Router>
       </Suspense>
     </Page>

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

@@ -33,7 +33,7 @@ import { languageListTemplates } from '../../components/MultiLanguage';
 import TelemetryClient from '../../telemetry/TelemetryClient';
 
 interface TableViewProps extends RouteComponentProps<{ dialogId: string; skillId: string; projectId: string }> {
-  projectId?: string;
+  projectId: string;
   skillId?: string;
   dialogId?: string;
   lgFileId?: string;
@@ -42,7 +42,7 @@ interface TableViewProps extends RouteComponentProps<{ dialogId: string; skillId
 const TableView: React.FC<TableViewProps> = (props) => {
   const { dialogId, projectId, skillId, lgFileId } = props;
 
-  const actualProjectId = skillId ?? projectId ?? '';
+  const actualProjectId = skillId ?? projectId;
 
   const lgFiles = useRecoilValue(lgFilesState(actualProjectId));
   const locale = useRecoilValue(localeState(actualProjectId));
@@ -224,6 +224,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
                 value={displayName}
                 onBlur={(_id, value) => {
                   const newValue = value?.trim().replace(/^#/, '');
+                  if (newValue === item.name) return;
                   if (newValue) {
                     handleTemplateUpdate(item.name, { ...item, name: newValue });
                   }
@@ -254,6 +255,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
                 name={text}
                 value={text}
                 onBlur={(_id, value) => {
+                  if (value === item.body) return;
                   const newValue = value?.trim();
                   if (newValue) {
                     // prefix with - to body
@@ -289,6 +291,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
                 name={text}
                 value={text}
                 onBlur={(_id, value) => {
+                  if (value === item.body) return;
                   const newValue = value?.trim();
                   if (newValue) {
                     // prefix with - to body
@@ -323,6 +326,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
                 name={text}
                 value={text}
                 onBlur={(_id, value) => {
+                  if (value === item.body) return;
                   const newValue = value?.trim();
                   if (newValue) {
                     // prefix with - to body

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

@@ -11,7 +11,7 @@ import { useRecoilValue } from 'recoil';
 import { navigateTo, buildURL } from '../../utils/navigation';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { Page } from '../../components/Page';
-import { validateDialogsSelectorFamily } from '../../recoilModel';
+import { dialogIdsState } from '../../recoilModel';
 
 import TableView from './table-view';
 
@@ -20,18 +20,18 @@ const CodeEditor = React.lazy(() => import('./code-editor'));
 const LUPage: React.FC<RouteComponentProps<{
   dialogId: string;
   projectId: string;
-  skillId?: string;
-  luFileId?: string;
+  skillId: string;
+  luFileId: string;
 }>> = (props) => {
   const { dialogId = '', projectId = '', skillId, luFileId = '' } = props;
-  const dialogs = useRecoilValue(validateDialogsSelectorFamily(skillId ?? projectId ?? ''));
+  const dialogs = useRecoilValue(dialogIdsState(skillId ?? projectId));
 
   const path = props.location?.pathname ?? '';
   const edit = /\/edit(\/)?$/.test(path);
   const isRoot = dialogId === 'all';
 
   useEffect(() => {
-    const activeDialog = dialogs.find(({ id }) => id === dialogId);
+    const activeDialog = dialogs.find((id) => id === dialogId);
     if (!activeDialog && dialogId !== 'all' && dialogs.length && !luFileId) {
       navigateTo(buildURL('language-understanding', { projectId, skillId }));
     }
@@ -73,7 +73,7 @@ const LUPage: React.FC<RouteComponentProps<{
       <Suspense fallback={<LoadingSpinner />}>
         <Router component={Fragment} primary={false}>
           <CodeEditor dialogId={dialogId} luFileId={luFileId} path="/edit" projectId={projectId} skillId={skillId} />
-          <TableView path="/" />
+          <TableView dialogId={dialogId} luFileId={luFileId} path="/" projectId={projectId} skillId={skillId} />
         </Router>
       </Suspense>
     </Page>

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

@@ -34,7 +34,7 @@ import {
 
 import { formCell, luPhraseCell, tableCell, editableFieldContainer } from './styles';
 interface TableViewProps extends RouteComponentProps<{ dialogId: string; skillId: string; projectId: string }> {
-  projectId?: string;
+  projectId: string;
   skillId?: string;
   dialogId?: string;
   luFileId?: string;
@@ -52,7 +52,7 @@ interface Intent {
 const TableView: React.FC<TableViewProps> = (props) => {
   const { dialogId, projectId, skillId, luFileId } = props;
 
-  const actualProjectId = skillId ?? projectId ?? '';
+  const actualProjectId = skillId ?? projectId;
   const baseURL = skillId == null ? `/bot/${projectId}/` : `/bot/${projectId}/skill/${skillId}/`;
 
   const { updateLuIntent } = useRecoilValue(dispatcherState);
@@ -209,6 +209,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
                 value={displayName}
                 onBlur={(_id, value) => {
                   const newValue = value?.trim().replace(/^#/, '');
+                  if (newValue === item.name) return;
                   if (newValue) {
                     handleIntentUpdate(item.fileId, item.name, { Name: newValue, Body: item.phrases });
                   }
@@ -239,6 +240,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
                 name={text}
                 value={text}
                 onBlur={(_id, value) => {
+                  if (value === text) return;
                   const newValue = value?.trim();
                   if (newValue) {
                     const fixedBody = newValue.startsWith('-') ? newValue : `- ${newValue}`;
@@ -272,6 +274,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
                 name={text}
                 value={text}
                 onBlur={(_id, value) => {
+                  if (value === text) return;
                   const newValue = value?.trim().replace(/^#/, '');
                   if (newValue) {
                     const fixedBody = newValue.startsWith('-') ? newValue : `- ${newValue}`;
@@ -304,6 +307,7 @@ const TableView: React.FC<TableViewProps> = (props) => {
                 name={text}
                 value={text}
                 onBlur={(_id, value) => {
+                  if (value === text) return;
                   const newValue = value?.trim().replace(/^#/, '');
                   if (newValue) {
                     const fixedBody = newValue.startsWith('-') ? newValue : `- ${newValue}`;

Composer/packages/client/src/recoilModel/selectors/project.ts

@@ -73,6 +73,22 @@ export const localBotsDataSelector = selector({
   },
 });
 
+export const localBotsSettingDataSelector = selector({
+  key: 'localBotsSettingDataSelector',
+  get: ({ get }) => {
+    const botProjectIds = get(localBotsWithoutErrorsSelector);
+
+    const result = botProjectIds.map((projectId: string) => {
+      const setting = get(settingsState(projectId));
+      return {
+        projectId,
+        setting,
+      };
+    });
+    return result;
+  },
+});
+
 export const formDialogSchemasSelectorFamily = selectorFamily<FormDialogSchema[], string>({
   key: 'formDialogSchemasSelector',
   get: (projectId: string) => ({ get }) => {

Composer/packages/client/src/router.tsx

@@ -20,7 +20,7 @@ import {
   pluginPagesSelector,
   botOpeningMessage,
 } from './recoilModel';
-import { localBotsDataSelector, rootBotProjectIdSelector } from './recoilModel/selectors/project';
+import { localBotsSettingDataSelector, rootBotProjectIdSelector } from './recoilModel/selectors/project';
 import { openAlertModal } from './components/Modal/AlertDialog';
 import { dialogStyle } from './components/Modal/dialogStyle';
 import { LoadingSpinner } from './components/LoadingSpinner';
@@ -71,6 +71,8 @@ const Routes = (props) => {
             <LGPage path="language-generation/common/*" />
             <LGPage path="language-generation/:dialogId/item/:lgFileId/*" />
             <LGPage path="language-generation/:dialogId/*" />
+            <QnAPage path="knowledge-base/all/*" />
+            <QnAPage path="knowledge-base/:dialogId/item/:qnaFileId/*" />
             <QnAPage path="knowledge-base/:dialogId/*" />
             <BotProjectSettings path="botProjectsSettings" />
             <Diagnostics path="diagnostics" />
@@ -132,7 +134,7 @@ const ProjectRouter: React.FC<RouteComponentProps<{ projectId: string; skillId:
   const schemas = useRecoilValue(schemasState(projectId));
   const { fetchProjectById, setSettings, setLocale } = useRecoilValue(dispatcherState);
   const botProjects = useRecoilValue(botProjectIdsState);
-  const localBots = useRecoilValue(localBotsDataSelector);
+  const localBots = useRecoilValue(localBotsSettingDataSelector);
   const botProjectSpaceLoaded = useRecoilValue(botProjectSpaceLoadedState);
   const rootBotProjectId = useRecoilValue(rootBotProjectIdSelector);
   const botName = useRecoilValue(botDisplayNameState(rootBotProjectId || ''));