fix: misc creation fixes (#4809)

* - Adding banner to creation flow for new template
- Adding documentationLink to feature flag type
- Altering feature flag text

* Replacing spaces with css

* fixing office imports

* fixing import

* Adding null check

* add missing field

* change order of librraries

* Updating version to latest stable conversationalcore template

* - Hardcoding documentation link
- adding comment for banner removal

* making conversationalCore template feature flag visible

Co-authored-by: Patrick Volum <pavolum@microsoft.com>
Co-authored-by: Soroush <hatpick@gmail.com>
Co-authored-by: Ben Brown <benbro@microsoft.com>
Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>

Composer/packages/client/src/components/CreationFlow/CreateOptions.tsx

@@ -25,9 +25,13 @@ import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
 import { NeutralColors } from '@uifabric/fluent-theme';
 import { RouteComponentProps } from '@reach/router';
 import { useRecoilValue } from 'recoil';
+import { MessageBar } from 'office-ui-fabric-react/lib/components/MessageBar';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
 
 import { DialogCreationCopy, EmptyBotTemplateId, QnABotTemplateId } from '../../constants';
 import { creationFlowTypeState } from '../../recoilModel';
+import { featureFlagsState } from '../../recoilModel';
 
 // -------------------- Styles -------------------- //
 
@@ -56,6 +60,10 @@ const listHeader = css`
   margin-bottom: 0;
 `;
 
+export const bannerClass = mergeStyles({
+  marginTop: '5px',
+});
+
 const rowDetails = (disabled) => {
   return {
     root: {
@@ -120,6 +128,7 @@ export function CreateOptions(props: CreateOptionsProps) {
   const [emptyBotKey, setEmptyBotKey] = useState('');
   const creationFlowType = useRecoilValue(creationFlowTypeState);
 
+  const featureFlags = useRecoilValue(featureFlagsState);
   const selection = useMemo(() => {
     return new Selection({
       onSelectionChanged: () => {
@@ -259,12 +268,20 @@ export function CreateOptions(props: CreateOptionsProps) {
   const choiceGroupTitle = creationFlowType === 'Skill' ? '' : formatMessage('Choose how to create your bot');
   const dialogWrapperProps =
     creationFlowType === 'Skill' ? DialogCreationCopy.CREATE_NEW_SKILLBOT : DialogCreationCopy.CREATE_NEW_BOT;
-
+  // TODO: remove banner UI when REMOTE_TEMPLATE_CREATION_EXPERIENCE is removed
   return (
     <Fragment>
       <DialogWrapper isOpen {...dialogWrapperProps} dialogType={DialogTypes.CreateFlow} onDismiss={onDismiss}>
         <ChoiceGroup label={choiceGroupTitle} options={choiceOptions} selectedKey={option} onChange={handleChange} />
         <h3 css={listHeader}>{formatMessage('Examples')}</h3>
+        {featureFlags?.REMOTE_TEMPLATE_CREATION_EXPERIENCE?.enabled && (
+          <MessageBar className={bannerClass}>
+            {formatMessage('Conversational Core preview template is available since you have that feature turned on.')}
+            <Link href="https://aka.ms/AAabzf9" target="_blank">
+              {formatMessage('Learn More.')}
+            </Link>
+          </MessageBar>
+        )}
         <div css={detailListContainer} data-is-scrollable="true">
           <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
             <DetailsList

Composer/packages/client/src/pages/setting/app-settings/FeatureFlagCheckBox.tsx

@@ -5,6 +5,8 @@
 import { jsx } from '@emotion/core';
 import React from 'react';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import formatMessage from 'format-message';
 import { FeatureFlagKey } from '@botframework-composer/types';
 
 import * as styles from './styles';
@@ -14,13 +16,19 @@ type FeatureFlagCheckBoxProps = {
   featureFlagName: string;
   description: string;
   enabled: boolean;
+  documentationLink?: string;
   toggleFeatureFlag: (FeatureFlagKey: FeatureFlagKey, enabled: boolean) => void;
 };
 
-const renderLabel = (featureName: string, description: string) => () => (
+const renderLabel = (featureName: string, description: string, documentationLink?: string) => () => (
   <span>
     <span css={styles.featureFlagTitle}>{`${featureName}.`}</span>
-    {` ${description}`}
+    {`${description}.`}
+    {documentationLink && (
+      <Link ref={documentationLink} target="_blank">
+        <span css={styles.featureFlagDescription}>{formatMessage('Learn More.')}</span>
+      </Link>
+    )}
   </span>
 );
 
@@ -34,7 +42,7 @@ export const FeatureFlagCheckBox: React.FC<FeatureFlagCheckBoxProps> = (props) =
           props.toggleFeatureFlag(props.featureFlagKey, checked);
         }
       }}
-      onRenderLabel={renderLabel(props.featureFlagName, props.description)}
+      onRenderLabel={renderLabel(props.featureFlagName, props.description, props.documentationLink)}
     />
   );
 };

Composer/packages/client/src/pages/setting/app-settings/PreviewFeatureToggle.tsx

@@ -29,6 +29,7 @@ export const PreviewFeatureToggle: React.FC = () => {
           <FeatureFlagCheckBox
             key={key}
             description={featureFlag.description}
+            documentationLink={featureFlag.documentationLink}
             enabled={featureFlag.enabled}
             featureFlagKey={key as FeatureFlagKey}
             featureFlagName={featureFlag.displayName}

Composer/packages/client/src/pages/setting/app-settings/styles.ts

@@ -87,6 +87,11 @@ export const featureFlagContainer = css`
 
 export const featureFlagTitle = css`
   font-weight: ${FontWeights.semibold};
+  margin-right: 5px;
+`;
+
+export const featureFlagDescription = css`
+  margin-left: 5px;
 `;
 
 export const noFeatureFlagText = css`

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

@@ -12,11 +12,10 @@ export const getDefaultFeatureFlags = (): FeatureFlagMap => ({
     enabled: false,
   },
   REMOTE_TEMPLATE_CREATION_EXPERIENCE: {
-    displayName: formatMessage('Remote templates'),
-    description: formatMessage(
-      'If turned on then externally stored templates will be selectable in the new bot flow template list'
-    ),
-    isHidden: true,
+    displayName: formatMessage('Conversational Core Template'),
+    description: formatMessage('Enable the new conversational core template built on the component model'),
+    documentationLink: 'https://aka.ms/AAabzf9',
+    isHidden: false,
     enabled: false,
   },
   ORCHESTRATOR: {

Composer/packages/server/src/locales/en-US.json

@@ -647,6 +647,9 @@
   "conversation_invoked_e960884e": {
     "message": "Conversation invoked"
   },
+  "conversational_core_preview_template_is_available__ba9b43b8": {
+    "message": "Conversational Core preview template is available since you have that feature turned on."
+  },
   "conversationupdate_activity_9e94bff5": {
     "message": "ConversationUpdate activity"
   },
@@ -1508,6 +1511,9 @@
   "last_modified_time_is_time_b1497d3": {
     "message": "Last modified time is { time }"
   },
+  "learn_more_14816ec": {
+    "message": "Learn More."
+  },
   "learn_more_a79a7918": {
     "message": "Learn more"
   },
@@ -1535,6 +1541,9 @@
   "learn_more_c08939e8": {
     "message": "Learn more."
   },
+  "learn_more_ffb8910": {
+    "message": " Learn More."
+  },
   "learn_the_basics_2d9ae7df": {
     "message": "Learn the basics"
   },

Composer/packages/types/src/featureFlags.ts

@@ -6,6 +6,8 @@ export type FeatureFlag = {
   displayName: string;
   // Description to be displayed for this features toggle UI in app settings page
   description: string;
+
+  documentationLink?: string;
   // Indicates whether or not the feature flag toggle will be visible to the user through the settings page UI
   // Hidden feature flags are intended for features not ready for public preview
   isHidden: boolean;

extensions/samples/src/index.ts

@@ -77,7 +77,7 @@ function getRemoteSamples(): BotTemplate[] {
     package: {
       packageName: 'Preview.Bot.Component.ConversationalCore',
       packageSource: 'nuget',
-      packageVersion: '0.0.1-preview3'
+      packageVersion: '0.0.1-preview5'
     }
   }]
 }