Reconfigure document type filter for search results (#6335)

* fix: include drafts in search results

* fix: default to Active

* fix: names

app/scenes/Search/Search.tsx

@@ -30,9 +30,9 @@ import { searchPath } from "~/utils/routeHelpers";
 import { decodeURIComponentSafe } from "~/utils/urls";
 import CollectionFilter from "./components/CollectionFilter";
 import DateFilter from "./components/DateFilter";
+import DocumentTypeFilter from "./components/DocumentTypeFilter";
 import RecentSearches from "./components/RecentSearches";
 import SearchInput from "./components/SearchInput";
-import StatusFilter from "./components/StatusFilter";
 import UserFilter from "./components/UserFilter";
 
 type Props = { notFound?: boolean };
@@ -55,6 +55,7 @@ function Search(props: Props) {
   // filters
   const query = decodeURIComponentSafe(routeMatch.params.term ?? "");
   const includeArchived = params.get("includeArchived") === "true";
+  const includeDrafts = params.get("includeDrafts") !== "false";
   const collectionId = params.get("collectionId") ?? undefined;
   const userId = params.get("userId") ?? undefined;
   const dateFilter = (params.get("dateFilter") as TDateFilter) ?? undefined;
@@ -64,12 +65,21 @@ function Search(props: Props) {
     () => ({
       query,
       includeArchived,
+      includeDrafts,
       collectionId,
       userId,
       dateFilter,
       titleFilter,
     }),
-    [query, includeArchived, collectionId, userId, dateFilter, titleFilter]
+    [
+      query,
+      includeArchived,
+      includeDrafts,
+      collectionId,
+      userId,
+      dateFilter,
+      titleFilter,
+    ]
   );
 
   const requestFn = React.useMemo(() => {
@@ -109,6 +119,7 @@ function Search(props: Props) {
     userId?: string | undefined;
     dateFilter?: TDateFilter;
     includeArchived?: boolean | undefined;
+    includeDrafts?: boolean | undefined;
     titleFilter?: boolean | undefined;
   }) => {
     history.replace({
@@ -202,10 +213,11 @@ function Search(props: Props) {
         {query ? (
           <>
             <Filters>
-              <StatusFilter
+              <DocumentTypeFilter
                 includeArchived={includeArchived}
-                onSelect={(includeArchived) =>
-                  handleFilterChange({ includeArchived })
+                includeDrafts={includeDrafts}
+                onSelect={({ includeArchived, includeDrafts }) =>
+                  handleFilterChange({ includeArchived, includeDrafts })
                 }
               />
               <CollectionFilter

app/scenes/Search/components/DocumentTypeFilter.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import FilterOptions from "~/components/FilterOptions";
+
+type Props = {
+  includeArchived?: boolean;
+  includeDrafts?: boolean;
+  onSelect: (option: {
+    includeArchived?: boolean;
+    includeDrafts?: boolean;
+  }) => void;
+};
+
+enum DocumentType {
+  Published = "published",
+  Active = "active",
+  All = "all",
+}
+
+const DocumentTypeFilter = ({
+  includeArchived,
+  includeDrafts,
+  onSelect,
+}: Props) => {
+  const { t } = useTranslation();
+  const options = React.useMemo(
+    () => [
+      {
+        key: DocumentType.Published,
+        label: t("Published documents"),
+        note: t("Documents you have access to, excluding drafts"),
+      },
+      {
+        key: DocumentType.Active,
+        label: t("Active documents"),
+        note: t("Documents you have access to, including drafts"),
+      },
+      {
+        key: DocumentType.All,
+        label: t("All documents"),
+        note: t("Documents you have access to, including drafts and archived"),
+      },
+    ],
+    [t]
+  );
+
+  const getActiveKey = () => {
+    if (includeArchived && includeDrafts) {
+      return DocumentType.All;
+    }
+
+    if (includeDrafts) {
+      return DocumentType.Active;
+    }
+
+    return DocumentType.Published;
+  };
+
+  const handleSelect = (key: DocumentType) => {
+    switch (key) {
+      case DocumentType.Published:
+        return onSelect({ includeArchived: false, includeDrafts: false });
+      case DocumentType.Active:
+        return onSelect({ includeArchived: false, includeDrafts: true });
+      case DocumentType.All:
+        return onSelect({ includeArchived: true, includeDrafts: true });
+      default:
+        onSelect({ includeArchived: false, includeDrafts: false });
+    }
+  };
+
+  return (
+    <FilterOptions
+      options={options}
+      activeKey={getActiveKey()}
+      onSelect={handleSelect}
+      defaultLabel={t("Document type")}
+    />
+  );
+};
+
+export default DocumentTypeFilter;

app/scenes/Search/components/StatusFilter.tsx

@@ -1,38 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import FilterOptions from "~/components/FilterOptions";
-
-type Props = {
-  includeArchived?: boolean;
-  onSelect: (key: boolean) => void;
-};
-
-const StatusFilter = ({ includeArchived, onSelect }: Props) => {
-  const { t } = useTranslation();
-  const options = React.useMemo(
-    () => [
-      {
-        key: "",
-        label: t("Active documents"),
-        note: t("Documents in collections you are able to access"),
-      },
-      {
-        key: "true",
-        label: t("All documents"),
-        note: t("Include documents that are in the archive"),
-      },
-    ],
-    [t]
-  );
-
-  return (
-    <FilterOptions
-      options={options}
-      activeKey={includeArchived ? "true" : undefined}
-      onSelect={(key) => onSelect(key === "true")}
-      defaultLabel={t("Active documents")}
-    />
-  );
-};
-
-export default StatusFilter;