More robust fix

* Use graphql in GitHubClient

* Replace usage of Array.find with _.find

.eslintignore

@@ -343,7 +343,7 @@ src/Explorer/Controls/LibraryManagement/LibraryManageComponentAdapter.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
 src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
-src/Explorer/Controls/NotebookViewer/NotebookViewer.tsx
+src/NotebookViewer/NotebookViewer.tsx
 src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
 src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
 src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx

package-lock.json

@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@azure/cosmos": {
-      "version": "3.6.3",
+      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-3.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/@azure/cosmos/-/cosmos-3.7.0.tgz",
-      "integrity": "sha512-JoCDxl0TnL6EHL4xD3KC9r2bMivK13q1jl7h69wd/YFLlt3aBTTCehtAX+y4alNSENpL53XdRdw/cna0mI2XDw==",
+      "integrity": "sha512-3SRxnmy6NncdX5eYqGuRTack52hloS9YhQ0aOKwWJ8Z4dDSrVH3XB2Mcp/WokoIpVm0Bq5nUC8FsvLBZKfRkyg==",
       "requires": {
         "@types/debug": "^4.1.4",
         "debug": "^4.1.1",
@@ -18,7 +18,14 @@
         "priorityqueuejs": "^1.0.0",
         "semaphore": "^1.0.5",
         "tslib": "^1.10.0",
-        "uuid": "^3.3.2"
+        "uuid": "^8.1.0"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.1.0.tgz",
+          "integrity": "sha512-CI18flHDznR0lq54xBycOVmphdCYnQLKn8abKn7PXUiKUGdEd+/l9LWNJmugXel4hXq7S+RMNl34ecyC9TntWg=="
+        }
       }
     },
     "@azure/cosmos-language-service": {
@@ -1159,11 +1166,6 @@
         "minimist": "^1.2.0"
       }
     },
-    "@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
-    },
     "@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -1604,96 +1606,6 @@
         }
       }
     },
-    "@material-ui/core": {
-      "version": "4.9.10",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.9.10.tgz",
-      "integrity": "sha512-CQuZU9Y10RkwSdxjn785kw2EPcXhv5GKauuVQufR9LlD37kjfn21Im1yvr6wsUzn81oLhEvVPz727UWC0gbqxg==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.9.10",
-        "@material-ui/system": "^4.9.10",
-        "@material-ui/types": "^5.0.1",
-        "@material-ui/utils": "^4.9.6",
-        "@types/react-transition-group": "^4.2.0",
-        "clsx": "^1.0.4",
-        "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "^1.16.1-lts",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0",
-        "react-transition-group": "^4.3.0"
-      },
-      "dependencies": {
-        "dom-helpers": {
-          "version": "5.1.4",
-          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
-          "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
-          "requires": {
-            "@babel/runtime": "^7.8.7",
-            "csstype": "^2.6.7"
-          }
-        },
-        "react-transition-group": {
-          "version": "4.4.1",
-          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
-          "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
-          "requires": {
-            "@babel/runtime": "^7.5.5",
-            "dom-helpers": "^5.0.1",
-            "loose-envify": "^1.4.0",
-            "prop-types": "^15.6.2"
-          }
-        }
-      }
-    },
-    "@material-ui/styles": {
-      "version": "4.9.14",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.14.tgz",
-      "integrity": "sha512-zecwWKgRU2VzdmutNovPB4s5LKI0TWyZKc/AHfPu9iY8tg4UoLjpa4Rn9roYrRfuTbBZHI6b0BXcQ8zkis0nzQ==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "^5.1.0",
-        "@material-ui/utils": "^4.9.6",
-        "clsx": "^1.0.4",
-        "csstype": "^2.5.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.0.3",
-        "jss-plugin-camel-case": "^10.0.3",
-        "jss-plugin-default-unit": "^10.0.3",
-        "jss-plugin-global": "^10.0.3",
-        "jss-plugin-nested": "^10.0.3",
-        "jss-plugin-props-sort": "^10.0.3",
-        "jss-plugin-rule-value-function": "^10.0.3",
-        "jss-plugin-vendor-prefixer": "^10.0.3",
-        "prop-types": "^15.7.2"
-      }
-    },
-    "@material-ui/system": {
-      "version": "4.9.14",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz",
-      "integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.9.6",
-        "csstype": "^2.5.2",
-        "prop-types": "^15.7.2"
-      }
-    },
-    "@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
-    },
-    "@material-ui/utils": {
-      "version": "4.9.12",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.9.12.tgz",
-      "integrity": "sha512-/0rgZPEOcZq5CFA4+4n6Q6zk7fi8skHhH2Bcra8R3epoJEYy5PL55LuMazPtPH1oKeRausDV/Omz4BbgFsn1HQ==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0"
-      }
-    },
     "@microsoft/applicationinsights-analytics-js": {
       "version": "2.5.4",
       "resolved": "https://registry.npmjs.org/@microsoft/applicationinsights-analytics-js/-/applicationinsights-analytics-js-2.5.4.tgz",
@@ -2517,32 +2429,42 @@
       }
     },
     "@octokit/auth-token": {
-      "version": "2.4.0",
+      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-2.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-2.4.1.tgz",
-      "integrity": "sha512-eoOVMjILna7FVQf96iWc3+ZtE/ZT6y8ob8ZzcqKY1ibSQCnu4O/B7pJvzMx5cyZ/RjAff6DAdEb0O0Cjcxidkg==",
+      "integrity": "sha512-NB81O5h39KfHYGtgfWr2booRxp2bWOJoqbWwbyUg2hw6h35ArWYlAST5B3XwAkbdcx13yt84hFXyFP5X0QToWA==",
       "requires": {
-        "@octokit/types": "^2.0.0"
+        "@octokit/types": "^4.0.1"
+      },
+      "dependencies": {
+        "@octokit/types": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-4.0.2.tgz",
+          "integrity": "sha512-+4X6qfhT/fk/5FD66395NrFLxCzD6FsGlpPwfwvnukdyfYbhiZB/FJltiT1XM5Q63rGGBSf9FPaNV3WpNHm54A==",
+          "requires": {
+            "@types/node": ">= 8"
+          }
+        }
       }
     },
     "@octokit/core": {
-      "version": "2.5.0",
+      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-2.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-2.5.3.tgz",
-      "integrity": "sha512-uvzmkemQrBgD8xuGbjhxzJN1darJk9L2cS+M99cHrDG2jlSVpxNJVhoV86cXdYBqdHCc9Z995uLCczaaHIYA6Q==",
+      "integrity": "sha512-23AHK9xBW0v79Ck8h5U+5iA4MW7aosqv+Yr6uZXolVGNzzHwryNH5wM386/6+etiKUTwLFZTqyMU9oQpIBZcFA==",
       "requires": {
         "@octokit/auth-token": "^2.4.0",
         "@octokit/graphql": "^4.3.1",
         "@octokit/request": "^5.4.0",
-        "@octokit/types": "^2.0.0",
+        "@octokit/types": "^4.0.1",
         "before-after-hook": "^2.1.0",
         "universal-user-agent": "^5.0.0"
       }
     },
     "@octokit/endpoint": {
-      "version": "6.0.1",
+      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-6.0.2.tgz",
-      "integrity": "sha512-pOPHaSz57SFT/m3R5P8MUu4wLPszokn5pXcB/pzavLTQf2jbU+6iayTvzaY6/BiotuRS0qyEUkx3QglT4U958A==",
+      "integrity": "sha512-xs1mmCEZ2y4shXCpFjNq3UbmNR+bLzxtZim2L0zfEtj9R6O6kc4qLDvYw66hvO6lUsYzPTM5hMkltbuNAbRAcQ==",
       "requires": {
-        "@octokit/types": "^2.11.1",
+        "@octokit/types": "^4.0.1",
         "is-plain-object": "^3.0.0",
         "universal-user-agent": "^5.0.0"
       },
@@ -2563,21 +2485,21 @@
       }
     },
     "@octokit/graphql": {
-      "version": "4.4.0",
+      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-4.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-4.5.0.tgz",
-      "integrity": "sha512-Du3hAaSROQ8EatmYoSAJjzAz3t79t9Opj/WY1zUgxVUGfIKn0AEjg+hlOLscF6fv6i/4y/CeUvsWgIfwMkTccw==",
+      "integrity": "sha512-StJWfn0M1QfhL3NKBz31e1TdDNZrHLLS57J2hin92SIfzlOVBuUaRkp31AGkGOAFOAVtyEX6ZiZcsjcJDjeb5g==",
       "requires": {
         "@octokit/request": "^5.3.0",
-        "@octokit/types": "^2.0.0",
+        "@octokit/types": "^4.0.1",
         "universal-user-agent": "^5.0.0"
       }
     },
     "@octokit/plugin-paginate-rest": {
-      "version": "2.2.0",
+      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.2.1.tgz",
-      "integrity": "sha512-KoNxC3PLNar8UJwR+1VMQOw2IoOrrFdo5YOiDKnBhpVbKpw+zkBKNMNKwM44UWL25Vkn0Sl3nYIEGKY+gW5ebw==",
+      "integrity": "sha512-/tHpIF2XpN40AyhIq295YRjb4g7Q5eKob0qM3thYJ0Z+CgmNsWKM/fWse/SUR8+LdprP1O4ZzSKQE+71TCwK+w==",
       "requires": {
-        "@octokit/types": "^2.12.1"
+        "@octokit/types": "^4.0.1"
       }
     },
     "@octokit/plugin-request-log": {
@@ -2586,22 +2508,22 @@
       "integrity": "sha512-ywoxP68aOT3zHCLgWZgwUJatiENeHE7xJzYjfz8WI0goynp96wETBF+d95b8g/uL4QmS6owPVlaxiz3wyMAzcw=="
     },
     "@octokit/plugin-rest-endpoint-methods": {
-      "version": "3.7.1",
+      "version": "3.12.3",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-3.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-3.12.3.tgz",
-      "integrity": "sha512-YOlcE3bbk2ohaOVdRj9ww7AUYfmnS9hwJJGSj3/rFlNfMGOId4G8dLlhghXpdNSn05H0FRoI94UlFUKnn30Cyw==",
+      "integrity": "sha512-9nrVDP1tBd7EtobGr5hZcYGTM0kBNmIvPJazrUd5OJO0NZWiQaQOqAnzApmC9cZ4o7RempV21ScpWkKGhrT51A==",
       "requires": {
-        "@octokit/types": "^2.11.1",
+        "@octokit/types": "^4.0.0",
         "deprecation": "^2.3.1"
       }
     },
     "@octokit/request": {
-      "version": "5.4.2",
+      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-5.4.4.tgz",
-      "integrity": "sha512-zKdnGuQ2TQ2vFk9VU8awFT4+EYf92Z/v3OlzRaSh4RIP0H6cvW1BFPXq4XYvNez+TPQjqN+0uSkCYnMFFhcFrw==",
+      "integrity": "sha512-vqv1lz41c6VTxUvF9nM+a6U+vvP3vGk7drDpr0DVQg4zyqlOiKVrY17DLD6de5okj+YLHKcoqaUZTBtlNZ1BtQ==",
       "requires": {
         "@octokit/endpoint": "^6.0.1",
         "@octokit/request-error": "^2.0.0",
-        "@octokit/types": "^2.11.1",
+        "@octokit/types": "^4.0.1",
         "deprecation": "^2.0.0",
         "is-plain-object": "^3.0.0",
         "node-fetch": "^2.3.0",
@@ -2625,39 +2547,32 @@
       }
     },
     "@octokit/request-error": {
-      "version": "2.0.0",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-2.0.1.tgz",
-      "integrity": "sha512-rtYicB4Absc60rUv74Rjpzek84UbVHGHJRu4fNVlZ1mCcyUPPuzFfG9Rn6sjHrd95DEsmjSt1Axlc699ZlbDkw==",
+      "integrity": "sha512-5lqBDJ9/TOehK82VvomQ6zFiZjPeSom8fLkFVLuYL3sKiIb5RB8iN/lenLkY7oBmyQcGP7FBMGiIZTO8jufaRQ==",
       "requires": {
-        "@octokit/types": "^2.0.0",
+        "@octokit/types": "^4.0.1",
         "deprecation": "^2.0.0",
         "once": "^1.4.0"
       }
     },
     "@octokit/rest": {
-      "version": "17.5.1",
+      "version": "17.9.2",
-      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-17.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-17.9.2.tgz",
-      "integrity": "sha512-0rGY7eo0cw8FYX7jAtUgfy3j+05zhs9JvkPFegx00HAaayodM1ixlHhCOB5yirGbsVOxbRIWVkvKc2yY9367gg==",
+      "integrity": "sha512-UXxiE0HhGQAPB3WDHTEu7lYMHH2uRcs/9f26XyHpGGiiXht8hgHWEk6fA7WglwwEvnj8V7mkJOgIntnij132UA==",
       "requires": {
         "@octokit/core": "^2.4.3",
-        "@octokit/plugin-paginate-rest": "^2.1.0",
+        "@octokit/plugin-paginate-rest": "^2.2.0",
         "@octokit/plugin-request-log": "^1.0.0",
-        "@octokit/plugin-rest-endpoint-methods": "3.7.1"
+        "@octokit/plugin-rest-endpoint-methods": "^3.12.2"
       }
     },
     "@octokit/types": {
-      "version": "2.16.2",
+      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-2.16.2.tgz",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-4.0.2.tgz",
-      "integrity": "sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==",
+      "integrity": "sha512-+4X6qfhT/fk/5FD66395NrFLxCzD6FsGlpPwfwvnukdyfYbhiZB/FJltiT1XM5Q63rGGBSf9FPaNV3WpNHm54A==",
       "requires": {
         "@types/node": ">= 8"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "14.0.1",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.1.tgz",
-          "integrity": "sha512-FAYBGwC+W6F9+huFIDtn43cpy7+SzG+atzRiTfdp3inUKL2hXnd4rG8hylJLIh4+hqrQy1P17kvJByE/z825hA=="
-        }
       }
     },
     "@peculiar/asn1-schema": {
@@ -3290,8 +3205,7 @@
     "@types/node": {
       "version": "12.11.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.1.tgz",
-      "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==",
+      "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A=="
-      "dev": true
     },
     "@types/promise.prototype.finally": {
       "version": "2.0.3",
@@ -3371,14 +3285,6 @@
         "@types/react": "*"
       }
     },
-    "@types/react-transition-group": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.4.tgz",
-      "integrity": "sha512-8DMUaDqh0S70TjkqU0DxOu80tFUiiaS9rxkWip/nb7gtvAsbqOXm02UCmR8zdcjWujgeYPiPNTVpVpKzUDotwA==",
-      "requires": {
-        "@types/react": "*"
-      }
-    },
     "@types/shallowequal": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/shallowequal/-/shallowequal-1.1.1.tgz",
@@ -5624,11 +5530,6 @@
       "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
       "dev": true
     },
-    "clsx": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
-      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA=="
-    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6193,15 +6094,6 @@
         "postcss-value-parser": "^3.3.0"
       }
     },
-    "css-vendor": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
-      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
-      "requires": {
-        "@babel/runtime": "^7.8.3",
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -9915,11 +9807,6 @@
         }
       }
     },
-    "hyphenate-style-name": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
-      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
-    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -10459,11 +10346,6 @@
       "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
       "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
     },
-    "is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
-    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -11333,83 +11215,6 @@
         "verror": "1.10.0"
       }
     },
-    "jss": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.1.1.tgz",
-      "integrity": "sha512-Xz3qgRUFlxbWk1czCZibUJqhVPObrZHxY3FPsjCXhDld4NOj1BgM14Ir5hVm+Qr6OLqVljjGvoMcCdXNOAbdkQ==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "csstype": "^2.6.5",
-        "is-in-browser": "^1.1.3",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-camel-case": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.1.1.tgz",
-      "integrity": "sha512-MDIaw8FeD5uFz1seQBKz4pnvDLnj5vIKV5hXSVdMaAVq13xR6SVTVWkIV/keyTs5txxTvzGJ9hXoxgd1WTUlBw==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.1.1"
-      }
-    },
-    "jss-plugin-default-unit": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.1.1.tgz",
-      "integrity": "sha512-UkeVCA/b3QEA4k0nIKS4uWXDCNmV73WLHdh2oDGZZc3GsQtlOCuiH3EkB/qI60v2MiCq356/SYWsDXt21yjwdg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.1.1"
-      }
-    },
-    "jss-plugin-global": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.1.1.tgz",
-      "integrity": "sha512-VBG3wRyi3Z8S4kMhm8rZV6caYBegsk+QnQZSVmrWw6GVOT/Z4FA7eyMu5SdkorDlG/HVpHh91oFN56O4R9m2VA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.1.1"
-      }
-    },
-    "jss-plugin-nested": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.1.1.tgz",
-      "integrity": "sha512-ozEu7ZBSVrMYxSDplPX3H82XHNQk2DQEJ9TEyo7OVTPJ1hEieqjDFiOQOxXEj9z3PMqkylnUbvWIZRDKCFYw5Q==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.1.1",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-props-sort": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.1.1.tgz",
-      "integrity": "sha512-g/joK3eTDZB4pkqpZB38257yD4LXB0X15jxtZAGbUzcKAVUHPl9Jb47Y7lYmiGsShiV4YmQRqG1p2DHMYoK91g==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.1.1"
-      }
-    },
-    "jss-plugin-rule-value-function": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.1.1.tgz",
-      "integrity": "sha512-ClV1lvJ3laU9la1CUzaDugEcwnpjPTuJ0yGy2YtcU+gG/w9HMInD5vEv7xKAz53Bk4WiJm5uLOElSEshHyhKNw==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.1.1"
-      }
-    },
-    "jss-plugin-vendor-prefixer": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.1.1.tgz",
-      "integrity": "sha512-09MZpQ6onQrhaVSF6GHC4iYifQ7+4YC/tAP6D4ZWeZotvCMq1mHLqNKRIaqQ2lkgANjlEot2JnVi1ktu4+L4pw==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.7",
-        "jss": "10.1.1"
-      }
-    },
     "jsx-ast-utils": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
@@ -16795,11 +16600,6 @@
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
       "optional": true
     },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "tinycolor2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",

package.json

@@ -4,11 +4,10 @@
   "description": "Cosmos Explorer",
   "main": "index.js",
   "dependencies": {
-    "@azure/cosmos": "3.6.3",
+    "@azure/cosmos": "3.7.0",
     "@azure/cosmos-language-service": "0.0.4",
     "@jupyterlab/services": "4.2.0",
     "@jupyterlab/terminal": "1.2.1",
-    "@material-ui/core": "4.9.10",
     "@microsoft/applicationinsights-web": "2.5.4",
     "@nteract/commutable": "7.1.4",
     "@nteract/connected-components": "6.7.8",
@@ -33,7 +32,7 @@
     "@nteract/transform-plotly": "6.1.6",
     "@nteract/transform-vdom": "4.0.11",
     "@nteract/transform-vega": "7.0.6",
-    "@octokit/rest": "17.5.1",
+    "@octokit/rest": "17.9.2",
     "@phosphor/widgets": "1.9.3",
     "@uifabric/react-cards": "0.109.53",
     "@uifabric/styling": "7.11.2",

src/Common/CosmosClient.ts

@@ -21,13 +21,15 @@ const _global = typeof self === "undefined" ? window : self;
 export const tokenProvider = async (requestInfo: RequestInfo) => {
   const { verb, resourceId, resourceType, headers } = requestInfo;
   if (config.platform === Platform.Emulator) {
-    // TODO Remove any. SDK expects a return value for tokenProvider, but we are mutating the header object instead.
+    // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-    return setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey) as any;
+    await setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
+    return decodeURIComponent(headers.authorization);
   }
 
   if (_masterKey) {
-    // TODO Remove any. SDK expects a return value for tokenProvider, but we are mutating the header object instead.
+    // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-    return setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, _masterKey) as any;
+    await setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
+    return decodeURIComponent(headers.authorization);
   }
 
   if (_resourceToken) {
@@ -47,7 +49,9 @@ export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) =>
 
 export const endpoint = () => {
   if (config.platform === Platform.Emulator) {
-    return config.EMULATOR_ENDPOINT || window.parent.location.origin;
+    // In worker scope, _global(self).parent does not exist
+    const location = _global.parent ? _global.parent.location : _global.location;
+    return config.EMULATOR_ENDPOINT || location.origin;
   }
   return _endpoint || (_databaseAccount && _databaseAccount.properties && _databaseAccount.properties.documentEndpoint);
 };

src/Contracts/DataModels.ts

@@ -738,6 +738,8 @@ export interface GitHubInfoJunoResponse {
   gitUrl: string;
   htmlUrl: string;
   metadata?: NotebookMetadata;
+  officialSamplesIndex?: number;
+  isLikedNotebook?: boolean;
 }
 
 export interface LikedNotebooksJunoResponse {

src/Contracts/ViewModels.ts

@@ -229,7 +229,12 @@ export interface Explorer {
   importAndOpenFromGallery: (path: string, newName: string, content: any) => Promise<boolean>;
   openNotebookTerminal: (kind: TerminalKind) => void;
   openGallery: () => void;
-  openNotebookViewer: (notebookUrl: string, notebookMetadata: DataModels.NotebookMetadata) => void;
+  openNotebookViewer: (
+    notebookUrl: string,
+    notebookMetadata: DataModels.NotebookMetadata,
+    onNotebookMetadataChange: (newNotebookMetadata: DataModels.NotebookMetadata) => Promise<void>,
+    isLikedNotebook: boolean
+  ) => void;
   notebookWorkspaceManager: NotebookWorkspaceManager;
   sparkClusterManager: SparkClusterManager;
   notebookContentProvider: IContentProvider;
@@ -887,6 +892,8 @@ export interface NotebookViewerTabOptions extends TabOptions {
   notebookUrl: string;
   notebookName: string;
   notebookMetadata: DataModels.NotebookMetadata;
+  onNotebookMetadataChange: (newNotebookMetadata: DataModels.NotebookMetadata) => Promise<void>;
+  isLikedNotebook: boolean;
 }
 
 export interface DocumentsTabOptions extends TabOptions {

src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx

@@ -54,7 +54,8 @@ export class DialogComponent extends React.Component<DialogProps, {}> {
         styles: {
           title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
           subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE }
-        }
+        },
+        showCloseButton: false
       },
       modalProps: { isBlocking: this.props.isModal },
       minWidth: DIALOG_MIN_WIDTH,

src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx

@@ -2,6 +2,7 @@
  * React component for Switch Directory
  */
 
+import _ from "underscore";
 import * as React from "react";
 import { Dropdown, IDropdownOption, IDropdownProps } from "office-ui-fabric-react/lib/Dropdown";
 import { Tenant } from "../../../Contracts/DataModels";
@@ -60,7 +61,7 @@ export class DefaultDirectoryDropdownComponent extends React.Component<DefaultDi
       return;
     }
 
-    const selectedDirectory = this.props.directories.find(d => d.tenantId === option.key);
+    const selectedDirectory = _.find(this.props.directories, d => d.tenantId === option.key);
     if (!selectedDirectory) {
       return;
     }

src/Explorer/Controls/Directory/DirectoryListComponent.tsx

@@ -1,3 +1,4 @@
+import _ from "underscore";
 import * as React from "react";
 
 import { DefaultButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
@@ -114,7 +115,7 @@ export class DirectoryListComponent extends React.Component<DirectoryListProps,
     }
     const buttonElement = e.currentTarget;
     const selectedDirectoryId = buttonElement.getElementsByClassName("directoryListItemId")[0].textContent;
-    const selectedDirectory = this.props.directories.find(d => d.tenantId === selectedDirectoryId);
+    const selectedDirectory = _.find(this.props.directories, d => d.tenantId === selectedDirectoryId);
 
     this.props.onNewDirectorySelected(selectedDirectory);
   };

src/Explorer/Controls/GitHub/AddRepoComponent.tsx

@@ -93,7 +93,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
       const repo = await this.props.getRepo(repoInfo.owner, repoInfo.repo);
       if (repo) {
         const item: RepoListItem = {
-          key: GitHubUtils.toRepoFullName(repo.owner.login, repo.name),
+          key: GitHubUtils.toRepoFullName(repo.owner, repo.name),
           repo,
           branches: [
             {

src/Explorer/Controls/GitHub/ReposListComponent.tsx

@@ -18,7 +18,7 @@ import {
   Text
 } from "office-ui-fabric-react";
 import * as React from "react";
-import { IGitHubBranch } from "../../../GitHub/GitHubClient";
+import { IGitHubBranch, IGitHubPageInfo } from "../../../GitHub/GitHubClient";
 import { GitHubUtils } from "../../../Utils/GitHubUtils";
 import { RepoListItem } from "./GitHubReposComponent";
 import {
@@ -41,6 +41,7 @@ export interface ReposListComponentProps {
 
 export interface BranchesProps {
   branches: IGitHubBranch[];
+  lastPageInfo?: IGitHubPageInfo;
   hasMore: boolean;
   isLoading: boolean;
   loadMore: () => void;
@@ -139,7 +140,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
     }
 
     const checkboxProps: ICheckboxProps = {
-      ...ReposListComponent.getCheckboxPropsForLabel(GitHubUtils.toRepoFullName(item.repo.owner.login, item.repo.name)),
+      ...ReposListComponent.getCheckboxPropsForLabel(GitHubUtils.toRepoFullName(item.repo.owner, item.repo.name)),
       styles: ReposListCheckboxStyles,
       defaultChecked: true,
       onChange: () => this.props.unpinRepo(item)
@@ -153,7 +154,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
       return <></>;
     }
 
-    const branchesProps = this.props.branchesProps[GitHubUtils.toRepoFullName(item.repo.owner.login, item.repo.name)];
+    const branchesProps = this.props.branchesProps[GitHubUtils.toRepoFullName(item.repo.owner, item.repo.name)];
     const options: IDropdownOption[] = branchesProps.branches.map(branch => ({
       key: branch.name,
       text: branch.name,
@@ -222,7 +223,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
 
   private onRenderPinnedReposBranchesDropdownOption(option: IDropdownOption): JSX.Element {
     const item: RepoListItem = option.data;
-    const branchesProps = this.props.branchesProps[GitHubUtils.toRepoFullName(item.repo.owner.login, item.repo.name)];
+    const branchesProps = this.props.branchesProps[GitHubUtils.toRepoFullName(item.repo.owner, item.repo.name)];
 
     if (option.index === ReposListComponent.FooterIndex) {
       const linkProps: ILinkProps = {
@@ -267,7 +268,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
     }
 
     const checkboxProps: ICheckboxProps = {
-      ...ReposListComponent.getCheckboxPropsForLabel(GitHubUtils.toRepoFullName(item.repo.owner.login, item.repo.name)),
+      ...ReposListComponent.getCheckboxPropsForLabel(GitHubUtils.toRepoFullName(item.repo.owner, item.repo.name)),
       styles: ReposListCheckboxStyles,
       onChange: () => {
         const repoListItem = { ...item };

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

@@ -22,11 +22,28 @@ export const subtleHelpfulTextStyles: ITextStyles = {
   }
 };
 
+export const iconButtonStyles: IIconStyles = {
+  root: {
+    marginLeft: "10px",
+    color: "#0078D4",
+    backgroundColor: "#FFF",
+    fontSize: 16,
+    fontWeight: FontWeights.regular,
+    display: "inline-block",
+    selectors: {
+      ":hover .ms-Button-icon": {
+        color: "#ccc"
+      }
+    }
+  }
+};
+
 export const iconStyles: IIconStyles = {
   root: {
     marginLeft: "10px",
     color: "#0078D4",
-    fontSize: 12,
+    backgroundColor: "#FFF",
+    fontSize: 16,
     fontWeight: FontWeights.regular,
     display: "inline-block"
   }

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { GalleryCardComponent, GalleryCardComponentProps } from "./GalleryCardComponent";
+
+describe("GalleryCardComponent", () => {
+  it("renders", () => {
+    const props: GalleryCardComponentProps = {
+      name: "mycard",
+      url: "url",
+      notebookMetadata: undefined,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onClick: () => {}
+    };
+
+    const wrapper = shallow(<GalleryCardComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as DataModels from "../../Contracts/DataModels";
+import * as DataModels from "../../../../Contracts/DataModels";
 import { Card, ICardTokens, ICardSectionTokens } from "@uifabric/react-cards";
 import { Icon, Image, Persona, Text } from "office-ui-fabric-react";
 import {
@@ -10,7 +10,7 @@ import {
   subtleIconStyles
 } from "./CardStyleConstants";
 
-interface GalleryCardComponentProps {
+export interface GalleryCardComponentProps {
   name: string;
   url: string;
   notebookMetadata: DataModels.NotebookMetadata;

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GalleryCardComponent renders 1`] = `
+<Card
+  aria-label="Notebook Card"
+  onClick={[Function]}
+  tokens={
+    Object {
+      "childrenMargin": 12,
+    }
+  }
+>
+  <CardSection>
+    <Text
+      styles={
+        Object {
+          "root": Object {
+            "color": "#333333",
+            "fontWeight": 600,
+          },
+        }
+      }
+    >
+      mycard
+    </Text>
+  </CardSection>
+</Card>
+`;

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less

@@ -0,0 +1,9 @@
+@import "../../../../less/Common/Constants";
+
+.galleryContainer {
+  padding: @LargeSpace @LargeSpace 30px @LargeSpace;
+  height: 100%;
+  overflow-y: auto;
+  width: 100%;
+  font-family: @DataExplorerFont;
+}

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

@@ -0,0 +1,77 @@
+import React from "react";
+import { shallow } from "enzyme";
+import {
+  GalleryViewerContainerComponent,
+  GalleryViewerContainerComponentProps,
+  FullWidthTabs,
+  FullWidthTabsProps,
+  GalleryCardsComponent,
+  GalleryCardsComponentProps,
+  GalleryViewerComponent,
+  GalleryViewerComponentProps
+} from "./GalleryViewerComponent";
+import * as DataModels from "../../../Contracts/DataModels";
+
+describe("GalleryCardsComponent", () => {
+  it("renders", () => {
+    // TODO Mock this
+    const props: GalleryCardsComponentProps = {
+      data: [],
+      userMetadata: undefined,
+      onNotebookMetadataChange: (officialSamplesIndex: number, notebookMetadata: DataModels.NotebookMetadata) =>
+        Promise.resolve(),
+      onClick: (
+        url: string,
+        notebookMetadata: DataModels.NotebookMetadata,
+        onNotebookMetadataChange: (newNotebookMetadata: DataModels.NotebookMetadata) => Promise<void>,
+        isLikedNotebook: boolean
+      ) => Promise.resolve()
+    };
+
+    const wrapper = shallow(<GalleryCardsComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe("FullWidthTabs", () => {
+  it("renders", () => {
+    const props: FullWidthTabsProps = {
+      officialSamplesContent: [],
+      likedNotebooksContent: [],
+      userMetadata: undefined,
+      onClick: (
+        url: string,
+        notebookMetadata: DataModels.NotebookMetadata,
+        onNotebookMetadataChange: (newNotebookMetadata: DataModels.NotebookMetadata) => Promise<void>,
+        isLikedNotebook: boolean
+      ) => Promise.resolve()
+    };
+
+    const wrapper = shallow(<FullWidthTabs {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe("GalleryViewerContainerComponent", () => {
+  it("renders", () => {
+    const props: GalleryViewerContainerComponentProps = {
+      container: undefined
+    };
+
+    const wrapper = shallow(<GalleryViewerContainerComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe("GalleryCardComponent", () => {
+  it("renders", () => {
+    const props: GalleryViewerComponentProps = {
+      container: undefined,
+      officialSamplesData: [],
+      likedNotebookData: undefined
+    };
+
+    const wrapper = shallow(<GalleryViewerComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -0,0 +1,356 @@
+/**
+ * Gallery Viewer
+ */
+
+import * as React from "react";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { GalleryCardComponent } from "./Cards/GalleryCardComponent";
+import { Stack, IStackTokens } from "office-ui-fabric-react";
+import { JunoUtils } from "../../../Utils/JunoUtils";
+import { CosmosClient } from "../../../Common/CosmosClient";
+import { config } from "../../../Config";
+import path from "path";
+import { SessionStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
+import { NotificationConsoleUtils } from "../../../Utils/NotificationConsoleUtils";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
+import * as TabComponent from "../Tabs/TabComponent";
+
+import "./GalleryViewerComponent.less";
+
+export interface GalleryCardsComponentProps {
+  data: DataModels.GitHubInfoJunoResponse[];
+  userMetadata: DataModels.UserMetadata;
+  onNotebookMetadataChange: (
+    officialSamplesIndex: number,
+    notebookMetadata: DataModels.NotebookMetadata
+  ) => Promise<void>;
+  onClick: (
+    url: string,
+    notebookMetadata: DataModels.NotebookMetadata,
+    onNotebookMetadataChange: (newNotebookMetadata: DataModels.NotebookMetadata) => Promise<void>,
+    isLikedNotebook: boolean
+  ) => Promise<void>;
+}
+
+export class GalleryCardsComponent extends React.Component<GalleryCardsComponentProps> {
+  private sectionStackTokens: IStackTokens = { childrenGap: 30 };
+
+  public render(): JSX.Element {
+    return (
+      <Stack horizontal wrap tokens={this.sectionStackTokens}>
+        {this.props.data.map((githubInfo: DataModels.GitHubInfoJunoResponse, index: any) => {
+          const name = githubInfo.name;
+          const url = githubInfo.downloadUrl;
+          const notebookMetadata = githubInfo.metadata || {
+            date: "2008-12-01",
+            description: "Great notebook",
+            tags: ["favorite", "sample"],
+            author: "Laurent Nguyen",
+            views: 432,
+            likes: 123,
+            downloads: 56,
+            imageUrl:
+              "https://media.magazine.ferrari.com/images/2019/02/27/170304506-c1bcf028-b513-45f6-9f27-0cadac619c3d.jpg"
+          };
+          const officialSamplesIndex = githubInfo.officialSamplesIndex;
+          const isLikedNotebook = githubInfo.isLikedNotebook;
+          const updateTabsStatePerNotebook = this.props.onNotebookMetadataChange
+            ? (notebookMetadata: DataModels.NotebookMetadata) =>
+                this.props.onNotebookMetadataChange(officialSamplesIndex, notebookMetadata)
+            : undefined;
+
+          return (
+            name !== ".gitignore" &&
+            url && (
+              <GalleryCardComponent
+                key={url}
+                name={name}
+                url={url}
+                notebookMetadata={notebookMetadata}
+                onClick={() => this.props.onClick(url, notebookMetadata, updateTabsStatePerNotebook, isLikedNotebook)}
+              />
+            )
+          );
+        })}
+      </Stack>
+    );
+  }
+}
+
+export interface FullWidthTabsProps {
+  officialSamplesContent: DataModels.GitHubInfoJunoResponse[];
+  likedNotebooksContent: DataModels.GitHubInfoJunoResponse[];
+  userMetadata: DataModels.UserMetadata;
+  onClick: (
+    url: string,
+    notebookMetadata: DataModels.NotebookMetadata,
+    onNotebookMetadataChange: (newNotebookMetadata: DataModels.NotebookMetadata) => Promise<void>,
+    isLikedNotebook: boolean
+  ) => Promise<void>;
+}
+
+interface FullWidthTabsState {
+  activeTabIndex: number;
+  officialSamplesContent: DataModels.GitHubInfoJunoResponse[];
+  likedNotebooksContent: DataModels.GitHubInfoJunoResponse[];
+  userMetadata: DataModels.UserMetadata;
+}
+
+export class FullWidthTabs extends React.Component<FullWidthTabsProps, FullWidthTabsState> {
+  private authorizationToken = CosmosClient.authorizationToken();
+  private appTabs: TabComponent.Tab[];
+
+  constructor(props: FullWidthTabsProps) {
+    super(props);
+    this.state = {
+      activeTabIndex: 0,
+      officialSamplesContent: this.props.officialSamplesContent,
+      likedNotebooksContent: this.props.likedNotebooksContent,
+      userMetadata: this.props.userMetadata
+    };
+
+    this.appTabs = [
+      {
+        title: "Official Samples",
+        content: {
+          className: "",
+          render: () => (
+            <GalleryCardsComponent
+              data={this.state.officialSamplesContent}
+              onClick={this.props.onClick}
+              userMetadata={this.state.userMetadata}
+              onNotebookMetadataChange={this.updateTabsState}
+            />
+          )
+        },
+        isVisible: () => true
+      },
+      {
+        title: "Liked Notebooks",
+        content: {
+          className: "",
+          render: () => (
+            <GalleryCardsComponent
+              data={this.state.likedNotebooksContent}
+              onClick={this.props.onClick}
+              userMetadata={this.state.userMetadata}
+              onNotebookMetadataChange={this.updateTabsState}
+            />
+          )
+        },
+        isVisible: () => true
+      }
+    ];
+  }
+
+  public updateTabsState = async (officialSamplesIndex: number, notebookMetadata: DataModels.NotebookMetadata) => {
+    let currentLikedNotebooksContent = [...this.state.likedNotebooksContent];
+    let currentUserMetadata = { ...this.state.userMetadata };
+    let currentLikedNotebooks = [...currentUserMetadata.likedNotebooks];
+
+    const currentOfficialSamplesContent = [...this.state.officialSamplesContent];
+    const currentOfficialSamplesObject = { ...currentOfficialSamplesContent[officialSamplesIndex] };
+    const metadata = { ...currentOfficialSamplesObject.metadata };
+    const metadataLikesUpdates = metadata.likes - notebookMetadata.likes;
+
+    metadata.views = notebookMetadata.views;
+    metadata.downloads = notebookMetadata.downloads;
+    metadata.likes = notebookMetadata.likes;
+    currentOfficialSamplesObject.metadata = metadata;
+
+    // Notebook has been liked. Add To likedNotebooksContent, update isLikedNotebook flag
+    if (metadataLikesUpdates < 0) {
+      currentOfficialSamplesObject.isLikedNotebook = true;
+      currentLikedNotebooksContent = currentLikedNotebooksContent.concat(currentOfficialSamplesObject);
+      currentLikedNotebooks = currentLikedNotebooks.concat(currentOfficialSamplesObject.path);
+      currentUserMetadata = { likedNotebooks: currentLikedNotebooks };
+    } else if (metadataLikesUpdates > 0) {
+      // Notebook has been unliked. Remove from likedNotebooksContent after matching the path, update isLikedNotebook flag
+
+      currentOfficialSamplesObject.isLikedNotebook = false;
+      const likedNotebookIndex = currentLikedNotebooks.findIndex((path: string) => {
+        return path === currentOfficialSamplesObject.path;
+      });
+      currentLikedNotebooksContent.splice(likedNotebookIndex, 1);
+      currentLikedNotebooks.splice(likedNotebookIndex, 1);
+      currentUserMetadata = { likedNotebooks: currentLikedNotebooks };
+    }
+
+    currentOfficialSamplesContent[officialSamplesIndex] = currentOfficialSamplesObject;
+
+    this.setState({
+      activeTabIndex: 0,
+      userMetadata: currentUserMetadata,
+      likedNotebooksContent: currentLikedNotebooksContent,
+      officialSamplesContent: currentOfficialSamplesContent
+    });
+
+    JunoUtils.updateNotebookMetadata(this.authorizationToken, notebookMetadata).then(
+      async returnedNotebookMetadata => {
+        if (metadataLikesUpdates !== 0) {
+          JunoUtils.updateUserMetadata(this.authorizationToken, currentUserMetadata);
+          // TODO: update state here?
+        }
+      },
+      error => {
+        NotificationConsoleUtils.logConsoleMessage(
+          ConsoleDataType.Error,
+          `Error updating notebook metadata: ${JSON.stringify(error)}`
+        );
+        // TODO add telemetry
+      }
+    );
+  };
+
+  private onTabIndexChange = (activeTabIndex: number) => this.setState({ activeTabIndex });
+
+  public render() {
+    return (
+      <TabComponent.TabComponent
+        tabs={this.appTabs}
+        onTabIndexChange={this.onTabIndexChange.bind(this)}
+        currentTabIndex={this.state.activeTabIndex}
+        hideHeader={false}
+      />
+    );
+  }
+}
+
+export interface GalleryViewerContainerComponentProps {
+  container: ViewModels.Explorer;
+}
+
+interface GalleryViewerContainerComponentState {
+  officialSamplesData: DataModels.GitHubInfoJunoResponse[];
+  likedNotebooksData: DataModels.LikedNotebooksJunoResponse;
+}
+
+export class GalleryViewerContainerComponent extends React.Component<
+  GalleryViewerContainerComponentProps,
+  GalleryViewerContainerComponentState
+> {
+  constructor(props: GalleryViewerContainerComponentProps) {
+    super(props);
+    this.state = {
+      officialSamplesData: undefined,
+      likedNotebooksData: undefined
+    };
+  }
+
+  componentDidMount() {
+    const authToken = CosmosClient.authorizationToken();
+    JunoUtils.getOfficialSampleNotebooks(authToken).then(
+      (data1: DataModels.GitHubInfoJunoResponse[]) => {
+        const officialSamplesData = data1;
+
+        JunoUtils.getLikedNotebooks(authToken).then(
+          (data2: DataModels.LikedNotebooksJunoResponse) => {
+            const likedNotebooksData = data2;
+
+            officialSamplesData.map((value: DataModels.GitHubInfoJunoResponse, index: number) => {
+              value.officialSamplesIndex = index;
+              value.isLikedNotebook = likedNotebooksData.userMetadata.likedNotebooks.includes(value.path);
+            });
+
+            likedNotebooksData.likedNotebooksContent.map((value: DataModels.GitHubInfoJunoResponse) => {
+              value.isLikedNotebook = true;
+              value.officialSamplesIndex = officialSamplesData.findIndex(
+                (officialSample: DataModels.GitHubInfoJunoResponse) => {
+                  return officialSample.path === value.path;
+                }
+              );
+            });
+
+            this.setState({
+              officialSamplesData: officialSamplesData,
+              likedNotebooksData: likedNotebooksData
+            });
+          },
+          error => {
+            NotificationConsoleUtils.logConsoleMessage(
+              ConsoleDataType.Error,
+              `Error fetching liked notebooks: ${JSON.stringify(error)}`
+            );
+            // TODO Add telemetry
+          }
+        );
+      },
+      error => {
+        NotificationConsoleUtils.logConsoleMessage(
+          ConsoleDataType.Error,
+          `Error fetching sample notebooks: ${JSON.stringify(error)}`
+        );
+        // TODO Add telemetry
+      }
+    );
+  }
+
+  public render(): JSX.Element {
+    return this.state.officialSamplesData && this.state.likedNotebooksData ? (
+      <GalleryViewerComponent
+        container={this.props.container}
+        officialSamplesData={this.state.officialSamplesData}
+        likedNotebookData={this.state.likedNotebooksData}
+      />
+    ) : (
+      <></>
+    );
+  }
+}
+
+export interface GalleryViewerComponentProps {
+  container: ViewModels.Explorer;
+  officialSamplesData: DataModels.GitHubInfoJunoResponse[];
+  likedNotebookData: DataModels.LikedNotebooksJunoResponse;
+}
+
+export class GalleryViewerComponent extends React.Component<GalleryViewerComponentProps> {
+  public render(): JSX.Element {
+    return this.props.container ? (
+      <div className="galleryContainer">
+        <FullWidthTabs
+          officialSamplesContent={this.props.officialSamplesData}
+          likedNotebooksContent={this.props.likedNotebookData.likedNotebooksContent}
+          userMetadata={this.props.likedNotebookData.userMetadata}
+          onClick={this.openNotebookViewer}
+        />
+      </div>
+    ) : (
+      <div className="galleryContainer">
+        <GalleryCardsComponent
+          data={this.props.officialSamplesData}
+          onClick={this.openNotebookViewer}
+          userMetadata={undefined}
+          onNotebookMetadataChange={undefined}
+        />
+      </div>
+    );
+  }
+
+  public getOfficialSamplesData(): DataModels.GitHubInfoJunoResponse[] {
+    return this.props.officialSamplesData;
+  }
+
+  public getLikedNotebookData(): DataModels.LikedNotebooksJunoResponse {
+    return this.props.likedNotebookData;
+  }
+
+  public openNotebookViewer = async (
+    url: string,
+    notebookMetadata: DataModels.NotebookMetadata,
+    onNotebookMetadataChange: (newNotebookMetadata: DataModels.NotebookMetadata) => Promise<void>,
+    isLikedNotebook: boolean
+  ) => {
+    if (!this.props.container) {
+      SessionStorageUtility.setEntryString(
+        StorageKey.NotebookMetadata,
+        notebookMetadata ? JSON.stringify(notebookMetadata) : null
+      );
+      SessionStorageUtility.setEntryString(StorageKey.NotebookName, path.basename(url));
+      window.open(`${config.hostedExplorerURL}notebookViewer.html?notebookurl=${url}`, "_blank");
+    } else {
+      this.props.container.openNotebookViewer(url, notebookMetadata, onNotebookMetadataChange, isLikedNotebook);
+    }
+  };
+}

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

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FullWidthTabs renders 1`] = `
+<TabComponent
+  currentTabIndex={0}
+  hideHeader={false}
+  onTabIndexChange={[Function]}
+  tabs={
+    Array [
+      Object {
+        "content": Object {
+          "className": "",
+          "render": [Function],
+        },
+        "isVisible": [Function],
+        "title": "Official Samples",
+      },
+      Object {
+        "content": Object {
+          "className": "",
+          "render": [Function],
+        },
+        "isVisible": [Function],
+        "title": "Liked Notebooks",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`GalleryCardComponent renders 1`] = `
+<div
+  className="galleryContainer"
+>
+  <GalleryCardsComponent
+    data={Array []}
+    onClick={[Function]}
+  />
+</div>
+`;
+
+exports[`GalleryCardsComponent renders 1`] = `
+<Stack
+  horizontal={true}
+  tokens={
+    Object {
+      "childrenGap": 30,
+    }
+  }
+  wrap={true}
+/>
+`;
+
+exports[`GalleryViewerContainerComponent renders 1`] = `<Fragment />`;

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.less

@@ -0,0 +1,11 @@
+.notebookViewerMetadataContainer {
+  margin: 0px 10px;
+
+  .title, .decoration, .persona {
+    display: inline-block;
+  }
+
+  .extras {
+    margin-top: 5px;
+  }
+}

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.test.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { NotebookMetadataComponentProps, NotebookMetadataComponent } from "./NotebookMetadataComponent";
+import { NotebookMetadata } from "../../../Contracts/DataModels";
+
+describe("NotebookMetadataComponent", () => {
+  it("renders un-liked notebook", () => {
+    const props: NotebookMetadataComponentProps = {
+      notebookName: "My notebook",
+      container: undefined,
+      notebookMetadata: undefined,
+      notebookContent: {},
+      onNotebookMetadataChange: (newNotebookMetadata: NotebookMetadata) => Promise.resolve(),
+      isLikedNotebook: false
+    };
+
+    const wrapper = shallow(<NotebookMetadataComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders liked notebook", () => {
+    const props: NotebookMetadataComponentProps = {
+      notebookName: "My notebook",
+      container: undefined,
+      notebookMetadata: undefined,
+      notebookContent: {},
+      onNotebookMetadataChange: (newNotebookMetadata: NotebookMetadata) => Promise.resolve(),
+      isLikedNotebook: true
+    };
+
+    const wrapper = shallow(<NotebookMetadataComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  // TODO Add test for metadata display
+});

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

@@ -6,47 +6,97 @@ import * as React from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { NotebookMetadata } from "../../../Contracts/DataModels";
 import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
-import { Icon, Persona, Text } from "office-ui-fabric-react";
+import { Icon, Persona, Text, IconButton } from "office-ui-fabric-react";
-import CSS from "csstype";
 import {
   siteTextStyles,
   subtleIconStyles,
   iconStyles,
+  iconButtonStyles,
   mainHelpfulTextStyles,
   subtleHelpfulTextStyles,
   helpfulTextStyles
-} from "../../../GalleryViewer/Cards/CardStyleConstants";
+} from "../NotebookGallery/Cards/CardStyleConstants";
+
+import "./NotebookViewerComponent.less";
 
 initializeIcons();
 
-interface NotebookMetadataComponentProps {
+export interface NotebookMetadataComponentProps {
   notebookName: string;
   container: ViewModels.Explorer;
   notebookMetadata: NotebookMetadata;
   notebookContent: any;
+  onNotebookMetadataChange: (newNotebookMetadata: NotebookMetadata) => Promise<void>;
+  isLikedNotebook: boolean;
 }
 
-export class NotebookMetadataComponent extends React.Component<NotebookMetadataComponentProps> {
+interface NotebookMetadatComponentState {
-  private inlineBlockStyle: CSS.Properties = {
+  liked: boolean;
-    display: "inline-block"
+  notebookMetadata: NotebookMetadata;
+}
+
+export class NotebookMetadataComponent extends React.Component<
+  NotebookMetadataComponentProps,
+  NotebookMetadatComponentState
+> {
+  constructor(props: NotebookMetadataComponentProps) {
+    super(props);
+    this.state = {
+      liked: this.props.isLikedNotebook,
+      notebookMetadata: this.props.notebookMetadata
+    };
+  }
+
+  private onDownloadClick = (newNotebookName: string) => {
+    this.props.container
+      .importAndOpenFromGallery(this.props.notebookName, newNotebookName, JSON.stringify(this.props.notebookContent))
+      .then(() => {
+        if (this.props.notebookMetadata) {
+          if (this.props.onNotebookMetadataChange) {
+            const notebookMetadata = { ...this.state.notebookMetadata };
+            notebookMetadata.downloads += 1;
+            this.props.onNotebookMetadataChange(notebookMetadata).then(() => {
+              this.setState({ notebookMetadata: notebookMetadata });
+            });
+          }
+        }
+      });
   };
 
-  private marginTopStyle: CSS.Properties = {
+  componentDidMount() {
-    marginTop: "5px"
+    if (this.props.onNotebookMetadataChange) {
+      const notebookMetadata = { ...this.state.notebookMetadata };
+      if (this.props.notebookMetadata) {
+        notebookMetadata.views += 1;
+        this.props.onNotebookMetadataChange(notebookMetadata).then(() => {
+          this.setState({ notebookMetadata: notebookMetadata });
+        });
+      }
+    }
+  }
+
+  private onLike = (): void => {
+    if (this.props.onNotebookMetadataChange) {
+      const notebookMetadata = { ...this.state.notebookMetadata };
+      let liked: boolean;
+      if (this.state.liked) {
+        liked = false;
+        notebookMetadata.likes -= 1;
+      } else {
+        liked = true;
+        notebookMetadata.likes += 1;
+      }
+
+      this.props.onNotebookMetadataChange(notebookMetadata).then(() => {
+        this.setState({ liked: liked, notebookMetadata: notebookMetadata });
+      });
+    }
   };
 
-  private onDownloadClick: (newNotebookName: string) => void = (newNotebookName: string) => {
+  private onDownload = (): void => {
-    this.props.container.importAndOpenFromGallery(
-      this.props.notebookName,
-      newNotebookName,
-      JSON.stringify(this.props.notebookContent)
-    );
-  };
-
-  public render(): JSX.Element {
     const promptForNotebookName = () => {
       return new Promise<string>((resolve, reject) => {
-        var newNotebookName = this.props.notebookName;
+        let newNotebookName = this.props.notebookName;
         this.props.container.showOkCancelTextFieldModalDialog(
           "Save notebook as",
           undefined,
@@ -68,27 +118,35 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
       });
     };
 
+    promptForNotebookName().then((newNotebookName: string) => {
+      this.onDownloadClick(newNotebookName);
+    });
+  };
+
+  public render(): JSX.Element {
     return (
       <div className="notebookViewerMetadataContainer">
-        <h3 style={this.inlineBlockStyle}>{this.props.notebookName}</h3>
+        <h3 className="title">{this.props.notebookName}</h3>
 
         {this.props.notebookMetadata && (
-          <div style={this.inlineBlockStyle}>
+          <div className="decoration">
-            <Icon iconName="Heart" styles={iconStyles} />
+            {this.props.container ? (
-            <Text variant="medium" styles={mainHelpfulTextStyles}>
+              <IconButton
-              {this.props.notebookMetadata.likes} likes
+                iconProps={{ iconName: this.state.liked ? "HeartFill" : "Heart" }}
+                styles={iconButtonStyles}
+                onClick={this.onLike}
+              />
+            ) : (
+              <Icon iconName="Heart" styles={iconStyles} />
+            )}
+            <Text variant="large" styles={mainHelpfulTextStyles}>
+              {this.state.notebookMetadata.likes} likes
             </Text>
           </div>
         )}
 
         {this.props.container && (
-          <button
+          <button aria-label="downloadButton" className="downloadButton" onClick={this.onDownload}>
-            aria-label="downloadButton"
-            className="downloadButton"
-            onClick={async () => {
-              promptForNotebookName().then(this.onDownloadClick);
-            }}
-          >
             Download Notebook
           </button>
         )}
@@ -97,20 +155,20 @@ export class NotebookMetadataComponent extends React.Component<NotebookMetadataC
           <>
             <div>
               <Persona
-                style={this.inlineBlockStyle}
+                className="persona"
                 text={this.props.notebookMetadata.author}
                 secondaryText={this.props.notebookMetadata.date}
               />
             </div>
             <div>
-              <div style={this.marginTopStyle}>
+              <div className="extras">
                 <Icon iconName="RedEye" styles={subtleIconStyles} />
                 <Text variant="small" styles={subtleHelpfulTextStyles}>
-                  {this.props.notebookMetadata.views}
+                  {this.state.notebookMetadata.views}
                 </Text>
                 <Icon iconName="Download" styles={subtleIconStyles} />
                 <Text variant="small" styles={subtleHelpfulTextStyles}>
-                  {this.props.notebookMetadata.downloads}
+                  {this.state.notebookMetadata.downloads}
                 </Text>
               </div>
               <Text variant="small" styles={siteTextStyles}>

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.less

@@ -4,7 +4,7 @@
   padding: @DefaultSpace;
   height: 100%;
   width: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .downloadButton {
@@ -20,7 +20,7 @@
     display: "inline-block";
     margin: 10px;
 }
-  
+
 .active, .downloadButton:hover {
   color: @BaseMedium;
 }

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -16,12 +16,14 @@ import "./NotebookViewerComponent.less";
 export interface NotebookViewerComponentProps {
   notebookName: string;
   notebookUrl: string;
-  container: ViewModels.Explorer;
+  container?: ViewModels.Explorer;
   notebookMetadata: NotebookMetadata;
+  onNotebookMetadataChange?: (newNotebookMetadata: NotebookMetadata) => Promise<void>;
+  isLikedNotebook?: boolean;
+  hideInputs?: boolean;
 }
 
 interface NotebookViewerComponentState {
-  element: JSX.Element;
   content: any;
 }
 
@@ -50,7 +52,7 @@ export class NotebookViewerComponent extends React.Component<
       contentRef: createContentRef()
     });
 
-    this.state = { element: undefined, content: undefined };
+    this.state = { content: undefined };
   }
 
   private async getJsonNotebookContent(): Promise<any> {
@@ -65,24 +67,25 @@ export class NotebookViewerComponent extends React.Component<
   componentDidMount() {
     this.getJsonNotebookContent().then((jsonContent: any) => {
       this.notebookComponentBootstrapper.setContent("json", jsonContent);
-      const notebookReadonlyComponent = this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer);
+      this.setState({ content: jsonContent });
-      this.setState({ element: notebookReadonlyComponent, content: jsonContent });
     });
   }
 
   public render(): JSX.Element {
-    return this.state != null ? (
+    return (
       <div className="notebookViewerContainer">
         <NotebookMetadataComponent
           notebookMetadata={this.props.notebookMetadata}
           notebookName={this.props.notebookName}
           container={this.props.container}
           notebookContent={this.state.content}
+          onNotebookMetadataChange={this.props.onNotebookMetadataChange}
+          isLikedNotebook={this.props.isLikedNotebook}
         />
-        {this.state.element}
+        {this.notebookComponentBootstrapper.renderComponent(NotebookReadOnlyRenderer, {
+          hideInputs: this.props.hideInputs
+        })}
       </div>
-    ) : (
-      <></>
     );
   }
 }

src/Explorer/Controls/NotebookViewer/__snapshots__/NotebookMetadataComponent.test.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotebookMetadataComponent renders liked notebook 1`] = `
+<div
+  className="notebookViewerMetadataContainer"
+>
+  <h3
+    className="title"
+  >
+    My notebook
+  </h3>
+</div>
+`;
+
+exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
+<div
+  className="notebookViewerMetadataContainer"
+>
+  <h3
+    className="title"
+  >
+    My notebook
+  </h3>
+</div>
+`;

src/Explorer/Controls/Tabs/TabComponent.less

@@ -1,27 +1,28 @@
 @import "../../../../less/Common/Constants";
 
-.tabSwitch {
+.tabComponentContainer {
-  margin-left: @LargeSpace;
+    height: 100%;
-  margin-bottom: 20px;
-
-  .tab {
-      margin-right: @MediumSpace;
-  }
-
-  .toggleSwitch {
-      .toggleSwitch();
-  }
-
-  .selectedToggle {
-      .selectedToggle();
-  }
-
-  .unselectedToggle {
-      .unselectedToggle();
-  }
-}
-
-.tabComponentContent {
-    height: calc(100% - 20px);
     .flex-display();
+    .flex-direction();
+
+    .tabSwitch {
+        margin-left: @LargeSpace;
+        margin-bottom: 20px;
+
+        .tab {
+            margin-right: @MediumSpace;
+        }
+
+        .toggleSwitch {
+            .toggleSwitch();
+        }
+
+        .selectedToggle {
+            .selectedToggle();
+        }
+
+        .unselectedToggle {
+            .unselectedToggle();
+        }
+      }
 }

src/Explorer/Controls/Tabs/TabComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
+import "./TabComponent.less";
 
 export interface TabContent {
   render: () => JSX.Element;
@@ -75,10 +76,10 @@ export class TabComponent extends React.Component<TabComponentProps> {
     }
 
     return (
-      <React.Fragment>
+      <div className="tabComponentContainer">
         {!this.props.hideHeader && <div className="tabs tabSwitch">{this.renderTabTitles()}</div>}
         <div className={className}>{currentTabContent.render()}</div>
-      </React.Fragment>
+      </div>
     );
   }
 }

src/Explorer/Explorer.ts

@@ -1143,7 +1143,7 @@ export default class Explorer implements ViewModels.Explorer {
       isModal: true,
       visible: true,
       title: `Enable Azure Synapse Link on your Cosmos DB account`,
-      subText: `Enable Azure Synapse Link to perform near real time analytical analytics on this account, without impacting the performance of your transactional workloads. 
+      subText: `Enable Azure Synapse Link to perform near real time analytical analytics on this account, without impacting the performance of your transactional workloads.
       Azure Synapse Link brings together Cosmos Db Analytical Store and Synapse Analytics`,
       primaryButtonText: "Enable Azure Synapse Link",
       secondaryButtonText: "Cancel",
@@ -2583,7 +2583,7 @@ export default class Explorer implements ViewModels.Explorer {
     const item = NotebookUtil.createNotebookContentItem(name, path, "file");
     const parent = this.resourceTree.myNotebooksContentRoot;
 
-    if (parent && this.isNotebookEnabled() && this.notebookClient) {
+    if (parent && parent.children && this.isNotebookEnabled() && this.notebookClient) {
       if (this._filePathToImportAndOpen === path) {
         this._filePathToImportAndOpen = null; // we don't want to try opening this path again
       }
@@ -3278,7 +3278,12 @@ export default class Explorer implements ViewModels.Explorer {
     newTab.onTabClick();
   }
 
-  public openNotebookViewer(notebookUrl: string, notebookMetadata: DataModels.NotebookMetadata) {
+  public openNotebookViewer(
+    notebookUrl: string,
+    notebookMetadata: DataModels.NotebookMetadata,
+    onNotebookMetadataChange: (newNotebookMetadata: DataModels.NotebookMetadata) => Promise<void>,
+    isLikedNotebook: boolean
+  ) {
     const notebookName = path.basename(notebookUrl);
     const title = notebookName;
     const hashLocation = notebookUrl;
@@ -3320,7 +3325,9 @@ export default class Explorer implements ViewModels.Explorer {
       openedTabs: this.openedTabs(),
       notebookUrl: notebookUrl,
       notebookName: notebookName,
-      notebookMetadata: notebookMetadata
+      notebookMetadata: notebookMetadata,
+      onNotebookMetadataChange: onNotebookMetadataChange,
+      isLikedNotebook: isLikedNotebook
     });
 
     this.openedTabs.push(newTab);

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -1,3 +1,4 @@
+import _ from "underscore";
 import * as React from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { Observable } from "knockout";
@@ -46,7 +47,7 @@ export class CommandBarUtil {
             text: btn.commandButtonLabel || btn.tooltipText,
             "data-test": btn.commandButtonLabel || btn.tooltipText,
             title: btn.tooltipText,
-            name: "menuitem",
+            name: btn.commandButtonLabel || btn.tooltipText,
             disabled: btn.disabled,
             ariaLabel: btn.ariaLabel,
             buttonStyles: {
@@ -126,6 +127,9 @@ export class CommandBarUtil {
           }
 
           if (btn.isDropdown) {
+            const selectedChild = _.find(btn.children, child => child.dropdownItemKey === btn.dropdownSelectedKey);
+            result.name = selectedChild?.commandButtonLabel || btn.dropdownPlaceholder;
+
             const dropdownStyles: Partial<IDropdownStyles> = {
               root: { margin: 5 },
               dropdown: { width: btn.dropdownWidth },

src/Explorer/Notebook/NotebookComponent/actions.ts

@@ -1,5 +1,6 @@
-import { ContentRef } from "@nteract/core";
 import { CellId } from "@nteract/commutable";
+import { ContentRef } from "@nteract/core";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 
 export const CLOSE_NOTEBOOK = "CLOSE_NOTEBOOK";
 export interface CloseNotebookAction {
@@ -16,25 +17,6 @@ export const closeNotebook = (payload: { contentRef: ContentRef }): CloseNoteboo
   };
 };
 
-export const UPDATE_LAST_MODIFIED = "UPDATE_LAST_MODIFIED";
-export interface UpdateLastModifiedAction {
-  type: "UPDATE_LAST_MODIFIED";
-  payload: {
-    contentRef: ContentRef;
-    lastModified: string;
-  };
-}
-
-export const updateLastModified = (payload: {
-  contentRef: ContentRef;
-  lastModified: string;
-}): UpdateLastModifiedAction => {
-  return {
-    type: UPDATE_LAST_MODIFIED,
-    payload
-  };
-};
-
 export const EXECUTE_FOCUSED_CELL_AND_FOCUS_NEXT = "EXECUTE_FOCUSED_CELL_AND_FOCUS_NEXT";
 export interface ExecuteFocusedCellAndFocusNextAction {
   type: "EXECUTE_FOCUSED_CELL_AND_FOCUS_NEXT";
@@ -81,3 +63,24 @@ export const setHoveredCell = (payload: { cellId: CellId }): SetHoveredCellActio
     payload
   };
 };
+
+export const TRACE_NOTEBOOK_TELEMETRY = "TRACE_NOTEBOOK_TELEMETRY";
+export interface TraceNotebookTelemetryAction {
+  type: "TRACE_NOTEBOOK_TELEMETRY";
+  payload: {
+    action: Action;
+    actionModifier?: string;
+    data?: any;
+  };
+}
+
+export const traceNotebookTelemetry = (payload: {
+  action: Action;
+  actionModifier?: string;
+  data?: any;
+}): TraceNotebookTelemetryAction => {
+  return {
+    type: TRACE_NOTEBOOK_TELEMETRY,
+    payload
+  };
+};

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -1,4 +1,4 @@
-import { empty, merge, of, timer, interval, concat, Subject, Subscriber, Observable, Observer } from "rxjs";
+import { empty, merge, of, timer, concat, Subject, Subscriber, Observable, Observer } from "rxjs";
 import { webSocket } from "rxjs/webSocket";
 import { ActionsObservable, StateObservable } from "redux-observable";
 import { ofType } from "redux-observable";
@@ -10,7 +10,6 @@ import {
   map,
   switchMap,
   take,
-  distinctUntilChanged,
   filter,
   catchError,
   first,
@@ -21,7 +20,6 @@ import {
   AppState,
   ServerConfig as JupyterServerConfig,
   JupyterHostRecordProps,
-  JupyterHostRecord,
   RemoteKernelProps,
   castToSessionId,
   createKernelRef,
@@ -29,8 +27,7 @@ import {
   ContentRef,
   KernelInfo,
   actions,
-  selectors,
+  selectors
-  IContentProvider
 } from "@nteract/core";
 import { message, JupyterMessage, Channels, createMessage, childOf, ofMessageType } from "@nteract/messaging";
 import { sessions, kernels } from "rx-jupyter";
@@ -752,69 +749,6 @@ export const cleanKernelOnConnectionLostEpic = (
   );
 };
 
-/**
- * Workaround for issue: https://github.com/nteract/nteract/issues/4583
- * We reajust the property
- * @param action$
- * @param state$
- */
-const adjustLastModifiedOnSaveEpic = (
-  action$: ActionsObservable<actions.SaveFulfilled>,
-  state$: StateObservable<AppState>,
-  dependencies: { contentProvider: IContentProvider }
-): Observable<{} | CdbActions.UpdateLastModifiedAction> => {
-  return action$.pipe(
-    ofType(actions.SAVE_FULFILLED),
-    mergeMap(action => {
-      const pollDelayMs = 500;
-      const nbAttempts = 4;
-
-      // Retry updating last modified
-      const currentHost = selectors.currentHost(state$.value);
-      const serverConfig = selectors.serverConfig(currentHost as JupyterHostRecord);
-      const filepath = selectors.filepath(state$.value, { contentRef: action.payload.contentRef });
-      const content = selectors.content(state$.value, { contentRef: action.payload.contentRef });
-      const lastSaved = (content.lastSaved as any) as string;
-      const contentProvider = dependencies.contentProvider;
-
-      // Query until value is stable
-      return interval(pollDelayMs)
-        .pipe(take(nbAttempts))
-        .pipe(
-          mergeMap(x =>
-            contentProvider.get(serverConfig, filepath, { content: 0 }).pipe(
-              map(xhr => {
-                if (xhr.status !== 200 || typeof xhr.response === "string") {
-                  return undefined;
-                }
-                const model = xhr.response;
-                const lastModified = model.last_modified;
-                if (lastModified === lastSaved) {
-                  return undefined;
-                }
-                // Return last modified
-                return lastModified;
-              })
-            )
-          ),
-          distinctUntilChanged(),
-          mergeMap(lastModified => {
-            if (!lastModified) {
-              return empty();
-            }
-
-            return of(
-              CdbActions.updateLastModified({
-                contentRef: action.payload.contentRef,
-                lastModified
-              })
-            );
-          })
-        );
-    })
-  );
-};
-
 /**
  * Execute focused cell and focus next cell
  * @param action$
@@ -917,7 +851,6 @@ export const allEpics = [
   acquireKernelInfoEpic,
   handleKernelConnectionLostEpic,
   cleanKernelOnConnectionLostEpic,
-  adjustLastModifiedOnSaveEpic,
   executeFocusedCellAndFocusNextEpic,
   closeUnsupportedMimetypesEpic,
   closeContentFailedToFetchEpic,

src/Explorer/Notebook/NotebookComponent/reducers.ts

@@ -1,9 +1,10 @@
+import { actions, CoreRecord, reducers as nteractReducers } from "@nteract/core";
+import { Action } from "redux";
+import { Areas } from "../../../Common/Constants";
+import TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as cdbActions from "./actions";
 import { CdbRecord } from "./types";
 
-import { Action } from "redux";
-import { actions, CoreRecord, reducers as nteractReducers } from "@nteract/core";
-
 export const coreReducer = (state: CoreRecord, action: Action) => {
   let typedAction;
   switch (action.type) {
@@ -50,11 +51,6 @@ export const coreReducer = (state: CoreRecord, action: Action) => {
         .setIn(path.concat("displayName"), kernelspecs.displayName)
         .setIn(path.concat("language"), kernelspecs.language);
     }
-    case cdbActions.UPDATE_LAST_MODIFIED: {
-      typedAction = action as cdbActions.UpdateLastModifiedAction;
-      const path = ["entities", "contents", "byRef", typedAction.payload.contentRef, "lastSaved"];
-      return state.setIn(path, typedAction.payload.lastModified);
-    }
     default:
       return nteractReducers.core(state as any, action as any);
   }
@@ -75,6 +71,17 @@ export const cdbReducer = (state: CdbRecord, action: Action) => {
       const typedAction = action as cdbActions.SetHoveredCellAction;
       return state.set("hoveredCellId", typedAction.payload.cellId);
     }
+
+    case cdbActions.TRACE_NOTEBOOK_TELEMETRY: {
+      const typedAction = action as cdbActions.TraceNotebookTelemetryAction;
+      TelemetryProcessor.trace(typedAction.payload.action, typedAction.payload.actionModifier, {
+        ...typedAction.payload.data,
+        databaseAccountName: state.databaseAccountName,
+        defaultExperience: state.defaultExperience,
+        dataExplorerArea: Areas.Notebook
+      });
+      return state;
+    }
   }
   return state;
 };

src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx

@@ -9,11 +9,12 @@ import { connect } from "react-redux";
 import { Dispatch } from "redux";
 import { actions, ContentRef } from "@nteract/core";
 import loadTransform from "../NotebookComponent/loadTransform";
-import CodeMirrorEditor from "@nteract/editor";
+import CodeMirrorEditor from "@nteract/stateful-components/lib/inputs/connected-editors/codemirror";
 import "./NotebookReadOnlyRenderer.less";
 
 export interface NotebookRendererProps {
   contentRef: any;
+  hideInputs?: boolean;
 }
 
 interface PassedEditorProps {
@@ -46,7 +47,8 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
               <CodeCell id={id} contentRef={contentRef}>
                 {{
                   editor: {
-                    codemirror: (props: PassedEditorProps) => <CodeMirrorEditor {...props} readOnly={"nocursor"} />
+                    codemirror: (props: PassedEditorProps) =>
+                      this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} readOnly={"nocursor"} />
                   },
                   prompt: ({ id, contentRef }) => <></>
                 }}
@@ -63,7 +65,8 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
               <RawCell id={id} contentRef={contentRef} cell_type="raw">
                 {{
                   editor: {
-                    codemirror: (props: PassedEditorProps) => <CodeMirrorEditor {...props} readOnly={"nocursor"} />
+                    codemirror: (props: PassedEditorProps) =>
+                      this.props.hideInputs ? <></> : <CodeMirrorEditor {...props} readOnly={"nocursor"} />
                   }
                 }}
               </RawCell>

src/Explorer/Notebook/NotebookRenderer/Prompt.tsx

@@ -1,8 +1,9 @@
+import { actions, ContentRef, selectors } from "@nteract/core";
 import React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import { ContentRef, selectors, actions } from "@nteract/core";
+import * as cdbActions from "../NotebookComponent/actions";
 import { CdbAppState } from "../NotebookComponent/types";
 
 export interface PassedPromptProps {
@@ -83,7 +84,15 @@ const mapDispatchToProps = (
   dispatch: Dispatch,
   { id, contentRef }: { id: string; contentRef: ContentRef }
 ): DispatchProps => ({
-  executeCell: () => dispatch(actions.executeCell({ id, contentRef })),
+  executeCell: () => {
+    dispatch(actions.executeCell({ id, contentRef }));
+    dispatch(
+      cdbActions.traceNotebookTelemetry({
+        action: Action.ExecuteCellPromptBtn,
+        actionModifier: ActionModifiers.Mark
+      })
+    );
+  },
   stopExecution: () => dispatch(actions.interruptKernel({}))
 });
 

src/Explorer/Notebook/NotebookSamples.ts

@@ -0,0 +1,127 @@
+import { IGitHubRepo, IGitHubBranch } from "../../GitHub/GitHubClient";
+
+export const SamplesRepo: IGitHubRepo = {
+  name: "cosmos-notebooks",
+  owner: "Azure-Samples",
+  private: false
+};
+
+export const SamplesBranch: IGitHubBranch = {
+  name: "master"
+};
+
+export const isSamplesCall = (owner: string, repo: string, branch?: string): boolean => {
+  return owner === SamplesRepo.owner && repo === SamplesRepo.name && (!branch || branch === SamplesBranch.name);
+};
+
+// GitHub API calls have a rate limit of 5000 requests per hour. So if we get high traffic on Data Explorer
+// loading samples exceed that limit. Using this hard coded response for samples until we fix that.
+export const SamplesContentsQueryResponse = {
+  repository: {
+    owner: {
+      login: "Azure-Samples"
+    },
+    name: "cosmos-notebooks",
+    isPrivate: false,
+    ref: {
+      name: "master",
+      target: {
+        history: {
+          nodes: [
+            {
+              oid: "cda7facb9e039b173f3376200c26c859896e7974",
+              message:
+                "Merge pull request #45 from Azure-Samples/users/deborahc/pythonSampleUpdates\n\nAdd bokeh version to notebook",
+              committer: {
+                date: "2020-05-28T11:28:01-07:00"
+              }
+            }
+          ]
+        }
+      }
+    },
+    object: {
+      entries: [
+        {
+          name: ".github",
+          type: "tree",
+          object: {}
+        },
+        {
+          name: ".gitignore",
+          type: "blob",
+          object: {
+            oid: "3e759b75bf455ac809d0987d369aab89137b5689",
+            byteSize: 5582
+          }
+        },
+        {
+          name: "1. GettingStarted.ipynb",
+          type: "blob",
+          object: {
+            oid: "0732ff5366e4aefdc4c378c61cbd968664f0acec",
+            byteSize: 3933
+          }
+        },
+        {
+          name: "2. Visualization.ipynb",
+          type: "blob",
+          object: {
+            oid: "6b16b0740a77afdd38a95bc6c3ebd0f2f17d9465",
+            byteSize: 820317
+          }
+        },
+        {
+          name: "3. RequestUnits.ipynb",
+          type: "blob",
+          object: {
+            oid: "252b79a4adc81e9f2ffde453231b695d75e270e8",
+            byteSize: 9490
+          }
+        },
+        {
+          name: "4. Indexing.ipynb",
+          type: "blob",
+          object: {
+            oid: "e10dd67bd1c55c345226769e4f80e43659ef9cd5",
+            byteSize: 10394
+          }
+        },
+        {
+          name: "5. StoredProcedures.ipynb",
+          type: "blob",
+          object: {
+            oid: "949941949920de4d2d111149e2182e9657cc8134",
+            byteSize: 11818
+          }
+        },
+        {
+          name: "6. GlobalDistribution.ipynb",
+          type: "blob",
+          object: {
+            oid: "b91c31dacacbc9e35750d9054063dda4a5309f3b",
+            byteSize: 11375
+          }
+        },
+        {
+          name: "7. IoTAnomalyDetection.ipynb",
+          type: "blob",
+          object: {
+            oid: "82057ae52a67721a5966e2361317f5dfbd0ee595",
+            byteSize: 377939
+          }
+        },
+        {
+          name: "All_API_quickstarts",
+          type: "tree",
+          object: {}
+        },
+        {
+          name: "CSharp_quickstarts",
+          type: "tree",
+          object: {}
+        }
+      ]
+    }
+  }
+};

src/Explorer/OpenActions.ts

@@ -155,19 +155,7 @@ function openPane(action: ActionContracts.OpenPane, explorer: ViewModels.Explore
 }
 
 function openFile(action: ActionContracts.OpenSampleNotebook, explorer: ViewModels.Explorer) {
-  let path: string;
+  explorer.handleOpenFileAction(decodeURIComponent(action.path));
-  if (action.hasOwnProperty("file")) {
-    // This is deprecated
-    const downloadUrl: string = (action as any).file.download_url;
-    path = downloadUrl.replace(
-      "raw.githubusercontent.com/Azure-Samples/cosmos-notebooks",
-      "github.com/Azure-Samples/cosmos-notebooks/blob"
-    ); // convert raw download url to something which GitHubContentProvider understands
-  } else {
-    path = action.path;
-  }
-
-  explorer.handleOpenFileAction(path);
 }
 
 function generateQueryText(action: ActionContracts.OpenQueryTab, partitionKeyProperty: string): string {

src/Explorer/Panes/ClusterLibraryPane.ts

@@ -1,3 +1,4 @@
+import _ from "underscore";
 import * as ko from "knockout";
 import * as Constants from "../../Common/Constants";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -81,7 +82,7 @@ export class ClusterLibraryPane extends ContextualPaneBase {
 
   private _onInstalledChanged = (libraryName: string, installed: boolean): void => {
     const items = this._clusterLibraryProps().libraryItems;
-    const library = items.find(item => item.name === libraryName);
+    const library = _.find(items, item => item.name === libraryName);
     library.installed = installed;
     this._clusterLibraryProps.valueHasMutated();
   };

src/Explorer/Panes/GitHubReposPane.ts

@@ -1,19 +1,20 @@
+import _ from "underscore";
 import { Areas, HttpStatusCodes } from "../../Common/Constants";
 import { Logger } from "../../Common/Logger";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { GitHubClient, IGitHubRepo } from "../../GitHub/GitHubClient";
+import { GitHubClient, IGitHubPageInfo, IGitHubRepo } from "../../GitHub/GitHubClient";
 import { IPinnedRepo, JunoClient } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { GitHubUtils } from "../../Utils/GitHubUtils";
+import { JunoUtils } from "../../Utils/JunoUtils";
 import { NotificationConsoleUtils } from "../../Utils/NotificationConsoleUtils";
 import { AuthorizeAccessComponent } from "../Controls/GitHub/AuthorizeAccessComponent";
-import { GitHubReposComponentProps, RepoListItem, GitHubReposComponent } from "../Controls/GitHub/GitHubReposComponent";
+import { GitHubReposComponent, GitHubReposComponentProps, RepoListItem } from "../Controls/GitHub/GitHubReposComponent";
 import { GitHubReposComponentAdapter } from "../Controls/GitHub/GitHubReposComponentAdapter";
 import { BranchesProps, PinnedReposProps, UnpinnedReposProps } from "../Controls/GitHub/ReposListComponent";
 import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { ContextualPaneBase } from "./ContextualPaneBase";
-import { JunoUtils } from "../../Utils/JunoUtils";
 
 export class GitHubReposPane extends ContextualPaneBase {
   private static readonly PageSize = 30;
@@ -29,6 +30,7 @@ export class GitHubReposPane extends ContextualPaneBase {
   private gitHubReposAdapter: GitHubReposComponentAdapter;
 
   private allGitHubRepos: IGitHubRepo[];
+  private allGitHubReposLastPageInfo?: IGitHubPageInfo;
   private pinnedReposUpdated: boolean;
 
   constructor(options: ViewModels.GitHubReposPaneOptions) {
@@ -73,6 +75,7 @@ export class GitHubReposPane extends ContextualPaneBase {
     this.gitHubReposAdapter = new GitHubReposComponentAdapter(this.gitHubReposProps);
 
     this.allGitHubRepos = [];
+    this.allGitHubReposLastPageInfo = undefined;
     this.pinnedReposUpdated = false;
   }
 
@@ -115,6 +118,7 @@ export class GitHubReposPane extends ContextualPaneBase {
 
     // Reset cached repos
     this.allGitHubRepos = [];
+    this.allGitHubReposLastPageInfo = undefined;
 
     // Reset flags
     this.pinnedReposUpdated = false;
@@ -164,29 +168,28 @@ export class GitHubReposPane extends ContextualPaneBase {
     const unpinnedGitHubRepos = this.allGitHubRepos.filter(
       gitHubRepo =>
         this.pinnedReposProps.repos.findIndex(
-          pinnedRepo => pinnedRepo.key === GitHubUtils.toRepoFullName(gitHubRepo.owner.login, gitHubRepo.name)
+          pinnedRepo => pinnedRepo.key === GitHubUtils.toRepoFullName(gitHubRepo.owner, gitHubRepo.name)
         ) === -1
     );
     return unpinnedGitHubRepos.map(gitHubRepo => ({
-      key: GitHubUtils.toRepoFullName(gitHubRepo.owner.login, gitHubRepo.name),
+      key: GitHubUtils.toRepoFullName(gitHubRepo.owner, gitHubRepo.name),
       repo: gitHubRepo,
       branches: []
     }));
   }
 
   private async loadMoreBranches(repo: IGitHubRepo): Promise<void> {
-    const branchesProps = this.branchesProps[GitHubUtils.toRepoFullName(repo.owner.login, repo.name)];
+    const branchesProps = this.branchesProps[GitHubUtils.toRepoFullName(repo.owner, repo.name)];
     branchesProps.hasMore = true;
     branchesProps.isLoading = true;
     this.triggerRender();
 
-    const nextPage = Math.floor(branchesProps.branches.length / GitHubReposPane.PageSize) + 1;
     try {
       const response = await this.gitHubClient.getBranchesAsync(
-        repo.owner.login,
+        repo.owner,
         repo.name,
-        nextPage,
+        GitHubReposPane.PageSize,
-        GitHubReposPane.PageSize
+        branchesProps.lastPageInfo?.endCursor
       );
       if (response.status !== HttpStatusCodes.OK) {
         throw new Error(`Received HTTP ${response.status} when fetching branches`);
@@ -194,6 +197,7 @@ export class GitHubReposPane extends ContextualPaneBase {
 
       if (response.data) {
         branchesProps.branches = branchesProps.branches.concat(response.data);
+        branchesProps.lastPageInfo = response.pageInfo;
       }
     } catch (error) {
       const message = `Failed to fetch branches: ${error}`;
@@ -202,7 +206,7 @@ export class GitHubReposPane extends ContextualPaneBase {
     }
 
     branchesProps.isLoading = false;
-    branchesProps.hasMore = branchesProps.branches.length === GitHubReposPane.PageSize * nextPage;
+    branchesProps.hasMore = branchesProps.lastPageInfo?.hasNextPage;
     this.triggerRender();
   }
 
@@ -211,15 +215,18 @@ export class GitHubReposPane extends ContextualPaneBase {
     this.unpinnedReposProps.hasMore = true;
     this.triggerRender();
 
-    const nextPage = Math.floor(this.allGitHubRepos.length / GitHubReposPane.PageSize) + 1;
     try {
-      const response = await this.gitHubClient.getReposAsync(nextPage, GitHubReposPane.PageSize);
+      const response = await this.gitHubClient.getReposAsync(
+        GitHubReposPane.PageSize,
+        this.allGitHubReposLastPageInfo?.endCursor
+      );
       if (response.status !== HttpStatusCodes.OK) {
         throw new Error(`Received HTTP ${response.status} when fetching unpinned repos`);
       }
 
       if (response.data) {
         this.allGitHubRepos = this.allGitHubRepos.concat(response.data);
+        this.allGitHubReposLastPageInfo = response.pageInfo;
         this.unpinnedReposProps.repos = this.calculateUnpinnedRepos();
       }
     } catch (error) {
@@ -229,7 +236,7 @@ export class GitHubReposPane extends ContextualPaneBase {
     }
 
     this.unpinnedReposProps.isLoading = false;
-    this.unpinnedReposProps.hasMore = this.allGitHubRepos.length === GitHubReposPane.PageSize * nextPage;
+    this.unpinnedReposProps.hasMore = this.allGitHubReposLastPageInfo?.hasNextPage;
     this.triggerRender();
   }
 
@@ -253,7 +260,7 @@ export class GitHubReposPane extends ContextualPaneBase {
     this.pinnedReposUpdated = true;
     const initialReposLength = this.pinnedReposProps.repos.length;
 
-    const existingRepo = this.pinnedReposProps.repos.find(repo => repo.key === item.key);
+    const existingRepo = _.find(this.pinnedReposProps.repos, repo => repo.key === item.key);
     if (existingRepo) {
       existingRepo.branches = item.branches;
     } else {
@@ -318,6 +325,7 @@ export class GitHubReposPane extends ContextualPaneBase {
       if (!this.branchesProps[item.key]) {
         this.branchesProps[item.key] = {
           branches: [],
+          lastPageInfo: undefined,
           hasMore: true,
           isLoading: true,
           loadMore: (): Promise<void> => this.loadMoreBranches(item.repo)
@@ -329,6 +337,7 @@ export class GitHubReposPane extends ContextualPaneBase {
 
   private async refreshUnpinnedRepoListItems(): Promise<void> {
     this.allGitHubRepos = [];
+    this.allGitHubReposLastPageInfo = undefined;
     this.unpinnedReposProps.repos = [];
     this.loadMoreUnpinnedRepos();
   }

src/Explorer/Tabs/GalleryTab.tsx

@@ -3,7 +3,7 @@ import * as ViewModels from "../../Contracts/ViewModels";
 import TabsBase from "./TabsBase";
 import * as React from "react";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import { GalleryViewerContainerComponent } from "../../GalleryViewer/GalleryViewerComponent";
+import { GalleryViewerContainerComponent } from "../Controls/NotebookGallery/GalleryViewerComponent";
 
 /**
  * Notebook gallery tab

src/Explorer/Tabs/NotebookViewerTab.tsx

@@ -16,7 +16,9 @@ class NotebookViewerComponentAdapter implements ReactAdapter {
     private notebookUrl: string,
     private notebookName: string,
     private container: ViewModels.Explorer,
-    private notebookMetadata: DataModels.NotebookMetadata
+    private notebookMetadata: DataModels.NotebookMetadata,
+    private onNotebookMetadataChange: (newNotebookMetadata: DataModels.NotebookMetadata) => Promise<void>,
+    private isLikedNotebook: boolean
   ) {}
 
   public renderComponent(): JSX.Element {
@@ -26,6 +28,8 @@ class NotebookViewerComponentAdapter implements ReactAdapter {
         notebookMetadata={this.notebookMetadata}
         notebookName={this.notebookName}
         container={this.container}
+        onNotebookMetadataChange={this.onNotebookMetadataChange}
+        isLikedNotebook={this.isLikedNotebook}
       />
     ) : (
       <></>
@@ -46,7 +50,9 @@ export default class NotebookViewerTab extends TabsBase implements ViewModels.Ta
       options.notebookUrl,
       options.notebookName,
       options.container,
-      options.notebookMetadata
+      options.notebookMetadata,
+      options.onNotebookMetadataChange,
+      options.isLikedNotebook
     );
 
     this.notebookViewerComponentAdapter.parameters = ko.computed<boolean>(() => {

src/Explorer/Tree/Collection.ts

@@ -32,6 +32,7 @@ import DocumentId from "./DocumentId";
 import StoredProcedure from "./StoredProcedure";
 import Trigger from "./Trigger";
 import UserDefinedFunction from "./UserDefinedFunction";
+import { config } from "../../Config";
 
 export default class Collection implements ViewModels.Collection {
   public nodeKind: string;
@@ -1416,7 +1417,7 @@ export default class Collection implements ViewModels.Collection {
         masterKey: CosmosClient.masterKey(),
         endpoint: CosmosClient.endpoint(),
         accessToken: CosmosClient.accessToken(),
-        platform: window.dataExplorerPlatform,
+        platform: config.platform,
         databaseAccount: CosmosClient.databaseAccount()
       }
     };

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -14,7 +14,6 @@ import CollectionIcon from "../../../images/tree-collection.svg";
 import DeleteIcon from "../../../images/delete.svg";
 import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 import RefreshIcon from "../../../images/refresh-cosmos.svg";
-import { IGitHubRepo, IGitHubBranch } from "../../GitHub/GitHubClient";
 import NewNotebookIcon from "../../../images/notebook/Notebook-new.svg";
 import FileIcon from "../../../images/notebook/file-cosmos.svg";
 import { ArrayHashMap } from "../../Common/ArrayHashMap";
@@ -26,21 +25,11 @@ import TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import { Areas } from "../../Common/Constants";
 import { GitHubUtils } from "../../Utils/GitHubUtils";
+import { SamplesRepo, SamplesBranch } from "../Notebook/NotebookSamples";
 
 export class ResourceTreeAdapter implements ReactAdapter {
   private static readonly DataTitle = "DATA";
   private static readonly NotebooksTitle = "NOTEBOOKS";
-
-  private static readonly SamplesRepo: IGitHubRepo = {
-    name: "cosmos-notebooks",
-    owner: {
-      login: "Azure-Samples"
-    },
-    private: false
-  };
-  private static readonly SamplesBranch: IGitHubBranch = {
-    name: "master"
-  };
   private static readonly PseudoDirPath = "PsuedoDir";
 
   public parameters: ko.Observable<number>;
@@ -103,12 +92,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
 
     this.sampleNotebooksContentRoot = {
       name: "Sample Notebooks (View Only)",
-      path: GitHubUtils.toContentUri(
+      path: GitHubUtils.toContentUri(SamplesRepo.owner, SamplesRepo.name, SamplesBranch.name, ""),
-        ResourceTreeAdapter.SamplesRepo.owner.login,
-        ResourceTreeAdapter.SamplesRepo.name,
-        ResourceTreeAdapter.SamplesBranch.name,
-        ""
-      ),
       type: NotebookContentItemType.Directory
     };
     refreshTasks.push(

src/GalleryViewer/GalleryViewer.less

@@ -1,9 +0,0 @@
-@import "../../less/Common/Constants";
-
-.galleryContainer {
-  padding: @DefaultSpace;
-  height: 100%;
-  overflow-y: scroll;
-  width: 100%;
-  font-family: @DataExplorerFont;
-}

src/GalleryViewer/GalleryViewer.tsx

@@ -1,13 +1,13 @@
 import * as ReactDOM from "react-dom";
 import "bootstrap/dist/css/bootstrap.css";
-import "./GalleryViewer.less";
+import { CosmosClient } from "../Common/CosmosClient";
-import { GalleryViewerComponent } from "./GalleryViewerComponent";
+import { GalleryViewerComponent } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent";
 import { JunoUtils } from "../Utils/JunoUtils";
 import { initializeIcons } from "office-ui-fabric-react/lib/Icons";
 
 const onInit = async () => {
   initializeIcons();
-  const officialSamplesData = await JunoUtils.getOfficialSampleNotebooks();
+  const officialSamplesData = await JunoUtils.getOfficialSampleNotebooks(CosmosClient.authorizationToken());
   const galleryViewerComponent = new GalleryViewerComponent({
     officialSamplesData: officialSamplesData,
     likedNotebookData: undefined,

src/GalleryViewer/GalleryViewerComponent.tsx

@@ -1,207 +0,0 @@
-/**
- * Gallery Viewer
- */
-
-import * as React from "react";
-import * as DataModels from "../Contracts/DataModels";
-import * as ViewModels from "../Contracts/ViewModels";
-import { GalleryCardComponent } from "./Cards/GalleryCardComponent";
-import { Stack, IStackTokens } from "office-ui-fabric-react";
-import AppBar from "@material-ui/core/AppBar";
-import Tabs from "@material-ui/core/Tabs";
-import Tab from "@material-ui/core/Tab";
-import Typography from "@material-ui/core/Typography";
-import Box from "@material-ui/core/Box";
-import { JunoUtils } from "../Utils/JunoUtils";
-import { CosmosClient } from "../Common/CosmosClient";
-import { config } from "../Config";
-import path from "path";
-import { SessionStorageUtility, StorageKey } from "../Shared/StorageUtility";
-import "./GalleryViewer.less";
-
-interface GalleryCardsComponentProps {
-  data: DataModels.GitHubInfoJunoResponse[];
-  onClick: (url: string, notebookMetadata: DataModels.NotebookMetadata) => Promise<void>;
-}
-
-class GalleryCardsComponent extends React.Component<GalleryCardsComponentProps> {
-  private sectionStackTokens: IStackTokens = { childrenGap: 30 };
-  public render(): JSX.Element {
-    return (
-      <Stack horizontal wrap tokens={this.sectionStackTokens}>
-        {this.props.data.map((githubInfo: DataModels.GitHubInfoJunoResponse, index: any) => {
-          const name = githubInfo.name;
-          const url = githubInfo.downloadUrl;
-          const notebookMetadata = githubInfo.metadata;
-
-          return (
-            name !== ".gitignore" &&
-            url && (
-              <GalleryCardComponent
-                key={url}
-                name={name}
-                url={url}
-                notebookMetadata={notebookMetadata}
-                onClick={() => this.props.onClick(url, notebookMetadata)}
-              />
-            )
-          );
-        })}
-      </Stack>
-    );
-  }
-}
-
-const TabPanel = (props: any) => (
-  <Typography
-    component="div"
-    role="tabpanel"
-    hidden={props.value !== props.index}
-    id={`full-width-tabpanel-${props.index}`}
-    aria-labelledby={`full-width-tab-${props.index}`}
-  >
-    {props.value === props.index && <Box p={2}>{props.children}</Box>}
-  </Typography>
-);
-
-const a11yProps = (index: number) => {
-  return {
-    id: `full-width-tab-${index}`,
-    "aria-controls": `full-width-tabpanel-${index}`
-  };
-};
-
-interface FullWidthTabsProps {
-  officialSamplesContent: DataModels.GitHubInfoJunoResponse[];
-  likedNotebooksContent: DataModels.GitHubInfoJunoResponse[];
-  onClick: (url: string, notebookMetadata: DataModels.NotebookMetadata) => Promise<void>;
-}
-
-const FullWidthTabs = (props: FullWidthTabsProps) => {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = ({}, newValue: any) => {
-    setValue(newValue);
-  };
-
-  return (
-    <>
-      <AppBar position="static" color="transparent" style={{ background: "transparent", boxShadow: "none" }}>
-        <Tabs
-          value={value}
-          onChange={handleChange}
-          indicatorColor="primary"
-          textColor="primary"
-          aria-label="gallery tabs"
-        >
-          <Tab label="Official Samples" {...a11yProps(0)} />
-          <Tab label="Liked Notebooks" {...a11yProps(1)} />
-        </Tabs>
-      </AppBar>
-      <TabPanel value={value} index={0}>
-        <GalleryCardsComponent data={props.officialSamplesContent} onClick={props.onClick} />
-      </TabPanel>
-      <TabPanel value={value} index={1}>
-        <GalleryCardsComponent data={props.likedNotebooksContent} onClick={props.onClick} />
-      </TabPanel>
-    </>
-  );
-};
-
-export interface GalleryViewerContainerComponentProps {
-  container: ViewModels.Explorer;
-}
-
-export interface GalleryViewerContainerComponentState {
-  officialSamplesData: DataModels.GitHubInfoJunoResponse[];
-  likedNotebooksData: DataModels.LikedNotebooksJunoResponse;
-}
-
-export class GalleryViewerContainerComponent extends React.Component<
-  GalleryViewerContainerComponentProps,
-  GalleryViewerContainerComponentState
-> {
-  constructor(props: GalleryViewerContainerComponentProps) {
-    super(props);
-    this.state = {
-      officialSamplesData: undefined,
-      likedNotebooksData: undefined
-    };
-  }
-
-  componentDidMount() {
-    JunoUtils.getOfficialSampleNotebooks().then((data1: DataModels.GitHubInfoJunoResponse[]) => {
-      const officialSamplesData = data1;
-
-      JunoUtils.getLikedNotebooks(CosmosClient.authorizationToken()).then(
-        (data2: DataModels.LikedNotebooksJunoResponse) => {
-          const likedNotebooksData = data2;
-
-          this.setState({
-            officialSamplesData: officialSamplesData,
-            likedNotebooksData: likedNotebooksData
-          });
-        }
-      );
-    });
-  }
-
-  public render(): JSX.Element {
-    return this.state.officialSamplesData && this.state.likedNotebooksData ? (
-      <GalleryViewerComponent
-        container={this.props.container}
-        officialSamplesData={this.state.officialSamplesData}
-        likedNotebookData={this.state.likedNotebooksData}
-      />
-    ) : (
-      <></>
-    );
-  }
-}
-
-export interface GalleryViewerComponentProps {
-  container: ViewModels.Explorer;
-  officialSamplesData: DataModels.GitHubInfoJunoResponse[];
-  likedNotebookData: DataModels.LikedNotebooksJunoResponse;
-}
-
-export class GalleryViewerComponent extends React.Component<GalleryViewerComponentProps> {
-  private authorizationToken = CosmosClient.authorizationToken();
-
-  public render(): JSX.Element {
-    return this.props.container ? (
-      <div className="galleryContainer">
-        <FullWidthTabs
-          officialSamplesContent={this.props.officialSamplesData}
-          likedNotebooksContent={this.props.likedNotebookData.likedNotebooksContent}
-          onClick={this.openNotebookViewer}
-        />
-      </div>
-    ) : (
-      <div className="galleryContainer">
-        <GalleryCardsComponent data={this.props.officialSamplesData} onClick={this.openNotebookViewer} />
-      </div>
-    );
-  }
-
-  public getOfficialSamplesData(): DataModels.GitHubInfoJunoResponse[] {
-    return this.props.officialSamplesData;
-  }
-
-  public getLikedNotebookData(): DataModels.LikedNotebooksJunoResponse {
-    return this.props.likedNotebookData;
-  }
-
-  public openNotebookViewer = async (url: string, notebookMetadata: DataModels.NotebookMetadata) => {
-    if (!this.props.container) {
-      SessionStorageUtility.setEntryString(
-        StorageKey.NotebookMetadata,
-        notebookMetadata ? JSON.stringify(notebookMetadata) : null
-      );
-      SessionStorageUtility.setEntryString(StorageKey.NotebookName, path.basename(url));
-      window.open(`${config.hostedExplorerURL}notebookViewer.html?notebookurl=${url}`, "_blank");
-    } else {
-      this.props.container.openNotebookViewer(url, notebookMetadata);
-    }
-  };
-}

src/GitHub/GitHubClient.test.ts

@@ -1,92 +1,110 @@
-import ko from "knockout";
 import { HttpStatusCodes } from "../Common/Constants";
-import { GitHubClient, IGitHubBranch, IGitHubRepo } from "./GitHubClient";
+import { GitHubClient, IGitHubFile } from "./GitHubClient";
+import { SamplesRepo, SamplesBranch, SamplesContentsQueryResponse } from "../Explorer/Notebook/NotebookSamples";
 
 const invalidTokenCallback = jest.fn();
-// Use a dummy token to get around API rate limit (same as AZURESAMPLESCOSMOSDBPAT in webpack.config.js)
+// Use a dummy token to get around API rate limit (something which doesn't affect the API quota for AZURESAMPLESCOSMOSDBPAT in Config.ts)
-const gitHubClient = new GitHubClient("99e38770e29b4a61d7c49f188780504efd35cc86", invalidTokenCallback);
+const gitHubClient = new GitHubClient("cd1906b9534362fab6ce45d6db6c76b59e55bc50", invalidTokenCallback);
-const samplesRepo: IGitHubRepo = {
-  name: "cosmos-notebooks",
-  owner: {
-    login: "Azure-Samples"
-  },
-  private: false
-};
-const samplesBranch: IGitHubBranch = {
-  name: "master"
-};
-const sampleFilePath = ".gitignore";
-const sampleDirPath = ".github";
 
-describe.skip("GitHubClient", () => {
+const validateGitHubFile = (file: IGitHubFile) => {
+  expect(file.branch).toEqual(SamplesBranch);
+  expect(file.commit).toBeDefined();
+  expect(file.name).toBeDefined();
+  expect(file.path).toBeDefined();
+  expect(file.repo).toEqual(SamplesRepo);
+  expect(file.type).toBeDefined();
+
+  switch (file.type) {
+    case "blob":
+      expect(file.sha).toBeDefined();
+      expect(file.size).toBeDefined();
+      break;
+
+    case "tree":
+      expect(file.sha).toBeUndefined();
+      expect(file.size).toBeUndefined();
+      break;
+
+    default:
+      throw new Error(`Unsupported github file type: ${file.type}`);
+  }
+};
+
+describe("GitHubClient", () => {
   it("getRepoAsync returns valid repo", async () => {
-    const response = await gitHubClient.getRepoAsync(samplesRepo.owner.login, samplesRepo.name);
+    const response = await gitHubClient.getRepoAsync(SamplesRepo.owner, SamplesRepo.name);
-    expect(response.status).toBe(HttpStatusCodes.OK);
+    expect(response).toEqual({
-    expect(response.data.name).toBe(samplesRepo.name);
+      status: HttpStatusCodes.OK,
-    expect(response.data.owner.login).toBe(samplesRepo.owner.login);
+      data: SamplesRepo
+    });
   });
 
   it("getReposAsync returns repos for authenticated user", async () => {
-    const response = await gitHubClient.getReposAsync(1, 1);
+    const response = await gitHubClient.getReposAsync(1);
     expect(response.status).toBe(HttpStatusCodes.OK);
+    expect(response.data).toBeDefined();
     expect(response.data.length).toBe(1);
+    expect(response.pageInfo).toBeDefined();
   });
 
   it("getBranchesAsync returns branches for a repo", async () => {
-    const response = await gitHubClient.getBranchesAsync(samplesRepo.owner.login, samplesRepo.name, 1, 1);
+    const response = await gitHubClient.getBranchesAsync(SamplesRepo.owner, SamplesRepo.name, 1);
     expect(response.status).toBe(HttpStatusCodes.OK);
-    expect(response.data.length).toBe(1);
+    expect(response.data).toEqual([SamplesBranch]);
+    expect(response.pageInfo).toBeDefined();
   });
 
-  it("getCommitsAsync returns commits for a file", async () => {
+  it("getContentsAsync returns files in the repo", async () => {
-    const response = await gitHubClient.getCommitsAsync(
+    const response = await gitHubClient.getContentsAsync(SamplesRepo.owner, SamplesRepo.name, SamplesBranch.name);
-      samplesRepo.owner.login,
-      samplesRepo.name,
-      samplesBranch.name,
-      sampleFilePath,
-      1,
-      1
-    );
     expect(response.status).toBe(HttpStatusCodes.OK);
-    expect(response.data.length).toBe(1);
+    expect(response.data).toBeDefined();
+
+    const data = response.data as IGitHubFile[];
+    expect(data.length).toBeGreaterThan(0);
+    data.forEach(content => validateGitHubFile(content));
   });
 
-  it("getDirContentsAsync returns files in the repo", async () => {
+  it("getContentsAsync returns files in a dir", async () => {
-    const response = await gitHubClient.getDirContentsAsync(
+    const samplesDir = SamplesContentsQueryResponse.repository.object.entries.find(file => file.type === "tree");
-      samplesRepo.owner.login,
+    const response = await gitHubClient.getContentsAsync(
-      samplesRepo.name,
+      SamplesRepo.owner,
-      samplesBranch.name,
+      SamplesRepo.name,
-      ""
+      SamplesBranch.name,
+      samplesDir.name
     );
+
     expect(response.status).toBe(HttpStatusCodes.OK);
-    expect(response.data.length).toBeGreaterThan(0);
+    expect(response.data).toBeDefined();
-    expect(response.data[0].repo).toEqual(samplesRepo);
+
-    expect(response.data[0].branch).toEqual(samplesBranch);
+    const data = response.data as IGitHubFile[];
+    expect(data.length).toBeGreaterThan(0);
+    data.forEach(content => validateGitHubFile(content));
   });
 
-  it("getDirContentsAsync returns files in a dir", async () => {
+  it("getContentsAsync returns a file", async () => {
-    const response = await gitHubClient.getDirContentsAsync(
+    const samplesFile = SamplesContentsQueryResponse.repository.object.entries.find(file => file.type === "blob");
-      samplesRepo.owner.login,
+    const response = await gitHubClient.getContentsAsync(
-      samplesRepo.name,
+      SamplesRepo.owner,
-      samplesBranch.name,
+      SamplesRepo.name,
-      sampleDirPath
+      SamplesBranch.name,
+      samplesFile.name
     );
+
     expect(response.status).toBe(HttpStatusCodes.OK);
-    expect(response.data.length).toBeGreaterThan(0);
+    expect(response.data).toBeDefined();
-    expect(response.data[0].repo).toEqual(samplesRepo);
+
-    expect(response.data[0].branch).toEqual(samplesBranch);
+    const file = response.data as IGitHubFile;
+    expect(file.type).toBe("blob");
+    validateGitHubFile(file);
+    expect(file.content).toBeUndefined();
   });
 
-  it("getFileContentsAsync returns a file", async () => {
+  it("getBlobAsync returns file content", async () => {
-    const response = await gitHubClient.getFileContentsAsync(
+    const samplesFile = SamplesContentsQueryResponse.repository.object.entries.find(file => file.type === "blob");
-      samplesRepo.owner.login,
+    const response = await gitHubClient.getBlobAsync(SamplesRepo.owner, SamplesRepo.name, samplesFile.object.oid);
-      samplesRepo.name,
+
-      samplesBranch.name,
-      sampleFilePath
-    );
     expect(response.status).toBe(HttpStatusCodes.OK);
-    expect(response.data.path).toBe(sampleFilePath);
+    expect(response.data).toBeDefined();
-    expect(response.data.repo).toEqual(samplesRepo);
+    expect(typeof response.data).toBe("string");
-    expect(response.data.branch).toEqual(samplesBranch);
   });
 });

src/GitHub/GitHubClient.ts

@@ -1,163 +1,228 @@
 import { Octokit } from "@octokit/rest";
-import { RequestHeaders } from "@octokit/types";
 import { HttpStatusCodes } from "../Common/Constants";
+import { Logger } from "../Common/Logger";
+import UrlUtility from "../Common/UrlUtility";
+import { isSamplesCall, SamplesContentsQueryResponse } from "../Explorer/Notebook/NotebookSamples";
+import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
+
+export interface IGitHubPageInfo {
+  endCursor: string;
+  hasNextPage: boolean;
+}
 
 export interface IGitHubResponse<T> {
   status: number;
   data: T;
+  pageInfo?: IGitHubPageInfo;
 }
 
 export interface IGitHubRepo {
-  // API properties
   name: string;
-  owner: {
+  owner: string;
-    login: string;
-  };
   private: boolean;
-
-  // Custom properties
   children?: IGitHubFile[];
 }
 
 export interface IGitHubFile {
-  // API properties
+  type: "blob" | "tree";
-  type: "file" | "dir" | "symlink" | "submodule";
+  size?: number;
-  encoding?: string;
-  size: number;
   name: string;
   path: string;
   content?: string;
-  sha: string;
+  sha?: string;
-
-  // Custom properties
   children?: IGitHubFile[];
-  repo?: IGitHubRepo;
+  repo: IGitHubRepo;
-  branch?: IGitHubBranch;
+  branch: IGitHubBranch;
+  commit: IGitHubCommit;
 }
 
 export interface IGitHubCommit {
-  // API properties
   sha: string;
   message: string;
-  committer: {
+  commitDate: string;
-    date: string;
-  };
 }
 
 export interface IGitHubBranch {
-  // API properties
   name: string;
 }
 
-export interface IGitHubUser {
+// graphql schema
-  // API properties
+interface Collection<T> {
-  login: string;
+  pageInfo?: PageInfo;
+  nodes: T[];
+}
+
+interface Repository {
+  isPrivate: boolean;
+  name: string;
+  owner: {
+    login: string;
+  };
+}
+
+interface Ref {
   name: string;
 }
 
+interface History {
+  history: Collection<Commit>;
+}
+
+interface Commit {
+  committer: {
+    date: string;
+  };
+  message: string;
+  oid: string;
+}
+
+interface Tree extends Blob {
+  entries: TreeEntry[];
+}
+
+interface TreeEntry {
+  name: string;
+  type: string;
+  object: Blob;
+}
+
+interface Blob {
+  byteSize?: number;
+  oid?: string;
+}
+
+interface PageInfo {
+  endCursor: string;
+  hasNextPage: boolean;
+}
+
+// graphql queries and types
+const repositoryQuery = `query($owner: String!, $repo: String!) {
+  repository(owner: $owner, name: $repo) {
+    owner {
+      login
+    }
+    name
+    isPrivate
+  }
+}`;
+type RepositoryQueryParams = {
+  owner: string;
+  repo: string;
+};
+type RepositoryQueryResponse = {
+  repository: Repository;
+};
+
+const repositoriesQuery = `query($pageSize: Int!, $endCursor: String) {
+  viewer {
+    repositories(first: $pageSize, after: $endCursor) {
+      pageInfo {
+        endCursor,
+        hasNextPage
+      }
+      nodes {
+        owner {
+          login
+        }
+        name
+        isPrivate
+      }
+    }
+  }
+}`;
+type RepositoriesQueryParams = {
+  pageSize: number;
+  endCursor?: string;
+};
+type RepositoriesQueryResponse = {
+  viewer: {
+    repositories: Collection<Repository>;
+  };
+};
+
+const branchesQuery = `query($owner: String!, $repo: String!, $refPrefix: String!, $pageSize: Int!, $endCursor: String) {
+  repository(owner: $owner, name: $repo) {
+    refs(refPrefix: $refPrefix, first: $pageSize, after: $endCursor) {
+      pageInfo {
+        endCursor,
+        hasNextPage
+      }
+      nodes {
+        name
+      }
+    }
+  }
+}`;
+type BranchesQueryParams = {
+  owner: string;
+  repo: string;
+  refPrefix: string;
+  pageSize: number;
+  endCursor?: string;
+};
+type BranchesQueryResponse = {
+  repository: {
+    refs: Collection<Ref>;
+  };
+};
+
+const contentsQuery = `query($owner: String!, $repo: String!, $ref: String!, $path: String, $objectExpression: String!) {
+  repository(owner: $owner, name: $repo) {
+    owner {
+      login
+    }
+    name
+    isPrivate
+    ref(qualifiedName: $ref) {
+      name
+      target {
+        ... on Commit {
+          history(first: 1, path: $path) {
+            nodes {
+              oid
+              message
+              committer {
+                date
+              }
+            }
+          }
+        }
+      }
+    }
+    object(expression: $objectExpression) {
+      ... on Blob {
+        oid
+        byteSize
+      }
+      ... on Tree {
+        entries {
+          name
+          type
+          object {
+            ... on Blob {
+              oid
+              byteSize
+            }
+          }
+        }
+      }
+    }
+  }
+}`;
+type ContentsQueryParams = {
+  owner: string;
+  repo: string;
+  ref: string;
+  path?: string;
+  objectExpression: string;
+};
+type ContentsQueryResponse = {
+  repository: Repository & { ref: Ref & { target: History } } & { object: Tree };
+};
+
 export class GitHubClient {
-  private static readonly gitHubApiEndpoint = "https://api.github.com";
+  private static readonly SelfErrorCode = 599;
-
-  private static readonly samplesRepo: IGitHubRepo = {
-    name: "cosmos-notebooks",
-    private: false,
-    owner: {
-      login: "Azure-Samples"
-    }
-  };
-
-  private static readonly samplesBranch: IGitHubBranch = {
-    name: "master"
-  };
-
-  private static readonly samplesTopCommit: IGitHubCommit = {
-    sha: "41b964f442b638097a75a3f3b6a6451db05a12bf",
-    committer: {
-      date: "2020-05-19T05:03:30Z"
-    },
-    message: "Fixing formatting"
-  };
-
-  private static readonly samplesFiles: IGitHubFile[] = [
-    {
-      name: ".github",
-      path: ".github",
-      sha: "5e6794a8177a0c07a8719f6e1d7b41cce6f92e1e",
-      size: 0,
-      type: "dir"
-    },
-    {
-      name: ".gitignore",
-      path: ".gitignore",
-      sha: "3e759b75bf455ac809d0987d369aab89137b5689",
-      size: 5582,
-      type: "file"
-    },
-    {
-      name: "1. GettingStarted.ipynb",
-      path: "1. GettingStarted.ipynb",
-      sha: "0732ff5366e4aefdc4c378c61cbd968664f0acec",
-      size: 3933,
-      type: "file"
-    },
-    {
-      name: "2. Visualization.ipynb",
-      path: "2. Visualization.ipynb",
-      sha: "f480134ac4adf2f50ce5fe66836c6966749d3ca1",
-      size: 814261,
-      type: "file"
-    },
-    {
-      name: "3. RequestUnits.ipynb",
-      path: "3. RequestUnits.ipynb",
-      sha: "252b79a4adc81e9f2ffde453231b695d75e270e8",
-      size: 9490,
-      type: "file"
-    },
-    {
-      name: "4. Indexing.ipynb",
-      path: "4. Indexing.ipynb",
-      sha: "e10dd67bd1c55c345226769e4f80e43659ef9cd5",
-      size: 10394,
-      type: "file"
-    },
-    {
-      name: "5. StoredProcedures.ipynb",
-      path: "5. StoredProcedures.ipynb",
-      sha: "949941949920de4d2d111149e2182e9657cc8134",
-      size: 11818,
-      type: "file"
-    },
-    {
-      name: "6. GlobalDistribution.ipynb",
-      path: "6. GlobalDistribution.ipynb",
-      sha: "b91c31dacacbc9e35750d9054063dda4a5309f3b",
-      size: 11375,
-      type: "file"
-    },
-    {
-      name: "7. IoTAnomalyDetection.ipynb",
-      path: "7. IoTAnomalyDetection.ipynb",
-      sha: "82057ae52a67721a5966e2361317f5dfbd0ee595",
-      size: 377939,
-      type: "file"
-    },
-    {
-      name: "All_API_quickstarts",
-      path: "All_API_quickstarts",
-      sha: "07054293e6c8fc00771fccd0cde207f5c8053978",
-      size: 0,
-      type: "dir"
-    },
-    {
-      name: "CSharp_quickstarts",
-      path: "CSharp_quickstarts",
-      sha: "10e7f5704e6b56a40cac74bc39f15b7708954f52",
-      size: 0,
-      type: "dir"
-    }
-  ];
-
   private ocktokit: Octokit;
 
   constructor(token: string, private errorCallback: (error: any) => void) {
@@ -169,167 +234,136 @@ export class GitHubClient {
   }
 
   public async getRepoAsync(owner: string, repo: string): Promise<IGitHubResponse<IGitHubRepo>> {
-    if (GitHubClient.isSamplesCall(owner, repo)) {
+    try {
+      const response = (await this.ocktokit.graphql(repositoryQuery, {
+        owner,
+        repo
+      } as RepositoryQueryParams)) as RepositoryQueryResponse;
+
       return {
         status: HttpStatusCodes.OK,
-        data: GitHubClient.samplesRepo
+        data: GitHubClient.toGitHubRepo(response.repository)
+      };
+    } catch (error) {
+      GitHubClient.log(Logger.logError, `GitHubClient.getRepoAsync failed: ${error}`);
+      return {
+        status: GitHubClient.SelfErrorCode,
+        data: undefined
       };
     }
-
-    const response = await this.ocktokit.repos.get({
-      owner,
-      repo,
-      headers: GitHubClient.getDisableCacheHeaders()
-    });
-
-    let data: IGitHubRepo;
-    if (response.data) {
-      data = GitHubClient.toGitHubRepo(response.data);
-    }
-
-    return { status: response.status, data };
   }
 
-  public async getReposAsync(page: number, perPage: number): Promise<IGitHubResponse<IGitHubRepo[]>> {
+  public async getReposAsync(pageSize: number, endCursor?: string): Promise<IGitHubResponse<IGitHubRepo[]>> {
-    const response = await this.ocktokit.repos.listForAuthenticatedUser({
+    try {
-      page,
+      const response = (await this.ocktokit.graphql(repositoriesQuery, {
-      per_page: perPage,
+        pageSize,
-      headers: GitHubClient.getDisableCacheHeaders()
+        endCursor
-    });
+      } as RepositoriesQueryParams)) as RepositoriesQueryResponse;
 
-    let data: IGitHubRepo[];
+      return {
-    if (response.data) {
+        status: HttpStatusCodes.OK,
-      data = [];
+        data: response.viewer.repositories.nodes.map(repo => GitHubClient.toGitHubRepo(repo)),
-      response.data?.forEach((element: any) => data.push(GitHubClient.toGitHubRepo(element)));
+        pageInfo: GitHubClient.toGitHubPageInfo(response.viewer.repositories.pageInfo)
+      };
+    } catch (error) {
+      GitHubClient.log(Logger.logError, `GitHubClient.getReposAsync failed: ${error}`);
+      return {
+        status: GitHubClient.SelfErrorCode,
+        data: undefined
+      };
     }
-
-    return { status: response.status, data };
   }
 
   public async getBranchesAsync(
     owner: string,
     repo: string,
-    page: number,
+    pageSize: number,
-    perPage: number
+    endCursor?: string
   ): Promise<IGitHubResponse<IGitHubBranch[]>> {
-    const response = await this.ocktokit.repos.listBranches({
+    try {
-      owner,
+      const response = (await this.ocktokit.graphql(branchesQuery, {
-      repo,
+        owner,
-      page,
+        repo,
-      per_page: perPage,
+        refPrefix: "refs/heads/",
-      headers: GitHubClient.getDisableCacheHeaders()
+        pageSize,
-    });
+        endCursor
+      } as BranchesQueryParams)) as BranchesQueryResponse;
 
-    let data: IGitHubBranch[];
-    if (response.data) {
-      data = [];
-      response.data?.forEach(element => data.push(GitHubClient.toGitHubBranch(element)));
-    }
-
-    return { status: response.status, data };
-  }
-
-  public async getCommitsAsync(
-    owner: string,
-    repo: string,
-    branch: string,
-    path: string,
-    page: number,
-    perPage: number
-  ): Promise<IGitHubResponse<IGitHubCommit[]>> {
-    if (GitHubClient.isSamplesCall(owner, repo, branch) && path === "" && page === 1 && perPage === 1) {
       return {
         status: HttpStatusCodes.OK,
-        data: [GitHubClient.samplesTopCommit]
+        data: response.repository.refs.nodes.map(ref => GitHubClient.toGitHubBranch(ref)),
+        pageInfo: GitHubClient.toGitHubPageInfo(response.repository.refs.pageInfo)
+      };
+    } catch (error) {
+      GitHubClient.log(Logger.logError, `GitHubClient.getBranchesAsync failed: ${error}`);
+      return {
+        status: GitHubClient.SelfErrorCode,
+        data: undefined
       };
     }
-
-    const response = await this.ocktokit.repos.listCommits({
-      owner,
-      repo,
-      sha: branch,
-      path,
-      page,
-      per_page: perPage,
-      headers: GitHubClient.getDisableCacheHeaders()
-    });
-
-    let data: IGitHubCommit[];
-    if (response.data) {
-      data = [];
-      response.data?.forEach(element =>
-        data.push(GitHubClient.toGitHubCommit({ ...element.commit, sha: element.sha }))
-      );
-    }
-
-    return { status: response.status, data };
-  }
-
-  public async getDirContentsAsync(
-    owner: string,
-    repo: string,
-    branch: string,
-    path: string
-  ): Promise<IGitHubResponse<IGitHubFile[]>> {
-    return (await this.getContentsAsync(owner, repo, branch, path)) as IGitHubResponse<IGitHubFile[]>;
-  }
-
-  public async getFileContentsAsync(
-    owner: string,
-    repo: string,
-    branch: string,
-    path: string
-  ): Promise<IGitHubResponse<IGitHubFile>> {
-    return (await this.getContentsAsync(owner, repo, branch, path)) as IGitHubResponse<IGitHubFile>;
   }
 
   public async getContentsAsync(
     owner: string,
     repo: string,
     branch: string,
-    path: string
+    path?: string
   ): Promise<IGitHubResponse<IGitHubFile | IGitHubFile[]>> {
-    if (GitHubClient.isSamplesCall(owner, repo, branch) && path === "") {
+    try {
+      let response: ContentsQueryResponse;
+      if (isSamplesCall(owner, repo, branch) && !path) {
+        response = SamplesContentsQueryResponse;
+      } else {
+        response = (await this.ocktokit.graphql(contentsQuery, {
+          owner,
+          repo,
+          ref: `refs/heads/${branch}`,
+          path: path || undefined,
+          objectExpression: `refs/heads/${branch}:${path || ""}`
+        } as ContentsQueryParams)) as ContentsQueryResponse;
+      }
+
+      let data: IGitHubFile | IGitHubFile[];
+      const entries = response.repository.object.entries;
+      const gitHubRepo = GitHubClient.toGitHubRepo(response.repository);
+      const gitHubBranch = GitHubClient.toGitHubBranch(response.repository.ref);
+      const gitHubCommit = GitHubClient.toGitHubCommit(response.repository.ref.target.history.nodes[0]);
+
+      if (Array.isArray(entries)) {
+        data = entries.map(entry =>
+          GitHubClient.toGitHubFile(
+            entry,
+            (path && UrlUtility.createUri(path, entry.name)) || entry.name,
+            gitHubRepo,
+            gitHubBranch,
+            gitHubCommit
+          )
+        );
+      } else {
+        data = GitHubClient.toGitHubFile(
+          {
+            name: NotebookUtil.getName(path),
+            type: "blob",
+            object: response.repository.object
+          },
+          path,
+          gitHubRepo,
+          gitHubBranch,
+          gitHubCommit
+        );
+      }
+
       return {
         status: HttpStatusCodes.OK,
-        data: GitHubClient.samplesFiles.map(file =>
+        data
-          GitHubClient.toGitHubFile(file, GitHubClient.samplesRepo, GitHubClient.samplesBranch)
+      };
-        )
+    } catch (error) {
+      GitHubClient.log(Logger.logError, `GitHubClient.getContentsAsync failed: ${error}`);
+      return {
+        status: GitHubClient.SelfErrorCode,
+        data: undefined
       };
     }
-
-    const response = await this.ocktokit.repos.getContents({
-      owner,
-      repo,
-      path,
-      ref: branch,
-      headers: GitHubClient.getDisableCacheHeaders()
-    });
-
-    let data: IGitHubFile | IGitHubFile[];
-    if (response.data) {
-      const repoResponse = await this.getRepoAsync(owner, repo);
-      if (repoResponse.data) {
-        const fileRepo: IGitHubRepo = GitHubClient.toGitHubRepo(repoResponse.data);
-        const fileBranch: IGitHubBranch = { name: branch };
-
-        if (Array.isArray(response.data)) {
-          const contents: IGitHubFile[] = [];
-          response.data.forEach((element: any) =>
-            contents.push(GitHubClient.toGitHubFile(element, fileRepo, fileBranch))
-          );
-          data = contents;
-        } else {
-          data = GitHubClient.toGitHubFile(
-            { ...response.data, type: response.data.type as "file" | "dir" | "symlink" | "submodule" },
-            fileRepo,
-            fileBranch
-          );
-        }
-      }
-    }
-
-    return { status: response.status, data };
   }
 
   public async createOrUpdateFileAsync(
@@ -372,7 +406,9 @@ export class GitHubClient {
       owner,
       repo,
       ref,
-      headers: GitHubClient.getDisableCacheHeaders()
+      headers: {
+        "If-None-Match": "" // disable 60s cache
+      }
     });
 
     const currentTree = await this.ocktokit.git.getTree({
@@ -380,7 +416,9 @@ export class GitHubClient {
       repo,
       tree_sha: currentRef.data.object.sha,
       recursive: "1",
-      headers: GitHubClient.getDisableCacheHeaders()
+      headers: {
+        "If-None-Match": "" // disable 60s cache
+      }
     });
 
     // API infers tree from paths so we need to filter them out
@@ -425,7 +463,7 @@ export class GitHubClient {
 
   public async deleteFileAsync(file: IGitHubFile, message: string): Promise<IGitHubResponse<IGitHubCommit>> {
     const response = await this.ocktokit.repos.deleteFile({
-      owner: file.repo.owner.login,
+      owner: file.repo.owner,
       repo: file.repo.name,
       path: file.path,
       message,
@@ -441,10 +479,31 @@ export class GitHubClient {
     return { status: response.status, data };
   }
 
-  private initOctokit(token: string) {
+  public async getBlobAsync(owner: string, repo: string, sha: string): Promise<IGitHubResponse<string>> {
+    const response = await this.ocktokit.git.getBlob({
+      owner,
+      repo,
+      file_sha: sha,
+      mediaType: {
+        format: "raw"
+      },
+      headers: {
+        "If-None-Match": "" // disable 60s cache
+      }
+    });
+
+    return { status: response.status, data: <string>(<unknown>response.data) };
+  }
+
+  private async initOctokit(token: string) {
     this.ocktokit = new Octokit({
       auth: token,
-      baseUrl: GitHubClient.gitHubApiEndpoint
+      log: {
+        debug: () => {},
+        info: (message?: any) => GitHubClient.log(Logger.logInfo, message),
+        warn: (message?: any) => GitHubClient.log(Logger.logWarning, message),
+        error: (message?: any) => GitHubClient.log(Logger.logError, message)
+      }
     });
 
     this.ocktokit.hook.error("request", error => {
@@ -453,53 +512,69 @@ export class GitHubClient {
     });
   }
 
-  private static getDisableCacheHeaders(): RequestHeaders {
+  private static log(logger: (message: string, area: string) => void, message?: any) {
+    if (message) {
+      message = typeof message === "string" ? message : JSON.stringify(message);
+      logger(message, "GitHubClient.Octokit");
+    }
+  }
+
+  private static toGitHubRepo(object: Repository): IGitHubRepo {
     return {
-      "If-None-Match": ""
+      owner: object.owner.login,
+      name: object.name,
+      private: object.isPrivate
     };
   }
 
-  private static toGitHubRepo(element: IGitHubRepo): IGitHubRepo {
+  private static toGitHubBranch(object: Ref): IGitHubBranch {
     return {
-      name: element.name,
+      name: object.name
-      owner: {
-        login: element.owner.login
-      },
-      private: element.private
     };
   }
 
-  private static toGitHubBranch(element: IGitHubBranch): IGitHubBranch {
+  private static toGitHubCommit(object: {
+    message: string;
+    committer: {
+      date: string;
+    };
+    sha?: string;
+    oid?: string;
+  }): IGitHubCommit {
     return {
-      name: element.name
+      sha: object.sha || object.oid,
+      message: object.message,
+      commitDate: object.committer.date
     };
   }
 
-  private static toGitHubCommit(element: IGitHubCommit): IGitHubCommit {
+  private static toGitHubPageInfo(object: PageInfo): IGitHubPageInfo {
     return {
-      sha: element.sha,
+      endCursor: object.endCursor,
-      message: element.message,
+      hasNextPage: object.hasNextPage
-      committer: {
-        date: element.committer.date
-      }
     };
   }
 
-  private static toGitHubFile(element: IGitHubFile, repo: IGitHubRepo, branch: IGitHubBranch): IGitHubFile {
+  private static toGitHubFile(
+    entry: TreeEntry,
+    path: string,
+    repo: IGitHubRepo,
+    branch: IGitHubBranch,
+    commit: IGitHubCommit
+  ): IGitHubFile {
+    if (entry.type !== "blob" && entry.type !== "tree") {
+      throw new Error(`Unsupported file type: ${entry.type}`);
+    }
+
     return {
-      type: element.type,
+      type: entry.type,
-      encoding: element.encoding,
+      name: entry.name,
-      size: element.size,
+      path,
-      name: element.name,
-      path: element.path,
-      content: element.content,
-      sha: element.sha,
       repo,
-      branch
+      branch,
+      commit,
+      size: entry.object?.byteSize,
+      sha: entry.object?.oid
     };
   }
-
-  private static isSamplesCall(owner: string, repo: string, branch?: string): boolean {
-    return owner === "Azure-Samples" && repo === "cosmos-notebooks" && (!branch || branch === "master");
-  }
 }

src/GitHub/GitHubContentProvider.test.ts

@@ -10,27 +10,30 @@ const gitHubContentProvider = new GitHubContentProvider({
   gitHubClient,
   promptForCommitMsg: () => Promise.resolve("commit msg")
 });
+const gitHubCommit: IGitHubCommit = {
+  sha: "sha",
+  message: "message",
+  commitDate: "date"
+};
 const sampleFile: IGitHubFile = {
-  type: "file",
+  type: "blob",
-  encoding: "encoding",
   size: 0,
   name: "name.ipynb",
   path: "dir/name.ipynb",
-  content: btoa(fixture),
+  content: fixture,
   sha: "sha",
   repo: {
-    owner: {
+    owner: "owner",
-      login: "login"
-    },
     name: "repo",
     private: false
   },
   branch: {
     name: "branch"
-  }
+  },
+  commit: gitHubCommit
 };
 const sampleGitHubUri = GitHubUtils.toContentUri(
-  sampleFile.repo.owner.login,
+  sampleFile.repo.owner,
   sampleFile.repo.name,
   sampleFile.branch.name,
   sampleFile.path
@@ -43,16 +46,9 @@ const sampleNotebookModel: IContent<"notebook"> = {
   created: "",
   last_modified: "date",
   mimetype: "application/x-ipynb+json",
-  content: sampleFile.content ? JSON.parse(atob(sampleFile.content)) : null,
+  content: sampleFile.content ? JSON.parse(sampleFile.content) : null,
   format: "json"
 };
-const gitHubCommit: IGitHubCommit = {
-  sha: "sha",
-  message: "message",
-  committer: {
-    date: "date"
-  }
-};
 
 describe("GitHubContentProvider remove", () => {
   it("errors on invalid path", async () => {
@@ -125,9 +121,6 @@ describe("GitHubContentProvider get", () => {
     spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue(
       Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile })
     );
-    spyOn(GitHubClient.prototype, "getCommitsAsync").and.returnValue(
-      Promise.resolve({ status: HttpStatusCodes.OK, data: [gitHubCommit] })
-    );
 
     const response = await gitHubContentProvider.get(null, sampleGitHubUri, {}).toPromise();
     expect(response).toBeDefined();
@@ -176,9 +169,6 @@ describe("GitHubContentProvider update", () => {
     spyOn(GitHubClient.prototype, "renameFileAsync").and.returnValue(
       Promise.resolve({ status: HttpStatusCodes.OK, data: gitHubCommit })
     );
-    spyOn(GitHubClient.prototype, "getCommitsAsync").and.returnValue(
-      Promise.resolve({ status: HttpStatusCodes.OK, data: [gitHubCommit] })
-    );
 
     const response = await gitHubContentProvider.update(null, sampleGitHubUri, sampleNotebookModel).toPromise();
     expect(response).toBeDefined();
@@ -215,18 +205,14 @@ describe("GitHubContentProvider create", () => {
     spyOn(GitHubClient.prototype, "createOrUpdateFileAsync").and.returnValue(
       Promise.resolve({ status: HttpStatusCodes.Created, data: gitHubCommit })
     );
-    spyOn(GitHubClient.prototype, "getContentsAsync").and.returnValue(
-      Promise.resolve({ status: HttpStatusCodes.OK, data: sampleFile })
-    );
 
     const response = await gitHubContentProvider.create(null, sampleGitHubUri, sampleNotebookModel).toPromise();
     expect(response).toBeDefined();
     expect(response.status).toBe(HttpStatusCodes.Created);
     expect(gitHubClient.createOrUpdateFileAsync).toBeCalled();
-    expect(gitHubClient.getContentsAsync).toBeCalled();
     expect(response.response.type).toEqual(sampleNotebookModel.type);
-    expect(response.response.name).toEqual(sampleNotebookModel.name);
+    expect(response.response.name).toBeDefined();
-    expect(response.response.path).toEqual(sampleNotebookModel.path);
+    expect(response.response.path).toBeDefined();
     expect(response.response.content).toBeUndefined();
   });
 });

src/GitHub/GitHubContentProvider.ts

@@ -5,7 +5,7 @@ import { AjaxResponse } from "rxjs/ajax";
 import { HttpStatusCodes } from "../Common/Constants";
 import { Logger } from "../Common/Logger";
 import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
-import { GitHubClient, IGitHubFile, IGitHubResponse, IGitHubCommit } from "./GitHubClient";
+import { GitHubClient, IGitHubFile, IGitHubResponse, IGitHubCommit, IGitHubBranch } from "./GitHubClient";
 import { GitHubUtils } from "../Utils/GitHubUtils";
 import UrlUtility from "../Common/UrlUtility";
 
@@ -54,23 +54,14 @@ export class GitHubContentProvider implements IContentProvider {
             throw new GitHubContentProviderError("Failed to get content", content.status);
           }
 
-          const contentInfo = GitHubUtils.fromContentUri(uri);
+          if (!Array.isArray(content.data) && !content.data.content && params.content !== 0) {
-          const commitResponse = await this.params.gitHubClient.getCommitsAsync(
+            const file = content.data;
-            contentInfo.owner,
+            file.content = (
-            contentInfo.repo,
+              await this.params.gitHubClient.getBlobAsync(file.repo.owner, file.repo.name, file.sha)
-            contentInfo.branch,
+            ).data;
-            contentInfo.path,
-            1,
-            1
-          );
-          if (commitResponse.status !== HttpStatusCodes.OK) {
-            throw new GitHubContentProviderError("Failed to get commit", commitResponse.status);
           }
 
-          return this.createSuccessAjaxResponse(
+          return this.createSuccessAjaxResponse(HttpStatusCodes.OK, this.createContentModel(uri, content.data, params));
-            HttpStatusCodes.OK,
-            this.createContentModel(uri, content.data, commitResponse.data[0], params)
-          );
         } catch (error) {
           Logger.logError(error, "GitHubContentProvider/get", error.errno);
           return this.createErrorAjaxResponse(error);
@@ -90,26 +81,26 @@ export class GitHubContentProvider implements IContentProvider {
           const gitHubFile = content.data as IGitHubFile;
           const commitMsg = await this.validateContentAndGetCommitMsg(content, "Rename", "Rename");
           const newUri = model.path;
+          const newPath = GitHubUtils.fromContentUri(newUri).path;
           const response = await this.params.gitHubClient.renameFileAsync(
-            gitHubFile.repo.owner.login,
+            gitHubFile.repo.owner,
             gitHubFile.repo.name,
             gitHubFile.branch.name,
             commitMsg,
             gitHubFile.path,
-            GitHubUtils.fromContentUri(newUri).path
+            newPath
           );
           if (response.status !== HttpStatusCodes.OK) {
             throw new GitHubContentProviderError("Failed to rename", response.status);
           }
 
-          const updatedContentResponse = await this.getContent(model.path);
+          gitHubFile.commit = response.data;
-          if (updatedContentResponse.status !== HttpStatusCodes.OK) {
+          gitHubFile.path = newPath;
-            throw new GitHubContentProviderError("Failed to get content after renaming", updatedContentResponse.status);
+          gitHubFile.name = NotebookUtil.getName(gitHubFile.path);
-          }
 
           return this.createSuccessAjaxResponse(
             HttpStatusCodes.OK,
-            this.createContentModel(newUri, updatedContentResponse.data, response.data, { content: 0 })
+            this.createContentModel(newUri, gitHubFile, { content: 0 })
           );
         } catch (error) {
           Logger.logError(error, "GitHubContentProvider/update", error.errno);
@@ -169,14 +160,24 @@ export class GitHubContentProvider implements IContentProvider {
           }
 
           const newUri = GitHubUtils.toContentUri(contentInfo.owner, contentInfo.repo, contentInfo.branch, path);
-          const newContentResponse = await this.getContent(newUri);
+          const newGitHubFile: IGitHubFile = {
-          if (newContentResponse.status !== HttpStatusCodes.OK) {
+            type: "blob",
-            throw new GitHubContentProviderError("Failed to get content after creating", newContentResponse.status);
+            name: NotebookUtil.getName(newUri),
-          }
+            path,
+            repo: {
+              owner: contentInfo.owner,
+              name: contentInfo.repo,
+              private: undefined
+            },
+            branch: {
+              name: contentInfo.branch
+            },
+            commit: response.data
+          };
 
           return this.createSuccessAjaxResponse(
             HttpStatusCodes.Created,
-            this.createContentModel(newUri, newContentResponse.data, response.data, { content: 0 })
+            this.createContentModel(newUri, newGitHubFile, { content: 0 })
           );
         } catch (error) {
           Logger.logError(error, "GitHubContentProvider/create", error.errno);
@@ -209,7 +210,7 @@ export class GitHubContentProvider implements IContentProvider {
 
           const gitHubFile = content.data as IGitHubFile;
           const response = await this.params.gitHubClient.createOrUpdateFileAsync(
-            gitHubFile.repo.owner.login,
+            gitHubFile.repo.owner,
             gitHubFile.repo.name,
             gitHubFile.branch.name,
             gitHubFile.path,
@@ -221,14 +222,11 @@ export class GitHubContentProvider implements IContentProvider {
             throw new GitHubContentProviderError("Failed to update", response.status);
           }
 
-          const savedContentResponse = await this.getContent(uri);
+          gitHubFile.commit = response.data;
-          if (savedContentResponse.status !== HttpStatusCodes.OK) {
-            throw new GitHubContentProviderError("Failed to get content after updating", savedContentResponse.status);
-          }
 
           return this.createSuccessAjaxResponse(
             HttpStatusCodes.OK,
-            this.createContentModel(uri, savedContentResponse.data, response.data, { content: 0 })
+            this.createContentModel(uri, gitHubFile, { content: 0 })
           );
         } catch (error) {
           Logger.logError(error, "GitHubContentProvider/update", error.errno);
@@ -283,7 +281,7 @@ export class GitHubContentProvider implements IContentProvider {
     return commitMsg;
   }
 
-  private getContent(uri: string): Promise<IGitHubResponse<IGitHubFile | IGitHubFile[]>> {
+  private async getContent(uri: string): Promise<IGitHubResponse<IGitHubFile | IGitHubFile[]>> {
     const contentInfo = GitHubUtils.fromContentUri(uri);
     if (contentInfo) {
       const { owner, repo, branch, path } = contentInfo;
@@ -296,43 +294,37 @@ export class GitHubContentProvider implements IContentProvider {
   private createContentModel(
     uri: string,
     content: IGitHubFile | IGitHubFile[],
-    commit: IGitHubCommit,
     params: Partial<IGetParams>
   ): IContent<FileType> {
     if (Array.isArray(content)) {
-      return this.createDirectoryModel(uri, content, commit);
+      return this.createDirectoryModel(uri, content);
     }
 
-    if (content.type !== "file") {
+    if (content.type === "tree") {
-      return this.createDirectoryModel(uri, undefined, commit);
+      return this.createDirectoryModel(uri, undefined);
     }
 
     if (NotebookUtil.isNotebookFile(uri)) {
-      return this.createNotebookModel(content, commit, params);
+      return this.createNotebookModel(content, params);
     }
 
-    return this.createFileModel(content, commit, params);
+    return this.createFileModel(content, params);
   }
 
-  private createDirectoryModel(
+  private createDirectoryModel(uri: string, gitHubFiles: IGitHubFile[] | undefined): IContent<"directory"> {
-    uri: string,
-    gitHubFiles: IGitHubFile[] | undefined,
-    commit: IGitHubCommit
-  ): IContent<"directory"> {
     return {
-      name: GitHubUtils.fromContentUri(uri).path,
+      name: NotebookUtil.getName(uri),
       path: uri,
       type: "directory",
       writable: true, // TODO: tamitta: we don't know this info here
       created: "", // TODO: tamitta: we don't know this info here
-      last_modified: commit.committer.date,
+      last_modified: "", // TODO: tamitta: we don't know this info here
       mimetype: undefined,
       content: gitHubFiles?.map(
         (file: IGitHubFile) =>
           this.createContentModel(
-            GitHubUtils.toContentUri(file.repo.owner.login, file.repo.name, file.branch.name, file.path),
+            GitHubUtils.toContentUri(file.repo.owner, file.repo.name, file.branch.name, file.path),
             file,
-            commit,
             {
               content: 0
             }
@@ -342,17 +334,12 @@ export class GitHubContentProvider implements IContentProvider {
     };
   }
 
-  private createNotebookModel(
+  private createNotebookModel(gitHubFile: IGitHubFile, params: Partial<IGetParams>): IContent<"notebook"> {
-    gitHubFile: IGitHubFile,
+    const content: Notebook = gitHubFile.content && params.content !== 0 ? JSON.parse(gitHubFile.content) : undefined;
-    commit: IGitHubCommit,
-    params: Partial<IGetParams>
-  ): IContent<"notebook"> {
-    const content: Notebook =
-      gitHubFile.content && params.content !== 0 ? JSON.parse(atob(gitHubFile.content)) : undefined;
     return {
       name: gitHubFile.name,
       path: GitHubUtils.toContentUri(
-        gitHubFile.repo.owner.login,
+        gitHubFile.repo.owner,
         gitHubFile.repo.name,
         gitHubFile.branch.name,
         gitHubFile.path
@@ -360,23 +347,19 @@ export class GitHubContentProvider implements IContentProvider {
       type: "notebook",
       writable: true, // TODO: tamitta: we don't know this info here
       created: "", // TODO: tamitta: we don't know this info here
-      last_modified: commit.committer.date,
+      last_modified: gitHubFile.commit.commitDate,
       mimetype: content ? "application/x-ipynb+json" : undefined,
       content,
       format: content ? "json" : undefined
     };
   }
 
-  private createFileModel(
+  private createFileModel(gitHubFile: IGitHubFile, params: Partial<IGetParams>): IContent<"file"> {
-    gitHubFile: IGitHubFile,
+    const content: string = gitHubFile.content && params.content !== 0 ? gitHubFile.content : undefined;
-    commit: IGitHubCommit,
-    params: Partial<IGetParams>
-  ): IContent<"file"> {
-    const content: string = gitHubFile.content && params.content !== 0 ? atob(gitHubFile.content) : undefined;
     return {
       name: gitHubFile.name,
       path: GitHubUtils.toContentUri(
-        gitHubFile.repo.owner.login,
+        gitHubFile.repo.owner,
         gitHubFile.repo.name,
         gitHubFile.branch.name,
         gitHubFile.path
@@ -384,7 +367,7 @@ export class GitHubContentProvider implements IContentProvider {
       type: "file",
       writable: true, // TODO: tamitta: we don't know this info here
       created: "", // TODO: tamitta: we don't know this info here
-      last_modified: commit.committer.date,
+      last_modified: gitHubFile.commit.commitDate,
       mimetype: content ? "text/plain" : undefined,
       content,
       format: content ? "text" : undefined

src/HostedExplorer.ts

@@ -713,7 +713,7 @@ class HostedExplorer {
       ? storedDefaultTenantId.substring(DefaultDirectoryDropdownComponent.lastVisitedKey.length)
       : storedDefaultTenantId;
 
-    let defaultTenant: Tenant = tenants.find(t => t.tenantId === storedDefaultTenantId);
+    let defaultTenant: Tenant = _.find(tenants, t => t.tenantId === storedDefaultTenantId);
     if (!defaultTenant) {
       defaultTenant = tenants[0];
       LocalStorageUtility.setEntryString(
@@ -830,7 +830,7 @@ class HostedExplorer {
     const storedAccountId = LocalStorageUtility.getEntryString(StorageKey.DatabaseAccountId);
     const storedSubId = storedAccountId && storedAccountId.split("subscriptions/")[1].split("/")[0];
 
-    let defaultSub = subscriptions.find(s => s.subscriptionId === storedSubId);
+    let defaultSub = _.find(subscriptions, s => s.subscriptionId === storedSubId);
     if (!defaultSub) {
       defaultSub = subscriptions[0];
     }
@@ -932,7 +932,7 @@ class HostedExplorer {
     }
 
     let storedDefaultAccountId = LocalStorageUtility.getEntryString(StorageKey.DatabaseAccountId);
-    let defaultAccount = accounts.find(a => a.id === storedDefaultAccountId);
+    let defaultAccount = _.find(accounts, a => a.id === storedDefaultAccountId);
 
     if (!defaultAccount) {
       defaultAccount = accounts[0];

src/Main.ts

@@ -15,7 +15,6 @@ import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
 import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
 import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
 import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
-import "./Explorer/Controls/Tabs/TabComponent.less";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
 import "../less/TableStyles/queryBuilder.less";
 import "../externals/jquery.dataTables.min.css";

src/NotebookViewer/NotebookViewer.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import * as ReactDOM from "react-dom";
 import "bootstrap/dist/css/bootstrap.css";
-import { NotebookMetadata } from "../../../Contracts/DataModels";
+import { NotebookMetadata } from "../Contracts/DataModels";
-import { NotebookViewerComponent } from "./NotebookViewerComponent";
+import { NotebookViewerComponent } from "../Explorer/Controls/NotebookViewer/NotebookViewerComponent";
-import { SessionStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
+import { SessionStorageUtility, StorageKey } from "../Shared/StorageUtility";
 
 const getNotebookUrl = (): string => {
   const regex: RegExp = new RegExp("[?&]notebookurl=([^&#]*)|&|#|$");
@@ -26,12 +26,14 @@ const onInit = async () => {
     SessionStorageUtility.removeEntry(StorageKey.NotebookName);
   }
 
+  const urlParams = new URLSearchParams(window.location.search);
+
   const notebookViewerComponent = (
     <NotebookViewerComponent
       notebookMetadata={notebookMetadata}
       notebookName={notebookName}
       notebookUrl={getNotebookUrl()}
-      container={null}
+      hideInputs={urlParams.get("hideinputs") === "true"}
     />
   );
   ReactDOM.render(notebookViewerComponent, document.getElementById("notebookContent"));

src/Shared/Telemetry/TelemetryConstants.ts

@@ -86,6 +86,7 @@ export enum Action {
   CreateNewNotebook,
   OpenSampleNotebook,
   ExecuteCell,
+  ExecuteCellPromptBtn,
   ExecuteAllCells,
   NotebookEnabled,
   NotebooksGitHubConnect,

src/Utils/GitHubUtils.ts

@@ -7,6 +7,10 @@ export class GitHubUtils {
   // Custom scheme for github content
   private static readonly ContentUriPattern = /github:\/\/([^/]*)\/([^/]*)\/([^?]*)\?ref=(.*)/;
 
+  // https://github.com/<owner>/<repo>/blob/<branch>/<path>
+  // We need to support this until we move to newer scheme for quickstarts
+  private static readonly LegacyContentUriPattern = /https:\/\/github.com\/([^/]*)\/([^/]*)\/blob\/([^/]*)\/([^?]*)/;
+
   public static toRepoFullName(owner: string, repo: string): string {
     return `${owner}/${repo}`;
   }
@@ -27,7 +31,7 @@ export class GitHubUtils {
   public static fromContentUri(
     contentUri: string
   ): undefined | { owner: string; repo: string; branch: string; path: string } {
-    const matches = contentUri.match(GitHubUtils.ContentUriPattern);
+    let matches = contentUri.match(GitHubUtils.ContentUriPattern);
     if (matches && matches.length > 4) {
       return {
         owner: matches[1],
@@ -37,6 +41,18 @@ export class GitHubUtils {
       };
     }
 
+    matches = contentUri.match(GitHubUtils.LegacyContentUriPattern);
+    if (matches && matches.length > 4) {
+      console.log(`Using legacy github content uri scheme ${contentUri}`);
+
+      return {
+        owner: matches[1],
+        repo: matches[2],
+        branch: matches[3],
+        path: matches[4]
+      };
+    }
+
     return undefined;
   }
 

src/Utils/JunoUtils.ts

@@ -8,17 +8,22 @@ export class JunoUtils {
   public static async getLikedNotebooks(authorizationToken: string): Promise<DataModels.LikedNotebooksJunoResponse> {
     //TODO: Add Get method once juno has it implemented
     return {
-      likedNotebooksContent: await JunoUtils.getOfficialSampleNotebooks(),
+      likedNotebooksContent: [],
       userMetadata: {
         likedNotebooks: []
       }
     };
   }
 
-  public static async getOfficialSampleNotebooks(): Promise<DataModels.GitHubInfoJunoResponse[]> {
+  public static async getOfficialSampleNotebooks(
+    authorizationToken: string
+  ): Promise<DataModels.GitHubInfoJunoResponse[]> {
     try {
-      const response = await window.fetch(config.JUNO_ENDPOINT + "/api/galleries/notebooks", {
+      const response = await window.fetch(config.JUNO_ENDPOINT + "/api/notebooks/galleries", {
-        method: "GET"
+        method: "GET",
+        headers: {
+          authorization: authorizationToken
+        }
       });
       if (!response.ok) {
         throw new Error("Status code:" + response.status);
@@ -35,19 +40,21 @@ export class JunoUtils {
   ): Promise<DataModels.UserMetadata> {
     return undefined;
     //TODO: add userMetadata updation code
+    // TODO: Make sure to throw error if failed
   }
 
   public static async updateNotebookMetadata(
     authorizationToken: string,
-    userMetadata: DataModels.NotebookMetadata
+    notebookMetadata: DataModels.NotebookMetadata
   ): Promise<DataModels.NotebookMetadata> {
     return undefined;
     //TODO: add notebookMetadata updation code
+    // TODO: Make sure to throw error if failed
   }
 
   public static toPinnedRepo(item: RepoListItem): IPinnedRepo {
     return {
-      owner: item.repo.owner.login,
+      owner: item.repo.owner,
       name: item.repo.name,
       private: item.repo.private,
       branches: item.branches.map(element => ({ name: element.name }))
@@ -56,9 +63,7 @@ export class JunoUtils {
 
   public static toGitHubRepo(pinnedRepo: IPinnedRepo): IGitHubRepo {
     return {
-      owner: {
+      owner: pinnedRepo.owner,
-        login: pinnedRepo.owner
-      },
       name: pinnedRepo.name,
       private: pinnedRepo.private
     };

src/workers/upload/definitions.ts

@@ -1,5 +1,5 @@
 import { DatabaseAccount } from "../../Contracts/DataModels";
-import { PlatformType } from "../../PlatformType";
+import { Platform } from "../../Config";
 
 export interface StartUploadMessageParams {
   files: FileList;
@@ -12,7 +12,7 @@ export interface DocumentClientParams {
   masterKey: string;
   endpoint: string;
   accessToken: string;
-  platform: PlatformType;
+  platform: Platform;
   databaseAccount: DatabaseAccount;
 }
 

src/workers/upload/index.ts

@@ -1,6 +1,7 @@
 import "babel-polyfill";
 import { DocumentClientParams, UploadDetailsRecord, UploadDetails } from "./definitions";
 import { CosmosClient } from "../../Common/CosmosClient";
+import { config } from "../../Config";
 
 let numUploadsSuccessful = 0;
 let numUploadsFailed = 0;
@@ -33,8 +34,7 @@ onmessage = (event: MessageEvent) => {
   CosmosClient.endpoint(clientParams.endpoint);
   CosmosClient.accessToken(clientParams.accessToken);
   CosmosClient.databaseAccount(clientParams.databaseAccount);
-  self.dataExplorerPlatform = clientParams.platform;
+  config.platform = clientParams.platform;
-  console.log(event);
   if (!!files && files.length > 0) {
     numFiles = files.length;
     for (let i = 0; i < numFiles; i++) {
@@ -106,6 +106,7 @@ function createDocumentsFromFile(fileName: string, documentContent: string): voi
       triggerCreateDocument(content);
     }
   } catch (e) {
+    console.log(e);
     recordUploadDetailErrorForFile(fileName, e.message);
     transmitResultIfUploadComplete();
   }

webpack.config.js

@@ -144,7 +144,7 @@ module.exports = function(env = {}, argv = {}) {
     }),
     new HtmlWebpackPlugin({
       filename: "notebookViewer.html",
-      template: "src/Explorer/Controls/NotebookViewer/notebookViewer.html",
+      template: "src/NotebookViewer/notebookViewer.html",
       chunks: ["notebookViewer"]
     }),
     new HtmlWebpackPlugin({
@@ -175,7 +175,7 @@ module.exports = function(env = {}, argv = {}) {
       hostedExplorer: "./src/HostedExplorer.ts",
       heatmap: "./src/Controls/Heatmap/Heatmap.ts",
       terminal: "./src/Terminal/index.ts",
-      notebookViewer: "./src/Explorer/Controls/NotebookViewer/NotebookViewer.tsx",
+      notebookViewer: "./src/NotebookViewer/NotebookViewer.tsx",
       galleryViewer: "./src/GalleryViewer/GalleryViewer.tsx",
       connectToGitHub: "./src/GitHub/GitHubConnector.ts"
     },