diff --git a/ui/helpers/utils/settings-search.js b/ui/helpers/utils/settings-search.js index ebdb77a25..da81fd20d 100644 --- a/ui/helpers/utils/settings-search.js +++ b/ui/helpers/utils/settings-search.js @@ -14,15 +14,13 @@ export function getSettingsRoutes() { } function getFilteredSettingsRoutes(t, tabMessage) { - return getSettingsRoutes().filter( - (routeObject) => routeObject.tabMessage(t) === tabMessage, - ); + return getSettingsRoutes().filter((routeObject) => { + return routeObject.tabMessage(t) === tabMessage; + }); } export function getNumberOfSettingsInSection(t, tabMessage) { - return getSettingsRoutes().filter( - (routeObject) => routeObject.tabMessage(t) === tabMessage, - ).length; + return getFilteredSettingsRoutes(t, tabMessage).length; } export function handleSettingsRefs(t, tabMessage, settingsRefs) { diff --git a/ui/pages/settings/settings-search/settings-search.js b/ui/pages/settings/settings-search/settings-search.js index c00f2b563..2126d5547 100644 --- a/ui/pages/settings/settings-search/settings-search.js +++ b/ui/pages/settings/settings-search/settings-search.js @@ -1,4 +1,7 @@ import React, { useState, useContext } from 'react'; +///: BEGIN:ONLY_INCLUDE_IN(flask) +import { useSelector } from 'react-redux'; +///: END:ONLY_INCLUDE_IN import PropTypes from 'prop-types'; import Fuse from 'fuse.js'; import InputAdornment from '@material-ui/core/InputAdornment'; @@ -6,6 +9,9 @@ import TextField from '../../../components/ui/text-field'; import { I18nContext } from '../../../contexts/i18n'; import SearchIcon from '../../../components/ui/search-icon'; import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils'; +///: BEGIN:ONLY_INCLUDE_IN(flask) +import { getSnapsRouteObjects } from '../../../selectors'; +///: END:ONLY_INCLUDE_IN export default function SettingsSearch({ onSearch, @@ -20,6 +26,10 @@ export default function SettingsSearch({ ); const settingsRoutesListArray = Object.values(settingsRoutesList); + ///: BEGIN:ONLY_INCLUDE_IN(flask) + const snaps = useSelector(getSnapsRouteObjects); + settingsRoutesListArray.push(...snaps); + ///: END:ONLY_INCLUDE_IN const settingsSearchFuse = new Fuse(settingsRoutesListArray, { shouldSort: true, threshold: 0.2, @@ -46,7 +56,7 @@ export default function SettingsSearch({ const fuseSearchResult = settingsSearchFuse.search(sanitizedSearchQuery); const addressSearchResult = settingsRoutesListArray.filter((routes) => { return ( - routes.tab && + routes.tabMessage && sanitizedSearchQuery && isEqualCaseInsensitive(routes.tab, sanitizedSearchQuery) ); diff --git a/ui/pages/settings/settings.component.test.js b/ui/pages/settings/settings.component.test.js index f2b8c6f37..a40f1fafb 100644 --- a/ui/pages/settings/settings.component.test.js +++ b/ui/pages/settings/settings.component.test.js @@ -1,6 +1,8 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, shallow } from 'enzyme'; +import { Provider } from 'react-redux'; import TextField from '../../components/ui/text-field'; +import configureStore from '../../store/store'; import Settings from './settings.container'; import SettingsSearch from './settings-search'; @@ -37,8 +39,15 @@ describe('SettingsPage', () => { }); it('should render search correctly', () => { - wrapper = shallow( - undefined} settingsRoutesList={[]} />, + const store = configureStore({ + metamask: { + snaps: {}, + }, + }); + wrapper = mount( + + undefined} settingsRoutesList={[]} /> + , { context: { t: (s) => `${s}`, diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 46600ce4a..c7bfe7f10 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -65,6 +65,9 @@ import { getLedgerTransportStatus, } from '../ducks/app/app'; import { isEqualCaseInsensitive } from '../../shared/modules/string-utils'; +///: BEGIN:ONLY_INCLUDE_IN(flask) +import { SNAPS_VIEW_ROUTE } from '../helpers/constants/routes'; +///: END:ONLY_INCLUDE_IN /** * One of the only remaining valid uses of selecting the network subkey of the @@ -705,6 +708,20 @@ export function getShowWhatsNewPopup(state) { export function getSnaps(state) { return state.metamask.snaps; } + +export const getSnapsRouteObjects = createSelector(getSnaps, (snaps) => { + return Object.values(snaps).map((snap) => { + return { + tabMessage: () => snap.manifest.proposedName, + descriptionMessage: () => snap.manifest.description, + sectionMessage: () => snap.manifest.description, + route: `${SNAPS_VIEW_ROUTE}/${window.btoa( + unescape(encodeURIComponent(snap.id)), + )}`, + icon: 'fa fa-flask', + }; + }); +}); ///: END:ONLY_INCLUDE_IN /**