feat: add CloudBetaBadge (#6949)

* feat: add cloud badge to repository pages

* fix: template card name

* feat: add badge for sandbox cards

* chore: update sandbox url to include v2 check

* feat: show badge on branch card

Author: alexnm

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/CloudBetaBadge.tsx renamed to packages/app/src/app/components/CloudBetaBadge.tsx

@@ -29,7 +29,7 @@ import { useEssentialTemplates } from './useEssentialTemplates';
 import { FromTemplate } from './FromTemplate';
 import { useOfficialTemplates } from './useOfficialTemplates';
 import { useTeamTemplates } from './useTeamTemplates';
-import { CloudBetaBadge } from './CloudBetaBadge';
+import { CloudBetaBadge } from '../../CloudBetaBadge';
 import { CreateSandboxParams } from './types';
 
 export const COLUMN_MEDIA_THRESHOLD = 1600;

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/CreateSandbox.tsx

@@ -10,7 +10,7 @@ import {
 } from '@codesandbox/components';
 
 import { StyledInput, StyledLabel, StyledSelect } from './elements';
-import { CloudBetaBadge } from './CloudBetaBadge';
+import { CloudBetaBadge } from '../../CloudBetaBadge';
 import { CreateSandboxParams } from './types';
 
 export interface FromTemplateProps {

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/FromTemplate.tsx

@@ -5,7 +5,7 @@ import { getTemplateIcon } from '@codesandbox/common/lib/utils/getTemplateIcon';
 import { TemplateFragment } from 'app/graphql/types';
 import { VisuallyHidden } from 'reakit/VisuallyHidden';
 import { TemplateButton } from './elements';
-import { CloudBetaBadge } from './CloudBetaBadge';
+import { CloudBetaBadge } from '../../CloudBetaBadge';
 
 interface TemplateCardProps {
   template: TemplateFragment;
@@ -21,7 +21,7 @@ export const TemplateCard = ({
     template.sandbox?.source?.template
   );
 
-  const sandboxTitle = template.sandbox?.title;
+  const sandboxTitle = template.sandbox?.title || template.sandbox?.alias;
   const isV2 = template.sandbox?.isV2;
   const teamName = template.sandbox?.collection?.team?.name;
 

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/TemplateCard.tsx

@@ -5,7 +5,7 @@ import { Text, Stack } from '@codesandbox/components';
 import { TemplateFragment } from 'app/graphql/types';
 import { TemplateCard } from './TemplateCard';
 import { TemplateGrid } from './elements';
-import { CloudBetaBadge } from './CloudBetaBadge';
+import { CloudBetaBadge } from '../../CloudBetaBadge';
 
 interface TemplateCategoryListProps {
   title: string;

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/TemplateCategoryList.tsx

@@ -2134,6 +2134,7 @@ export type SandboxFragmentDashboardFragment = {
   | 'viewCount'
   | 'likeCount'
   | 'alwaysOn'
+  | 'isV2'
   | 'authorId'
   | 'teamId'
 > & {

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

@@ -16,6 +16,7 @@ export const sandboxFragmentDashboard = gql`
     viewCount
     likeCount
     alwaysOn
+    isV2
 
     source {
       template

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

@@ -1,22 +1,21 @@
 import { GitInfo } from '@codesandbox/common/lib/types';
 import { getSandboxOptions } from '@codesandbox/common/lib/url';
-import {
-  sandboxUrl,
-  sandboxV2Url,
-} from '@codesandbox/common/lib/utils/url-generator';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import history from '../../utils/history';
 
 export default new (class RouterEffect {
   replaceSandboxUrl({
     id,
     alias,
     git,
+    isV2,
   }: {
     id?: string | null;
     alias?: string | null;
     git?: GitInfo | null;
+    isV2?: boolean;
   }) {
-    window.history.replaceState({}, '', sandboxUrl({ id, alias, git }));
+    window.history.replaceState({}, '', sandboxUrl({ id, alias, git, isV2 }));
   }
 
   updateSandboxUrl(
@@ -33,13 +32,7 @@ export default new (class RouterEffect {
     },
     { openInNewWindow = false }: { openInNewWindow?: boolean } = {}
   ) {
-    const url = v2
-      ? sandboxV2Url({ id, alias })
-      : sandboxUrl({
-          id,
-          alias,
-          git,
-        });
+    const url = sandboxUrl({ id, alias, isV2: v2 });
 
     if (openInNewWindow) {
       window.open(url, '_blank');

packages/app/src/app/overmind/effects/router.ts

@@ -5,8 +5,10 @@ import {
   Stack,
   Text,
   Tooltip,
+  Element,
 } from '@codesandbox/components';
 import { css } from '@styled-system/css';
+import { CloudBetaBadge } from 'app/components/CloudBetaBadge';
 import { BranchProps } from './types';
 
 export const BranchCard: React.FC<BranchProps> = ({
@@ -53,11 +55,15 @@ export const BranchCard: React.FC<BranchProps> = ({
         css={css({
           backgroundColor: 'rgba(229, 229, 229, 0.04)',
           paddingY: 10,
+          position: 'relative',
         })}
         align="center"
         justify="center"
       >
         <Icon color="#808080" name="branch" size={40} />
+        <Element css={{ position: 'absolute', top: 6, right: 6 }}>
+          <CloudBetaBadge />
+        </Element>
       </Stack>
       <Stack
         css={css({

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

@@ -33,7 +33,7 @@ export const Breadcrumbs: React.FC<BreadcrumbProps> = ({
   } else if (albumId) prefix = 'Discover';
 
   return (
-    <Text marginBottom={1} marginTop={-2} block weight="regular" size={6} paddingRight={4} >
+    <Text block size={6}>
       <Link
         to={link}
         as={LinkBase}