feat: add document search to the command menu #713

ksushant6566 · 2023-12-02T20:08:57Z

resolves #702

vercel · 2023-12-02T20:09:02Z

@ksushant6566 is attempting to deploy a commit to the Documenso Team Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2023-12-02T20:09:03Z

Important

Auto Review Skipped

Auto reviews are limited to the following labels: coderabbit. Please add one of these labels to enable auto reviews.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository.

To trigger a single review, invoke the @coderabbitai review command.

Tips

Chat with CodeRabbit Bot (`@coderabbitai`)

If you reply to a review comment from CodeRabbit, the bot will automatically respond.
To engage with CodeRabbit bot directly around the specific lines of code in the PR, mention @coderabbitai in your review comment
Note: Review comments are made on code diffs or files, not on the PR overview.
Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Note: For conversation with the bot, please use the review comments on code diffs or files.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
The JSON schema for the configuration file is available here.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

Mythie · 2023-12-02T22:47:06Z

apps/web/src/components/(dashboard)/common/command-menu.tsx

+    { label: string; path: string; recipents: string[] }[]
+  >([]);
+
+  const { isLoading: isSearchingDocuments, refetch: findDocuments } =


Why not use the data property instead? Using onSuccess on queries will be deprecated with React Query 5 afaik

makes sense, I'll make change it

Mythie · 2023-12-02T22:48:05Z

apps/web/src/components/(dashboard)/common/command-menu.tsx

+        filter: (value, search) => {
+          const exists = value.includes(search);
+          if (exists) return 1;
+
+          const result = searchResults.find(
+            (result) => result.label.toLocaleLowerCase() === value.toLocaleLowerCase(),
+          );
+
+          if (result?.recipents.some((recipent) => recipent.includes(search))) return 1;
+          return 0;
+        },
+      }}


Wonder if we can cheat and just use an sr-only thing that contains the recipients so we don't have to add a custom filter fn 🤔

not sure what you mean by sr-only? can you please explain?

added a new value property in searchResults

const newResults = searchDocuments?.map((document) => ({ label: document.title, path: `/documents/${document.id}`, value: document.title + document.Recipient.map((recipient) => recipient.email).join(' '), }));

with this we don't need a custom filter function anymore

Sorry I meant the tailwind sr-only class that would make text invisible unless on a screen reader 😄

If the solution above works that's just as good!

Mythie · 2023-12-02T22:49:23Z

packages/lib/server-only/document/search-documents-with-keyword.ts

+    where: {
+      OR: [
+        {
+          title: {
+            contains: query,
+            mode: 'insensitive',
+          },
+        },
+        {
+          Recipient: {
+            some: {
+              email: {
+                contains: query,
+              },
+            },
+          },
+        },
+      ],


This is currently missing documents you have received, see findDocuments for some inspo on how to query it.

Consider if we could also use findDocuments instead with some modifications

cools, I'll check and make the necessary changes

although the findDocuments does have a filter by term but searching term in recipients email might be a lil confusing & unintuitive for others so I just made the changes in SearchDocumentsWithKeyword to include received documents as well.

…ctor to remove custom filter

Mythie · 2023-12-03T00:30:00Z

apps/web/src/components/(dashboard)/common/command-menu.tsx

+    data: searchDocuments,
+    isLoading: isSearchingDocuments,
+    refetch: findDocuments,
+  } = trpcReact.document.searchDocuments.useQuery(


Ideally we always search and show the most recent documents

Mythie · 2023-12-03T00:30:48Z

apps/web/src/components/(dashboard)/common/command-menu.tsx

+
+  useEffect(() => {
+    if (search) {
+      void findDocuments();


This is redundant since we're using react query it should just automatically fetch whenever query changes

Mythie · 2023-12-03T00:31:43Z

apps/web/src/components/(dashboard)/common/command-menu.tsx

+
+  useEffect(() => {
+    if (searchDocuments) {
+      const newResults = searchDocuments?.map((document) => ({


This could be done with a map of the results in a use memo or similar, an effect will introduce race conditions

Mythie · 2023-12-03T00:33:30Z

packages/trpc/server/document-router/router.ts

+      const { query } = input;
+
+      try {
+        const documents = await SearchDocumentsWithKeyword({


We don't do pascal case methods :)

Mythie · 2023-12-03T03:58:09Z

apps/web/src/components/(dashboard)/common/command-menu.tsx

+  // }, [searchDocuments]);
+
+  const searchResults = useMemo(() => {
+    if (!searchDocuments) return [];


No single line if statements please, just wrap it in braces {} 😄

packages/lib/server-only/document/search-documents-with-keyword.ts

Mythie · 2023-12-03T04:01:00Z

packages/lib/server-only/document/search-documents-with-keyword.ts

+    },
+  });
+
+  const documents = await prisma.document.findMany({


Looks like we're missing a limit here, if I were to search for a I might return thousands of results

Ideally this would be an option passed into the method

done now this takes a limit variable with a default value of 5.

Mythie · 2023-12-03T04:02:37Z

apps/web/src/components/(dashboard)/common/command-menu.tsx

+        query: search,
+      },
+      {
+        enabled: search !== '',


We still want results even for an empty search term 😄

cool, done!

Mythie · 2023-12-03T04:02:48Z

packages/trpc/server/document-router/schema.ts

@@ -83,3 +83,7 @@ export const ZDeleteDraftDocumentMutationSchema = z.object({
 });

 export type TDeleteDraftDocumentMutationSchema = z.infer<typeof ZDeleteDraftDocumentMutationSchema>;
+
+export const ZSearchDocumentsMutationSchema = z.object({
+  query: z.string().min(1),


Which will meant his also needs to change as well

ksushant6566 · 2023-12-03T04:58:47Z

Hey @Mythie , just pushed requested changes. if (anything needs to be changed) { please let me know :) }

Mythie · 2023-12-03T05:48:01Z

round 2

apps/web/src/components/(dashboard)/common/command-menu.tsx

packages/lib/server-only/document/search-documents-with-keyword.ts

Mythie · 2023-12-03T06:01:20Z

Noting that the searchDocuments endpoint is angry:

ksushant6566 · 2023-12-03T06:04:00Z

Noting that the searchDocuments endpoint is angry:

Oh shit! lemme check

Mythie · 2023-12-03T06:06:53Z

It's because of migrations aha! This PR has been built on top of the other PR for document deletion so it won't work on a fresh checkout like the one I did on Gitpod

ksushant6566 · 2023-12-03T06:08:00Z

It's because of migrations aha! This PR has been built on top of the other PR for document deletion so it won't work on a fresh checkout like the one I did on Gitpod

Yes!

Mythie · 2023-12-03T06:12:33Z

As a final request then I'll need a video recording showing the 3 flows:

document I own appearing in search results
document I received showing in search results
search by recipient

Once this has been provided I'm happy to accept this submission 🙌

ksushant6566 · 2023-12-03T06:14:05Z

As a final request then I'll need a video recording showing the 3 flows:

document I own appearing in search results

document I received showing in search results

search by recipient

Once this has been provided I'm happy to accept this submission 🙌

cool give me 5 minutes

ksushant6566 · 2023-12-03T07:05:01Z

Hey @Mythie , here is the loom video of the final solution https://www.loom.com/share/3593cfad580f48ca8d7badb24ab776d8?sid=3286d03b-199a-489a-8ab5-8135de6de241

Mythie · 2023-12-03T08:10:54Z

Looks good! I’m happy with it in this state and the code is alright too 🙌🏻

You only lose points for being a dark mode user 🌚

I’ll merge once I know it won’t blow up

ksushant6566 · 2023-12-03T08:24:52Z

Looks good! I’m happy with it in this state and the code is alright too 🙌🏻

You only lose points for being a dark mode user 🌚

I’ll merge once I know it won’t blow up

Cool 💯

kritarth2121 · 2023-12-03T10:32:55Z

The cmdk library filters based on whether the item contains a string sequence of search in order, but not necessarily right next to each other,

but the filter you have implemented filters whether the items containing search substring right next to each other

This feature can be implemented with regex, if you want I can build it.
@Mythie

ksushant6566 · 2023-12-03T17:00:29Z

Hey @Mythie , Since this is approved I'll start working on #703 , in this branch only, since we want the search results in the same command menu.

feat: add document search to the command menu

1bd2530

fix: filter documents in command menu using recipients email

c6f4ac9

Mythie reviewed Dec 2, 2023

View reviewed changes

fix: include received documents in command menu search results + refa…

31b4c0c

…ctor to remove custom filter

Mythie requested changes Dec 3, 2023

View reviewed changes

ksushant6566 added 2 commits December 3, 2023 06:56

chore: replace useEffect+useState with useMemo

abbb7a4

fix: exclude user deleted documents in command-menu search

2fad425

Mythie reviewed Dec 3, 2023

View reviewed changes

packages/lib/server-only/document/search-documents-with-keyword.ts Show resolved Hide resolved

Mythie reviewed Dec 3, 2023

View reviewed changes

Mythie mentioned this pull request Dec 3, 2023

feat: add document search to the command menu #714

Closed

chore: add limit to search results

c98af82

Mythie reviewed Dec 3, 2023

View reviewed changes

apps/web/src/components/(dashboard)/common/command-menu.tsx Show resolved Hide resolved

Mythie reviewed Dec 3, 2023

View reviewed changes

apps/web/src/components/(dashboard)/common/command-menu.tsx Outdated Show resolved Hide resolved

Mythie reviewed Dec 3, 2023

View reviewed changes

packages/lib/server-only/document/search-documents-with-keyword.ts Show resolved Hide resolved

fix: bug fixes

9317baf

ephraimduncan added the osshack label Dec 3, 2023

Mythie previously approved these changes Dec 3, 2023

View reviewed changes

Mythie mentioned this pull request Dec 4, 2023

[OSSHACK] Opt-In Semantic Search #703 #726

Open

Mythie added 2 commits December 6, 2023 11:13

Merge branch 'main' into document-search-in-command-menu

7729afb

fix: formatting and tests

5b21f0b

Mythie dismissed their stale review via 5b21f0b December 6, 2023 01:30

Mythie approved these changes Dec 6, 2023

View reviewed changes

Mythie merged commit bfc630a into documenso:main Dec 6, 2023
7 of 11 checks passed

ksushant6566 deleted the document-search-in-command-menu branch December 6, 2023 01:51

feat: add document search to the command menu #713

feat: add document search to the command menu #713

Conversation

ksushant6566 commented Dec 2, 2023

vercel bot commented Dec 2, 2023

coderabbitai bot commented Dec 2, 2023

Auto Review Skipped

Chat with CodeRabbit Bot (@coderabbitai)

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ksushant6566 commented Dec 3, 2023

Mythie commented Dec 3, 2023

Mythie commented Dec 3, 2023

ksushant6566 commented Dec 3, 2023

Mythie commented Dec 3, 2023

ksushant6566 commented Dec 3, 2023

Mythie commented Dec 3, 2023

ksushant6566 commented Dec 3, 2023

ksushant6566 commented Dec 3, 2023

Mythie commented Dec 3, 2023

ksushant6566 commented Dec 3, 2023

kritarth2121 commented Dec 3, 2023

ksushant6566 commented Dec 3, 2023

Chat with CodeRabbit Bot (`@coderabbitai`)

CodeRabbit Configration File (`.coderabbit.yaml`)