feat: Add username to sandbox/devbox cards/listitems (#8540)

* Add username to sandbox/devbox cards/listitems

* new version

* update icon

* update types

---------

Co-authored-by: Danilo Woznica <[email protected]>

Author: christianalfoni

packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxBadge.tsx

@@ -15,23 +15,21 @@ export const SandboxBadge: React.FC<SandboxBadgeProps> = ({
   const isRestricted = restricted;
   const isTemplate = !!sandbox.customTemplate;
 
-  const boxIcon = isDevbox ? 'boxDevbox' : 'boxSandbox';
-  let boxTypeColor = isDevbox ? '#FFFFFF' : '#A6A6A6';
+  const boxIcon = isDevbox ? 'server' : 'boxDevbox';
   let boxTypeLabel = isDevbox ? 'Devbox' : 'Sandbox';
 
   if (isTemplate) {
     boxTypeLabel = 'Template';
   }
 
   if (isRestricted) {
-    boxTypeColor = '#F7CC66';
     boxTypeLabel += ' (Restricted)';
   }
 
   return (
     <Stack align="center" gap={1}>
-      <Icon name={boxIcon} color={boxTypeColor} />
-      <Text size={2} color={boxTypeColor}>
+      <Icon name={boxIcon} color="#A6A6A6" />
+      <Text size={2} color="#A6A6A6">
         {boxTypeLabel}
       </Text>
     </Stack>

packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxCard.tsx

@@ -184,7 +184,7 @@ export const SandboxCard = ({
   // drag preview
   thumbnailRef,
   isDragging,
-
+  username,
   'data-selection-id': dataSelectionId,
   ...props
 }: SandboxItemComponentProps) => {
@@ -193,11 +193,14 @@ export const SandboxCard = ({
   });
 
   let textColor = '#EBEBEB'; // default
+  let userNameTextColor = '#A6A6A6';
 
   if (restricted) {
     textColor = thumbnail.isCustom ? textColor : '#999999';
+    userNameTextColor = textColor;
   } else if (thumbnail?.brightness && thumbnail.isCustom) {
     textColor = thumbnail.brightness === 'light' ? '#0E0E0E' : '#FFFFFF';
+    userNameTextColor = textColor;
   }
 
   return (
@@ -279,7 +282,16 @@ export const SandboxCard = ({
         ) : null}
 
         <CardContent selected={selected}>
-          <SandboxTitle brightness={thumbnail.brightness} {...props} />
+          <Stack direction="vertical" gap={0}>
+            <SandboxTitle brightness={thumbnail.brightness} {...props} />
+            <Text
+              size={12}
+              truncate
+              css={{ marginLeft: 28, color: userNameTextColor }}
+            >
+              Created by {username}
+            </Text>
+          </Stack>
           <SandboxStats
             noDrag={noDrag}
             timeAgo={timeAgo}

packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxListItem.tsx

@@ -19,6 +19,7 @@ export const SandboxListItem = ({
   sandbox,
   sandboxTitle,
   sandboxLocation,
+  username,
   timeAgo,
   viewCount,
   TemplateIcon,
@@ -174,7 +175,7 @@ export const SandboxListItem = ({
               variant={selected ? 'body' : 'muted'}
               maxWidth="100%"
             >
-              {timeAgo}
+              {timeAgo} by {username}
             </Text>
           )}
         </Column>

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

@@ -13,6 +13,7 @@ import track, {
 import { Icon } from '@codesandbox/components';
 import { formatNumber } from '@codesandbox/components/lib/components/Stats';
 import { useBetaSandboxEditor } from 'app/hooks/useBetaSandboxEditor';
+
 import { SandboxCard } from './SandboxCard';
 import { SandboxListItem } from './SandboxListItem';
 import { getTemplateIcon } from './TemplateIcon';
@@ -67,7 +68,7 @@ function getFolderName(item: GenericSandboxProps['item']): string | undefined {
 }
 
 const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
-  const { dashboard, activeWorkspaceAuthorization } = useAppState();
+  const { user, dashboard, activeWorkspaceAuthorization } = useAppState();
   const [hasBetaEditorExperiment] = useBetaSandboxEditor();
   const actions = useActions();
 
@@ -306,6 +307,11 @@ const GenericSandbox = ({ isScrolling, item, page }: GenericSandboxProps) => {
         {...sandboxProps}
         {...interactionProps}
         isScrolling={isScrolling}
+        username={
+          sandboxProps.sandbox.author.username === user.username
+            ? 'you'
+            : sandboxProps.sandbox.author.username
+        }
       />
     </div>
   );

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

@@ -15,7 +15,7 @@ export interface SandboxItemComponentProps {
   PrivacyIcon: React.FC;
   screenshotUrl: string | null;
   restricted: boolean;
-
+  username: string;
   interaction: 'button' | 'link';
   isScrolling: boolean;
   selected: boolean;