feat: update subscription info in dashboard (#7044)

* feat(ui): adjust sidebar

* chore: cleanup

* fix: show 'Personal' instead of username

* fix: skeleton loading

* fix: second usage of workspace selector

* chore: sidebar refactor

* feat: add upgrade cta

* feat: standardize badge

* feat: switch badge logic for editor (#7048)

Author: alexnm

packages/app/src/app/components/Badge.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Icon, IconNames, Stack, Text } from '@codesandbox/components';
+
+export interface BadgeProps {
+  color?: 'accent' | 'neutral';
+  icon?: IconNames;
+}
+
+// TODO: Move to component system
+export const Badge: React.FC<BadgeProps> = ({
+  color = 'neutral',
+  icon,
+  children,
+}) => (
+  <Stack
+    css={{
+      alignItems: 'center',
+      padding: icon ? '4px 8px' : '1px 6px',
+      userSelect: 'none',
+
+      borderRadius: '999px',
+
+      backgroundColor: color === 'accent' ? '#653FFD80' : '#2e2e2e',
+      color: color === 'accent' ? '#fff' : 'inherit',
+      fontSize: 11,
+      lineHeight: 16,
+    }}
+    gap={1}
+  >
+    {icon && <Icon size={12} name={icon} />}
+    <Text>{children}</Text>
+  </Stack>
+);

packages/app/src/app/components/CloudBetaBadge.tsx

@@ -1,19 +1,7 @@
 import React from 'react';
-import { Icon, Stack, Text } from '@codesandbox/components';
+import { Badge } from './Badge';
 
+// TODO: Drop in favor of standardized Badge instances
 export const CloudBetaBadge: React.FC<{ hideIcon?: boolean }> = ({
   hideIcon,
-}) => (
-  <Stack
-    css={{
-      alignItems: 'center',
-      padding: hideIcon ? '3px 10px' : '6px 10px',
-      background: '#2e2e2e',
-      borderRadius: '999px',
-    }}
-    gap={2}
-  >
-    {!hideIcon && <Icon size={12} name="cloud" />}
-    <Text size={1}>Beta</Text>
-  </Stack>
-);
+}) => <Badge icon={hideIcon ? undefined : 'cloud'}>Beta</Badge>;

packages/app/src/app/components/WorkspaceSelect/WorkspaceSelect.tsx

@@ -2,35 +2,30 @@ import React from 'react';
 import { useActions, useAppState } from 'app/overmind';
 import { Text, Menu, Stack, Icon, Tooltip } from '@codesandbox/components';
 import { sortBy } from 'lodash-es';
-import css from '@styled-system/css';
 import { TeamAvatar } from 'app/components/TeamAvatar';
-import { SubscriptionType } from 'app/graphql/types';
-import { MenuItem, Badge } from './elements';
-
-type Team = {
-  id: string;
-  name: string;
-  avatarUrl: string | null;
-};
+import { Badge } from 'app/components/Badge';
 
 interface WorkspaceSelectProps {
-  activeAccount: Team;
   disabled?: boolean;
-  onSelect: (account: Team) => void;
+  onSelect: (teamId: string) => void;
+  selectedTeamId: string;
 }
 
 export const WorkspaceSelect: React.FC<WorkspaceSelectProps> = React.memo(
-  ({ activeAccount, disabled, onSelect }) => {
+  ({ disabled, onSelect, selectedTeamId }) => {
     const state = useAppState();
     const { dashboard, user } = state;
     const { openCreateTeamModal } = useActions();
 
-    if (!dashboard.teams || !state.personalWorkspaceId) return null;
+    if (dashboard.teams.length === 0 || !state.personalWorkspaceId) return null;
 
     const personalWorkspace = dashboard.teams.find(
       t => t.id === state.personalWorkspaceId
     )!;
 
+    const selectedTeam = dashboard.teams.find(t => t.id === selectedTeamId);
+    const isPersonalTeam = selectedTeamId === state.personalWorkspaceId;
+
     const workspaces = [
       personalWorkspace,
       ...sortBy(
@@ -47,60 +42,58 @@ export const WorkspaceSelect: React.FC<WorkspaceSelectProps> = React.memo(
             : null
         }
       >
-        <Stack css={css({ width: '100%', height: '100%' })}>
+        <Stack css={{ flex: 1, height: '100%' }}>
           <Menu>
             <Stack
               as={Menu.Button}
               disabled={disabled}
               justify="space-between"
               align="center"
-              css={css({
+              css={{
                 width: '100%',
-                height: '100%',
-                marginLeft: 0,
+                cursor: 'default',
+                color: '#C2C2C2',
+                paddingLeft: '28px',
+                height: '36px',
+                borderRadius: '2px 0 0 2px',
                 '&:hover': {
-                  backgroundColor: 'grays.600',
+                  backgroundColor: '#242424',
                 },
-              })}
+              }}
             >
-              <Stack gap={2} as="span" align="center">
-                <Stack as="span" align="center" justify="center">
-                  <TeamAvatar
-                    avatar={
-                      state.activeTeamInfo?.avatarUrl || activeAccount.avatarUrl
-                    }
-                    name={activeAccount.name}
-                  />
-                </Stack>
-                <Text size={14} weight="normal" maxWidth={140}>
-                  {activeAccount.name}
+              <Stack align="center" gap={1} css={{ paddingRight: 4 }}>
+                <Text
+                  size={16}
+                  maxWidth={selectedTeam.subscription ? 166 : 126}
+                >
+                  {isPersonalTeam ? 'Personal' : selectedTeam.name}
                 </Text>
+
+                {!selectedTeam.subscription && (
+                  <Badge color="accent">Free</Badge>
+                )}
               </Stack>
 
               <Icon name="chevronDown" size={8} />
             </Stack>
 
             <Menu.List
-              css={css({
+              css={{
                 width: '100%',
-                marginTop: -2,
-                backgroundColor: 'grays.600',
-              })}
-              style={{ backgroundColor: '#242424', borderColor: '#343434' }} // TODO: find a way to override reach styles without the selector mess
+                marginLeft: 7,
+                marginTop: 4,
+                borderRadius: '2px',
+                backgroundColor: '#242424',
+              }}
             >
               {workspaces.map(team => (
-                <MenuItem
+                <Stack
                   as={Menu.Item}
                   key={team.id}
                   align="center"
                   gap={2}
-                  onSelect={() =>
-                    onSelect({
-                      name: team.name,
-                      id: team.id,
-                      avatarUrl: team.avatarUrl,
-                    })
-                  }
+                  css={{ borderBottom: '1px solid #343434' }}
+                  onSelect={() => onSelect(team.id)}
                 >
                   <TeamAvatar
                     avatar={
@@ -112,40 +105,41 @@ export const WorkspaceSelect: React.FC<WorkspaceSelectProps> = React.memo(
                     size="small"
                     style={{ overflow: 'hidden' }}
                   />
-                  <Stack align="center">
-                    <Text css={css({ width: '100%' })} size={3}>
-                      {team.name}
+                  <Stack
+                    align="center"
+                    justify="space-between"
+                    css={{ flex: 1 }}
+                    gap={1}
+                  >
+                    <Text css={{ width: '100%' }} size={3}>
+                      {team.id === state.personalWorkspaceId
+                        ? 'Personal'
+                        : team.name}
                     </Text>
 
-                    {[
-                      SubscriptionType.TeamPro,
-                      SubscriptionType.PersonalPro,
-                    ].includes(team.subscription?.type) && <Badge>Pro</Badge>}
+                    {!team.subscription && <Badge color="accent">Free</Badge>}
                   </Stack>
-                </MenuItem>
+                </Stack>
               ))}
 
               <Stack
                 as={Menu.Item}
                 align="center"
                 gap={2}
-                css={css({
-                  height: 10,
+                css={{
                   textAlign: 'left',
-                  marginLeft: '1px',
-                })}
-                style={{ paddingLeft: 8 }}
+                }}
                 onSelect={openCreateTeamModal}
               >
                 <Stack
                   justify="center"
                   align="center"
-                  css={css({
-                    size: 6,
-                    borderRadius: 'small',
-                    border: '1px solid',
-                    borderColor: 'grays.500',
-                  })}
+                  css={{
+                    width: 24,
+                    height: 24,
+                    borderRadius: '2px',
+                    border: '1px solid #999',
+                  }}
                 >
                   <Icon name="plus" size={10} />
                 </Stack>

packages/app/src/app/components/WorkspaceSelect/elements.ts

@@ -1,2 +1,2 @@
-export const SIDEBAR_WIDTH = 240;
+export const SIDEBAR_WIDTH = 250;
 export const NEW_FOLDER_ID = '__NEW__';