[Browse] Don't show filter icon when no models have been verified (#43284)

On the Browse models page we have a filter icon which opens a popover with a switch that toggles "Show only verified models". With this change, the icon is not rendered if there are no verified models at all.

e2e/test/scenarios/onboarding/home/browse.cy.spec.js

 import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
 import { ORDERS_MODEL_ID } from "e2e/support/cypress_sample_instance_data";
 import {
-  restore,
-  setTokenFeatures,
+  browseDatabases,
   describeWithSnowplow,
   describeWithSnowplowEE,
+  enableTracking,
   expectGoodSnowplowEvent,
-  resetSnowplow,
   expectNoBadSnowplowEvents,
-  enableTracking,
-  browseDatabases,
   navigationSidebar,
+  resetSnowplow,
+  restore,
+  setTokenFeatures,
 } from "e2e/support/helpers";
 
 const { PRODUCTS_ID } = SAMPLE_DATABASE;
@@ -74,14 +74,18 @@ describeWithSnowplow("scenarios > browse", () => {
     cy.go("back");
     cy.findByRole("heading", { name: "Sample Database" }).click();
     cy.findByRole("heading", { name: "Products" }).click();
-    cy.findByRole("gridcell", { name: "Rustic Paper Wallet" });
+    cy.findByRole(
+      "gridcell",
+      { name: "Rustic Paper Wallet" },
+      { timeout: 10000 },
+    );
   });
 
   it("on an open-source instance, the Browse models page has no controls for setting filters", () => {
     cy.visit("/");
     cy.findByRole("listitem", { name: "Browse models" }).click();
     cy.findByRole("button", { name: /filter icon/i }).should("not.exist");
-    cy.findByRole("switch", { name: /Only show verified models/ }).should(
+    cy.findByRole("switch", { name: /Show verified models only/ }).should(
       "not.exist",
     );
   });
@@ -99,14 +103,54 @@ describeWithSnowplowEE("scenarios > browse (EE)", () => {
     const openFilterPopover = () =>
       cy.findByRole("button", { name: /filter icon/i }).click();
     const toggle = () =>
-      cy.findByRole("switch", { name: /Only show verified models/ });
+      cy.findByRole("switch", { name: /Show verified models only/ });
     setTokenFeatures("all");
+
+    cy.log('Create a "Products" model');
+    cy.createQuestion({
+      name: "Products Model",
+      query: {
+        "source-table": PRODUCTS_ID,
+        limit: 10,
+      },
+      type: "model",
+    });
+
     cy.visit("/");
     cy.findByRole("listitem", { name: "Browse models" }).click();
-    cy.findByRole("heading", { name: "Our analytics" }).should("not.exist");
-    cy.findByRole("heading", { name: "Orders Model" }).should("not.exist");
-    openFilterPopover();
-    toggle().next("label").click();
+
+    const productsModel = () =>
+      cy.findByRole("heading", { name: "Products Model" });
+    const ordersModel = () =>
+      cy.findByRole("heading", { name: "Orders Model" });
+    const productsModelRow = () =>
+      cy.findByRole("row", { name: /Products Model/i });
+    const ordersModelRow = () =>
+      cy.findByRole("row", { name: /Orders Model/i });
+
+    cy.log("Cells for the Products and Orders models exist");
+    productsModel().should("exist");
+    ordersModel().should("exist");
+
+    cy.log(
+      "In the Browse models table, the Products Model is marked as unverified",
+    );
+    productsModelRow().within(() => {
+      cy.icon("model").should("exist");
+      cy.icon("model_with_badge").should("not.exist");
+    });
+    cy.log(
+      "In the Browse models table, the Orders Model is marked as unverified",
+    );
+    ordersModelRow().within(() => {
+      cy.icon("model").should("exist");
+      cy.icon("model_with_badge").should("not.exist");
+    });
+
+    cy.log("There are no verified models, so the filter toggle is not visible");
+    cy.findByRole("button", { name: /filter icon/i }).should("not.exist");
+
+    cy.log("Verify the Orders Model");
     cy.findByRole("heading", { name: "Orders Model" }).click();
     cy.findByLabelText("Move, trash, and more...").click();
     cy.findByRole("dialog", {
@@ -114,9 +158,42 @@ describeWithSnowplowEE("scenarios > browse (EE)", () => {
     })
       .findByText(/Verify this model/)
       .click();
-    cy.visit("/browse");
+
+    cy.visit("/");
+    cy.findByRole("listitem", { name: "Browse models" }).click();
+
+    cy.log(
+      "The Products Model does not appear in the table, since it's not verified",
+    );
+    productsModel().should("not.exist");
+
+    cy.log("The Orders Model appears in the table");
+    ordersModel().should("exist");
+
+    cy.log("The Orders Model now appears in the table as verified");
+    ordersModelRow().within(() => {
+      cy.icon("model").should("not.exist");
+      cy.icon("model_with_badge").should("exist");
+    });
+
+    cy.log("The filter toggle is now visible");
+    cy.findByRole("button", { name: /filter icon/i }).should("be.visible");
+
+    cy.log("There are no icons in the table representing unverified models");
+    cy.findByRole("table").icon("model").should("not.exist");
+
+    cy.log("Show all models");
     openFilterPopover();
     toggle().next("label").click();
-    cy.findByRole("heading", { name: "Orders Model" }).should("be.visible");
+
+    cy.log("The Products and Orders models now both exist in the table");
+    productsModel().should("exist");
+    ordersModel().should("exist");
+
+    cy.log("The Products Model appears as unverified");
+    productsModelRow().within(() => {
+      cy.icon("model").should("exist");
+      cy.icon("model_with_badge").should("not.exist");
+    });
   });
 });

enterprise/frontend/src/metabase-enterprise/content_verification/ModelFilterControls.tsx

@@ -47,7 +47,7 @@ export const ModelFilterControls = ({
             <Text
               align="end"
               weight="bold"
-            >{t`Only show verified models`}</Text>
+            >{t`Show verified models only`}</Text>
           }
           role="switch"
           checked={checked}

frontend/src/metabase/browse/components/BrowseModels.tsx

@@ -9,7 +9,6 @@ import { PLUGIN_CONTENT_VERIFICATION } from "metabase/plugins";
 import { Box, Flex, Group, Icon, Stack, Title } from "metabase/ui";
 import type { ModelResult, SearchRequest } from "metabase-types/api";
 
-import type { ActualModelFilters } from "../utils";
 import { filterModels } from "../utils";
 
 import {
@@ -28,6 +27,29 @@ const { availableModelFilters, useModelFilterSettings, ModelFilterControls } =
 export const BrowseModels = () => {
   const [actualModelFilters, setActualModelFilters] = useModelFilterSettings();
 
+  const query: SearchRequest = {
+    models: ["dataset"], // 'model' in the sense of 'type of thing'
+    model_ancestors: true,
+    filter_items_in_personal_collection: "exclude",
+  };
+  const result = useSearchQuery(query);
+
+  const { allModels, doVerifiedModelsExist } = useMemo(() => {
+    const allModels = (result.data?.data as ModelResult[] | undefined) ?? [];
+    const doVerifiedModelsExist = allModels.some(
+      model => model.moderated_status === "verified",
+    );
+    return { allModels, doVerifiedModelsExist };
+  }, [result]);
+
+  const { filteredModels } = useMemo(() => {
+    // If no models are verified, don't filter them
+    const filteredModels = doVerifiedModelsExist
+      ? filterModels(allModels, actualModelFilters, availableModelFilters)
+      : allModels;
+    return { filteredModels };
+  }, [allModels, actualModelFilters, doVerifiedModelsExist]);
+
   return (
     <BrowseContainer>
       <BrowseHeader>
@@ -45,16 +67,18 @@ export const BrowseModels = () => {
                 {t`Models`}
               </Group>
             </Title>
-            <ModelFilterControls
-              actualModelFilters={actualModelFilters}
-              setActualModelFilters={setActualModelFilters}
-            />
+            {doVerifiedModelsExist && (
+              <ModelFilterControls
+                actualModelFilters={actualModelFilters}
+                setActualModelFilters={setActualModelFilters}
+              />
+            )}
           </Flex>
         </BrowseSection>
       </BrowseHeader>
       <BrowseMain>
         <BrowseSection>
-          <BrowseModelsBody actualModelFilters={actualModelFilters} />
+          <BrowseModelsBody result={result} models={filteredModels} />
         </BrowseSection>
       </BrowseMain>
     </BrowseContainer>
@@ -62,44 +86,27 @@ export const BrowseModels = () => {
 };
 
 export const BrowseModelsBody = ({
-  actualModelFilters,
+  models,
+  result,
 }: {
-  /** Mapping of filter names to true if the filter is active
-   * or false if it is inactive */
-  actualModelFilters: ActualModelFilters;
+  models: ModelResult[];
+  result: { error?: any; isLoading: boolean };
 }) => {
-  const query: SearchRequest = {
-    models: ["dataset"], // 'model' in the sense of 'type of thing'
-    model_ancestors: true,
-    filter_items_in_personal_collection: "exclude",
-  };
-  const { data, error, isLoading } = useSearchQuery(query);
-
-  const filteredModels = useMemo(() => {
-    const unfilteredModels = (data?.data as ModelResult[]) ?? [];
-    const filteredModels = filterModels(
-      unfilteredModels,
-      actualModelFilters,
-      availableModelFilters,
-    );
-    return filteredModels;
-  }, [data, actualModelFilters]);
-
-  if (error || isLoading) {
+  if (result.error || result.isLoading) {
     return (
       <LoadingAndErrorWrapper
-        error={error}
-        loading={isLoading}
+        error={result.error}
+        loading={result.isLoading}
         style={{ flex: 1 }}
       />
     );
   }
 
-  if (filteredModels.length) {
+  if (models.length) {
     return (
       <Stack mb="lg" spacing="md">
         <ModelExplanationBanner />
-        <ModelsTable models={filteredModels} />
+        <ModelsTable models={models} />
       </Stack>
     );
   }

frontend/src/metabase/browse/components/ModelsTable.tsx

@@ -245,8 +245,12 @@ const NameCell = ({
   icon: IconProps;
 }) => {
   const { id, name } = model;
+  const headingId = `model-${id}-heading`;
   return (
-    <ItemNameCell data-testid={`${testIdPrefix}-name`}>
+    <ItemNameCell
+      data-testid={`${testIdPrefix}-name`}
+      aria-labelledby={headingId}
+    >
       <ItemLink
         to={Urls.model({ id, name })}
         onClick={onClick}
@@ -262,7 +266,7 @@ const NameCell = ({
           color={color("brand")}
           style={{ flexShrink: 0 }}
         />
-        <EntityItem.Name name={model.name} variant="list" />
+        <EntityItem.Name name={model.name} variant="list" id={headingId} />
       </ItemLink>
     </ItemNameCell>
   );

frontend/src/metabase/components/EntityItem/EntityItem.tsx

@@ -96,12 +96,20 @@ const EntityIconCheckBox = ({
   );
 };
 
-function EntityItemName({ name, variant }: { name: string; variant?: string }) {
+function EntityItemName({
+  name,
+  variant,
+  ...props
+}: {
+  name: string;
+  variant?: string;
+} & React.HTMLAttributes<HTMLHeadingElement>) {
   return (
     <h3
       className={cx(CS.overflowHidden, {
         [CS.textList]: variant === "list",
       })}
+      {...props}
     >
       <Ellipsified>{name}</Ellipsified>
     </h3>