feat: Add upgrade option for free users in Dashboard Sidebar (#8388)

* feat: Add upgrade option for free users in Dashboard Sidebar

* feat: Add CSSProperties import and update style prop, update Text component  to include color prop and update source value and add style prop

* style: Change color from #E4FC82 to #BDB1F6 in Sidebar component

Author: danilowoz

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

@@ -12,6 +12,7 @@ import { Link as RouterLink, useHistory, useLocation } from 'react-router-dom';
 import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
 import css from '@styled-system/css';
 import { trackImprovedDashboardEvent } from '@codesandbox/common/lib/utils/analytics';
+import { CSSProperties } from 'styled-components';
 import { DragItemType, useDrop } from '../utils/dnd';
 import {
   SidebarContext,
@@ -58,6 +59,7 @@ interface RowItemProps {
   setFoldersVisibility?: (val: boolean) => void;
   folderPath?: string;
   nestingLevel?: number;
+  style?: CSSProperties;
 }
 
 export const RowItem: React.FC<RowItemProps> = ({
@@ -68,6 +70,7 @@ export const RowItem: React.FC<RowItemProps> = ({
   page,
   icon,
   setFoldersVisibility = null,
+  style = {},
   ...props
 }) => {
   const accepts: Array<'sandbox' | 'folder' | 'template'> = [];
@@ -139,6 +142,7 @@ export const RowItem: React.FC<RowItemProps> = ({
         color: isCurrentLink ? 'sideBar.foreground' : 'sideBarTitle.foreground',
         backgroundColor:
           canDrop && isOver ? 'list.hoverBackground' : 'transparent',
+        ...style,
       })}
     >
       {props.children || (
@@ -185,7 +189,7 @@ export const RowItem: React.FC<RowItemProps> = ({
           >
             <Icon name={icon} />
           </Stack>
-          <Text truncate lineHeight="16px">
+          <Text truncate lineHeight="16px" color="inherit">
             {name}
           </Text>
         </Link>

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

@@ -8,6 +8,7 @@ import { Element, List, Text, Stack } from '@codesandbox/components';
 import css from '@styled-system/css';
 import { WorkspaceSelect } from 'app/components/WorkspaceSelect';
 import { useWorkspaceAuthorization } from 'app/hooks/useWorkspaceAuthorization';
+import { useWorkspaceSubscription } from 'app/hooks/useWorkspaceSubscription';
 import { ContextMenu } from './ContextMenu';
 import { DashboardBaseFolder } from '../types';
 import { Position } from '../Components/Selection';
@@ -81,6 +82,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
   const showRespositories = !state.environment.isOnPrem;
 
   const { isPrimarySpace } = useWorkspaceAuthorization();
+  const { isFree } = useWorkspaceSubscription();
 
   const showTemplates = state.activeTeam
     ? state.sidebar[state.activeTeam]?.hasTemplates
@@ -170,6 +172,18 @@ export const Sidebar: React.FC<SidebarProps> = ({
             path={dashboardUrls.portalVMUsage(activeTeam)}
             icon="coins"
           />
+          {isFree && (
+            <RowItem
+              name="Upgrade"
+              page="external"
+              path={dashboardUrls.upgradeUrl({
+                workspaceId: activeTeam,
+                source: 'sidebar',
+              })}
+              icon="proBadge"
+              style={{ color: '#BDB1F6' }}
+            />
+          )}
 
           {showRespositories && (
             <>