diff --git a/app/dashboard/e2e/assetsTableFeatures.spec.ts b/app/dashboard/e2e/assetsTableFeatures.spec.ts
index 36349a0e460a..eec21db13f33 100644
--- a/app/dashboard/e2e/assetsTableFeatures.spec.ts
+++ b/app/dashboard/e2e/assetsTableFeatures.spec.ts
@@ -50,7 +50,6 @@ test.test('extra columns should stick to top of scroll container', async ({ page
}
},
})
- await actions.reload({ page })
await actions.locateAccessedByProjectsColumnToggle(page).click()
await actions.locateAccessedDataColumnToggle(page).click()
diff --git a/app/dashboard/src/assets/credit_card.svg b/app/dashboard/src/assets/credit_card.svg
new file mode 100644
index 000000000000..6e51431751b1
--- /dev/null
+++ b/app/dashboard/src/assets/credit_card.svg
@@ -0,0 +1 @@
+
diff --git a/app/dashboard/src/components/AriaComponents/Button/Button.tsx b/app/dashboard/src/components/AriaComponents/Button/Button.tsx
index ea26c3efd928..775cb40637a0 100644
--- a/app/dashboard/src/components/AriaComponents/Button/Button.tsx
+++ b/app/dashboard/src/components/AriaComponents/Button/Button.tsx
@@ -59,7 +59,7 @@ export interface BaseButtonProps
* Handler that is called when the press is released over the target.
* If the handler returns a promise, the button will be in a loading state until the promise resolves.
*/
- readonly onPress?: (event: aria.PressEvent) => Promise | void
+ readonly onPress?: ((event: aria.PressEvent) => Promise | void) | null | undefined
readonly contentClassName?: string
readonly testId?: string
readonly isDisabled?: boolean
@@ -244,7 +244,7 @@ export const BUTTON_STYLES = twv.tv({
wrapper: 'relative block',
loader: 'absolute inset-0 flex items-center justify-center',
content: 'flex items-center gap-[0.5em]',
- text: 'inline-flex items-center justify-center gap-1',
+ text: 'inline-flex items-center justify-center gap-1 w-full',
icon: 'h-[1.906cap] w-[1.906cap] flex-none aspect-square flex items-center justify-center',
},
defaultVariants: {
@@ -364,7 +364,7 @@ export const Button = React.forwardRef(function Button(
const handlePress = (event: aria.PressEvent): void => {
if (!isDisabled) {
- const result = onPress(event)
+ const result = onPress?.(event)
if (result instanceof Promise) {
setImplicitlyLoading(true)
diff --git a/app/dashboard/src/components/AriaComponents/CopyBlock/CopyBlock.tsx b/app/dashboard/src/components/AriaComponents/CopyBlock/CopyBlock.tsx
index 4a79797f24a0..97b9b2aafd27 100644
--- a/app/dashboard/src/components/AriaComponents/CopyBlock/CopyBlock.tsx
+++ b/app/dashboard/src/components/AriaComponents/CopyBlock/CopyBlock.tsx
@@ -2,6 +2,10 @@
import * as React from 'react'
+import * as copyHook from '#/hooks/copyHooks'
+
+import * as textProvider from '#/providers/TextProvider'
+
import * as ariaComponents from '#/components/AriaComponents'
import * as twv from '#/utilities/tailwindVariants'
@@ -11,14 +15,16 @@ import * as twv from '#/utilities/tailwindVariants'
// =================
const COPY_BLOCK_STYLES = twv.tv({
- base: 'relative grid grid-cols-[minmax(0,_1fr)_auto] max-w-full bg-primary/10 items-center',
+ base: ariaComponents.TEXT_STYLE({
+ class: 'max-w-full bg-primary/5 border-primary/10',
+ }),
variants: {
size: {
- small: 'py-2 pl-2 pr-1',
- medium: 'py-3 pl-3 pr-2',
- large: 'py-4 pl-4 pr-2.5',
+ small: 'py-[1.5px] px-[5.5px]',
+ medium: 'py-[3.5px] px-[7.5px]',
+ large: 'py-[5.5px] px-[11.5px]',
},
- roundings: {
+ rounded: {
custom: '',
small: 'rounded-sm',
medium: 'rounded-md',
@@ -26,15 +32,8 @@ const COPY_BLOCK_STYLES = twv.tv({
full: 'rounded-full',
},
},
- slots: {
- titleBlock: 'col-span-1 text-sm text-primary/60',
- copyTextBlock: 'flex-auto text-sm text-primary/60 text-nowrap overflow-x-auto scroll-hidden',
- copyButton: 'flex-none',
- },
- defaultVariants: {
- size: 'medium',
- roundings: 'medium',
- },
+ slots: { copyTextBlock: 'flex-auto text-nowrap overflow-x-auto scroll-hidden w-full' },
+ defaultVariants: { size: 'medium', rounded: 'full' },
})
// =================
@@ -52,12 +51,21 @@ export interface CopyBlockProps {
/** A block of text with a copy button. */
export function CopyBlock(props: CopyBlockProps) {
const { copyText, className, onCopy = () => {} } = props
- const { copyTextBlock, base, copyButton } = COPY_BLOCK_STYLES()
+
+ const { getText } = textProvider.useText()
+ const { mutateAsync, isSuccess } = copyHook.useCopy({ copyText, onCopy })
+
+ const { copyTextBlock, base } = COPY_BLOCK_STYLES()
return (
-
+ mutateAsync()}
+ tooltip={isSuccess ? getText('copied') : getText('copy')}
+ className={base({ className })}
+ >
+ {copyText}
+
)
}
diff --git a/app/dashboard/src/components/Result.tsx b/app/dashboard/src/components/Result.tsx
index 405223864e0a..2ea69c7a01d7 100644
--- a/app/dashboard/src/components/Result.tsx
+++ b/app/dashboard/src/components/Result.tsx
@@ -35,7 +35,7 @@ const STATUS_ICON_MAP: Readonly> = {
}
const RESULT_STYLES = twv.tv({
- base: 'flex flex-col items-center justify-center px-6 py-4 text-center h-[max-content]',
+ base: 'flex flex-col items-center justify-center max-w-full px-6 py-4 text-center h-[max-content]',
variants: {
centered: {
horizontal: 'mx-auto',
diff --git a/app/dashboard/src/components/styled/SidebarTabButton.tsx b/app/dashboard/src/components/styled/SidebarTabButton.tsx
index 2ac673256cab..39da5adb9b04 100644
--- a/app/dashboard/src/components/styled/SidebarTabButton.tsx
+++ b/app/dashboard/src/components/styled/SidebarTabButton.tsx
@@ -1,7 +1,6 @@
/** @file A styled button representing a tab on a sidebar. */
import * as React from 'react'
-import type * as aria from '#/components/aria'
import * as ariaComponent from '#/components/AriaComponents'
// ========================
@@ -17,7 +16,7 @@ export interface SidebarTabButtonProps {
readonly active?: boolean
readonly icon: string
readonly label: string
- readonly onPress: (event: aria.PressEvent) => void
+ readonly onPress: ariaComponent.ButtonProps['onPress']
}
/** A styled button representing a tab on a sidebar. */
@@ -26,11 +25,12 @@ export default function SidebarTabButton(props: SidebarTabButtonProps) {
return (
diff --git a/app/dashboard/src/layouts/AssetProjectSession.tsx b/app/dashboard/src/layouts/AssetProjectSession.tsx
index 6279157f9636..afa80e6d1fec 100644
--- a/app/dashboard/src/layouts/AssetProjectSession.tsx
+++ b/app/dashboard/src/layouts/AssetProjectSession.tsx
@@ -42,6 +42,7 @@ export default function AssetProjectSession(props: AssetProjectSessionProps) {