[UI] Ensure consistency of Commit element across screens (#392)

web/src/components/CommitInfo/CommitInfo.tsx

@@ -4,7 +4,6 @@ import {
   FlexExpander,
   Layout,
   Text,
-  StringSubstitute,
   ButtonSize,
   ButtonVariation,
   Avatar
@@ -16,6 +15,7 @@ import { useGet } from 'restful-react'
 import { useAppContext } from 'AppContext'
 import { useStrings } from 'framework/strings'
 import type { TypesCommit, TypesRepository, TypesSignature } from 'services/code'
+import { CommitActions } from 'components/CommitActions/CommitActions'
 import { LIST_FETCHING_LIMIT, formatDate } from 'utils/Utils'
 import css from './CommitInfo.module.scss'
 
@@ -33,6 +33,11 @@ const CommitInfo = (props: { repoMetadata: TypesRepository; commitRef: string })
     lazy: !repoMetadata
   })
 
+  const commitURL = routes.toCODECommit({
+    repoPath: repoMetadata.path as string,
+    commitRef: commitRef
+  })
+
   const commitData = useMemo(() => {
     return commits?.commits?.filter(commit => commit.sha === commitRef)
   }, [commitRef, commits?.commits])
@@ -81,19 +86,7 @@ const CommitInfo = (props: { repoMetadata: TypesRepository; commitRef: string })
                 })}
               </Text>
               <FlexExpander />
-              <Text className={css.infoText} flex>
+              <CommitActions sha={commitRef} href={commitURL} enableCopy />
-                <StringSubstitute
-                  str={getString('commitString')}
-                  vars={{
-                    commit: (
-                      <Text
-                        className={css.infoText}
-                        padding={{ left: 'small' }}
-                        color={'black'}>{` ${commitRef.substring(0, 6)}`}</Text>
-                    )
-                  }}
-                />
-              </Text>
             </Layout.Horizontal>
           </Container>
         </Container>

web/src/components/LatestCommit/LatestCommit.tsx

@@ -40,7 +40,7 @@ export function LatestCommitForFolder({ repoMetadata, latestCommit, standaloneSt
             </Text>
           </Link>
           <FlexExpander />
-          <CommitActions sha={latestCommit?.sha as string} href={commitURL} />
+          <CommitActions sha={latestCommit?.sha as string} href={commitURL} enableCopy />
           <Text font={{ variation: FontVariation.SMALL }} color={Color.GREY_400} className={css.time}>
             <ReactTimeago date={latestCommit?.author?.when as string} />
           </Text>
@@ -86,7 +86,7 @@ export function LatestCommitForFile({ repoMetadata, latestCommit, standaloneStyl
           )}
 
           <FlexExpander />
-          <CommitActions sha={latestCommit?.sha as string} href={commitURL} />
+          <CommitActions sha={latestCommit?.sha as string} href={commitURL} enableCopy />
         </Layout.Horizontal>
       </Container>
     </Render>

web/src/pages/RepositoryBranches/RepositoryBranchesContent/BranchesContent/BranchesContent.tsx

@@ -14,6 +14,7 @@ import type {
   RepoCommitDivergence,
   TypesRepository
 } from 'services/code'
+import { CommitActions } from 'components/CommitActions/CommitActions'
 import { formatDate, getErrorMessage } from 'utils/Utils'
 import { useConfirmAction } from 'hooks/useConfirmAction'
 import { OptionsMenuButton } from 'components/OptionsMenuButton/OptionsMenuButton'
@@ -98,6 +99,23 @@ export function BranchesContent({ repoMetadata, searchTerm = '', branches, onDel
           )
         }
       },
+      {
+        Header: getString('commit'),
+        Id: 'commit',
+        width: '15%',
+        Cell: ({ row }: CellProps<RepoBranch>) => {
+          return (
+            <CommitActions
+              sha={row.original.commit?.sha as string}
+              href={routes.toCODECommit({
+                repoPath: repoMetadata.path as string,
+                commitRef: row.original.commit?.sha as string
+              })}
+              enableCopy
+            />
+          )
+        }
+      },
       {
         Header: getString('updated'),
         width: '200px',