Feature: Safe apps search

[mmv08]

What it solves

Resolves #2712
It also fixes a small bug when the manifest.json request fails, but the app is still displayed in the list as loading

How this PR fixes it

• Adds a search input to the Safe Apps page
• Adds useAppSearch hook, which uses fuse.js under the hood
• Adds framer-motion library to animate list reordering and apps mounting/unmounting

How to test it

Open a safe, play with the app search

Screenshots

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	1	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[github-actions]

• Safe Multisig app mainnet

[github-actions]

• Safe Multisig app polygon

[github-actions]

• Safe Multisig app rinkeby

[github-actions]

E2E Tests Passed
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1278227501

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[github-actions]

E2E Tests Passed
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1228646445

[github-actions]

E2E Tests Passed
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1228705197

[github-actions]

E2E Tests Passed
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1228746885

[github-actions]

E2E Tests Passed
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1229006208

[mmv08]

Wow, that was fast @iamacook 🏎️

[Graeme-Code]

In order to keep the input field design pattern as close as possible with the existing components, I have the following notes:

1. On opening Safe Apps, Search bar is in a “clicked” state. As in it looks like the user has already clicked on the search input field.

Recommendation to keep it inline designed components on storyboard:

Reference: https://components.gnosis-safe.io/?path=/docs/inputs-textfield--simple-text-field#start-adornment

On the opening of Safe Apps menu and prior to any clicks on the input field, show the line below input field in grey'd state and the "search" description be placed above the search icon. Could the search icon be the same color as the Adornment in the storybook example.

Example from story book:

When the user's mouse hovers over the input field, the grey'd outlined below the input field show turn black.

Example from story book:

When a user populates the search input field, the line below the input field should turn green and the term "Search" should also turn green.
current implementation:

Example from Storybook:

Edge case, if the first two inputs spaces, will get a no search results on blank. Please could you strip spaces at the beginning of user input.

Duplication:

I'm of the belief that duplication of paths increases complexity of design and generally leads to clutter.

Please remove the cross in the search input bar in favor of the clear search button.

[katspaugh]

Some tests would be nice.
Especially for the search hook.

[mmv08]

Thanks for the feedback @Graeme-Code!

I have one question related to:

Duplication:

I'm of the belief that duplication of paths increases complexity of design and generally leads to clutter.

Please remove the cross in the search input bar in favor of the clear search button.

Since the button only appears when there are no matching results. Would it make more sense to do the opposite: remove the button and use the cross instead?

[katspaugh]

I've tested it locally, a couple more comments:

• Do we need the initial animation on load?
• It looks like the Name already takes priority, so ignore my question above
• When you type just two letters, the results aren't what I would expect, is this easily fixable?

Works really great btw!

[mmv08]

Can I just take Aaron's review? 🙈

JK, will fix everything :)

[github-actions]

E2E Tests Passed
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1241127965

[github-actions]

E2E Tests Passed
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1241370122

[mmv08]

The pull request is waiting for user feedback results and will need to be adjusted

[Graeme-Code]

Hi,

We got user feedback that when there are no results, users are kinda 'stuck'. As in they don't know what to do. To counter this I recommend using Mikhails original design, but instead of clearing the search, it populates the search with wallet connect.

Clicking on the "search WalletConnect", would open:

[francovenica]

Notes:
Ok, so the green button to clear the search was for now removed in favor to the X
Also I know that the "WalletConnect" default result is not still here, so I'll ignore it for now
Personally I don't mind the animation as you open the Apps page. I think it fine as it is.
I don't understand Ivan's comment regarding "typing 2 characters and getting unexpected results". For me so far it seems it matches both the title and the description of the apps, so is fine for me

It worked fine for me:
Tried with default apps, custom apps, even custom apps that show more than once.
The app list still works as intended (you can click in the items, the trashcan to remove them, adding custom apps is working just fine)
Made sure that the "add custom app" block is ignored by the search
The X clears the search just fine

Something curious (that I don't consider an that big of a deal) is that the search sometimes can ignore a character not written or a character that doesn't match:
I have app called "Zodiac" if you write "Zx" "Zox" "Zodx" it won't show it as expected, but if you write "Zodix" it will show it as a result.

Another case is when characters are ignored. So If I want to find the "Transaction Builder" I can ignore one of the characters as long is the after the 4th one, so I can write "transction" or "transation" and it will find the app

Again, I don't think this is going to break the search for any user, but I wonder why that happens

[katspaugh]

I suggest we merge this as is (after QA), and then tweak the no-results screen as necessary.

[mmv08]

I'll update the PR with not found screen suggestion from Graeme. The update I gave before in the standup that we want to do one more round of user tests was wrong, sorry.

[francovenica]

@mikheevm @katspaugh for me the search is fine. The only thing I want to know if we are going to add here the WC "by default" if there are no results

[mmv08]

This is how the new "not found" page looks like

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	1	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[katspaugh]

@mikheevm I would make the green button centered relative to the text above. And add a bit of margin on top.

[mmv08]

@katspaugh it is centered. Graeme has shared the new implementation privately on Slack. Also, the info icon is not there anymore

[mmv08]

I tested it and it worked according to the specs: https://www.loom.com/share/16a676bda3194afbbfb1be12f6cbf05d