From 0f5bce40afec10ed06a692e7ea174acb15b681e6 Mon Sep 17 00:00:00 2001
From: Sergio Padrino <sergio.padrino@gmail.com>
Date: Fri, 2 Feb 2024 14:08:37 +0100
Subject: [PATCH] Replace sha tooltips with copy buttons in submodule diffs

---
 app/src/ui/diff/submodule-diff.tsx         | 26 ++++++++++++++++------
 app/styles/ui/changes/_submodule-diff.scss | 18 +++++++++++++++
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/app/src/ui/diff/submodule-diff.tsx b/app/src/ui/diff/submodule-diff.tsx
index 7640cfe99cc..ec6a1f04e46 100644
--- 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,8 +110,8 @@ 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) {
@@ -117,7 +119,7 @@ export class SubmoduleDiff extends React.Component<ISubmoduleDiffProps> {
         { 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) {
@@ -125,7 +127,7 @@ export class SubmoduleDiff extends React.Component<ISubmoduleDiffProps> {
         { octicon: OcticonSymbol.diffRemoved, className: 'removed-icon' },
         <>
           This submodule {verb} removed while it was pointing at commit{' '}
-          {this.renderTooltippedCommitSHA(oldSHA)}.{suffix}
+          {this.renderCommitSHA(oldSHA)}.{suffix}
         </>
       )
     }
@@ -133,8 +135,18 @@ export class SubmoduleDiff extends React.Component<ISubmoduleDiffProps> {
     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
index 991b05f3fd8..9bbe2c89b76 100644
--- 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);
+    }
+  }
 }