Merge pull request desktop#18124 from desktop/submodule-sha-copy

Replace SHA tooltips with copy buttons in submodule diffs
shiftkey · Feb 2, 2024 · 6858fce · 6858fce
2 parents ecb68b6 + 0f5bce4
commit 6858fce
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/app/src/ui/diff/submodule-diff.tsx b/app/src/ui/diff/submodule-diff.tsx
@@ -2,10 +2,12 @@ import React from 'react'
 import { parseRepositoryIdentifier } from '../../lib/remote-parsing'
 import { ISubmoduleDiff } from '../../models/diff'
 import { LinkButton } from '../lib/link-button'
-import { TooltippedCommitSHA } from '../lib/tooltipped-commit-sha'
 import { Octicon } from '../octicons'
 import * as OcticonSymbol from '../octicons/octicons.generated'
 import { SuggestedAction } from '../suggested-actions'
+import { Ref } from '../lib/ref'
+import { CopyButton } from '../copy-button'
+import { shortenSHA } from '../../models/commit'
 
 type SubmoduleItemIcon =
   | {
@@ -108,33 +110,43 @@ export class SubmoduleDiff extends React.Component<ISubmoduleDiffProps> {
         { octicon: OcticonSymbol.diffModified, className: 'modified-icon' },
         <>
           This submodule changed its commit from{' '}
-          {this.renderTooltippedCommitSHA(oldSHA)} to{' '}
-          {this.renderTooltippedCommitSHA(newSHA)}.{suffix}
+          {this.renderCommitSHA(oldSHA, 'previous')} to{' '}
+          {this.renderCommitSHA(newSHA, 'new')}.{suffix}
         </>
       )
     } else if (oldSHA === null && newSHA !== null) {
       return this.renderSubmoduleDiffItem(
         { octicon: OcticonSymbol.diffAdded, className: 'added-icon' },
         <>
           This submodule {verb} added pointing at commit{' '}
-          {this.renderTooltippedCommitSHA(newSHA)}.{suffix}
+          {this.renderCommitSHA(newSHA)}.{suffix}
         </>
       )
     } else if (oldSHA !== null && newSHA === null) {
       return this.renderSubmoduleDiffItem(
         { octicon: OcticonSymbol.diffRemoved, className: 'removed-icon' },
         <>
           This submodule {verb} removed while it was pointing at commit{' '}
-          {this.renderTooltippedCommitSHA(oldSHA)}.{suffix}
+          {this.renderCommitSHA(oldSHA)}.{suffix}
         </>
       )
     }
 
     return null
   }
 
-  private renderTooltippedCommitSHA(sha: string) {
-    return <TooltippedCommitSHA commit={sha} asRef={true} />
+  private renderCommitSHA(sha: string, which?: 'previous' | 'new') {
+    const whichInfix = which === undefined ? '' : ` ${which}`
+
+    return (
+      <>
+        <Ref>{shortenSHA(sha)}</Ref>
+        <CopyButton
+          ariaLabel={`Copy the full${whichInfix} SHA`}
+          copyContent={sha}
+        />
+      </>
+    )
   }
 
   private renderSubmodulesChangesInfo() {

diff --git a/app/styles/ui/changes/_submodule-diff.scss b/app/styles/ui/changes/_submodule-diff.scss
@@ -36,4 +36,22 @@
       }
     }
   }
+
+  .copy-button {
+    // Removing default button styles
+    background: transparent;
+    border: none;
+    padding: 0;
+    height: auto;
+    min-width: 16px;
+
+    .octicon {
+      // Reverting margin-top change from .item .octicon
+      margin-top: revert;
+    }
+
+    :hover {
+      color: var(--text-secondary-color);
+    }
+  }
 }