Make Trash Usable - Search Filter UI

e2e/test/scenarios/onboarding/search/search-filters.cy.spec.js

@@ -4,6 +4,7 @@ import {
   ADMIN_USER_ID,
   NORMAL_USER_ID,
   ORDERS_COUNT_QUESTION_ID,
+  FIRST_COLLECTION_ID,
 } from "e2e/support/cypress_sample_instance_data";
 import {
   createAction,
@@ -1023,6 +1024,28 @@ describe("scenarios > search", () => {
       });
     });
 
+    describe("trashed items filter", () => {
+      it("should only show items in the trash", () => {
+        cy.visit("/search?q=First");
+        cy.findAllByTestId("search-result-item").should("have.length", 1);
+        cy.findByTestId("search-result-item")
+          .findByText("Collection")
+          .should("exist");
+
+        cy.findByTestId("archived-search-filter")
+          .findByText("Search items in trash")
+          .click();
+        cy.findAllByTestId("search-result-item").should("have.length", 0);
+
+        cy.archiveCollection(FIRST_COLLECTION_ID);
+        cy.reload();
+        cy.findAllByTestId("search-result-item").should("have.length", 1);
+        cy.findByTestId("search-result-item")
+          .findByText("Trash")
+          .should("exist");
+      });
+    });
+
     it("should persist filters when the user changes the text query", () => {
       cy.visit("/search?q=orders");
 

frontend/src/metabase/search/components/InfoText/InfoTextEditedInfo.tsx

@@ -59,7 +59,7 @@ export const InfoTextEditedInfo = ({
 
   const { prefix, timestamp, userId } = isUpdated
     ? {
-        prefix: t`Updated`,
+        prefix: result.archived ? t`Deleted` : t`Updated`,
         timestamp: result.last_edited_at,
         userId: result.last_editor_id,
       }

frontend/src/metabase/search/components/SearchResult/components/ItemIcon.styled.tsx

@@ -3,14 +3,12 @@ import styled from "@emotion/styled";
 import { color, lighten } from "metabase/lib/colors";
 import type { SearchModel } from "metabase-types/api";
 
-function getColorForIconWrapper({
-  active,
-  type,
-}: {
-  active: boolean;
-  type: SearchModel;
-}) {
-  if (!active) {
+function getColorForIconWrapper(
+  active: boolean,
+  archived: boolean,
+  type: SearchModel,
+) {
+  if (!active || archived) {
     return color("text-medium");
   }
   if (type === "collection") {
@@ -21,6 +19,7 @@ function getColorForIconWrapper({
 
 export const IconWrapper = styled.div<{
   active: boolean;
+  archived: boolean;
   type: SearchModel;
 }>`
   border: ${({ theme }) => `1px solid ${theme.fn.themeColor("border")}`};
@@ -30,7 +29,8 @@ export const IconWrapper = styled.div<{
   justify-content: center;
   width: 32px;
   height: 32px;
-  color: ${({ active, type }) => getColorForIconWrapper({ active, type })};
+  color: ${({ active, archived, type }) =>
+    getColorForIconWrapper(active, archived, type)};
   flex-shrink: 0;
   background: ${color("white")};
 `;

frontend/src/metabase/search/components/SearchResult/components/ItemIcon.tsx

@@ -5,6 +5,7 @@ import type { SearchModel, RecentItem } from "metabase-types/api";
 import { CollectionIcon } from "./CollectionIcon";
 import { DefaultIcon } from "./DefaultIcon";
 import { IconWrapper } from "./ItemIcon.styled";
+import { isWrappedResult } from "./utils";
 
 export interface IconComponentProps {
   item: WrappedResult | RecentItem;
@@ -36,8 +37,15 @@ export const ItemIcon = ({
   type,
   "data-testid": dataTestId,
 }: ItemIconProps) => {
+  const archived = Boolean(isWrappedResult(item) && item.archived);
+
   return (
-    <IconWrapper type={type} active={active} data-testid={dataTestId}>
+    <IconWrapper
+      type={type}
+      active={active}
+      archived={archived}
+      data-testid={dataTestId}
+    >
       <IconComponent item={item} type={type} />
     </IconWrapper>
   );

frontend/src/metabase/search/components/SearchResult/components/utils.ts

@@ -0,0 +1,7 @@
+import type { WrappedResult } from "metabase/search/types";
+
+import type { IconComponentProps } from "./ItemIcon";
+
+export const isWrappedResult = (
+  item: IconComponentProps["item"],
+): item is WrappedResult => item && "getIcon" in item;

frontend/src/metabase/search/components/SearchSidebar/SearchSidebar.tsx

@@ -8,6 +8,7 @@ import { CreatedByFilter } from "metabase/search/components/filters/CreatedByFil
 import { LastEditedAtFilter } from "metabase/search/components/filters/LastEditedAtFilter";
 import { LastEditedByFilter } from "metabase/search/components/filters/LastEditedByFilter";
 import { NativeQueryFilter } from "metabase/search/components/filters/NativeQueryFilter";
+import { SearchTrashedItemsFilter } from "metabase/search/components/filters/SearchTrashedItemsFilter";
 import { TypeFilter } from "metabase/search/components/filters/TypeFilter";
 import { SearchFilterKeys } from "metabase/search/constants";
 import type {
@@ -32,6 +33,7 @@ export const SearchSidebar = ({ value, onChange }: SearchSidebarProps) => {
     [SearchFilterKeys.LastEditedAt]: LastEditedAtFilter,
     [SearchFilterKeys.Verified]: PLUGIN_CONTENT_VERIFICATION.VerifiedFilter,
     [SearchFilterKeys.NativeQuery]: NativeQueryFilter,
+    [SearchFilterKeys.SearchTrashedItems]: SearchTrashedItemsFilter,
   };
 
   const onOutputChange = (key: FilterTypeKeys, val?: SearchQueryParamValue) => {
@@ -89,6 +91,7 @@ export const SearchSidebar = ({ value, onChange }: SearchSidebarProps) => {
       </Stack>
       {getFilter(SearchFilterKeys.Verified)}
       {getFilter(SearchFilterKeys.NativeQuery)}
+      {getFilter(SearchFilterKeys.SearchTrashedItems)}
     </Stack>
   );
 };

frontend/src/metabase/search/components/filters/IncludeTrashedItemsFilter.tsx

@@ -0,0 +1,10 @@
+import { t } from "ttag";
+
+import type { SearchFilterToggle } from "metabase/search/types";
+
+export const SearchTrashedItemsFilter: SearchFilterToggle = {
+  label: () => t`Search items in trash`,
+  type: "toggle",
+  fromUrl: value => value === "true",
+  toUrl: (value: boolean) => (value ? "true" : null),
+};

frontend/src/metabase/search/components/filters/SearchTrashedItemsFilter.tsx

@@ -0,0 +1,10 @@
+import { t } from "ttag";
+
+import type { SearchFilterToggle } from "metabase/search/types";
+
+export const SearchTrashedItemsFilter: SearchFilterToggle = {
+  label: () => t`Search items in trash`,
+  type: "toggle",
+  fromUrl: value => value === "true",
+  toUrl: (value: boolean) => (value ? "true" : null),
+};

frontend/src/metabase/search/constants.ts

@@ -8,6 +8,7 @@ export const SearchFilterKeys = {
   LastEditedBy: "last_edited_by",
   LastEditedAt: "last_edited_at",
   NativeQuery: "search_native_query",
+  SearchTrashedItems: "archived",
 } as const;
 
 export const enabledSearchTypes: EnabledSearchModel[] = [

frontend/src/metabase/search/types.ts

@@ -27,6 +27,7 @@ export type LastEditedByProps = UserId[];
 export type LastEditedAtFilterProps = string | null;
 export type VerifiedFilterProps = true | null;
 export type NativeQueryFilterProps = true | null;
+export type SearchTrashedItemsFilterProps = true | undefined;
 
 export type SearchFilterPropTypes = {
   [SearchFilterKeys.Type]: TypeFilterProps;
@@ -36,6 +37,7 @@ export type SearchFilterPropTypes = {
   [SearchFilterKeys.LastEditedBy]: LastEditedByProps;
   [SearchFilterKeys.LastEditedAt]: LastEditedAtFilterProps;
   [SearchFilterKeys.NativeQuery]: NativeQueryFilterProps;
+  [SearchFilterKeys.SearchTrashedItems]: SearchTrashedItemsFilterProps;
 };
 
 export type FilterTypeKeys = keyof SearchFilterPropTypes;