From c82491d2cf4c9572358ba7bc40551f72bb41bd4d Mon Sep 17 00:00:00 2001
From: Ashley McEntee <123661468+ashley-o0o@users.noreply.github.com>
Date: Thu, 21 Nov 2024 11:23:29 -0500
Subject: [PATCH] Change token secret to have middle truncation

---
 .../src/components/InlineTruncatedClipboardCopy.tsx   | 10 ++++++++--
 .../ModelMeshSection/ServingRuntimeTokenDisplay.tsx   | 11 +++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/InlineTruncatedClipboardCopy.tsx b/frontend/src/components/InlineTruncatedClipboardCopy.tsx
index 4b19fb448a..8e9de80e7a 100644
--- a/frontend/src/components/InlineTruncatedClipboardCopy.tsx
+++ b/frontend/src/components/InlineTruncatedClipboardCopy.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 
 type Props = {
   textToCopy: string;
+  truncatePosition?: 'start' | 'middle' | 'end';
   testId?: string;
   maxWidth?: number;
 };
@@ -12,7 +13,12 @@ type Props = {
  * https://github.com/patternfly/patternfly-react/issues/10890
  **/
 
-const InlineTruncatedClipboardCopy: React.FC<Props> = ({ textToCopy, testId, maxWidth }) => (
+const InlineTruncatedClipboardCopy: React.FC<Props> = ({
+  textToCopy,
+  testId,
+  maxWidth,
+  truncatePosition,
+}) => (
   <ClipboardCopy
     variant="inline-compact"
     style={{ display: 'inline-flex', maxWidth }}
@@ -23,7 +29,7 @@ const InlineTruncatedClipboardCopy: React.FC<Props> = ({ textToCopy, testId, max
     }}
     data-testid={testId}
   >
-    <Truncate content={textToCopy} />
+    <Truncate content={textToCopy} position={truncatePosition} />
   </ClipboardCopy>
 );
 
diff --git a/frontend/src/pages/modelServing/screens/projects/ModelMeshSection/ServingRuntimeTokenDisplay.tsx b/frontend/src/pages/modelServing/screens/projects/ModelMeshSection/ServingRuntimeTokenDisplay.tsx
index d1e6be2264..19271a1614 100644
--- a/frontend/src/pages/modelServing/screens/projects/ModelMeshSection/ServingRuntimeTokenDisplay.tsx
+++ b/frontend/src/pages/modelServing/screens/projects/ModelMeshSection/ServingRuntimeTokenDisplay.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { ClipboardCopy, HelperText, HelperTextItem, Skeleton } from '@patternfly/react-core';
+import { HelperText, HelperTextItem, Skeleton } from '@patternfly/react-core';
 import { SecretKind } from '~/k8sTypes';
+import InlineTruncatedClipboardCopy from '~/components/InlineTruncatedClipboardCopy';
 
 type ServingRuntimeTokenDisplayProps = {
   token: SecretKind;
@@ -27,7 +28,13 @@ const ServingRuntimeTokenDisplay: React.FC<ServingRuntimeTokenDisplayProps> = ({
     );
   }
 
-  return <ClipboardCopy isReadOnly>{atob(token.data.token)}</ClipboardCopy>;
+  return (
+    <InlineTruncatedClipboardCopy
+      testId="token-secret"
+      textToCopy={atob(token.data.token)}
+      truncatePosition="middle"
+    />
+  );
 };
 
 export default ServingRuntimeTokenDisplay;