fix(embed): parse csb package version number (codesandbox#3010)

Author: jyash97

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/VersionEntry/index.tsx

@@ -6,7 +6,7 @@ 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 { formatVersion } from '@codesandbox/common/lib/utils/ci';
 
 import { EntryContainer, IconArea, Icon } from '../../elements';
 import { Link } from '../elements';
@@ -27,17 +27,6 @@ interface State {
   versions: string[];
 }
 
-function formatVersion(version: string) {
-  if (CSB_PKG_PROTOCOL.test(version)) {
-    const commitSha = version.match(/commit\/([\w\d]*)\//);
-    if (commitSha && commitSha[1]) {
-      return `csb:${commitSha[1]}`;
-    }
-  }
-
-  return version;
-}
-
 export class VersionEntry extends React.PureComponent<Props, State> {
   state: State = {
     hovering: false,

packages/app/src/embed/components/Sidebar/Dependencies/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { formatVersion } from '@codesandbox/common/lib/utils/ci';
 import { Container, Row } from './elements';
 
 function Dependencies({ sandbox }) {
@@ -23,7 +24,7 @@ function Dependencies({ sandbox }) {
       {Object.keys(npmDependencies).map(dep => (
         <Row key={dep}>
           <span>{dep}</span>
-          <span>{npmDependencies[dep]}</span>
+          <span>{formatVersion(npmDependencies[dep])}</span>
         </Row>
       ))}
     </Container>

packages/common/src/utils/ci.ts

@@ -1 +1,12 @@
 export const CSB_PKG_PROTOCOL = /https:\/\/pkg(-staging)?\.csb.dev/;
+
+export const formatVersion = (version: string) => {
+  if (CSB_PKG_PROTOCOL.test(version)) {
+    const commitSha = version.match(/commit\/([\w\d]*)\//);
+    if (commitSha && commitSha[1]) {
+      return `csb:${commitSha[1]}`;
+    }
+  }
+
+  return version;
+};