Update Grafbase extension (#4932)

* Handle errors in GraphQL response payload

* Run codegen

* Handle case where access token might not be able to access personal Account

* replace logo asset (#2)

* replace logo asset

* chore: remove service name from command title

* ray lint --fix

* Update changelog

---------

Co-authored-by: Jamie Barton <jamie@notrab.dev>

extensions/grafbase/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Grafbase Changelog
 
+## 2023-02-27
+
+- Use a better logo and shorter command name
+- Handle scoped access tokens
+- Improve error handling
+
 ## [Initial Version] - 2023-02-14
 
 - Search projects

extensions/grafbase/package.json

@@ -18,7 +18,7 @@
   "commands": [
     {
       "name": "search-projects",
-      "title": "Search Grafbase Projects",
+      "title": "Search Projects",
       "description": "Explore your Grafbase projects, branches, deployments, and commit history.",
       "mode": "view"
     }

extensions/grafbase/src/components/projects-list.tsx

@@ -41,7 +41,7 @@ export const GetProjectsByAccountSlugDocument = /* GraphQL */ `
 `;
 
 export default function ProjectsList() {
-  const { activeSlug, personalAccount } = useGrafbase();
+  const { activeSlug, personalAccount, organizationMemberships } = useGrafbase();
 
   const { isLoading, data, revalidate } = useFetch<{ data: GetProjectsByAccountSlugQuery }>(apiUrl, {
     method: "POST",
@@ -66,7 +66,9 @@ export default function ProjectsList() {
       navigationTitle="Projects"
       searchBarPlaceholder="Search Projects..."
       isLoading={isLoading}
-      searchBarAccessory={personalAccount && <ScopeDropdown onChange={() => revalidate()} />}
+      searchBarAccessory={
+        (personalAccount || organizationMemberships) && <ScopeDropdown onChange={() => revalidate()} />
+      }
     >
       {!projects || projects?.length === 0 ? (
         <List.EmptyView

extensions/grafbase/src/gql/graphql.ts

@@ -21,6 +21,7 @@ export type Scalars = {
 
 export type AccessToken = {
   __typename?: "AccessToken";
+  accountId?: Maybe<Scalars["ID"]>;
   createdAt: Scalars["DateTime"];
   id: Scalars["ID"];
   name: Scalars["String"];
@@ -37,10 +38,11 @@ export type AccessTokenConnection = {
 };
 
 export type AccessTokenCreateInput = {
+  accountId?: InputMaybe<Scalars["ID"]>;
   name: Scalars["String"];
 };
 
-export type AccessTokenCreatePayload = AccessTokenCreateSuccess | TokenLimitExceededError;
+export type AccessTokenCreatePayload = AccessTokenCreateSuccess | InvalidAccountError | TokenLimitExceededError;
 
 export type AccessTokenCreateSuccess = {
   __typename?: "AccessTokenCreateSuccess";
@@ -170,6 +172,7 @@ export type DatabaseUsage = {
   dbReads: Distribution;
   dbSize: Distribution;
   dbWrites: Distribution;
+  granularity: DatabaseUsageGranularity;
   requestCount: Distribution;
 };
 
@@ -179,6 +182,13 @@ export type DatabaseUsageFilter = {
   startDate?: InputMaybe<Scalars["DateTime"]>;
 };
 
+export enum DatabaseUsageGranularity {
+  Daily = "DAILY",
+  Hourly = "HOURLY",
+  Monthly = "MONTHLY",
+  Weekly = "WEEKLY",
+}
+
 /** Deployment */
 export type Deployment = {
   __typename?: "Deployment";
@@ -409,6 +419,11 @@ export type GitRepository = {
   url: Scalars["String"];
 };
 
+export type InvalidAccountError = {
+  __typename?: "InvalidAccountError";
+  query: Query;
+};
+
 export type InvalidDatabaseRegionsError = {
   __typename?: "InvalidDatabaseRegionsError";
   invalid: Array<Scalars["String"]>;
@@ -1422,7 +1437,7 @@ export type User = {
   name: Scalars["String"];
   organizationMemberships: Array<Member>;
   organizations: OrganizationConnection;
-  personalAccount: PersonalAccount;
+  personalAccount?: Maybe<PersonalAccount>;
 };
 
 export type UserOrganizationsArgs = {
@@ -1564,7 +1579,7 @@ export type GetScopesQuery = {
     id: string;
     name: string;
     avatarUrl?: string | null;
-    personalAccount: { __typename?: "PersonalAccount"; id: string; name: string; slug: string };
+    personalAccount?: { __typename?: "PersonalAccount"; id: string; name: string; slug: string } | null;
     organizationMemberships: Array<{
       __typename?: "Member";
       account:

extensions/grafbase/src/hooks/use-grafbase.ts

@@ -66,7 +66,7 @@ export const useGrafbase = () => {
   // TODO memo
 
   // TODO create a single client
-  useFetch<{ data: GetScopesQuery }>(apiUrl, {
+  useFetch<{ data: GetScopesQuery; errors: any }>(apiUrl, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -76,16 +76,23 @@ export const useGrafbase = () => {
       query: GetScopesDocument,
     }),
     onError(error) {
+      console.error(error);
       showToast({
         title: "Oops",
         message: error?.message ?? "Something went wrong. Try again later.",
         style: Toast.Style.Failure,
       });
     },
-    async onData(data) {
-      const {
-        data: { viewer },
-      } = data;
+    async onData({ data: { viewer }, errors }) {
+      if (errors) {
+        console.error(errors);
+        showToast({
+          title: "Oops",
+          message: errors[0]?.message ?? "Something went wrong. Try again later.",
+          style: Toast.Style.Failure,
+        });
+        return;
+      }
 
       setAvatarUrl(viewer?.avatarUrl);
       setPersonalAccount(viewer?.personalAccount);