Changes to notebook publish pane (#419)

* Changes to publish pane

* fixed format errors

* fixed failing test

Co-authored-by: Tanuj Mittal <tamitta@microsoft.com>

src/Explorer/Panes/PublishNotebookPaneAdapter.tsx

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

src/Explorer/Panes/PublishNotebookPaneComponent.tsx

@@ -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 {

src/Explorer/Panes/__snapshots__/PublishNotebookPaneComponent.test.tsx.snap

@@ -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>