Show author instead of environment in the template list

Author: CompuIves

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

@@ -1,25 +1,24 @@
 import React from 'react';
 import { Icons } from '@codesandbox/template-icons';
 import getColorIcons from '@codesandbox/common/lib/templates/icons';
-import getEnvironment, {
-  TemplateType,
-} from '@codesandbox/common/lib/templates';
+import { TemplateType } from '@codesandbox/common/lib/templates';
 
 import {
   Container,
   Icon,
   Details,
   Row,
   Title,
-  Environment,
-  Author as Detail,
+  Owner,
+  Detail,
 } from './elements';
 
 interface ISandboxCardProps {
   title: string;
   iconUrl: string;
   environment: TemplateType;
   color: string;
+  owner?: string;
   official?: boolean;
   focused?: boolean;
   detailText?: string;
@@ -43,11 +42,11 @@ export const SandboxCard: React.FC<ISandboxCardProps> = ({
   onKeyPress,
   onMouseOver,
   DetailComponent,
+  owner,
 }) => {
   const UserIcon: React.FunctionComponent =
     iconUrl && Icons[iconUrl] ? Icons[iconUrl] : getColorIcons(environment);
   const OfficialIcon: React.FunctionComponent = getColorIcons(environment);
-  const parsedEnvironment = getEnvironment(environment);
 
   const elRef = React.useRef<HTMLButtonElement>();
 
@@ -79,7 +78,7 @@ export const SandboxCard: React.FC<ISandboxCardProps> = ({
           {focused && DetailComponent && <DetailComponent />}
         </Row>
         <Row>
-          <Environment>{parsedEnvironment.name}</Environment>
+          <Owner>{owner ? `by ${owner}` : ''}</Owner>
 
           {detailText && <Detail>{detailText}</Detail>}
         </Row>

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/SandboxCard/elements.ts

@@ -67,13 +67,13 @@ export const Title = styled.span`
   text-overflow: ellipsis;
 `;
 
-export const Environment = styled.span`
-  color: #fff;
+export const Owner = styled.span`
+  color: #e6e6e6;
   font-size: 11px;
   line-height: 13px;
 `;
 
-export const Author = styled.span`
+export const Detail = styled.span`
   color: #757575;
   font-size: 11px;
   line-height: 13px;

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

@@ -12,6 +12,7 @@ import history from 'app/utils/history';
 import MdEditIcon from 'react-icons/lib/md/edit';
 
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import track from '@codesandbox/common/lib/utils/analytics';
 import { SandboxCard } from '../SandboxCard';
 import { SubHeader, Grid } from '../elements';
 import { EditIcon, TemplateInfoContainer } from './elements';
@@ -285,6 +286,8 @@ export const TemplateList = ({
         const num = getNumber(e);
 
         const template = getTemplateByIndex(num - 1);
+
+        track('Template Modal - Open Sandbox', { source: 'num-keys' });
         openSandbox(template.sandbox);
       }
     },
@@ -305,6 +308,8 @@ export const TemplateList = ({
       ) {
         e.preventDefault();
         const currentTemplate = getTemplateByIndex(focusedTemplateIndex);
+
+        track('Template Modal - Open Sandbox', { source: 'enter' });
         openSandbox(currentTemplate.sandbox, isMac ? e.metaKey : e.ctrlKey);
       }
     },
@@ -332,6 +337,9 @@ export const TemplateList = ({
                 {templates.map((template: TemplateFragment, i) => {
                   const index = offset + i;
                   const focused = focusedTemplateIndex === offset + i;
+                  const owner =
+                    template.sandbox.collection?.team?.name ||
+                    template.sandbox.author?.username;
 
                   const shortKey = showSecondaryShortcuts
                     ? index < 9
@@ -347,6 +355,7 @@ export const TemplateList = ({
                       iconUrl={template.iconUrl}
                       // @ts-ignore
                       environment={template.sandbox.source.template}
+                      owner={owner}
                       color={template.color}
                       onFocus={() => {
                         safeSetFocusedTemplate(() => index);
@@ -360,6 +369,10 @@ export const TemplateList = ({
                       onKeyPress={e => {
                         if (e.key === 'Enter') {
                           e.preventDefault();
+
+                          track('Template Modal - Open Sandbox', {
+                            source: 'enter',
+                          });
                           openSandbox(
                             template.sandbox,
                             isMac ? e.metaKey : e.ctrlKey
@@ -369,6 +382,9 @@ export const TemplateList = ({
                       onClick={e => {
                         e.preventDefault();
 
+                        track('Template Modal - Open Sandbox', {
+                          source: 'click',
+                        });
                         openSandbox(
                           template.sandbox,
                           isMac ? e.metaKey : e.ctrlKey

packages/app/src/app/components/CreateNewSandbox/queries.ts

@@ -31,6 +31,12 @@ const TEMPLATE_FRAGMENT = gql`
       insertedAt
       updatedAt
 
+      collection {
+        team {
+          name
+        }
+      }
+
       author {
         username
       }

packages/app/src/app/graphql/schema.graphql

@@ -1,5 +1,5 @@
 # source: https://codesandbox.stream/api/graphql
-# timestamp: Thu Dec 12 2019 17:24:06 GMT+0100 (Central European Standard Time)
+# timestamp: Fri Jan 31 2020 13:46:04 GMT+0000 (Greenwich Mean Time)
 
 schema {
   query: RootQuery
@@ -20,6 +20,7 @@ type Collection {
   id: ID
   path: String
   sandboxes: [Sandbox]
+  team: Team
   teamId: ID
   user: User
 }

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

@@ -22,6 +22,7 @@ export type Collection = {
   id: Maybe<Scalars['ID']>;
   path: Maybe<Scalars['String']>;
   sandboxes: Maybe<Array<Maybe<Sandbox>>>;
+  team: Maybe<Team>;
   teamId: Maybe<Scalars['ID']>;
   user: Maybe<User>;
 };
@@ -329,6 +330,11 @@ export type TemplateFragment = { __typename?: 'Template' } & Pick<
         Sandbox,
         'id' | 'alias' | 'title' | 'description' | 'insertedAt' | 'updatedAt'
       > & {
+          collection: Maybe<
+            { __typename?: 'Collection' } & {
+              team: Maybe<{ __typename?: 'Team' } & Pick<Team, 'name'>>;
+            }
+          >;
           author: Maybe<{ __typename?: 'User' } & Pick<User, 'username'>>;
           source: Maybe<{ __typename?: 'Source' } & Pick<Source, 'template'>>;
         }