Skip to content

Commit

Permalink
Refactor to use a single class
Browse files Browse the repository at this point in the history
  • Loading branch information
AdityaHegde committed Jul 22, 2024
1 parent 08b0376 commit 21afe75
Show file tree
Hide file tree
Showing 5 changed files with 153 additions and 143 deletions.
45 changes: 0 additions & 45 deletions web-admin/src/features/projects/github/GithubConnector.ts

This file was deleted.

131 changes: 131 additions & 0 deletions web-admin/src/features/projects/github/GithubData.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import {
adminServiceListGithubUserRepos,
createAdminServiceGetGithubUserStatus,
createAdminServiceListGithubUserRepos,
getAdminServiceGetGithubUserStatusQueryKey,
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 { getContext, setContext } from "svelte";
import { derived, get, writable } from "svelte/store";

/**
* Contains information about user connection to github and list of repos currently connected.
*/
export class GithubData {
public readonly repoSelectionOpen = writable(false);
public readonly githubConnectionFailed = writable(false);

public readonly userStatus = createAdminServiceGetGithubUserStatus({
query: {
queryClient,
},
});
public readonly userRepos = derived(
[this.userStatus, this.repoSelectionOpen],
([userStatus, repoSelectionOpen], set) =>
createAdminServiceListGithubUserRepos({
query: {
// do not run it when user gets to status page, only when repo selection is open
enabled: !!userStatus.data?.hasAccess && repoSelectionOpen,
queryClient,
},
}).subscribe(set),
) as ReturnType<
typeof createAdminServiceListGithubUserRepos<
Awaited<ReturnType<typeof adminServiceListGithubUserRepos>>,
RpcStatus
>
>;

private promptingUser: boolean;

public readonly status = derived(
[this.userStatus, this.userRepos],
([userStatus, userRepos]) => {
if (userStatus.isFetching || userRepos.isFetching) {
return {
isFetching: true,
error: undefined,
};
}

return {
isFetching: false,
error: userStatus.error ?? userRepos.error,
};
},
);

/**
* Marks the repo selection dialog to be opened.
* If user doesn't have access, opens grant access page.
*/
public async startRepoSelection() {
this.repoSelectionOpen.set(true);

await waitUntil(() => !get(this.userStatus).isFetching);
const userStatus = get(this.userStatus).data;
if (userStatus?.hasAccess) {
return;
}

this.promptingUser = true;
window.open(userStatus.grantAccessUrl, "_blank");
}

/**
* Used to reselect connected repos.
* Opens the grantAccessUrl page to achieve this.
*/
public async reselectRepos() {
await waitUntil(() => !get(this.userStatus).isFetching);
const userStatus = get(this.userStatus).data;

this.promptingUser = true;
window.open(userStatus.grantAccessUrl, "_blank");
}

/**
* If prompting user to connect to github then check the status of the connection.
*
* If did not have access before, refetch the user status query. (list of repos is fetched since the enabled will be flipped)
* Else refetch the list of queries.
*/
public async refetch() {
if (!this.promptingUser) return;
this.promptingUser = false;

const userStatus = get(this.userStatus).data;
if (!userStatus.hasAccess) {
// refetch status if had no access
await queryClient.refetchQueries(
getAdminServiceGetGithubUserStatusQueryKey(),
);

await waitUntil(() => !get(this.userStatus).isFetching);
if (!get(this.userStatus).data.hasAccess) {
this.githubConnectionFailed.set(true);
} else {
this.githubConnectionFailed.set(false);
}
} else {
this.githubConnectionFailed.set(false);

// else refetch the list of repos
await queryClient.refetchQueries(
getAdminServiceListGithubUserReposQueryKey(),
);
}
}
}

export function setGithubData(githubData: GithubData) {
setContext("rill:app:github", githubData);
}

export function getGithubData() {
return getContext<GithubData>("rill:app:github");
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
getAdminServiceGetProjectQueryKey,
type RpcStatus,
} from "@rilldata/web-admin/client";
import { GithubReposFetcher } from "@rilldata/web-admin/features/projects/github/GithubReposFetcher";
import { getGithubData } from "@rilldata/web-admin/features/projects/github/GithubData";
import {
AlertDialog,
AlertDialogContent,
Expand All @@ -32,20 +32,20 @@
export let organization: string;
let githubUrl = currentUrl;
const githubReposFetcher = new GithubReposFetcher();
const githubRepos = githubReposFetcher.userRepos;
const status = githubReposFetcher.status;
const githubData = getGithubData();
const userRepos = githubData.userRepos;
const status = githubData.status;
const projectQuery = createAdminServiceGetProject(organization, project);
$: repoSelections =
$githubRepos.data?.repos?.map((r) => ({
$userRepos.data?.repos?.map((r) => ({
value: r.url,
label: `${r.owner}/${r.name}`,
})) ?? [];
const updateProject = createAdminServiceUpdateProject();
async function updateGithubUrl() {
const repo = $githubRepos.data?.repos?.find((r) => r.url === githubUrl);
const repo = $userRepos.data?.repos?.find((r) => r.url === githubUrl);
if (!repo) return; // shouldnt happen
await $updateProject.mutateAsync({
Expand Down Expand Up @@ -75,7 +75,7 @@
function handleVisibilityChange() {
if (document.visibilityState !== "visible") return;
void githubReposFetcher.handlePageFocus();
void githubData.refetch();
}
$: error = ($status.error ??
Expand Down Expand Up @@ -125,7 +125,7 @@
<Button
outline={false}
type="link"
on:click={() => githubReposFetcher.promptUser()}
on:click={() => githubData.reselectRepos()}
>
Choose other repos
</Button>
Expand Down
69 changes: 0 additions & 69 deletions web-admin/src/features/projects/github/GithubReposFetcher.ts

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<script lang="ts">
import ConnectToGithubConfirmDialog from "@rilldata/web-admin/features/projects/github/ConnectToGithubConfirmDialog.svelte";
import { GithubConnector } from "@rilldata/web-admin/features/projects/github/GithubConnector";
import {
GithubData,
setGithubData,
} from "@rilldata/web-admin/features/projects/github/GithubData";
import GithubRepoSelectionDialog from "@rilldata/web-admin/features/projects/github/GithubRepoSelectionDialog.svelte";
import { Button } from "@rilldata/web-common/components/button";
import EditIcon from "@rilldata/web-common/components/icons/EditIcon.svelte";
Expand All @@ -25,39 +28,29 @@
project,
);
let confirmDialogOpen = false;
let githubRepoSelectionOpen = false;
let connectionFailureAlertOpen = false;
const githubData = new GithubData();
setGithubData(githubData);
const userStatus = githubData.userStatus;
const repoSelectionOpen = githubData.repoSelectionOpen;
const githubConnector = new GithubConnector(
() => {
githubRepoSelectionOpen = true;
},
() => {
githubRepoSelectionOpen = false;
connectionFailureAlertOpen = true;
},
);
const userStatus = githubConnector.userStatus;
let confirmDialogOpen = false;
function connectToGithub() {
confirmDialogOpen = true;
}
function confirmConnectToGithub() {
confirmDialogOpen = false;
void githubConnector.checkConnection();
void githubData.startRepoSelection();
}
function editGithubConnection() {
// keep the github selection open while checking for user access
githubRepoSelectionOpen = true;
void githubConnector.checkConnection();
void githubData.startRepoSelection();
}
function handleVisibilityChange() {
if (document.visibilityState !== "visible") return;
void githubConnector.refetchStatus();
void githubData.refetch();
}
</script>

Expand Down Expand Up @@ -106,7 +99,7 @@
</span>
{/if}
{:else}
<span>
<span class="mt-1">
Unlock the power of BI-as-code with Github-backed collaboration,
version control, and approval workflows.
</span>
Expand All @@ -130,7 +123,7 @@
/>

<GithubRepoSelectionDialog
bind:open={githubRepoSelectionOpen}
bind:open={$repoSelectionOpen}
currentUrl={$proj.data?.project?.githubUrl}
{organization}
{project}
Expand Down

0 comments on commit 21afe75

Please sign in to comment.