Hide databases without actions from the action editor database picker (#28524)

* Wrap things with `useMemo` and `useCallback`

* Hide dbs without actions if `requireWriteback`

* Add e2e check

frontend/src/metabase/query_builder/components/DataSelector/DataSelectorDatabasePicker/DataSelectorDatabasePicker.tsx

-import React from "react";
+import React, { useCallback, useMemo } from "react";
 
 import Icon from "metabase/components/Icon";
 import AccordionList from "metabase/core/components/AccordionList";
@@ -27,14 +27,15 @@ type DataSelectorDatabasePickerProps = {
 };
 
 type Item = {
-  database: Database;
-  index: number;
   name: string;
+  index: number;
+  database: Database;
   writebackEnabled?: boolean;
 };
 
 type Section = {
-  items: Item[];
+  name?: JSX.Element;
+  items?: Item[];
 };
 
 const DataSelectorDatabasePicker = ({
@@ -46,31 +47,41 @@ const DataSelectorDatabasePicker = ({
   hasInitialFocus,
   requireWriteback = false,
 }: DataSelectorDatabasePickerProps) => {
-  if (databases.length === 0) {
-    return <DataSelectorLoading />;
-  }
+  const sections = useMemo(() => {
+    const sections: Section[] = [];
+
+    if (onBack) {
+      sections.push({ name: <RawDataBackButton /> });
+    }
 
-  const sections: Section[] = [
-    {
-      items: databases.map((database: Database, index: number) => ({
+    const databaseItems = databases
+      .filter(database =>
+        requireWriteback ? checkDatabaseActionsEnabled(database) : true,
+      )
+      .map((database, index) => ({
         name: database.name,
         index,
-        database: database,
-      })),
-    },
-  ];
+        database,
+      }));
 
-  const handleChangeSection = (_section: Section, sectionIndex: number) => {
-    const isNavigationSection = onBack && sectionIndex === 0;
+    sections.push({ items: databaseItems });
 
-    if (isNavigationSection) {
-      onBack();
-    }
-    return false;
-  };
+    return sections;
+  }, [databases, requireWriteback, onBack]);
 
-  if (onBack) {
-    sections.unshift({ name: <RawDataBackButton /> } as any);
+  const handleChangeSection = useCallback(
+    (section: Section, sectionIndex: number) => {
+      const isNavigationSection = onBack && sectionIndex === 0;
+      if (isNavigationSection) {
+        onBack();
+      }
+      return false;
+    },
+    [onBack],
+  );
+
+  if (databases.length === 0) {
+    return <DataSelectorLoading />;
   }
 
   return (
@@ -82,11 +93,6 @@ const DataSelectorDatabasePicker = ({
       sections={sections}
       onChange={(item: Item) => onChangeDatabase(item.database)}
       onChangeSection={handleChangeSection}
-      itemIsClickable={
-        requireWriteback
-          ? (item: Item) => checkDatabaseActionsEnabled(item.database)
-          : undefined
-      }
       itemIsSelected={(item: Item) =>
         selectedDatabase && item.database.id === selectedDatabase.id
       }

frontend/test/metabase/scenarios/models/model-actions.cy.spec.js

@@ -154,7 +154,10 @@ describe(
       popover().findByText("Action").click();
 
       cy.findByText("Select a database").click();
-      popover().findByText("QA Postgres12").click();
+      popover().within(() => {
+        cy.findByText("Sample Database").should("not.exist");
+        cy.findByText("QA Postgres12").click();
+      });
 
       fillActionQuery(QUERY);
       cy.findByRole("button", { name: "Save" }).click();