made public gallery the first tab (#483)

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -47,8 +47,8 @@ export interface GalleryViewerComponentProps {
 }
 
 export enum GalleryTab {
-  OfficialSamples,
   PublicGallery,
+  OfficialSamples,
   Favorites,
   Published,
 }
@@ -151,15 +151,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   public render(): JSX.Element {
     this.traceViewGallery();
 
-    const tabs: GalleryTabInfo[] = [this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
-
-    tabs.push(
+    const tabs: GalleryTabInfo[] = [
       this.createPublicGalleryTab(
         GalleryTab.PublicGallery,
         this.state.publicNotebooks,
         this.state.isCodeOfConductAccepted
-      )
-    );
+      ),
+      this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks),
+    ];
 
     if (this.props.container) {
       tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
@@ -201,13 +200,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
     }
 
     switch (this.state.selectedTab) {
-      case GalleryTab.OfficialSamples:
-        if (!this.viewOfficialSamplesTraced) {
-          this.resetViewGalleryTabTracedFlags();
-          this.viewOfficialSamplesTraced = true;
-          trace(Action.NotebooksGalleryViewOfficialSamples);
-        }
-        break;
       case GalleryTab.PublicGallery:
         if (!this.viewPublicGalleryTraced) {
           this.resetViewGalleryTabTracedFlags();
@@ -215,6 +207,13 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
           trace(Action.NotebooksGalleryViewPublicGallery);
         }
         break;
+      case GalleryTab.OfficialSamples:
+        if (!this.viewOfficialSamplesTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewOfficialSamplesTraced = true;
+          trace(Action.NotebooksGalleryViewOfficialSamples);
+        }
+        break;
       case GalleryTab.Favorites:
         if (!this.viewFavoritesTraced) {
           this.resetViewGalleryTabTracedFlags();
@@ -444,14 +443,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
 
   private loadTabContent(tab: GalleryTab, searchText: string, sortBy: SortBy, offline: boolean): void {
     switch (tab) {
-      case GalleryTab.OfficialSamples:
-        this.loadSampleNotebooks(searchText, sortBy, offline);
-        break;
-
       case GalleryTab.PublicGallery:
         this.loadPublicNotebooks(searchText, sortBy, offline);
         break;
 
+      case GalleryTab.OfficialSamples:
+        this.loadSampleNotebooks(searchText, sortBy, offline);
+        break;
+
       case GalleryTab.Favorites:
         this.loadFavoriteNotebooks(searchText, sortBy, offline);
         break;

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

@@ -8,90 +8,6 @@ exports[`GalleryViewerComponent renders 1`] = `
     onLinkClick={[Function]}
     selectedKey="OfficialSamples"
   >
-    <PivotItem
-      headerText="Official samples"
-      itemKey="OfficialSamples"
-      key="OfficialSamples"
-      style={
-        Object {
-          "marginTop": 20,
-        }
-      }
-    >
-      <Stack
-        tokens={
-          Object {
-            "childrenGap": 10,
-          }
-        }
-      >
-        <Stack
-          horizontal={true}
-          tokens={
-            Object {
-              "childrenGap": 20,
-              "padding": 10,
-            }
-          }
-        >
-          <StackItem
-            grow={true}
-          >
-            <StyledSearchBoxBase
-              onChange={[Function]}
-              placeholder="Search"
-            />
-          </StackItem>
-          <StackItem>
-            <StyledLabelBase>
-              Sort by
-            </StyledLabelBase>
-          </StackItem>
-          <StackItem
-            styles={
-              Object {
-                "root": Object {
-                  "minWidth": 200,
-                },
-              }
-            }
-          >
-            <StyledWithResponsiveMode
-              onChange={[Function]}
-              options={
-                Array [
-                  Object {
-                    "key": 0,
-                    "text": "Most viewed",
-                  },
-                  Object {
-                    "key": 1,
-                    "text": "Most downloaded",
-                  },
-                  Object {
-                    "key": 3,
-                    "text": "Most recent",
-                  },
-                  Object {
-                    "key": 2,
-                    "text": "Most favorited",
-                  },
-                ]
-              }
-              selectedKey={0}
-            />
-          </StackItem>
-          <StackItem>
-            <InfoComponent />
-          </StackItem>
-        </Stack>
-        <StackItem>
-          <StyledSpinnerBase
-            size={3}
-          />
-        </StackItem>
-      </Stack>
-    </PivotItem>
     <PivotItem
       headerText="Public gallery"
       itemKey="PublicGallery"
@@ -180,6 +96,90 @@ exports[`GalleryViewerComponent renders 1`] = `
         </Stack>
       </div>
     </PivotItem>
+    <PivotItem
+      headerText="Official samples"
+      itemKey="OfficialSamples"
+      key="OfficialSamples"
+      style={
+        Object {
+          "marginTop": 20,
+        }
+      }
+    >
+      <Stack
+        tokens={
+          Object {
+            "childrenGap": 10,
+          }
+        }
+      >
+        <Stack
+          horizontal={true}
+          tokens={
+            Object {
+              "childrenGap": 20,
+              "padding": 10,
+            }
+          }
+        >
+          <StackItem
+            grow={true}
+          >
+            <StyledSearchBoxBase
+              onChange={[Function]}
+              placeholder="Search"
+            />
+          </StackItem>
+          <StackItem>
+            <StyledLabelBase>
+              Sort by
+            </StyledLabelBase>
+          </StackItem>
+          <StackItem
+            styles={
+              Object {
+                "root": Object {
+                  "minWidth": 200,
+                },
+              }
+            }
+          >
+            <StyledWithResponsiveMode
+              onChange={[Function]}
+              options={
+                Array [
+                  Object {
+                    "key": 0,
+                    "text": "Most viewed",
+                  },
+                  Object {
+                    "key": 1,
+                    "text": "Most downloaded",
+                  },
+                  Object {
+                    "key": 3,
+                    "text": "Most recent",
+                  },
+                  Object {
+                    "key": 2,
+                    "text": "Most favorited",
+                  },
+                ]
+              }
+              selectedKey={0}
+            />
+          </StackItem>
+          <StackItem>
+            <InfoComponent />
+          </StackItem>
+        </Stack>
+        <StackItem>
+          <StyledSpinnerBase
+            size={3}
+          />
+        </StackItem>
+      </Stack>
+    </PivotItem>
   </StyledPivotBase>
 </div>
 `;

src/Explorer/Explorer.tsx

@@ -2327,7 +2327,7 @@ export default class Explorer {
       account: userContext.databaseAccount,
       container: this,
       junoClient: this.notebookManager?.junoClient,
-      selectedTab: selectedTab || GalleryTab.OfficialSamples,
+      selectedTab: selectedTab || GalleryTab.PublicGallery,
       notebookUrl,
       galleryItem,
       isFavorite,

src/GalleryViewer/GalleryViewer.tsx

@@ -26,7 +26,7 @@ const onInit = async () => {
 
   const props: GalleryAndNotebookViewerComponentProps = {
     junoClient: new JunoClient(),
-    selectedTab: galleryViewerProps.selectedTab || GalleryTab.OfficialSamples,
+    selectedTab: galleryViewerProps.selectedTab || GalleryTab.PublicGallery,
     sortBy: galleryViewerProps.sortBy || SortBy.MostViewed,
     searchText: galleryViewerProps.searchText,
   };

src/Utils/GalleryUtils.ts

@@ -474,10 +474,10 @@ export function getNotebookViewerProps(search: string): NotebookViewerProps {
 
 export function getTabTitle(tab: GalleryTab): string {
   switch (tab) {
-    case GalleryTab.OfficialSamples:
-      return GalleryViewerComponent.OfficialSamplesTitle;
     case GalleryTab.PublicGallery:
       return GalleryViewerComponent.PublicGalleryTitle;
+    case GalleryTab.OfficialSamples:
+      return GalleryViewerComponent.OfficialSamplesTitle;
     case GalleryTab.Favorites:
       return GalleryViewerComponent.FavoritesTitle;
     case GalleryTab.Published: