From 77aaeb22c408c131d99cb16a511706f7d7e71ebb Mon Sep 17 00:00:00 2001
From: nicholas-codecov <nicholas.deschenes@sentry.io>
Date: Fri, 20 Sep 2024 15:36:10 -0300
Subject: [PATCH 1/2] set icon labels in CopyClipboard

---
 src/ui/CopyClipboard/CopyClipboard.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/CopyClipboard/CopyClipboard.tsx b/src/ui/CopyClipboard/CopyClipboard.tsx
index 718476369a..a46dbffd72 100644
--- a/src/ui/CopyClipboard/CopyClipboard.tsx
+++ b/src/ui/CopyClipboard/CopyClipboard.tsx
@@ -44,11 +44,11 @@ const CopyClipboard = React.forwardRef<HTMLButtonElement, CopyClipboardProps>(
       >
         {showSuccess ? (
           <div className="text-ds-primary-green">
-            <Icon name="check" />
+            <Icon name="check" label="check" />
           </div>
         ) : (
           <div className={cn(copyClipboard({ className, variant }))}>
-            <Icon name="clipboardCopy" />
+            <Icon name="clipboardCopy" label="clipboardCopy" />
           </div>
         )}
       </button>

From c18905a0746fc62f61b09d95963f1f6906aafe40 Mon Sep 17 00:00:00 2001
From: nicholas-codecov <nicholas.deschenes@sentry.io>
Date: Fri, 20 Sep 2024 15:36:41 -0300
Subject: [PATCH 2/2] refactor TokenWrapper to TS and migrate tests to vitest

---
 src/ui/TokenWrapper/TokenWrapper.spec.jsx     | 34 -------------------
 src/ui/TokenWrapper/TokenWrapper.stories.jsx  | 13 -------
 src/ui/TokenWrapper/TokenWrapper.stories.tsx  | 29 ++++++++++++++++
 src/ui/TokenWrapper/TokenWrapper.test.tsx     | 32 +++++++++++++++++
 .../{TokenWrapper.jsx => TokenWrapper.tsx}    | 24 +++++++++----
 src/ui/TokenWrapper/{index.js => index.ts}    |  0
 6 files changed, 78 insertions(+), 54 deletions(-)
 delete mode 100644 src/ui/TokenWrapper/TokenWrapper.spec.jsx
 delete mode 100644 src/ui/TokenWrapper/TokenWrapper.stories.jsx
 create mode 100644 src/ui/TokenWrapper/TokenWrapper.stories.tsx
 create mode 100644 src/ui/TokenWrapper/TokenWrapper.test.tsx
 rename src/ui/TokenWrapper/{TokenWrapper.jsx => TokenWrapper.tsx} (53%)
 rename src/ui/TokenWrapper/{index.js => index.ts} (100%)

diff --git a/src/ui/TokenWrapper/TokenWrapper.spec.jsx b/src/ui/TokenWrapper/TokenWrapper.spec.jsx
deleted file mode 100644
index 3a4e5c9027..0000000000
--- a/src/ui/TokenWrapper/TokenWrapper.spec.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { render, screen } from '@testing-library/react'
-
-import TokenWrapper from './TokenWrapper'
-
-describe('TokenWrapper', () => {
-  function setup({ truncate = false, token }) {
-    render(<TokenWrapper token={token} truncate={truncate} />)
-  }
-
-  describe('public scope', () => {
-    beforeEach(() => {
-      setup({ token: 'randomToken' })
-    })
-    it('renders the token', () => {
-      expect(screen.getByText(/randomToken/)).toBeInTheDocument()
-    })
-    it('renders a copy button', () => {
-      expect(screen.getByText(/clipboard-copy.svg/)).toBeInTheDocument()
-    })
-  })
-
-  describe('public scope with truncated token', () => {
-    beforeEach(() => {
-      setup({
-        token:
-          'Nostrud tempor irure id consequat cupidatat exercitation ex mollit.',
-        truncate: true,
-      })
-    })
-    it('renders truncated token', () => {
-      expect(screen.getByText(/Nostrud tempor .../)).toBeInTheDocument()
-    })
-  })
-})
diff --git a/src/ui/TokenWrapper/TokenWrapper.stories.jsx b/src/ui/TokenWrapper/TokenWrapper.stories.jsx
deleted file mode 100644
index 2da2ed8f47..0000000000
--- a/src/ui/TokenWrapper/TokenWrapper.stories.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import TokenWrapper from './TokenWrapper'
-
-const Template = (args) => <TokenWrapper {...args} />
-
-export const TokenModel = Template.bind({})
-TokenModel.args = {
-  token: 'randomTokenCopyMe',
-}
-
-export default {
-  title: 'Components/TokenWrapper',
-  component: TokenWrapper,
-}
diff --git a/src/ui/TokenWrapper/TokenWrapper.stories.tsx b/src/ui/TokenWrapper/TokenWrapper.stories.tsx
new file mode 100644
index 0000000000..89c9a07749
--- /dev/null
+++ b/src/ui/TokenWrapper/TokenWrapper.stories.tsx
@@ -0,0 +1,29 @@
+import { type Meta, type StoryObj } from '@storybook/react'
+
+import TokenWrapper from './TokenWrapper'
+
+const meta: Meta<typeof TokenWrapper> = {
+  title: 'Components/TokenWrapper',
+  component: TokenWrapper,
+  argTypes: {
+    truncate: {
+      description: 'Truncate the token',
+      control: 'boolean',
+    },
+    token: {
+      description: 'The token to be displayed',
+      control: 'text',
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof TokenWrapper>
+
+export const Default: Story = {
+  render: (args) => <TokenWrapper {...args} />,
+  args: {
+    token: 'randomTokenCopyMe',
+  },
+}
diff --git a/src/ui/TokenWrapper/TokenWrapper.test.tsx b/src/ui/TokenWrapper/TokenWrapper.test.tsx
new file mode 100644
index 0000000000..f0c6178a0b
--- /dev/null
+++ b/src/ui/TokenWrapper/TokenWrapper.test.tsx
@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+
+import TokenWrapper from './TokenWrapper'
+
+describe('TokenWrapper', () => {
+  describe('public scope', () => {
+    it('renders the token', () => {
+      render(<TokenWrapper token="randomToken" />)
+
+      const token = screen.getByText(/randomToken/)
+      expect(token).toBeInTheDocument()
+    })
+
+    it('renders a copy button', () => {
+      render(<TokenWrapper token="randomToken" />)
+
+      const copyButton = screen.getByTestId('clipboardCopy')
+      expect(copyButton).toBeInTheDocument()
+    })
+  })
+
+  describe('public scope with truncated token', () => {
+    it('renders truncated token', () => {
+      const token =
+        'Nostrud tempor irure id consequat cupidatat exercitation ex mollit.'
+      render(<TokenWrapper token={token} truncate={true} />)
+
+      const text = screen.getByText(/Nostrud tempor .../)
+      expect(text).toBeInTheDocument()
+    })
+  })
+})
diff --git a/src/ui/TokenWrapper/TokenWrapper.jsx b/src/ui/TokenWrapper/TokenWrapper.tsx
similarity index 53%
rename from src/ui/TokenWrapper/TokenWrapper.jsx
rename to src/ui/TokenWrapper/TokenWrapper.tsx
index 53276959e4..1fd74bfcb6 100644
--- a/src/ui/TokenWrapper/TokenWrapper.jsx
+++ b/src/ui/TokenWrapper/TokenWrapper.tsx
@@ -1,17 +1,27 @@
-import cs from 'classnames'
 import PropTypes from 'prop-types'
 
+import { cn } from 'shared/utils/cn'
 import { CopyClipboard } from 'ui/CopyClipboard'
 
-const TokenWrapper = ({ token, onClick, truncate = false, encodedToken }) => {
+interface TokenWrapperProps {
+  token: string
+  onClick?: React.ComponentProps<typeof CopyClipboard>['onClick']
+  truncate?: boolean
+  encodedToken?: string
+}
+
+const TokenWrapper = ({
+  token,
+  onClick,
+  truncate = false,
+  encodedToken,
+}: TokenWrapperProps) => {
   return (
     <div className="flex flex-row gap-1 overflow-auto">
       <pre
-        className={cs(
-          'font-mono bg-ds-gray-secondary text-ds-gray-octonary h-auto whitespace-pre-line',
-          {
-            'line-clamp-1': truncate,
-          }
+        className={cn(
+          'h-auto whitespace-pre-line bg-ds-gray-secondary font-mono text-ds-gray-octonary',
+          truncate && 'line-clamp-1'
         )}
       >
         {encodedToken ? encodedToken : token}
diff --git a/src/ui/TokenWrapper/index.js b/src/ui/TokenWrapper/index.ts
similarity index 100%
rename from src/ui/TokenWrapper/index.js
rename to src/ui/TokenWrapper/index.ts