From b9105e2469e86853799c9f5ce9caf4c14a7c8f63 Mon Sep 17 00:00:00 2001
From: Dalton <daltojohnso@users.noreply.github.com>
Date: Thu, 23 Dec 2021 12:37:20 -0800
Subject: [PATCH] replace FieldPane UI with DimensionInfo UI (#19455)
---
.../src/metabase-lib/lib/metadata/Field.ts | 2 +
.../components/dataref/FieldPane.jsx | 217 ------------------
.../components/dataref/FieldPane.tsx | 23 ++
3 files changed, 25 insertions(+), 217 deletions(-)
delete mode 100644 frontend/src/metabase/query_builder/components/dataref/FieldPane.jsx
create mode 100644 frontend/src/metabase/query_builder/components/dataref/FieldPane.tsx
diff --git a/frontend/src/metabase-lib/lib/metadata/Field.ts b/frontend/src/metabase-lib/lib/metadata/Field.ts
index aada78c70e8..c8aaf1bcc2e 100644
--- a/frontend/src/metabase-lib/lib/metadata/Field.ts
+++ b/frontend/src/metabase-lib/lib/metadata/Field.ts
@@ -41,6 +41,8 @@ import Dimension from "../Dimension";
*/
export default class Field extends Base {
+ name: string;
+
parent() {
return this.metadata ? this.metadata.field(this.parent_id) : null;
}
diff --git a/frontend/src/metabase/query_builder/components/dataref/FieldPane.jsx b/frontend/src/metabase/query_builder/components/dataref/FieldPane.jsx
deleted file mode 100644
index b31d67b4850..00000000000
--- a/frontend/src/metabase/query_builder/components/dataref/FieldPane.jsx
+++ /dev/null
@@ -1,217 +0,0 @@
-/* eslint "react/prop-types": "warn" */
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { t } from "ttag";
-import DetailPane from "./DetailPane";
-import QueryButton from "metabase/components/QueryButton";
-import UseForButton from "./UseForButton";
-
-import { fetchTableMetadata, fetchFieldValues } from "metabase/redux/metadata";
-import { getMetadata } from "metabase/selectors/metadata";
-import { createCard } from "metabase/lib/card";
-import * as Q_DEPRECATED from "metabase/lib/query";
-import { isDimension, isSummable } from "metabase/lib/schema_metadata";
-import inflection from "inflection";
-
-import _ from "underscore";
-import StructuredQuery from "metabase-lib/lib/queries/StructuredQuery";
-import { connect } from "react-redux";
-import Dimension from "metabase-lib/lib/Dimension";
-
-const mapDispatchToProps = {
- fetchTableMetadata,
- fetchFieldValues,
-};
-
-const mapStateToProps = (state, props) => ({
- metadata: getMetadata(state, props),
-});
-@connect(mapStateToProps, mapDispatchToProps)
-export default class FieldPane extends Component {
- constructor(props, context) {
- super(props, context);
- }
-
- static propTypes = {
- field: PropTypes.object.isRequired,
- datasetQuery: PropTypes.object,
- question: PropTypes.object,
- originalQuestion: PropTypes.object,
- metadata: PropTypes.object,
- fetchTableMetadata: PropTypes.func.isRequired,
- fetchFieldValues: PropTypes.func.isRequired,
- runQuestionQuery: PropTypes.func.isRequired,
- setDatasetQuery: PropTypes.func.isRequired,
- setCardAndRun: PropTypes.func.isRequired,
- updateQuestion: PropTypes.func.isRequired,
- };
-
- async UNSAFE_componentWillMount() {
- const { field, fetchTableMetadata, fetchFieldValues } = this.props;
- await fetchTableMetadata(field.table_id);
- if (field.has_field_values === "list") {
- await fetchFieldValues(field.id);
- }
- }
-
- // See the note in render() method about filterBy
- // filterBy() {
- // var datasetQuery = this.setDatabaseAndTable();
- // // Add an aggregation so both aggregation and filter popovers aren't visible
- // if (!Q_DEPRECATED.hasValidAggregation(datasetQuery.query)) {
- // Q_DEPRECATED.clearAggregations(datasetQuery.query);
- // }
- // Q_DEPRECATED.addFilter(datasetQuery.query, [null, this.props.field.id, null]);
- // this.props.setDatasetQuery(datasetQuery);
- // }
-
- groupBy = () => {
- const { question, metadata, field } = this.props;
- let query = question.query();
-
- if (query instanceof StructuredQuery) {
- // Add an aggregation so both aggregation and filter popovers aren't visible
- if (!Q_DEPRECATED.hasValidAggregation(query.datasetQuery().query)) {
- query = query.clearAggregations();
- }
-
- const defaultBreakout = metadata.field(field.id).getDefaultBreakout();
- query = query.breakout(defaultBreakout);
-
- this.props.updateQuestion(query.question());
- this.props.runQuestionQuery();
- }
- };
-
- newCard = () => {
- const { metadata, field } = this.props;
- const tableId = field.table_id;
- const dbId = metadata.table(tableId).database.id;
-
- const card = createCard();
- card.dataset_query = Q_DEPRECATED.createQuery("query", dbId, tableId);
- return card;
- };
-
- setQuerySum = () => {
- const card = this.newCard();
- card.dataset_query.query.aggregation = ["sum", this.props.field.id];
- this.props.setCardAndRun(card);
- };
-
- setQueryDistinct = () => {
- const { metadata, field } = this.props;
- const defaultBreakout = metadata.field(field.id).getDefaultBreakout();
-
- const card = this.newCard();
- card.dataset_query.query.aggregation = ["rows"];
- card.dataset_query.query.breakout = [defaultBreakout];
- this.props.setCardAndRun(card);
- };
-
- setQueryCountGroupedBy = chartType => {
- const { metadata, field } = this.props;
- const defaultBreakout = metadata.field(field.id).getDefaultBreakout();
-
- const card = this.newCard();
- card.dataset_query.query.aggregation = ["count"];
- card.dataset_query.query.breakout = [defaultBreakout];
- card.display = chartType;
- this.props.setCardAndRun(card);
- };
-
- isBreakoutWithCurrentField = breakout => {
- const { field, metadata } = this.props;
- const dimension = Dimension.parseMBQL(breakout, metadata);
- return dimension && dimension.field().id === field.id;
- };
-
- render() {
- const { field, question } = this.props;
-
- const query = question.query();
-
- const values =
- query.metadata().fields &&
- query.metadata().fields[field.id] &&
- query.metadata().fields[field.id].values;
-
- const fieldName = field.name;
- const tableName = query.table() ? query.table().name : "";
-
- const useForCurrentQuestion = [];
- const usefulQuestions = [];
-
- // determine if the selected field is a valid dimension on this table
- let validBreakout = false;
- if (query.table()) {
- const validDimensions = _.filter(query.table().fields, isDimension);
- validBreakout = _.some(validDimensions, f => f.id === field.id);
- }
-
- // TODO: allow for filters/grouping via foreign keys
- if (
- query instanceof StructuredQuery &&
- query.tableId() === field.table_id
- ) {
- // NOTE: disabled this for now because we need a way to capture the completed filter before adding it to the query, or to pop open the filter widget here?
- // useForCurrentQuestion.push(<UseForButton title={"Filter by " + name} onClick={this.filterBy} />);
-
- // current field must be a valid breakout option for this table AND cannot already be in the breakout clause of our query
- if (
- validBreakout &&
- !_.some(query.breakouts(), this.isBreakoutWithCurrentField)
- ) {
- useForCurrentQuestion.push(
- <UseForButton title={t`Group by ${name}`} onClick={this.groupBy} />,
- );
- }
- }
-
- if (isSummable(field)) {
- usefulQuestions.push(
- <QueryButton
- icon="number"
- text={t`Sum of all values`}
- onClick={this.setQuerySum}
- />,
- );
- }
- usefulQuestions.push(
- <QueryButton
- icon="table"
- text={t`See all distinct values`}
- onClick={this.setQueryDistinct}
- />,
- );
- const queryCountGroupedByText = t`Number of ${inflection.pluralize(
- tableName,
- )} grouped by ${fieldName}`;
- if (validBreakout) {
- usefulQuestions.push(
- <QueryButton
- icon="bar"
- text={queryCountGroupedByText}
- onClick={this.setQueryCountGroupedBy.bind(null, "bar")}
- />,
- );
- usefulQuestions.push(
- <QueryButton
- icon="pie"
- text={queryCountGroupedByText}
- onClick={this.setQueryCountGroupedBy.bind(null, "pie")}
- />,
- );
- }
-
- return (
- <DetailPane
- name={fieldName}
- description={field.description}
- useForCurrentQuestion={useForCurrentQuestion}
- usefulQuestions={usefulQuestions}
- values={values}
- />
- );
- }
-}
diff --git a/frontend/src/metabase/query_builder/components/dataref/FieldPane.tsx b/frontend/src/metabase/query_builder/components/dataref/FieldPane.tsx
new file mode 100644
index 00000000000..4a814f68ce2
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/dataref/FieldPane.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+import DimensionInfo from "metabase/components/MetadataInfo/DimensionInfo";
+import Icon from "metabase/components/Icon";
+import Field from "metabase-lib/lib/metadata/Field";
+
+type Props = { field: Field };
+
+function FieldPane({ field }: Props) {
+ const dimension = field.dimension();
+
+ return dimension ? (
+ <div>
+ <div className="flex align-center px2">
+ <Icon name="field" className="text-medium pr1" size={16} />
+ <h3 className="text-wrap">{field.name}</h3>
+ </div>
+ <DimensionInfo dimension={dimension} />
+ </div>
+ ) : null;
+}
+
+export default FieldPane;
--
GitLab