feat: Links the generated dialog to its schema

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

@@ -130,7 +130,7 @@ export const ProjectTree: React.FC<Props> = ({
   onDeleteTrigger,
   onSelect,
 }) => {
-  const { onboardingAddCoachMarkRef, selectTo, navTo } = useRecoilValue(dispatcherState);
+  const { onboardingAddCoachMarkRef, selectTo, navTo, navigateToFormDialogSchema } = useRecoilValue(dispatcherState);
 
   const [filter, setFilter] = useState('');
   const [selectedLink, setSelectedLink] = useState<TreeLink | undefined>();
@@ -167,6 +167,13 @@ export const ProjectTree: React.FC<Props> = ({
     return process.env.COMPOSER_ENABLE_FORMS && dialog.content?.schema !== undefined;
   };
 
+  const formDialogSchemaExists = (projectId: string, dialog: DialogInfo) => {
+    return (
+      dialogIsFormDialog(dialog) &&
+      !!botProjectSpace?.find((s) => s.projectId === projectId)?.formDialogSchemas.find((fd) => fd.id === dialog.id)
+    );
+  };
+
   const botHasWarnings = (bot: BotInProject) => {
     return bot.dialogs.some(dialogHasWarnings);
   };
@@ -238,10 +245,14 @@ export const ProjectTree: React.FC<Props> = ({
       displayName: dialog.displayName,
       isRoot: dialog.isRoot,
       projectId: currentProjectId,
-      skillId: null,
+      skillId,
       errorContent,
       warningContent,
     };
+
+    const isFormDialog = dialogIsFormDialog(dialog);
+    const showEditSchema = formDialogSchemaExists(skillId, dialog);
+
     return (
       <span
         key={dialog.id}
@@ -256,7 +267,7 @@ export const ProjectTree: React.FC<Props> = ({
         <TreeItem
           showProps
           forceIndent={showTriggers ? 0 : SUMMARY_ARROW_SPACE}
-          icon={dialogIsFormDialog(dialog) ? icons.FORM_DIALOG : icons.DIALOG}
+          icon={isFormDialog ? icons.FORM_DIALOG : icons.DIALOG}
           isSubItemActive={isEqual(link, selectedLink)}
           link={link}
           menu={[
@@ -267,6 +278,16 @@ export const ProjectTree: React.FC<Props> = ({
                 onDeleteDialog(link.dialogName ?? '');
               },
             },
+            ...(showEditSchema
+              ? [
+                  {
+                    label: formatMessage('Edit schema'),
+                    icon: 'Edit',
+                    onClick: (link) =>
+                      navigateToFormDialogSchema({ projectId: link.skillId, schemaId: link.dialogName }),
+                  },
+                ]
+              : []),
           ]}
           onSelect={handleOnSelect}
         />

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

@@ -91,12 +91,17 @@ export const formDialogsDispatcher = () => {
     navigate(`/bot/${projectId}/dialogs/${schemaId}`);
   };
 
+  const navigateToFormDialogSchema = ({ projectId, schemaId }) => {
+    navigate(`/bot/${projectId}/forms/${schemaId}`);
+  };
+
   return {
     createFormDialogSchema,
     updateFormDialogSchema,
     loadFormDialogSchemaTemplates,
     removeFormDialogSchema,
     generateFormDialog,
     navigateToGeneratedDialog,
+    navigateToFormDialogSchema,
   };
 };

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

@@ -1,22 +1,23 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { selector, selectorFamily } from 'recoil';
-import isEmpty from 'lodash/isEmpty';
 import { FormDialogSchema, JsonSchemaFile } from '@bfc/shared';
+import isEmpty from 'lodash/isEmpty';
+import { selector, selectorFamily } from 'recoil';
 
 import {
-  botErrorState,
   botDisplayNameState,
+  botErrorState,
+  botNameIdentifierState,
   botProjectFileState,
   botProjectIdsState,
-  projectMetaDataState,
-  botNameIdentifierState,
   formDialogSchemaIdsState,
   formDialogSchemaState,
   jsonSchemaFilesState,
+  projectMetaDataState,
 } from '../atoms';
 import { dialogsSelectorFamily } from '../selectors';
+
 // Actions
 export const botsForFilePersistenceSelector = selector({
   key: 'botsForFilePersistenceSelector',
@@ -30,18 +31,36 @@ export const botsForFilePersistenceSelector = selector({
   },
 });
 
-// TODO: This selector would be modfied and leveraged by the project tree
+export const formDialogSchemasSelectorFamily = selectorFamily<FormDialogSchema[], string>({
+  key: 'formDialogSchemasSelector',
+  get: (projectId: string) => ({ get }) => {
+    const formDialogSchemaIds = get(formDialogSchemaIdsState(projectId));
+    return formDialogSchemaIds.map((schemaId) => get(formDialogSchemaState({ projectId, schemaId })));
+  },
+});
+
+// Given a form dialog schema, indicates if the dialog exist for it (aka is generated)
+export const formDialogSchemaDialogExistsSelector = selectorFamily<boolean, { projectId: string; schemaId: string }>({
+  key: 'formDialogSchemasSelector',
+  get: ({ projectId, schemaId }) => ({ get }) => {
+    const dialogs = get(dialogsSelectorFamily(projectId));
+    return !!dialogs.find((d) => d.id === schemaId);
+  },
+});
+
+// TODO: This selector would be modified and leveraged by the project tree
 export const botProjectSpaceSelector = selector({
   key: 'botProjectSpaceSelector',
   get: ({ get }) => {
     const botProjects = get(botProjectIdsState);
     const result = botProjects.map((projectId: string) => {
       const dialogs = get(dialogsSelectorFamily(projectId));
+      const formDialogSchemas = get(formDialogSchemasSelectorFamily(projectId));
       const metaData = get(projectMetaDataState(projectId));
       const botError = get(botErrorState(projectId));
       const name = get(botDisplayNameState(projectId));
       const botNameId = get(botNameIdentifierState(projectId));
-      return { dialogs, projectId, name, ...metaData, error: botError, botNameId };
+      return { dialogs, formDialogSchemas, projectId, name, ...metaData, error: botError, botNameId };
     });
     return result;
   },
@@ -61,22 +80,6 @@ export const rootBotProjectIdSelector = selector({
   },
 });
 
-export const formDialogSchemasSelectorFamily = selectorFamily<FormDialogSchema[], string>({
-  key: 'formDialogSchemasSelector',
-  get: (projectId: string) => ({ get }) => {
-    const formDialogSchemaIds = get(formDialogSchemaIdsState(projectId));
-    return formDialogSchemaIds.map((schemaId) => get(formDialogSchemaState({ projectId, schemaId })));
-  },
-});
-
-export const formDialogSchemaDialogExistsSelector = selectorFamily<boolean, { projectId: string; schemaId: string }>({
-  key: 'formDialogSchemasSelector',
-  get: ({ projectId, schemaId }: { projectId: string; schemaId: string }) => ({ get }) => {
-    const dialogs = get(dialogsSelectorFamily(projectId));
-    return !!dialogs.find((d) => d.id === schemaId);
-  },
-});
-
 export const jsonSchemaFilesByProjectIdSelector = selector({
   key: 'jsonSchemaFilesByProjectIdSelector',
   get: ({ get }) => {