Skip to content
Snippets Groups Projects
Unverified Commit 889a8d99 authored by github-automation-metabase's avatar github-automation-metabase Committed by GitHub
Browse files

Split View components into multiple files (#49034) (#49139) 


Co-authored-by: default avatarOisin Coveney <oisin@metabase.com>
parent b7651d7e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 723 additions and 2 deletions
frontend/src/metabase/query_builder/components/view/View/NativeQueryRightSidebar/NativeQueryRightSidebar.jsx 0 → 100644
+ 75
− 0
View file @ 889a8d99
import { match } from "ts-pattern";
import DataReference from "metabase/query_builder/components/dataref/DataReference";
import { SnippetSidebar } from "metabase/query_builder/components/template_tags/SnippetSidebar";
import { TagEditorSidebar } from "metabase/query_builder/components/template_tags/TagEditorSidebar";
import { QuestionInfoSidebar } from "metabase/query_builder/components/view/sidebars/QuestionInfoSidebar";
import { QuestionSettingsSidebar } from "metabase/query_builder/components/view/sidebars/QuestionSettingsSidebar";
import TimelineSidebar from "metabase/query_builder/components/view/sidebars/TimelineSidebar";
export const NativeQueryRightSidebar = props => {
const {
question,
toggleTemplateTagsEditor,
toggleDataReference,
toggleSnippetSidebar,
showTimelineEvent,
showTimelineEvents,
hideTimelineEvents,
selectTimelineEvents,
deselectTimelineEvents,
onCloseTimelines,
onSave,
onCloseQuestionInfo,
isShowingTemplateTagsEditor,
isShowingDataReference,
isShowingSnippetSidebar,
isShowingTimelineSidebar,
isShowingQuestionInfoSidebar,
isShowingQuestionSettingsSidebar,
} = props;
return match({
isShowingTemplateTagsEditor,
isShowingDataReference,
isShowingSnippetSidebar,
isShowingTimelineSidebar,
isShowingQuestionInfoSidebar,
isShowingQuestionSettingsSidebar,
})
.with({ isShowingTemplateTagsEditor: true }, () => (
<TagEditorSidebar
{...props}
query={question.legacyQuery()}
onClose={toggleTemplateTagsEditor}
/>
))
.with({ isShowingDataReference: true }, () => (
<DataReference {...props} onClose={toggleDataReference} />
))
.with({ isShowingSnippetSidebar: true }, () => (
<SnippetSidebar {...props} onClose={toggleSnippetSidebar} />
))
.with({ isShowingTimelineSidebar: true }, () => (
<TimelineSidebar
{...props}
onShowTimelineEvent={showTimelineEvent}
onShowTimelineEvents={showTimelineEvents}
onHideTimelineEvents={hideTimelineEvents}
onSelectTimelineEvents={selectTimelineEvents}
onDeselectTimelineEvents={deselectTimelineEvents}
onClose={onCloseTimelines}
/>
))
.with({ isShowingQuestionInfoSidebar: true }, () => (
<QuestionInfoSidebar
question={question}
onSave={onSave}
onClose={onCloseQuestionInfo}
/>
))
.with({ isShowingQuestionSettingsSidebar: true }, () => (
<QuestionSettingsSidebar question={question} />
))
.otherwise(() => null);
};
frontend/src/metabase/query_builder/components/view/View/NativeQueryRightSidebar/index.ts 0 → 100644
+ 1
− 0
View file @ 889a8d99
export * from "./NativeQueryRightSidebar";
frontend/src/metabase/query_builder/components/view/View/StructuredQueryRightSidebar/StructuredQueryRightSidebar.jsx 0 → 100644
+ 90
− 0
View file @ 889a8d99
import { match } from "ts-pattern";
import { QuestionInfoSidebar } from "metabase/query_builder/components/view/sidebars/QuestionInfoSidebar";
import { QuestionSettingsSidebar } from "metabase/query_builder/components/view/sidebars/QuestionSettingsSidebar";
import { SummarizeSidebar } from "metabase/query_builder/components/view/sidebars/SummarizeSidebar";
import TimelineSidebar from "metabase/query_builder/components/view/sidebars/TimelineSidebar";
import * as Lib from "metabase-lib";
export const StructuredQueryRightSidebar = ({
deselectTimelineEvents,
hideTimelineEvents,
isShowingQuestionInfoSidebar,
isShowingQuestionSettingsSidebar,
isShowingSummarySidebar,
isShowingTimelineSidebar,
onCloseQuestionInfo,
onCloseSummary,
onCloseTimelines,
onOpenModal,
onSave,
question,
selectTimelineEvents,
selectedTimelineEventIds,
showTimelineEvents,
timelines,
updateQuestion,
visibleTimelineEventIds,
xDomain,
}) =>
match({
isSaved: question.isSaved(),
isShowingSummarySidebar,
isShowingTimelineSidebar,
isShowingQuestionInfoSidebar,
isShowingQuestionSettingsSidebar,
})
.with(
{
isShowingSummarySidebar: true,
},
() => (
<SummarizeSidebar
query={question.query()}
onQueryChange={nextQuery => {
const datesetQuery = Lib.toLegacyQuery(nextQuery);
const nextQuestion = question.setDatasetQuery(datesetQuery);
updateQuestion(nextQuestion.setDefaultDisplay(), {
run: true,
});
}}
onClose={onCloseSummary}
/>
),
)
.with({ isShowingTimelineSidebar: true }, () => (
<TimelineSidebar
question={question}
timelines={timelines}
visibleTimelineEventIds={visibleTimelineEventIds}
selectedTimelineEventIds={selectedTimelineEventIds}
xDomain={xDomain}
onShowTimelineEvents={showTimelineEvents}
onHideTimelineEvents={hideTimelineEvents}
onSelectTimelineEvents={selectTimelineEvents}
onDeselectTimelineEvents={deselectTimelineEvents}
onOpenModal={onOpenModal}
onClose={onCloseTimelines}
/>
))
.with(
{
isSaved: true,
isShowingQuestionInfoSidebar: true,
},
() => (
<QuestionInfoSidebar
question={question}
onSave={onSave}
onClose={onCloseQuestionInfo}
/>
),
)
.with(
{
isSaved: true,
isShowingQuestionSettingsSidebar: true,
},
() => <QuestionSettingsSidebar question={question} />,
)
.otherwise(() => null);
frontend/src/metabase/query_builder/components/view/View/StructuredQueryRightSidebar/index.ts 0 → 100644
+ 1
− 0
View file @ 889a8d99
export * from "./StructuredQueryRightSidebar";
frontend/src/metabase/query_builder/components/view/View.jsx → frontend/src/metabase/query_builder/components/view/View/View.jsx
+ 299
− 0
View file @ 889a8d99
......@@ -6,7 +6,6 @@ import { t } from "ttag";
import _ from "underscore";
import { deletePermanently } from "metabase/archive/actions";
import { ArchivedEntityBanner } from "metabase/archive/components/ArchivedEntityBanner";
import ExplicitSize from "metabase/components/ExplicitSize";
import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
import Toaster from "metabase/components/Toaster";
......@@ -18,409 +17,26 @@ import {
rememberLastUsedDatabase,
setArchivedQuestion,
} from "metabase/query_builder/actions";
import { ViewHeaderContainer } from "metabase/query_builder/components/view/View/ViewHeaderContainer/ViewHeaderContainer";
import { ViewLeftSidebarContainer } from "metabase/query_builder/components/view/View/ViewLeftSidebarContainer/ViewLeftSidebarContainer";
import { ViewMainContainer } from "metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer";
import { ViewRightSidebarContainer } from "metabase/query_builder/components/view/View/ViewRightSidebarContainer/ViewRightSidebarContainer";
import { SIDEBAR_SIZES } from "metabase/query_builder/constants";
import { TimeseriesChrome } from "metabase/querying/filters/components/TimeseriesChrome";
import { MetricEditor } from "metabase/querying/metrics/components/MetricEditor";
import { Transition } from "metabase/ui";
import * as Lib from "metabase-lib";
import DatasetEditor from "../DatasetEditor";
import NativeQueryEditor from "../NativeQueryEditor";
import { QueryModals } from "../QueryModals";
import QueryVisualization from "../QueryVisualization";
import { SavedQuestionIntroModal } from "../SavedQuestionIntroModal";
import DataReference from "../dataref/DataReference";
import { SnippetSidebar } from "../template_tags/SnippetSidebar";
import { TagEditorSidebar } from "../template_tags/TagEditorSidebar";
import DatasetEditor from "../../DatasetEditor";
import { QueryModals } from "../../QueryModals";
import { SavedQuestionIntroModal } from "../../SavedQuestionIntroModal";
import ViewSidebar from "../ViewSidebar";
import NewQuestionHeader from "./NewQuestionHeader";
import { NotebookContainer } from "./View/NotebookContainer";
import { NotebookContainer } from "./NotebookContainer";
import {
BorderedViewTitleHeader,
NativeQueryEditorContainer,
QueryBuilderContentContainer,
QueryBuilderMain,
QueryBuilderViewHeaderContainer,
QueryBuilderViewRoot,
StyledDebouncedFrame,
StyledSyncedParametersList,
} from "./View.styled";
import { ViewFooter } from "./ViewFooter";
import ViewSidebar from "./ViewSidebar";
import { ChartSettingsSidebar } from "./sidebars/ChartSettingsSidebar";
import { ChartTypeSidebar } from "./sidebars/ChartTypeSidebar";
import { QuestionInfoSidebar } from "./sidebars/QuestionInfoSidebar";
import { QuestionSettingsSidebar } from "./sidebars/QuestionSettingsSidebar";
import { SummarizeSidebar } from "./sidebars/SummarizeSidebar";
import TimelineSidebar from "./sidebars/TimelineSidebar";
const fadeIn = {
in: { opacity: 1 },
out: { opacity: 0 },
transitionProperty: "opacity",
};
const ViewHeaderContainer = props => {
const { question, onUnarchive, onMove, onDeletePermanently } = props;
const query = question.query();
const card = question.card();
const { isNative } = Lib.queryDisplayInfo(query);
const isNewQuestion = !isNative && Lib.sourceTableOrCardId(query) === null;
return (
<QueryBuilderViewHeaderContainer>
{card.archived && (
<ArchivedEntityBanner
name={card.name}
entityType={card.type}
canWrite={card.can_write}
canRestore={card.can_restore}
canDelete={card.can_delete}
onUnarchive={() => onUnarchive(question)}
onMove={collection => onMove(question, collection)}
onDeletePermanently={() => onDeletePermanently(card.id)}
/>
)}
<BorderedViewTitleHeader
{...props}
style={{
transition: "opacity 300ms linear",
opacity: isNewQuestion ? 0 : 1,
}}
/>
{/*This is used so that the New Question Header is unmounted after the animation*/}
<Transition mounted={isNewQuestion} transition={fadeIn} duration={300}>
{style => <NewQuestionHeader className={CS.spread} style={style} />}
</Transition>
</QueryBuilderViewHeaderContainer>
);
};
const ViewMainContainer = props => {
const {
queryBuilderMode,
mode,
question,
showLeftSidebar,
showRightSidebar,
parameters,
setParameterValue,
isLiveResizable,
updateQuestion,
} = props;
if (queryBuilderMode === "notebook") {
// we need to render main only in view mode
return;
}
const queryMode = mode && mode.queryMode();
const { isNative } = Lib.queryDisplayInfo(question.query());
const isSidebarOpen = showLeftSidebar || showRightSidebar;
return (
<QueryBuilderMain
isSidebarOpen={isSidebarOpen}
data-testid="query-builder-main"
>
{isNative ? (
<ViewNativeQueryEditor {...props} />
) : (
<StyledSyncedParametersList
parameters={parameters}
setParameterValue={setParameterValue}
commitImmediately
/>
)}
<StyledDebouncedFrame enabled={!isLiveResizable}>
<QueryVisualization
{...props}
noHeader
className={CS.spread}
mode={queryMode}
/>
</StyledDebouncedFrame>
<TimeseriesChrome
question={question}
updateQuestion={updateQuestion}
className={CS.flexNoShrink}
/>
<ViewFooter className={CS.flexNoShrink} />
</QueryBuilderMain>
);
};
const ViewLeftSidebarContainer = ({
question,
result,
isShowingChartSettingsSidebar,
isShowingChartTypeSidebar,
}) =>
match({
isShowingChartSettingsSidebar,
isShowingChartTypeSidebar,
})
.with(
{
isShowingChartSettingsSidebar: true,
},
() => <ChartSettingsSidebar question={question} result={result} />,
)
.with(
{
isShowingChartTypeSidebar: true,
},
() => <ChartTypeSidebar question={question} result={result} />,
)
.otherwise(() => null);
const ViewNativeQueryEditor = props => {
const {
question,
height,
isDirty,
isNativeEditorOpen,
card,
setParameterValueToDefault,
onSetDatabaseId,
} = props;
const legacyQuery = question.legacyQuery();
// Normally, when users open native models,
// they open an ad-hoc GUI question using the model as a data source
// (using the `/dataset` endpoint instead of the `/card/:id/query`)
// However, users without data permission open a real model as they can't use the `/dataset` endpoint
// So the model is opened as an underlying native question and the query editor becomes visible
// This check makes it hide the editor in this particular case
// More details: https://github.com/metabase/metabase/pull/20161
const { isEditable } = Lib.queryDisplayInfo(question.query());
if (question.type() === "model" && !isEditable) {
return null;
}
return (
<NativeQueryEditorContainer>
<NativeQueryEditor
{...props}
query={legacyQuery}
viewHeight={height}
isOpen={legacyQuery.isEmpty() || isDirty}
isInitiallyOpen={isNativeEditorOpen}
datasetQuery={card && card.dataset_query}
setParameterValueToDefault={setParameterValueToDefault}
onSetDatabaseId={onSetDatabaseId}
/>
</NativeQueryEditorContainer>
);
};
const ViewRightSidebarContainer = props => {
const {
question,
deselectTimelineEvents,
hideTimelineEvents,
isShowingQuestionInfoSidebar,
isShowingQuestionSettingsSidebar,
isShowingSummarySidebar,
isShowingTimelineSidebar,
onCloseQuestionInfo,
onCloseSummary,
onCloseTimelines,
onOpenModal,
onSave,
selectTimelineEvents,
selectedTimelineEventIds,
showTimelineEvents,
timelines,
updateQuestion,
visibleTimelineEventIds,
xDomain,
} = props;
const { isNative } = Lib.queryDisplayInfo(question.query());
return !isNative ? (
<StructuredQueryRightSidebar
deselectTimelineEvents={deselectTimelineEvents}
hideTimelineEvents={hideTimelineEvents}
isShowingQuestionInfoSidebar={isShowingQuestionInfoSidebar}
isShowingQuestionSettingsSidebar={isShowingQuestionSettingsSidebar}
isShowingSummarySidebar={isShowingSummarySidebar}
isShowingTimelineSidebar={isShowingTimelineSidebar}
onCloseQuestionInfo={onCloseQuestionInfo}
onCloseSummary={onCloseSummary}
onCloseTimelines={onCloseTimelines}
onOpenModal={onOpenModal}
onSave={onSave}
question={question}
selectTimelineEvents={selectTimelineEvents}
selectedTimelineEventIds={selectedTimelineEventIds}
showTimelineEvents={showTimelineEvents}
timelines={timelines}
updateQuestion={updateQuestion}
visibleTimelineEventIds={visibleTimelineEventIds}
xDomain={xDomain}
/>
) : (
<NativeQueryRightSidebar {...props} />
);
};
const StructuredQueryRightSidebar = ({
deselectTimelineEvents,
hideTimelineEvents,
isShowingQuestionInfoSidebar,
isShowingQuestionSettingsSidebar,
isShowingSummarySidebar,
isShowingTimelineSidebar,
onCloseQuestionInfo,
onCloseSummary,
onCloseTimelines,
onOpenModal,
onSave,
question,
selectTimelineEvents,
selectedTimelineEventIds,
showTimelineEvents,
timelines,
updateQuestion,
visibleTimelineEventIds,
xDomain,
}) =>
match({
isSaved: question.isSaved(),
isShowingSummarySidebar,
isShowingTimelineSidebar,
isShowingQuestionInfoSidebar,
isShowingQuestionSettingsSidebar,
})
.with(
{
isShowingSummarySidebar: true,
},
() => (
<SummarizeSidebar
query={question.query()}
onQueryChange={nextQuery => {
const datesetQuery = Lib.toLegacyQuery(nextQuery);
const nextQuestion = question.setDatasetQuery(datesetQuery);
updateQuestion(nextQuestion.setDefaultDisplay(), {
run: true,
});
}}
onClose={onCloseSummary}
/>
),
)
.with({ isShowingTimelineSidebar: true }, () => (
<TimelineSidebar
question={question}
timelines={timelines}
visibleTimelineEventIds={visibleTimelineEventIds}
selectedTimelineEventIds={selectedTimelineEventIds}
xDomain={xDomain}
onShowTimelineEvents={showTimelineEvents}
onHideTimelineEvents={hideTimelineEvents}
onSelectTimelineEvents={selectTimelineEvents}
onDeselectTimelineEvents={deselectTimelineEvents}
onOpenModal={onOpenModal}
onClose={onCloseTimelines}
/>
))
.with(
{
isSaved: true,
isShowingQuestionInfoSidebar: true,
},
() => (
<QuestionInfoSidebar
question={question}
onSave={onSave}
onClose={onCloseQuestionInfo}
/>
),
)
.with(
{
isSaved: true,
isShowingQuestionSettingsSidebar: true,
},
() => <QuestionSettingsSidebar question={question} />,
)
.otherwise(() => null);
const NativeQueryRightSidebar = props => {
const {
question,
toggleTemplateTagsEditor,
toggleDataReference,
toggleSnippetSidebar,
showTimelineEvent,
showTimelineEvents,
hideTimelineEvents,
selectTimelineEvents,
deselectTimelineEvents,
onCloseTimelines,
onSave,
onCloseQuestionInfo,
isShowingTemplateTagsEditor,
isShowingDataReference,
isShowingSnippetSidebar,
isShowingTimelineSidebar,
isShowingQuestionInfoSidebar,
isShowingQuestionSettingsSidebar,
} = props;
return match({
isShowingTemplateTagsEditor,
isShowingDataReference,
isShowingSnippetSidebar,
isShowingTimelineSidebar,
isShowingQuestionInfoSidebar,
isShowingQuestionSettingsSidebar,
})
.with({ isShowingTemplateTagsEditor: true }, () => (
<TagEditorSidebar
{...props}
query={question.legacyQuery()}
onClose={toggleTemplateTagsEditor}
/>
))
.with({ isShowingDataReference: true }, () => (
<DataReference {...props} onClose={toggleDataReference} />
))
.with({ isShowingSnippetSidebar: true }, () => (
<SnippetSidebar {...props} onClose={toggleSnippetSidebar} />
))
.with({ isShowingTimelineSidebar: true }, () => (
<TimelineSidebar
{...props}
onShowTimelineEvent={showTimelineEvent}
onShowTimelineEvents={showTimelineEvents}
onHideTimelineEvents={hideTimelineEvents}
onSelectTimelineEvents={selectTimelineEvents}
onDeselectTimelineEvents={deselectTimelineEvents}
onClose={onCloseTimelines}
/>
))
.with({ isShowingQuestionInfoSidebar: true }, () => (
<QuestionInfoSidebar
question={question}
onSave={onSave}
onClose={onCloseQuestionInfo}
/>
))
.with({ isShowingQuestionSettingsSidebar: true }, () => (
<QuestionSettingsSidebar question={question} />
))
.otherwise(() => null);
};
const View = props => {
const ViewInner = props => {
const {
question,
result,
......@@ -677,7 +293,7 @@ const mapDispatchToProps = dispatch => ({
},
});
export default _.compose(
export const View = _.compose(
ExplicitSize({ refreshMode: "debounceLeading" }),
connect(null, mapDispatchToProps),
)(View);
)(ViewInner);
frontend/src/metabase/query_builder/components/view/View.styled.tsx → frontend/src/metabase/query_builder/components/view/View/View.styled.tsx
+ 1
− 1
View file @ 889a8d99
......@@ -5,7 +5,7 @@ import DebouncedFrame from "metabase/components/DebouncedFrame";
import { SyncedParametersList } from "metabase/query_builder/components/SyncedParametersList";
import { breakpointMaxSmall } from "metabase/styled-components/theme/media-queries";
import { ViewTitleHeader } from "./ViewHeader";
import { ViewTitleHeader } from "../ViewHeader";
export const QueryBuilderViewRoot = styled.div`
display: flex;
......
frontend/src/metabase/query_builder/components/view/View/ViewHeaderContainer/ViewHeaderContainer.jsx 0 → 100644
+ 53
− 0
View file @ 889a8d99
/* eslint-disable react/prop-types */
import { ArchivedEntityBanner } from "metabase/archive/components/ArchivedEntityBanner";
import CS from "metabase/css/core/index.css";
import NewQuestionHeader from "metabase/query_builder/components/view/NewQuestionHeader";
import {
BorderedViewTitleHeader,
QueryBuilderViewHeaderContainer,
} from "metabase/query_builder/components/view/View/View.styled";
import { Transition } from "metabase/ui";
import * as Lib from "metabase-lib";
const fadeIn = {
in: { opacity: 1 },
out: { opacity: 0 },
transitionProperty: "opacity",
};
export const ViewHeaderContainer = props => {
const { question, onUnarchive, onMove, onDeletePermanently } = props;
const query = question.query();
const card = question.card();
const { isNative } = Lib.queryDisplayInfo(query);
const isNewQuestion = !isNative && Lib.sourceTableOrCardId(query) === null;
return (
<QueryBuilderViewHeaderContainer>
{card.archived && (
<ArchivedEntityBanner
name={card.name}
entityType={card.type}
canWrite={card.can_write}
canRestore={card.can_restore}
canDelete={card.can_delete}
onUnarchive={() => onUnarchive(question)}
onMove={collection => onMove(question, collection)}
onDeletePermanently={() => onDeletePermanently(card.id)}
/>
)}
<BorderedViewTitleHeader
{...props}
style={{
transition: "opacity 300ms linear",
opacity: isNewQuestion ? 0 : 1,
}}
/>
{/*This is used so that the New Question Header is unmounted after the animation*/}
<Transition mounted={isNewQuestion} transition={fadeIn} duration={300}>
{style => <NewQuestionHeader className={CS.spread} style={style} />}
</Transition>
</QueryBuilderViewHeaderContainer>
);
};
frontend/src/metabase/query_builder/components/view/View/ViewHeaderContainer/index.ts 0 → 100644
+ 1
− 0
View file @ 889a8d99
export * from "./ViewHeaderContainer";
frontend/src/metabase/query_builder/components/view/View/ViewLeftSidebarContainer/ViewLeftSidebarContainer.jsx 0 → 100644
+ 28
− 0
View file @ 889a8d99
import { match } from "ts-pattern";
import { ChartSettingsSidebar } from "metabase/query_builder/components/view/sidebars/ChartSettingsSidebar";
import { ChartTypeSidebar } from "metabase/query_builder/components/view/sidebars/ChartTypeSidebar";
export const ViewLeftSidebarContainer = ({
question,
result,
isShowingChartSettingsSidebar,
isShowingChartTypeSidebar,
}) =>
match({
isShowingChartSettingsSidebar,
isShowingChartTypeSidebar,
})
.with(
{
isShowingChartSettingsSidebar: true,
},
() => <ChartSettingsSidebar question={question} result={result} />,
)
.with(
{
isShowingChartTypeSidebar: true,
},
() => <ChartTypeSidebar question={question} result={result} />,
)
.otherwise(() => null);
frontend/src/metabase/query_builder/components/view/View/ViewLeftSidebarContainer/index.ts 0 → 100644
+ 1
− 0
View file @ 889a8d99
export * from "./ViewLeftSidebarContainer";
frontend/src/metabase/query_builder/components/view/View/ViewMainContainer/ViewMainContainer.jsx 0 → 100644
+ 67
− 0
View file @ 889a8d99
/* eslint-disable react/prop-types */
import CS from "metabase/css/core/index.css";
import QueryVisualization from "metabase/query_builder/components/QueryVisualization";
import {
QueryBuilderMain,
StyledDebouncedFrame,
StyledSyncedParametersList,
} from "metabase/query_builder/components/view/View/View.styled";
import { ViewNativeQueryEditor } from "metabase/query_builder/components/view/View/ViewNativeQueryEditor/ViewNativeQueryEditor";
import { ViewFooter } from "metabase/query_builder/components/view/ViewFooter";
import { TimeseriesChrome } from "metabase/querying/filters/components/TimeseriesChrome";
import * as Lib from "metabase-lib";
export const ViewMainContainer = props => {
const {
queryBuilderMode,
mode,
question,
showLeftSidebar,
showRightSidebar,
parameters,
setParameterValue,
isLiveResizable,
updateQuestion,
} = props;
if (queryBuilderMode === "notebook") {
// we need to render main only in view mode
return;
}
const queryMode = mode && mode.queryMode();
const { isNative } = Lib.queryDisplayInfo(question.query());
const isSidebarOpen = showLeftSidebar || showRightSidebar;
return (
<QueryBuilderMain
isSidebarOpen={isSidebarOpen}
data-testid="query-builder-main"
>
{isNative ? (
<ViewNativeQueryEditor {...props} />
) : (
<StyledSyncedParametersList
parameters={parameters}
setParameterValue={setParameterValue}
commitImmediately
/>
)}
<StyledDebouncedFrame enabled={!isLiveResizable}>
<QueryVisualization
{...props}
noHeader
className={CS.spread}
mode={queryMode}
/>
</StyledDebouncedFrame>
<TimeseriesChrome
question={question}
updateQuestion={updateQuestion}
className={CS.flexNoShrink}
/>
<ViewFooter className={CS.flexNoShrink} />
</QueryBuilderMain>
);
};
frontend/src/metabase/query_builder/components/view/View/ViewMainContainer/index.ts 0 → 100644
+ 1
− 0
View file @ 889a8d99
export * from "./ViewMainContainer";
frontend/src/metabase/query_builder/components/view/View/ViewNativeQueryEditor/ViewNativeQueryEditor.jsx 0 → 100644
+ 45
− 0
View file @ 889a8d99
/* eslint-disable react/prop-types */
import NativeQueryEditor from "metabase/query_builder/components/NativeQueryEditor";
import { NativeQueryEditorContainer } from "metabase/query_builder/components/view/View/View.styled";
import * as Lib from "metabase-lib";
export const ViewNativeQueryEditor = props => {
const {
question,
height,
isDirty,
isNativeEditorOpen,
card,
setParameterValueToDefault,
onSetDatabaseId,
} = props;
const legacyQuery = question.legacyQuery();
// Normally, when users open native models,
// they open an ad-hoc GUI question using the model as a data source
// (using the `/dataset` endpoint instead of the `/card/:id/query`)
// However, users without data permission open a real model as they can't use the `/dataset` endpoint
// So the model is opened as an underlying native question and the query editor becomes visible
// This check makes it hide the editor in this particular case
// More details: https://github.com/metabase/metabase/pull/20161
const { isEditable } = Lib.queryDisplayInfo(question.query());
if (question.type() === "model" && !isEditable) {
return null;
}
return (
<NativeQueryEditorContainer>
<NativeQueryEditor
{...props}
query={legacyQuery}
viewHeight={height}
isOpen={legacyQuery.isEmpty() || isDirty}
isInitiallyOpen={isNativeEditorOpen}
datasetQuery={card && card.dataset_query}
setParameterValueToDefault={setParameterValueToDefault}
onSetDatabaseId={onSetDatabaseId}
/>
</NativeQueryEditorContainer>
);
};
frontend/src/metabase/query_builder/components/view/View/ViewNativeQueryEditor/index.ts 0 → 100644
+ 1
− 0
View file @ 889a8d99
export * from "./ViewNativeQueryEditor";
frontend/src/metabase/query_builder/components/view/View/ViewRightSidebarContainer/ViewRightSidebarContainer.jsx 0 → 100644
+ 56
− 0
View file @ 889a8d99
/* eslint-disable react/prop-types */
import { NativeQueryRightSidebar } from "metabase/query_builder/components/view/View/NativeQueryRightSidebar/NativeQueryRightSidebar";
import { StructuredQueryRightSidebar } from "metabase/query_builder/components/view/View/StructuredQueryRightSidebar/StructuredQueryRightSidebar";
import * as Lib from "metabase-lib";
export const ViewRightSidebarContainer = props => {
const {
question,
deselectTimelineEvents,
hideTimelineEvents,
isShowingQuestionInfoSidebar,
isShowingQuestionSettingsSidebar,
isShowingSummarySidebar,
isShowingTimelineSidebar,
onCloseQuestionInfo,
onCloseSummary,
onCloseTimelines,
onOpenModal,
onSave,
selectTimelineEvents,
selectedTimelineEventIds,
showTimelineEvents,
timelines,
updateQuestion,
visibleTimelineEventIds,
xDomain,
} = props;
const { isNative } = Lib.queryDisplayInfo(question.query());
return !isNative ? (
<StructuredQueryRightSidebar
deselectTimelineEvents={deselectTimelineEvents}
hideTimelineEvents={hideTimelineEvents}
isShowingQuestionInfoSidebar={isShowingQuestionInfoSidebar}
isShowingQuestionSettingsSidebar={isShowingQuestionSettingsSidebar}
isShowingSummarySidebar={isShowingSummarySidebar}
isShowingTimelineSidebar={isShowingTimelineSidebar}
onCloseQuestionInfo={onCloseQuestionInfo}
onCloseSummary={onCloseSummary}
onCloseTimelines={onCloseTimelines}
onOpenModal={onOpenModal}
onSave={onSave}
question={question}
selectTimelineEvents={selectTimelineEvents}
selectedTimelineEventIds={selectedTimelineEventIds}
showTimelineEvents={showTimelineEvents}
timelines={timelines}
updateQuestion={updateQuestion}
visibleTimelineEventIds={visibleTimelineEventIds}
xDomain={xDomain}
/>
) : (
<NativeQueryRightSidebar {...props} />
);
};
frontend/src/metabase/query_builder/components/view/View/ViewRightSidebarContainer/index.ts 0 → 100644
+ 1
− 0
View file @ 889a8d99
export * from "./ViewRightSidebarContainer";
frontend/src/metabase/query_builder/components/view/View/index.ts 0 → 100644
+ 1
− 0
View file @ 889a8d99
export { View } from "./View";
frontend/src/metabase/query_builder/containers/QueryBuilder.jsx
+ 1
− 1
View file @ 889a8d99
......@@ -28,7 +28,7 @@ import {
} from "metabase/selectors/user";
import * as actions from "../actions";
import View from "../components/view/View";
import { View } from "../components/view/View";
import { VISUALIZATION_SLOW_TIMEOUT } from "../constants";
import {
getAutocompleteResultsFn,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment