feat: Add and edit github connection

web-admin/src/features/projects/github/ConnectToGithubConfirmDialog.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+  } from "@rilldata/web-common/components/alert-dialog";
+  import { Button } from "@rilldata/web-common/components/button";
+  import Github from "@rilldata/web-common/components/icons/Github.svelte";
+
+  export let open = false;
+  export let onContinue: () => void;
+</script>
+
+<AlertDialog bind:open>
+  <AlertDialogTrigger asChild>
+    <div class="hidden"></div>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <div class="flex flex-row gap-x-2">
+      <Github size="28px" />
+      <div class="flex flex-col">
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Connect this project to a Github repo
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            Before continuing, you need to make sure your Rill project has been
+            <!-- TODO: docs link -->
+            pushed to a repo on Github.
+            <a href="https://docs.rilldata.com">Learn how</a>
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter class="mt-5">
+          <Button type="secondary" on:click={() => (open = false)}>
+            Cancel
+          </Button>
+          <Button type="primary" on:click={onContinue}>Continue</Button>
+        </AlertDialogFooter>
+      </div>
+    </div>
+  </AlertDialogContent>
+</AlertDialog>

web-admin/src/features/projects/github/GithubConnection.ts

@@ -0,0 +1,36 @@
+import {
+  createAdminServiceGetGithubUserStatus,
+  getAdminServiceGetGithubUserStatusQueryKey,
+} from "@rilldata/web-admin/client";
+import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+import { waitUntil } from "@rilldata/web-common/lib/waitUtils";
+import { get } from "svelte/store";
+
+export class GithubConnection {
+  public readonly userStatus = createAdminServiceGetGithubUserStatus();
+
+  private connecting: boolean;
+
+  public constructor(private readonly onReconnect: () => void) {}
+
+  public async check() {
+    this.connecting = false;
+    await waitUntil(() => !get(this.userStatus).isLoading);
+    const userStatus = get(this.userStatus).data;
+    if (userStatus.hasAccess) {
+      return this.onReconnect();
+    }
+
+    this.connecting = true;
+    window.open(userStatus.grantAccessUrl, "_blank");
+  }
+
+  public async focused() {
+    if (!this.connecting) return;
+    await queryClient.refetchQueries(
+      getAdminServiceGetGithubUserStatusQueryKey(),
+    );
+    if (this.connecting) this.onReconnect();
+    this.connecting = false;
+  }
+}

web-admin/src/features/projects/GithubRepoInline.svelte → web-admin/src/features/projects/github/GithubRepoInline.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getRepoNameFromGithubUrl } from "./github-utils";
+  import { getRepoNameFromGithubUrl } from "web-admin/src/features/projects/github/github-utils";
 
   export let githubUrl: string;
 

web-admin/src/features/projects/github/GithubRepoSelectionDialog.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import {
+    createAdminServiceGetProject,
+    createAdminServiceUpdateProject,
+    getAdminServiceGetGithubUserStatusQueryKey,
+  } from "@rilldata/web-admin/client";
+  import { GithubRepoUpdater } from "@rilldata/web-admin/features/projects/github/GithubRepoUpdater";
+  import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+  } from "@rilldata/web-common/components/alert-dialog";
+  import { Button } from "@rilldata/web-common/components/button";
+  import Github from "@rilldata/web-common/components/icons/Github.svelte";
+  import Select from "@rilldata/web-common/components/forms/Select.svelte";
+  import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
+  import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+  import { invalidateRuntimeQueries } from "@rilldata/web-common/runtime-client/invalidation";
+  import type { AxiosError } from "axios";
+
+  export let open = false;
+  export let project: string;
+  export let organization: string;
+
+  let githubUrl = "";
+  const githubRepoUpdater = new GithubRepoUpdater();
+  const githubRepos = githubRepoUpdater.userRepos;
+  const status = githubRepoUpdater.status;
+  const projectQuery = createAdminServiceGetProject(organization, project);
+
+  $: repoSelections =
+    $githubRepos.data?.repos?.map((r) => ({
+      value: r.url,
+      label: `${r.owner}/${r.name}`,
+    })) ?? [];
+
+  const updateProject = createAdminServiceUpdateProject();
+  async function updateGithubUrl() {
+    await $updateProject.mutateAsync({
+      name: project,
+      organizationName: organization,
+      data: {
+        githubUrl,
+      },
+    });
+    eventBus.emit("notification", {
+      message: `Set github repo to ${githubUrl}`,
+      type: "success",
+    });
+    void queryClient.refetchQueries(
+      getAdminServiceGetGithubUserStatusQueryKey(),
+    );
+    void invalidateRuntimeQueries(
+      queryClient,
+      $projectQuery.data.prodDeployment.runtimeInstanceId,
+    );
+    open = false;
+  }
+
+  function handleVisibilityChange() {
+    if (document.visibilityState !== "visible") return;
+    void githubRepoUpdater.focused();
+  }
+
+  $: error = ($status.error ?? $updateProject.error) as unknown as AxiosError;
+</script>
+
+<svelte:window on:visibilitychange={handleVisibilityChange} />
+
+<AlertDialog bind:open>
+  <AlertDialogTrigger asChild>
+    <div class="hidden"></div>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <div class="flex flex-row gap-x-2">
+      <Github size="28px" />
+      <div class="flex flex-col">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Select Github repository</AlertDialogTitle>
+          <AlertDialogDescription class="flex flex-col gap-y-1">
+            <span>
+              Which Github repo would you like to connect to this Rill project?
+            </span>
+            {#if $status.isLoading}
+              <div class="flex flex-row items-center ml-5 h-8">
+                <Spinner status={EntityStatus.Running} />
+              </div>
+            {:else}
+              <Select
+                id="repo-selector"
+                bind:value={githubUrl}
+                label=""
+                options={repoSelections}
+              />
+            {/if}
+            <span class="font-semibold">
+              Note: Contents of this repo will replace your current Rill
+              project.
+            </span>
+            {#if error}
+              <div class="text-red-500 text-sm py-px">
+                {error.response?.data?.message ?? error.message}
+              </div>
+            {/if}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter class="mt-5">
+          <Button
+            outline={false}
+            type="link"
+            on:click={() => githubRepoUpdater.check()}
+          >
+            Choose other repos
+          </Button>
+          <Button type="secondary" on:click={() => (open = false)}>
+            Cancel
+          </Button>
+          <Button
+            type="primary"
+            on:click={() => updateGithubUrl()}
+            loading={$updateProject.isLoading}
+          >
+            Continue
+          </Button>
+        </AlertDialogFooter>
+      </div>
+    </div>
+  </AlertDialogContent>
+</AlertDialog>

web-admin/src/features/projects/github/GithubRepoUpdater.ts

@@ -0,0 +1,65 @@
+import {
+  adminServiceListGithubUserRepos,
+  createAdminServiceGetGithubUserStatus,
+  createAdminServiceListGithubUserRepos,
+  getAdminServiceListGithubUserReposQueryKey,
+  type RpcStatus,
+} from "@rilldata/web-admin/client";
+import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+import { waitUntil } from "@rilldata/web-common/lib/waitUtils";
+import { derived, get } from "svelte/store";
+
+export class GithubRepoUpdater {
+  public readonly userStatus = createAdminServiceGetGithubUserStatus();
+  public readonly userRepos = derived([this.userStatus], ([userStatus], set) =>
+    createAdminServiceListGithubUserRepos({
+      query: {
+        enabled: !!userStatus.data?.hasAccess,
+        queryClient,
+      },
+    }).subscribe(set),
+  ) as ReturnType<
+    typeof createAdminServiceListGithubUserRepos<
+      Awaited<ReturnType<typeof adminServiceListGithubUserRepos>>,
+      RpcStatus
+    >
+  >;
+
+  public readonly status = derived(
+    [this.userStatus, this.userRepos],
+    ([userStatus, userRepos]) => {
+      if (userStatus.isFetching || userRepos.isFetching) {
+        return {
+          isLoading: true,
+          error: undefined,
+        };
+      }
+
+      return {
+        isLoading: false,
+        error: userStatus.error ?? userRepos.error,
+      };
+    },
+  );
+
+  private connecting: boolean;
+
+  public constructor() {}
+
+  public async check() {
+    this.connecting = false;
+    await waitUntil(() => !get(this.userStatus).isLoading);
+    const userStatus = get(this.userStatus).data;
+
+    this.connecting = true;
+    window.open(userStatus.grantAccessUrl, "_blank");
+  }
+
+  public async focused() {
+    if (!this.connecting) return;
+    await queryClient.refetchQueries(
+      getAdminServiceListGithubUserReposQueryKey(),
+    );
+    this.connecting = false;
+  }
+}