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

fix: share name field between two create kb modal #7304

Merged
cwhitten merged 10 commits into from
Apr 26, 2021
Merged

fix: share name field between two create kb modal #7304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
86ee450
share knowledge base name between modal and update text
liweitian Apr 23, 2021
7c0cab1
update text
liweitian Apr 23, 2021
72bc08b
fix UT
liweitian Apr 23, 2021
a132bab
Merge branch 'main' into createKBModal
liweitian Apr 23, 2021
a44512c
Merge branch 'main' into createKBModal
liweitian Apr 26, 2021
19fa7c7
handle comments
liweitian Apr 26, 2021
98741d9
update interface
liweitian Apr 26, 2021
29a39c3
Merge branch 'main' into createKBModal
hatpick Apr 26, 2021
e3eb4eb
Merge branch 'main' into createKBModal
cwhitten Apr 26, 2021
699fbdb
Merge branch 'main' into createKBModal
cwhitten Apr 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions Composer/packages/client/src/components/QnA/CreateQnAFrom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

/** @jsx jsx */
import { jsx } from '@emotion/core';
import React from 'react';
import React, { useState } from 'react';
import { useRecoilValue } from 'recoil';

import {
Expand All @@ -24,11 +24,19 @@ export const CreateQnAModal: React.FC<CreateQnAFromModalProps> = (props) => {
const defaultLocale = settings.defaultLanguage;
const showCreateQnAFromScratchDialog = useRecoilValue(showCreateQnAFromScratchDialogState(projectId));
const showCreateQnAFromUrlDialog = useRecoilValue(showCreateQnAFromUrlDialogState(projectId));

const [initialName, setInitialName] = useState<string>('');
if (showCreateQnAFromScratchDialog) {
return <CreateQnAFromScratchModal {...props} />;
return <CreateQnAFromScratchModal {...props} initialName={initialName} onUpdateInitialName={setInitialName} />;
} else if (showCreateQnAFromUrlDialog) {
return <CreateQnAFromUrlModal {...props} defaultLocale={defaultLocale} locales={locales} />;
return (
<CreateQnAFromUrlModal
{...props}
defaultLocale={defaultLocale}
initialName={initialName}
locales={locales}
onUpdateInitialName={setInitialName}
/>
);
} else {
return null;
}
Expand Down
20 changes: 13 additions & 7 deletions Composer/packages/client/src/components/QnA/CreateQnAFromScratchModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,33 +28,35 @@ const formConfig: FieldConfig<CreateQnAFromScratchFormData> = {
const DialogTitle = () => {
return (
<div>
{formatMessage('Create new knowledge base from scratch')}
{formatMessage('Create new knowledge base')}
<p>
<span css={subText}>{formatMessage('Manually add question and answer pairs to create a KB')}</span>
<span css={subText}>{formatMessage('Manually add question and answer pairs to create a knowledge base')}</span>
</p>
</div>
);
};

export const CreateQnAFromScratchModal: React.FC<CreateQnAFromModalProps> = (props) => {
const { onDismiss, onSubmit, qnaFiles, projectId } = 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 (
<Dialog
dialogContentProps={{
type: DialogType.close,
type: DialogType.normal,
title: <DialogTitle />,
styles: styles.dialog,
}}
Expand All @@ -71,10 +73,13 @@ export const CreateQnAFromScratchModal: React.FC<CreateQnAFromModalProps> = (pro
data-testid={`knowledgeLocationTextField-name`}
errorMessage={formErrors.name}
label={formatMessage('Knowledge base name')}
placeholder={formatMessage('Type a name that describes this content')}
placeholder={formatMessage('Type a name for this knowledge base')}
styles={textFieldKBNameFromScratch}
value={formData.name}
onChange={(e, name = '') => updateField('name', name)}
onChange={(e, name = '') => {
updateField('name', name);
onUpdateInitialName?.(name);
}}
/>
</Stack>
</div>
Expand All @@ -97,12 +102,13 @@ export const CreateQnAFromScratchModal: React.FC<CreateQnAFromModalProps> = (pro
<PrimaryButton
data-testid={'createKnowledgeBase'}
disabled={disabled}
text={formatMessage('Create KB')}
text={formatMessage('Create knowledge base')}
onClick={() => {
if (hasErrors) {
return;
}
onSubmit(formData);
onUpdateInitialName?.('');
TelemetryClient.track('AddNewKnowledgeBaseCompleted', { scratch: true });
}}
/>
Expand Down
24 changes: 18 additions & 6 deletions Composer/packages/client/src/components/QnA/CreateQnAFromUrlModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,14 +71,24 @@ const initializeLocales = (locales: string[], defaultLocale: string) => {
};

export const CreateQnAFromUrlModal: React.FC<CreateQnAFromUrlModalProps> = (props) => {
const { onDismiss, onSubmit, dialogId, projectId, qnaFiles, locales, defaultLocale } = 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<CreateQnAFromUrlFormData>({
urls: [],
locales: initializeLocales(locales, defaultLocale),
name: '',
name: initialName || '',
multiTurn: false,
});

Expand All @@ -98,11 +108,11 @@ export const CreateQnAFromUrlModal: React.FC<CreateQnAFromUrlModalProps> = (prop

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);
};

Expand Down Expand Up @@ -148,6 +158,7 @@ export const CreateQnAFromUrlModal: React.FC<CreateQnAFromUrlModalProps> = (prop

const handleDismiss = () => {
onDismiss?.();
onUpdateInitialName?.('');
actions.createQnAFromUrlDialogCancel({ projectId });
TelemetryClient.track('AddNewKnowledgeBaseCanceled');
};
Expand All @@ -171,13 +182,13 @@ export const CreateQnAFromUrlModal: React.FC<CreateQnAFromUrlModalProps> = (prop
return (
<Dialog
dialogContentProps={{
type: DialogType.close,
type: DialogType.normal,
title: <DialogTitle />,
styles: styles.dialog,
}}
hidden={false}
modalProps={{
isBlocking: true,
isBlocking: false,
styles: styles.modalCreateFromUrl,
}}
onDismiss={handleDismiss}
Expand All @@ -189,7 +200,7 @@ export const CreateQnAFromUrlModal: React.FC<CreateQnAFromUrlModalProps> = (prop
data-testid={`knowledgeLocationTextField-name`}
errorMessage={formDataErrors.name}
label={formatMessage('Knowledge base name')}
placeholder={formatMessage('Type a name that describes this content')}
placeholder={formatMessage('Type a name for this knowledge base')}
styles={textFieldKBNameFromUrl}
value={formData.name}
onChange={(e, name) => onChangeNameField(name)}
Expand Down Expand Up @@ -248,6 +259,7 @@ export const CreateQnAFromUrlModal: React.FC<CreateQnAFromUrlModalProps> = (prop
return;
}
onSubmit(removeEmptyUrls(formData));
onUpdateInitialName?.('');
TelemetryClient.track('AddNewKnowledgeBaseCompleted', { scratch: false });
}}
/>
Expand Down
2 changes: 1 addition & 1 deletion Composer/packages/client/src/components/QnA/EditQnAFromScratchModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export const EditQnAFromScratchModal: React.FC<EditQnAFromScratchModalProps> = (
data-testid={`knowledgeLocationTextField-name`}
errorMessage={formErrors.name}
label={formatMessage('Knowledge base name')}
placeholder={formatMessage('Type a name that describes this content')}
placeholder={formatMessage('Type a name for this knowledge base')}
styles={textFieldKBNameFromScratch}
value={formData.name}
onChange={(e, name) => updateName(name)}
Expand Down
4 changes: 2 additions & 2 deletions Composer/packages/client/src/components/QnA/EditQnAFromUrlModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export const EditQnAFromUrlModal: React.FC<EditQnAFromUrlModalProps> = (props) =
return (
<Dialog
dialogContentProps={{
type: DialogType.close,
type: DialogType.normal,
title: <DialogTitle />,
styles: styles.dialog,
}}
Expand All @@ -87,7 +87,7 @@ export const EditQnAFromUrlModal: React.FC<EditQnAFromUrlModalProps> = (props) =
data-testid={`knowledgeLocationTextField-name`}
errorMessage={formErrors.name}
label={formatMessage('Knowledge base name')}
placeholder={formatMessage('Type a name that describes this content')}
placeholder={formatMessage('Type a name for this knowledge base')}
styles={textFieldKBNameFromScratch}
value={formData.name}
onChange={(e, name) => updateName(name)}
Expand Down
4 changes: 4 additions & 0 deletions Composer/packages/client/src/components/QnA/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ export type CreateQnAFromModalProps = {
projectId: string;
dialogId: string;
qnaFiles: QnAFile[];
initialName?: string;
subscriptionKey?: string;
onUpdateInitialName?: (initialName: string) => void;
onDismiss?: () => void;
onSubmit: (formData: CreateQnAFormData) => void;
};
Expand All @@ -45,7 +47,9 @@ export type CreateQnAFromUrlModalProps = {
defaultLocale: string;
dialogId: string;
qnaFiles: QnAFile[];
initialName?: string;
subscriptionKey?: string;
onUpdateInitialName?: (initialName: string) => void;
onDismiss?: () => void;
onSubmit: (formData: CreateQnAFormData) => void;
};
Expand Down