+ {children} +
+
{formatMessage.rich('Connecting to { source } to import bot content...', { b: BoldBlue, source: getUserFriendlySource(source), diff --git a/Composer/packages/client/src/components/ManageService/ManageService.tsx b/Composer/packages/client/src/components/ManageService/ManageService.tsx index 34a9867b27..e5520c9a57 100644 --- a/Composer/packages/client/src/components/ManageService/ManageService.tsx +++ b/Composer/packages/client/src/components/ManageService/ManageService.tsx @@ -22,14 +22,9 @@ import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/Choi import { ProvisionHandoff } from '@bfc/ui-shared'; import sortBy from 'lodash/sortBy'; import { NeutralColors } from '@uifabric/fluent-theme'; -import { AzureTenant } from '@botframework-composer/types'; -import jwtDecode from 'jwt-decode'; import TelemetryClient from '../../telemetry/TelemetryClient'; -import { AuthClient } from '../../utils/authClient'; -import { AuthDialog } from '../../components/Auth/AuthDialog'; -import { getTokenFromCache, isShowAuthDialog, userShouldProvideTokens } from '../../utils/auth'; -import { dispatcherState } from '../../recoilModel/atoms'; +import { dispatcherState, currentUserState, isAuthenticatedState, showAuthDialogState } from '../../recoilModel/atoms'; type ManageServiceProps = { createService: ( @@ -72,21 +67,19 @@ const mainElementStyle = { marginBottom: 20 }; const dialogBodyStyles = { height: 400 }; const CREATE_NEW_KEY = 'CREATE_NEW'; -export const ManageService = (props: ManageServiceProps) => { - const [showAuthDialog, setShowAuthDialog] = useState(false); - const [token, setToken] = useState(); +export const ManageService: React.FC = (props: ManageServiceProps) => { + const currentUser = useRecoilValue(currentUserState); + const isAuthenticated = useRecoilValue(isAuthenticatedState); + const showAuthDialog = useRecoilValue(showAuthDialogState); - const { setApplicationLevelError } = useRecoilValue(dispatcherState); + const { setApplicationLevelError, requireUserLogin } = useRecoilValue(dispatcherState); const [subscriptionId, setSubscription] = useState(''); - const [tenantId, setTenantId] = useState(''); const [resourceGroups, setResourceGroups] = useState([]); const [createResourceGroup, setCreateResourceGroup] = useState(false); const [newResourceGroupName, setNewResourceGroupName] = useState(''); const [resourceGroupKey, setResourceGroupKey] = useState(''); const [resourceGroup, setResourceGroup] = useState(''); const [tier, setTier] = useState(''); - const [allTenants, setAllTenants] = useState([]); - const [tenantsErrorMessage, setTenantsErrorMessage] = useState(undefined); const [showHandoff, setShowHandoff] = useState(false); const [resourceName, setResourceName] = useState(''); const [loading, setLoading] = useState(undefined); @@ -99,7 +92,6 @@ export const ManageService = (props: ManageServiceProps) => { const [keys, setKeys] = useState([]); const [dialogTitle, setDialogTitle] = useState(''); - const [userProvidedTokens, setUserProvidedTokens] = useState(false); const [currentStep, setCurrentStep] = useState('intro'); const [outcomeDescription, setOutcomeDescription] = useState(''); const [outcomeSummary, setOutcomeSummary] = useState(); @@ -116,8 +108,8 @@ export const ManageService = (props: ManageServiceProps) => { ]; const fetchLocations = async (subscriptionId) => { - if (token) { - const tokenCredentials = new TokenCredentials(token); + if (isAuthenticated) { + const tokenCredentials = new TokenCredentials(currentUser.token); const subscriptionClient = new SubscriptionClient(tokenCredentials); const locations = await subscriptionClient.subscriptions.listLocations(subscriptionId); setLocationList( @@ -141,64 +133,12 @@ export const ManageService = (props: ManageServiceProps) => { return []; } }; - const decodeToken = (token: string) => { - try { - return jwtDecode(token); - } catch (err) { - console.error('decode token error in ', err); - return null; - } - }; - - useEffect(() => { - if (currentStep === 'subscription' && !userShouldProvideTokens()) { - AuthClient.getTenants() - .then((tenants) => { - setAllTenants(tenants); - if (tenants.length === 0) { - setTenantsErrorMessage(formatMessage('No Azure Directories were found.')); - } else if (tenants.length >= 1) { - setTenantId(tenants[0].tenantId); - } else { - setTenantsErrorMessage(undefined); - } - }) - .catch((err) => { - setTenantsErrorMessage( - formatMessage('There was a problem loading Azure directories. {errMessage}', { - errMessage: err.message || err.toString(), - }) - ); - }); - } - }, [currentStep]); - - useEffect(() => { - if (tenantId) { - AuthClient.getARMTokenForTenant(tenantId) - .then((token) => { - setToken(token); - setTenantsErrorMessage(undefined); - }) - .catch((err) => { - setTenantsErrorMessage( - formatMessage( - 'There was a problem getting the access token for the current Azure directory. {errMessage}', - { - errMessage: err.message || err.toString(), - } - ) - ); - setTenantsErrorMessage(err.message || err.toString()); - }); - } - }, [tenantId]); useEffect(() => { - if (token) { + if (isAuthenticated && !props.hidden) { setAvailableSubscriptions([]); setSubscriptionsErrorMessage(undefined); - getSubscriptions(token) + getSubscriptions(currentUser.token) .then((data) => { setAvailableSubscriptions(data); if (data.length === 0) { @@ -213,33 +153,7 @@ export const ManageService = (props: ManageServiceProps) => { setSubscriptionsErrorMessage(err.message); }); } - }, [token]); - - const hasAuth = async () => { - let newtoken = ''; - if (userShouldProvideTokens()) { - if (isShowAuthDialog(false)) { - setShowAuthDialog(true); - } - newtoken = getTokenFromCache('accessToken'); - if (newtoken) { - const decoded = decodeToken(newtoken); - if (decoded) { - setToken(newtoken); - setUserProvidedTokens(true); - } else { - setTenantsErrorMessage( - formatMessage( - 'There was a problem with the authentication access token. Close this dialog and try again. To be prompted to provide the access token again, clear it from application local storage.' - ) - ); - } - } - } else { - setUserProvidedTokens(false); - } - setCurrentStep('subscription'); - }; + }, [isAuthenticated, props.hidden]); useEffect(() => { // reset the ui @@ -270,14 +184,18 @@ export const ManageService = (props: ManageServiceProps) => { const resourceGroup = accounts[account].id?.replace(/.*?\/resourceGroups\/(.*?)\/.*/, '$1'); const name = accounts[account].name; if (resourceGroup && name) { - const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroup, name); - if (keys?.key1) { - keyList.push({ - name: name, - resourceGroup: resourceGroup, - region: accounts[account].location || '', - key: keys?.key1 || '', - }); + try { + const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroup, name); + if (keys?.key1) { + keyList.push({ + name, + resourceGroup, + region: accounts[account].location || '', + key: keys?.key1 || '', + }); + } + } catch (_err) { + // pass, filter no authorization resource } } } @@ -285,10 +203,10 @@ export const ManageService = (props: ManageServiceProps) => { }; const fetchAccounts = async (subscriptionId) => { - if (token) { + if (isAuthenticated) { setLoading(formatMessage('Loading keys...')); setNoKeys(false); - const tokenCredentials = new TokenCredentials(token); + const tokenCredentials = new TokenCredentials(currentUser.token); const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId); const accounts = await cognitiveServicesManagementClient.accounts.list(); @@ -307,11 +225,11 @@ export const ManageService = (props: ManageServiceProps) => { }; const fetchResourceGroups = async (subscriptionId) => { - if (token) { - const tokenCredentials = new TokenCredentials(token); + if (isAuthenticated) { + const tokenCredentials = new TokenCredentials(currentUser.token); const resourceClient = new ResourceManagementClient(tokenCredentials, subscriptionId); - const groups = sortBy(await resourceClient.resourceGroups.list(), ['name']); - + const results = await resourceClient.resourceGroups.list(); + const groups = sortBy(results, ['name']); setResourceGroups([ { id: CREATE_NEW_KEY, @@ -324,10 +242,10 @@ export const ManageService = (props: ManageServiceProps) => { }; const createService = async () => { - if (token) { + if (isAuthenticated) { setLoading(formatMessage('Creating resources...')); - const tokenCredentials = new TokenCredentials(token); + const tokenCredentials = new TokenCredentials(currentUser.token); const resourceGroupName = resourceGroupKey === CREATE_NEW_KEY ? newResourceGroupName : resourceGroup; if (resourceGroupKey === CREATE_NEW_KEY) { @@ -437,8 +355,9 @@ export const ManageService = (props: ManageServiceProps) => { const onChangeSubscription = async (_, opt) => { // get list of keys for this subscription setSubscription(opt.key); - fetchAccounts(opt.key); setLoading(formatMessage('Loading subscription...')); + fetchAccounts(opt.key); + // if we don't have a list of regions already passed in if (!props.regions) { fetchLocations(opt.key); @@ -508,7 +427,8 @@ export const ManageService = (props: ManageServiceProps) => { setShowHandoff(true); props.onDismiss(); } else { - hasAuth(); + requireUserLogin(); + setCurrentStep('subscription'); } }; @@ -531,7 +451,7 @@ export const ManageService = (props: ManageServiceProps) => { {props.introText} {props.learnMore ? ( - + {formatMessage('Learn more')} ) : null} @@ -557,10 +477,9 @@ export const ManageService = (props: ManageServiceProps) => { - {formatMessage( - 'Select your Azure directory, then choose the subscription where your existing {service} resource is located.', - { service: props.serviceName } - )} + {formatMessage('Choose the subscription where your existing {service} resource is located.', { + service: props.serviceName, + })} {props.learnMore ? ( {formatMessage('Learn more')} @@ -570,18 +489,7 @@ export const ManageService = (props: ManageServiceProps) => { ({ key: t.tenantId, text: t.displayName }))} - selectedKey={tenantId} - styles={dropdownStyles} - onChange={(_e, o) => { - setTenantId(o?.key as string); - }} - /> - 0)} errorMessage={subscriptionsErrorMessage} label={formatMessage('Azure subscription')} @@ -612,6 +520,7 @@ export const ManageService = (props: ManageServiceProps) => { {!noKeys && subscriptionId && ( 0) || nextAction !== 'choose'} label={formatMessage('{service} resource name', { service: props.serviceName })} options={ @@ -653,6 +562,7 @@ export const ManageService = (props: ManageServiceProps) => { { placeholder={formatMessage('Enter name for new resources')} styles={inputStyles} value={resourceName} - onChange={(e, val) => setResourceName(val || '')} + onChange={(e, val) => { + setResourceName(val || ''); + }} /> {props.tiers && ( { - {formatMessage( - 'Select your Azure directory, then choose the subscription where you’d like your new {service} resource.', - { service: props.serviceName } - )} + {formatMessage('Choose the subscription where you’d like your new {service} resource.', { + service: props.serviceName, + })} {props.learnMore ? ( {formatMessage('Learn more')} @@ -787,18 +698,7 @@ export const ManageService = (props: ManageServiceProps) => { ({ key: t.tenantId, text: t.displayName }))} - selectedKey={tenantId} - styles={dropdownStyles} - onChange={(_e, o) => { - setTenantId(o?.key as string); - }} - /> - { {loading && } setCurrentStep('intro')} /> setCurrentStep('resourceCreation')} /> @@ -869,15 +769,6 @@ export const ManageService = (props: ManageServiceProps) => { return ( - {showAuthDialog && ( - { - setShowAuthDialog(false); - }} - /> - )} css` background-color: transparent; `} - ${disabled - ? `pointer-events: none;` - : `&:hover { + ${!disabled + ? `&:hover { background-color: ${NeutralColors.gray50}; } @@ -53,8 +52,8 @@ const link = (active: boolean, disabled: boolean) => css` border-image: initial; outline: rgb(102, 102, 102) solid 1px; } - } - `} + }` + : ''} `; const icon = (active: boolean, disabled: boolean) => diff --git a/Composer/packages/client/src/components/NotFound.jsx b/Composer/packages/client/src/components/NotFound.tsx similarity index 100% rename from Composer/packages/client/src/components/NotFound.jsx rename to Composer/packages/client/src/components/NotFound.tsx diff --git a/Composer/packages/client/src/components/Notifications/NotificationButton.tsx b/Composer/packages/client/src/components/Notifications/NotificationButton.tsx index ab3c0bf539..78eba6c93a 100644 --- a/Composer/packages/client/src/components/Notifications/NotificationButton.tsx +++ b/Composer/packages/client/src/components/Notifications/NotificationButton.tsx @@ -7,6 +7,7 @@ import React, { useState } from 'react'; import { FontWeights } from '@uifabric/styling'; import { IButtonStyles, IconButton } from 'office-ui-fabric-react/lib/Button'; import { NeutralColors, SharedColors } from '@uifabric/fluent-theme'; +import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip'; import { useRecoilValue } from 'recoil'; import formatMessage from 'format-message'; @@ -54,20 +55,19 @@ const NotificationButton: React.FC = ({ buttonStyles }) setIsOpen(!isOpen); }; + const label = formatMessage('Open notification panel'); + return ( - - - - {unreadNotification.length} + + + + + {unreadNotification.length} + - - + + () => { border-left: 4px solid #0078d4; background: white; box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108); - min-width: 340px; + width: 340px; border-radius: 2px; display: flex; flex-direction: column; @@ -68,21 +69,38 @@ const cardDetail = css` flex-grow: 1; `; +const iconMargin = '4px'; + +// Error Block Icon from Messaging Colors const errorType = css` - margin-top: 4px; + margin-top: ${iconMargin}; color: #a80000; `; +// Success Icon from Messaging Colors const successType = css` - margin-top: 4px; - color: #27ae60; + margin-top: ${iconMargin}; + color: #107c10; `; +// #fce100 const warningType = css` - margin-top: 4px; + margin-top: ${iconMargin}; color: ${SharedColors.yellow10}; `; +// #0078d4 +const questionType = css` + margin-top: ${iconMargin}; + color: ${SharedColors.cyanBlue10}; +`; + +// #c19c00 +const congratulationType = css` + margin-top: ${iconMargin}; + color: ${SharedColors.orangeYellow10}; +`; + const cardTitle = css` font-size: ${FontSizes.size16}; lint-height: 22px; @@ -97,13 +115,20 @@ const cardDescription = css` word-break: break-word; `; -const linkButton = css` - color: #0078d4; - float: right; - font-size: 12px; - height: auto; - margin-right: 8px; -`; +const linkButton = { + root: { + padding: '0', + border: '0', + }, + label: { + fontSize: '12px', + color: SharedColors.cyanBlue10, + margin: '0', + }, + textContainer: { + height: '16px', + }, +}; const getShimmerStyles = { root: { @@ -132,21 +157,59 @@ export type NotificationProps = { onHide?: (id: string) => void; }; +const makeLinkLabel = ({ label, onClick }: NotificationLink) => ( + + {label} + +); + const defaultCardContentRenderer = (props: CardProps) => { - const { title, description, type, link } = props; + const { title, description, type, link, links, leftLinks, rightLinks } = props; + + const rightLinkList = rightLinks ?? links ?? [link]; + const leftLinkList = leftLinks ?? []; + + const stackProps: IStackProps = { + horizontal: true, + horizontalAlign: 'space-between', + tokens: { + childrenGap: '20px', + padding: '0 16px 0 0', + maxHeight: '24px', + }, + }; + return ( {type === 'error' && } {type === 'success' && } {type === 'warning' && } + {type === 'question' && } + {type === 'congratulation' && } + {type === 'custom' && ( + + )} {title} {description && {description}} - {link && ( - - {link.label} - - )} + + + {leftLinkList.map((link) => ( + {makeLinkLabel(link)} + ))} + + + {rightLinkList.map( + (link) => link != null && {makeLinkLabel(link)} + )} + + {type === 'pending' && ( )} @@ -196,7 +259,13 @@ export const NotificationCard = React.memo((props: NotificationProps) => { ariaLabel={formatMessage('Close')} css={cancelButton} iconProps={{ iconName: 'Cancel', styles: { root: { fontSize: '12px' } } }} - onClick={() => onDismiss(id)} + onClick={() => { + // This lets us add custom actions to closing a card if we want to. + // For instance, telemetry to track when the user dismisses a specific + // type of card. + cardProps?.onDismiss?.(id); + onDismiss(id); + }} /> {renderCard(cardProps)} diff --git a/Composer/packages/client/src/components/Notifications/TunnelingSetupNotification.tsx b/Composer/packages/client/src/components/Notifications/TunnelingSetupNotification.tsx index 6d3f0e7e87..7138769bf5 100644 --- a/Composer/packages/client/src/components/Notifications/TunnelingSetupNotification.tsx +++ b/Composer/packages/client/src/components/Notifications/TunnelingSetupNotification.tsx @@ -2,47 +2,30 @@ // Licensed under the MIT License. /** @jsx jsx */ -import { jsx, css } from '@emotion/core'; -import React from 'react'; +import { CopyableText } from '@bfc/ui-shared'; +import { css, jsx } from '@emotion/core'; +import { FontSizes } from '@uifabric/fluent-theme'; +import { FontWeights } from '@uifabric/styling'; import formatMessage from 'format-message'; -import { IconButton, IButtonStyles } from 'office-ui-fabric-react/lib/Button'; -import { NeutralColors, FontSizes, FluentTheme } from '@uifabric/fluent-theme'; import { Link } from 'office-ui-fabric-react/lib/Link'; -import { FontWeights } from '@uifabric/styling'; +import React from 'react'; -import { platform, OS } from '../../utils/os'; +import { OS, platform } from '../../utils/os'; import { CardProps } from './NotificationCard'; const container = css` - padding: 0 16px 16px 40px; - position: relative; -`; - -const commandContainer = css` - display: flex; - flex-flow: row nowrap; + padding: 0 8px 16px 12px; position: relative; - padding: 4px 28px 4px 8px; - background-color: ${NeutralColors.gray20}; - line-height: 22px; - margin: 1rem 0; `; -const copyContainer = css` +const header = css` margin: 0; margin-bottom: 4px; font-size: ${FontSizes.size16}; font-weight: ${FontWeights.semibold}; `; -const copyIconColor = FluentTheme.palette.themeDark; -const copyIconStyles: IButtonStyles = { - root: { position: 'absolute', right: 0, color: copyIconColor, height: '22px' }, - rootHovered: { backgroundColor: 'transparent', color: copyIconColor }, - rootPressed: { backgroundColor: 'transparent', color: copyIconColor }, -}; - const linkContainer = css` margin: 0; `; @@ -61,18 +44,9 @@ export const TunnelingSetupNotification: React.FC = (props) => { const port = data?.port; const command = `${getNgrok()} http ${port} --host-header=localhost`; - const copyLocationToClipboard = async () => { - try { - await window.navigator.clipboard.writeText(command); - } catch (e) { - // eslint-disable-next-line no-console - console.error('Something went wrong when trying to copy the command to clipboard.', e); - } - }; - return ( - {title} + {title} {formatMessage.rich('Install ngrok and run the following command to continue', { a: ({ children }) => ( @@ -82,16 +56,11 @@ export const TunnelingSetupNotification: React.FC = (props) => { ), })} - - {command} - - + { describe('', () => { it('should render the NotificationCard', () => { const cardProps: CardProps = { - title: 'There was error creating your KB', + title: 'There was error creating your knowledge base', description: 'error', retentionTime: 1, type: 'error', @@ -29,12 +29,12 @@ describe('', () => { ); - expect(container).toHaveTextContent('There was error creating your KB'); + expect(container).toHaveTextContent('There was error creating your knowledge base'); }); it('should render the customized card', () => { const cardProps: CardProps = { - title: 'There was error creating your KB', + title: 'There was error creating your knowledge base', description: 'error', retentionTime: 5000, type: 'error', diff --git a/Composer/packages/client/src/components/Notifications/__tests__/useSurveyNotification.test.tsx b/Composer/packages/client/src/components/Notifications/__tests__/useSurveyNotification.test.tsx new file mode 100644 index 0000000000..a256342f16 --- /dev/null +++ b/Composer/packages/client/src/components/Notifications/__tests__/useSurveyNotification.test.tsx @@ -0,0 +1,142 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import React from 'react'; + +import { renderWithRecoil } from '../../../../__tests__/testUtils'; +import { NotificationContainer } from '../NotificationContainer'; +import { useSurveyNotification } from '../useSurveyNotification'; +import { machineInfoState } from '../../../recoilModel'; +import { ClientStorage } from '../../../utils/storage'; +import { LAST_SURVEY_KEY } from '../../../constants'; + +let savedVersion: string | undefined = ''; +const MOCK_VERSION = '2.3.4_jest'; + +let surveyStorage: ClientStorage; + +beforeAll(() => { + process.env.NODE_ENV = 'jest'; + savedVersion = process.env.COMPOSER_VERSION; + process.env.COMPOSER_VERSION = MOCK_VERSION; + + surveyStorage = new ClientStorage(window.localStorage, 'survey'); +}); + +afterAll(() => { + process.env.NODE_ENV = 'test'; + process.env.COMPOSER_VERSION = savedVersion; +}); + +describe('useSurveyNotification', () => { + const id = 'machineID12345'; + const os = 'TestOS'; + + const mockOpen = jest.fn(); + + const initRecoilState = ({ set }) => { + set(machineInfoState, { os, id }); + }; + + window.open = mockOpen; + + const TestHarness = () => { + useSurveyNotification(); + return ; + }; + + describe('building the URL', () => { + beforeEach(() => { + surveyStorage.set('optedOut', false); + surveyStorage.set('days', 12345); + surveyStorage.set(LAST_SURVEY_KEY, null); + }); + + it('builds a URL given parameters', async () => { + const page = renderWithRecoil(, initRecoilState); + + const surveyButton = await page.findByText('Take survey'); + surveyButton.click(); + + // We know these should all occur, but we don't care about the order + const patterns = [ + 'https://aka.ms/bfcomposersurvey', + 'Source=Composer', + `machineId=${id}`, + `os=${os}`, + `version=${MOCK_VERSION}`, + ]; + + for (const pattern of patterns) { + expect(mockOpen).toHaveBeenCalledWith(expect.stringContaining(pattern), '_blank'); + } + }); + + it('builds a URL given no OS', async () => { + const newRecoilState = ({ set }) => { + set(machineInfoState, { os: null, id }); + }; + + const page = renderWithRecoil(, newRecoilState); + + const surveyButton = await page.findByText('Take survey'); + surveyButton.click(); + + const patterns = [ + 'https://aka.ms/bfcomposersurvey', + 'Source=Composer', + `machineId=${id}`, + `os=Unknown`, + `version=${MOCK_VERSION}`, + ]; + + for (const pattern of patterns) { + expect(mockOpen).toHaveBeenCalledWith(expect.stringContaining(pattern), '_blank'); + } + }); + }); + + describe('determining eligibility', () => { + beforeEach(() => { + surveyStorage.set('optedOut', false); + surveyStorage.set('days', 12345); + surveyStorage.set(LAST_SURVEY_KEY, null); + }); + + it('shows the box under normal conditions', async () => { + const page = renderWithRecoil(, initRecoilState); + + const surveyButton = await page.findByText('Take survey'); + expect(surveyButton).not.toBeNull(); + }); + + it("doesn't show the box when the user has opted out", () => { + surveyStorage.set('optedOut', true); + + const page = renderWithRecoil(, initRecoilState); + + const surveyButton = page.queryByText('Take survey'); + expect(surveyButton).toBeNull(); + }); + + it("doesn't show the box when the user hasn't spent enough days with Composer", () => { + // logically impossible, but makes a good test case + surveyStorage.set('days', -1); + + const page = renderWithRecoil(, initRecoilState); + + const surveyButton = page.queryByText('Take survey'); + expect(surveyButton).toBeNull(); + }); + + it("returns false when it hasn't been long enough since the last survey", () => { + // also logically impossible, but makes a good test case + surveyStorage.set(LAST_SURVEY_KEY, Date.now() + 10000); + + const page = renderWithRecoil(, initRecoilState); + + const surveyButton = page.queryByText('Take survey'); + expect(surveyButton).toBeNull(); + }); + }); +}); diff --git a/Composer/packages/client/src/components/Notifications/useSurveyNotification.ts b/Composer/packages/client/src/components/Notifications/useSurveyNotification.ts new file mode 100644 index 0000000000..edb8a8ebd6 --- /dev/null +++ b/Composer/packages/client/src/components/Notifications/useSurveyNotification.ts @@ -0,0 +1,121 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { useEffect } from 'react'; +import { useRecoilValue } from 'recoil'; +import formatMessage from 'format-message'; +import querystring from 'query-string'; + +import { ClientStorage } from '../../utils/storage'; +import { dispatcherState, machineInfoState } from '../../recoilModel/atoms/appState'; +import { MachineInfo } from '../../recoilModel/types'; +import { LAST_SURVEY_KEY, SURVEY_URL_BASE, SURVEY_PARAMETERS } from '../../constants'; +import TelemetryClient from '../../telemetry/TelemetryClient'; + +const buildUrl = (info: MachineInfo) => { + // User OS + // hashed machineId + // composer version + // maybe include subscription ID; wait for global sign-in feature + // session ID (global telemetry GUID) + const version = process.env.COMPOSER_VERSION; + + const parameters = { + Source: 'Composer', + os: info?.os || 'Unknown', + machineId: info?.id, + version, + }; + + return `${SURVEY_URL_BASE}?${querystring.stringify(parameters)}`; +}; + +const getSurveyEligibility = () => { + const surveyStorage = new ClientStorage(window.localStorage, 'survey'); + + const optedOut = surveyStorage.get('optedOut', false); + + if (optedOut) { + return false; + } + + let days = surveyStorage.get('days', 0); + const lastUsed = surveyStorage.get('dateLastUsed', null); + const lastTaken = surveyStorage.get(LAST_SURVEY_KEY, null); + const today = new Date().toDateString(); + if (lastUsed !== today) { + days += 1; + surveyStorage.set('days', days); + } + surveyStorage.set('dateLastUsed', today); + + if ( + // To be eligible for the survey, the user needs to have used Composer + // some minimum number of days. + days >= SURVEY_PARAMETERS.daysUntilEligible && + // Also, either the user must have never taken the survey before or + // the last time they took it must be long enough in the past. + (lastTaken == null || Date.now() - lastTaken > SURVEY_PARAMETERS.timeUntilNextSurvey) + ) { + // If the above conditions are true, there's a fixed chance the card will appear. + return process.env.NODE_ENV === 'jest' || Math.random() < SURVEY_PARAMETERS.chanceToAppear; + } else { + return false; + } +}; + +export const useSurveyNotification = () => { + const { addNotification, deleteNotification } = useRecoilValue(dispatcherState); + const machineInfo = useRecoilValue(machineInfoState); + + useEffect(() => { + const url = buildUrl(machineInfo); + deleteNotification('survey'); + + if (getSurveyEligibility()) { + const surveyStorage = new ClientStorage(window.localStorage, 'survey'); + + TelemetryClient.track('HATSSurveyOffered'); + + addNotification({ + id: 'survey', + type: 'question', + title: formatMessage('Would you mind taking a quick survey?'), + description: formatMessage('We read every response and will use your feedback to improve Composer.'), + leftLinks: [ + { + label: formatMessage('Take survey'), + onClick: () => { + // This is safe; we control the URL that gets built + // eslint-disable-next-line security/detect-non-literal-fs-filename + window.open(url, '_blank'); + surveyStorage.set(LAST_SURVEY_KEY, Date.now()); + TelemetryClient.track('HATSSurveyAccepted'); + deleteNotification('survey'); + }, + }, + + { + // this is functionally identical to clicking the close box + label: formatMessage('Remind me later'), + onClick: () => { + TelemetryClient.track('HATSSurveyDismissed'); + deleteNotification('survey'); + }, + }, + ], + rightLinks: [ + { + label: formatMessage('No thanks'), + onClick: () => { + TelemetryClient.track('HATSSurveyRejected'); + surveyStorage.set('optedOut', true); + deleteNotification('survey'); + }, + }, + ], + onDismiss: () => TelemetryClient.track('HATSSurveyDismissed'), + }); + } + }, []); +}; diff --git a/Composer/packages/client/src/components/Orchestrator/OrchestratorForSkillsDialog.tsx b/Composer/packages/client/src/components/Orchestrator/OrchestratorForSkillsDialog.tsx index 0ab13292bc..9fb623adab 100644 --- a/Composer/packages/client/src/components/Orchestrator/OrchestratorForSkillsDialog.tsx +++ b/Composer/packages/client/src/components/Orchestrator/OrchestratorForSkillsDialog.tsx @@ -4,7 +4,7 @@ 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 React, { useMemo, useEffect } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; import { enableOrchestratorDialog } from '../../constants'; @@ -14,9 +14,11 @@ import { localeState, orchestratorForSkillsDialogState, rootBotProjectIdSelector, + settingsState, } from '../../recoilModel'; import { recognizersSelectorFamily } from '../../recoilModel/selectors/recognizers'; import { EnableOrchestrator } from '../AddRemoteSkillModal/EnableOrchestrator'; +import { canImportOrchestrator } from '../AddRemoteSkillModal/helper'; export const OrchestratorForSkillsDialog = () => { const [showOrchestratorDialog, setShowOrchestratorDialog] = useRecoilState(orchestratorForSkillsDialogState); @@ -24,6 +26,7 @@ export const OrchestratorForSkillsDialog = () => { const { dialogId } = useRecoilValue(designPageLocationState(rootProjectId)); const locale = useRecoilValue(localeState(rootProjectId)); const curRecognizers = useRecoilValue(recognizersSelectorFamily(rootProjectId)); + const setting = useRecoilValue(settingsState(rootProjectId)); const { updateRecognizer } = useRecoilValue(dispatcherState); @@ -32,6 +35,12 @@ export const OrchestratorForSkillsDialog = () => { return curRecognizers.some((f) => f.id === fileName && f.content.$kind === SDKKinds.OrchestratorRecognizer); }, [curRecognizers, dialogId, locale]); + useEffect(() => { + if (showOrchestratorDialog && hasOrchestrator) { + setShowOrchestratorDialog(false); + } + }, [hasOrchestrator, showOrchestratorDialog]); + const handleOrchestratorSubmit = async (event: React.MouseEvent, enable?: boolean) => { event.preventDefault(); if (enable) { @@ -43,7 +52,7 @@ export const OrchestratorForSkillsDialog = () => { const setVisibility = () => { if (showOrchestratorDialog) { - if (hasOrchestrator) { + if (hasOrchestrator || !canImportOrchestrator(setting?.runtime?.key)) { setShowOrchestratorDialog(false); return false; } @@ -63,7 +72,12 @@ export const OrchestratorForSkillsDialog = () => { title={enableOrchestratorDialog.title} onDismiss={onDismissHandler} > - + ); }; diff --git a/Composer/packages/client/src/components/Orchestrator/__tests__/OrchestratorForSkillsDialog.test.tsx b/Composer/packages/client/src/components/Orchestrator/__tests__/OrchestratorForSkillsDialog.test.tsx index bdd6ef5181..d24c4472d3 100644 --- a/Composer/packages/client/src/components/Orchestrator/__tests__/OrchestratorForSkillsDialog.test.tsx +++ b/Composer/packages/client/src/components/Orchestrator/__tests__/OrchestratorForSkillsDialog.test.tsx @@ -1,10 +1,10 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import { act, getQueriesForElement, within } from '@botframework-composer/test-utils'; +import { act, screen, userEvent } from '@botframework-composer/test-utils'; import { SDKKinds } from '@botframework-composer/types'; import * as React from 'react'; -import userEvent from '@testing-library/user-event'; +import { within } from '@testing-library/dom'; import { renderWithRecoil } from '../../../../__tests__/testUtils/renderWithRecoil'; import { @@ -14,12 +14,19 @@ import { localeState, orchestratorForSkillsDialogState, projectMetaDataState, + settingsState, } from '../../../recoilModel'; import { recognizersSelectorFamily } from '../../../recoilModel/selectors/recognizers'; import { OrchestratorForSkillsDialog } from '../OrchestratorForSkillsDialog'; import { importOrchestrator } from '../../AddRemoteSkillModal/helper'; -jest.mock('../../AddRemoteSkillModal/helper'); +jest.mock('../../AddRemoteSkillModal/helper', () => { + const helper = jest.requireActual('../../AddRemoteSkillModal/helper'); + return { + ...helper, + importOrchestrator: jest.fn(), + }; +}); // mimick a project setup with a rootbot and dialog files, and provide conditions for orchestrator skill dialog to be visible const makeInitialState = (set: any) => { @@ -29,6 +36,7 @@ const makeInitialState = (set: any) => { set(projectMetaDataState('rootBotId'), { isRootBot: true, isRemote: false }); set(designPageLocationState('rootBotId'), { dialogId: 'rootBotRootDialogId', focused: 'na', selected: 'na' }); set(localeState('rootBotId'), 'en-us'); + set(settingsState('rootBotId'), { runtime: { key: 'adaptive-runtime-dotnet-webapp' } }); set(recognizersSelectorFamily('rootBotId'), [ { id: 'rootBotRootDialogId.en-us.lu.dialog', content: { $kind: SDKKinds.LuisRecognizer } }, ]); @@ -42,55 +50,153 @@ describe('', () => { }); it('should not open OrchestratorForSkillsDialog if orchestratorForSkillsDialogState is false', () => { - const { baseElement } = renderWithRecoil(, ({ set }) => { + renderWithRecoil(, ({ set }) => { makeInitialState(set); set(orchestratorForSkillsDialogState, false); }); - const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId); + const dialog = screen.queryByTestId(orchestratorTestId); expect(dialog).toBeNull(); }); it('should not open OrchestratorForSkillsDialog if orchestrator already being used in root', () => { - const { baseElement } = renderWithRecoil(, ({ set }) => { + renderWithRecoil(, ({ set }) => { makeInitialState(set); set(recognizersSelectorFamily('rootBotId'), [ { id: 'rootBotRootDialogId.en-us.lu.dialog', content: { $kind: SDKKinds.OrchestratorRecognizer } }, ]); }); - const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId); + const dialog = screen.queryByTestId(orchestratorTestId); expect(dialog).toBeNull(); }); - it('open OrchestratorForSkillsDialog if orchestratorForSkillsDialogState and Orchestrator not used in Root Bot Root Dialog', () => { + it('should not render OrchestratorForSkillsDialog if runtime is not supported', () => { const { baseElement } = renderWithRecoil(, ({ set }) => { makeInitialState(set); + set(settingsState('rootBotId'), { + defaultLanguage: 'en-us', + languages: ['en-us'], + luis: { + authoringEndpoint: '', + name: '', + authoringKey: '', + defaultLanguage: '', + endpoint: '', + endpointKey: '', + environment: '', + }, + qna: { endpointKey: '', subscriptionKey: '' }, + luFeatures: { enableCompositeEntities: false }, + customFunctions: [], + importedLibraries: [], + runtime: { key: 'node-webapp-v1', command: '', path: '', customRuntime: false }, + }); + }); + const dialog = within(baseElement as HTMLElement).queryByTestId(orchestratorTestId); + expect(dialog).toBeNull(); + }); + + it('should not render OrchestratorForSkillsDialog if runtime is missing or invalid', () => { + const { baseElement } = renderWithRecoil(, ({ set }) => { + makeInitialState(set); + set(settingsState('rootBotId'), { + defaultLanguage: 'en-us', + languages: ['en-us'], + luis: { + authoringEndpoint: '', + name: '', + authoringKey: '', + defaultLanguage: '', + endpoint: '', + endpointKey: '', + environment: '', + }, + qna: { endpointKey: '', subscriptionKey: '' }, + luFeatures: { enableCompositeEntities: false }, + customFunctions: [], + importedLibraries: [], + runtime: { key: '', command: '', path: '', customRuntime: false }, + }); + }); + const dialog = within(baseElement as HTMLElement).queryByTestId(orchestratorTestId); + expect(dialog).toBeNull(); + }); + + it('open OrchestratorForSkillsDialog if orchestratorForSkillsDialogState and Orchestrator not used in Root Bot Root Dialog', () => { + renderWithRecoil(, ({ set }) => { + makeInitialState(set); }); - const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId); + const dialog = screen.queryByTestId(orchestratorTestId); expect(dialog).toBeTruthy(); }); it('should install Orchestrator package when user clicks Continue', async () => { + renderWithRecoil(, ({ set }) => { + makeInitialState(set); + }); + + await act(async () => { + userEvent.click(screen.getByTestId('import-orchestrator')); + }); + + expect(importOrchestrator).toBeCalledWith( + 'rootBotId', + { key: 'adaptive-runtime-dotnet-webapp' }, + expect.anything(), + expect.anything() + ); + }); + + it('should install Orchestrator package with adaptive node runtime', async () => { const { baseElement } = renderWithRecoil(, ({ set }) => { makeInitialState(set); + + set(settingsState('rootBotId'), { + defaultLanguage: 'en-us', + languages: ['en-us'], + luis: { + authoringEndpoint: '', + name: '', + authoringKey: '', + defaultLanguage: '', + endpoint: '', + endpointKey: '', + environment: '', + }, + qna: { endpointKey: '', subscriptionKey: '' }, + luFeatures: { enableCompositeEntities: false }, + customFunctions: [], + importedLibraries: [], + runtime: { key: 'adaptive-runtime-js-functions', command: '', path: '', customRuntime: false }, + }); }); await act(async () => { - userEvent.click(within(baseElement).getByTestId('import-orchestrator')); + userEvent.click(within(baseElement as HTMLElement).getByTestId('import-orchestrator')); }); - expect(importOrchestrator).toBeCalledWith('rootBotId', expect.anything(), expect.anything()); + expect(importOrchestrator).toBeCalledWith( + 'rootBotId', + { + key: 'adaptive-runtime-js-functions', + path: expect.anything(), + customRuntime: expect.anything(), + command: expect.anything(), + }, + expect.anything(), + expect.anything() + ); }); it('should not install Orchestrator package when user clicks skip', async () => { - const { baseElement } = renderWithRecoil(, ({ set }) => { + renderWithRecoil(, ({ set }) => { makeInitialState(set); }); await act(async () => { - userEvent.click(await within(baseElement).findByText('Skip')); + userEvent.click(await screen.findByText('Skip')); }); - const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId); + const dialog = screen.queryByTestId(orchestratorTestId); expect(dialog).toBeNull(); expect(importOrchestrator).toBeCalledTimes(0); diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx index 258d3392f7..c7a8949107 100644 --- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx @@ -144,7 +144,7 @@ export const ProjectTree: React.FC = ({ onboardingAddCoachMarkRef, navigateToFormDialogSchema, setPageElementState, - createQnAFromUrlDialogBegin, + createQnADialogBegin, } = useRecoilValue(dispatcherState); const treeRef = useRef(null); @@ -233,7 +233,7 @@ export const ProjectTree: React.FC = ({ label: formatMessage('Add QnA Maker knowledge base'), icon: 'Add', onClick: () => { - createQnAFromUrlDialogBegin({ projectId: skillId, dialogId: dialog.id }); + createQnADialogBegin({ projectId: skillId, dialogId: dialog.id }); TelemetryClient.track('AddNewKnowledgeBaseStarted'); }, }; diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx index d4a575a8c2..e9120b1d8f 100644 --- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx +++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx @@ -4,7 +4,7 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; import React, { useState, useCallback } from 'react'; -import { FontSizes } from '@uifabric/fluent-theme'; +import { FontSizes, FluentTheme } from '@uifabric/fluent-theme'; import { DefaultPalette } from '@uifabric/styling'; import { OverflowSet, IOverflowSetItemProps } from 'office-ui-fabric-react/lib/OverflowSet'; import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip'; @@ -184,7 +184,7 @@ const statusIcon = { const warningIcon = { ...statusIcon, - color: '#BE880A', + color: FluentTheme.palette.yellow, }; const errorIcon = { diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFrom.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFrom.tsx deleted file mode 100644 index c2f7b5d980..0000000000 --- a/Composer/packages/client/src/components/QnA/CreateQnAFrom.tsx +++ /dev/null @@ -1,45 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import React, { useState } from 'react'; -import { useRecoilValue } from 'recoil'; - -import { - createQnAOnState, - showCreateQnAFromScratchDialogState, - showCreateQnAFromUrlDialogState, - settingsState, -} from '../../recoilModel'; - -import CreateQnAFromScratchModal from './CreateQnAFromScratchModal'; -import CreateQnAFromUrlModal from './CreateQnAFromUrlModal'; -import { CreateQnAFromModalProps } from './constants'; - -export const CreateQnAModal: React.FC = (props) => { - const { projectId } = useRecoilValue(createQnAOnState); - const settings = useRecoilValue(settingsState(projectId)); - const locales = settings.languages; - const defaultLocale = settings.defaultLanguage; - const showCreateQnAFromScratchDialog = useRecoilValue(showCreateQnAFromScratchDialogState(projectId)); - const showCreateQnAFromUrlDialog = useRecoilValue(showCreateQnAFromUrlDialogState(projectId)); - const [initialName, setInitialName] = useState(''); - if (showCreateQnAFromScratchDialog) { - return ; - } else if (showCreateQnAFromUrlDialog) { - return ( - - ); - } else { - return null; - } -}; - -export default CreateQnAModal; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFromQnAMaker.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFromQnAMaker.tsx new file mode 100644 index 0000000000..f36a17d815 --- /dev/null +++ b/Composer/packages/client/src/components/QnA/CreateQnAFromQnAMaker.tsx @@ -0,0 +1,53 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { Fragment, useEffect } from 'react'; +import formatMessage from 'format-message'; +import { Stack } from 'office-ui-fabric-react/lib/Stack'; +import { Text } from 'office-ui-fabric-react/lib/Text'; + +import { FieldConfig, useForm } from '../../hooks/useForm'; + +import { validateName, CreateQnAFromFormProps, CreateQnAFromQnAMakerFormData } from './constants'; +import { knowledgeBaseStyle, subText } from './styles'; + +const formConfig: FieldConfig = { + name: { + required: true, + defaultValue: '', + }, +}; + +export const CreateQnAFromQnAMaker: React.FC = (props) => { + const { onChange, qnaFiles, initialName } = props; + + formConfig.name.validate = validateName(qnaFiles); + formConfig.name.defaultValue = initialName || ''; + const { formData, hasErrors } = useForm(formConfig); + + useEffect(() => { + const disabled = hasErrors || !formData.name; + onChange(formData, disabled); + }, [formData]); + + return ( + + + + {formatMessage('Import content from an existing knowledge base on the QnA maker portal')} + + + + {formatMessage( + 'Import content from an existing knowledge base on the QnA maker portal. Your knowledge base will downloaded locally and source knowledge base will remain as-is.' + )} + + + + + ); +}; + +export default CreateQnAFromQnAMaker; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFromScratch.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFromScratch.tsx new file mode 100644 index 0000000000..7a0c70e901 --- /dev/null +++ b/Composer/packages/client/src/components/QnA/CreateQnAFromScratch.tsx @@ -0,0 +1,56 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { Fragment, useEffect } from 'react'; +import formatMessage from 'format-message'; +import { Stack } from 'office-ui-fabric-react/lib/Stack'; +import { TextField } from 'office-ui-fabric-react/lib/TextField'; + +import { FieldConfig, useForm } from '../../hooks/useForm'; + +import { validateName, CreateQnAFromFormProps, CreateQnAFromScratchFormData } from './constants'; +import { textFieldKBNameFromScratch } from './styles'; + +const formConfig: FieldConfig = { + name: { + required: true, + defaultValue: '', + }, +}; + +export const CreateQnAFromScratch: React.FC = (props) => { + const { onChange, qnaFiles, initialName, onUpdateInitialName } = props; + + formConfig.name.validate = validateName(qnaFiles); + formConfig.name.defaultValue = initialName || ''; + const { formData, updateField, hasErrors, formErrors } = useForm(formConfig); + + useEffect(() => { + const disabled = hasErrors || !formData.name; + onChange(formData, disabled); + }, [formData, hasErrors]); + + return ( + + + { + updateField('name', name); + onUpdateInitialName?.(name); + }} + /> + + + ); +}; + +export default CreateQnAFromScratch; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFromScratchModal.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFromScratchModal.tsx deleted file mode 100644 index 19dd8d7236..0000000000 --- a/Composer/packages/client/src/components/QnA/CreateQnAFromScratchModal.tsx +++ /dev/null @@ -1,120 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import React from 'react'; -import { useRecoilValue } from 'recoil'; -import formatMessage from 'format-message'; -import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; -import { Stack } from 'office-ui-fabric-react/lib/Stack'; -import { TextField } from 'office-ui-fabric-react/lib/TextField'; -import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; - -import { FieldConfig, useForm } from '../../hooks/useForm'; -import { dispatcherState, showCreateQnAFromUrlDialogState } from '../../recoilModel'; -import TelemetryClient from '../../telemetry/TelemetryClient'; - -import { validateName, CreateQnAFromModalProps, CreateQnAFromScratchFormData } from './constants'; -import { subText, styles, dialogWindowMini, textFieldKBNameFromScratch } from './styles'; - -const formConfig: FieldConfig = { - name: { - required: true, - defaultValue: '', - }, -}; - -const DialogTitle = () => { - return ( - - {formatMessage('Add QnA Maker knowledge base')} - - {formatMessage('Manually add question and answer pairs to create a knowledge base')} - - - ); -}; - -export const CreateQnAFromScratchModal: React.FC = (props) => { - const { onDismiss, onSubmit, qnaFiles, projectId, initialName, onUpdateInitialName } = props; - const actions = useRecoilValue(dispatcherState); - const showCreateQnAFromUrlDialog = useRecoilValue(showCreateQnAFromUrlDialogState(projectId)); - - formConfig.name.validate = validateName(qnaFiles); - formConfig.name.defaultValue = initialName || ''; - const { formData, updateField, hasErrors, formErrors } = useForm(formConfig); - const disabled = hasErrors || !formData.name; - - const handleDismiss = () => { - onDismiss?.(); - onUpdateInitialName?.(''); - actions.createQnAFromScratchDialogCancel({ projectId }); - TelemetryClient.track('AddNewKnowledgeBaseCanceled'); - }; - - return ( - , - styles: styles.dialog, - }} - hidden={false} - modalProps={{ - isBlocking: false, - styles: styles.modalCreateFromScratch, - }} - onDismiss={handleDismiss} - > - - - { - updateField('name', name); - onUpdateInitialName?.(name); - }} - /> - - - - {showCreateQnAFromUrlDialog && ( - { - actions.createQnAFromScratchDialogBack({ projectId }); - }} - /> - )} - { - handleDismiss(); - }} - /> - { - if (hasErrors) { - return; - } - onSubmit(formData); - onUpdateInitialName?.(''); - TelemetryClient.track('AddNewKnowledgeBaseCompleted', { scratch: true }); - }} - /> - - - ); -}; - -export default CreateQnAFromScratchModal; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFromUrl.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFromUrl.tsx new file mode 100644 index 0000000000..0d7495d44c --- /dev/null +++ b/Composer/packages/client/src/components/QnA/CreateQnAFromUrl.tsx @@ -0,0 +1,149 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { useState, useMemo, Fragment, useEffect } from 'react'; +import formatMessage from 'format-message'; +import { Stack } from 'office-ui-fabric-react/lib/Stack'; +import { TextField } from 'office-ui-fabric-react/lib/TextField'; +import { Text } from 'office-ui-fabric-react/lib/Text'; +import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; +import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown'; + +import { Locales } from '../../locales'; + +import { initializeLocales } from './utilities'; +import { + validateUrl, + CreateQnAFromFormProps, + CreateQnAFromUrlFormData, + CreateQnAFromUrlFormDataErrors, +} from './constants'; +import { textFieldUrl, warning, urlPairStyle, knowledgeBaseStyle, urlStackStyle, subText } from './styles'; + +const hasErrors = (errors: CreateQnAFromUrlFormDataErrors) => { + return !!errors.name || errors.urls.some((e) => !!e); +}; + +export const CreateQnAFromUrl: React.FC = (props) => { + const { onChange, dialogId, locales, defaultLocale, initialName } = props; + + const index = Locales.findIndex((l) => l.locale === locales[0]); + const initialLanguage = index > -1 ? Locales[index].language : locales[0]; + const [formData, setFormData] = useState({ + urls: [], + locales: initializeLocales(locales, defaultLocale), + language: initialLanguage, + name: initialName || '', + multiTurn: false, + }); + + const [formDataErrors, setFormDataErrors] = useState({ + urls: [], + name: '', + }); + + const usedLocales = useMemo(() => { + return locales.map((fl) => { + const index = Locales.findIndex((l) => l.locale === fl); + if (index > -1) { + return { text: Locales[index].language, locale: fl, key: fl }; + } else { + return { text: fl, locale: fl, key: fl }; + } + }); + }, [locales]); + + const isQnAFileselected = !(dialogId === 'all'); + + const onChangeUrlsField = (value: string | undefined) => { + const urls = [...formData.urls]; + urls[0] = value ?? ''; + updateUrlsField(urls); + updateUrlsError(urls); + }; + + const onChangeMultiTurn = (value: boolean | undefined) => { + setFormData({ + ...formData, + multiTurn: value ?? false, + }); + }; + + const updateUrlsField = (urls: string[]) => { + setFormData({ + ...formData, + urls: urls, + }); + }; + + const updateUrlsError = (urls: string[]) => { + const urlErrors = urls.map((url) => { + return validateUrl(url); + }) as string[]; + setFormDataErrors({ ...formDataErrors, urls: urlErrors }); + }; + + const onChangeLanguageField = (option) => { + setFormData({ + ...formData, + language: option.text, + locales: [option.key], + }); + }; + + useEffect(() => { + const disabled = hasErrors(formDataErrors) || !formData.urls[0] || !formData.name; + onChange(formData, disabled); + }, [formData, formDataErrors]); + + return ( + + + {formatMessage('Create new knowledge base from URL')} + + + {formatMessage( + 'Select this option if you want to create a knowledge base from content hosted online such as an FAQ or document link (.csv, .xls or .doc format)' + )} + + + + + {formatMessage('Source URL')} + + onChangeUrlsField(url)} + /> + + { + onChangeLanguageField(o); + }} + /> + + {!isQnAFileselected && ( + {formatMessage('Please select a specific qna file to import QnA')} + )} + + + onChangeMultiTurn(val)} + /> + + + ); +}; + +export default CreateQnAFromUrl; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFromUrlModal.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFromUrlModal.tsx deleted file mode 100644 index 1e12dee3a8..0000000000 --- a/Composer/packages/client/src/components/QnA/CreateQnAFromUrlModal.tsx +++ /dev/null @@ -1,269 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import React, { useState, useMemo } from 'react'; -import { useRecoilValue } from 'recoil'; -import formatMessage from 'format-message'; -import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; -import { Stack } from 'office-ui-fabric-react/lib/Stack'; -import { TextField } from 'office-ui-fabric-react/lib/TextField'; -import { Text } from 'office-ui-fabric-react/lib/Text'; -import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; -import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; -import { Link } from 'office-ui-fabric-react/lib/Link'; - -import { Locales } from '../../locales'; -import { dispatcherState, onCreateQnAFromUrlDialogCompleteState } from '../../recoilModel'; -import TelemetryClient from '../../telemetry/TelemetryClient'; - -import { - knowledgeBaseSourceUrl, - validateUrl, - validateName, - CreateQnAFromUrlModalProps, - CreateQnAFromUrlFormData, - CreateQnAFromUrlFormDataErrors, -} from './constants'; -import { - subText, - styles, - dialogWindow, - textFieldUrl, - textFieldKBNameFromUrl, - warning, - urlPairStyle, - knowledgeBaseStyle, - urlStackStyle, -} from './styles'; - -const DialogTitle = () => { - return ( - - {formatMessage('Add QnA Maker knowledge base')} - - - {formatMessage('Use Azure QnA Maker to extract question-and-answer pairs from an online FAQ. ')} - - {formatMessage('Learn more')} - - - - - ); -}; - -const hasErrors = (errors: CreateQnAFromUrlFormDataErrors) => { - return !!errors.name || errors.urls.some((e) => !!e); -}; - -const initializeLocales = (locales: string[], defaultLocale: string) => { - const newLocales = [...locales]; - const index = newLocales.findIndex((l) => l === defaultLocale); - if (index < 0) throw new Error(`default language ${defaultLocale} does not exist in languages`); - newLocales.splice(index, 1); - newLocales.sort(); - newLocales.unshift(defaultLocale); - return newLocales; -}; - -export const CreateQnAFromUrlModal: React.FC = (props) => { - const { - onDismiss, - onSubmit, - dialogId, - projectId, - qnaFiles, - locales, - defaultLocale, - initialName, - onUpdateInitialName, - } = props; - const actions = useRecoilValue(dispatcherState); - const onComplete = useRecoilValue(onCreateQnAFromUrlDialogCompleteState(projectId)); - - const [formData, setFormData] = useState({ - urls: [], - locales: initializeLocales(locales, defaultLocale), - name: initialName || '', - multiTurn: false, - }); - - const [formDataErrors, setFormDataErrors] = useState({ - urls: [], - name: '', - }); - - const usedLocales = useMemo(() => { - return formData.locales.map((fl) => { - const index = Locales.findIndex((l) => l.locale === fl); - if (index > -1) { - return Locales[index].language; - } - }); - }, [formData.locales]); - - const isQnAFileselected = !(dialogId === 'all'); - const disabled = hasErrors(formDataErrors) || !formData.urls[0] || !formData.name; - const validFormDataName = validateName(qnaFiles); - - const onChangeNameField = (value: string | undefined) => { - updateNameField(value); - onUpdateInitialName?.(value ?? ''); - updateNameError(value); - }; - - const onChangeUrlsField = (value: string | undefined, index: number) => { - const urls = [...formData.urls]; - urls[index] = value ?? ''; - updateUrlsField(urls); - updateUrlsError(urls); - }; - - const onChangeMultiTurn = (value: boolean | undefined) => { - setFormData({ - ...formData, - multiTurn: value ?? false, - }); - }; - - const updateNameField = (value: string | undefined) => { - setFormData({ - ...formData, - name: value ?? '', - }); - }; - - const updateNameError = (value: string | undefined) => { - const error = validFormDataName(value) as string; - setFormDataErrors({ ...formDataErrors, name: error ?? '' }); - }; - - const updateUrlsField = (urls: string[]) => { - setFormData({ - ...formData, - urls: urls, - }); - }; - - const updateUrlsError = (urls: string[]) => { - const urlErrors = urls.map((url) => { - return validateUrl(url); - }) as string[]; - setFormDataErrors({ ...formDataErrors, urls: urlErrors }); - }; - - const handleDismiss = () => { - onDismiss?.(); - onUpdateInitialName?.(''); - actions.createQnAFromUrlDialogCancel({ projectId }); - TelemetryClient.track('AddNewKnowledgeBaseCanceled'); - }; - - const removeEmptyUrls = (formData: CreateQnAFromUrlFormData) => { - const urls: string[] = []; - const locales: string[] = []; - for (let i = 0; i < formData.urls.length; i++) { - if (formData.urls[i]) { - urls.push(formData.urls[i]); - locales.push(formData.locales[i]); - } - } - return { - ...formData, - locales, - urls, - }; - }; - - return ( - , - styles: styles.dialog, - }} - hidden={false} - modalProps={{ - isBlocking: false, - styles: styles.modalCreateFromUrl, - }} - onDismiss={handleDismiss} - > - - - onChangeNameField(name)} - /> - {formatMessage('FAQ website (source)')} - {formData.locales.map((locale, i) => { - return ( - - onChangeUrlsField(url, i)} - /> - - ); - })} - - {!isQnAFileselected && ( - {formatMessage('Please select a specific qna file to import QnA')} - )} - - - onChangeMultiTurn(val)} - /> - - - - { - // switch to create from scratch flow, pass onComplete callback. - actions.createQnAFromScratchDialogBegin({ projectId, dialogId, onComplete: onComplete?.func }); - }} - /> - { - handleDismiss(); - }} - /> - { - if (hasErrors(formDataErrors)) { - return; - } - onSubmit(removeEmptyUrls(formData)); - onUpdateInitialName?.(''); - TelemetryClient.track('AddNewKnowledgeBaseCompleted', { scratch: false }); - }} - /> - - - ); -}; - -export default CreateQnAFromUrlModal; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAModal.tsx b/Composer/packages/client/src/components/QnA/CreateQnAModal.tsx new file mode 100644 index 0000000000..83ffbbc86e --- /dev/null +++ b/Composer/packages/client/src/components/QnA/CreateQnAModal.tsx @@ -0,0 +1,683 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { Fragment, useEffect, useMemo, useState } from 'react'; +import { useRecoilValue } from 'recoil'; +import formatMessage from 'format-message'; +import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; +import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup'; +import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; +import { Link } from 'office-ui-fabric-react/lib/Link'; +import { + DetailsList, + SelectionMode, + DetailsListLayoutMode, + IColumn, + Selection, + DetailsRow, + IDetailsRowProps, + CheckboxVisibility, +} from 'office-ui-fabric-react/lib/DetailsList'; +import { Spinner } from 'office-ui-fabric-react/lib/Spinner'; +import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown'; +import { SubscriptionClient } from '@azure/arm-subscriptions'; +import { Subscription } from '@azure/arm-subscriptions/esm/models'; +import { TokenCredentials } from '@azure/ms-rest-js'; +import { CognitiveServicesManagementClient } from '@azure/arm-cognitiveservices'; +import { CognitiveServicesCredentials } from '@azure/ms-rest-azure-js'; +import { QnAMakerClient } from '@azure/cognitiveservices-qnamaker'; +import sortBy from 'lodash/sortBy'; +import uniq from 'lodash/uniq'; +import { NeutralColors } from '@uifabric/fluent-theme'; +import { IRenderFunction } from '@uifabric/utilities'; + +import TelemetryClient from '../../telemetry/TelemetryClient'; +import { + createQnAOnState, + showCreateQnADialogState, + settingsState, + dispatcherState, + localeState, + currentUserState, + isAuthenticatedState, + showAuthDialogState, +} from '../../recoilModel'; + +import { CreateQnAFormData, CreateQnAModalProps, QnAMakerLearnMoreUrl } from './constants'; +import { + subText, + styles, + contentBox, + formContainer, + choiceContainer, + nameStepContainer, + resourceDropdown, + dialogBodyStyles, +} from './styles'; +import { CreateQnAFromUrl } from './CreateQnAFromUrl'; +import { CreateQnAFromScratch } from './CreateQnAFromScratch'; +import { CreateQnAFromQnAMaker } from './CreateQnAFromQnAMaker'; +import { localeToLanguage } from './utilities'; +import { PersonaCard } from './PersonaCard'; + +type KeyRec = { + name: string; + region: string; + resourceGroup: string; + key: string; + endpoint: string; +}; + +type KBRec = { + id: string; + name: string; + language: string; + lastChangedTimestamp: string; +}; + +type Step = 'name' | 'intro' | 'resource' | 'knowledge-base' | 'outcome'; + +const mainElementStyle = { marginBottom: 20 }; +const serviceName = 'QnA Maker'; +const serviceKeyType = 'QnAMaker'; + +export const CreateQnAModal: React.FC = (props) => { + const { onDismiss, onSubmit } = props; + const { projectId } = useRecoilValue(createQnAOnState); + const settings = useRecoilValue(settingsState(projectId)); + const actions = useRecoilValue(dispatcherState); + const locales = settings.languages; + const defaultLocale = settings.defaultLanguage; + const currentLocale = useRecoilValue(localeState(projectId)); + const showCreateQnAFrom = useRecoilValue(showCreateQnADialogState(projectId)); + const [initialName, setInitialName] = useState(''); + const [formData, setFormData] = useState(); + const [disabled, setDisabled] = useState(true); + const { setApplicationLevelError, requireUserLogin } = useRecoilValue(dispatcherState); + const currentUser = useRecoilValue(currentUserState); + const isAuthenticated = useRecoilValue(isAuthenticatedState); + const showAuthDialog = useRecoilValue(showAuthDialogState); + + const [subscriptionId, setSubscription] = useState(''); + + const [loading, setLoading] = useState(undefined); + const [noKeys, setNoKeys] = useState(false); + const [nextAction, setNextAction] = useState('url'); + const [key, setKey] = useState(); + const [region, setRegion] = useState(''); + const [availableSubscriptions, setAvailableSubscriptions] = useState([]); + const [subscriptionsErrorMessage, setSubscriptionsErrorMessage] = useState(); + const [keys, setKeys] = useState([]); + const [kbs, setKbs] = useState<{ [key: string]: KBRec[] }>({}); + const [selectedKb, setSelectedKb] = useState(); + const [dialogTitle, setDialogTitle] = useState(''); + + const [currentStep, setCurrentStep] = useState('name'); + + const currentAuthoringLanuage = localeToLanguage(currentLocale); + const defaultLanuage = localeToLanguage(defaultLocale); + const avaliableLanguages = uniq(locales.map((item) => localeToLanguage(item))); + + const actionOptions: IChoiceGroupOption[] = [ + { key: 'url', text: formatMessage('Create new knowledge base from URL') }, + { + key: 'portal', + text: formatMessage('Import existing knowledge base from QnA maker portal'), + }, + ]; + + /* Copied from Azure Publishing extension */ + const getSubscriptions = async (token: string): Promise> => { + const tokenCredentials = new TokenCredentials(token); + try { + const subscriptionClient = new SubscriptionClient(tokenCredentials); + const subscriptionsResult = await subscriptionClient.subscriptions.list(); + // eslint-disable-next-line no-underscore-dangle + return sortBy(subscriptionsResult._response.parsedBody, ['displayName']); + } catch (err) { + setApplicationLevelError(err); + return []; + } + }; + + const selectedKB = useMemo(() => { + return new Selection({ + onSelectionChanged: () => { + const t = selectedKB.getSelection()[0] as KBRec; + + if (t) { + setSelectedKb(t); + } + }, + }); + }, []); + + useEffect(() => { + if (isAuthenticated && showCreateQnAFrom) { + setAvailableSubscriptions([]); + setSubscriptionsErrorMessage(undefined); + getSubscriptions(currentUser.token) + .then((data) => { + setAvailableSubscriptions(data); + if (data.length === 0) { + setSubscriptionsErrorMessage( + formatMessage( + 'Your subscription list is empty, please add your subscription, or login with another account.' + ) + ); + } + }) + .catch((err) => { + setSubscriptionsErrorMessage(err.message); + }); + } + }, [currentUser, isAuthenticated, showCreateQnAFrom]); + + useEffect(() => { + // reset the ui + setSubscription(''); + setKeys([]); + setCurrentStep('name'); + setSelectedKb(undefined); + setKbs({}); + }, [showCreateQnAFrom]); + + const fetchKeys = async (cognitiveServicesManagementClient, accounts) => { + const keyList: KeyRec[] = []; + for (const account in accounts) { + const resourceGroup = accounts[account].id?.replace(/.*?\/resourceGroups\/(.*?)\/.*/, '$1'); + const name = accounts[account].name; + if (resourceGroup && name) { + try { + const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroup, name); + if (keys?.key1) { + keyList.push({ + name, + resourceGroup, + region: accounts[account].location || '', + key: keys?.key1 || '', + endpoint: accounts[account]?.properties?.endpoint ?? '', + }); + } + } catch (_err) { + // pass, filter no authorization resource + } + } + } + return keyList; + }; + + const fetchAccounts = async (subscriptionId) => { + if (isAuthenticated) { + setLoading(formatMessage('Loading keys...')); + setNoKeys(false); + const tokenCredentials = new TokenCredentials(currentUser.token); + const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId); + const accounts = await cognitiveServicesManagementClient.accounts.list(); + + const keylist: KeyRec[] = await fetchKeys( + cognitiveServicesManagementClient, + accounts.filter((a) => a.kind === serviceKeyType) + ); + + const kbsMap = {}; + const avaliableKeys: KeyRec[] = []; + for (const keyItem of keylist) { + const kbGroups = await fetchKBGroups(keyItem); + kbsMap[keyItem.name] = kbGroups; + if (kbGroups.length) { + avaliableKeys.push(keyItem); + } + } + setKbs(kbsMap); + setLoading(undefined); + if (avaliableKeys.length == 0) { + setNoKeys(true); + } else { + setNoKeys(false); + setKeys(avaliableKeys); + } + } + }; + + const fetchKBGroups = async (key: KeyRec) => { + let kblist: KBRec[] = []; + if (isAuthenticated && key) { + const cognitiveServicesCredentials = new CognitiveServicesCredentials(key.key); + const resourceClient = new QnAMakerClient(cognitiveServicesCredentials, key.endpoint); + + const result = await resourceClient.knowledgebase.listAll(); + + if (result.knowledgebases) { + kblist = result.knowledgebases.map((item: any) => { + return { + id: item.id || '', + name: item.name || '', + language: item.language || '', + lastChangedTimestamp: item.lastChangedTimestamp || '', + }; + }); + } + } + return kblist; + }; + // allow a user to provide a subscription id if one is missing + const onChangeSubscription = async (_, opt) => { + // get list of keys for this subscription + setSubscription(opt.key); + fetchAccounts(opt.key); + setLoading(formatMessage('Loading subscription...')); + }; + + const onChangeKey = async (_, opt) => { + // get list of keys for this subscription + setKey(opt); + setRegion(opt.region); + }; + + const onChangeAction = async (_, opt) => { + setNextAction(opt.key); + }; + + const chooseExistingKey = () => { + TelemetryClient.track('SettingsGetKeysExistingResourceSelected', { + subscriptionId, + resourceType: serviceName, + }); + setCurrentStep('knowledge-base'); + }; + + const performNextAction = () => { + if (nextAction === 'url') { + onSubmitFormData(nextAction); + } else { + requireUserLogin(); + setCurrentStep('resource'); + } + }; + + const renderNameStep = () => { + return ( + + + + + {formatMessage('Use Azure QnA Maker to extract question-and-answer pairs from an online FAQ. ')} + + {formatMessage('Learn more')} + + + + + + + setCurrentStep('intro')} + /> + + + + ); + }; + + const renderIntroStep = () => { + return ( + + + + {formatMessage('Create a knowledge base from a URL or import content from an existing knowledge base')} + + + + + + + + {nextAction === 'url' ? ( + + ) : ( + + )} + + + + onSubmitFormData('scratch')} + /> + setCurrentStep('name')} /> + + + + + ); + }; + + const renderChooseResourceStep = () => { + return ( + + + + {formatMessage('Select the subscription and resource you want to choose a knowledge base from')} + + + 0)} + errorMessage={subscriptionsErrorMessage} + label={formatMessage('Azure subscription')} + options={ + availableSubscriptions + ?.filter((p) => p.subscriptionId && p.displayName) + .map((p) => { + return { key: p.subscriptionId ?? '', text: p.displayName ?? formatMessage('Unnamed') }; + }) ?? [] + } + placeholder={formatMessage('Select a subscription')} + selectedKey={subscriptionId} + styles={resourceDropdown} + onChange={onChangeSubscription} + /> + + + {noKeys && subscriptionId && ( + + {formatMessage( + 'No existing QnA Maker resources were found in this subscription. Select a different subscription, or click “Back” to create a new resource or generate a resource request to handoff to your Azure admin.' + )} + + )} + {!noKeys && subscriptionId && ( + + 0)} + label={formatMessage('QnA Maker resource name')} + options={ + keys.map((p) => { + return { text: p.name, ...p }; + }) ?? [] + } + placeholder={formatMessage('Select resource')} + styles={resourceDropdown} + onChange={onChangeKey} + /> + + )} + + + + + + + {loading && } + setCurrentStep('intro')} /> + + + + + ); + }; + + const renderKnowledgeBaseSelectionStep = () => { + const columns: IColumn[] = [ + { + key: 'column2', + name: 'Name', + fieldName: 'name', + minWidth: 50, + maxWidth: 350, + isRowHeader: true, + isResizable: true, + isSorted: true, + isSortedDescending: false, + sortAscendingAriaLabel: 'Sorted A to Z', + sortDescendingAriaLabel: 'Sorted Z to A', + data: 'string', + isPadded: true, + }, + { + key: 'column3', + name: 'Last modified', + fieldName: 'lastModified', + minWidth: 200, + maxWidth: 300, + isResizable: true, + data: 'string', + isPadded: true, + onRender: (item) => { + const dt = new Date(item.lastChangedTimestamp); + return ( + + {' '} + {dt.toDateString()} {dt.toLocaleTimeString()}{' '} + + ); + }, + }, + { + key: 'column4', + name: 'Language', + fieldName: 'language', + minWidth: 100, + maxWidth: 200, + isResizable: true, + isCollapsible: true, + data: 'string', + isPadded: true, + }, + ]; + + const currentLanguageKbs: KBRec[] = []; + const defaultLanuageKbs: KBRec[] = []; + const avaliableLanguageKbs: KBRec[] = []; + const disabledLanguageKbs: KBRec[] = []; + + const currentKbs = key ? kbs[key.name] : []; + currentKbs.forEach((item) => { + if (item.language === currentAuthoringLanuage) { + currentLanguageKbs.push(item); + } else if (item.language === defaultLanuage) { + defaultLanuageKbs.push(item); + } else if (avaliableLanguages.includes(item.language)) { + avaliableLanguageKbs.push(item); + } else { + disabledLanguageKbs.push(item); + } + }); + + const sortedKbs = [...currentLanguageKbs, ...defaultLanuageKbs, ...avaliableLanguageKbs, ...disabledLanguageKbs]; + + const onRenderRow: IRenderFunction = (props) => { + if (!props) return null; + if (avaliableLanguages.includes(props.item.language)) { + return ; + } else { + return ( + + + + ); + } + }; + + return ( + + + + {formatMessage('Select one or more knowledge base to import into your bot project')} + + + item.name} + items={sortedKbs} + layoutMode={DetailsListLayoutMode.justified} + selection={selectedKB} + selectionMode={SelectionMode.single} + onRenderRow={onRenderRow} + /> + + + + {loading && } + setCurrentStep('resource')} /> + + + + + ); + }; + + const renderCurrentStep = () => { + switch (currentStep) { + case 'name': + return renderNameStep(); + case 'intro': + return renderIntroStep(); + case 'resource': { + if (nextAction === 'portal') { + return renderChooseResourceStep(); + } + break; + } + case 'knowledge-base': + return renderKnowledgeBaseSelectionStep(); + default: + return null; + } + }; + + useEffect(() => { + switch (currentStep) { + case 'name': + setDialogTitle(formatMessage('Add QnA Maker knowledge base')); + break; + case 'intro': + setDialogTitle(formatMessage(`Select a source for your knowledge base's content`)); + break; + case 'resource': + if (nextAction === 'portal') { + setDialogTitle(formatMessage('Select source knowledge base location')); + } + break; + case 'knowledge-base': + setSelectedKb(undefined); + setDialogTitle(formatMessage('Choose a knowledge base to import')); + break; + } + }, [currentStep]); + + const handleDismiss = () => { + onDismiss?.(); + setInitialName(''); + actions.createQnADialogCancel({ projectId }); + TelemetryClient.track('AddNewKnowledgeBaseCanceled'); + }; + + const onFormDataChange = (data, disabled) => { + setFormData(data); + setDisabled(disabled); + }; + + const onSubmitFormData = (createFrom: string) => { + if (!formData) return; + if (createFrom === 'url' && disabled) return; + + onSubmit(formData); + setInitialName(''); + TelemetryClient.track('AddNewKnowledgeBaseCompleted', { source: formData.urls?.length ? 'url' : 'none' }); + }; + + const onSubmitImportKB = async () => { + if (key && isAuthenticated && selectedKb && formData) { + // TODO: add to all matched language or ask user for specific locale. + const createdOnLocales = locales.filter((item) => localeToLanguage(item) === selectedKb.language); + onSubmit({ + ...formData, + locales: createdOnLocales, + endpoint: key.endpoint, + kbId: selectedKb.id, + kbName: selectedKb.name, + subscriptionKey: key.key, + }); + setInitialName(''); + TelemetryClient.track('AddNewKnowledgeBaseCompleted', { source: 'kb' }); + } + }; + + return ( + + {} : handleDismiss} + > + {renderCurrentStep()} + + + ); +}; + +export default CreateQnAModal; diff --git a/Composer/packages/client/src/components/QnA/EditQnAFromScratchModal.tsx b/Composer/packages/client/src/components/QnA/EditQnAFromScratchModal.tsx index d1f39a0090..30161fba45 100644 --- a/Composer/packages/client/src/components/QnA/EditQnAFromScratchModal.tsx +++ b/Composer/packages/client/src/components/QnA/EditQnAFromScratchModal.tsx @@ -40,7 +40,7 @@ const formConfig: FieldConfig = { }; const DialogTitle = () => { - return {formatMessage('Edit KB name')}; + return {formatMessage('Edit knowledge base name')}; }; export const EditQnAFromScratchModal: React.FC = (props) => { diff --git a/Composer/packages/client/src/components/QnA/EditQnAFromUrlModal.tsx b/Composer/packages/client/src/components/QnA/EditQnAFromUrlModal.tsx index d787ad230b..0012a524f5 100644 --- a/Composer/packages/client/src/components/QnA/EditQnAFromUrlModal.tsx +++ b/Composer/packages/client/src/components/QnA/EditQnAFromUrlModal.tsx @@ -46,7 +46,7 @@ const formConfig: FieldConfig = { }; const DialogTitle = () => { - return {formatMessage('Edit KB name')}; + return {formatMessage('Edit knowledge base name')}; }; export const EditQnAFromUrlModal: React.FC = (props) => { diff --git a/Composer/packages/client/src/components/QnA/ImportQnAFromUrl.tsx b/Composer/packages/client/src/components/QnA/ImportQnAFromUrl.tsx new file mode 100644 index 0000000000..179fdd5778 --- /dev/null +++ b/Composer/packages/client/src/components/QnA/ImportQnAFromUrl.tsx @@ -0,0 +1,108 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { useEffect } from 'react'; +import formatMessage from 'format-message'; +import { Stack } from 'office-ui-fabric-react/lib/Stack'; +import { TextField } from 'office-ui-fabric-react/lib/TextField'; +import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; +import { QnAFile } from '@bfc/shared'; + +import { FieldConfig, useForm } from '../../hooks/useForm'; +import { getQnAFileUrlOption, getQnAFileMultiTurnOption } from '../../utils/qnaUtil'; +import { getExtension } from '../../utils/fileUtil'; +import { Locales } from '../../locales'; + +import { validateUrl } from './constants'; +import { header, titleStyle, descriptionStyle, dialogWindow, textFieldKBNameFromScratch } from './styles'; + +type ImportQnAFromUrlModalProps = { + qnaFile: QnAFile; + onChange: (data, disabled: boolean) => void; +}; + +export type ImportQnAFromUrlFormData = { + url: string; + multiTurn: boolean; +}; + +const formConfig: FieldConfig = { + url: { + required: true, + defaultValue: '', + }, + multiTurn: { + defaultValue: false, + }, +}; + +const title = {formatMessage('Replace knowledge base from URL')}; + +const description = ( + + {formatMessage( + 'Select this option if you want to replace current knowledge base from content hosted online such as an FAQ or document link (.csv, .xls or .doc format)' + )} + +); + +export const ImportQnAFromUrl: React.FC = (props) => { + const { qnaFile, onChange } = props; + const locale = getExtension(qnaFile.id); + formConfig.url.validate = validateUrl; + formConfig.url.defaultValue = getQnAFileUrlOption(qnaFile); + formConfig.multiTurn.defaultValue = getQnAFileMultiTurnOption(qnaFile); + const { formData, updateField, formErrors, hasErrors } = useForm(formConfig); + + const getLanguage = (locale) => { + const index = Locales.findIndex((l) => l.locale === locale); + if (index > -1) { + return Locales[index].language; + } + }; + + const updateUrl = (url = '') => { + updateField('url', url); + }; + + const updateMultiTurn = (multiTurn = false) => { + updateField('multiTurn', multiTurn); + }; + + useEffect(() => { + onChange(formData, hasErrors); + }, [formData, hasErrors]); + + return ( + + + + {title} + {description} + + + updateUrl(url)} + /> + + + updateMultiTurn(val)} + /> + + + ); +}; + +export default ImportQnAFromUrl; diff --git a/Composer/packages/client/src/components/QnA/ImportQnAFromUrlModal.tsx b/Composer/packages/client/src/components/QnA/ImportQnAFromUrlModal.tsx index 27c10a7d90..d031e7dec8 100644 --- a/Composer/packages/client/src/components/QnA/ImportQnAFromUrlModal.tsx +++ b/Composer/packages/client/src/components/QnA/ImportQnAFromUrlModal.tsx @@ -78,7 +78,7 @@ export const ImportQnAFromUrlModal: React.FC = (prop { + const currentUser = useRecoilValue(currentUserState); + const isAuthenticated = useRecoilValue(isAuthenticatedState); + + const { logoutUser } = useRecoilValue(dispatcherState); + + const onLogout = async () => { + const confirmed = await OpenConfirmModal( + formatMessage('Sign out of Azure'), + formatMessage( + 'By signing out of Azure, your operation will be canceled and this dialog will close. Do you want to continue?' + ), + { + onRenderContent: (subtitle: string) => {subtitle}, + confirmText: formatMessage('Sign out'), + cancelText: formatMessage('Cancel'), + } + ); + if (confirmed) { + await logoutUser(); + } + }; + + const onRenderSecondaryText: IRenderFunction = (props) => { + if (!props) return null; + return ( + + {props.secondaryText} + + ); + }; + + return isAuthenticated && currentUser ? ( + + ) : null; +}; diff --git a/Composer/packages/client/src/components/QnA/ReplaceQnAFromModal.tsx b/Composer/packages/client/src/components/QnA/ReplaceQnAFromModal.tsx new file mode 100644 index 0000000000..f623f40be5 --- /dev/null +++ b/Composer/packages/client/src/components/QnA/ReplaceQnAFromModal.tsx @@ -0,0 +1,605 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { Fragment, useEffect, useMemo, useState } from 'react'; +import { useRecoilValue } from 'recoil'; +import formatMessage from 'format-message'; +import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; +import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup'; +import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; +import { + DetailsList, + SelectionMode, + DetailsListLayoutMode, + IColumn, + Selection, + IDetailsRowProps, + DetailsRow, + CheckboxVisibility, +} from 'office-ui-fabric-react/lib/DetailsList'; +import { Spinner } from 'office-ui-fabric-react/lib/Spinner'; +import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown'; +import { SubscriptionClient } from '@azure/arm-subscriptions'; +import { Subscription } from '@azure/arm-subscriptions/esm/models'; +import { TokenCredentials } from '@azure/ms-rest-js'; +import { CognitiveServicesManagementClient } from '@azure/arm-cognitiveservices'; +import { CognitiveServicesCredentials } from '@azure/ms-rest-azure-js'; +import { QnAMakerClient } from '@azure/cognitiveservices-qnamaker'; +import sortBy from 'lodash/sortBy'; +import { NeutralColors } from '@uifabric/fluent-theme'; +import { IRenderFunction } from '@uifabric/utilities'; + +import TelemetryClient from '../../telemetry/TelemetryClient'; +import { getKBName, getFileLocale } from '../../utils/qnaUtil'; +import { dispatcherState, currentUserState, isAuthenticatedState, showAuthDialogState } from '../../recoilModel'; + +import { localeToLanguage } from './utilities'; +import { ReplaceQnAModalFormData, ReplaceQnAModalProps } from './constants'; +import { + styles, + subText, + contentBox, + formContainer, + choiceContainer, + titleStyle, + descriptionStyle, + resourceDropdown, + dialogBodyStyles, +} from './styles'; +import { ImportQnAFromUrl } from './ImportQnAFromUrl'; +import { PersonaCard } from './PersonaCard'; + +type KeyRec = { + name: string; + region: string; + resourceGroup: string; + key: string; + endpoint: string; +}; + +type KBRec = { + name: string; + language: string; + id: string; + lastChangedTimestamp: string; +}; + +type Step = 'intro' | 'resource' | 'knowledge-base' | 'outcome'; + +const mainElementStyle = { marginBottom: 20 }; +const serviceName = 'QnA Maker'; +const serviceKeyType = 'QnAMaker'; + +export const ReplaceQnAFromModal: React.FC = (props) => { + const { onDismiss, onSubmit, hidden, qnaFile, projectId, containerId } = props; + const actions = useRecoilValue(dispatcherState); + const [formData, setFormData] = useState(); + const [disabled, setDisabled] = useState(true); + const { setApplicationLevelError, requireUserLogin } = useRecoilValue(dispatcherState); + const currentUser = useRecoilValue(currentUserState); + const isAuthenticated = useRecoilValue(isAuthenticatedState); + const showAuthDialog = useRecoilValue(showAuthDialogState); + + const [subscriptionId, setSubscription] = useState(''); + const [loading, setLoading] = useState(undefined); + const [noKeys, setNoKeys] = useState(false); + const [nextAction, setNextAction] = useState('url'); + const [key, setKey] = useState(); + const [region, setRegion] = useState(''); + const [availableSubscriptions, setAvailableSubscriptions] = useState([]); + const [subscriptionsErrorMessage, setSubscriptionsErrorMessage] = useState(); + const [keys, setKeys] = useState([]); + const [kbs, setKbs] = useState<{ [key: string]: KBRec[] }>({}); + + const [selectedKb, setSelectedKb] = useState(); + const [dialogTitle, setDialogTitle] = useState(''); + + const [currentStep, setCurrentStep] = useState('intro'); + + const currentLocale = getFileLocale(containerId); + const currentAuthoringLanuage = localeToLanguage(currentLocale); + + const actionOptions: IChoiceGroupOption[] = [ + { key: 'url', text: formatMessage('Replace knowledge base from URL') }, + { + key: 'portal', + text: formatMessage('Replace with an existing knowledge base from QnA maker portal'), + }, + ]; + + /* Copied from Azure Publishing extension */ + const getSubscriptions = async (token: string): Promise> => { + const tokenCredentials = new TokenCredentials(token); + try { + const subscriptionClient = new SubscriptionClient(tokenCredentials); + const subscriptionsResult = await subscriptionClient.subscriptions.list(); + // eslint-disable-next-line no-underscore-dangle + return sortBy(subscriptionsResult._response.parsedBody, ['displayName']); + } catch (err) { + setApplicationLevelError(err); + return []; + } + }; + + const selectedKB = useMemo(() => { + return new Selection({ + onSelectionChanged: () => { + const t = selectedKB.getSelection()[0] as KBRec; + + if (t) { + setSelectedKb(t); + } + }, + }); + }, []); + + useEffect(() => { + if (isAuthenticated && !hidden) { + setAvailableSubscriptions([]); + setSubscriptionsErrorMessage(undefined); + getSubscriptions(currentUser.token) + .then((data) => { + setAvailableSubscriptions(data); + if (data.length === 0) { + setSubscriptionsErrorMessage( + formatMessage( + 'Your subscription list is empty, please add your subscription, or login with another account.' + ) + ); + } + }) + .catch((err) => { + setSubscriptionsErrorMessage(err.message); + }); + } + }, [currentUser, isAuthenticated, hidden]); + + useEffect(() => { + // reset the ui + if (!hidden) { + setSubscription(''); + setKeys([]); + setCurrentStep('intro'); + } + }, [hidden]); + + const fetchKeys = async (cognitiveServicesManagementClient, accounts) => { + const keyList: KeyRec[] = []; + for (const account in accounts) { + const resourceGroup = accounts[account].id?.replace(/.*?\/resourceGroups\/(.*?)\/.*/, '$1'); + const name = accounts[account].name; + if (resourceGroup && name) { + try { + const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroup, name); + if (keys?.key1) { + keyList.push({ + name: name, + resourceGroup: resourceGroup, + region: accounts[account].location || '', + key: keys?.key1 || '', + endpoint: accounts[account]?.properties?.endpoint ?? '', + }); + } + } catch (_err) { + // pass, filter no authorization resource + } + } + } + return keyList; + }; + + const fetchAccounts = async (subscriptionId) => { + if (isAuthenticated) { + setLoading(formatMessage('Loading keys...')); + setNoKeys(false); + const tokenCredentials = new TokenCredentials(currentUser.token); + const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId); + const accounts = await cognitiveServicesManagementClient.accounts.list(); + const keylist: KeyRec[] = await fetchKeys( + cognitiveServicesManagementClient, + accounts.filter((a) => a.kind === serviceKeyType) + ); + + const kbsMap = {}; + const avaliableKeys: KeyRec[] = []; + for (const keyItem of keylist) { + const kbGroups = await fetchKBGroups(keyItem); + kbsMap[keyItem.name] = kbGroups; + if (kbGroups.length) { + avaliableKeys.push(keyItem); + } + } + setKbs(kbsMap); + setLoading(undefined); + if (avaliableKeys.length == 0) { + setNoKeys(true); + } else { + setNoKeys(false); + setKeys(avaliableKeys); + } + } + }; + + const fetchKBGroups = async (key: KeyRec) => { + let kblist: KBRec[] = []; + if (isAuthenticated && key) { + const cognitiveServicesCredentials = new CognitiveServicesCredentials(key.key); + const resourceClient = new QnAMakerClient(cognitiveServicesCredentials, key.endpoint); + const result = await resourceClient.knowledgebase.listAll(); + if (result.knowledgebases) { + kblist = result.knowledgebases.map((item: any) => { + return { + id: item.id || '', + name: item.name || '', + language: item.language || '', + lastChangedTimestamp: item.lastChangedTimestamp || '', + }; + }); + } + } + return kblist; + }; + + // allow a user to provide a subscription id if one is missing + const onChangeSubscription = async (_, opt) => { + // get list of keys for this subscription + setSubscription(opt.key); + fetchAccounts(opt.key); + setLoading(formatMessage('Loading subscription...')); + }; + + const onChangeKey = async (_, opt) => { + // get list of keys for this subscription + setKey(opt); + setRegion(opt.region); + }; + + const onChangeAction = async (_, opt) => { + setNextAction(opt.key); + if (opt.key === 'url') { + setDisabled(true); + } else { + setDisabled(false); + } + }; + + const chooseExistingKey = () => { + TelemetryClient.track('SettingsGetKeysExistingResourceSelected', { + subscriptionId, + resourceType: serviceName, + }); + setCurrentStep('knowledge-base'); + }; + + const performNextAction = () => { + if (nextAction !== 'portal') { + onSubmitFormData(); + } else { + requireUserLogin(); + setCurrentStep('resource'); + } + }; + + const renderIntroStep = () => { + return ( + + + + {formatMessage('Create a knowledge base from a URL or import content from an existing knowledge base')} + + + + + + + + {nextAction === 'url' ? ( + qnaFile && + ) : ( + +
{props.introText} {props.learnMore ? ( - + {formatMessage('Learn more')} ) : null} @@ -557,10 +477,9 @@ export const ManageService = (props: ManageServiceProps) => {
- {formatMessage( - 'Select your Azure directory, then choose the subscription where your existing {service} resource is located.', - { service: props.serviceName } - )} + {formatMessage('Choose the subscription where your existing {service} resource is located.', { + service: props.serviceName, + })} {props.learnMore ? ( {formatMessage('Learn more')} @@ -570,18 +489,7 @@ export const ManageService = (props: ManageServiceProps) => {
- {formatMessage( - 'Select your Azure directory, then choose the subscription where you’d like your new {service} resource.', - { service: props.serviceName } - )} + {formatMessage('Choose the subscription where you’d like your new {service} resource.', { + service: props.serviceName, + })} {props.learnMore ? ( {formatMessage('Learn more')} @@ -787,18 +698,7 @@ export const ManageService = (props: ManageServiceProps) => {
{formatMessage.rich('Install ngrok and run the following command to continue', { a: ({ children }) => ( @@ -82,16 +56,11 @@ export const TunnelingSetupNotification: React.FC = (props) => { ), })}
{ describe('', () => { it('should render the NotificationCard', () => { const cardProps: CardProps = { - title: 'There was error creating your KB', + title: 'There was error creating your knowledge base', description: 'error', retentionTime: 1, type: 'error', @@ -29,12 +29,12 @@ describe('', () => { ); - expect(container).toHaveTextContent('There was error creating your KB'); + expect(container).toHaveTextContent('There was error creating your knowledge base'); }); it('should render the customized card', () => { const cardProps: CardProps = { - title: 'There was error creating your KB', + title: 'There was error creating your knowledge base', description: 'error', retentionTime: 5000, type: 'error', diff --git a/Composer/packages/client/src/components/Notifications/__tests__/useSurveyNotification.test.tsx b/Composer/packages/client/src/components/Notifications/__tests__/useSurveyNotification.test.tsx new file mode 100644 index 0000000000..a256342f16 --- /dev/null +++ b/Composer/packages/client/src/components/Notifications/__tests__/useSurveyNotification.test.tsx @@ -0,0 +1,142 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import React from 'react'; + +import { renderWithRecoil } from '../../../../__tests__/testUtils'; +import { NotificationContainer } from '../NotificationContainer'; +import { useSurveyNotification } from '../useSurveyNotification'; +import { machineInfoState } from '../../../recoilModel'; +import { ClientStorage } from '../../../utils/storage'; +import { LAST_SURVEY_KEY } from '../../../constants'; + +let savedVersion: string | undefined = ''; +const MOCK_VERSION = '2.3.4_jest'; + +let surveyStorage: ClientStorage; + +beforeAll(() => { + process.env.NODE_ENV = 'jest'; + savedVersion = process.env.COMPOSER_VERSION; + process.env.COMPOSER_VERSION = MOCK_VERSION; + + surveyStorage = new ClientStorage(window.localStorage, 'survey'); +}); + +afterAll(() => { + process.env.NODE_ENV = 'test'; + process.env.COMPOSER_VERSION = savedVersion; +}); + +describe('useSurveyNotification', () => { + const id = 'machineID12345'; + const os = 'TestOS'; + + const mockOpen = jest.fn(); + + const initRecoilState = ({ set }) => { + set(machineInfoState, { os, id }); + }; + + window.open = mockOpen; + + const TestHarness = () => { + useSurveyNotification(); + return ; + }; + + describe('building the URL', () => { + beforeEach(() => { + surveyStorage.set('optedOut', false); + surveyStorage.set('days', 12345); + surveyStorage.set(LAST_SURVEY_KEY, null); + }); + + it('builds a URL given parameters', async () => { + const page = renderWithRecoil(, initRecoilState); + + const surveyButton = await page.findByText('Take survey'); + surveyButton.click(); + + // We know these should all occur, but we don't care about the order + const patterns = [ + 'https://aka.ms/bfcomposersurvey', + 'Source=Composer', + `machineId=${id}`, + `os=${os}`, + `version=${MOCK_VERSION}`, + ]; + + for (const pattern of patterns) { + expect(mockOpen).toHaveBeenCalledWith(expect.stringContaining(pattern), '_blank'); + } + }); + + it('builds a URL given no OS', async () => { + const newRecoilState = ({ set }) => { + set(machineInfoState, { os: null, id }); + }; + + const page = renderWithRecoil(, newRecoilState); + + const surveyButton = await page.findByText('Take survey'); + surveyButton.click(); + + const patterns = [ + 'https://aka.ms/bfcomposersurvey', + 'Source=Composer', + `machineId=${id}`, + `os=Unknown`, + `version=${MOCK_VERSION}`, + ]; + + for (const pattern of patterns) { + expect(mockOpen).toHaveBeenCalledWith(expect.stringContaining(pattern), '_blank'); + } + }); + }); + + describe('determining eligibility', () => { + beforeEach(() => { + surveyStorage.set('optedOut', false); + surveyStorage.set('days', 12345); + surveyStorage.set(LAST_SURVEY_KEY, null); + }); + + it('shows the box under normal conditions', async () => { + const page = renderWithRecoil(, initRecoilState); + + const surveyButton = await page.findByText('Take survey'); + expect(surveyButton).not.toBeNull(); + }); + + it("doesn't show the box when the user has opted out", () => { + surveyStorage.set('optedOut', true); + + const page = renderWithRecoil(, initRecoilState); + + const surveyButton = page.queryByText('Take survey'); + expect(surveyButton).toBeNull(); + }); + + it("doesn't show the box when the user hasn't spent enough days with Composer", () => { + // logically impossible, but makes a good test case + surveyStorage.set('days', -1); + + const page = renderWithRecoil(, initRecoilState); + + const surveyButton = page.queryByText('Take survey'); + expect(surveyButton).toBeNull(); + }); + + it("returns false when it hasn't been long enough since the last survey", () => { + // also logically impossible, but makes a good test case + surveyStorage.set(LAST_SURVEY_KEY, Date.now() + 10000); + + const page = renderWithRecoil(, initRecoilState); + + const surveyButton = page.queryByText('Take survey'); + expect(surveyButton).toBeNull(); + }); + }); +}); diff --git a/Composer/packages/client/src/components/Notifications/useSurveyNotification.ts b/Composer/packages/client/src/components/Notifications/useSurveyNotification.ts new file mode 100644 index 0000000000..edb8a8ebd6 --- /dev/null +++ b/Composer/packages/client/src/components/Notifications/useSurveyNotification.ts @@ -0,0 +1,121 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { useEffect } from 'react'; +import { useRecoilValue } from 'recoil'; +import formatMessage from 'format-message'; +import querystring from 'query-string'; + +import { ClientStorage } from '../../utils/storage'; +import { dispatcherState, machineInfoState } from '../../recoilModel/atoms/appState'; +import { MachineInfo } from '../../recoilModel/types'; +import { LAST_SURVEY_KEY, SURVEY_URL_BASE, SURVEY_PARAMETERS } from '../../constants'; +import TelemetryClient from '../../telemetry/TelemetryClient'; + +const buildUrl = (info: MachineInfo) => { + // User OS + // hashed machineId + // composer version + // maybe include subscription ID; wait for global sign-in feature + // session ID (global telemetry GUID) + const version = process.env.COMPOSER_VERSION; + + const parameters = { + Source: 'Composer', + os: info?.os || 'Unknown', + machineId: info?.id, + version, + }; + + return `${SURVEY_URL_BASE}?${querystring.stringify(parameters)}`; +}; + +const getSurveyEligibility = () => { + const surveyStorage = new ClientStorage(window.localStorage, 'survey'); + + const optedOut = surveyStorage.get('optedOut', false); + + if (optedOut) { + return false; + } + + let days = surveyStorage.get('days', 0); + const lastUsed = surveyStorage.get('dateLastUsed', null); + const lastTaken = surveyStorage.get(LAST_SURVEY_KEY, null); + const today = new Date().toDateString(); + if (lastUsed !== today) { + days += 1; + surveyStorage.set('days', days); + } + surveyStorage.set('dateLastUsed', today); + + if ( + // To be eligible for the survey, the user needs to have used Composer + // some minimum number of days. + days >= SURVEY_PARAMETERS.daysUntilEligible && + // Also, either the user must have never taken the survey before or + // the last time they took it must be long enough in the past. + (lastTaken == null || Date.now() - lastTaken > SURVEY_PARAMETERS.timeUntilNextSurvey) + ) { + // If the above conditions are true, there's a fixed chance the card will appear. + return process.env.NODE_ENV === 'jest' || Math.random() < SURVEY_PARAMETERS.chanceToAppear; + } else { + return false; + } +}; + +export const useSurveyNotification = () => { + const { addNotification, deleteNotification } = useRecoilValue(dispatcherState); + const machineInfo = useRecoilValue(machineInfoState); + + useEffect(() => { + const url = buildUrl(machineInfo); + deleteNotification('survey'); + + if (getSurveyEligibility()) { + const surveyStorage = new ClientStorage(window.localStorage, 'survey'); + + TelemetryClient.track('HATSSurveyOffered'); + + addNotification({ + id: 'survey', + type: 'question', + title: formatMessage('Would you mind taking a quick survey?'), + description: formatMessage('We read every response and will use your feedback to improve Composer.'), + leftLinks: [ + { + label: formatMessage('Take survey'), + onClick: () => { + // This is safe; we control the URL that gets built + // eslint-disable-next-line security/detect-non-literal-fs-filename + window.open(url, '_blank'); + surveyStorage.set(LAST_SURVEY_KEY, Date.now()); + TelemetryClient.track('HATSSurveyAccepted'); + deleteNotification('survey'); + }, + }, + + { + // this is functionally identical to clicking the close box + label: formatMessage('Remind me later'), + onClick: () => { + TelemetryClient.track('HATSSurveyDismissed'); + deleteNotification('survey'); + }, + }, + ], + rightLinks: [ + { + label: formatMessage('No thanks'), + onClick: () => { + TelemetryClient.track('HATSSurveyRejected'); + surveyStorage.set('optedOut', true); + deleteNotification('survey'); + }, + }, + ], + onDismiss: () => TelemetryClient.track('HATSSurveyDismissed'), + }); + } + }, []); +}; diff --git a/Composer/packages/client/src/components/Orchestrator/OrchestratorForSkillsDialog.tsx b/Composer/packages/client/src/components/Orchestrator/OrchestratorForSkillsDialog.tsx index 0ab13292bc..9fb623adab 100644 --- a/Composer/packages/client/src/components/Orchestrator/OrchestratorForSkillsDialog.tsx +++ b/Composer/packages/client/src/components/Orchestrator/OrchestratorForSkillsDialog.tsx @@ -4,7 +4,7 @@ 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 React, { useMemo, useEffect } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; import { enableOrchestratorDialog } from '../../constants'; @@ -14,9 +14,11 @@ import { localeState, orchestratorForSkillsDialogState, rootBotProjectIdSelector, + settingsState, } from '../../recoilModel'; import { recognizersSelectorFamily } from '../../recoilModel/selectors/recognizers'; import { EnableOrchestrator } from '../AddRemoteSkillModal/EnableOrchestrator'; +import { canImportOrchestrator } from '../AddRemoteSkillModal/helper'; export const OrchestratorForSkillsDialog = () => { const [showOrchestratorDialog, setShowOrchestratorDialog] = useRecoilState(orchestratorForSkillsDialogState); @@ -24,6 +26,7 @@ export const OrchestratorForSkillsDialog = () => { const { dialogId } = useRecoilValue(designPageLocationState(rootProjectId)); const locale = useRecoilValue(localeState(rootProjectId)); const curRecognizers = useRecoilValue(recognizersSelectorFamily(rootProjectId)); + const setting = useRecoilValue(settingsState(rootProjectId)); const { updateRecognizer } = useRecoilValue(dispatcherState); @@ -32,6 +35,12 @@ export const OrchestratorForSkillsDialog = () => { return curRecognizers.some((f) => f.id === fileName && f.content.$kind === SDKKinds.OrchestratorRecognizer); }, [curRecognizers, dialogId, locale]); + useEffect(() => { + if (showOrchestratorDialog && hasOrchestrator) { + setShowOrchestratorDialog(false); + } + }, [hasOrchestrator, showOrchestratorDialog]); + const handleOrchestratorSubmit = async (event: React.MouseEvent, enable?: boolean) => { event.preventDefault(); if (enable) { @@ -43,7 +52,7 @@ export const OrchestratorForSkillsDialog = () => { const setVisibility = () => { if (showOrchestratorDialog) { - if (hasOrchestrator) { + if (hasOrchestrator || !canImportOrchestrator(setting?.runtime?.key)) { setShowOrchestratorDialog(false); return false; } @@ -63,7 +72,12 @@ export const OrchestratorForSkillsDialog = () => { title={enableOrchestratorDialog.title} onDismiss={onDismissHandler} > - + ); }; diff --git a/Composer/packages/client/src/components/Orchestrator/__tests__/OrchestratorForSkillsDialog.test.tsx b/Composer/packages/client/src/components/Orchestrator/__tests__/OrchestratorForSkillsDialog.test.tsx index bdd6ef5181..d24c4472d3 100644 --- a/Composer/packages/client/src/components/Orchestrator/__tests__/OrchestratorForSkillsDialog.test.tsx +++ b/Composer/packages/client/src/components/Orchestrator/__tests__/OrchestratorForSkillsDialog.test.tsx @@ -1,10 +1,10 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT License. -import { act, getQueriesForElement, within } from '@botframework-composer/test-utils'; +import { act, screen, userEvent } from '@botframework-composer/test-utils'; import { SDKKinds } from '@botframework-composer/types'; import * as React from 'react'; -import userEvent from '@testing-library/user-event'; +import { within } from '@testing-library/dom'; import { renderWithRecoil } from '../../../../__tests__/testUtils/renderWithRecoil'; import { @@ -14,12 +14,19 @@ import { localeState, orchestratorForSkillsDialogState, projectMetaDataState, + settingsState, } from '../../../recoilModel'; import { recognizersSelectorFamily } from '../../../recoilModel/selectors/recognizers'; import { OrchestratorForSkillsDialog } from '../OrchestratorForSkillsDialog'; import { importOrchestrator } from '../../AddRemoteSkillModal/helper'; -jest.mock('../../AddRemoteSkillModal/helper'); +jest.mock('../../AddRemoteSkillModal/helper', () => { + const helper = jest.requireActual('../../AddRemoteSkillModal/helper'); + return { + ...helper, + importOrchestrator: jest.fn(), + }; +}); // mimick a project setup with a rootbot and dialog files, and provide conditions for orchestrator skill dialog to be visible const makeInitialState = (set: any) => { @@ -29,6 +36,7 @@ const makeInitialState = (set: any) => { set(projectMetaDataState('rootBotId'), { isRootBot: true, isRemote: false }); set(designPageLocationState('rootBotId'), { dialogId: 'rootBotRootDialogId', focused: 'na', selected: 'na' }); set(localeState('rootBotId'), 'en-us'); + set(settingsState('rootBotId'), { runtime: { key: 'adaptive-runtime-dotnet-webapp' } }); set(recognizersSelectorFamily('rootBotId'), [ { id: 'rootBotRootDialogId.en-us.lu.dialog', content: { $kind: SDKKinds.LuisRecognizer } }, ]); @@ -42,55 +50,153 @@ describe('', () => { }); it('should not open OrchestratorForSkillsDialog if orchestratorForSkillsDialogState is false', () => { - const { baseElement } = renderWithRecoil(, ({ set }) => { + renderWithRecoil(, ({ set }) => { makeInitialState(set); set(orchestratorForSkillsDialogState, false); }); - const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId); + const dialog = screen.queryByTestId(orchestratorTestId); expect(dialog).toBeNull(); }); it('should not open OrchestratorForSkillsDialog if orchestrator already being used in root', () => { - const { baseElement } = renderWithRecoil(, ({ set }) => { + renderWithRecoil(, ({ set }) => { makeInitialState(set); set(recognizersSelectorFamily('rootBotId'), [ { id: 'rootBotRootDialogId.en-us.lu.dialog', content: { $kind: SDKKinds.OrchestratorRecognizer } }, ]); }); - const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId); + const dialog = screen.queryByTestId(orchestratorTestId); expect(dialog).toBeNull(); }); - it('open OrchestratorForSkillsDialog if orchestratorForSkillsDialogState and Orchestrator not used in Root Bot Root Dialog', () => { + it('should not render OrchestratorForSkillsDialog if runtime is not supported', () => { const { baseElement } = renderWithRecoil(, ({ set }) => { makeInitialState(set); + set(settingsState('rootBotId'), { + defaultLanguage: 'en-us', + languages: ['en-us'], + luis: { + authoringEndpoint: '', + name: '', + authoringKey: '', + defaultLanguage: '', + endpoint: '', + endpointKey: '', + environment: '', + }, + qna: { endpointKey: '', subscriptionKey: '' }, + luFeatures: { enableCompositeEntities: false }, + customFunctions: [], + importedLibraries: [], + runtime: { key: 'node-webapp-v1', command: '', path: '', customRuntime: false }, + }); + }); + const dialog = within(baseElement as HTMLElement).queryByTestId(orchestratorTestId); + expect(dialog).toBeNull(); + }); + + it('should not render OrchestratorForSkillsDialog if runtime is missing or invalid', () => { + const { baseElement } = renderWithRecoil(, ({ set }) => { + makeInitialState(set); + set(settingsState('rootBotId'), { + defaultLanguage: 'en-us', + languages: ['en-us'], + luis: { + authoringEndpoint: '', + name: '', + authoringKey: '', + defaultLanguage: '', + endpoint: '', + endpointKey: '', + environment: '', + }, + qna: { endpointKey: '', subscriptionKey: '' }, + luFeatures: { enableCompositeEntities: false }, + customFunctions: [], + importedLibraries: [], + runtime: { key: '', command: '', path: '', customRuntime: false }, + }); + }); + const dialog = within(baseElement as HTMLElement).queryByTestId(orchestratorTestId); + expect(dialog).toBeNull(); + }); + + it('open OrchestratorForSkillsDialog if orchestratorForSkillsDialogState and Orchestrator not used in Root Bot Root Dialog', () => { + renderWithRecoil(, ({ set }) => { + makeInitialState(set); }); - const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId); + const dialog = screen.queryByTestId(orchestratorTestId); expect(dialog).toBeTruthy(); }); it('should install Orchestrator package when user clicks Continue', async () => { + renderWithRecoil(, ({ set }) => { + makeInitialState(set); + }); + + await act(async () => { + userEvent.click(screen.getByTestId('import-orchestrator')); + }); + + expect(importOrchestrator).toBeCalledWith( + 'rootBotId', + { key: 'adaptive-runtime-dotnet-webapp' }, + expect.anything(), + expect.anything() + ); + }); + + it('should install Orchestrator package with adaptive node runtime', async () => { const { baseElement } = renderWithRecoil(, ({ set }) => { makeInitialState(set); + + set(settingsState('rootBotId'), { + defaultLanguage: 'en-us', + languages: ['en-us'], + luis: { + authoringEndpoint: '', + name: '', + authoringKey: '', + defaultLanguage: '', + endpoint: '', + endpointKey: '', + environment: '', + }, + qna: { endpointKey: '', subscriptionKey: '' }, + luFeatures: { enableCompositeEntities: false }, + customFunctions: [], + importedLibraries: [], + runtime: { key: 'adaptive-runtime-js-functions', command: '', path: '', customRuntime: false }, + }); }); await act(async () => { - userEvent.click(within(baseElement).getByTestId('import-orchestrator')); + userEvent.click(within(baseElement as HTMLElement).getByTestId('import-orchestrator')); }); - expect(importOrchestrator).toBeCalledWith('rootBotId', expect.anything(), expect.anything()); + expect(importOrchestrator).toBeCalledWith( + 'rootBotId', + { + key: 'adaptive-runtime-js-functions', + path: expect.anything(), + customRuntime: expect.anything(), + command: expect.anything(), + }, + expect.anything(), + expect.anything() + ); }); it('should not install Orchestrator package when user clicks skip', async () => { - const { baseElement } = renderWithRecoil(, ({ set }) => { + renderWithRecoil(, ({ set }) => { makeInitialState(set); }); await act(async () => { - userEvent.click(await within(baseElement).findByText('Skip')); + userEvent.click(await screen.findByText('Skip')); }); - const dialog = getQueriesForElement(baseElement).queryByTestId(orchestratorTestId); + const dialog = screen.queryByTestId(orchestratorTestId); expect(dialog).toBeNull(); expect(importOrchestrator).toBeCalledTimes(0); diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx index 258d3392f7..c7a8949107 100644 --- a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx +++ b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx @@ -144,7 +144,7 @@ export const ProjectTree: React.FC = ({ onboardingAddCoachMarkRef, navigateToFormDialogSchema, setPageElementState, - createQnAFromUrlDialogBegin, + createQnADialogBegin, } = useRecoilValue(dispatcherState); const treeRef = useRef(null); @@ -233,7 +233,7 @@ export const ProjectTree: React.FC = ({ label: formatMessage('Add QnA Maker knowledge base'), icon: 'Add', onClick: () => { - createQnAFromUrlDialogBegin({ projectId: skillId, dialogId: dialog.id }); + createQnADialogBegin({ projectId: skillId, dialogId: dialog.id }); TelemetryClient.track('AddNewKnowledgeBaseStarted'); }, }; diff --git a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx index d4a575a8c2..e9120b1d8f 100644 --- a/Composer/packages/client/src/components/ProjectTree/treeItem.tsx +++ b/Composer/packages/client/src/components/ProjectTree/treeItem.tsx @@ -4,7 +4,7 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; import React, { useState, useCallback } from 'react'; -import { FontSizes } from '@uifabric/fluent-theme'; +import { FontSizes, FluentTheme } from '@uifabric/fluent-theme'; import { DefaultPalette } from '@uifabric/styling'; import { OverflowSet, IOverflowSetItemProps } from 'office-ui-fabric-react/lib/OverflowSet'; import { TooltipHost, DirectionalHint } from 'office-ui-fabric-react/lib/Tooltip'; @@ -184,7 +184,7 @@ const statusIcon = { const warningIcon = { ...statusIcon, - color: '#BE880A', + color: FluentTheme.palette.yellow, }; const errorIcon = { diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFrom.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFrom.tsx deleted file mode 100644 index c2f7b5d980..0000000000 --- a/Composer/packages/client/src/components/QnA/CreateQnAFrom.tsx +++ /dev/null @@ -1,45 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import React, { useState } from 'react'; -import { useRecoilValue } from 'recoil'; - -import { - createQnAOnState, - showCreateQnAFromScratchDialogState, - showCreateQnAFromUrlDialogState, - settingsState, -} from '../../recoilModel'; - -import CreateQnAFromScratchModal from './CreateQnAFromScratchModal'; -import CreateQnAFromUrlModal from './CreateQnAFromUrlModal'; -import { CreateQnAFromModalProps } from './constants'; - -export const CreateQnAModal: React.FC = (props) => { - const { projectId } = useRecoilValue(createQnAOnState); - const settings = useRecoilValue(settingsState(projectId)); - const locales = settings.languages; - const defaultLocale = settings.defaultLanguage; - const showCreateQnAFromScratchDialog = useRecoilValue(showCreateQnAFromScratchDialogState(projectId)); - const showCreateQnAFromUrlDialog = useRecoilValue(showCreateQnAFromUrlDialogState(projectId)); - const [initialName, setInitialName] = useState(''); - if (showCreateQnAFromScratchDialog) { - return ; - } else if (showCreateQnAFromUrlDialog) { - return ( - - ); - } else { - return null; - } -}; - -export default CreateQnAModal; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFromQnAMaker.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFromQnAMaker.tsx new file mode 100644 index 0000000000..f36a17d815 --- /dev/null +++ b/Composer/packages/client/src/components/QnA/CreateQnAFromQnAMaker.tsx @@ -0,0 +1,53 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { Fragment, useEffect } from 'react'; +import formatMessage from 'format-message'; +import { Stack } from 'office-ui-fabric-react/lib/Stack'; +import { Text } from 'office-ui-fabric-react/lib/Text'; + +import { FieldConfig, useForm } from '../../hooks/useForm'; + +import { validateName, CreateQnAFromFormProps, CreateQnAFromQnAMakerFormData } from './constants'; +import { knowledgeBaseStyle, subText } from './styles'; + +const formConfig: FieldConfig = { + name: { + required: true, + defaultValue: '', + }, +}; + +export const CreateQnAFromQnAMaker: React.FC = (props) => { + const { onChange, qnaFiles, initialName } = props; + + formConfig.name.validate = validateName(qnaFiles); + formConfig.name.defaultValue = initialName || ''; + const { formData, hasErrors } = useForm(formConfig); + + useEffect(() => { + const disabled = hasErrors || !formData.name; + onChange(formData, disabled); + }, [formData]); + + return ( + + + + {formatMessage('Import content from an existing knowledge base on the QnA maker portal')} + + + + {formatMessage( + 'Import content from an existing knowledge base on the QnA maker portal. Your knowledge base will downloaded locally and source knowledge base will remain as-is.' + )} + + + + + ); +}; + +export default CreateQnAFromQnAMaker; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFromScratch.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFromScratch.tsx new file mode 100644 index 0000000000..7a0c70e901 --- /dev/null +++ b/Composer/packages/client/src/components/QnA/CreateQnAFromScratch.tsx @@ -0,0 +1,56 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { Fragment, useEffect } from 'react'; +import formatMessage from 'format-message'; +import { Stack } from 'office-ui-fabric-react/lib/Stack'; +import { TextField } from 'office-ui-fabric-react/lib/TextField'; + +import { FieldConfig, useForm } from '../../hooks/useForm'; + +import { validateName, CreateQnAFromFormProps, CreateQnAFromScratchFormData } from './constants'; +import { textFieldKBNameFromScratch } from './styles'; + +const formConfig: FieldConfig = { + name: { + required: true, + defaultValue: '', + }, +}; + +export const CreateQnAFromScratch: React.FC = (props) => { + const { onChange, qnaFiles, initialName, onUpdateInitialName } = props; + + formConfig.name.validate = validateName(qnaFiles); + formConfig.name.defaultValue = initialName || ''; + const { formData, updateField, hasErrors, formErrors } = useForm(formConfig); + + useEffect(() => { + const disabled = hasErrors || !formData.name; + onChange(formData, disabled); + }, [formData, hasErrors]); + + return ( + + + { + updateField('name', name); + onUpdateInitialName?.(name); + }} + /> + + + ); +}; + +export default CreateQnAFromScratch; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFromScratchModal.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFromScratchModal.tsx deleted file mode 100644 index 19dd8d7236..0000000000 --- a/Composer/packages/client/src/components/QnA/CreateQnAFromScratchModal.tsx +++ /dev/null @@ -1,120 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import React from 'react'; -import { useRecoilValue } from 'recoil'; -import formatMessage from 'format-message'; -import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; -import { Stack } from 'office-ui-fabric-react/lib/Stack'; -import { TextField } from 'office-ui-fabric-react/lib/TextField'; -import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; - -import { FieldConfig, useForm } from '../../hooks/useForm'; -import { dispatcherState, showCreateQnAFromUrlDialogState } from '../../recoilModel'; -import TelemetryClient from '../../telemetry/TelemetryClient'; - -import { validateName, CreateQnAFromModalProps, CreateQnAFromScratchFormData } from './constants'; -import { subText, styles, dialogWindowMini, textFieldKBNameFromScratch } from './styles'; - -const formConfig: FieldConfig = { - name: { - required: true, - defaultValue: '', - }, -}; - -const DialogTitle = () => { - return ( - - {formatMessage('Add QnA Maker knowledge base')} - - {formatMessage('Manually add question and answer pairs to create a knowledge base')} - - - ); -}; - -export const CreateQnAFromScratchModal: React.FC = (props) => { - const { onDismiss, onSubmit, qnaFiles, projectId, initialName, onUpdateInitialName } = props; - const actions = useRecoilValue(dispatcherState); - const showCreateQnAFromUrlDialog = useRecoilValue(showCreateQnAFromUrlDialogState(projectId)); - - formConfig.name.validate = validateName(qnaFiles); - formConfig.name.defaultValue = initialName || ''; - const { formData, updateField, hasErrors, formErrors } = useForm(formConfig); - const disabled = hasErrors || !formData.name; - - const handleDismiss = () => { - onDismiss?.(); - onUpdateInitialName?.(''); - actions.createQnAFromScratchDialogCancel({ projectId }); - TelemetryClient.track('AddNewKnowledgeBaseCanceled'); - }; - - return ( - , - styles: styles.dialog, - }} - hidden={false} - modalProps={{ - isBlocking: false, - styles: styles.modalCreateFromScratch, - }} - onDismiss={handleDismiss} - > - - - { - updateField('name', name); - onUpdateInitialName?.(name); - }} - /> - - - - {showCreateQnAFromUrlDialog && ( - { - actions.createQnAFromScratchDialogBack({ projectId }); - }} - /> - )} - { - handleDismiss(); - }} - /> - { - if (hasErrors) { - return; - } - onSubmit(formData); - onUpdateInitialName?.(''); - TelemetryClient.track('AddNewKnowledgeBaseCompleted', { scratch: true }); - }} - /> - - - ); -}; - -export default CreateQnAFromScratchModal; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFromUrl.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFromUrl.tsx new file mode 100644 index 0000000000..0d7495d44c --- /dev/null +++ b/Composer/packages/client/src/components/QnA/CreateQnAFromUrl.tsx @@ -0,0 +1,149 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { useState, useMemo, Fragment, useEffect } from 'react'; +import formatMessage from 'format-message'; +import { Stack } from 'office-ui-fabric-react/lib/Stack'; +import { TextField } from 'office-ui-fabric-react/lib/TextField'; +import { Text } from 'office-ui-fabric-react/lib/Text'; +import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; +import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown'; + +import { Locales } from '../../locales'; + +import { initializeLocales } from './utilities'; +import { + validateUrl, + CreateQnAFromFormProps, + CreateQnAFromUrlFormData, + CreateQnAFromUrlFormDataErrors, +} from './constants'; +import { textFieldUrl, warning, urlPairStyle, knowledgeBaseStyle, urlStackStyle, subText } from './styles'; + +const hasErrors = (errors: CreateQnAFromUrlFormDataErrors) => { + return !!errors.name || errors.urls.some((e) => !!e); +}; + +export const CreateQnAFromUrl: React.FC = (props) => { + const { onChange, dialogId, locales, defaultLocale, initialName } = props; + + const index = Locales.findIndex((l) => l.locale === locales[0]); + const initialLanguage = index > -1 ? Locales[index].language : locales[0]; + const [formData, setFormData] = useState({ + urls: [], + locales: initializeLocales(locales, defaultLocale), + language: initialLanguage, + name: initialName || '', + multiTurn: false, + }); + + const [formDataErrors, setFormDataErrors] = useState({ + urls: [], + name: '', + }); + + const usedLocales = useMemo(() => { + return locales.map((fl) => { + const index = Locales.findIndex((l) => l.locale === fl); + if (index > -1) { + return { text: Locales[index].language, locale: fl, key: fl }; + } else { + return { text: fl, locale: fl, key: fl }; + } + }); + }, [locales]); + + const isQnAFileselected = !(dialogId === 'all'); + + const onChangeUrlsField = (value: string | undefined) => { + const urls = [...formData.urls]; + urls[0] = value ?? ''; + updateUrlsField(urls); + updateUrlsError(urls); + }; + + const onChangeMultiTurn = (value: boolean | undefined) => { + setFormData({ + ...formData, + multiTurn: value ?? false, + }); + }; + + const updateUrlsField = (urls: string[]) => { + setFormData({ + ...formData, + urls: urls, + }); + }; + + const updateUrlsError = (urls: string[]) => { + const urlErrors = urls.map((url) => { + return validateUrl(url); + }) as string[]; + setFormDataErrors({ ...formDataErrors, urls: urlErrors }); + }; + + const onChangeLanguageField = (option) => { + setFormData({ + ...formData, + language: option.text, + locales: [option.key], + }); + }; + + useEffect(() => { + const disabled = hasErrors(formDataErrors) || !formData.urls[0] || !formData.name; + onChange(formData, disabled); + }, [formData, formDataErrors]); + + return ( + + + {formatMessage('Create new knowledge base from URL')} + + + {formatMessage( + 'Select this option if you want to create a knowledge base from content hosted online such as an FAQ or document link (.csv, .xls or .doc format)' + )} + + + + + {formatMessage('Source URL')} + + onChangeUrlsField(url)} + /> + + { + onChangeLanguageField(o); + }} + /> + + {!isQnAFileselected && ( + {formatMessage('Please select a specific qna file to import QnA')} + )} + + + onChangeMultiTurn(val)} + /> + + + ); +}; + +export default CreateQnAFromUrl; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAFromUrlModal.tsx b/Composer/packages/client/src/components/QnA/CreateQnAFromUrlModal.tsx deleted file mode 100644 index 1e12dee3a8..0000000000 --- a/Composer/packages/client/src/components/QnA/CreateQnAFromUrlModal.tsx +++ /dev/null @@ -1,269 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT License. - -/** @jsx jsx */ -import { jsx } from '@emotion/core'; -import React, { useState, useMemo } from 'react'; -import { useRecoilValue } from 'recoil'; -import formatMessage from 'format-message'; -import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; -import { Stack } from 'office-ui-fabric-react/lib/Stack'; -import { TextField } from 'office-ui-fabric-react/lib/TextField'; -import { Text } from 'office-ui-fabric-react/lib/Text'; -import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; -import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; -import { Link } from 'office-ui-fabric-react/lib/Link'; - -import { Locales } from '../../locales'; -import { dispatcherState, onCreateQnAFromUrlDialogCompleteState } from '../../recoilModel'; -import TelemetryClient from '../../telemetry/TelemetryClient'; - -import { - knowledgeBaseSourceUrl, - validateUrl, - validateName, - CreateQnAFromUrlModalProps, - CreateQnAFromUrlFormData, - CreateQnAFromUrlFormDataErrors, -} from './constants'; -import { - subText, - styles, - dialogWindow, - textFieldUrl, - textFieldKBNameFromUrl, - warning, - urlPairStyle, - knowledgeBaseStyle, - urlStackStyle, -} from './styles'; - -const DialogTitle = () => { - return ( - - {formatMessage('Add QnA Maker knowledge base')} - - - {formatMessage('Use Azure QnA Maker to extract question-and-answer pairs from an online FAQ. ')} - - {formatMessage('Learn more')} - - - - - ); -}; - -const hasErrors = (errors: CreateQnAFromUrlFormDataErrors) => { - return !!errors.name || errors.urls.some((e) => !!e); -}; - -const initializeLocales = (locales: string[], defaultLocale: string) => { - const newLocales = [...locales]; - const index = newLocales.findIndex((l) => l === defaultLocale); - if (index < 0) throw new Error(`default language ${defaultLocale} does not exist in languages`); - newLocales.splice(index, 1); - newLocales.sort(); - newLocales.unshift(defaultLocale); - return newLocales; -}; - -export const CreateQnAFromUrlModal: React.FC = (props) => { - const { - onDismiss, - onSubmit, - dialogId, - projectId, - qnaFiles, - locales, - defaultLocale, - initialName, - onUpdateInitialName, - } = props; - const actions = useRecoilValue(dispatcherState); - const onComplete = useRecoilValue(onCreateQnAFromUrlDialogCompleteState(projectId)); - - const [formData, setFormData] = useState({ - urls: [], - locales: initializeLocales(locales, defaultLocale), - name: initialName || '', - multiTurn: false, - }); - - const [formDataErrors, setFormDataErrors] = useState({ - urls: [], - name: '', - }); - - const usedLocales = useMemo(() => { - return formData.locales.map((fl) => { - const index = Locales.findIndex((l) => l.locale === fl); - if (index > -1) { - return Locales[index].language; - } - }); - }, [formData.locales]); - - const isQnAFileselected = !(dialogId === 'all'); - const disabled = hasErrors(formDataErrors) || !formData.urls[0] || !formData.name; - const validFormDataName = validateName(qnaFiles); - - const onChangeNameField = (value: string | undefined) => { - updateNameField(value); - onUpdateInitialName?.(value ?? ''); - updateNameError(value); - }; - - const onChangeUrlsField = (value: string | undefined, index: number) => { - const urls = [...formData.urls]; - urls[index] = value ?? ''; - updateUrlsField(urls); - updateUrlsError(urls); - }; - - const onChangeMultiTurn = (value: boolean | undefined) => { - setFormData({ - ...formData, - multiTurn: value ?? false, - }); - }; - - const updateNameField = (value: string | undefined) => { - setFormData({ - ...formData, - name: value ?? '', - }); - }; - - const updateNameError = (value: string | undefined) => { - const error = validFormDataName(value) as string; - setFormDataErrors({ ...formDataErrors, name: error ?? '' }); - }; - - const updateUrlsField = (urls: string[]) => { - setFormData({ - ...formData, - urls: urls, - }); - }; - - const updateUrlsError = (urls: string[]) => { - const urlErrors = urls.map((url) => { - return validateUrl(url); - }) as string[]; - setFormDataErrors({ ...formDataErrors, urls: urlErrors }); - }; - - const handleDismiss = () => { - onDismiss?.(); - onUpdateInitialName?.(''); - actions.createQnAFromUrlDialogCancel({ projectId }); - TelemetryClient.track('AddNewKnowledgeBaseCanceled'); - }; - - const removeEmptyUrls = (formData: CreateQnAFromUrlFormData) => { - const urls: string[] = []; - const locales: string[] = []; - for (let i = 0; i < formData.urls.length; i++) { - if (formData.urls[i]) { - urls.push(formData.urls[i]); - locales.push(formData.locales[i]); - } - } - return { - ...formData, - locales, - urls, - }; - }; - - return ( - , - styles: styles.dialog, - }} - hidden={false} - modalProps={{ - isBlocking: false, - styles: styles.modalCreateFromUrl, - }} - onDismiss={handleDismiss} - > - - - onChangeNameField(name)} - /> - {formatMessage('FAQ website (source)')} - {formData.locales.map((locale, i) => { - return ( - - onChangeUrlsField(url, i)} - /> - - ); - })} - - {!isQnAFileselected && ( - {formatMessage('Please select a specific qna file to import QnA')} - )} - - - onChangeMultiTurn(val)} - /> - - - - { - // switch to create from scratch flow, pass onComplete callback. - actions.createQnAFromScratchDialogBegin({ projectId, dialogId, onComplete: onComplete?.func }); - }} - /> - { - handleDismiss(); - }} - /> - { - if (hasErrors(formDataErrors)) { - return; - } - onSubmit(removeEmptyUrls(formData)); - onUpdateInitialName?.(''); - TelemetryClient.track('AddNewKnowledgeBaseCompleted', { scratch: false }); - }} - /> - - - ); -}; - -export default CreateQnAFromUrlModal; diff --git a/Composer/packages/client/src/components/QnA/CreateQnAModal.tsx b/Composer/packages/client/src/components/QnA/CreateQnAModal.tsx new file mode 100644 index 0000000000..83ffbbc86e --- /dev/null +++ b/Composer/packages/client/src/components/QnA/CreateQnAModal.tsx @@ -0,0 +1,683 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { Fragment, useEffect, useMemo, useState } from 'react'; +import { useRecoilValue } from 'recoil'; +import formatMessage from 'format-message'; +import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; +import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup'; +import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; +import { Link } from 'office-ui-fabric-react/lib/Link'; +import { + DetailsList, + SelectionMode, + DetailsListLayoutMode, + IColumn, + Selection, + DetailsRow, + IDetailsRowProps, + CheckboxVisibility, +} from 'office-ui-fabric-react/lib/DetailsList'; +import { Spinner } from 'office-ui-fabric-react/lib/Spinner'; +import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown'; +import { SubscriptionClient } from '@azure/arm-subscriptions'; +import { Subscription } from '@azure/arm-subscriptions/esm/models'; +import { TokenCredentials } from '@azure/ms-rest-js'; +import { CognitiveServicesManagementClient } from '@azure/arm-cognitiveservices'; +import { CognitiveServicesCredentials } from '@azure/ms-rest-azure-js'; +import { QnAMakerClient } from '@azure/cognitiveservices-qnamaker'; +import sortBy from 'lodash/sortBy'; +import uniq from 'lodash/uniq'; +import { NeutralColors } from '@uifabric/fluent-theme'; +import { IRenderFunction } from '@uifabric/utilities'; + +import TelemetryClient from '../../telemetry/TelemetryClient'; +import { + createQnAOnState, + showCreateQnADialogState, + settingsState, + dispatcherState, + localeState, + currentUserState, + isAuthenticatedState, + showAuthDialogState, +} from '../../recoilModel'; + +import { CreateQnAFormData, CreateQnAModalProps, QnAMakerLearnMoreUrl } from './constants'; +import { + subText, + styles, + contentBox, + formContainer, + choiceContainer, + nameStepContainer, + resourceDropdown, + dialogBodyStyles, +} from './styles'; +import { CreateQnAFromUrl } from './CreateQnAFromUrl'; +import { CreateQnAFromScratch } from './CreateQnAFromScratch'; +import { CreateQnAFromQnAMaker } from './CreateQnAFromQnAMaker'; +import { localeToLanguage } from './utilities'; +import { PersonaCard } from './PersonaCard'; + +type KeyRec = { + name: string; + region: string; + resourceGroup: string; + key: string; + endpoint: string; +}; + +type KBRec = { + id: string; + name: string; + language: string; + lastChangedTimestamp: string; +}; + +type Step = 'name' | 'intro' | 'resource' | 'knowledge-base' | 'outcome'; + +const mainElementStyle = { marginBottom: 20 }; +const serviceName = 'QnA Maker'; +const serviceKeyType = 'QnAMaker'; + +export const CreateQnAModal: React.FC = (props) => { + const { onDismiss, onSubmit } = props; + const { projectId } = useRecoilValue(createQnAOnState); + const settings = useRecoilValue(settingsState(projectId)); + const actions = useRecoilValue(dispatcherState); + const locales = settings.languages; + const defaultLocale = settings.defaultLanguage; + const currentLocale = useRecoilValue(localeState(projectId)); + const showCreateQnAFrom = useRecoilValue(showCreateQnADialogState(projectId)); + const [initialName, setInitialName] = useState(''); + const [formData, setFormData] = useState(); + const [disabled, setDisabled] = useState(true); + const { setApplicationLevelError, requireUserLogin } = useRecoilValue(dispatcherState); + const currentUser = useRecoilValue(currentUserState); + const isAuthenticated = useRecoilValue(isAuthenticatedState); + const showAuthDialog = useRecoilValue(showAuthDialogState); + + const [subscriptionId, setSubscription] = useState(''); + + const [loading, setLoading] = useState(undefined); + const [noKeys, setNoKeys] = useState(false); + const [nextAction, setNextAction] = useState('url'); + const [key, setKey] = useState(); + const [region, setRegion] = useState(''); + const [availableSubscriptions, setAvailableSubscriptions] = useState([]); + const [subscriptionsErrorMessage, setSubscriptionsErrorMessage] = useState(); + const [keys, setKeys] = useState([]); + const [kbs, setKbs] = useState<{ [key: string]: KBRec[] }>({}); + const [selectedKb, setSelectedKb] = useState(); + const [dialogTitle, setDialogTitle] = useState(''); + + const [currentStep, setCurrentStep] = useState('name'); + + const currentAuthoringLanuage = localeToLanguage(currentLocale); + const defaultLanuage = localeToLanguage(defaultLocale); + const avaliableLanguages = uniq(locales.map((item) => localeToLanguage(item))); + + const actionOptions: IChoiceGroupOption[] = [ + { key: 'url', text: formatMessage('Create new knowledge base from URL') }, + { + key: 'portal', + text: formatMessage('Import existing knowledge base from QnA maker portal'), + }, + ]; + + /* Copied from Azure Publishing extension */ + const getSubscriptions = async (token: string): Promise> => { + const tokenCredentials = new TokenCredentials(token); + try { + const subscriptionClient = new SubscriptionClient(tokenCredentials); + const subscriptionsResult = await subscriptionClient.subscriptions.list(); + // eslint-disable-next-line no-underscore-dangle + return sortBy(subscriptionsResult._response.parsedBody, ['displayName']); + } catch (err) { + setApplicationLevelError(err); + return []; + } + }; + + const selectedKB = useMemo(() => { + return new Selection({ + onSelectionChanged: () => { + const t = selectedKB.getSelection()[0] as KBRec; + + if (t) { + setSelectedKb(t); + } + }, + }); + }, []); + + useEffect(() => { + if (isAuthenticated && showCreateQnAFrom) { + setAvailableSubscriptions([]); + setSubscriptionsErrorMessage(undefined); + getSubscriptions(currentUser.token) + .then((data) => { + setAvailableSubscriptions(data); + if (data.length === 0) { + setSubscriptionsErrorMessage( + formatMessage( + 'Your subscription list is empty, please add your subscription, or login with another account.' + ) + ); + } + }) + .catch((err) => { + setSubscriptionsErrorMessage(err.message); + }); + } + }, [currentUser, isAuthenticated, showCreateQnAFrom]); + + useEffect(() => { + // reset the ui + setSubscription(''); + setKeys([]); + setCurrentStep('name'); + setSelectedKb(undefined); + setKbs({}); + }, [showCreateQnAFrom]); + + const fetchKeys = async (cognitiveServicesManagementClient, accounts) => { + const keyList: KeyRec[] = []; + for (const account in accounts) { + const resourceGroup = accounts[account].id?.replace(/.*?\/resourceGroups\/(.*?)\/.*/, '$1'); + const name = accounts[account].name; + if (resourceGroup && name) { + try { + const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroup, name); + if (keys?.key1) { + keyList.push({ + name, + resourceGroup, + region: accounts[account].location || '', + key: keys?.key1 || '', + endpoint: accounts[account]?.properties?.endpoint ?? '', + }); + } + } catch (_err) { + // pass, filter no authorization resource + } + } + } + return keyList; + }; + + const fetchAccounts = async (subscriptionId) => { + if (isAuthenticated) { + setLoading(formatMessage('Loading keys...')); + setNoKeys(false); + const tokenCredentials = new TokenCredentials(currentUser.token); + const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId); + const accounts = await cognitiveServicesManagementClient.accounts.list(); + + const keylist: KeyRec[] = await fetchKeys( + cognitiveServicesManagementClient, + accounts.filter((a) => a.kind === serviceKeyType) + ); + + const kbsMap = {}; + const avaliableKeys: KeyRec[] = []; + for (const keyItem of keylist) { + const kbGroups = await fetchKBGroups(keyItem); + kbsMap[keyItem.name] = kbGroups; + if (kbGroups.length) { + avaliableKeys.push(keyItem); + } + } + setKbs(kbsMap); + setLoading(undefined); + if (avaliableKeys.length == 0) { + setNoKeys(true); + } else { + setNoKeys(false); + setKeys(avaliableKeys); + } + } + }; + + const fetchKBGroups = async (key: KeyRec) => { + let kblist: KBRec[] = []; + if (isAuthenticated && key) { + const cognitiveServicesCredentials = new CognitiveServicesCredentials(key.key); + const resourceClient = new QnAMakerClient(cognitiveServicesCredentials, key.endpoint); + + const result = await resourceClient.knowledgebase.listAll(); + + if (result.knowledgebases) { + kblist = result.knowledgebases.map((item: any) => { + return { + id: item.id || '', + name: item.name || '', + language: item.language || '', + lastChangedTimestamp: item.lastChangedTimestamp || '', + }; + }); + } + } + return kblist; + }; + // allow a user to provide a subscription id if one is missing + const onChangeSubscription = async (_, opt) => { + // get list of keys for this subscription + setSubscription(opt.key); + fetchAccounts(opt.key); + setLoading(formatMessage('Loading subscription...')); + }; + + const onChangeKey = async (_, opt) => { + // get list of keys for this subscription + setKey(opt); + setRegion(opt.region); + }; + + const onChangeAction = async (_, opt) => { + setNextAction(opt.key); + }; + + const chooseExistingKey = () => { + TelemetryClient.track('SettingsGetKeysExistingResourceSelected', { + subscriptionId, + resourceType: serviceName, + }); + setCurrentStep('knowledge-base'); + }; + + const performNextAction = () => { + if (nextAction === 'url') { + onSubmitFormData(nextAction); + } else { + requireUserLogin(); + setCurrentStep('resource'); + } + }; + + const renderNameStep = () => { + return ( + + + + + {formatMessage('Use Azure QnA Maker to extract question-and-answer pairs from an online FAQ. ')} + + {formatMessage('Learn more')} + + + + + + + setCurrentStep('intro')} + /> + + + + ); + }; + + const renderIntroStep = () => { + return ( + + + + {formatMessage('Create a knowledge base from a URL or import content from an existing knowledge base')} + + + + + + + + {nextAction === 'url' ? ( + + ) : ( + + )} + + + + onSubmitFormData('scratch')} + /> + setCurrentStep('name')} /> + + + + + ); + }; + + const renderChooseResourceStep = () => { + return ( + + + + {formatMessage('Select the subscription and resource you want to choose a knowledge base from')} + + + 0)} + errorMessage={subscriptionsErrorMessage} + label={formatMessage('Azure subscription')} + options={ + availableSubscriptions + ?.filter((p) => p.subscriptionId && p.displayName) + .map((p) => { + return { key: p.subscriptionId ?? '', text: p.displayName ?? formatMessage('Unnamed') }; + }) ?? [] + } + placeholder={formatMessage('Select a subscription')} + selectedKey={subscriptionId} + styles={resourceDropdown} + onChange={onChangeSubscription} + /> + + + {noKeys && subscriptionId && ( + + {formatMessage( + 'No existing QnA Maker resources were found in this subscription. Select a different subscription, or click “Back” to create a new resource or generate a resource request to handoff to your Azure admin.' + )} + + )} + {!noKeys && subscriptionId && ( + + 0)} + label={formatMessage('QnA Maker resource name')} + options={ + keys.map((p) => { + return { text: p.name, ...p }; + }) ?? [] + } + placeholder={formatMessage('Select resource')} + styles={resourceDropdown} + onChange={onChangeKey} + /> + + )} + + + + + + + {loading && } + setCurrentStep('intro')} /> + + + + + ); + }; + + const renderKnowledgeBaseSelectionStep = () => { + const columns: IColumn[] = [ + { + key: 'column2', + name: 'Name', + fieldName: 'name', + minWidth: 50, + maxWidth: 350, + isRowHeader: true, + isResizable: true, + isSorted: true, + isSortedDescending: false, + sortAscendingAriaLabel: 'Sorted A to Z', + sortDescendingAriaLabel: 'Sorted Z to A', + data: 'string', + isPadded: true, + }, + { + key: 'column3', + name: 'Last modified', + fieldName: 'lastModified', + minWidth: 200, + maxWidth: 300, + isResizable: true, + data: 'string', + isPadded: true, + onRender: (item) => { + const dt = new Date(item.lastChangedTimestamp); + return ( + + {' '} + {dt.toDateString()} {dt.toLocaleTimeString()}{' '} + + ); + }, + }, + { + key: 'column4', + name: 'Language', + fieldName: 'language', + minWidth: 100, + maxWidth: 200, + isResizable: true, + isCollapsible: true, + data: 'string', + isPadded: true, + }, + ]; + + const currentLanguageKbs: KBRec[] = []; + const defaultLanuageKbs: KBRec[] = []; + const avaliableLanguageKbs: KBRec[] = []; + const disabledLanguageKbs: KBRec[] = []; + + const currentKbs = key ? kbs[key.name] : []; + currentKbs.forEach((item) => { + if (item.language === currentAuthoringLanuage) { + currentLanguageKbs.push(item); + } else if (item.language === defaultLanuage) { + defaultLanuageKbs.push(item); + } else if (avaliableLanguages.includes(item.language)) { + avaliableLanguageKbs.push(item); + } else { + disabledLanguageKbs.push(item); + } + }); + + const sortedKbs = [...currentLanguageKbs, ...defaultLanuageKbs, ...avaliableLanguageKbs, ...disabledLanguageKbs]; + + const onRenderRow: IRenderFunction = (props) => { + if (!props) return null; + if (avaliableLanguages.includes(props.item.language)) { + return ; + } else { + return ( + + + + ); + } + }; + + return ( + + + + {formatMessage('Select one or more knowledge base to import into your bot project')} + + + item.name} + items={sortedKbs} + layoutMode={DetailsListLayoutMode.justified} + selection={selectedKB} + selectionMode={SelectionMode.single} + onRenderRow={onRenderRow} + /> + + + + {loading && } + setCurrentStep('resource')} /> + + + + + ); + }; + + const renderCurrentStep = () => { + switch (currentStep) { + case 'name': + return renderNameStep(); + case 'intro': + return renderIntroStep(); + case 'resource': { + if (nextAction === 'portal') { + return renderChooseResourceStep(); + } + break; + } + case 'knowledge-base': + return renderKnowledgeBaseSelectionStep(); + default: + return null; + } + }; + + useEffect(() => { + switch (currentStep) { + case 'name': + setDialogTitle(formatMessage('Add QnA Maker knowledge base')); + break; + case 'intro': + setDialogTitle(formatMessage(`Select a source for your knowledge base's content`)); + break; + case 'resource': + if (nextAction === 'portal') { + setDialogTitle(formatMessage('Select source knowledge base location')); + } + break; + case 'knowledge-base': + setSelectedKb(undefined); + setDialogTitle(formatMessage('Choose a knowledge base to import')); + break; + } + }, [currentStep]); + + const handleDismiss = () => { + onDismiss?.(); + setInitialName(''); + actions.createQnADialogCancel({ projectId }); + TelemetryClient.track('AddNewKnowledgeBaseCanceled'); + }; + + const onFormDataChange = (data, disabled) => { + setFormData(data); + setDisabled(disabled); + }; + + const onSubmitFormData = (createFrom: string) => { + if (!formData) return; + if (createFrom === 'url' && disabled) return; + + onSubmit(formData); + setInitialName(''); + TelemetryClient.track('AddNewKnowledgeBaseCompleted', { source: formData.urls?.length ? 'url' : 'none' }); + }; + + const onSubmitImportKB = async () => { + if (key && isAuthenticated && selectedKb && formData) { + // TODO: add to all matched language or ask user for specific locale. + const createdOnLocales = locales.filter((item) => localeToLanguage(item) === selectedKb.language); + onSubmit({ + ...formData, + locales: createdOnLocales, + endpoint: key.endpoint, + kbId: selectedKb.id, + kbName: selectedKb.name, + subscriptionKey: key.key, + }); + setInitialName(''); + TelemetryClient.track('AddNewKnowledgeBaseCompleted', { source: 'kb' }); + } + }; + + return ( + + {} : handleDismiss} + > + {renderCurrentStep()} + + + ); +}; + +export default CreateQnAModal; diff --git a/Composer/packages/client/src/components/QnA/EditQnAFromScratchModal.tsx b/Composer/packages/client/src/components/QnA/EditQnAFromScratchModal.tsx index d1f39a0090..30161fba45 100644 --- a/Composer/packages/client/src/components/QnA/EditQnAFromScratchModal.tsx +++ b/Composer/packages/client/src/components/QnA/EditQnAFromScratchModal.tsx @@ -40,7 +40,7 @@ const formConfig: FieldConfig = { }; const DialogTitle = () => { - return {formatMessage('Edit KB name')}; + return {formatMessage('Edit knowledge base name')}; }; export const EditQnAFromScratchModal: React.FC = (props) => { diff --git a/Composer/packages/client/src/components/QnA/EditQnAFromUrlModal.tsx b/Composer/packages/client/src/components/QnA/EditQnAFromUrlModal.tsx index d787ad230b..0012a524f5 100644 --- a/Composer/packages/client/src/components/QnA/EditQnAFromUrlModal.tsx +++ b/Composer/packages/client/src/components/QnA/EditQnAFromUrlModal.tsx @@ -46,7 +46,7 @@ const formConfig: FieldConfig = { }; const DialogTitle = () => { - return {formatMessage('Edit KB name')}; + return {formatMessage('Edit knowledge base name')}; }; export const EditQnAFromUrlModal: React.FC = (props) => { diff --git a/Composer/packages/client/src/components/QnA/ImportQnAFromUrl.tsx b/Composer/packages/client/src/components/QnA/ImportQnAFromUrl.tsx new file mode 100644 index 0000000000..179fdd5778 --- /dev/null +++ b/Composer/packages/client/src/components/QnA/ImportQnAFromUrl.tsx @@ -0,0 +1,108 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { useEffect } from 'react'; +import formatMessage from 'format-message'; +import { Stack } from 'office-ui-fabric-react/lib/Stack'; +import { TextField } from 'office-ui-fabric-react/lib/TextField'; +import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; +import { QnAFile } from '@bfc/shared'; + +import { FieldConfig, useForm } from '../../hooks/useForm'; +import { getQnAFileUrlOption, getQnAFileMultiTurnOption } from '../../utils/qnaUtil'; +import { getExtension } from '../../utils/fileUtil'; +import { Locales } from '../../locales'; + +import { validateUrl } from './constants'; +import { header, titleStyle, descriptionStyle, dialogWindow, textFieldKBNameFromScratch } from './styles'; + +type ImportQnAFromUrlModalProps = { + qnaFile: QnAFile; + onChange: (data, disabled: boolean) => void; +}; + +export type ImportQnAFromUrlFormData = { + url: string; + multiTurn: boolean; +}; + +const formConfig: FieldConfig = { + url: { + required: true, + defaultValue: '', + }, + multiTurn: { + defaultValue: false, + }, +}; + +const title = {formatMessage('Replace knowledge base from URL')}; + +const description = ( + + {formatMessage( + 'Select this option if you want to replace current knowledge base from content hosted online such as an FAQ or document link (.csv, .xls or .doc format)' + )} + +); + +export const ImportQnAFromUrl: React.FC = (props) => { + const { qnaFile, onChange } = props; + const locale = getExtension(qnaFile.id); + formConfig.url.validate = validateUrl; + formConfig.url.defaultValue = getQnAFileUrlOption(qnaFile); + formConfig.multiTurn.defaultValue = getQnAFileMultiTurnOption(qnaFile); + const { formData, updateField, formErrors, hasErrors } = useForm(formConfig); + + const getLanguage = (locale) => { + const index = Locales.findIndex((l) => l.locale === locale); + if (index > -1) { + return Locales[index].language; + } + }; + + const updateUrl = (url = '') => { + updateField('url', url); + }; + + const updateMultiTurn = (multiTurn = false) => { + updateField('multiTurn', multiTurn); + }; + + useEffect(() => { + onChange(formData, hasErrors); + }, [formData, hasErrors]); + + return ( + + + + {title} + {description} + + + updateUrl(url)} + /> + + + updateMultiTurn(val)} + /> + + + ); +}; + +export default ImportQnAFromUrl; diff --git a/Composer/packages/client/src/components/QnA/ImportQnAFromUrlModal.tsx b/Composer/packages/client/src/components/QnA/ImportQnAFromUrlModal.tsx index 27c10a7d90..d031e7dec8 100644 --- a/Composer/packages/client/src/components/QnA/ImportQnAFromUrlModal.tsx +++ b/Composer/packages/client/src/components/QnA/ImportQnAFromUrlModal.tsx @@ -78,7 +78,7 @@ export const ImportQnAFromUrlModal: React.FC = (prop { + const currentUser = useRecoilValue(currentUserState); + const isAuthenticated = useRecoilValue(isAuthenticatedState); + + const { logoutUser } = useRecoilValue(dispatcherState); + + const onLogout = async () => { + const confirmed = await OpenConfirmModal( + formatMessage('Sign out of Azure'), + formatMessage( + 'By signing out of Azure, your operation will be canceled and this dialog will close. Do you want to continue?' + ), + { + onRenderContent: (subtitle: string) => {subtitle}, + confirmText: formatMessage('Sign out'), + cancelText: formatMessage('Cancel'), + } + ); + if (confirmed) { + await logoutUser(); + } + }; + + const onRenderSecondaryText: IRenderFunction = (props) => { + if (!props) return null; + return ( + + {props.secondaryText} + + ); + }; + + return isAuthenticated && currentUser ? ( + + ) : null; +}; diff --git a/Composer/packages/client/src/components/QnA/ReplaceQnAFromModal.tsx b/Composer/packages/client/src/components/QnA/ReplaceQnAFromModal.tsx new file mode 100644 index 0000000000..f623f40be5 --- /dev/null +++ b/Composer/packages/client/src/components/QnA/ReplaceQnAFromModal.tsx @@ -0,0 +1,605 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +/** @jsx jsx */ +import { jsx } from '@emotion/core'; +import React, { Fragment, useEffect, useMemo, useState } from 'react'; +import { useRecoilValue } from 'recoil'; +import formatMessage from 'format-message'; +import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; +import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup'; +import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; +import { + DetailsList, + SelectionMode, + DetailsListLayoutMode, + IColumn, + Selection, + IDetailsRowProps, + DetailsRow, + CheckboxVisibility, +} from 'office-ui-fabric-react/lib/DetailsList'; +import { Spinner } from 'office-ui-fabric-react/lib/Spinner'; +import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown'; +import { SubscriptionClient } from '@azure/arm-subscriptions'; +import { Subscription } from '@azure/arm-subscriptions/esm/models'; +import { TokenCredentials } from '@azure/ms-rest-js'; +import { CognitiveServicesManagementClient } from '@azure/arm-cognitiveservices'; +import { CognitiveServicesCredentials } from '@azure/ms-rest-azure-js'; +import { QnAMakerClient } from '@azure/cognitiveservices-qnamaker'; +import sortBy from 'lodash/sortBy'; +import { NeutralColors } from '@uifabric/fluent-theme'; +import { IRenderFunction } from '@uifabric/utilities'; + +import TelemetryClient from '../../telemetry/TelemetryClient'; +import { getKBName, getFileLocale } from '../../utils/qnaUtil'; +import { dispatcherState, currentUserState, isAuthenticatedState, showAuthDialogState } from '../../recoilModel'; + +import { localeToLanguage } from './utilities'; +import { ReplaceQnAModalFormData, ReplaceQnAModalProps } from './constants'; +import { + styles, + subText, + contentBox, + formContainer, + choiceContainer, + titleStyle, + descriptionStyle, + resourceDropdown, + dialogBodyStyles, +} from './styles'; +import { ImportQnAFromUrl } from './ImportQnAFromUrl'; +import { PersonaCard } from './PersonaCard'; + +type KeyRec = { + name: string; + region: string; + resourceGroup: string; + key: string; + endpoint: string; +}; + +type KBRec = { + name: string; + language: string; + id: string; + lastChangedTimestamp: string; +}; + +type Step = 'intro' | 'resource' | 'knowledge-base' | 'outcome'; + +const mainElementStyle = { marginBottom: 20 }; +const serviceName = 'QnA Maker'; +const serviceKeyType = 'QnAMaker'; + +export const ReplaceQnAFromModal: React.FC = (props) => { + const { onDismiss, onSubmit, hidden, qnaFile, projectId, containerId } = props; + const actions = useRecoilValue(dispatcherState); + const [formData, setFormData] = useState(); + const [disabled, setDisabled] = useState(true); + const { setApplicationLevelError, requireUserLogin } = useRecoilValue(dispatcherState); + const currentUser = useRecoilValue(currentUserState); + const isAuthenticated = useRecoilValue(isAuthenticatedState); + const showAuthDialog = useRecoilValue(showAuthDialogState); + + const [subscriptionId, setSubscription] = useState(''); + const [loading, setLoading] = useState(undefined); + const [noKeys, setNoKeys] = useState(false); + const [nextAction, setNextAction] = useState('url'); + const [key, setKey] = useState(); + const [region, setRegion] = useState(''); + const [availableSubscriptions, setAvailableSubscriptions] = useState([]); + const [subscriptionsErrorMessage, setSubscriptionsErrorMessage] = useState(); + const [keys, setKeys] = useState([]); + const [kbs, setKbs] = useState<{ [key: string]: KBRec[] }>({}); + + const [selectedKb, setSelectedKb] = useState(); + const [dialogTitle, setDialogTitle] = useState(''); + + const [currentStep, setCurrentStep] = useState('intro'); + + const currentLocale = getFileLocale(containerId); + const currentAuthoringLanuage = localeToLanguage(currentLocale); + + const actionOptions: IChoiceGroupOption[] = [ + { key: 'url', text: formatMessage('Replace knowledge base from URL') }, + { + key: 'portal', + text: formatMessage('Replace with an existing knowledge base from QnA maker portal'), + }, + ]; + + /* Copied from Azure Publishing extension */ + const getSubscriptions = async (token: string): Promise> => { + const tokenCredentials = new TokenCredentials(token); + try { + const subscriptionClient = new SubscriptionClient(tokenCredentials); + const subscriptionsResult = await subscriptionClient.subscriptions.list(); + // eslint-disable-next-line no-underscore-dangle + return sortBy(subscriptionsResult._response.parsedBody, ['displayName']); + } catch (err) { + setApplicationLevelError(err); + return []; + } + }; + + const selectedKB = useMemo(() => { + return new Selection({ + onSelectionChanged: () => { + const t = selectedKB.getSelection()[0] as KBRec; + + if (t) { + setSelectedKb(t); + } + }, + }); + }, []); + + useEffect(() => { + if (isAuthenticated && !hidden) { + setAvailableSubscriptions([]); + setSubscriptionsErrorMessage(undefined); + getSubscriptions(currentUser.token) + .then((data) => { + setAvailableSubscriptions(data); + if (data.length === 0) { + setSubscriptionsErrorMessage( + formatMessage( + 'Your subscription list is empty, please add your subscription, or login with another account.' + ) + ); + } + }) + .catch((err) => { + setSubscriptionsErrorMessage(err.message); + }); + } + }, [currentUser, isAuthenticated, hidden]); + + useEffect(() => { + // reset the ui + if (!hidden) { + setSubscription(''); + setKeys([]); + setCurrentStep('intro'); + } + }, [hidden]); + + const fetchKeys = async (cognitiveServicesManagementClient, accounts) => { + const keyList: KeyRec[] = []; + for (const account in accounts) { + const resourceGroup = accounts[account].id?.replace(/.*?\/resourceGroups\/(.*?)\/.*/, '$1'); + const name = accounts[account].name; + if (resourceGroup && name) { + try { + const keys = await cognitiveServicesManagementClient.accounts.listKeys(resourceGroup, name); + if (keys?.key1) { + keyList.push({ + name: name, + resourceGroup: resourceGroup, + region: accounts[account].location || '', + key: keys?.key1 || '', + endpoint: accounts[account]?.properties?.endpoint ?? '', + }); + } + } catch (_err) { + // pass, filter no authorization resource + } + } + } + return keyList; + }; + + const fetchAccounts = async (subscriptionId) => { + if (isAuthenticated) { + setLoading(formatMessage('Loading keys...')); + setNoKeys(false); + const tokenCredentials = new TokenCredentials(currentUser.token); + const cognitiveServicesManagementClient = new CognitiveServicesManagementClient(tokenCredentials, subscriptionId); + const accounts = await cognitiveServicesManagementClient.accounts.list(); + const keylist: KeyRec[] = await fetchKeys( + cognitiveServicesManagementClient, + accounts.filter((a) => a.kind === serviceKeyType) + ); + + const kbsMap = {}; + const avaliableKeys: KeyRec[] = []; + for (const keyItem of keylist) { + const kbGroups = await fetchKBGroups(keyItem); + kbsMap[keyItem.name] = kbGroups; + if (kbGroups.length) { + avaliableKeys.push(keyItem); + } + } + setKbs(kbsMap); + setLoading(undefined); + if (avaliableKeys.length == 0) { + setNoKeys(true); + } else { + setNoKeys(false); + setKeys(avaliableKeys); + } + } + }; + + const fetchKBGroups = async (key: KeyRec) => { + let kblist: KBRec[] = []; + if (isAuthenticated && key) { + const cognitiveServicesCredentials = new CognitiveServicesCredentials(key.key); + const resourceClient = new QnAMakerClient(cognitiveServicesCredentials, key.endpoint); + const result = await resourceClient.knowledgebase.listAll(); + if (result.knowledgebases) { + kblist = result.knowledgebases.map((item: any) => { + return { + id: item.id || '', + name: item.name || '', + language: item.language || '', + lastChangedTimestamp: item.lastChangedTimestamp || '', + }; + }); + } + } + return kblist; + }; + + // allow a user to provide a subscription id if one is missing + const onChangeSubscription = async (_, opt) => { + // get list of keys for this subscription + setSubscription(opt.key); + fetchAccounts(opt.key); + setLoading(formatMessage('Loading subscription...')); + }; + + const onChangeKey = async (_, opt) => { + // get list of keys for this subscription + setKey(opt); + setRegion(opt.region); + }; + + const onChangeAction = async (_, opt) => { + setNextAction(opt.key); + if (opt.key === 'url') { + setDisabled(true); + } else { + setDisabled(false); + } + }; + + const chooseExistingKey = () => { + TelemetryClient.track('SettingsGetKeysExistingResourceSelected', { + subscriptionId, + resourceType: serviceName, + }); + setCurrentStep('knowledge-base'); + }; + + const performNextAction = () => { + if (nextAction !== 'portal') { + onSubmitFormData(); + } else { + requireUserLogin(); + setCurrentStep('resource'); + } + }; + + const renderIntroStep = () => { + return ( + + + + {formatMessage('Create a knowledge base from a URL or import content from an existing knowledge base')} + + + + + + + + {nextAction === 'url' ? ( + qnaFile && + ) : ( + +
+ + {formatMessage( + 'Import content from an existing knowledge base on the QnA maker portal. Your knowledge base will downloaded locally and source knowledge base will remain as-is.' + )} + +
- {formatMessage('Manually add question and answer pairs to create a knowledge base')} -
+ + {formatMessage( + 'Select this option if you want to create a knowledge base from content hosted online such as an FAQ or document link (.csv, .xls or .doc format)' + )} + +
- - {formatMessage('Use Azure QnA Maker to extract question-and-answer pairs from an online FAQ. ')} - - {formatMessage('Learn more')} - - -