Flush out calling execute and serialization in the vscode extension

* Update buf to generate typescript protos that we can use the vscode extension

* Create a client class in typescript to send execute requests to the backend

* Create a minimal implementation of the notebook controller that is capable of
  executing cells by sending the requests to the backend.

* Implement serialization of the notebooks

* We needed to add more CORS support to handle the fact that certain assets are served from vscode-cdn.net
  * Otherwise the webviews don't render

app/pkg/server/const.go

@@ -0,0 +1,6 @@
+package server
+
+const (
+	// The relative path on which to serve extensions
+	extensionsRPath = "/extensions"
+)

app/pkg/server/server.go

@@ -64,6 +64,7 @@ func NewServer(config config.Config) (*Server, error) {
 type staticMapping struct {
 	relativePath string
 	root         string
+	middleWare   []gin.HandlerFunc
 }
 
 // createGinEngine sets up the gin engine which is a router
@@ -72,6 +73,7 @@ func (s *Server) createGinEngine() error {
 	log.Info("Setting up server")
 
 	router := gin.Default()
+
 	router.GET("/healthz", s.healthCheck)
 
 	// Serve the static assets for vscode.
@@ -80,8 +82,26 @@ func (s *Server) createGinEngine() error {
 
 	vsCodeRPath := "/out"
 	extensionsMapping := staticMapping{
-		relativePath: "extensions",
+		relativePath: extensionsRPath,
 		root:         filepath.Join(s.config.GetAssetsDir(), "vscode/extensions"),
+		// corsForVSCodeStaticAssets is a hack to deal with
+		// https://github.com/microsoft/vscode-discussions/discussions/985.
+		// Concretely per that issue, webviews fetch resources from vscode.cdn.net. I probably need to figure out a better
+		// long term solution; e.g. do we host those somewhere else? In the interim we configure CORS to allow requests from
+		// vscode.cdn.net but only to static assets.
+		middleWare: []gin.HandlerFunc{
+			cors.New(cors.Config{
+				AllowMethods:  []string{"PUT", "PATCH"},
+				AllowHeaders:  []string{"Origin"},
+				ExposeHeaders: []string{"Content-Length"},
+				AllowOriginFunc: func(origin string) bool {
+					// Allow requests from vscode-cdn.net
+					return strings.HasSuffix(origin, ".vscode-cdn.net")
+				},
+				AllowCredentials: false,
+				MaxAge:           12 * time.Hour,
+			}),
+		},
 	}
 
 	foyleExtMapping := staticMapping{
@@ -105,7 +125,11 @@ func (s *Server) createGinEngine() error {
 
 	for _, m := range mappings {
 		log.Info("Adding vscode static assets", "relativePath", m.relativePath, "root", m.root)
-		router.Static(m.relativePath, m.root)
+		group := router.Group(m.relativePath)
+		if m.middleWare != nil {
+			group.Use(m.middleWare...)
+		}
+		group.Static("/", m.root)
 	}
 
 	if err := s.setHTMLTemplates(router); err != nil {
@@ -159,7 +183,6 @@ func (s *Server) createGinEngine() error {
 			corsConfig.AllowOriginFunc = corsFunc.allowOrigin
 		}
 		corsMiddleWare := cors.New(corsConfig)
-
 		router.Use(corsMiddleWare)
 	}
 	s.engine = router
@@ -347,6 +370,9 @@ func (s *Server) registerGRPCGatewayRoutes() error {
 	// we need to configure the gin server to delegate to the gateway mux for the appropriate routes.
 	// There currently doesn't seem to be anyway to do this programmatically. So if we add new routes we'd
 	// have to update the code here.
+	// TODO(jeremy): Actually can we do this with the group method? https://gin-gonic.com/docs/examples/grouping-routes/
+	// e.g.
+	// api := router.Group("/api", handleFunc)
 	pathPrefix := "/api/v1alpha1"
 
 	type method struct {

frontend/foyle/README.md

@@ -76,6 +76,13 @@ message.
 
 For more info see [Test Your Web Extensions using vscode-test-web](https://code.visualstudio.com/api/extension-guides/web-extensions#test-your-web-extension-in-a-browser-using-vscodetestweb)
 
+### Limitations
+
+When using `vscode-test-web` files aren't actually persisted to disk. I'm unclear whether this is an issue with the
+server or the chrome instance that gets created. I suspect vscode-test-web might be launching a virtual filesystem
+which is why we aren't seeing the files on disk.
+
+
 ### Connecting to the backend
 
 You can use the development version of the extension that you run using `yarn run-in-browser` to connect to 
@@ -119,6 +126,24 @@ yarn run-in-browser
 If your foyle server isn't running on the default port of 8080 then in vscode you will need to open up settings
 and configure foyle to use the server running on whatever port you are running on.
 
+## WebViews, CORS, and `vscode.cdn.net`
+
+Some assets still get pulled in from vscode.cdn.net. I haven't fully figured this out yet.
+See [vscode-discussions/discussions](https://github.com/microsoft/vscode-discussions/discussions/985)
+
+Per this [doc](https://code.visualstudio.com/api/extension-capabilities/extending-workbench#webview) I think the webview is where the markdown gets rendered
+
+Per the  [webview extension docs](https://code.visualstudio.com/api/extension-guides/webview); I think they run in an iframe. I suspect the code they are pulling down maybe coming from "vscode-cdn.net". Therefore, when that code ends up trying to contact my server we hit a CORS issue.
+
+I think the URL for that code might get set here
+https://github.com/microsoft/vscode/blob/294eda9b7bd2fc70c174f9ce5e9bb87db5b4d1e6/product.json#L33
+
+See the comment in https://vscodium.com/ about product.json.
+
 # References
-[VSCode Web Extensions](https://code.visualstudio.com/api/extension-guides/web-extensions)
 
+[vscode-discussions/discussions](https://github.com/microsoft/vscode-discussions/discussions/985)
+  * Explains why for security reasons, WebView must be isolated from the host of vscode. 
+  * WebView must have a different origin from the host. So, webview contents are hosted on *.vscode-cdn.net for VS Code Web.
+  * Has an impact on how we setup CORS 
+[VSCode Web Extensions](https://code.visualstudio.com/api/extension-guides/web-extensions)