Merge pull request metabase#7832 from metabase/dnd-actions

Drag and drop collection actions + split up /api/collections/:id endpoint

.prettierrc

@@ -1,3 +1,3 @@
 {
-  "trailing-comma": "all"
+  "trailingComma": "all"
 }

frontend/src/metabase/admin/permissions/selectors.js

@@ -656,31 +656,29 @@ export const getDatabasesPermissionsGrid = createSelector(
   },
 );
 
-import Collections, { getCollectionsById } from "metabase/entities/collections";
+import Collections from "metabase/entities/collections";
 
 const getCollectionId = (state, props) => props && props.collectionId;
 const getSingleCollectionPermissionsMode = (state, props) =>
   (props && props.singleCollectionMode) || false;
 
 const getCollections = createSelector(
   [
-    Collections.selectors.getList,
+    Collections.selectors.getExpandedCollectionsById,
     getCollectionId,
     getSingleCollectionPermissionsMode,
   ],
-  (collections, collectionId, singleMode) => {
-    if (!collections) {
-      return null;
-    }
-    const collectionsById = getCollectionsById(collections);
+  (collectionsById, collectionId, singleMode) => {
     if (collectionId && collectionsById[collectionId]) {
       if (singleMode) {
         return [collectionsById[collectionId]];
       } else {
         return collectionsById[collectionId].children;
       }
-    } else {
+    } else if (collectionsById["root"]) {
       return [collectionsById["root"]];
+    } else {
+      return null;
     }
   },
 );

frontend/src/metabase/app.js

@@ -34,10 +34,15 @@ import { getStore } from "./store";
 
 import { refreshSiteSettings } from "metabase/redux/settings";
 
+// router
 import { Router, useRouterHistory } from "react-router";
 import { createHistory } from "history";
 import { syncHistoryWithStore } from "react-router-redux";
 
+// drag and drop
+import HTML5Backend from "react-dnd-html5-backend";
+import { DragDropContextProvider } from "react-dnd";
+
 // remove trailing slash
 const BASENAME = window.MetabaseRoot.replace(/\/+$/, "");
 
@@ -58,9 +63,11 @@ function _init(reducers, getRoutes, callback) {
 
   ReactDOM.render(
     <Provider store={store}>
-      <ThemeProvider theme={theme}>
-        <Router history={history}>{routes}</Router>
-      </ThemeProvider>
+      <DragDropContextProvider backend={HTML5Backend} context={{ window }}>
+        <ThemeProvider theme={theme}>
+          <Router history={history}>{routes}</Router>
+        </ThemeProvider>
+      </DragDropContextProvider>
     </Provider>,
     document.getElementById("root"),
   );

frontend/src/metabase/components/CheckBox.jsx

@@ -7,10 +7,12 @@ import { normal as defaultColors } from "metabase/lib/colors";
 export default class CheckBox extends Component {
   static propTypes = {
     checked: PropTypes.bool,
+    indeterminate: PropTypes.bool,
     onChange: PropTypes.func,
     color: PropTypes.oneOf(Object.keys(defaultColors)),
     size: PropTypes.number, // TODO - this should probably be a concrete set of options
     padding: PropTypes.number, // TODO - the component should pad itself properly based on the size
+    noIcon: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -31,15 +33,16 @@ export default class CheckBox extends Component {
   }
 
   render() {
-    const { checked, color, padding, size } = this.props;
+    const { checked, indeterminate, color, padding, size, noIcon } = this.props;
 
-    const themeColor = defaultColors[color];
+    const checkedColor = defaultColors[color];
+    const uncheckedColor = "#ddd";
 
     const checkboxStyle = {
       width: size,
       height: size,
-      backgroundColor: checked ? themeColor : "white",
-      border: `2px solid ${checked ? themeColor : "#ddd"}`,
+      backgroundColor: checked ? checkedColor : "white",
+      border: `2px solid ${checked ? checkedColor : uncheckedColor}`,
     };
     return (
       <div
@@ -52,13 +55,14 @@ export default class CheckBox extends Component {
           style={checkboxStyle}
           className="flex align-center justify-center rounded"
         >
-          {checked && (
-            <Icon
-              style={{ color: checked ? "white" : themeColor }}
-              name="check"
-              size={size - padding * 2}
-            />
-          )}
+          {(checked || indeterminate) &&
+            !noIcon && (
+              <Icon
+                style={{ color: checked ? "white" : uncheckedColor }}
+                name={indeterminate ? "dash" : "check"}
+                size={size - padding * 2}
+              />
+            )}
         </div>
       </div>
     );