[🐛 Bug]: UX Bug, rearrange provider search

[Matvey-Kuk]

1. I search for existing providers, I don't see it below my installed and linked providers:

2. I search for non-existing providers and there is no message showing "We can't find anything"

Proposal:

When we search or filter, put search results on top of installed / linked providers.

[dosubot]

To address the UX bug and implement the proposed changes, you can modify the ProvidersPage component to rearrange the provider search results above the installed and linked providers, and display a message when no providers are found. Here's how you can do it:

1. Rearrange the Display Order: Ensure that the search results are displayed before the installed and linked providers by conditionally rendering the search results section first.

2. Show a Message When No Providers Are Found: Add a conditional check to display a message when the filtered providers array is empty.

Here's a code snippet to implement these changes:

export default function ProvidersPage({
  searchParams,
}: {
  searchParams?: { [key: string]: string };
}) {
  const {
    providers,
    installedProviders,
    linkedProviders,
    isLocalhost,
    mutate,
  } = useFetchProviders();

  const {
    providersSearchString,
    providersSelectedTags,
    providersSelectedCategories,
  } = useFilterContext();

  useEffect(() => {
    if (searchParams?.oauth === "failure") {
      const reason = JSON.parse(searchParams.reason);
      showErrorToast(new Error(`Failed to install provider: ${reason.detail}`));
    } else if (searchParams?.oauth === "success") {
      toast.success("Successfully installed provider", {
        position: toast.POSITION.TOP_LEFT,
      });
    }
  }, [searchParams]);

  if (!providers || !installedProviders || providers.length <= 0) {
    return <Loading />;
  }

  const searchProviders = (provider: Provider) => {
    return (
      !providersSearchString ||
      provider.type?.toLowerCase().includes(providersSearchString.toLowerCase())
    );
  };

  const searchCategories = (provider: Provider) => {
    if (providersSelectedCategories.includes("Coming Soon")) {
      if (provider.coming_soon) {
        return true;
      }
    }

    return (
      providersSelectedCategories.length === 0 ||
      provider.categories.some((category) =>
        providersSelectedCategories.includes(category)
      )
    );
  };

  const searchTags = (provider: Provider) => {
    return (
      providersSelectedTags.length === 0 ||
      provider.tags.some((tag) => providersSelectedTags.includes(tag))
    );
  };

  const filteredProviders = providers.filter(
    (provider) =>
      searchProviders(provider) &&
      searchTags(provider) &&
      searchCategories(provider)
  );

  return (
    <>
      <div className="flex items-center mb-2.5">
        <Title>Search Results</Title>
      </div>
      <div className="flex flex-wrap mb-5 gap-5">
        {filteredProviders.length > 0 ? (
          filteredProviders.map((provider) => (
            <ProviderTile
              key={provider.id}
              provider={provider}
              onClick={() => handleConnectProvider(provider)}
            />
          ))
        ) : (
          <div>No providers found.</div>
        )}
      </div>

      {installedProviders.length > 0 && (
        <ProvidersTiles
          providers={installedProviders}
          installedProvidersMode={true}
          mutate={mutate}
        />
      )}
      {linkedProviders?.length > 0 && (
        <ProvidersTiles
          providers={linkedProviders}
          linkedProvidersMode={true}
          isLocalhost={isLocalhost}
          mutate={mutate}
        />
      )}
    </>
  );
}

This code ensures that the search results are displayed first, and if no providers are found, it shows a "No providers found." message ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[Matvey-Kuk]

Duplicate of #3569