fix: better first-run experience for publisher-command-center extensions (#99)

* initial changes

* try rendering only warning if unauthorized

* move auth check to index

* remove .vscode

* update manifest.json

* Some more words, fewer tomls

---------

Co-authored-by: Jonathan Keane <[email protected]>

Author: toph-allen

extensions/publisher-command-center/.vscode/extensions.json

@@ -58,6 +58,10 @@ To build the frontend for production:
 npm run build
 ```
 
+### Deploying to Connect
+
+When deploying, include `app.py`, `requirements.txt`, and the contents of the `dist` directory created by `npm run build`.
+
 ### Publishing on Connect
 
 This extension utilizes the [Connect API OAuth Integration](https://docs.posit.co/connect/admin/integrations/oauth-integrations/connect/index.html#create-connect-api-integration-in-posit-connect).

extensions/publisher-command-center/.vscode/settings.json

@@ -3,6 +3,8 @@
 from fastapi import FastAPI, Header
 from fastapi.staticfiles import StaticFiles
 from posit import connect
+from posit.connect.errors import ClientError
+import os
 
 from cachetools import TTLCache, cached
 
@@ -13,6 +15,24 @@
 # Create cache with TTL=1hour and unlimited size
 client_cache = TTLCache(maxsize=float("inf"), ttl=3600)
 
+@app.get("/api/auth-status")
+async def auth_status(posit_connect_user_session_token: str = Header(None)):
+    """
+    If running on Connect, attempt to build a visitor client.
+    If that raises the 212 error (no OAuth integration), return authorized=False.
+    """
+
+    if os.getenv("RSTUDIO_PRODUCT") == "CONNECT":
+        if not posit_connect_user_session_token:
+            return {"authorized": False}
+        try:
+            get_visitor_client(posit_connect_user_session_token)
+        except ClientError as err:
+            if err.error_code == 212:
+                return {"authorized": False}
+            raise # Other errors bubble up
+
+    return {"authorized": True}
 
 @cached(client_cache)
 def get_visitor_client(token: str | None) -> connect.Client:

extensions/publisher-command-center/README.md

@@ -18,56 +18,56 @@
 	},
 	"packages": {},
 	"files": {
-		"app.py": {
-			"checksum": "90c562e6a9f2c2e9fc44c0720bf174d8"
-		},
-		"dist/assets/fa-brands-400.808443ae.ttf": {
-			"checksum": "15d54d142da2f2d6f2e90ed1d55121af"
-		},
-		"dist/assets/fa-brands-400.d7236a19.woff2": {
-			"checksum": "cbcf42b2e9228a8f5bad42717d8a88db"
-		},
-		"dist/assets/fa-regular-400.54cf6086.ttf": {
-			"checksum": "262525e2081311609d1fdab966c82bfc"
-		},
-		"dist/assets/fa-regular-400.e3456d12.woff2": {
-			"checksum": "89672701a5874b80be27649e0494e354"
-		},
-		"dist/assets/fa-solid-900.aa759986.woff2": {
-			"checksum": "4a6591ab5460ae5cbff1ecbd6e52193a"
-		},
-		"dist/assets/fa-solid-900.d2f05935.ttf": {
-			"checksum": "269f971cec0d5dc864fe9ae080b19e23"
-		},
-		"dist/assets/fa-v4compatibility.0ce9033c.woff2": {
-			"checksum": "a772da7bff216cd36214bc44165bba3e"
-		},
-		"dist/assets/fa-v4compatibility.30f6abf6.ttf": {
-			"checksum": "4ed293ceaca9b5b2d9cd74a477963fae"
-		},
-		"dist/assets/index.0c2ac2eb.css": {
-			"checksum": "96fb5a8d93644a29ece62d52354fbc73"
-		},
-		"dist/assets/index.13d67bec.js": {
-			"checksum": "d2b59ba15811b99ddd6067403d3ab38b"
-		},
-		"dist/index.html": {
-			"checksum": "4be76de8432e10c1b1ec25dc9e965a64"
-		},
-		"requirements.txt": {
-			"checksum": "a162a98758867a701ce693948ffdfa67"
-		}
+    "requirements.txt": {
+      "checksum": "a162a98758867a701ce693948ffdfa67"
+    },
+    "app.py": {
+      "checksum": "0e5df52143323d9ae49cf77c51298cde"
+    },
+    "dist/assets/fa-brands-400.808443ae.ttf": {
+      "checksum": "15d54d142da2f2d6f2e90ed1d55121af"
+    },
+    "dist/assets/fa-brands-400.d7236a19.woff2": {
+      "checksum": "cbcf42b2e9228a8f5bad42717d8a88db"
+    },
+    "dist/assets/fa-regular-400.54cf6086.ttf": {
+      "checksum": "262525e2081311609d1fdab966c82bfc"
+    },
+    "dist/assets/fa-regular-400.e3456d12.woff2": {
+      "checksum": "89672701a5874b80be27649e0494e354"
+    },
+    "dist/assets/fa-solid-900.aa759986.woff2": {
+      "checksum": "4a6591ab5460ae5cbff1ecbd6e52193a"
+    },
+    "dist/assets/fa-solid-900.d2f05935.ttf": {
+      "checksum": "269f971cec0d5dc864fe9ae080b19e23"
+    },
+    "dist/assets/fa-v4compatibility.0ce9033c.woff2": {
+      "checksum": "a772da7bff216cd36214bc44165bba3e"
+    },
+    "dist/assets/fa-v4compatibility.30f6abf6.ttf": {
+      "checksum": "4ed293ceaca9b5b2d9cd74a477963fae"
+    },
+    "dist/assets/index.0c2ac2eb.css": {
+      "checksum": "96fb5a8d93644a29ece62d52354fbc73"
+    },
+    "dist/assets/index.835b2c40.js": {
+      "checksum": "52e8175304138c1ef6d18c808dcb4b04"
+    },
+    "dist/index.html": {
+      "checksum": "a3cf0e03275e2436d932280af100438c"
+    }
 	},
 	"extension": {
 		"name": "publisher-command-center",
 		"title": "Publisher Command Center",
-		"description": "A dashboard for publishers to help manage and track their content",
+		"description": "An app that helps publishers view and manage details about apps and dashboards deployed to Connect: View app metadata and history for all of the apps you are collaborating on as well as see and managing running process for individual apps.",
 		"homepage": "https://github.com/posit-dev/connect-extensions/tree/main/extensions/publisher-command-center",
 		"minimumConnectVersion": "2025.04.0",
 		"requiredFeatures": [
 			"API Publishing",
 			"OAuth Integrations"
 		],
-		"version": "0.0.1"
+		"version": "0.0.2"
 	}
 }

extensions/publisher-command-center/app.py

@@ -11,15 +11,48 @@ import Edit from "./views/Edit";
 import Layout from './views/Layout'
 
 const root = document.getElementById("app");
-m.route(root, "/contents", {
-  "/contents": {
-    render: function () {
-      return m(Layout, m(Home))
-    },
-  },
-  "/contents/:id": {
-    render: function (vnode) {
-      return m(Layout, m(Edit, vnode.attrs));
-    },
-  },
-});
+
+// First ask the server “are we authorized?”
+m.request({ method: "GET", url: "api/auth-status" })
+  .then((res) => {
+    if (!res.authorized) {
+      // Unauthorized → just show the banner, never mount the router
+      m.mount(root, {
+        view: () =>
+          m(
+            "div.alert.alert-info",
+            { style: { margin: "1rem" } },
+            [
+              m("p", [
+                "To finish setting up this content, you must add a Visitor API Key ",
+                "integration with the Publisher scope."
+              ]),
+              m("p", [
+                'Select "+ Add integration" in the Access settings panel to the ',
+                'right, and find an entry with "Authentication type: Visitor API Key".'
+              ]),
+              m("p", [
+                "If no such integration exists, an Administrator must configure one. ",
+                "Go to Connect's System page, select the Integrations tab, then ",
+                'click "+ Add Integration", choose "Connect API", pick Publisher or ',
+                "Administrator under Max Role, and give it a descriptive title."
+              ])
+            ]
+          ),
+      });
+    } else {
+      // Authorized → wire up routes
+      m.route(root, "/contents", {
+        "/contents": {
+          render: () => m(Layout, m(Home)),
+        },
+        "/contents/:id": {
+          render: (vnode) => m(Layout, m(Edit, vnode.attrs)),
+        },
+      });
+    }
+  })
+  .catch((err) => {
+    console.error("failed to fetch auth-status", err);
+    // you might also render a generic “uh-oh” banner here
+  });