Small improvements to dependency picker (codesandbox#363)

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion.js

@@ -8,7 +8,9 @@ import modalActionCreators from 'app/store/modal/actions';
 
 import SearchDependencies from './SearchDependencies';
 
-const ButtonContainer = styled.div`margin: 0.5rem 1rem;`;
+const ButtonContainer = styled.div`
+  margin: 0.5rem 1rem;
+`;
 
 type Props = {
   addDependency: (dependency: string, version: string) => Promise<boolean>,

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/DependencyHit.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import HomeIcon from 'react-icons/lib/io/home';
+import SearchIcon from 'react-icons/lib/go/search';
 import { Highlight } from 'react-instantsearch/dom';
 import styled from 'styled-components';
 
 import Select from 'app/components/Select';
+import UserWithAvatar from 'app/components/user/UserWithAvatar';
 import Tooltip from 'common/components/Tooltip';
 
 import GitHubLogo from '../Git/modals/GitHubLogo';
@@ -12,12 +14,18 @@ import formatDownloads from './formatDownloads';
 const Container = styled.div`
   display: flex;
   background: ${props =>
-    props.highlighted ? props.theme.background3 : props.theme.background2};
+    props.highlighted
+      ? props.theme.background2.darken(0.3)
+      : props.theme.background2};
   color: ${props => props.theme.white};
   cursor: pointer;
   &:not(:last-child) {
     border-bottom: 1px solid ${props => props.theme.background3};
   }
+
+  &:hover {
+    background-color: ${props => props.theme.background2.darken(0.2)};
+  }
 `;
 
 const Left = styled.div`
@@ -36,16 +44,22 @@ const Row = styled.div`
   }
 `;
 
+const Description = Row.extend`
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.6);
+`;
+
 const Downloads = styled.span`
   color: ${props => props.theme.gray};
+  font-weight: 500;
   font-size: 12px;
 `;
 
 const License = styled.span`
-  border: 1px solid ${props => props.theme.gray};
+  border: 1px solid rgba(255, 255, 255, 0.4);
   border-radius: 3px;
   padding: 1px 3px;
-  color: ${props => props.theme.gray};
+  color: rgba(255, 255, 255, 0.6);
   font-size: 12px;
 `;
 
@@ -54,6 +68,15 @@ const IconLink = styled.a`
   color: rgba(255, 255, 255, 0.8);
 `;
 
+const StyledSelect = Select.extend`
+  font-size: 0.875rem;
+`;
+
+const StyledUserWithAvatar = styled(UserWithAvatar)`
+  font-size: 0.75rem;
+  font-weight: 500;
+`;
+
 type Props = {
   highlighted: boolean,
   hit: Object,
@@ -77,6 +100,12 @@ export default class DependencyHit extends React.PureComponent {
     return `https://github.com/${repo.user}/${repo.project}`;
   }
 
+  makeSearchUrl(hitName: string) {
+    return `https://codesandbox.io/search?refinementList%5Bnpm_dependencies.dependency%5D%5B0%5D=${
+      hitName
+    }&page=1`;
+  }
+
   stopPropagation(e) {
     e.stopPropagation();
   }
@@ -91,6 +120,7 @@ export default class DependencyHit extends React.PureComponent {
     const { highlighted, hit, onClick } = this.props;
     const versions = Object.keys(hit.versions);
     versions.reverse();
+
     return (
       <Container highlighted={highlighted} onClick={onClick}>
         <Left>
@@ -99,7 +129,13 @@ export default class DependencyHit extends React.PureComponent {
             <Downloads>{formatDownloads(hit.downloadsLast30Days)}</Downloads>
             {hit.license && <License>{hit.license}</License>}
           </Row>
-          <Row>{hit.description}</Row>
+          <Description>{hit.description}</Description>
+          <Row>
+            <StyledUserWithAvatar
+              username={hit.owner.name}
+              avatarUrl={hit.owner.avatar}
+            />
+          </Row>
         </Left>
         <Right>
           <Row>
@@ -127,13 +163,23 @@ export default class DependencyHit extends React.PureComponent {
                 </IconLink>
               </Tooltip>
             )}
-            <Select
+            <Tooltip title={`Search for sandboxes using ${hit.name}`}>
+              <IconLink
+                href={this.makeSearchUrl(hit.name)}
+                target="_blank"
+                rel="noreferrer noopener"
+                onClick={this.stopPropagation}
+              >
+                <SearchIcon />
+              </IconLink>
+            </Tooltip>
+            <StyledSelect
               onClick={this.stopPropagation}
               onChange={this.handleVersionChange}
               value={this.state.selectedVersion}
             >
               {versions.map(v => <option key={v}>{v}</option>)}
-            </Select>
+            </StyledSelect>
           </Row>
         </Right>
       </Container>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/SearchDependencies.js

@@ -14,13 +14,15 @@ const AutoCompleteInput = styled.input`
   box-sizing: border-box;
   border: none;
   outline: none;
-  background-color: ${props => props.theme.background};
+  background-color: ${props => props.theme.background2};
+  font-weight: 600;
   color: ${props => props.theme.white};
-  padding: 1em;
+  padding: .75em 1em;
 }`;
 
 type RawAutoCompleteProps = {
   onSelect: (hit: Object) => void,
+  onManualSelect: (hit: string) => void,
   onHitVersionChange: (version: string) => void,
   hits: Array<Object>,
   refine: string,
@@ -29,6 +31,7 @@ type RawAutoCompleteProps = {
 
 function RawAutoComplete({
   onSelect,
+  onManualSelect,
   onHitVersionChange,
   hits,
   refine,
@@ -46,12 +49,20 @@ function RawAutoComplete({
                 }
               },
               value: currentRefinement,
+              placeholder: 'Search or enter npm dependency',
               onChange(e) {
                 refine(e.target.value);
               },
+              onKeyUp(e) {
+                // If enter with no selection
+                if (e.keyCode === 13) {
+                  onManualSelect(e.target.value);
+                }
+              },
             })}
           />
           <Pagination />
+
           <div>
             {hits.map((hit, index) => (
               <DependencyHit
@@ -90,6 +101,21 @@ export default class SearchDependencies extends React.PureComponent {
     this.props.onConfirm(hit.name, version);
   };
 
+  handleManualSelect = (hitName: string) => {
+    const isScoped = hitName.startsWith('@');
+    let version = 'latest';
+
+    const splittedName = hitName.split('@');
+
+    if (splittedName.length > (isScoped ? 2 : 1)) {
+      version = splittedName.pop();
+    }
+
+    const depName = splittedName.join('@');
+
+    this.props.onConfirm(depName, version);
+  };
+
   handleHitVersionChange = (hit, version) => {
     this.hitToVersionMap.set(hit, version);
   };
@@ -104,6 +130,7 @@ export default class SearchDependencies extends React.PureComponent {
         <Configure hitsPerPage={5} />
         <ConnectedAutoComplete
           onSelect={this.handleSelect}
+          onManualSelect={this.handleManualSelect}
           onHitVersionChange={this.handleHitVersionChange}
         />
       </InstantSearch>