From 0ae240588fbdd96e6fd5caaff1e92e8df29dcc28 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Sat, 1 Mar 2025 02:30:51 +0530
Subject: [PATCH 1/3] Chore(ClipboardCopy): add tooltip to play icon

---
 ...dCopyInlineCompactWithAdditionalAction.tsx | 43 ++++++++++++-------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx
index 6b9263fd014..3582851dd87 100644
--- a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx
+++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx
@@ -1,18 +1,31 @@
 import React from 'react';
-import { ClipboardCopy, ClipboardCopyAction, Button } from '@patternfly/react-core';
+import { ClipboardCopy, ClipboardCopyAction, Button, Tooltip } from '@patternfly/react-core';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
-export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => (
-  <ClipboardCopy
-    hoverTip="Copy"
-    clickTip="Copied"
-    variant="inline-compact"
-    additionalActions={
-      <ClipboardCopyAction>
-        <Button variant="plain" hasNoPadding aria-label="Run in web terminal" icon={<PlayIcon />} />
-      </ClipboardCopyAction>
-    }
-  >
-    2.3.4-2-redhat
-  </ClipboardCopy>
-);
+export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => {
+  const [showSuccessContent, setShowSuccessContent] = React.useState(false);
+  const runText: string = 'Run in web terminal';
+  const doneRunText: string = 'Running in web terminal';
+  return (
+    <ClipboardCopy
+      hoverTip="Copy"
+      clickTip="Copied"
+      variant="inline-compact"
+      additionalActions={
+        <ClipboardCopyAction>
+          <Tooltip aria="none" aria-live="polite" content={showSuccessContent ? doneRunText : runText}>
+            <Button
+              variant="plain"
+              hasNoPadding
+              aria-label="Run in web terminal"
+              icon={<PlayIcon />}
+              onClick={() => setShowSuccessContent(!showSuccessContent)}
+            />
+          </Tooltip>
+        </ClipboardCopyAction>
+      }
+    >
+      2.3.4-2-redhat
+    </ClipboardCopy>
+  );
+};

From 668227de1a7cfe97ef4675c41965d9c0b30fa76f Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Mon, 3 Mar 2025 19:53:38 +0530
Subject: [PATCH 2/3] renamed state variable and added a callback

---
 ...ClipboardCopyInlineCompactWithAdditionalAction.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx
index 3582851dd87..9714cfc9cf4 100644
--- a/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx
+++ b/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx
@@ -3,7 +3,7 @@ import { ClipboardCopy, ClipboardCopyAction, Button, Tooltip } from '@patternfly
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => {
-  const [showSuccessContent, setShowSuccessContent] = React.useState(false);
+  const [isRunning, setisRunning] = React.useState(false);
   const runText: string = 'Run in web terminal';
   const doneRunText: string = 'Running in web terminal';
   return (
@@ -13,13 +13,18 @@ export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionCompo
       variant="inline-compact"
       additionalActions={
         <ClipboardCopyAction>
-          <Tooltip aria="none" aria-live="polite" content={showSuccessContent ? doneRunText : runText}>
+          <Tooltip
+            aria="none"
+            aria-live="polite"
+            content={isRunning ? doneRunText : runText}
+            onTooltipHidden={() => setisRunning(false)}
+          >
             <Button
               variant="plain"
               hasNoPadding
               aria-label="Run in web terminal"
               icon={<PlayIcon />}
-              onClick={() => setShowSuccessContent(!showSuccessContent)}
+              onClick={() => setisRunning(!isRunning)}
             />
           </Tooltip>
         </ClipboardCopyAction>

From 14c0bb37e8abdd8476e027496fd3be8e6de9bb40 Mon Sep 17 00:00:00 2001
From: Divyanshu Gupta <divyanshugupta585@gmail.com>
Date: Tue, 4 Mar 2025 00:30:17 +0530
Subject: [PATCH 3/3] added tooltip to code block examples

---
 .../CodeBlock/examples/CodeBlockBasic.tsx     | 26 +++++++++++++++++--
 .../examples/CodeBlockExpandable.tsx          | 20 ++++++++++++--
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx b/packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx
index 3b3e47dded2..294cff82969 100644
--- a/packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx
+++ b/packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx
@@ -1,9 +1,19 @@
 import React from 'react';
-import { CodeBlock, CodeBlockAction, CodeBlockCode, ClipboardCopyButton, Button } from '@patternfly/react-core';
+import {
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  ClipboardCopyButton,
+  Button,
+  Tooltip
+} from '@patternfly/react-core';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 export const BasicCodeBlock: React.FunctionComponent = () => {
   const [copied, setCopied] = React.useState(false);
+  const [isRunning, setisRunning] = React.useState(false);
+  const runText: string = 'Run in web terminal';
+  const doneRunText: string = 'Running in web terminal';
 
   const clipboardCopyFunc = (event, text) => {
     navigator.clipboard.writeText(text.toString());
@@ -39,7 +49,19 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
         </ClipboardCopyButton>
       </CodeBlockAction>
       <CodeBlockAction>
-        <Button variant="plain" aria-label="Play icon" icon={<PlayIcon />} />
+        <Tooltip
+          aria="none"
+          aria-live="polite"
+          content={isRunning ? doneRunText : runText}
+          onTooltipHidden={() => setisRunning(false)}
+        >
+          <Button
+            variant="plain"
+            aria-label="Run in web terminal"
+            icon={<PlayIcon />}
+            onClick={() => setisRunning(!isRunning)}
+          />
+        </Tooltip>
       </CodeBlockAction>
     </React.Fragment>
   );
diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx b/packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx
index 7044e04ef61..d4c9851751a 100644
--- a/packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx
+++ b/packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx
@@ -6,13 +6,17 @@ import {
   ClipboardCopyButton,
   ExpandableSection,
   ExpandableSectionToggle,
-  Button
+  Button,
+  Tooltip
 } from '@patternfly/react-core';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 export const ExpandableCodeBlock: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [copied, setCopied] = React.useState(false);
+  const [isRunning, setisRunning] = React.useState(false);
+  const runText: string = 'Run in web terminal';
+  const doneRunText: string = 'Running in web terminal';
 
   const onToggle = (isExpanded) => {
     setIsExpanded(isExpanded);
@@ -60,7 +64,19 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
         </ClipboardCopyButton>
       </CodeBlockAction>
       <CodeBlockAction>
-        <Button variant="plain" aria-label="Play icon" icon={<PlayIcon />} />
+        <Tooltip
+          aria="none"
+          aria-live="polite"
+          content={isRunning ? doneRunText : runText}
+          onTooltipHidden={() => setisRunning(false)}
+        >
+          <Button
+            variant="plain"
+            aria-label="Run in web terminal"
+            icon={<PlayIcon />}
+            onClick={() => setisRunning(!isRunning)}
+          />
+        </Tooltip>
       </CodeBlockAction>
     </React.Fragment>
   );