Prettier 2.0 (#393)

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.test.tsx

@@ -20,7 +20,7 @@ describe("GalleryCardComponent", () => {
         views: 0,
         newCellId: undefined,
         policyViolations: undefined,
-        pendingScanJobIds: undefined
+        pendingScanJobIds: undefined,
       },
       isFavorite: false,
       showDownload: true,
@@ -30,7 +30,7 @@ describe("GalleryCardComponent", () => {
       onFavoriteClick: undefined,
       onUnfavoriteClick: undefined,
       onDownloadClick: undefined,
-      onDeleteClick: undefined
+      onDeleteClick: undefined,
     };
 
     const wrapper = shallow(<GalleryCardComponent {...props} />);

src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx

@@ -12,7 +12,7 @@ import {
   Button,
   LinkBase,
   Separator,
-  TooltipHost
+  TooltipHost,
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
@@ -47,7 +47,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
     const options: Intl.DateTimeFormatOptions = {
       year: "numeric",
       month: "short",
-      day: "numeric"
+      day: "numeric",
     };
     const dateString = new Date(this.props.data.created).toLocaleString("default", options);
     const cardTitle = FileSystemUtil.stripExtension(this.props.data.name, "ipynb");
@@ -57,7 +57,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
         aria-label={cardTitle}
         data-is-focusable="true"
         tokens={{ width: GalleryCardComponent.CARD_WIDTH, childrenGap: 0 }}
-        onClick={event => this.onClick(event, this.props.onClick)}
+        onClick={(event) => this.onClick(event, this.props.onClick)}
       >
         <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
           <Persona
@@ -81,7 +81,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
           <Text variant="small" nowrap>
             {this.props.data.tags?.map((tag, index, array) => (
               <span key={tag}>
-                <Link onClick={event => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
+                <Link onClick={(event) => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
                 {index === array.length - 1 ? <></> : ", "}
               </span>
             ))}
@@ -92,8 +92,8 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
               root: {
                 fontWeight: FontWeights.semibold,
                 paddingTop: GalleryCardComponent.cardItemGapSmall,
-                paddingBottom: GalleryCardComponent.cardItemGapSmall
-              }
+                paddingBottom: GalleryCardComponent.cardItemGapSmall,
+              },
             }}
             nowrap
           >
@@ -117,8 +117,8 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
             styles={{
               root: {
                 marginLeft: GalleryCardComponent.cardItemGapBig,
-                marginRight: GalleryCardComponent.cardItemGapBig
-              }
+                marginRight: GalleryCardComponent.cardItemGapBig,
+              },
             }}
           >
             <Separator styles={{ root: { padding: 0, height: 1 } }} />
@@ -176,7 +176,7 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
           iconProps={{ iconName }}
           title={title}
           ariaLabel={title}
-          onClick={event => this.onClick(event, activate)}
+          onClick={(event) => this.onClick(event, activate)}
         />
       </TooltipHost>
     );

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.test.tsx

@@ -12,11 +12,11 @@ describe("CodeOfConductComponent", () => {
     const junoClient = new JunoClient(undefined);
     junoClient.acceptCodeOfConduct = jest.fn().mockReturnValue({
       status: HttpStatusCodes.OK,
-      data: true
+      data: true,
     });
     codeOfConductProps = {
       junoClient: junoClient,
-      onAcceptCodeOfConduct: jest.fn()
+      onAcceptCodeOfConduct: jest.fn(),
     };
   });
 
@@ -27,10 +27,7 @@ describe("CodeOfConductComponent", () => {
 
   it("onAcceptedCodeOfConductCalled", async () => {
     const wrapper = shallow(<CodeOfConductComponent {...codeOfConductProps} />);
-    wrapper
-      .find(".genericPaneSubmitBtn")
-      .first()
-      .simulate("click");
+    wrapper.find(".genericPaneSubmitBtn").first().simulate("click");
     await Promise.resolve();
     expect(codeOfConductProps.onAcceptCodeOfConduct).toBeCalled();
   });

src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx

@@ -24,7 +24,7 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
     super(props);
 
     this.state = {
-      readCodeOfConduct: false
+      readCodeOfConduct: false,
     };
 
     this.descriptionPara1 = "Azure CosmosDB Notebook Gallery - Code of Conduct and Privacy Statement";
@@ -81,11 +81,11 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
             styles={{
               label: {
                 margin: 0,
-                padding: "2 0 2 0"
+                padding: "2 0 2 0",
               },
               text: {
-                fontSize: 12
-              }
+                fontSize: 12,
+              },
             }}
             label="I have read and accepted the code of conduct and privacy statement"
             onChange={this.onChangeCheckbox}

src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponent.tsx

@@ -1,114 +1,114 @@
-import * as React from "react";
-import { JunoClient, IGalleryItem } from "../../../Juno/JunoClient";
-import { GalleryTab, SortBy, GalleryViewerComponentProps, GalleryViewerComponent } from "./GalleryViewerComponent";
-import { NotebookViewerComponentProps, NotebookViewerComponent } from "../NotebookViewer/NotebookViewerComponent";
-import * as GalleryUtils from "../../../Utils/GalleryUtils";
-import Explorer from "../../Explorer";
-
-export interface GalleryAndNotebookViewerComponentProps {
-  container?: Explorer;
-  junoClient: JunoClient;
-  notebookUrl?: string;
-  galleryItem?: IGalleryItem;
-  isFavorite?: boolean;
-  selectedTab: GalleryTab;
-  sortBy: SortBy;
-  searchText: string;
-}
-
-interface GalleryAndNotebookViewerComponentState {
-  notebookUrl: string;
-  galleryItem: IGalleryItem;
-  isFavorite: boolean;
-  selectedTab: GalleryTab;
-  sortBy: SortBy;
-  searchText: string;
-}
-
-export class GalleryAndNotebookViewerComponent extends React.Component<
-  GalleryAndNotebookViewerComponentProps,
-  GalleryAndNotebookViewerComponentState
-> {
-  constructor(props: GalleryAndNotebookViewerComponentProps) {
-    super(props);
-
-    this.state = {
-      notebookUrl: props.notebookUrl,
-      galleryItem: props.galleryItem,
-      isFavorite: props.isFavorite,
-      selectedTab: props.selectedTab,
-      sortBy: props.sortBy,
-      searchText: props.searchText
-    };
-  }
-
-  public render(): JSX.Element {
-    if (this.state.notebookUrl) {
-      const props: NotebookViewerComponentProps = {
-        container: this.props.container,
-        junoClient: this.props.junoClient,
-        notebookUrl: this.state.notebookUrl,
-        galleryItem: this.state.galleryItem,
-        isFavorite: this.state.isFavorite,
-        backNavigationText: GalleryUtils.getTabTitle(this.state.selectedTab),
-        onBackClick: this.onBackClick,
-        onTagClick: this.loadTaggedItems
-      };
-
-      return <NotebookViewerComponent {...props} />;
-    }
-
-    const props: GalleryViewerComponentProps = {
-      container: this.props.container,
-      junoClient: this.props.junoClient,
-      selectedTab: this.state.selectedTab,
-      sortBy: this.state.sortBy,
-      searchText: this.state.searchText,
-      openNotebook: this.openNotebook,
-      onSelectedTabChange: this.onSelectedTabChange,
-      onSortByChange: this.onSortByChange,
-      onSearchTextChange: this.onSearchTextChange
-    };
-
-    return <GalleryViewerComponent {...props} />;
-  }
-
-  private onBackClick = (): void => {
-    this.setState({
-      notebookUrl: undefined
-    });
-  };
-
-  private loadTaggedItems = (tag: string): void => {
-    this.setState({
-      notebookUrl: undefined,
-      searchText: tag
-    });
-  };
-
-  private openNotebook = (data: IGalleryItem, isFavorite: boolean): void => {
-    this.setState({
-      notebookUrl: this.props.junoClient.getNotebookContentUrl(data.id),
-      galleryItem: data,
-      isFavorite
-    });
-  };
-
-  private onSelectedTabChange = (selectedTab: GalleryTab): void => {
-    this.setState({
-      selectedTab
-    });
-  };
-
-  private onSortByChange = (sortBy: SortBy): void => {
-    this.setState({
-      sortBy
-    });
-  };
-
-  private onSearchTextChange = (searchText: string): void => {
-    this.setState({
-      searchText
-    });
-  };
-}
+import * as React from "react";
+import { JunoClient, IGalleryItem } from "../../../Juno/JunoClient";
+import { GalleryTab, SortBy, GalleryViewerComponentProps, GalleryViewerComponent } from "./GalleryViewerComponent";
+import { NotebookViewerComponentProps, NotebookViewerComponent } from "../NotebookViewer/NotebookViewerComponent";
+import * as GalleryUtils from "../../../Utils/GalleryUtils";
+import Explorer from "../../Explorer";
+
+export interface GalleryAndNotebookViewerComponentProps {
+  container?: Explorer;
+  junoClient: JunoClient;
+  notebookUrl?: string;
+  galleryItem?: IGalleryItem;
+  isFavorite?: boolean;
+  selectedTab: GalleryTab;
+  sortBy: SortBy;
+  searchText: string;
+}
+
+interface GalleryAndNotebookViewerComponentState {
+  notebookUrl: string;
+  galleryItem: IGalleryItem;
+  isFavorite: boolean;
+  selectedTab: GalleryTab;
+  sortBy: SortBy;
+  searchText: string;
+}
+
+export class GalleryAndNotebookViewerComponent extends React.Component<
+  GalleryAndNotebookViewerComponentProps,
+  GalleryAndNotebookViewerComponentState
+> {
+  constructor(props: GalleryAndNotebookViewerComponentProps) {
+    super(props);
+
+    this.state = {
+      notebookUrl: props.notebookUrl,
+      galleryItem: props.galleryItem,
+      isFavorite: props.isFavorite,
+      selectedTab: props.selectedTab,
+      sortBy: props.sortBy,
+      searchText: props.searchText,
+    };
+  }
+
+  public render(): JSX.Element {
+    if (this.state.notebookUrl) {
+      const props: NotebookViewerComponentProps = {
+        container: this.props.container,
+        junoClient: this.props.junoClient,
+        notebookUrl: this.state.notebookUrl,
+        galleryItem: this.state.galleryItem,
+        isFavorite: this.state.isFavorite,
+        backNavigationText: GalleryUtils.getTabTitle(this.state.selectedTab),
+        onBackClick: this.onBackClick,
+        onTagClick: this.loadTaggedItems,
+      };
+
+      return <NotebookViewerComponent {...props} />;
+    }
+
+    const props: GalleryViewerComponentProps = {
+      container: this.props.container,
+      junoClient: this.props.junoClient,
+      selectedTab: this.state.selectedTab,
+      sortBy: this.state.sortBy,
+      searchText: this.state.searchText,
+      openNotebook: this.openNotebook,
+      onSelectedTabChange: this.onSelectedTabChange,
+      onSortByChange: this.onSortByChange,
+      onSearchTextChange: this.onSearchTextChange,
+    };
+
+    return <GalleryViewerComponent {...props} />;
+  }
+
+  private onBackClick = (): void => {
+    this.setState({
+      notebookUrl: undefined,
+    });
+  };
+
+  private loadTaggedItems = (tag: string): void => {
+    this.setState({
+      notebookUrl: undefined,
+      searchText: tag,
+    });
+  };
+
+  private openNotebook = (data: IGalleryItem, isFavorite: boolean): void => {
+    this.setState({
+      notebookUrl: this.props.junoClient.getNotebookContentUrl(data.id),
+      galleryItem: data,
+      isFavorite,
+    });
+  };
+
+  private onSelectedTabChange = (selectedTab: GalleryTab): void => {
+    this.setState({
+      selectedTab,
+    });
+  };
+
+  private onSortByChange = (sortBy: SortBy): void => {
+    this.setState({
+      sortBy,
+    });
+  };
+
+  private onSearchTextChange = (searchText: string): void => {
+    this.setState({
+      searchText,
+    });
+  };
+}

src/Explorer/Controls/NotebookGallery/GalleryAndNotebookViewerComponentAdapter.tsx

@@ -1,23 +1,23 @@
-import ko from "knockout";
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import {
-  GalleryAndNotebookViewerComponentProps,
-  GalleryAndNotebookViewerComponent
-} from "./GalleryAndNotebookViewerComponent";
-
-export class GalleryAndNotebookViewerComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-
-  constructor(private props: GalleryAndNotebookViewerComponentProps) {
-    this.parameters = ko.observable<number>(Date.now());
-  }
-
-  public renderComponent(): JSX.Element {
-    return <GalleryAndNotebookViewerComponent {...this.props} />;
-  }
-
-  public triggerRender(): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-}
+import ko from "knockout";
+import * as React from "react";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import {
+  GalleryAndNotebookViewerComponentProps,
+  GalleryAndNotebookViewerComponent,
+} from "./GalleryAndNotebookViewerComponent";
+
+export class GalleryAndNotebookViewerComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+
+  constructor(private props: GalleryAndNotebookViewerComponentProps) {
+    this.parameters = ko.observable<number>(Date.now());
+  }
+
+  public renderComponent(): JSX.Element {
+    return <GalleryAndNotebookViewerComponent {...this.props} />;
+  }
+
+  public triggerRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+}

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.test.tsx

@@ -12,7 +12,7 @@ describe("GalleryViewerComponent", () => {
       openNotebook: undefined,
       onSelectedTabChange: undefined,
       onSortByChange: undefined,
-      onSearchTextChange: undefined
+      onSearchTextChange: undefined,
     };
 
     const wrapper = shallow(<GalleryViewerComponent {...props} />);

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -14,7 +14,7 @@ import {
   PivotItem,
   SearchBox,
   Stack,
-  Text
+  Text,
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem, IJunoResponse, IPublicGalleryData, JunoClient } from "../../../Juno/JunoClient";
@@ -44,14 +44,14 @@ export enum GalleryTab {
   OfficialSamples,
   PublicGallery,
   Favorites,
-  Published
+  Published,
 }
 
 export enum SortBy {
   MostViewed,
   MostDownloaded,
   MostFavorited,
-  MostRecent
+  MostRecent,
 }
 
 interface GalleryViewerComponentState {
@@ -106,27 +106,27 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       sortBy: props.sortBy,
       searchText: props.searchText,
       dialogProps: undefined,
-      isCodeOfConductAccepted: undefined
+      isCodeOfConductAccepted: undefined,
     };
 
     this.sortingOptions = [
       {
         key: SortBy.MostViewed,
-        text: GalleryViewerComponent.mostViewedText
+        text: GalleryViewerComponent.mostViewedText,
       },
       {
         key: SortBy.MostDownloaded,
-        text: GalleryViewerComponent.mostDownloadedText
+        text: GalleryViewerComponent.mostDownloadedText,
       },
       {
         key: SortBy.MostRecent,
-        text: GalleryViewerComponent.mostRecentText
-      }
+        text: GalleryViewerComponent.mostRecentText,
+      },
     ];
     if (this.props.container?.isGalleryPublishEnabled()) {
       this.sortingOptions.push({
         key: SortBy.MostFavorited,
-        text: GalleryViewerComponent.mostFavoritedText
+        text: GalleryViewerComponent.mostFavoritedText,
       });
     }
 
@@ -158,14 +158,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
     const pivotProps: IPivotProps = {
       onLinkClick: this.onPivotChange,
-      selectedKey: GalleryTab[this.state.selectedTab]
+      selectedKey: GalleryTab[this.state.selectedTab],
     };
 
-    const pivotItems = tabs.map(tab => {
+    const pivotItems = tabs.map((tab) => {
       const pivotItemProps: IPivotItemProps = {
         itemKey: GalleryTab[tab.tab],
         style: { marginTop: 20 },
-        headerText: GalleryUtils.getTabTitle(tab.tab)
+        headerText: GalleryUtils.getTabTitle(tab.tab),
       };
 
       return (
@@ -201,7 +201,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private createSamplesTab = (tab: GalleryTab, data: IGalleryItem[]): GalleryTabInfo => {
     return {
       tab,
-      content: this.createSearchBarHeader(this.createCardsTabContent(data))
+      content: this.createSearchBarHeader(this.createCardsTabContent(data)),
     };
   };
 
@@ -212,7 +212,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   ): GalleryTabInfo {
     return {
       tab,
-      content: this.createPublicGalleryTabContent(data, acceptedCodeOfConduct)
+      content: this.createPublicGalleryTabContent(data, acceptedCodeOfConduct),
     };
   }
 
@@ -225,7 +225,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
             "You have not liked anything",
             "Like any notebook from Official Samples or Public gallery"
           )
-        : this.createSearchBarHeader(this.createCardsTabContent(data))
+        : this.createSearchBarHeader(this.createCardsTabContent(data)),
     };
   }
 
@@ -238,7 +238,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
             "You have not published anything",
             "Publish your sample notebooks to share your published work with others"
           )
-        : this.createPublishedNotebooksTabContent(data)
+        : this.createPublishedNotebooksTabContent(data),
     };
   };
 
@@ -342,7 +342,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
             <th>Name</th>
             <th>Policy violations</th>
           </tr>
-          {data.map(item => (
+          {data.map((item) => (
             <tr key={`policy-violations-tr-${item.id}`}>
               <td>{item.name}</td>
               <td>{item.policyViolations.join(", ")}</td>
@@ -391,7 +391,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     }
 
     this.setState({
-      sampleNotebooks: this.sampleNotebooks && [...this.sort(sortBy, this.search(searchText, this.sampleNotebooks))]
+      sampleNotebooks: this.sampleNotebooks && [...this.sort(sortBy, this.search(searchText, this.sampleNotebooks))],
     });
   }
 
@@ -418,7 +418,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
     this.setState({
       publicNotebooks: this.publicNotebooks && [...this.sort(sortBy, this.search(searchText, this.publicNotebooks))],
-      isCodeOfConductAccepted: this.isCodeOfConductAccepted
+      isCodeOfConductAccepted: this.isCodeOfConductAccepted,
     });
   }
 
@@ -438,8 +438,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
     this.setState({
       favoriteNotebooks: this.favoriteNotebooks && [
-        ...this.sort(sortBy, this.search(searchText, this.favoriteNotebooks))
-      ]
+        ...this.sort(sortBy, this.search(searchText, this.favoriteNotebooks)),
+      ],
     });
 
     // Refresh favorite button state
@@ -464,14 +464,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
     this.setState({
       publishedNotebooks: this.publishedNotebooks && [
-        ...this.sort(sortBy, this.search(searchText, this.publishedNotebooks))
-      ]
+        ...this.sort(sortBy, this.search(searchText, this.publishedNotebooks)),
+      ],
     });
   }
 
   private search(searchText: string, data: IGalleryItem[]): IGalleryItem[] {
     if (searchText) {
-      return data?.filter(item => this.isGalleryItemPresent(searchText, item));
+      return data?.filter((item) => this.isGalleryItemPresent(searchText, item));
     }
 
     return data;
@@ -482,7 +482,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     const searchData: string[] = [item.author.toUpperCase(), item.description.toUpperCase(), item.name.toUpperCase()];
 
     if (item.tags) {
-      searchData.push(...item.tags.map(tag => tag.toUpperCase()));
+      searchData.push(...item.tags.map((tag) => tag.toUpperCase()));
     }
 
     for (const data of searchData) {
@@ -525,7 +525,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   }
 
   private replaceGalleryItem(item: IGalleryItem, items?: IGalleryItem[]): void {
-    const index = items?.findIndex(value => value.id === item.id);
+    const index = items?.findIndex((value) => value.id === item.id);
     if (index !== -1) {
       items?.splice(index, 1, item);
     }
@@ -539,14 +539,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
     return {
       height: visibleRect.height,
-      itemCount: this.columnCount * this.rowCount
+      itemCount: this.columnCount * this.rowCount,
     };
   };
 
   private onRenderCell = (data?: IGalleryItem): JSX.Element => {
     let isFavorite: boolean;
     if (this.props.container?.isGalleryPublishEnabled()) {
-      isFavorite = this.favoriteNotebooks?.find(item => item.id === data.id) !== undefined;
+      isFavorite = this.favoriteNotebooks?.find((item) => item.id === data.id) !== undefined;
     }
     const props: GalleryCardComponentProps = {
       data,
@@ -558,7 +558,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
       onFavoriteClick: () => this.favoriteItem(data),
       onUnfavoriteClick: () => this.unfavoriteItem(data),
       onDownloadClick: () => this.downloadItem(data),
-      onDeleteClick: () => this.deleteItem(data)
+      onDeleteClick: () => this.deleteItem(data),
     };
 
     return (
@@ -571,7 +571,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private loadTaggedItems = (tag: string): void => {
     const searchText = tag;
     this.setState({
-      searchText
+      searchText,
     });
 
     this.loadTabContent(this.state.selectedTab, searchText, this.state.sortBy, true);
@@ -591,18 +591,20 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
   private unfavoriteItem = async (data: IGalleryItem): Promise<void> => {
     GalleryUtils.unfavoriteItem(this.props.container, this.props.junoClient, data, (item: IGalleryItem) => {
-      this.favoriteNotebooks = this.favoriteNotebooks?.filter(value => value.id !== item.id);
+      this.favoriteNotebooks = this.favoriteNotebooks?.filter((value) => value.id !== item.id);
       this.refreshSelectedTab(item);
     });
   };
 
   private downloadItem = async (data: IGalleryItem): Promise<void> => {
-    GalleryUtils.downloadItem(this.props.container, this.props.junoClient, data, item => this.refreshSelectedTab(item));
+    GalleryUtils.downloadItem(this.props.container, this.props.junoClient, data, (item) =>
+      this.refreshSelectedTab(item)
+    );
   };
 
   private deleteItem = async (data: IGalleryItem): Promise<void> => {
-    GalleryUtils.deleteItem(this.props.container, this.props.junoClient, data, item => {
-      this.publishedNotebooks = this.publishedNotebooks?.filter(notebook => item.id !== notebook.id);
+    GalleryUtils.deleteItem(this.props.container, this.props.junoClient, data, (item) => {
+      this.publishedNotebooks = this.publishedNotebooks?.filter((notebook) => item.id !== notebook.id);
       this.refreshSelectedTab(item);
     });
   };
@@ -612,7 +614,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     const searchText: string = undefined;
     this.setState({
       selectedTab,
-      searchText
+      searchText,
     });
 
     this.loadTabContent(selectedTab, searchText, this.state.sortBy, false);
@@ -622,7 +624,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private onSearchBoxChange = (event?: React.ChangeEvent<HTMLInputElement>, newValue?: string): void => {
     const searchText = newValue;
     this.setState({
-      searchText
+      searchText,
     });
 
     this.loadTabContent(this.state.selectedTab, searchText, this.state.sortBy, true);
@@ -632,7 +634,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   private onDropdownChange = (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
     const sortBy = option.key as SortBy;
     this.setState({
-      sortBy
+      sortBy,
     });
 
     this.loadTabContent(this.state.selectedTab, this.state.searchText, sortBy, true);