Move items to root collection via drag-n-drop (#16502)

frontend/src/metabase/collections/containers/CollectionSidebar.jsx

@@ -9,6 +9,8 @@ import * as Urls from "metabase/lib/urls";
 
 import Collection from "metabase/entities/collections";
 
+import CollectionDropTarget from "metabase/containers/dnd/CollectionDropTarget";
+
 import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
 import LoadingSpinner from "metabase/components/LoadingSpinner";
@@ -82,15 +84,25 @@ class CollectionSidebar extends React.Component {
     const { currentUser, isRoot, collectionId, list } = this.props;
     return (
       <React.Fragment>
-        <CollectionLink
-          to={Urls.collection({ id: "root" })}
-          selected={isRoot}
-          mb={1}
-          mt={2}
-        >
-          <Icon name="folder" mr={1} />
-          {t`Our analytics`}
-        </CollectionLink>
+        <Collection.Loader id="root">
+          {({ collection: root }) => (
+            <Box mb={1} mt={2}>
+              <CollectionDropTarget collection={root}>
+                {({ highlighted, hovered }) => (
+                  <CollectionLink
+                    to={Urls.collection({ id: "root" })}
+                    selected={isRoot}
+                    highlighted={highlighted}
+                    hovered={hovered}
+                  >
+                    {t`Our analytics`}
+                  </CollectionLink>
+                )}
+              </CollectionDropTarget>
+            </Box>
+          )}
+        </Collection.Loader>
+
         <Box pb={4}>
           <CollectionsList
             openCollections={this.state.openCollections}