feat: Adds UI pivotFieldsets to UI Options

Composer/packages/adaptive-form/src/AdaptiveFormContext.ts

@@ -0,0 +1,16 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { createContext, useContext } from 'react';
+import { JSONSchema7 } from '@bfc/extension-client';
+
+interface IAdaptiveFormContext {
+  focusedTab?: string;
+  baseSchema: JSONSchema7;
+  onFocusedTab?: (_: string) => void;
+}
+
+export const AdaptiveFormContext = createContext<IAdaptiveFormContext>({ baseSchema: {} });
+export const useAdaptiveFormContext = () => useContext(AdaptiveFormContext);
+
+export default AdaptiveFormContext;

Composer/packages/adaptive-form/src/components/AdaptiveForm.tsx

@@ -8,6 +8,8 @@ import { FormErrors, JSONSchema7, UIOptions } from '@bfc/extension-client';
 import ErrorBoundary from 'react-error-boundary';
 import formatMessage from 'format-message';
 
+import AdaptiveFormContext from '../AdaptiveFormContext';
+
 import { SchemaField } from './SchemaField';
 import FormTitle from './FormTitle';
 import ErrorInfo from './ErrorInfo';
@@ -25,11 +27,13 @@ export interface AdaptiveFormProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   formData?: any;
   uiOptions: UIOptions;
+  focusedTab?: string;
+  onFocusedTab?: (tab: string) => void;
   onChange: (value: any) => void;
 }
 
 export const AdaptiveForm: React.FC<AdaptiveFormProps> = function AdaptiveForm(props) {
-  const { errors, formData, schema, uiOptions, onChange } = props;
+  const { errors, focusedTab, formData, schema, uiOptions, onChange, onFocusedTab } = props;
 
   if (!formData || !schema) {
     return (
@@ -45,24 +49,26 @@ export const AdaptiveForm: React.FC<AdaptiveFormProps> = function AdaptiveForm(p
 
   return (
     <ErrorBoundary FallbackComponent={ErrorInfo}>
-      <FormTitle
-        formData={formData}
-        id={formData.$designer?.id || 'unknown'}
-        schema={schema}
-        uiOptions={uiOptions}
-        onChange={(newData) => onChange({ ...formData, ...newData })}
-      />
-      <SchemaField
-        definitions={schema?.definitions}
-        depth={-1}
-        id="root"
-        name="root"
-        rawErrors={errors}
-        schema={schema}
-        uiOptions={uiOptions}
-        value={formData}
-        onChange={onChange}
-      />
+      <AdaptiveFormContext.Provider value={{ focusedTab, onFocusedTab, baseSchema: schema }}>
+        <FormTitle
+          formData={formData}
+          id={formData.$designer?.id || 'unknown'}
+          schema={schema}
+          uiOptions={uiOptions}
+          onChange={(newData) => onChange({ ...formData, ...newData })}
+        />
+        <SchemaField
+          definitions={schema?.definitions}
+          depth={-1}
+          id="root"
+          name="root"
+          rawErrors={errors}
+          schema={schema}
+          uiOptions={uiOptions}
+          value={formData}
+          onChange={onChange}
+        />
+      </AdaptiveFormContext.Provider>
     </ErrorBoundary>
   );
 };

Composer/packages/adaptive-form/src/components/fields/FieldSets.tsx

@@ -17,7 +17,11 @@ const Fieldsets: React.FC<FieldProps<object>> = (props) => {
   return (
     <React.Fragment>
       {fieldsets.map(({ schema, uiOptions, title, defaultExpanded }, key) => (
-        <CollapseField key={key} defaultExpanded={defaultExpanded} title={title}>
+        <CollapseField
+          key={key}
+          defaultExpanded={defaultExpanded}
+          title={typeof title === 'function' ? title(value) : title}
+        >
           <ObjectField {...props} schema={schema} uiOptions={uiOptions} />
         </CollapseField>
       ))}

Composer/packages/adaptive-form/src/components/fields/PivotFieldsets.tsx

@@ -0,0 +1,52 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { FieldProps } from '@bfc/extension-client';
+import { IPivotStyles, Pivot, PivotItem, PivotLinkSize } from 'office-ui-fabric-react/lib/components/Pivot';
+
+import { getFieldsets } from '../../utils';
+import { useAdaptiveFormContext } from '../../AdaptiveFormContext';
+
+import { ObjectField } from './ObjectField';
+
+const styles: { tabs: Partial<IPivotStyles> } = {
+  tabs: {
+    root: {
+      display: 'flex',
+      padding: '0 18px',
+    },
+    link: {
+      flex: 1,
+    },
+    linkIsSelected: {
+      flex: 1,
+    },
+  },
+};
+
+const PivotFieldsets: React.FC<FieldProps<object>> = (props) => {
+  const { schema, uiOptions: baseUiOptions, value } = props;
+  const { focusedTab, onFocusedTab: handleFocusTab } = useAdaptiveFormContext();
+  const fieldsets = getFieldsets(schema, baseUiOptions, value);
+
+  const handleTabChange = (item?: PivotItem) => {
+    if (item?.props.itemKey && handleFocusTab) {
+      handleFocusTab(item.props.itemKey);
+    }
+  };
+
+  return (
+    <div>
+      <Pivot linkSize={PivotLinkSize.large} selectedKey={focusedTab} styles={styles.tabs} onLinkClick={handleTabChange}>
+        {fieldsets.map(({ schema, uiOptions, title, itemKey }) => (
+          <PivotItem key={itemKey} headerText={typeof title === 'function' ? title(value) : title} itemKey={itemKey}>
+            <ObjectField {...props} schema={schema} uiOptions={uiOptions} />
+          </PivotItem>
+        ))}
+      </Pivot>
+    </div>
+  );
+};
+
+export { PivotFieldsets };

Composer/packages/adaptive-form/src/components/fields/index.ts

@@ -13,6 +13,7 @@ export * from './ObjectArrayField';
 export * from './ObjectField';
 export * from './OneOfField';
 export * from './OpenObjectField';
+export * from './PivotFieldsets';
 export * from './RecognizerField';
 export * from './RegexIntentField';
 export * from './QnAActionsField';

Composer/packages/adaptive-form/src/index.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import { AdaptiveForm } from './components';
 
+export * from './AdaptiveFormContext';
 export * from './components';
 export * from './utils';
 

Composer/packages/adaptive-form/src/utils/resolveFieldWidget.ts

@@ -73,7 +73,7 @@ export function resolveFieldWidget(
         if (schema.additionalProperties) {
           return DefaultFields.OpenObjectField;
         } else if (uiOptions?.fieldsets) {
-          return DefaultFields.Fieldsets;
+          return uiOptions.pivotFieldsets ? DefaultFields.PivotFieldsets : DefaultFields.Fieldsets;
         } else {
           return DefaultFields.ObjectField;
         }

Composer/packages/client/src/pages/design/PropertyEditor.tsx

@@ -25,7 +25,8 @@ function resolveBaseSchema(schema: JSONSchema7, $kind: string): JSONSchema7 | un
 
 const PropertyEditor: React.FC = () => {
   const { shellApi, ...shellData } = useShellApi();
-  const { currentDialog, data: formData = {}, focusPath, focusedSteps, schemas } = shellData;
+  const { currentDialog, data: formData = {}, focusPath, focusedSteps, focusedTab, schemas } = shellData;
+  const { onFocusSteps } = shellApi;
 
   const [localData, setLocalData] = useState(formData as MicrosoftAdaptiveDialog);
 
@@ -108,14 +109,20 @@ const PropertyEditor: React.FC = () => {
     setLocalData(newData);
   };
 
+  const handleFocusTab = (focusedTab) => {
+    onFocusSteps(focusedSteps, focusedTab);
+  };
+
   return (
     <div aria-label={formatMessage('form editor')} css={formEditor} data-testid="PropertyEditor" role="region">
       <AdaptiveForm
         errors={errors}
+        focusedTab={focusedTab}
         formData={localData}
         schema={$schema}
         uiOptions={$uiOptions}
         onChange={handleDataChange}
+        onFocusedTab={handleFocusTab}
       />
     </div>
   );

Composer/packages/extension-client/src/types/formSchema.ts

@@ -10,9 +10,10 @@ type UIOptionValue<R = string, D = any> = R | UIOptionFunc<R, D>;
 type UIOptionFunc<R, D> = (data: D) => R;
 
 export interface Fieldset {
-  title: string;
+  title: UIOptionValue<string>;
   fields?: string[];
   defaultExpanded?: boolean;
+  itemKey?: string;
 }
 
 export interface UIOptions {
@@ -42,6 +43,8 @@ export interface UIOptions {
   label?: UIOptionValue<string | false | undefined>;
   /** Set order of fields. Use * for all other fields. */
   order?: UIOptionValue<(string | [string, string])[]>;
+  /** Renders fieldsets in a tabbed view when true */
+  pivotFieldsets?: true;
   /** Placeholder override. If undefined, schema.examples are used. */
   placeholder?: UIOptionValue<string, undefined>;
   /** Define ui options on fields that are children of this field. */

Composer/packages/ui-plugins/prompts/src/ExpectedResponsesField.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React from 'react';
+import { FieldLabel, useAdaptiveFormContext } from '@bfc/adaptive-form';
+import { FieldProps, useRecognizerConfig, useShellApi } from '@bfc/extension-client';
+import formatMessage from 'format-message';
+import { LuMetaData, LuType } from '@bfc/shared';
+
+const expectedResponsesPlaceholder = () =>
+  formatMessage(`> add some expected user responses:
+> - Please remind me to '{itemTitle=buy milk}'
+> - remind me to '{itemTitle}'
+> - add '{itemTitle}' to my todo list
+>
+> entity definitions:
+> @ ml itemTitle
+`);
+
+const ExpectedResponsesField: React.FC<FieldProps> = (props) => {
+  const { id, description } = props;
+  const { designerId } = useShellApi();
+  const { currentRecognizer } = useRecognizerConfig();
+  const { baseSchema: schema } = useAdaptiveFormContext();
+
+  const { const: $kind } = schema?.properties?.$kind as { const: string };
+
+  const intentName = new LuMetaData(new LuType($kind).toString(), designerId).toString();
+  const label = formatMessage('Expected responses (intent: #{intentName})', { intentName });
+
+  const Editor = currentRecognizer?.intentEditor;
+
+  return Editor ? (
+    <React.Fragment>
+      <FieldLabel description={description} id={id} label={label} />
+      <Editor
+        {...props}
+        placeholder={expectedResponsesPlaceholder()}
+        schema={schema}
+        value={intentName}
+        onChange={() => {}}
+      />
+    </React.Fragment>
+  ) : null;
+};
+
+export { ExpectedResponsesField };