feat(dashboard): improve repositories loading (#6928)

* update getRepositoriesByTeam query

* wip: get single repo

* handle navigating back from single repo using breadcrumbs

Author: olarclara

packages/app/src/app/graphql/types.ts

@@ -3209,6 +3209,7 @@ export type ContributionBranchesQuery = { __typename?: 'RootQueryType' } & {
 
 export type RepositoriesByTeamQueryVariables = Exact<{
   teamId: Scalars['UUID4'];
+  syncData: Maybe<Scalars['Boolean']>;
 }>;
 
 export type RepositoriesByTeamQuery = { __typename?: 'RootQueryType' } & {
@@ -3223,6 +3224,15 @@ export type RepositoriesByTeamQuery = { __typename?: 'RootQueryType' } & {
   >;
 };
 
+export type RepositoryByDetailsQueryVariables = Exact<{
+  owner: Scalars['String'];
+  name: Scalars['String'];
+}>;
+
+export type RepositoryByDetailsQuery = { __typename?: 'RootQueryType' } & {
+  project: Maybe<{ __typename?: 'Project' } & ProjectFragment>;
+};
+
 export type RecentNotificationFragment = { __typename?: 'Notification' } & Pick<
   Notification,
   'id' | 'type' | 'data' | 'insertedAt' | 'read'

packages/app/src/app/overmind/effects/gql/dashboard/queries.ts

@@ -51,6 +51,8 @@ import {
   ContributionBranchesQueryVariables,
   RepositoriesByTeamQuery,
   RepositoriesByTeamQueryVariables,
+  RepositoryByDetailsQuery,
+  RepositoryByDetailsQueryVariables,
 } from 'app/graphql/types';
 import { gql, Query } from 'overmind-graphql';
 
@@ -490,12 +492,12 @@ export const getRepositoriesByTeam: Query<
   RepositoriesByTeamQuery,
   RepositoriesByTeamQueryVariables
 > = gql`
-  query RepositoriesByTeam($teamId: UUID4!) {
+  query RepositoriesByTeam($teamId: UUID4!, $syncData: Boolean) {
     me {
       team(id: $teamId) {
         id
         name
-        projects {
+        projects(syncData: $syncData) {
           ...project
         }
       }
@@ -504,3 +506,16 @@ export const getRepositoriesByTeam: Query<
   ${projectFragment}
   ${branchFragment}
 `;
+
+export const getRepositoryByDetails: Query<
+  RepositoryByDetailsQuery,
+  RepositoryByDetailsQueryVariables
+> = gql`
+  query RepositoryByDetails($owner: String!, $name: String!) {
+    project(gitProvider: GITHUB, owner: $owner, repo: $name) {
+      ...project
+    }
+  }
+  ${projectFragment}
+  ${branchFragment}
+`;

packages/app/src/app/overmind/namespaces/dashboard/actions.ts

@@ -1972,18 +1972,65 @@ export const getRepositoriesByTeam = async ({ state, effects }: Context) => {
   try {
     dashboard.repositories = null;
 
-    const repositoriesData = await effects.gql.queries.getRepositoriesByTeam({
-      teamId: activeTeam,
+    // First fetch data without syncing with GitHub
+    // to decrease waiting time.
+    const unsyncedRepositoriesData = await effects.gql.queries.getRepositoriesByTeam(
+      {
+        teamId: activeTeam,
+        syncData: false,
+      }
+    );
+    const unsyncedRepositories = unsyncedRepositoriesData?.me?.team?.projects;
+    if (!unsyncedRepositories?.length) {
+      return;
+    }
+
+    dashboard.repositories = unsyncedRepositories;
+
+    // Then fetch data synced with GitHub to make sure
+    // what we show is up-to-date.
+    const syncedRepositoriesData = await effects.gql.queries.getRepositoriesByTeam(
+      {
+        teamId: activeTeam,
+        syncData: true,
+      }
+    );
+    const syncedRepositories = syncedRepositoriesData?.me?.team?.projects;
+    if (!syncedRepositories?.length) {
+      return;
+    }
+
+    dashboard.repositories = syncedRepositories;
+  } catch (error) {
+    effects.notificationToast.error(
+      'There was a problem getting your repositories'
+    );
+  }
+};
+
+// If the repository page is accessed directly, we can use this
+// to avoid fetching all repos.
+export const getRepositoryByDetails = async (
+  { state, effects }: Context,
+  { owner, name }: { owner: string; name: string }
+) => {
+  const { dashboard } = state;
+  try {
+    dashboard.repositories = null;
+
+    const repositoryData = await effects.gql.queries.getRepositoryByDetails({
+      owner,
+      name,
     });
-    const v2Repositories = repositoriesData?.me?.team?.projects;
-    if (!v2Repositories?.length) {
+    const repository = repositoryData?.project;
+    if (!repository) {
       return;
     }
 
-    dashboard.repositories = v2Repositories;
+    dashboard.repositories = [repository];
   } catch (error) {
     effects.notificationToast.error(
-      'There was a problem getting your open repositories'
+      `There was a problem getting repository ${name} from ${owner}`
     );
   }
 };

packages/app/src/app/pages/Dashboard/Content/routes/Repositories/index.tsx

@@ -15,10 +15,34 @@ export const RepositoriesPage = () => {
     activeTeam,
     dashboard: { repositories },
   } = useAppState();
+  const pathRef = React.useRef<string>(null);
 
   React.useEffect(() => {
-    actions.dashboard.getRepositoriesByTeam();
-  }, [activeTeam, actions.dashboard]);
+    // If no repositories were fetched yet and the user tries
+    // to directly access a repository, we should fetch said
+    // repository only.
+    if (repositories === null) {
+      if (path) {
+        const [, owner, name] = path.split('/');
+        actions.dashboard.getRepositoryByDetails({ owner, name });
+      } else {
+        actions.dashboard.getRepositoriesByTeam();
+      }
+    }
+
+    // If the current view is the list of the repositories
+    // and the previous view was a repo and only that repo
+    // was fetched, get all repositories of that team.
+    if (
+      path === '' &&
+      pathRef.current?.startsWith('github') &&
+      repositories.length === 1
+    ) {
+      actions.dashboard.getRepositoriesByTeam();
+    }
+
+    pathRef.current = path;
+  }, [path]);
 
   const pageType: PageTypes = 'repositories';