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

fix: Display Orchestrator Selection Dialog for Local Skills #7518

Merged
cwhitten merged 19 commits into from
May 2, 2021
Merged

fix: Display Orchestrator Selection Dialog for Local Skills #7518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
577d22a
First pass to add OrchSkillDialog to local skills
taicchoumsft Apr 30, 2021
5c2bd6b
Merge branch 'main' into tachou/orchLocalSkillDialog
taicchoumsft Apr 30, 2021
5e182d7
Rename Orchestractor to Orchestrator
taicchoumsft Apr 30, 2021
4f5991f
Merge branch 'main' into tachou/orchLocalSkillDialog
taicchoumsft Apr 30, 2021
912419b
Merge branch 'main' into tachou/orchLocalSkillDialog
taicchoumsft Apr 30, 2021
0976f11
Merge branch 'main' into tachou/orchLocalSkillDialog
cwhitten Apr 30, 2021
f8d973d
update package to 4.13.1
taicchoumsft Apr 30, 2021
744d2ce
Merge branch 'tachou/orchLocalSkillDialog' of https://github.com/micr…
taicchoumsft Apr 30, 2021
ed9fe92
Address PR comments
taicchoumsft Apr 30, 2021
507b0e4
Use string constants where possible
taicchoumsft Apr 30, 2021
d980894
Rename Orchestrator component
taicchoumsft Apr 30, 2021
53df210
Fix another typo
taicchoumsft Apr 30, 2021
d86dcf1
Merge branch 'main' into tachou/orchLocalSkillDialog
taicchoumsft Apr 30, 2021
02063aa
Change link to bf-orchestrator
taicchoumsft Apr 30, 2021
3d6c7ba
Merge branch 'tachou/orchLocalSkillDialog' of https://github.com/micr…
taicchoumsft Apr 30, 2021
d41e3c5
Merge branch 'main' into tachou/orchLocalSkillDialog
taicchoumsft Apr 30, 2021
82558e5
Link and copy changes per PM and Design
taicchoumsft May 1, 2021
0a55178
add unit test
taicchoumsft May 2, 2021
9d35094
Merge branch 'main' into tachou/orchLocalSkillDialog
taicchoumsft May 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 70 additions & 62 deletions ...nts/AddRemoteSkillModal/Orchestractor.tsx → ...ddRemoteSkillModal/EnableOrchestrator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,70 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import React, { useState } from 'react';
import formatMessage from 'format-message';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { Stack, StackItem } from 'office-ui-fabric-react/lib/Stack';
import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { useRecoilValue } from 'recoil';

import { dispatcherState } from '../../recoilModel';
import { enableOrchestratorDialog } from '../../constants';

import { importOrchestractor } from './helper';

const learnMoreUrl = 'https://aka.ms/bf-composer-docs-publish-bot';

export const Orchestractor = (props) => {
const { projectId, onSubmit, onBack } = props;
const [enableOrchestrator, setEnableOrchestrator] = useState(true);
const { setApplicationLevelError, reloadProject } = useRecoilValue(dispatcherState);
const onChange = (ev, check) => {
setEnableOrchestrator(check);
};
return (
<Stack>
<StackItem styles={{ root: { height: 300, width: '60%' } }}>
<div style={{ marginBottom: '16px' }}>
{enableOrchestratorDialog.content}
<Link href={learnMoreUrl} target="_blank">
<div>{formatMessage('Learn more about Orchestractor')}</div>
</Link>
</div>
<Checkbox
defaultChecked
label={formatMessage('Make Orchestrator my preferred recognizer for multi-bot projects')}
styles={{ root: { margin: '20px 0' } }}
onChange={onChange}
/>
</StackItem>
<Stack horizontal horizontalAlign="space-between">
<DefaultButton text={formatMessage('Back')} onClick={onBack} />
<span>
<DefaultButton styles={{ root: { marginRight: '8px' } }} text={formatMessage('Skip')} onClick={onSubmit} />
<PrimaryButton
text={formatMessage('Continue')}
onClick={(event) => {
onSubmit(event, enableOrchestrator);
if (enableOrchestrator) {
// TODO. show notification
// download orchestrator first
importOrchestractor(projectId, reloadProject, setApplicationLevelError);
// TODO. update notification
}
}}
/>
</span>
</Stack>
</Stack>
);
};
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import React, { useState } from 'react';
import formatMessage from 'format-message';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { Stack, StackItem } from 'office-ui-fabric-react/lib/Stack';
import { PrimaryButton, DefaultButton, Button } from 'office-ui-fabric-react/lib/Button';
import { useRecoilValue } from 'recoil';

import { dispatcherState } from '../../recoilModel';
import { enableOrchestratorDialog } from '../../constants';

import { importOrchestrator } from './helper';

const learnMoreUrl = 'https://aka.ms/LearnMoreOrchestrator';

type OrchestratorProps = {
projectId: string;
onSubmit: (event: React.MouseEvent<HTMLElement | Button>, userSelected?: boolean) => Promise<void>;
onBack?: (event: React.MouseEvent<HTMLElement | Button>) => void;
hideBackButton?: boolean;
};

const EnableOrchestrator: React.FC<OrchestratorProps> = (props) => {
const { projectId, onSubmit, onBack, hideBackButton = false } = props;
const [enableOrchestrator, setEnableOrchestrator] = useState(true);
const { setApplicationLevelError, reloadProject } = useRecoilValue(dispatcherState);
const onChange = (ev, check) => {
setEnableOrchestrator(check);
};
return (
<Stack data-testid="orchestrator-skill">
<StackItem styles={{ root: { height: 300, width: '60%' } }}>
<div style={{ marginBottom: '16px' }}>
{enableOrchestratorDialog.content}
<Link href={learnMoreUrl} target="_blank">
<div>{formatMessage('Learn more about Orchestrator')}</div>
</Link>
</div>
<Checkbox
defaultChecked
label={formatMessage('Make Orchestrator my preferred recognizer for multi-bot projects')}
styles={{ root: { margin: '20px 0' } }}
onChange={onChange}
/>
</StackItem>
<Stack horizontal horizontalAlign="space-between">
<Stack.Item>{!hideBackButton && <DefaultButton text={formatMessage('Back')} onClick={onBack} />}</Stack.Item>
<Stack.Item align="end">
<DefaultButton styles={{ root: { marginRight: '8px' } }} text={formatMessage('Skip')} onClick={onSubmit} />
<PrimaryButton
data-testid="import-orchestrator"
text={formatMessage('Continue')}
onClick={(event) => {
onSubmit(event, enableOrchestrator);
if (enableOrchestrator) {
// TODO: Block UI from doing any work until import is complete. Item #7531
importOrchestrator(projectId, reloadProject, setApplicationLevelError);
}
}}
/>
</Stack.Item>
</Stack>
</Stack>
);
};

export { OrchestratorProps, EnableOrchestrator };
8 changes: 4 additions & 4 deletions Composer/packages/client/src/components/AddRemoteSkillModal/SelectIntent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import luWorker from '../../recoilModel/parsers/luWorker';
import { localeState, dispatcherState } from '../../recoilModel';
import { recognizersSelectorFamily } from '../../recoilModel/selectors/recognizers';

import { Orchestractor } from './Orchestractor';
import { EnableOrchestrator } from './EnableOrchestrator';

const detailListContainer = css`
width: 100%;
Expand Down Expand Up @@ -248,7 +248,7 @@ export const SelectIntent: React.FC<SelectIntentProps> = (props) => {
return (
<Fragment>
{showOrchestratorDialog ? (
<Orchestractor
<EnableOrchestrator
projectId={projectId}
onBack={() => {
onUpdateTitle(selectIntentDialog.ADD_OR_EDIT_PHRASE(dialogId, manifest.name));
Expand Down Expand Up @@ -313,10 +313,10 @@ export const SelectIntent: React.FC<SelectIntentProps> = (props) => {
onClick={(ev) => {
if (pageIndex === 1) {
if (hasOrchestrator) {
// skip orchestractor modal
// skip orchestrator modal
handleSubmit(ev, true);
} else {
// show orchestractor
// show orchestrator
onUpdateTitle(enableOrchestratorDialog);
setShowOrchestratorDialog(true);
}
Expand Down
4 changes: 2 additions & 2 deletions Composer/packages/client/src/components/AddRemoteSkillModal/helper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ const conflictConfirmationPrompt = formatMessage(
'This operation will overwrite changes made to previously imported files. Do you want to proceed?'
);

export const importOrchestractor = async (projectId: string, reloadProject, setApplicationLevelError) => {
export const importOrchestrator = async (projectId: string, reloadProject, setApplicationLevelError) => {
const reqBody = {
package: 'Microsoft.Bot.Builder.AI.Orchestrator',
version: '4.13.0',
version: '4.13.1',
source: 'https://api.nuget.org/v3/index.json',
isUpdating: false,
isPreview: false,
Expand Down
70 changes: 70 additions & 0 deletions Composer/packages/client/src/components/Orchestrator/OrchestratorForSkillsDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import { DialogTypes, DialogWrapper } from '@bfc/ui-shared/lib/components/DialogWrapper';
import { SDKKinds } from '@botframework-composer/types';
import { Button } from 'office-ui-fabric-react/lib/components/Button/Button';
import React, { useMemo } from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';

import { enableOrchestratorDialog } from '../../constants';
import {
designPageLocationState,
dispatcherState,
localeState,
orchestratorForSkillsDialogState,
rootBotProjectIdSelector,
} from '../../recoilModel';
import { recognizersSelectorFamily } from '../../recoilModel/selectors/recognizers';
import { EnableOrchestrator } from '../AddRemoteSkillModal/EnableOrchestrator';

export const OrchestratorForSkillsDialog = () => {
const [showOrchestratorDialog, setShowOrchestratorDialog] = useRecoilState(orchestratorForSkillsDialogState);
const rootProjectId = useRecoilValue(rootBotProjectIdSelector) || '';
const { dialogId } = useRecoilValue(designPageLocationState(rootProjectId));
const locale = useRecoilValue(localeState(rootProjectId));
const curRecognizers = useRecoilValue(recognizersSelectorFamily(rootProjectId));

const { updateRecognizer } = useRecoilValue(dispatcherState);

const hasOrchestrator = useMemo(() => {
const fileName = `${dialogId}.${locale}.lu.dialog`;
return curRecognizers.some((f) => f.id === fileName && f.content.$kind === SDKKinds.OrchestratorRecognizer);
}, [curRecognizers, dialogId, locale]);

const handleOrchestratorSubmit = async (event: React.MouseEvent<HTMLElement | Button>, enable?: boolean) => {
event.preventDefault();
if (enable) {
// update recognizor type to orchestrator
await updateRecognizer(rootProjectId, dialogId, SDKKinds.OrchestratorRecognizer);
}
setShowOrchestratorDialog(false);
};

const setVisibility = () => {
if (showOrchestratorDialog) {
if (hasOrchestrator) {
setShowOrchestratorDialog(false);
return false;
}
return true;
}
return false;
};

const onDismissHandler = (event: React.MouseEvent<HTMLButtonElement> | undefined) => {
setShowOrchestratorDialog(false);
};

return (
<DialogWrapper
dialogType={DialogTypes.CreateFlow}
isOpen={setVisibility()}
subText={enableOrchestratorDialog.subText}
title={enableOrchestratorDialog.title}
onDismiss={onDismissHandler}
>
<EnableOrchestrator hideBackButton projectId={rootProjectId} onSubmit={handleOrchestratorSubmit} />
</DialogWrapper>
);
};
98 changes: 98 additions & 0 deletions ...ackages/client/src/components/Orchestrator/__tests__/OrchestratorForSkillsDialog.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import { act, getQueriesForElement, within } from '@botframework-composer/test-utils';
import { SDKKinds } from '@botframework-composer/types';
import * as React from 'react';
import userEvent from '@testing-library/user-event';

import { renderWithRecoil } from '../../../../__tests__/testUtils/renderWithRecoil';
import {
botProjectFileState,
botProjectIdsState,
designPageLocationState,
localeState,
orchestratorForSkillsDialogState,
projectMetaDataState,
} from '../../../recoilModel';
import { recognizersSelectorFamily } from '../../../recoilModel/selectors/recognizers';
import { OrchestratorForSkillsDialog } from '../OrchestratorForSkillsDialog';
import { importOrchestrator } from '../../AddRemoteSkillModal/helper';

jest.mock('../../AddRemoteSkillModal/helper');

// mimick a project setup with a rootbot and dialog files, and provide conditions for orchestrator skill dialog to be visible
const makeInitialState = (set: any) => {
set(orchestratorForSkillsDialogState, true);
set(botProjectIdsState, ['rootBotId']);
set(botProjectFileState('rootBotId'), { content: { name: 'rootBot', skills: {} }, id: 'rootBot', lastModified: '' });
set(projectMetaDataState('rootBotId'), { isRootBot: true, isRemote: false });
set(designPageLocationState('rootBotId'), { dialogId: 'rootBotRootDialogId', focused: 'na', selected: 'na' });
set(localeState('rootBotId'), 'en-us');
set(recognizersSelectorFamily('rootBotId'), [
{ id: 'rootBotRootDialogId.en-us.lu.dialog', content: { $kind: SDKKinds.LuisRecognizer } },
]);
};

const orchestratorTestId = 'orchestrator-skill';

describe('<OrchestratorForSkillsDialog />', () => {
beforeEach(() => {
jest.clearAllMocks();
});

it('should not open OrchestratorForSkillsDialog if orchestratorForSkillsDialogState is false', () => {
const { baseElement } = renderWithRecoil(<OrchestratorForSkillsDialog />, ({ set }) => {
makeInitialState(set);
set(orchestratorForSkillsDialogState, false);
});
const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId);
expect(dialog).toBeNull();
});

it('should not open OrchestratorForSkillsDialog if orchestrator already being used in root', () => {
const { baseElement } = renderWithRecoil(<OrchestratorForSkillsDialog />, ({ set }) => {
makeInitialState(set);
set(recognizersSelectorFamily('rootBotId'), [
{ id: 'rootBotRootDialogId.en-us.lu.dialog', content: { $kind: SDKKinds.OrchestratorRecognizer } },
]);
});
const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId);
expect(dialog).toBeNull();
});

it('open OrchestratorForSkillsDialog if orchestratorForSkillsDialogState and Orchestrator not used in Root Bot Root Dialog', () => {
const { baseElement } = renderWithRecoil(<OrchestratorForSkillsDialog />, ({ set }) => {
makeInitialState(set);
});
const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId);
expect(dialog).toBeTruthy();
});

it('should install Orchestrator package when user clicks Continue', async () => {
const { baseElement } = renderWithRecoil(<OrchestratorForSkillsDialog />, ({ set }) => {
makeInitialState(set);
});

await act(async () => {
userEvent.click(within(baseElement).getByTestId('import-orchestrator'));
});

expect(importOrchestrator).toBeCalledWith('rootBotId', expect.anything(), expect.anything());
});

it('should not install Orchestrator package when user clicks skip', async () => {
const { baseElement } = renderWithRecoil(<OrchestratorForSkillsDialog />, ({ set }) => {
makeInitialState(set);
});

await act(async () => {
userEvent.click(await within(baseElement).findByText('Skip'));
});

const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId);
expect(dialog).toBeNull();

expect(importOrchestrator).toBeCalledTimes(0);
});
});
6 changes: 3 additions & 3 deletions Composer/packages/client/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,14 +356,14 @@ export const selectIntentDialog = {

export const enableOrchestratorDialog = {
get title() {
return formatMessage('Enable Orchestrator');
return formatMessage('Enable Orchestrator Recognizer');
},
get subText() {
return formatMessage('Enable orchestrator as the recognizer at the root dialog to add this skill');
return formatMessage('Enable Orchestrator as the recognizer for routing to other skills');
},
get content() {
return formatMessage(
'Multi-bot projects work best with the Orchestrator recognizer set at the root dialog. Orchestrator helps identify and dispatch user intents from the root dialog to the respective skill that can handle the intent. Orchestrator does not support entity extraction at the root dialog level.'
'Multi-bot projects work best with the Orchestrator recognizer set at the dispatching dialog (typically the root dialog). Orchestrator helps identify and dispatch user intents from the root dialog to the respective skill that handles the intent. Orchestrator does not support entity extraction. If you plan to combine entity extraction and routing at the root dialog, use LUIS instead.'
);
},
};
Expand Down
3 changes: 3 additions & 0 deletions Composer/packages/client/src/pages/design/Modals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import { undoFunctionState } from '../../recoilModel/undo/history';
import { CreationFlowStatus } from '../../constants';
import { RepairSkillModalOptionKeys } from '../../components/RepairSkillModal';
import { createQnAOnState, exportSkillModalInfoState } from '../../recoilModel/atoms/appState';
import { OrchestratorForSkillsDialog } from '../../components/Orchestrator/OrchestratorForSkillsDialog';

import CreationModal from './creationModal';

Expand Down Expand Up @@ -170,6 +171,8 @@ const Modals: React.FC<ModalsProps> = ({ projectId = '' }) => {
onSubmit={handleCreateQnA}
/>

<OrchestratorForSkillsDialog />

{displaySkillManifestNameIdentifier && (
<DisplayManifestModal
skillNameIdentifier={displaySkillManifestNameIdentifier}
Expand Down
5 changes: 5 additions & 0 deletions Composer/packages/client/src/recoilModel/atoms/appState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,6 +355,11 @@ export const warnAboutDotNetState = atom<boolean>({
default: false,
});

export const orchestratorForSkillsDialogState = atom<boolean>({
key: getFullyQualifiedKey('orchestratorForSkillsDialogState'),
default: false,
});

export const warnAboutFunctionsState = atom<boolean>({
key: getFullyQualifiedKey('warnAboutFunctionsState'),
default: false,
Expand Down
Loading