Show all "details-only" columns in the metadata tab of the DatasetEditor (#24882)

* Show all "details-only" columns in the metadata tab of the DatasetEditor

* Remove unnecessary `_.compose`

Co-authored-by: Mahatthana (Kelvin) Nomsawadi <mahatthana.n@gmail.com>

* Move filtering condition from settings to _updateData

* Add e2e test for showing details-only column in metadata tab

* Fix breaking Table component

* Fix merge conflict

Co-authored-by: Mahatthana (Kelvin) Nomsawadi <mahatthana.n@gmail.com>

frontend/src/metabase/query_builder/components/DatasetEditor/DatasetEditor.jsx

@@ -464,6 +464,7 @@ function DatasetEditor(props) {
                 className="spread"
                 noHeader
                 queryBuilderMode="dataset"
+                isShowingDetailsOnlyColumns={datasetEditorTab === "metadata"}
                 hasMetadataPopovers={false}
                 handleVisualizationClick={handleTableElementClick}
                 tableHeaderHeight={isEditingMetadata && TABLE_HEADER_HEIGHT}

frontend/src/metabase/query_builder/components/VisualizationResult.jsx

@@ -12,6 +12,8 @@ import Modal from "metabase/components/Modal";
 import { ALERT_TYPE_ROWS } from "metabase-lib/lib/Alert";
 
 const ALLOWED_VISUALIZATION_PROPS = [
+  // Table
+  "isShowingDetailsOnlyColumns",
   // Table Interactive
   "hasMetadataPopovers",
   "tableHeaderHeight",

frontend/src/metabase/visualizations/visualizations/Table.jsx

@@ -351,7 +351,10 @@ export default class Table extends Component {
       const { cols, rows } = data;
       const columnSettings = settings["table.columns"];
       const columnIndexes = columnSettings
-        .filter(columnSetting => columnSetting.enabled)
+        .filter(
+          columnSetting =>
+            columnSetting.enabled || this.props.isShowingDetailsOnlyColumns,
+        )
         .map(columnSetting =>
           findColumnIndexForColumnSetting(cols, columnSetting),
         )
@@ -391,8 +394,7 @@ export default class Table extends Component {
     const [{ card }] = series;
     const sort = getIn(card, ["dataset_query", "query", "order-by"]) || null;
     const isPivoted = Table.isPivoted(series, settings);
-    const columnSettings = settings["table.columns"] || [];
-    const areAllColumnsHidden = !columnSettings.some(f => f.enabled);
+    const areAllColumnsHidden = data.cols.length === 0;
     const TableComponent = isDashboard ? TableSimple : TableInteractive;
 
     if (!data) {

frontend/test/metabase/scenarios/models/models-metadata.cy.spec.js

@@ -17,7 +17,7 @@ import {
 } from "./helpers/e2e-models-metadata-helpers";
 import { SAMPLE_DATABASE } from "__support__/e2e/cypress_sample_database";
 
-const { PEOPLE, REVIEWS } = SAMPLE_DATABASE;
+const { PEOPLE, PRODUCTS, PRODUCTS_ID, REVIEWS } = SAMPLE_DATABASE;
 
 describe("scenarios > models metadata", () => {
   beforeEach(() => {
@@ -270,6 +270,27 @@ describe("scenarios > models metadata", () => {
         });
       });
     });
+
+    it("models metadata tab should show columns with details-only visibility (metabase#22521)", () => {
+      cy.request("PUT", `/api/field/${PRODUCTS.VENDOR}`, {
+        visibility_type: "details-only",
+      });
+
+      const questionDetails = {
+        name: "22521",
+        dataset: true,
+        query: {
+          "source-table": PRODUCTS_ID,
+        },
+      };
+
+      cy.createQuestion(questionDetails, { visitQuestion: true });
+      openQuestionActions();
+      cy.findByText("Vendor").should("not.exist");
+      cy.findByText("Edit metadata").click();
+      cy.wait(["@cardQuery", "@cardQuery"]);
+      cy.findByText("Vendor").should("be.visible");
+    });
   });
 });