Add snaps view search (#14419)

* add snaps view search

* add snaps view search

* fix to add in settings constants

* removed spread

* remove unused import

* add fencing

* more fencing

* ternary refactor, updated settings tests

* refactor

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) {

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)
       );

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(
-      <SettingsSearch onSearch={() => undefined} settingsRoutesList={[]} />,
+    const store = configureStore({
+      metamask: {
+        snaps: {},
+      },
+    });
+    wrapper = mount(
+      <Provider store={store}>
+        <SettingsSearch onSearch={() => undefined} settingsRoutesList={[]} />
+      </Provider>,
       {
         context: {
           t: (s) => `${s}`,

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
 
 /**