fix: add a new help URL to the Expression editor

Composer/packages/extensions/adaptive-form/src/components/ErrorMessage.tsx

@@ -3,25 +3,30 @@
 
 import React from 'react';
 import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 import formatMessage from 'format-message';
 
 interface ErrorMessageProps {
   label?: string | false;
   error?: string;
+  helpURL?: string;
 }
 
 const ErrorMessage: React.FC<ErrorMessageProps> = props => {
-  const { error, label } = props;
+  const { error, label, helpURL } = props;
 
   return (
     <MessageBar
-      truncated
       dismissButtonAriaLabel={formatMessage('Close')}
-      isMultiline={false}
+      isMultiline={true}
       messageBarType={MessageBarType.error}
-      overflowButtonAriaLabel={formatMessage('See more')}
     >
       {[label, error].filter(Boolean).join(' ')}
+      {helpURL && (
+        <Link key="a" href={helpURL} target="_blank" rel="noopener noreferrer">
+          {formatMessage('Refer to the syntax documentation here.')}
+        </Link>
+      )}
     </MessageBar>
   );
 };

Composer/packages/extensions/adaptive-form/src/components/FormRow.tsx

@@ -59,6 +59,9 @@ const FormRow: React.FC<FormRowProps> = props => {
 
   const { required = [] } = schema;
 
+  const HELP_URL =
+    'https://github.com/microsoft/BotBuilder-Samples/tree/master/experimental/common-expression-language';
+
   if (Array.isArray(row)) {
     return (
       <div css={formRow.row}>
@@ -108,6 +111,7 @@ const FormRow: React.FC<FormRowProps> = props => {
         onBlur={onBlur}
         onChange={onChange(row)}
         onFocus={onFocus}
+        helpURL={HELP_URL}
       />
     );
   }

Composer/packages/extensions/adaptive-form/src/components/SchemaField.tsx

@@ -31,6 +31,7 @@ const SchemaField: React.FC<FieldProps> = props => {
     rawErrors,
     hideError,
     onChange,
+    helpURL,
     ...rest
   } = props;
   const pluginConfig = usePluginConfig();
@@ -50,7 +51,9 @@ const SchemaField: React.FC<FieldProps> = props => {
     }
   }, []);
 
-  const error = typeof rawErrors === 'string' && <ErrorMessage error={rawErrors} label={getUiLabel(props)} />;
+  const error = typeof rawErrors === 'string' && (
+    <ErrorMessage error={rawErrors} label={getUiLabel(props)} helpURL={helpURL} />
+  );
 
   if (!schema || name.startsWith('$')) {
     return null;

Composer/packages/extensions/extension/src/types/form.ts

@@ -40,6 +40,7 @@ export interface FieldProps<T = any> {
   disabled?: boolean;
   enumOptions?: string[];
   error?: string | JSX.Element;
+  helpURL?: string;
   hideError?: boolean;
   id: string;
   label?: string | false;

Composer/packages/lib/code-editor/src/BaseEditor.tsx

@@ -225,7 +225,6 @@ const BaseEditor: React.FC<BaseEditorProps> = props => {
           messageBarType={hasError ? MessageBarType.error : hasWarning ? MessageBarType.warning : MessageBarType.info}
           isMultiline={true}
           dismissButtonAriaLabel={formatMessage('Close')}
-          overflowButtonAriaLabel={formatMessage('See more')}
         >
           {messageHelp}
           {syntaxLink}