feat(dashboard): remove from codesandbox (#7012)

* update base api to support beta

* fixup

* feat: api calls

* wip

* remove branches

* feat(components): disabled MenuItem

* feat: disabled state on branch and repository menu

* fix typecheck

* handle branch removal in different pages

* typecheck

* improvements

* fixup

Author: olarclara

packages/app/src/app/overmind/effects/api/apiFactory.ts

@@ -2,7 +2,12 @@
 import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
 import { camelizeKeys, decamelizeKeys } from 'humps';
 
-export const API_ROOT = '/api/v1';
+const API_ROOT = '/api';
+
+// If the path starts with `/beta`, do not append
+// `/v1` to the api root url.
+const getBaseApi = (path: string) =>
+  path.startsWith('/beta') ? API_ROOT : `${API_ROOT}/v1`;
 
 export type ApiError = AxiosError<
   { errors: string[] } | { error: string } | any
@@ -41,36 +46,36 @@ export default (config: ApiConfig) => {
   const api: Api = {
     get(path, params, options) {
       return axios
-        .get(API_ROOT + path, {
+        .get(getBaseApi(path) + path, {
           params,
           headers: createHeaders(config.provideJwtToken),
         })
         .then(response => handleResponse(response, options));
     },
     post(path, body, options) {
       return axios
-        .post(API_ROOT + path, decamelizeKeys(body), {
+        .post(getBaseApi(path) + path, decamelizeKeys(body), {
           headers: createHeaders(config.provideJwtToken),
         })
         .then(response => handleResponse(response, options));
     },
     patch(path, body, options) {
       return axios
-        .patch(API_ROOT + path, decamelizeKeys(body), {
+        .patch(getBaseApi(path) + path, decamelizeKeys(body), {
           headers: createHeaders(config.provideJwtToken),
         })
         .then(response => handleResponse(response, options));
     },
     put(path, body, options) {
       return axios
-        .put(API_ROOT + path, decamelizeKeys(body), {
+        .put(getBaseApi(path) + path, decamelizeKeys(body), {
           headers: createHeaders(config.provideJwtToken),
         })
         .then(response => handleResponse(response, options));
     },
     delete(path, params, options) {
       return axios
-        .delete(API_ROOT + path, {
+        .delete(getBaseApi(path) + path, {
           params,
           headers: createHeaders(config.provideJwtToken),
         })
@@ -80,7 +85,7 @@ export default (config: ApiConfig) => {
       return axios
         .request(
           Object.assign(requestConfig, {
-            url: API_ROOT + requestConfig.url,
+            url: getBaseApi(requestConfig.url ?? '') + requestConfig.url,
             data: requestConfig.data ? camelizeKeys(requestConfig.data) : null,
             headers: createHeaders(config.provideJwtToken),
           })

packages/app/src/app/overmind/effects/api/index.ts

@@ -691,4 +691,10 @@ export default {
       `/teams/${teamId}/customer_portal?return_path=${return_path}`
     );
   },
+  removeBranchFromRepository(owner: string, repo: string, branch: string) {
+    return api.delete(`/beta/sandboxes/github/${owner}/${repo}/${branch}`);
+  },
+  removeRepositoryFromTeam(owner: string, repo: string, teamId: string) {
+    return api.delete(`/beta/repos/link/github/${owner}/${repo}/${teamId}`);
+  },
 };

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

@@ -13,7 +13,7 @@ import {
   DeleteNpmRegistryMutationVariables,
 } from 'app/graphql/types';
 import { getDecoratedCollection, sortByNameAscending } from './utils';
-import { OrderBy, sandboxesTypes } from './types';
+import { OrderBy, PageTypes, sandboxesTypes } from './types';
 import * as internalActions from './internalActions';
 
 export const internal = internalActions;
@@ -1968,25 +1968,38 @@ export const getContributionBranches = async ({ state, effects }: Context) => {
   }
 };
 
-export const getRepositoriesByTeam = async ({ state, effects }: Context) => {
+type RepositoriesActionOptions = {
+  bypassLoading: boolean;
+};
+export const getRepositoriesByTeam = async (
+  { state, effects }: Context,
+  options?: RepositoriesActionOptions
+) => {
   const { activeTeam, dashboard } = state;
-  try {
-    dashboard.repositories = null;
+  const { bypassLoading = false } = options ?? {};
 
-    // First fetch data without syncing with GitHub
-    // to decrease waiting time.
-    const unsyncedRepositoriesData = await effects.gql.queries.getRepositoriesByTeam(
-      {
-        teamId: activeTeam,
-        syncData: false,
+  // If we should bypass the loading state, we don't need to make two
+  // queries (synced and unsynced) since the loading time won't be
+  // perceived by the user.
+  try {
+    if (!bypassLoading) {
+      dashboard.repositories = null;
+
+      // 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) {
+        return;
       }
-    );
-    const unsyncedRepositories = unsyncedRepositoriesData?.me?.team?.projects;
-    if (!unsyncedRepositories) {
-      return;
-    }
 
-    dashboard.repositories = unsyncedRepositories.sort(sortByNameAscending);
+      dashboard.repositories = unsyncedRepositories.sort(sortByNameAscending);
+    }
 
     // Then fetch data synced with GitHub to make sure
     // what we show is up-to-date.
@@ -2080,3 +2093,87 @@ export const unstarRepo = (
     dashboard.starredRepos
   );
 };
+
+type BranchToRemove = {
+  owner: string;
+  repoName: string;
+  name: string;
+  id: string;
+  page: PageTypes;
+};
+export const removeBranchFromRepository = async (
+  context: Context,
+  branch: BranchToRemove
+) => {
+  const { actions, effects, state } = context;
+  const { id, owner, repoName, name, page } = branch;
+
+  state.dashboard.removingBranch = { id };
+
+  try {
+    await effects.api.removeBranchFromRepository(owner, repoName, name);
+
+    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 === '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) {
+    effects.notificationToast.error(
+      `Failed to remove branch ${name} from ${owner}/${repoName}`
+    );
+  } finally {
+    state.dashboard.removingBranch = null;
+  }
+};
+
+type ProjectToRemove = {
+  owner: string;
+  name: string;
+  teamId: string;
+};
+export const removeRepositoryFromTeam = async (
+  context: Context,
+  project: ProjectToRemove
+) => {
+  const { actions, state, effects } = context;
+  const { owner, name, teamId } = 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 });
+  } catch (error) {
+    effects.notificationToast.error(
+      `Failed to remove project ${owner}/${name}`
+    );
+  } finally {
+    state.dashboard.removingRepository = null;
+  }
+};

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

@@ -69,6 +69,13 @@ export type State = {
   /** v2 repositories (formerly projects) */
   repositories: Repository[] | null;
   starredRepos: Array<{ owner: string; name: string }>;
+  /**
+   * Use these variables to track if items are being removed. This way
+   * we don't have to manipulate the state directly to let the components
+   * know what to render.
+   */
+  removingRepository: { owner: string; name: string } | null;
+  removingBranch: { id: string } | null;
 };
 
 export const DEFAULT_DASHBOARD_SANDBOXES: DashboardSandboxStructure = {
@@ -184,4 +191,6 @@ export const state: State = {
   contributions: null,
   repositories: null,
   starredRepos: [],
+  removingRepository: null,
+  removingBranch: null,
 };

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

@@ -10,10 +10,11 @@ import { css } from '@styled-system/css';
 import { BranchProps } from './types';
 
 export const BranchCard: React.FC<BranchProps> = ({
-  onContextMenu,
   branch,
   branchUrl,
+  isBeingRemoved,
   selected,
+  onContextMenu,
   ...props
 }) => {
   const { name: branchName, project, contribution } = branch;
@@ -33,7 +34,9 @@ export const BranchCard: React.FC<BranchProps> = ({
         border: '1px solid',
         borderColor: selected ? 'focusBorder' : 'transparent',
         backgroundColor: selected ? 'card.backgroundHover' : 'card.background',
-        transition: 'background ease-in-out',
+        opacity: isBeingRemoved ? 0.5 : 1,
+        pointerEvents: isBeingRemoved ? 'none' : 'all',
+        transition: 'background ease-in-out, opacity ease-in-out',
         transitionDuration: theme => theme.speeds[2],
         textDecoration: 'none',
         outline: 'none',
@@ -45,7 +48,7 @@ export const BranchCard: React.FC<BranchProps> = ({
         },
       })}
       direction="vertical"
-      href={branchUrl}
+      href={isBeingRemoved ? undefined : branchUrl}
       onContextMenu={onContextMenu}
       {...props}
     >

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

@@ -16,6 +16,8 @@ import { BranchProps } from './types';
 export const BranchListItem = ({
   branch,
   branchUrl,
+  selected,
+  isBeingRemoved,
   onContextMenu,
 }: BranchProps) => {
   const { name: branchName, project, contribution } = branch;
@@ -29,10 +31,18 @@ export const BranchListItem = ({
         borderBottom: '1px solid',
         borderBottomColor: 'grays.600',
         overflow: 'hidden',
-        backgroundColor: 'transparent',
-        color: 'inherit',
+        backgroundColor:
+          selected && !isBeingRemoved ? 'purpleOpaque' : 'transparent',
+        color: selected && !isBeingRemoved ? 'white' : 'inherit',
+        transition: 'background ease-in-out, opacity ease-in-out',
+        opacity: isBeingRemoved ? 0.5 : 1,
+        pointerEvents: isBeingRemoved ? 'none' : 'all',
         ':hover, :focus, :focus-within': {
-          backgroundColor: 'list.hoverBackground',
+          cursor: 'default',
+          backgroundColor:
+            selected && !isBeingRemoved
+              ? 'purpleOpaque'
+              : 'list.hoverBackground',
         },
       })}
     >
@@ -45,12 +55,12 @@ export const BranchListItem = ({
           width: '100%',
           textDecoration: 'none',
         }}
-        href={branchUrl}
+        href={isBeingRemoved ? undefined : branchUrl}
         onContextMenu={onContextMenu}
       >
         <Grid css={{ width: 'calc(100% - 26px - 8px)' }}>
           <Column
-           span={[12, 5, 5]}
+            span={[12, 5, 5]}
             css={{
               display: 'block',
               overflow: 'hidden',
@@ -60,7 +70,12 @@ export const BranchListItem = ({
           >
             <Stack gap={4} align="center" marginLeft={2}>
               {contribution ? (
-                <Icon color="#EDFFA5" name="contribution" size={16} width="32px" />
+                <Icon
+                  color="#EDFFA5"
+                  name="contribution"
+                  size={16}
+                  width="32px"
+                />
               ) : (
                 <Icon name="branch" color="#999" size={16} width="32px" />
               )}

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: { viewMode },
+    dashboard: { removingBranch, viewMode },
   } = useAppState();
   const { selectedIds, onRightClick, onMenuEvent } = useSelection();
   const { name, project } = branch;
@@ -38,14 +38,13 @@ export const Branch: React.FC<BranchProps> = ({ branch, page }) => {
     trackImprovedDashboardEvent(MAP_BRANCH_EVENT_TO_PAGE_TYPE[page]);
   };
 
-  const selected = selectedIds.includes(branch.id);
-
   const props = {
     branch,
     branchUrl,
+    selected: selectedIds.includes(branch.id),
+    isBeingRemoved: removingBranch?.id === branch.id,
     onContextMenu: handleContextMenu,
     onClick: handleClick,
-    selected,
     /**
      * If we ever need selection for branch entries, `data-selection-id` must be set
      * 'data-selection-id': branch.id,

packages/app/src/app/pages/Dashboard/Components/Branch/types.ts

@@ -3,7 +3,8 @@ import { BranchFragment as Branch } from 'app/graphql/types';
 export type BranchProps = {
   branch: Branch;
   branchUrl: string;
+  isBeingRemoved: boolean;
+  selected: boolean;
   onContextMenu: (evt: React.MouseEvent) => void;
   onClick: (evt: React.MouseEvent) => void;
-  selected: boolean;
 };