feat: bot projects skill & context menu by zhixzhan · Pull Request #4492 · microsoft/BotFramework-Composer

This repository was archived by the owner on Jul 9, 2025. It is now read-only.

Composer/cypress/integration/RemoveDialog.spec.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -14,9 +14,7 @@ context('RemoveDialog', () => { @@
           });
         });
-        cy.get('.ms-ContextualMenu-linkContent > .ms-ContextualMenu-itemText').within(() => {
-          cy.findByText('Remove this dialog').click();
-        });
+        cy.findByText('Remove this dialog').click();
         cy.findByText('Yes').click();
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ import React from 'react'; @@
     import { FormErrors, JSONSchema7, UIOptions } from '@bfc/extension-client';
     import ErrorBoundary from 'react-error-boundary';
     import formatMessage from 'format-message';
+    import { FontSizes } from '@uifabric/fluent-theme';
     import AdaptiveFormContext from '../AdaptiveFormContext';
@@ Expand All / @@ -15,12 +16,6 @@ import FormTitle from './FormTitle'; @@
     import ErrorInfo from './ErrorInfo';
     import { LoadingTimeout } from './LoadingTimeout';
-    const styles = {
-      errorLoading: css`
-        padding: 18px;
-      `,
-    };
     export interface AdaptiveFormProps {
       errors?: string | FormErrors | string[] | FormErrors[];
       schema?: JSONSchema7;
@@ Expand All / @@ -32,43 +27,56 @@ export interface AdaptiveFormProps { @@
       onChange: (value: any) => void;
     }
+    const schemaLoadErrorStyle = css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font-size: ${FontSizes.size14};
+    `;
     export const AdaptiveForm: React.FC<AdaptiveFormProps> = function AdaptiveForm(props) {
       const { errors, focusedTab, formData, schema, uiOptions, onChange, onFocusedTab } = props;
-      if (!formData || !schema) {
+      if (!formData && !schema) {
         return (
-          <LoadingTimeout timeout={2000}>
-            <div css={styles.errorLoading}>
-              {formatMessage('{type} could not be loaded', {
-                type: formData ? formatMessage('Schema') : formatMessage('Dialog data'),
-              })}
-            </div>
-          </LoadingTimeout>
+          <div css={schemaLoadErrorStyle}>
+            <LoadingTimeout timeout={2000}>
+              <p>
+                {formatMessage('{type} could not be loaded', {
+                  type: formData ? formatMessage('Schema') : formatMessage('Dialog data'),
+                })}
+              </p>
+            </LoadingTimeout>
+          </div>
         );
       }
-      return (
-        <ErrorBoundary FallbackComponent={ErrorInfo}>
-          <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={formData.$designer?.id ? `root[${formData.$designer?.id}]` : 'root'}
-              name="root"
-              rawErrors={errors}
-              schema={schema}
-              uiOptions={uiOptions}
-              value={formData}
-              onChange={onChange}
-            />
-          </AdaptiveFormContext.Provider>
-        </ErrorBoundary>
-      );
+      if (schema) {
+        return (
+          <ErrorBoundary FallbackComponent={ErrorInfo}>
+            <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={formData.$designer?.id ? `root[${formData.$designer?.id}]` : 'root'}
+                name="root"
+                rawErrors={errors}
+                schema={schema}
+                uiOptions={uiOptions}
+                value={formData}
+                onChange={onChange}
+              />
+            </AdaptiveFormContext.Provider>
+          </ErrorBoundary>
+        );
+      }
+      return null;
     };

Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -87,7 +87,6 @@ describe('<CreationFlow/>', () => { @@
           description: '',
           location: expectedLocation,
           name: 'EchoBot-1',
-          qnaKbUrls: undefined,
           schemaUrl: '',
           templateId: 'EchoBot',
         });
@@ Expand Down @@

Composer/packages/client/__tests__/components/createDialogModal.test.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,7 @@ describe('<CreateDialogModal/>', () => { @@
         return renderWithRecoil(
           <CreateDialogModal isOpen projectId={projectId} onDismiss={onDismissMock} onSubmit={onSubmitMock} />,
           ({ set }) => {
-            set(showCreateDialogModalState(projectId), true);
+            set(showCreateDialogModalState, true);
           }
         );
       }
@@ Expand Down @@

Composer/packages/client/__tests__/components/design.test.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -42,7 +42,11 @@ describe('<ProjectTree/>', () => { @@
         const handleDeleteTrigger = jest.fn(() => {});
         const { findByTestId } = renderWithRecoil(
-          <ProjectTree onDeleteDialog={handleDeleteDialog} onDeleteTrigger={handleDeleteTrigger} onSelect={handleSelect} />,
+          <ProjectTree
+            onBotDeleteDialog={handleDeleteDialog}
+            onDialogDeleteTrigger={handleDeleteTrigger}
+            onSelect={handleSelect}
+          />,
           initRecoilState
         );
         const node = await findByTestId('EchoBot-1_Greeting');
@@ Expand Down @@

Composer/packages/client/__tests__/components/projecttree.test.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -42,30 +42,21 @@ const initRecoilStateMulti = ({ set }) => { @@
     describe('<ProjectTree/>', () => {
       it('should render the projecttree', async () => {
-        const { findByText } = renderWithRecoil(
-          <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={() => {}} />,
-          initRecoilState
-        );
+        const { findByText } = renderWithRecoil(<ProjectTree onSelect={() => {}} />, initRecoilState);
         await findByText('EchoBot-1');
       });
       it('should render the projecttree with multiple bots', async () => {
-        const { findAllByText, findByText } = renderWithRecoil(
-          <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={() => {}} />,
-          initRecoilStateMulti
-        );
+        const { findAllByText, findByText } = renderWithRecoil(<ProjectTree onSelect={() => {}} />, initRecoilStateMulti);
         await findAllByText('EchoBot-1');
         await findByText('EchoBot-1b');
       });
       it('should handle project tree item click', async () => {
         const mockFileSelect = jest.fn(() => null);
-        const component = renderWithRecoil(
-          <ProjectTree onDeleteDialog={() => {}} onDeleteTrigger={() => {}} onSelect={mockFileSelect} />,
-          initRecoilState
-        );
+        const component = renderWithRecoil(<ProjectTree onSelect={mockFileSelect} />, initRecoilState);
         const node = await component.findByTestId('EchoBot-1_Greeting');
         fireEvent.click(node);
@@ Expand All / @@ -75,12 +66,7 @@ describe('<ProjectTree/>', () => { @@
       it('fires the onSelectAll event', async () => {
         const mockOnSelected = jest.fn();
         const { findByText } = renderWithRecoil(
-          <ProjectTree
-            onDeleteDialog={() => {}}
-            onDeleteTrigger={() => {}}
-            onSelect={() => {}}
-            onSelectAllLink={mockOnSelected}
-          />,
+          <ProjectTree onSelect={() => {}} onSelectAllLink={mockOnSelected} />,
           initRecoilState
         );
@@ Expand Down @@

Composer/packages/client/__tests__/shell/triggerApi.test.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -45,12 +45,9 @@ const state = { @@
     };
     describe('use triggerApi hooks', () => {
-      let selectToMock, updateDialogMock, createLgTemplatesMock, createLuIntentMock, result;
+      let createTriggerMock, result;
       beforeEach(() => {
-        selectToMock = jest.fn();
-        updateDialogMock = jest.fn();
-        createLgTemplatesMock = jest.fn();
-        createLuIntentMock = jest.fn();
+        createTriggerMock = jest.fn();
         const initRecoilState = ({ set }) => {
           set(currentProjectIdState, state.projectId);
@@ Expand All / @@ -61,10 +58,7 @@ describe('use triggerApi hooks', () => { @@
           set(schemasState(state.projectId), state.schemas);
           set(dispatcherState, (current: Dispatcher) => ({
             ...current,
-            selectTo: selectToMock,
-            updateDialog: updateDialogMock,
-            createLgTemplates: createLgTemplatesMock,
-            createLuIntent: createLuIntentMock,
+            createTrigger: createTriggerMock,
           }));
         };
@@ Expand All / @@ -89,9 +83,7 @@ describe('use triggerApi hooks', () => { @@
           triggerPhrases: '',
         };
         await result.current.createTrigger(dialogId, formData);
-        expect(createLgTemplatesMock).toBeCalledTimes(1);
-        expect(updateDialogMock).toBeCalledTimes(1);
-        expect(createLgTemplatesMock).toBeCalledTimes(1);
-        expect(updateDialogMock).toBeCalledTimes(1);
+        const arg = [state.projectId, dialogId, formData, true];
+        expect(createTriggerMock).toBeCalledWith(...arg);
       });
     });

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -24,8 +24,10 @@ import { BotTemplate } from '@bfc/shared'; @@
     import { DialogWrapper, DialogTypes } from '@bfc/ui-shared';
     import { NeutralColors } from '@uifabric/fluent-theme';
     import { RouteComponentProps } from '@reach/router';
+    import { useRecoilValue } from 'recoil';
     import { DialogCreationCopy, EmptyBotTemplateId, QnABotTemplateId } from '../../constants';
+    import { creationFlowTypeState } from '../../recoilModel';
     // -------------------- Styles -------------------- //
@@ Expand Down Expand Up / @@ -116,6 +118,8 @@ export function CreateOptions(props: CreateOptionsProps) { @@
       const { templates, onDismiss, onNext } = props;
       const [currentTemplate, setCurrentTemplate] = useState('');
       const [emptyBotKey, setEmptyBotKey] = useState('');
+      const creationFlowType = useRecoilValue(creationFlowTypeState);
       const selection = useMemo(() => {
         return new Selection({
           onSelectionChanged: () => {
@@ Expand Down Expand Up @@
         },
       ];
+      const choiceGroupTitle = creationFlowType === 'Skill' ? '' : formatMessage('Choose how to create your bot');
+      const dialogWrapperProps =
+        creationFlowType === 'Skill' ? DialogCreationCopy.CREATE_NEW_SKILLBOT : DialogCreationCopy.CREATE_NEW_BOT;
       return (
         <Fragment>
-          <DialogWrapper
-            isOpen
-            {...DialogCreationCopy.CREATE_NEW_BOT}
-            dialogType={DialogTypes.CreateFlow}
-            onDismiss={onDismiss}
-          >
-            <ChoiceGroup
-              label={formatMessage('Choose how to create your bot')}
-              options={choiceOptions}
-              selectedKey={option}
-              onChange={handleChange}
-            />
+          <DialogWrapper isOpen {...dialogWrapperProps} dialogType={DialogTypes.CreateFlow} onDismiss={onDismiss}>
+            <ChoiceGroup label={choiceGroupTitle} options={choiceOptions} selectedKey={option} onChange={handleChange} />
             <h3 css={listHeader}>{formatMessage('Examples')}</h3>
             <div css={detailListContainer} data-is-scrollable="true">
               <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -112,15 +112,14 @@ const CreationFlow: React.FC<CreationFlowProps> = () => { @@
         openProject(botFolder);
       };
-      const handleCreateNew = async (formData, templateId: string, qnaKbUrls?: string[]) => {
+      const handleCreateNew = async (formData, templateId: string) => {
         const newBotData = {
           templateId: templateId || '',
           name: formData.name,
           description: formData.description,
           location: formData.location,
           schemaUrl: formData.schemaUrl,
           appLocale,
-          qnaKbUrls,
           templateDir: formData.templateDir,
           eTag: formData.eTag,
           urlSuffix: formData.urlSuffix,
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ import { useRecoilValue } from 'recoil'; @@
     import { DialogCreationCopy, QnABotTemplateId, nameRegex } from '../../constants';
     import { FieldConfig, useForm } from '../../hooks/useForm';
     import { StorageFolder } from '../../recoilModel/types';
+    import { creationFlowTypeState } from '../../recoilModel';
     import { createNotification } from '../../recoilModel/dispatchers/notification';
     import { ImportSuccessNotificationWrapper } from '../ImportModal/ImportSuccessNotification';
     import { dispatcherState } from '../../recoilModel';
@@ Expand Down Expand Up @@
         createFolder,
         updateFolder,
       } = props;
+      const creationFlowType = useRecoilValue(creationFlowTypeState);
       const files = focusedStorageFolder?.children ?? [];
       const writable = focusedStorageFolder.writable;
       const getDefaultName = () => {
@@ Expand Down Expand Up @@
         updateField('location', location);
       }, [focusedStorageFolder]);
+      const dialogWrapperProps =
+        creationFlowType === 'Skill'
+          ? DialogCreationCopy.DEFINE_CONVERSATION_OBJECTIVE
+          : isImported
+          ? DialogCreationCopy.IMPORT_BOT_PROJECT
+          : DialogCreationCopy.DEFINE_BOT_PROJECT;
       const locationSelectContent = useMemo(() => {
         return (
           <LocationSelectContent
@@ Expand All @@
           />
         );
       }, [focusedStorageFolder]);
-      const dialogCopy = isImported ? DialogCreationCopy.IMPORT_BOT_PROJECT : DialogCreationCopy.DEFINE_BOT_PROJECT;
       return (
         <Fragment>
-          <DialogWrapper isOpen {...dialogCopy} dialogType={DialogTypes.CreateFlow} onDismiss={onDismiss}>
+          <DialogWrapper isOpen {...dialogWrapperProps} dialogType={DialogTypes.CreateFlow} onDismiss={onDismiss}>
             <form onSubmit={handleSubmit}>
               <input style={{ display: 'none' }} type="submit" />
               <Stack horizontal styles={stackinput} tokens={{ childrenGap: '2rem' }}>
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: bot projects skill & context menu #4492

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!