chore: Pull form dialogs feature branch back to main

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

@@ -27,10 +27,10 @@ const EmptyView = styled(Stack)({
   opacity: 0.5,
 });
 
-type Props = RouteComponentProps<{ projectId: string; schemaId: string }>;
+type Props = RouteComponentProps<{ projectId: string; skillId: string; schemaId: string }>;
 
 const FormDialogPage: React.FC<Props> = React.memo((props: Props) => {
-  const { projectId = '', schemaId = '' } = props;
+  const { projectId = '', skillId = '', schemaId = '' } = props;
   const formDialogSchemaIds = useRecoilValue(formDialogSchemaIdsState(projectId));
   const formDialogLibraryTemplates = useRecoilValue(formDialogLibraryTemplatesState);
   const formDialogGenerationProgressing = useRecoilValue(formDialogGenerationProgressingState);
@@ -90,7 +90,7 @@ const FormDialogPage: React.FC<Props> = React.memo((props: Props) => {
   const viewDialog = React.useCallback(
     (schemaId: string) => {
       if (schemaId) {
-        navigateToGeneratedDialog({ projectId, schemaId });
+        navigateToGeneratedDialog({ projectId, skillId, schemaId });
       }
     },
     [navigateToGeneratedDialog, projectId]

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

@@ -3,6 +3,7 @@
 
 import { JsonEditor } from '@bfc/code-editor';
 import { FormDialogSchemaEditor } from '@bfc/form-dialogs';
+import { FileExtensions } from '@bfc/shared';
 import styled from '@emotion/styled';
 import { NeutralColors } from '@uifabric/fluent-theme';
 import formatMessage from 'format-message';
@@ -113,7 +114,7 @@ export const VisualFormDialogSchemaEditor = React.memo((props: Props) => {
             editorId={`${projectId}:${schema.id}`}
             isGenerating={generationInProgress}
             schema={schema}
-            schemaExtension=".form-dialog"
+            schemaExtension={FileExtensions.FormDialogSchema}
             templates={templates}
             onGenerateDialog={onGenerate}
             onSchemaUpdated={onSchemaUpdated}

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

@@ -110,8 +110,9 @@ export const formDialogsDispatcher = () => {
     }
   );
 
-  const navigateToGeneratedDialog = ({ projectId, schemaId }) => {
-    navigate(`/bot/${projectId}/dialogs/${schemaId}`);
+  const navigateToGeneratedDialog = ({ projectId, skillId, schemaId }) => {
+    skillId = skillId || projectId;
+    navigate(`/bot/${projectId}/skill/${skillId}/dialogs/${schemaId}`);
   };
 
   const navigateToFormDialogSchema = ({ projectId, schemaId }) => {

Composer/packages/client/src/recoilModel/persistence/FilePersistence.ts

@@ -247,7 +247,7 @@ class FilePersistence {
 
   private getFormDialogSchemaFileChanges(current: FormDialogSchema[], previous: FormDialogSchema[]) {
     const changeItems = this.getDifferenceItems(current, previous);
-    const changes = this.getFileChanges(FileExtensions.FormDialog, changeItems);
+    const changes = this.getFileChanges(FileExtensions.FormDialogSchema, changeItems);
     return changes;
   }
 

Composer/packages/client/src/recoilModel/persistence/types.ts

@@ -9,7 +9,7 @@ export enum ChangeType {
 
 export enum FileExtensions {
   Dialog = '.dialog',
-  FormDialog = '.form-dialog',
+  FormDialogSchema = '.form',
   DialogSchema = '.dialog.schema',
   Manifest = '.json',
   Lu = '.lu',

Composer/packages/client/src/utils/pageLinks.ts

@@ -77,7 +77,7 @@ export const topLinks = (
           {
             to: `/bot/${projectId}/forms`,
             iconName: 'Table',
-            labelName: formatMessage('Forms'),
+            labelName: formatMessage('Forms (preview)'),
             exact: false,
             disabled: !botLoaded,
           },

Composer/packages/form-dialogs/src/components/property/FormDialogSchemaDetails.tsx

@@ -37,6 +37,11 @@ export const FormDialogSchemaDetails = () => {
     const lifetime = new Lifetime();
 
     const clickOutsideLists = (e: MouseEvent) => {
+      const selection = window.getSelection();
+
+      // If click outside is the continuation of text select within the card, don't dismiss the card.
+      if (selection && selection.toString()) return;
+
       const { x, y } = e;
       const elms = Array.prototype.slice.call(
         containerRef.current.querySelectorAll(`.${jsPropertyListClassName}`) || []

Composer/packages/form-dialogs/src/demo/DemoApp.tsx

@@ -258,7 +258,7 @@ const InternalDemoApp = () => {
             allowUndo
             editorId={selectedItemId}
             schema={selectedItem}
-            schemaExtension=".form-dialog"
+            schemaExtension=".form"
             templates={templates}
             // eslint-disable-next-line no-console
             onGenerateDialog={() => {}}

Composer/packages/lib/indexers/src/index.ts

@@ -30,7 +30,7 @@ class Indexer {
       {
         [FileExtensions.lg]: [],
         [FileExtensions.Lu]: [],
-        [FileExtensions.FormDialog]: [],
+        [FileExtensions.FormDialogSchema]: [],
         [FileExtensions.QnA]: [],
         [FileExtensions.Dialog]: [],
         [FileExtensions.DialogSchema]: [],
@@ -95,7 +95,7 @@ class Indexer {
       skills: skillIndexer.index(skillContent, settings.skill),
       botProjectSpaceFiles: botProjectSpaceIndexer.index(result[FileExtensions.BotProjectSpace]),
       jsonSchemaFiles: jsonSchemaFileIndexer.index(result[FileExtensions.Json]),
-      formDialogSchemas: formDialogSchemaIndexer.index(result[FileExtensions.FormDialog]),
+      formDialogSchemas: formDialogSchemaIndexer.index(result[FileExtensions.FormDialogSchema]),
       recognizers: recognizerIndexer.index(recognizers),
       crossTrainConfig: crossTrainConfigIndexer.index(crossTrainConfigs),
     };

Composer/packages/lib/indexers/src/utils/fileExtensions.ts

@@ -3,7 +3,7 @@
 
 export enum FileExtensions {
   Dialog = '.dialog',
-  FormDialog = '.form-dialog',
+  FormDialogSchema = '.form',
   DialogSchema = '.schema',
   Lu = '.lu',
   QnA = '.qna',

Composer/packages/lib/shared/src/featureFlagUtils/index.ts

@@ -28,7 +28,7 @@ export const getDefaultFeatureFlags = (): FeatureFlagMap => ({
   FORM_DIALOG: {
     displayName: formatMessage('Show Form Dialog'),
     description: formatMessage('Show form dialog editor in the canvas'),
-    isHidden: true,
+    isHidden: false,
     enabled: false,
   },
   REMOTE_TEMPLATE_CREATION_EXPERIENCE: {