experimental(dashboard): star repo feature (#7006)

Author: alexnm

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

@@ -2035,3 +2035,48 @@ export const getRepositoryByDetails = async (
     );
   }
 };
+
+export const getStarredRepos = ({ state, effects }: Context) => {
+  const { dashboard, activeTeam } = state;
+
+  const persistedStarredRepos = effects.browser.storage.get(
+    `CSB/EXPERIMENTAL_STARRED/${activeTeam}`
+  ) as Array<{ owner: string; name: string }>;
+
+  dashboard.starredRepos = persistedStarredRepos ?? [];
+};
+
+export const starRepo = (
+  { state, effects }: Context,
+  { owner, name }: { owner: string; name: string }
+) => {
+  const { dashboard, activeTeam } = state;
+
+  const existingRepo = dashboard.starredRepos.find(
+    repo => repo.owner === owner && repo.name === name
+  );
+  if (existingRepo) {
+    return;
+  }
+
+  dashboard.starredRepos.push({ owner, name });
+  effects.browser.storage.set(
+    `CSB/EXPERIMENTAL_STARRED/${activeTeam}`,
+    dashboard.starredRepos
+  );
+};
+
+export const unstarRepo = (
+  { state, effects }: Context,
+  { owner, name }: { owner: string; name: string }
+) => {
+  const { dashboard, activeTeam } = state;
+
+  dashboard.starredRepos = dashboard.starredRepos.filter(
+    repo => repo.owner !== owner || repo.name !== name
+  );
+  effects.browser.storage.set(
+    `CSB/EXPERIMENTAL_STARRED/${activeTeam}`,
+    dashboard.starredRepos
+  );
+};

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

@@ -68,6 +68,7 @@ export type State = {
   contributions: Branch[] | null;
   /** v2 repositories (formerly projects) */
   repositories: Repository[] | null;
+  starredRepos: Array<{ owner: string; name: string }>;
 };
 
 export const DEFAULT_DASHBOARD_SANDBOXES: DashboardSandboxStructure = {
@@ -182,4 +183,5 @@ export const state: State = {
   ),
   contributions: null,
   repositories: null,
+  starredRepos: [],
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useAppState, useActions } from 'app/overmind';
 import { Stack, Text, Button, Icon } from '@codesandbox/components';
@@ -51,7 +51,7 @@ export const Header = ({
   selectedRepo,
 }: Props) => {
   const location = useLocation();
-  const { modals } = useActions();
+  const { modals, dashboard: dashboardActions } = useActions();
   const { dashboard } = useAppState();
 
   const repositoriesListPage =
@@ -61,6 +61,17 @@ export const Header = ({
     '/repositories/github'
   );
 
+  const [experimentalMode] = useState(() => {
+    return window.localStorage.getItem('CSB_DEBUG') === 'ENABLED';
+  });
+
+  const selectedRepoIsStarred =
+    selectedRepo &&
+    dashboard.starredRepos.some(
+      repo =>
+        repo.owner === selectedRepo.owner && repo.name === selectedRepo.name
+    );
+
   return (
     <Stack
       align="center"
@@ -129,6 +140,33 @@ export const Header = ({
           </Button>
         )}
 
+        {repositoryBranchesPage && selectedRepo && experimentalMode && (
+          <Button
+            css={css({
+              fontSize: 2,
+              color: 'mutedForeground',
+              padding: 0,
+              width: 'auto',
+            })}
+            onClick={() => {
+              if (selectedRepoIsStarred) {
+                dashboardActions.unstarRepo(selectedRepo);
+              } else {
+                dashboardActions.starRepo(selectedRepo);
+              }
+            }}
+            variant="link"
+          >
+            <Icon
+              name="star"
+              size={20}
+              title="Star repo"
+              css={css({ paddingRight: 2 })}
+            />
+            {selectedRepoIsStarred ? 'Unstar' : 'Star'}
+          </Button>
+        )}
+
         {repositoryBranchesPage &&
           dashboard.viewMode === 'list' &&
           selectedRepo && (

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

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Menu } from '@codesandbox/components';
 import { ProjectFragment as Repository } from 'app/graphql/types';
 import {
   dashboard,
   v2DraftBranchUrl,
 } from '@codesandbox/common/lib/utils/url-generator';
 import { useHistory } from 'react-router-dom';
+import { useActions, useAppState } from 'app/overmind';
 import { Context, MenuItem } from '../ContextMenu';
 
 type RepositoryMenuProps = {
@@ -16,6 +17,12 @@ export const RepositoryMenu: React.FC<RepositoryMenuProps> = ({
 }) => {
   const { visible, setVisibility, position } = React.useContext(Context);
   const history = useHistory();
+  const state = useAppState();
+  const actions = useActions();
+
+  const [experimentalMode] = useState(() => {
+    return window.localStorage.getItem('CSB_DEBUG') === 'ENABLED';
+  });
 
   const { repository: providerRepository } = repository;
   const repositoryUrl = dashboard.repository({
@@ -27,6 +34,12 @@ export const RepositoryMenu: React.FC<RepositoryMenuProps> = ({
     providerRepository.name
   );
 
+  const repositoryIsStarred = state.dashboard.starredRepos.find(
+    repo =>
+      repo.owner === providerRepository.owner &&
+      repo.name === providerRepository.name
+  );
+
   const githubUrl = `https://github.com/${providerRepository.owner}/${providerRepository.name}`;
 
   return (
@@ -50,6 +63,20 @@ export const RepositoryMenu: React.FC<RepositoryMenuProps> = ({
         Create branch
       </MenuItem>
 
+      {experimentalMode && (
+        <MenuItem
+          onSelect={() => {
+            if (repositoryIsStarred) {
+              actions.dashboard.unstarRepo(providerRepository);
+            } else {
+              actions.dashboard.starRepo(providerRepository);
+            }
+          }}
+        >
+          {repositoryIsStarred ? 'Unstar repository' : 'Star repository'}
+        </MenuItem>
+      )}
+
       {/* TODO: Implement remove repository
       <Menu.Divider />
       <MenuItem

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

@@ -134,6 +134,7 @@ export const RepositoriesPage = () => {
           </Text>
         )}
       </Notification>
+
       <VariableGrid page={pageType} items={itemsToShow} />
     </SelectionProvider>
   );

packages/app/src/app/pages/Dashboard/Sidebar/index.tsx

@@ -67,6 +67,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
 
   React.useEffect(() => {
     actions.dashboard.getAllFolders();
+    actions.dashboard.getStarredRepos();
   }, [actions.dashboard, state.activeTeam]);
 
   React.useEffect(() => {
@@ -223,6 +224,18 @@ export const Sidebar: React.FC<SidebarProps> = ({
             path={dashboardUrls.repositories(activeTeam)}
             icon="repository"
           />
+          {dashboard.starredRepos.map(repo => (
+            <RowItem
+              name={repo.name}
+              page="repositories"
+              path={dashboardUrls.repository(repo)}
+              icon="star"
+              nestingLevel={1}
+              style={{
+                whiteSpace: 'nowrap',
+              }}
+            />
+          ))}
           <Element marginTop={4} />
           <Element paddingX={7} paddingY={2}>
             <Text