Add a nice view for the version of a csb ci dependency (codesandbox#2397)

Author: CompuIves

…ce/Dependencies/VersionEntry/elements.js …ce/Dependencies/VersionEntry/elements.tspackages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/elements.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/elements.ts packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/elements.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/elements.ts

@@ -2,22 +2,11 @@ import styled, { css } from 'styled-components';
 import Select from '@codesandbox/common/lib/components/Select';
 import { EntryContainer } from '../../elements';
 
-const getRight = (hovering, withSize) => {
-  if (hovering) {
-    if (withSize) {
-      return 5;
-    }
-    return 3.5;
-  }
-
-  return 1;
-};
-
-export const Version = styled.div`
-  ${({ hovering, theme, withSize }) => css`
+export const Version = styled.div<{ hovering?: boolean }>`
+  ${({ hovering, theme }) => css`
     transition: 0.3s ease all;
     position: absolute;
-    right: ${getRight(hovering, withSize)}rem;
+    right: ${hovering ? 3.5 : 1}rem;
     color: ${theme.background.lighten(2).clearer(0.5)};
     display: ${hovering ? 'none' : 'block'};
   `};
@@ -41,7 +30,7 @@ export const MoreData = styled(EntryContainer)`
   }
 `;
 
-export const VersionSelect = styled(Select)`
+export const VersionSelect = styled(Select)<{ hovering?: boolean }>`
   ${({ hovering, theme }) => css`
     visibility: ${hovering ? 'visible' : 'hidden'};
     width: 60px;

…space/Dependencies/VersionEntry/index.js …pace/Dependencies/VersionEntry/index.tsxpackages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.tsx packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.js renamed to packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.tsx

@@ -6,22 +6,47 @@ import ArrowDropUp from 'react-icons/lib/md/keyboard-arrow-up';
 import algoliasearch from 'algoliasearch/lite';
 import compareVersions from 'compare-versions';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import { CSB_PKG_PROTOCOL } from '@codesandbox/common/lib/utils/ci';
 
 import { EntryContainer, IconArea, Icon } from '../../elements';
 import { Link } from '../elements';
 import { Version, VersionSelect } from './elements';
 import { BundleSizes } from './BundleSizes';
 
-export default class VersionEntry extends React.PureComponent {
-  state = {
+interface Props {
+  dependencies: { [dep: string]: string };
+  dependency: string;
+  onRemove: (dep: string) => void;
+  onRefresh: (dep: string, version?: string) => void;
+}
+
+interface State {
+  hovering: boolean;
+  version: null | string;
+  open: boolean;
+  versions: string[];
+}
+
+function formatVersion(version: string) {
+  if (CSB_PKG_PROTOCOL.test(version)) {
+    const commitSha = version.match(/commit\/(.*)\//);
+    if (commitSha && commitSha[1]) {
+      return `csb:${commitSha[1]}`;
+    }
+  }
+
+  return version;
+}
+
+export class VersionEntry extends React.PureComponent<Props, State> {
+  state: State = {
     hovering: false,
     version: null,
     open: false,
-    size: {},
     versions: [],
   };
 
-  setVersionsForLatestPkg(pkg) {
+  setVersionsForLatestPkg(pkg: string) {
     const that = this;
     fetch(`/api/v1/dependencies/${pkg}`)
       .then(response => response.json())
@@ -89,7 +114,7 @@ export default class VersionEntry extends React.PureComponent {
       return null;
     }
 
-    const { hovering, version, size, open, versions } = this.state;
+    const { hovering, version, open, versions } = this.state;
     return (
       <Fragment>
         <EntryContainer
@@ -112,9 +137,9 @@ export default class VersionEntry extends React.PureComponent {
               </option>
             ))}
           </VersionSelect>
-          <Version withSize={!!size.size} hovering={hovering}>
-            {dependencies[dependency]}{' '}
-            {hovering && version && <span>({version})</span>}
+          <Version hovering={hovering}>
+            {formatVersion(dependencies[dependency])}{' '}
+            {hovering && version && <span>({formatVersion(version)})</span>}
           </Version>
 
           {hovering && (

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

@@ -7,7 +7,7 @@ import getDefinition from '@codesandbox/common/lib/templates';
 import { WorkspaceSubtitle } from '../elements';
 
 import AddVersion from './AddVersion';
-import VersionEntry from './VersionEntry';
+import { VersionEntry } from './VersionEntry';
 import AddResource from './AddResource';
 import ExternalResource from './ExternalResource';
 

packages/app/src/sandbox/eval/npm/fetch-npm-module.ts

@@ -1,4 +1,5 @@
 import * as pathUtils from '@codesandbox/common/lib/utils/path';
+import { CSB_PKG_PROTOCOL } from '@codesandbox/common/lib/utils/ci';
 import resolve from 'browser-resolve';
 import DependencyNotFoundError from 'sandbox-hooks/errors/dependency-not-found-error';
 
@@ -123,10 +124,8 @@ export function setCombinedMetas(givenCombinedMetas: Meta) {
   combinedMetas = givenCombinedMetas;
 }
 
-const CSB_DRAFT_PROTOCOL = /https:\/\/pkg(-staging)?\.csb.dev/;
-
 const getFetchProtocol = (depVersion: string, useFallback = false) => {
-  const isDraftProtocol = CSB_DRAFT_PROTOCOL.test(depVersion);
+  const isDraftProtocol = CSB_PKG_PROTOCOL.test(depVersion);
 
   if (isDraftProtocol) {
     return urlProtocols.csbGH;

packages/common/src/utils/ci.ts

@@ -0,0 +1 @@
+export const CSB_PKG_PROTOCOL = /https:\/\/pkg(-staging)?\.csb.dev/;