feat(dashboard): branch and repository removal (#7047)

* rename menu option to 'Remove branch from CodeSandbox'

* query defaultBranch from repository on branch fragment

* do not show 'remove branch from codesandbox' if default branch

* allow removing repositories through the branch menu

* handle repository removal from the recent page

* rename 'remove from codesandbox' to 'remove repository from codesandbox' on the RepositoryMenu

* trigger repository removal from branch menu

* do not show option to remove repository if branch is contribution

* handle branch removal from contributions page

* fix typecheck

Author: olarclara

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

@@ -2290,7 +2290,7 @@ export type BranchFragment = { __typename?: 'Branch' } & Pick<
     project: { __typename?: 'Project' } & {
       repository: { __typename?: 'GitHubRepository' } & Pick<
         GitHubRepository,
-        'name' | 'owner'
+        'defaultBranch' | 'name' | 'owner'
       >;
     };
   };

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

@@ -225,6 +225,7 @@ export const branchFragment = gql`
     project {
       repository {
         ... on GitHubRepository {
+          defaultBranch
           name
           owner
         }

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

@@ -2115,27 +2115,32 @@ export const removeBranchFromRepository = async (
   try {
     await effects.api.removeBranchFromRepository(owner, repoName, name);
 
+    // Manually remove the data from the state based on the
+    // current page. Then sync in the background.
     if (page === 'repositories') {
       const repository = state.dashboard.repositories?.find(
         r => r.repository.owner === owner && r.repository.name === repoName
       );
 
       if (repository) {
-        // Manually remove the data from the state.
         repository.branches = repository.branches.filter(b => b.id !== id);
       }
 
-      // Then sync in the background.
       actions.dashboard.getRepositoriesByTeam({ bypassLoading: true });
     }
 
+    if (page === 'my-contributions') {
+      state.dashboard.contributions =
+        state.dashboard.contributions?.filter(b => b.id !== id) ?? [];
+
+      actions.dashboard.getContributionBranches();
+    }
+
     if (page === 'recent') {
-      // First, manually remove the data from the state.
       state.dashboard.sandboxes.RECENT_BRANCHES =
         state.dashboard.sandboxes.RECENT_BRANCHES?.filter(b => b.id !== id) ??
         [];
 
-      // Then sync in the background.
       actions.dashboard.getStartPageSandboxes();
     }
   } catch (error) {
@@ -2151,26 +2156,40 @@ type ProjectToRemove = {
   owner: string;
   name: string;
   teamId: string;
+  page: PageTypes;
 };
 export const removeRepositoryFromTeam = async (
   context: Context,
   project: ProjectToRemove
 ) => {
   const { actions, state, effects } = context;
-  const { owner, name, teamId } = project;
+  const { owner, name, teamId, page } = project;
 
   state.dashboard.removingRepository = { owner, name };
 
   try {
     await effects.api.removeRepositoryFromTeam(owner, name, teamId);
 
-    // First, manually remove the data from the state.
-    state.dashboard.repositories =
-      state.dashboard.repositories?.filter(
-        r => r.repository.owner !== owner || r.repository.name !== name
-      ) ?? [];
-    // Then sync in the background.
-    actions.dashboard.getRepositoriesByTeam({ bypassLoading: true });
+    if (page === 'recent') {
+      // First, manually remove the data from the state.
+      state.dashboard.sandboxes.RECENT_BRANCHES =
+        state.dashboard.sandboxes.RECENT_BRANCHES?.filter(b => {
+          const branchRepo = b.project.repository;
+
+          return branchRepo.owner === owner && branchRepo.name === name;
+        }) ?? [];
+
+      // Then sync in the background.
+      actions.dashboard.getStartPageSandboxes();
+    } else {
+      // First, manually remove the data from the state.
+      state.dashboard.repositories =
+        state.dashboard.repositories?.filter(
+          r => r.repository.owner !== owner || r.repository.name !== name
+        ) ?? [];
+      // Then sync in the background.
+      actions.dashboard.getRepositoriesByTeam({ bypassLoading: true });
+    }
   } catch (error) {
     effects.notificationToast.error(
       `Failed to remove project ${owner}/${name}`

packages/app/src/app/pages/Dashboard/Components/Branch/index.tsx

@@ -20,7 +20,7 @@ type BranchProps = DashboardBranch & {
 };
 export const Branch: React.FC<BranchProps> = ({ branch, page }) => {
   const {
-    dashboard: { removingBranch, viewMode },
+    dashboard: { removingBranch, removingRepository, viewMode },
   } = useAppState();
   const { selectedIds, onRightClick, onMenuEvent } = useSelection();
   const { name, project } = branch;
@@ -38,11 +38,16 @@ export const Branch: React.FC<BranchProps> = ({ branch, page }) => {
     trackImprovedDashboardEvent(MAP_BRANCH_EVENT_TO_PAGE_TYPE[page]);
   };
 
+  const isParentRepositoryBeingRemoved =
+    removingRepository?.owner === project.repository.owner &&
+    removingRepository?.name === project.repository.name;
+
   const props = {
     branch,
     branchUrl,
     selected: selectedIds.includes(branch.id),
-    isBeingRemoved: removingBranch?.id === branch.id,
+    isBeingRemoved:
+      removingBranch?.id === branch.id || isParentRepositoryBeingRemoved,
     onContextMenu: handleContextMenu,
     onClick: handleClick,
     /**

packages/app/src/app/pages/Dashboard/Components/Selection/ContextMenu.tsx

@@ -129,7 +129,9 @@ export const ContextMenu: React.FC<IContextMenuProps> = ({
   } else if (selectedItems[0].type === 'branch') {
     menu = <BranchMenu branch={selectedItems[0].branch} page={page} />;
   } else if (selectedItems[0].type === 'repository') {
-    menu = <RepositoryMenu repository={selectedItems[0].repository} />;
+    menu = (
+      <RepositoryMenu repository={selectedItems[0].repository} page={page} />
+    );
   } else if (selectedItems.length > 1) {
     menu = (
       <MultiMenu

packages/app/src/app/pages/Dashboard/Components/Selection/ContextMenus/BranchMenu.tsx

@@ -16,14 +16,20 @@ type BranchMenuProps = {
   page: PageTypes;
 };
 export const BranchMenu: React.FC<BranchMenuProps> = ({ branch, page }) => {
-  const { removeBranchFromRepository } = useActions().dashboard;
-  const { removingBranch } = useAppState().dashboard;
+  const {
+    removeBranchFromRepository,
+    removeRepositoryFromTeam,
+  } = useActions().dashboard;
+  const {
+    activeTeam,
+    dashboard: { removingBranch, removingRepository },
+  } = useAppState();
   const { visible, setVisibility, position } = React.useContext(Context);
 
   const { id, name, project, contribution } = branch;
   const branchUrl = v2BranchUrl({ name, project });
 
-  const { name: repoName, owner } = project.repository;
+  const { name: repoName, owner, defaultBranch } = project.repository;
 
   const githubUrl = githubRepoUrl({
     branch: name,
@@ -36,6 +42,8 @@ export const BranchMenu: React.FC<BranchMenuProps> = ({ branch, page }) => {
 
   const history = useHistory();
 
+  const canRemoveBranch = name !== defaultBranch;
+
   return (
     <Menu.ContextMenu
       visible={visible}
@@ -61,22 +69,40 @@ export const BranchMenu: React.FC<BranchMenuProps> = ({ branch, page }) => {
       <MenuItem onSelect={() => history.push(repoUrl)}>
         Open repository
       </MenuItem>
-      <Menu.Divider />
-      <MenuItem
-        disabled={removingBranch}
-        onSelect={() =>
-          !removingBranch &&
-          removeBranchFromRepository({
-            id,
-            owner,
-            repoName,
-            name,
-            page,
-          })
-        }
-      >
-        Remove from CodeSandbox
-      </MenuItem>
+      {(canRemoveBranch || !contribution) && <Menu.Divider />}
+      {canRemoveBranch && (
+        <MenuItem
+          disabled={removingBranch}
+          onSelect={() =>
+            !removingBranch &&
+            removeBranchFromRepository({
+              id,
+              owner,
+              repoName,
+              name,
+              page,
+            })
+          }
+        >
+          Remove branch from CodeSandbox
+        </MenuItem>
+      )}
+      {!contribution && (
+        <MenuItem
+          disabled={removingRepository}
+          onSelect={() =>
+            !removingRepository &&
+            removeRepositoryFromTeam({
+              owner,
+              name: repoName,
+              teamId: activeTeam,
+              page,
+            })
+          }
+        >
+          Remove repository from CodeSandbox
+        </MenuItem>
+      )}
     </Menu.ContextMenu>
   );
 };

packages/app/src/app/pages/Dashboard/Components/Selection/ContextMenus/RepositoryMenu.tsx

@@ -9,13 +9,16 @@ import {
 } from '@codesandbox/common/lib/utils/url-generator';
 import { useActions, useAppState } from 'app/overmind';
 import { quotes } from 'app/utils/quotes';
+import { PageTypes } from 'app/overmind/namespaces/dashboard/types';
 import { Context, MenuItem } from '../ContextMenu';
 
 type RepositoryMenuProps = {
   repository: Repository;
+  page: PageTypes;
 };
 export const RepositoryMenu: React.FC<RepositoryMenuProps> = ({
   repository,
+  page,
 }) => {
   const {
     activeTeam,
@@ -106,10 +109,11 @@ export const RepositoryMenu: React.FC<RepositoryMenuProps> = ({
             owner: providerRepository.owner,
             name: providerRepository.name,
             teamId: activeTeam,
+            page,
           })
         }
       >
-        Remove from CodeSandbox
+        Remove repository from CodeSandbox
       </MenuItem>
     </Menu.ContextMenu>
   );