Update views to reflect template

Author: Ives van Hoorne

src/app/pages/Sandbox/Editor/Workspace/Project/index.js

@@ -8,6 +8,7 @@ import { sandboxUrl, githubRepoUrl, profileUrl } from 'app/utils/url-generator';
 import UserWithAvatar from 'app/components/user/UserWithAvatar';
 import Stats from 'app/components/sandbox/Stats';
 import PrivacyStatus from 'app/components/sandbox/PrivacyStatus';
+import getTemplateDefinition from 'common/templates';
 
 import type { User, GitInfo } from 'common/types';
 import WorkspaceInputContainer from '../WorkspaceInputContainer';
@@ -117,6 +118,7 @@ export default class Project extends React.PureComponent<
       forkCount,
       author,
       git,
+      template,
       preventTransition,
       privacy,
     } = this.props;
@@ -192,6 +194,20 @@ export default class Project extends React.PureComponent<
               <PrivacyStatus privacy={privacy} />
             </PrivacyContainer>
           </div>}
+
+        <div>
+          <WorkspaceSubtitle>Template</WorkspaceSubtitle>
+          <Item>
+            <a
+              href={getTemplateDefinition(template).url}
+              target="_blank"
+              rel="noreferrer noopener"
+              style={{ color: getTemplateDefinition(template).color() }}
+            >
+              {template}
+            </a>
+          </Item>
+        </div>
         <StatsContainer>
           <Stats
             sandboxId={id}

src/app/pages/Sandbox/Editor/Workspace/index.js

@@ -105,6 +105,7 @@ const Workspace = ({
             owned={sandbox.owned}
             author={user}
             privacy={sandbox.privacy}
+            template={sandbox.template}
           />
         </WorkspaceItem>
 

src/app/pages/Search/Filters/Filter.js

@@ -34,16 +34,17 @@ type Props = {
   title: string,
   attributeName: string,
   operator: string,
+  noSearch: ?boolean,
 };
 
-export default ({ title, attributeName, operator }: Props) =>
+export default ({ title, attributeName, operator, noSearch }: Props) =>
   <Container>
     <Title>
       {title}
     </Title>
     <RefinementList
-      withSearchBox
-      showMore
+      withSearchBox={!noSearch}
+      showMore={!noSearch}
       operator={operator}
       attributeName={attributeName}
     />

src/app/pages/Search/Filters/index.js

@@ -4,6 +4,7 @@ import Filter from './Filter';
 
 export default () =>
   <div style={{ flex: 1 }}>
+    <Filter title="Templates" operator="or" attributeName="template" noSearch />
     <Filter
       title="Dependencies"
       operator="and"

src/app/pages/Search/SandboxCard/index.js

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { Highlight } from 'react-instantsearch/dom';
 
+import getTemplateDefinition from 'common/templates';
+
 import Tags from 'app/components/sandbox/Tags';
 
 import SandboxInfo from './SandboxInfo';
@@ -22,7 +24,8 @@ const Container = styled.div`
   border-radius: 2px;
   box-sizing: border-box;
 
-  border-left: 2px solid ${props => props.theme.secondary.clearer(0.3)};
+  border-left: 2px solid
+    ${props => getTemplateDefinition(props.template).color.clearer(0.3)};
 
   cursor: pointer;
 
@@ -79,12 +82,13 @@ type Props = {
     'description': ?string,
     'author': ?{ username: string, avatarUrl: string },
     'objectID': string,
+    'template': string,
   },
 };
 
 export default ({ hit }: Props) =>
   <StyledLink to={sandboxUrl({ id: hit.objectID, git: hit.git })}>
-    <Container>
+    <Container template={hit.template}>
       <Row alignItems="flex-start">
         <Title>
           {hit.title

src/common/templates/index.js

@@ -2,11 +2,13 @@ import { decorateSelector } from '../theme';
 
 export const react = {
   name: 'create-react-app',
+  url: 'https://github.com/facebookincubator/create-react-app',
   color: decorateSelector(() => '#6CAEDD'),
 };
 
 export const vue = {
   name: 'vue-cli',
+  url: 'https://github.com/vuejs/vue-cli',
   color: decorateSelector(() => '#41B883'),
 };
 

src/sandbox/eval/index.js

@@ -10,4 +10,6 @@ export default function getPreset(template: 'create-react-app' | 'vue-cli') {
   } else if (template === vue.name) {
     return vuePreset;
   }
+
+  return reactPreset;
 }