Merge pull request #1944 from blockscout/fe-1900

remove unsupported features from search results

playwright/fixtures/mockEnvs.ts

@@ -63,4 +63,10 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
   noNftMarketplaces: [
     [ 'NEXT_PUBLIC_VIEWS_NFT_MARKETPLACES', '' ],
   ],
+  dataAvailability: [
+    [ 'NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED', 'true' ],
+  ],
+  nameService: [
+    [ 'NEXT_PUBLIC_NAME_SERVICE_API_HOST', 'https://localhost:3101' ],
+  ],
 };

ui/pages/SearchResults.pw.tsx

@@ -100,7 +100,7 @@ test('search by tx hash +@mobile', async({ render, mockApiResponse }) => {
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by blob hash +@mobile', async({ render, mockApiResponse }) => {
+test('search by blob hash +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.blob1.blob_hash },
@@ -110,13 +110,14 @@ test('search by blob hash +@mobile', async({ render, mockApiResponse }) => {
     items: [ searchMock.blob1 ],
     next_page_params: null,
   };
+  await mockEnvs(ENVS_MAP.dataAvailability);
   await mockApiResponse('search', data, { queryParams: { q: searchMock.blob1.blob_hash } });
   const component = await render(<SearchResults/>, { hooksConfig });
 
   await expect(component.locator('main')).toHaveScreenshot();
 });
 
-test('search by domain name +@mobile', async({ render, mockApiResponse }) => {
+test('search by domain name +@mobile', async({ render, mockApiResponse, mockEnvs }) => {
   const hooksConfig = {
     router: {
       query: { q: searchMock.domain1.ens_info.name },
@@ -126,6 +127,7 @@ test('search by domain name +@mobile', async({ render, mockApiResponse }) => {
     items: [ searchMock.domain1 ],
     next_page_params: null,
   };
+  await mockEnvs(ENVS_MAP.nameService);
   await mockApiResponse('search', data, { queryParams: { q: searchMock.domain1.ens_info.name } });
   const component = await render(<SearchResults/>, { hooksConfig });
   await expect(component.locator('main')).toHaveScreenshot();

ui/pages/SearchResults.tsx

@@ -61,8 +61,11 @@ const SearchResultsPageContent = () => {
           break;
         }
         case 'blob': {
-          router.replace({ pathname: '/blobs/[hash]', query: { hash: redirectCheckQuery.data.parameter } });
-          return;
+          if (config.features.dataAvailability.isEnabled) {
+            router.replace({ pathname: '/blobs/[hash]', query: { hash: redirectCheckQuery.data.parameter } });
+            return;
+          }
+          break;
         }
       }
     }
@@ -78,6 +81,12 @@ const SearchResultsPageContent = () => {
     if (!config.features.userOps.isEnabled && item.type === 'user_operation') {
       return false;
     }
+    if (!config.features.dataAvailability.isEnabled && item.type === 'blob') {
+      return false;
+    }
+    if (!config.features.nameService.isEnabled && item.type === 'ens_domain') {
+      return false;
+    }
     return true;
   });
 

ui/shared/search/utils.ts

@@ -17,20 +17,26 @@ export type SearchResultAppItem = {
 
 export const searchCategories: Array<{id: Category; title: string }> = [
   { id: 'app', title: 'DApps' },
-  { id: 'domain', title: 'Names' },
   { id: 'token', title: 'Tokens (ERC-20)' },
   { id: 'nft', title: 'NFTs (ERC-721 & 1155)' },
   { id: 'address', title: 'Addresses' },
   { id: 'public_tag', title: 'Public tags' },
   { id: 'transaction', title: 'Transactions' },
   { id: 'block', title: 'Blocks' },
-  { id: 'blob', title: 'Blobs' },
 ];
 
 if (config.features.userOps.isEnabled) {
   searchCategories.push({ id: 'user_operation', title: 'User operations' });
 }
 
+if (config.features.dataAvailability.isEnabled) {
+  searchCategories.push({ id: 'blob', title: 'Blobs' });
+}
+
+if (config.features.nameService.isEnabled) {
+  searchCategories.push({ id: 'domain', title: 'Names' });
+}
+
 export const searchItemTitles: Record<Category, { itemTitle: string; itemTitleShort: string }> = {
   app: { itemTitle: 'DApp', itemTitleShort: 'App' },
   domain: { itemTitle: 'Name', itemTitleShort: 'Name' },

ui/snippets/searchBar/SearchBar.pw.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { apps as appsMock } from 'mocks/apps/apps';
 import * as searchMock from 'mocks/search/index';
+import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
 import { test, expect } from 'playwright/lib';
 
 import SearchBar from './SearchBar';
@@ -109,7 +110,8 @@ test('search by tx hash +@mobile', async({ render, page, mockApiResponse }) => {
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-test('search by blob hash +@mobile', async({ render, page, mockApiResponse }) => {
+test('search by blob hash +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.dataAvailability);
   const apiUrl = await mockApiResponse('quick_search', [
     searchMock.blob1,
   ], { queryParams: { q: searchMock.blob1.blob_hash } });
@@ -120,7 +122,8 @@ test('search by blob hash +@mobile', async({ render, page, mockApiResponse }) =>
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 300 } });
 });
 
-test('search by domain name +@mobile', async({ render, page, mockApiResponse }) => {
+test('search by domain name +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
+  await mockEnvs(ENVS_MAP.nameService);
   const apiUrl = await mockApiResponse('quick_search', [
     searchMock.domain1,
   ], { queryParams: { q: searchMock.domain1.ens_info.name } });
@@ -133,9 +136,7 @@ test('search by domain name +@mobile', async({ render, page, mockApiResponse })
 });
 
 test('search by user op hash +@mobile', async({ render, page, mockApiResponse, mockEnvs }) => {
-  await mockEnvs([
-    [ 'NEXT_PUBLIC_HAS_USER_OPS', 'true' ],
-  ]);
+  await mockEnvs(ENVS_MAP.userOps);
   const apiUrl = await mockApiResponse('quick_search', [
     searchMock.userOp1,
   ], { queryParams: { q: searchMock.tx1.tx_hash } });