feat: add support for custom initial tooltip in clipboard button

Author: arunjaindev

src/Assets/IconV2/ic-key.svg

@@ -31,6 +31,7 @@ import { ReactComponent as Check } from '../../Assets/Icon/ic-check.svg'
  */
 export const ClipboardButton = ({
     content,
+    initialTippyText = 'Copy',
     copiedTippyText = 'Copied!',
     duration = 1000,
     copyToClipboardPromise,
@@ -94,19 +95,17 @@ export const ClipboardButton = ({
     const iconClassName = `icon-dim-${iconSize} dc__no-shrink`
 
     return (
-        <Tooltip content="Copy" alwaysShowTippyOnHover={!copied}>
+        <Tooltip content={copied ? copiedTippyText : initialTippyText} alwaysShowTippyOnHover>
             {/* TODO: semantically buttons should not be nested; fix later */}
             <button
                 type="button"
                 className={`dc__outline-none-imp p-0 flex dc__transparent--unstyled dc__no-border ${rootClassName}`}
                 aria-label={`Copy ${content}`}
                 onClick={handleCopyContent}
             >
-                <Tooltip content={copiedTippyText} alwaysShowTippyOnHover visible={copied}>
-                    <div className="flex">
-                        {copied ? <Check className={iconClassName} /> : <ICCopy className={iconClassName} />}
-                    </div>
-                </Tooltip>
+                <div className="flex">
+                    {copied ? <Check className={iconClassName} /> : <ICCopy className={iconClassName} />}
+                </div>
             </button>
         </Tooltip>
     )

src/Common/ClipboardButton/ClipboardButton.tsx

@@ -16,6 +16,7 @@
 
 export default interface ClipboardProps {
     content: string
+    initialTippyText?: string
     copiedTippyText?: string
     duration?: number
     copyToClipboardPromise?: Promise<void>

src/Common/ClipboardButton/types.ts

@@ -101,12 +101,17 @@ export const DevtronLicenseCard = ({
                         </div>
                         <div className="flexbox-col dc__gap-2">
                             <div className="flexbox dc__align-items-center dc__gap-6">
-                                <Icon name="ic-key" color="N900" size={16} />
-                                <div className="flex dc__gap-4 cn-7 fs-16 fw-5 lh-1-5 cn-9 font-ibm-plex-mono">
+                                <div className="flex dc__gap-2 cn-7 fs-16 fw-5 lh-1-5 cn-9 font-ibm-plex-mono">
                                     <span>&bull;&bull;&bull;&bull;</span>
                                     <span>{licenseSuffix || licenseKey?.slice(-8)}</span>
                                 </div>
-                                {licenseKey && <ClipboardButton content={licenseKey} onClick={onCopyButtonClick} />}
+                                {licenseKey && (
+                                    <ClipboardButton
+                                        initialTippyText="Copy license key"
+                                        content={licenseKey}
+                                        onClick={onCopyButtonClick}
+                                    />
+                                )}
                             </div>
                             <div className="flexbox dc__align-items-center dc__gap-4 flex-wrap fs-12">
                                 <span className="font-ibm-plex-mono cn-9">{expiryDate}</span>

src/Shared/Components/DevtronLicenseCard/DevtronLicenseCard.tsx

@@ -58,7 +58,6 @@ import { ReactComponent as ICInfoFilled } from '@IconsV2/ic-info-filled.svg'
 import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg'
 import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
 import { ReactComponent as ICK8sJob } from '@IconsV2/ic-k8s-job.svg'
-import { ReactComponent as ICKey } from '@IconsV2/ic-key.svg'
 import { ReactComponent as ICLdap } from '@IconsV2/ic-ldap.svg'
 import { ReactComponent as ICLivspace } from '@IconsV2/ic-livspace.svg'
 import { ReactComponent as ICLoginDevtronLogo } from '@IconsV2/ic-login-devtron-logo.svg'
@@ -153,7 +152,6 @@ export const iconMap = {
     'ic-info-outline': ICInfoOutline,
     'ic-job-color': ICJobColor,
     'ic-k8s-job': ICK8sJob,
-    'ic-key': ICKey,
     'ic-ldap': ICLdap,
     'ic-livspace': ICLivspace,
     'ic-login-devtron-logo': ICLoginDevtronLogo,