Improve showing of commit sha (codesandbox#2925)

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/Project.tsx

@@ -83,6 +83,7 @@ export const Project: React.FunctionComponent<IProjectProps> = ({
             username={sandbox.git.username}
             repo={sandbox.git.repo}
             branch={sandbox.git.branch}
+            commitSha={sandbox.git.commitSha}
           />
         </Item>
       )}

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/Git/Git.tsx

@@ -68,6 +68,7 @@ export const Git: FunctionComponent = () => {
           repo={originalGit.repo}
           url={githubRepoUrl(originalGit)}
           username={originalGit.username}
+          commitSha={originalGit.commitSha}
         />
       </Margin>
 

packages/common/src/components/GithubBadge/index.stories.tsx

@@ -10,12 +10,22 @@ stories
       username="CompuIves"
       repo="codesandbox-client"
       branch="master"
+      commitSha="9823ru9238ru8u998ur2398ru"
     />
   ))
   .add('Other Branch', () => (
     <GithubBadge
       username="CompuIves"
       repo="codesandbox-client"
       branch="storybook"
+      commitSha="9823ru9238ru8u998ur2398ru"
+    />
+  ))
+  .add('CommitSha', () => (
+    <GithubBadge
+      username="CompuIves"
+      repo="codesandbox-client"
+      branch="9823ru9238ru8u998ur2398ru"
+      commitSha="9823ru9238ru8u998ur2398ru"
     />
   ));

packages/common/src/components/GithubBadge/index.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useCallback } from 'react';
 import GithubIcon from 'react-icons/lib/go/mark-github';
 import { BorderRadius, Text, Icon, StyledA } from './elements';
 
@@ -7,6 +7,7 @@ type BadgeProps = {
   repo: string;
   url?: string;
   branch: string;
+  commitSha: string;
 };
 
 type DivOrAProps = {
@@ -26,19 +27,36 @@ const GithubBadge: FunctionComponent<BadgeProps> = ({
   repo,
   url,
   branch,
+  commitSha,
   ...props
-}) => (
-  <DivOrA {...props} href={url}>
-    <BorderRadius hasUrl={Boolean(url)}>
-      <Icon>
-        <GithubIcon />
-      </Icon>
-      <Text>
-        {username}/{repo}
-        {branch && branch !== 'master' ? `@${branch}` : ''}
-      </Text>
-    </BorderRadius>
-  </DivOrA>
-);
+}) => {
+  const getBadgeName = useCallback(() => {
+    if (branch === commitSha) {
+      return branch.substr(0, 7);
+    }
+
+    if (branch === 'master') {
+      return undefined;
+    }
+
+    return branch;
+  }, [branch, commitSha]);
+
+  const displayBranch = getBadgeName();
+
+  return (
+    <DivOrA {...props} href={url}>
+      <BorderRadius hasUrl={Boolean(url)}>
+        <Icon>
+          <GithubIcon />
+        </Icon>
+        <Text>
+          {username}/{repo}
+          {displayBranch ? `@${displayBranch}` : ''}
+        </Text>
+      </BorderRadius>
+    </DivOrA>
+  );
+};
 
 export default GithubBadge;

packages/homepage/src/screens/explore/SandboxModal.js

@@ -249,6 +249,7 @@ export default class SandboxModal extends React.PureComponent {
                         username={sandbox.git.username}
                         repo={sandbox.git.repo}
                         branch={sandbox.git.branch}
+                        commitSha={sandbox.git.commitSha}
                         url={githubRepoUrl(sandbox.git)}
                       />
                     )}