Changes to notebook publish pane (#419)
* Changes to publish pane * fixed format errors * fixed failing test Co-authored-by: Tanuj Mittal <tamitta@microsoft.com>
This commit is contained in:
parent
db7c45c9b8
commit
3b6fda4fa5
|
@ -70,7 +70,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
|
|||
onChangeDescription: (newValue: string) => (this.description = newValue),
|
||||
onChangeTags: (newValue: string) => (this.tags = newValue),
|
||||
onChangeImageSrc: (newValue: string) => (this.imageSrc = newValue),
|
||||
onError: this.createFormErrorForLargeImageSelection,
|
||||
onError: this.createFormError,
|
||||
clearFormError: this.clearFormError,
|
||||
};
|
||||
|
||||
|
@ -146,11 +146,15 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
|
|||
|
||||
let startKey: number;
|
||||
|
||||
try {
|
||||
if (!this.name || !this.description || !this.author) {
|
||||
throw new Error("Name, description, and author are required");
|
||||
}
|
||||
if (!this.name || !this.description || !this.author || !this.imageSrc) {
|
||||
const formError = `Failed to publish ${this.name} to gallery`;
|
||||
const formErrorDetail = "Name, description, author and cover image are required";
|
||||
this.createFormError(formError, formErrorDetail, "PublishNotebookPaneAdapter/submit");
|
||||
this.isExecuting = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
startKey = traceStart(Action.NotebooksGalleryPublish, {
|
||||
databaseAccountName: this.container.databaseAccount()?.name,
|
||||
defaultExperience: this.container.defaultExperience(),
|
||||
|
@ -217,7 +221,7 @@ export class PublishNotebookPaneAdapter implements ReactAdapter {
|
|||
this.close();
|
||||
}
|
||||
|
||||
private createFormErrorForLargeImageSelection = (formError: string, formErrorDetail: string, area: string): void => {
|
||||
private createFormError = (formError: string, formErrorDetail: string, area: string): void => {
|
||||
this.formError = formError;
|
||||
this.formErrorDetail = formErrorDetail;
|
||||
handleError(formErrorDetail, area, formError);
|
||||
|
|
|
@ -54,7 +54,7 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
type: ImageTypes.Url,
|
||||
type: ImageTypes.CustomImage,
|
||||
notebookName: props.notebookName,
|
||||
notebookDescription: "",
|
||||
notebookTags: "",
|
||||
|
@ -120,6 +120,7 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
|
|||
this.thumbnailUrlProps = {
|
||||
label: "Cover image url",
|
||||
ariaLabel: "Cover image url",
|
||||
required: true,
|
||||
onChange: (event, newValue) => {
|
||||
this.props.onChangeImageSrc(newValue);
|
||||
this.setState({ imageSrc: newValue });
|
||||
|
@ -140,7 +141,7 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
|
|||
this.props.onError(formError, formErrorDetail, area);
|
||||
};
|
||||
|
||||
const options: ImageTypes[] = [ImageTypes.Url, ImageTypes.CustomImage];
|
||||
const options: ImageTypes[] = [ImageTypes.CustomImage, ImageTypes.Url];
|
||||
|
||||
if (this.props.notebookParentDomElement) {
|
||||
options.push(ImageTypes.TakeScreenshot);
|
||||
|
@ -151,10 +152,12 @@ export class PublishNotebookPaneComponent extends React.Component<PublishNoteboo
|
|||
|
||||
this.thumbnailSelectorProps = {
|
||||
label: "Cover image",
|
||||
defaultSelectedKey: ImageTypes.Url,
|
||||
defaultSelectedKey: ImageTypes.CustomImage,
|
||||
ariaLabel: "Cover image",
|
||||
options: options.map((value: string) => ({ text: value, key: value })),
|
||||
onChange: async (event, options) => {
|
||||
this.setState({ imageSrc: undefined });
|
||||
this.props.onChangeImageSrc(undefined);
|
||||
this.props.clearFormError();
|
||||
if (options.text === ImageTypes.TakeScreenshot) {
|
||||
try {
|
||||
|
|
|
@ -52,28 +52,29 @@ exports[`PublishNotebookPaneComponent renders 1`] = `
|
|||
<StackItem>
|
||||
<StyledWithResponsiveMode
|
||||
ariaLabel="Cover image"
|
||||
defaultSelectedKey="URL"
|
||||
defaultSelectedKey="Custom Image"
|
||||
label="Cover image"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"key": "URL",
|
||||
"text": "URL",
|
||||
},
|
||||
Object {
|
||||
"key": "Custom Image",
|
||||
"text": "Custom Image",
|
||||
},
|
||||
Object {
|
||||
"key": "URL",
|
||||
"text": "URL",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem>
|
||||
<StyledTextFieldBase
|
||||
ariaLabel="Cover image url"
|
||||
label="Cover image url"
|
||||
<input
|
||||
accept="image/*"
|
||||
id="selectImageFile"
|
||||
onChange={[Function]}
|
||||
type="file"
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem>
|
||||
|
|
Loading…
Reference in New Issue