FET-1619 If tab specified in query string doesn't exist, app crashes. Should redirect to profile tab

e2e/specs/stateless/profileEditor.spec.ts

@@ -104,6 +104,36 @@ test.describe('profile', () => {
     await expect(profilePage.record('text', 'email')).toHaveText('[email protected]')
     await expect(profilePage.contentHash()).toContainText('ipfs://bafybeic...')
   })
+
+  test('should redirect to profile tab if tab specified in query string does not exist', async ({
+    page,
+    login,
+    makeName,
+    makePageObject,
+  }) => {
+    const name = await makeName({
+      label: 'profile',
+      type: 'legacy',
+      records: await makeRecords(),
+    })
+
+    const profilePage = makePageObject('ProfilePage')
+
+    await profilePage.goto(name)
+    await login.connect()
+
+    await page.goto(`/${name}?tab=customTab`)
+
+    await expect(page).toHaveURL(`/${name}`)
+
+    await page.pause()
+    await expect(profilePage.record('text', 'description')).toHaveText('Hello2')
+    await expect(profilePage.record('text', 'url')).toHaveText('twitter.com')
+    await expect(profilePage.record('address', 'btc')).toHaveText('bc1qj...pwa6n')
+    await expect(profilePage.record('address', 'etcLegacy')).toHaveText('etcLegacy0x3C4...293BC')
+    await expect(profilePage.record('text', 'email')).toHaveText('[email protected]')
+    await expect(profilePage.contentHash()).toContainText('ipfs://bafybeic...')
+  })
 })
 
 test.describe('migrations', () => {

e2e/specs/stateless/wrapName.spec.ts

@@ -216,7 +216,7 @@ test('should allow wrapping a name with an unknown label', async ({
   await expect(morePage.wrapButton).toHaveCount(0)
 
   // should direct to the known label page
-  await expect(page).toHaveURL(`/${unknownLabel}.${name}`)
+  await expect(page).toHaveURL(`/${unknownLabel}.${name}?tab=more`)
 })
 
 test('should calculate needed steps without localstorage', async ({

src/components/pages/profile/[name]/Profile.tsx

@@ -123,6 +123,7 @@ const ProfileContent = ({ isSelf, isLoading: parentIsLoading, name }: Props) =>
     isWrapped,
     wrapperData,
     registrationStatus,
+    isBasicLoading,
     refetchIfEnabled,
   } = nameDetails
 
@@ -167,8 +168,14 @@ const ProfileContent = ({ isSelf, isLoading: parentIsLoading, name }: Props) =>
     refetchIfEnabled()
     setTab_(value)
   }
-  const visibileTabs = (isWrapped ? tabs : tabs.filter((_tab) => _tab !== 'permissions')).filter(
-    (_tab) => (unsupported ? _tab === 'profile' : _tab),
+
+  const isWrappedOrLoading = isWrapped || isBasicLoading
+  const visibileTabs = useMemo(
+    () =>
+      (isWrappedOrLoading ? tabs : tabs.filter((_tab) => _tab !== 'permissions')).filter((_tab) =>
+        unsupported ? _tab === 'profile' : _tab,
+      ),
+    [isWrappedOrLoading, unsupported],
   )
 
   const abilities = useAbilities({ name: normalisedName })
@@ -182,8 +189,10 @@ const ProfileContent = ({ isSelf, isLoading: parentIsLoading, name }: Props) =>
       name,
       decodedName: profile?.decodedName,
       normalisedName,
+      visibileTabs,
+      tab,
     })
-  }, [profile?.decodedName, normalisedName, name, isSelf, router])
+  }, [profile?.decodedName, normalisedName, name, isSelf, router, tab, visibileTabs])
 
   // useEffect(() => {
   //   if (shouldShowSuccessPage(transactions)) {
@@ -262,7 +271,6 @@ const ProfileContent = ({ isSelf, isLoading: parentIsLoading, name }: Props) =>
             </Outlink>
           ) : null,
           trailing: match(tab)
-            .with('profile', () => <ProfileTab name={normalisedName} nameDetails={nameDetails} />)
             .with('records', () => (
               <RecordsTab
                 name={normalisedName}
@@ -296,7 +304,7 @@ const ProfileContent = ({ isSelf, isLoading: parentIsLoading, name }: Props) =>
             .with('more', () => (
               <MoreTab name={normalisedName} nameDetails={nameDetails} abilities={abilities.data} />
             ))
-            .exhaustive(),
+            .otherwise(() => <ProfileTab name={normalisedName} nameDetails={nameDetails} />),
         }}
       </Content>
     </>

src/utils/shouldRedirect.test.ts

@@ -106,6 +106,8 @@ describe('shouldRedirect', () => {
       isSelf: false,
       decodedName,
       normalisedName,
+      visibileTabs: ['profile', 'records', 'ownership', 'subnames', 'more'],
+      tab: 'profile',
     }
     shouldRedirect(mockRouter as never, 'Profile.tsx', '/profile', params)
     expect(mockRouter.pathname).toBe(`/profile/${decodedName}`)
@@ -121,6 +123,8 @@ describe('shouldRedirect', () => {
       isSelf: false,
       decodedName,
       normalisedName,
+      visibileTabs: ['profile', 'records', 'ownership', 'subnames', 'more'],
+      tab: 'profile',
     }
     shouldRedirect(mockRouter as never, 'Profile.tsx', '/profile', params)
     expect(mockRouter.pathname).toBe(`/profile/${normalisedName}`)
@@ -136,6 +140,25 @@ describe('shouldRedirect', () => {
       isSelf: true,
       decodedName,
       normalisedName,
+      visibileTabs: ['profile', 'records', 'ownership', 'subnames', 'more'],
+      tab: 'profile',
+    }
+    shouldRedirect(mockRouter as never, 'Profile.tsx', '/profile', params)
+    expect(mockRouter.pathname).toBe(`/profile/${name}`)
+  })
+
+  it('Profile.tsx should "/profile/[name]" expected path if invalid tab', () => {
+    const name = 'test'
+    const decodedName = 'test.eth'
+    const normalisedName =
+      '[fa1ea47215815692a5f1391cff19abbaf694c82fb2151a4c351b6c0eeaaf317b].test.eth'
+    const params = {
+      name,
+      isSelf: true,
+      decodedName,
+      normalisedName,
+      visibileTabs: ['profile', 'records', 'ownership', 'subnames', 'more'],
+      tab: 'custom',
     }
     shouldRedirect(mockRouter as never, 'Profile.tsx', '/profile', params)
     expect(mockRouter.pathname).toBe(`/profile/${name}`)

src/utils/shouldRedirect.ts

@@ -20,6 +20,8 @@ type RouteParams = {
     name: string | undefined
     decodedName: string | undefined
     normalisedName: string | undefined
+    visibileTabs: readonly string[]
+    tab: string
   }
 
   'DnsClaim.tsx': {
@@ -97,7 +99,10 @@ export const shouldRedirect = (
       ['Profile.tsx', { isSelf: P.boolean, name: P.string }],
       (_params) => _params && router.isReady,
       (_params) => {
-        const { name, isSelf, decodedName, normalisedName } = _params[1]
+        const { name, isSelf, decodedName, normalisedName, visibileTabs, tab } = _params[1]
+
+        const hasValidTab = visibileTabs.includes(tab)
+        const tabQuery = tab !== 'profile' && hasValidTab ? `?tab=${tab}` : ''
 
         if (
           name !== decodedName &&
@@ -108,7 +113,7 @@ export const shouldRedirect = (
           // if the fetched decrypted name is different to the current name
           // and the decrypted name has less encrypted labels than the normalised name
           // direct to the fetched decrypted name
-          return router.replace(`${destination}/${decodedName}`, {
+          return router.replace(`${destination}/${decodedName}${tabQuery}`, {
             shallow: true,
             maintainHistory: true,
           })
@@ -125,13 +130,17 @@ export const shouldRedirect = (
           // if the normalised name is different to the current name
           // and the normalised name has less encrypted labels than the decrypted name
           // direct to normalised name
-          return router.replace(`${destination}/${normalisedName}`, {
+          return router.replace(`${destination}/${normalisedName}${tabQuery}`, {
             shallow: true,
             maintainHistory: true,
           })
         }
 
         if (isSelf && name) {
+          return router.replace(`${destination}/${name}${tabQuery}`)
+        }
+
+        if (!hasValidTab) {
           return router.replace(`${destination}/${name}`)
         }
       },