update permission e2e

e2e/specs/stateful/profile.spec.ts

@@ -65,10 +65,12 @@ const profiles = [
       {
         type: 'manager',
         value: 'wrapmebaby.eth',
+        address: '0xFc5958B4B6F9a06D21E06429c8833f865577acf0',
       },
       {
         type: 'owner',
         value: 'wrapmebaby.eth',
+        address: '0xFc5958B4B6F9a06D21E06429c8833f865577acf0',
       },
     ],
     expiry: 'May 30, 2037',
@@ -208,18 +210,24 @@ test.describe('Profile', () => {
       }
 
       // should show details in more tab
-      await page.getByTestId('more-tab').click()
+      await page.getByTestId('ownership-tab').click()
+      for (const owner of profile.owners) {
+        await expect(
+          page.getByTestId(`role-row-${owner.address}`).getByTestId(`role-tag-${owner.type}`),
+        ).toBeVisible()
+        await expect(page.getByTestId(`role-row-${owner.address}`)).toContainText(owner.value)
+      }
 
       // should have view link for registration transaction
-      await page.getByTestId('more-tab').click()
+      await page.getByTestId('ownership-tab').click()
       await expect(page.getByTestId('etherscan-registration-link')).toHaveAttribute(
         'href',
         /https:\/\/goerli\.etherscan\.io\/tx\/0x[a-fA-F0-9]{64}/,
       )
 
       // should show the expiry of the name if available
       if (profile.expiry) {
-        await expect(page.getByTestId('expiry-data')).toContainText(profile.expiry)
+        await expect(page.getByTestId('expiry-panel-expiry')).toContainText(profile.expiry)
       }
     })
   }

e2e/specs/stateless/permissions.spec.ts

@@ -41,15 +41,18 @@ test.describe('Permissions', () => {
       owner: 'user',
     })
 
+    const ownershipPage = makePageObject('OwnershipPage')
     const subnamesPage = makePageObject('SubnamesPage')
     await subnamesPage.goto(name)
 
     await login.connect()
     await expect(subnamesPage.getAddSubnameButton).toBeVisible()
 
+    await ownershipPage.goto(name)
+    await expect(ownershipPage.sendNameButton).toBeVisible()
+
     const morePage = makePageObject('MorePage')
     await morePage.goto(name)
-    await expect(morePage.getSendNameButton).toBeVisible()
     await expect(morePage.editResolverButton).toBeVisible()
 
     const permissionsPage = makePageObject('PermissionsPage')
@@ -90,8 +93,10 @@ test.describe('Permissions', () => {
     await subnamesPage.goto(name)
     await expect(subnamesPage.getDisabledAddSubnameButton).toBeVisible()
 
+    await ownershipPage.goto(name)
+    await expect(ownershipPage.disabledSendNameButton).toBeVisible()
+
     await morePage.goto(name)
-    await expect(morePage.getDisabledSendNameButton).toBeVisible()
     await expect(morePage.disabledEditResolverButton).toBeVisible()
   })
 
@@ -113,7 +118,7 @@ test.describe('Permissions', () => {
     })
 
     const subname = `test.${name}`
-
+    const ownershipPage = makePageObject('OwnershipPage')
     const profilePage = makePageObject('ProfilePage')
     await profilePage.goto(subname)
 
@@ -127,8 +132,10 @@ test.describe('Permissions', () => {
 
     const morePage = makePageObject('MorePage')
     await morePage.goto(subname)
-    await expect(morePage.getSendNameButton).toBeVisible()
     await expect(morePage.editResolverButton).toHaveCount(0)
+
+    ownershipPage.goto(subname)
+    await expect(ownershipPage.sendNameButton).toBeVisible()
   })
 
   test('should show correct buttons for managing subname (Name owner settings)', async ({
@@ -150,6 +157,7 @@ test.describe('Permissions', () => {
 
     const subname = `test.${name}`
 
+    const ownershipPage = makePageObject('OwnershipPage')
     const profilePage = makePageObject('ProfilePage')
     await profilePage.goto(subname)
 
@@ -163,8 +171,10 @@ test.describe('Permissions', () => {
 
     const morePage = makePageObject('MorePage')
     await morePage.goto(subname)
-    await expect(morePage.getSendNameButton).toBeVisible()
     await expect(morePage.editResolverButton).toBeVisible()
+
+    await ownershipPage.goto(subname)
+    await expect(ownershipPage.sendNameButton).toBeVisible()
   })
 
   test('should allow parent owner to extend expiry', async ({

playwright/pageObjects/ownershipPage.ts

@@ -10,6 +10,8 @@ export class OwnershipPage {
 
   readonly sendNameButton: Locator
 
+  readonly disabledSendNameButton: Locator
+
   readonly sendDNSButton: Locator
 
   readonly refreshDNSButton: Locator
@@ -22,6 +24,7 @@ export class OwnershipPage {
     this.page = page
     this.editRolesButton = this.page.getByTestId('role-action-edit-roles')
     this.sendNameButton = this.page.getByTestId('role-action-send-name')
+    this.disabledSendNameButton = this.page.getByTestId('send-name-disabled-button')
     this.sendDNSButton = this.page.getByTestId('role-action-send-dns')
     this.syncManagerButton = this.page.getByTestId('role-action-sync-manager')
     this.refreshDNSButton = this.page.getByTestId('role-action-refresh-dns')

src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/RolesSection.tsx

@@ -1,9 +1,11 @@
+import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
 import { Button, Card } from '@ensdomains/thorin'
 
 import { cacheableComponentStyles } from '@app/components/@atoms/CacheableComponent'
 import { PseudoActionButton } from '@app/components/@atoms/PseudoActionButton/PseudoActionButton'
+import { DisabledButtonWithTooltip } from '@app/components/@molecules/DisabledButtonWithTooltip'
 import type { GroupedRoleRecord } from '@app/hooks/ownership/useRoles/useRoles'
 import type { useNameDetails } from '@app/hooks/useNameDetails'
 
@@ -31,6 +33,7 @@ type Props = {
 }
 
 export const RolesSection = ({ name, roles, details }: Props) => {
+  const { t } = useTranslation('profile')
   const actions = useRoleActions({ name, details, roles })
 
   const isCached = details.basicIsCachedData
@@ -48,7 +51,7 @@ export const RolesSection = ({ name, roles, details }: Props) => {
         />
       ))}
       <Footer>
-        {actions.data?.map(({ label, type, primary, icon, disabled = false, onClick }) => {
+        {actions.data?.map(({ label, type, primary, icon, error, disabled = false, onClick }) => {
           if (type === 'refresh-dns')
             return (
               <div key={type}>
@@ -63,6 +66,20 @@ export const RolesSection = ({ name, roles, details }: Props) => {
                 </PseudoActionButton>
               </div>
             )
+          if (error)
+            return (
+              <div>
+                <DisabledButtonWithTooltip
+                  content={t(`errors.${error}`)}
+                  buttonId="send-name-disabled-button"
+                  buttonText={label}
+                  mobileWidth={150}
+                  mobileButtonWidth="initial"
+                  prefix={icon}
+                  size="medium"
+                />
+              </div>
+            )
           return (
             <div key={type}>
               <Button

src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/hooks/useRoleActions.tsx

@@ -25,6 +25,7 @@ type Action = Omit<DropdownItemObject, 'onClick' | 'icon'> & {
   primary?: boolean
   icon: ReactNodeNoStrings
   type: string
+  error?: string
   onClick?: () => void
 }
 
@@ -52,8 +53,10 @@ export const useRoleActions = ({ name, roles, details }: Props) => {
   const data = useMemo(() => {
     if (isLoading) return undefined
     const canSend = checkCanSend({ abilities: abilities.data, nameType: nameType.data })
-    const canSendDNS = canSend && name && !name.endsWith('.eth')
-    const canSendEth = canSend && name && name.endsWith('.eth')
+    const { canSendError } = abilities.data
+    const showSend = canSend || !!canSendError
+    const showSendDNS = showSend && name && !name.endsWith('.eth')
+    const showSendEth = showSend && name && name.endsWith('.eth')
     const canRefreshDNS = !!account.address && name && !name.endsWith('.eth')
     const showSyncManager = checkCanSyncManager({
       address: account.address,
@@ -65,11 +68,12 @@ export const useRoleActions = ({ name, roles, details }: Props) => {
     const availableRoles = getAvailableRoles({ roles, abilities: abilities.data })
     const canEditRoles = availableRoles.length > 0
     return [
-      canSendDNS
+      showSendDNS
         ? {
             type: 'send-dns',
             icon: <AeroplaneSVG />,
             label: t('action.send'),
+            error: canSendError,
             onClick: () => showSendNameInput(`send-name-${name}`, { name }),
           }
         : null,
@@ -93,11 +97,12 @@ export const useRoleActions = ({ name, roles, details }: Props) => {
               }),
           }
         : null,
-      canSendEth
+      showSendEth
         ? {
             type: 'send-name',
             icon: <AeroplaneSVG />,
             label: t('action.send'),
+            error: canSendError,
             onClick: () => showSendNameInput(`send-name-${name}`, { name }),
           }
         : null,