Skip to content
Snippets Groups Projects
Unverified Commit 4c1f1bef authored by Tom Robinson's avatar Tom Robinson Committed by GitHub
Browse files

Merge pull request #7888 from metabase/issue-7709 

Use CollectionMoveModal in query builder
parents c87d0c11 800de094
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/containers/CollectionMoveModal.jsx
+ 22
− 14
View file @ 4c1f1bef
......@@ -13,25 +13,33 @@ import CollectionListLoader from "metabase/containers/CollectionListLoader";
import CollectionPicker from "metabase/containers/CollectionPicker";
class CollectionMoveModal extends React.Component {
state = {
// will eventually be the collection object representing the selected collection
// we store the whole object instead of just the ID so that we can use its
// name in the action button, and other properties
//
// undefined = no selection
// null = root collection
// number = non-root collection id
selectedCollection: undefined,
// whether the move action has started
// TODO: use this loading and error state in the UI
moving: false,
error: null,
};
constructor(props) {
super(props);
this.state = {
// will eventually be the collection object representing the selected collection
// we store the whole object instead of just the ID so that we can use its
// name in the action button, and other properties
//
// undefined = no selection
// null = root collection
// number = non-root collection id
//
selectedCollection:
props.initialCollectionId === undefined
? undefined
: { id: props.initialCollectionId },
// whether the move action has started
// TODO: use this loading and error state in the UI
moving: false,
error: null,
};
}
static propTypes = {
title: PropTypes.string.isRequired,
onClose: PropTypes.func.isRequired,
onMove: PropTypes.func.isRequired,
initialCollectionId: PropTypes.number,
};
render() {
......
frontend/src/metabase/query_builder/components/QueryHeader.jsx
+ 18
− 13
View file @ 4c1f1bef
......@@ -15,7 +15,7 @@ import Modal from "metabase/components/Modal.jsx";
import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
import QuestionSavedModal from "metabase/components/QuestionSavedModal.jsx";
import Tooltip from "metabase/components/Tooltip.jsx";
import MoveToCollection from "metabase/questions/containers/MoveToCollection.jsx";
import CollectionMoveModal from "metabase/containers/CollectionMoveModal.jsx";
import ArchiveQuestionModal from "metabase/query_builder/containers/ArchiveQuestionModal";
import SaveQuestionModal from "metabase/containers/SaveQuestionModal.jsx";
......@@ -289,25 +289,30 @@ export default class QueryHeader extends Component {
buttonSections.push([
<ModalWithTrigger
ref="move"
key="move"
full
triggerElement={
<Tooltip tooltip={t`Move question`}>
<Icon name="move" />
</Tooltip>
}
>
<MoveToCollection
questionId={this.props.card.id}
initialCollectionId={
this.props.card && this.props.card.collection_id
}
setCollection={({ id }, collection) => {
this.props.onSetCardAttribute("collection", collection);
this.props.onSetCardAttribute("collection_id", collection.id);
}}
/>
{({ onClose }) => (
<CollectionMoveModal
title={t`Which collection should this be in?`}
initialCollectionId={
this.props.card && this.props.card.collection_id
}
onClose={onClose}
onMove={collection => {
this.props.onSetCardAttribute("collection", collection);
this.props.onSetCardAttribute(
"collection_id",
collection && collection.id,
);
onClose();
}}
/>
)}
</ModalWithTrigger>,
]);
}
......
frontend/src/metabase/questions/containers/MoveToCollection.jsx deleted 100644 → 0
+ 0
− 106
View file @ c87d0c11
import React, { Component } from "react";
import { connect } from "react-redux";
import { t } from "c-3po";
import Button from "metabase/components/Button";
import Icon from "metabase/components/Icon";
import ModalContent from "metabase/components/ModalContent";
import CollectionListLoader from "metabase/containers/CollectionListLoader";
import cx from "classnames";
import Questions from "metabase/entities/questions";
const mapDispatchToProps = {
defaultSetCollection: Questions.actions.setCollection,
};
@connect(null, mapDispatchToProps)
export default class MoveToCollection extends Component {
constructor(props) {
super(props);
this.state = {
currentCollection: { id: props.initialCollectionId },
};
}
async onMove(collection) {
try {
this.setState({ error: null });
const setCollection =
this.props.setCollection || this.props.defaultSetCollection;
await setCollection({ id: this.props.questionId }, collection);
this.props.onClose();
} catch (error) {
this.setState({ error });
}
}
render() {
const { onClose } = this.props;
const { currentCollection, error } = this.state;
return (
<ModalContent
title={t`Which collection should this be in?`}
footer={
<div>
{error && (
<span className="text-error mr1">
{error.data && error.data.message}
</span>
)}
<Button className="mr1" onClick={onClose}>
{t`Cancel`}
</Button>
<Button
primary
disabled={currentCollection.id === undefined}
onClick={() => this.onMove(currentCollection)}
>
{t`Move`}
</Button>
</div>
}
fullPageModal={true}
onClose={onClose}
>
<CollectionListLoader writable>
{({ collections }) => (
<ol
className="List text-brand ml-auto mr-auto"
style={{ width: 520 }}
>
{[{ name: t`None`, id: null }]
.concat(collections)
.map((collection, index) => (
<li
className={cx(
"List-item flex align-center cursor-pointer mb1 p1",
{
"List-item--selected":
collection.id === currentCollection.id,
},
)}
key={index}
onClick={() =>
this.setState({ currentCollection: collection })
}
>
<Icon
className="Icon mr2"
name="all"
style={{
color: collection.color,
visibility: collection.color == null ? "hidden" : null,
}}
/>
<h3 className="List-item-title">{collection.name}</h3>
</li>
))}
</ol>
)}
</CollectionListLoader>
</ModalContent>
);
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment