Fix drag-n-drop for data apps (#25082)

frontend/src/metabase/nav/containers/MainNavbar/MainNavbarView.tsx

@@ -10,7 +10,6 @@ import {
   getCollectionIcon,
   PERSONAL_COLLECTIONS,
 } from "metabase/entities/collections";
-import { getDataAppIcon } from "metabase/entities/data-apps";
 import { isSmallScreen } from "metabase/lib/dom";
 import * as Urls from "metabase/lib/urls";
 
@@ -18,7 +17,11 @@ import type { Bookmark, Collection, DataApp, User } from "metabase-types/api";
 
 import { SelectedItem } from "./types";
 import BookmarkList from "./BookmarkList";
-import { SidebarCollectionLink, SidebarLink } from "./SidebarItems";
+import {
+  SidebarCollectionLink,
+  SidebarDataAppLink,
+  SidebarLink,
+} from "./SidebarItems";
 import {
   AddYourOwnDataLink,
   CollectionMenuList,
@@ -140,14 +143,11 @@ function MainNavbarView({
             </SidebarHeadingWrapper>
             <ul>
               {dataApps.map(app => (
-                <PaddedSidebarLink
+                <SidebarDataAppLink
                   key={`app-${app.id}`}
-                  icon={getDataAppIcon(app)}
-                  url={Urls.dataApp(app, { mode: "preview" })}
+                  dataApp={app}
                   isSelected={dataAppItem?.id === app.id}
-                >
-                  {app.collection.name}
-                </PaddedSidebarLink>
+                />
               ))}
             </ul>
           </SidebarSection>

frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarDataAppLink.styled.tsx

+import styled from "@emotion/styled";
+
+import { space } from "metabase/styled-components/theme";
+
+import SidebarLink from "./SidebarLink";
+import { collectionDragAndDropHoverStyle } from "./SidebarItems.styled";
+
+export const DataAppLink = styled(SidebarLink)<{ isHovered: boolean }>`
+  padding-left: ${space(2)};
+
+  ${props => props.isHovered && collectionDragAndDropHoverStyle}
+`;

frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarDataAppLink.tsx

+import React from "react";
+
+import * as Urls from "metabase/lib/urls";
+
+import CollectionDropTarget from "metabase/containers/dnd/CollectionDropTarget";
+
+import { getDataAppIcon } from "metabase/entities/data-apps";
+
+import type { DataApp } from "metabase-types/api";
+
+import { DataAppLink } from "./SidebarDataAppLink.styled";
+
+type DroppableProps = {
+  hovered: boolean;
+  highlighted: boolean;
+};
+
+interface Props {
+  dataApp: DataApp;
+  isSelected: boolean;
+}
+
+function SidebarDataAppLink({
+  dataApp,
+  hovered: isHovered,
+  isSelected,
+}: Props & DroppableProps) {
+  const url = Urls.dataApp(dataApp, { mode: "preview" });
+  return (
+    <DataAppLink
+      url={url}
+      icon={getDataAppIcon(dataApp)}
+      isSelected={isSelected}
+      isHovered={isHovered}
+    >
+      {dataApp.collection.name}
+    </DataAppLink>
+  );
+}
+
+function DroppableSidebarDataAppLink({ dataApp, ...props }: Props) {
+  return (
+    <div data-testid="sidebar-collection-link-root">
+      <CollectionDropTarget collection={dataApp.collection}>
+        {(droppableProps: DroppableProps) => (
+          <SidebarDataAppLink
+            dataApp={dataApp}
+            {...props}
+            {...droppableProps}
+          />
+        )}
+      </CollectionDropTarget>
+    </div>
+  );
+}
+
+export default DroppableSidebarDataAppLink;

frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx

@@ -9,7 +9,7 @@ import Link from "metabase/core/components/Link";
 
 import { NAV_SIDEBAR_WIDTH } from "metabase/nav/constants";
 
-import { darken, color, lighten, alpha } from "metabase/lib/colors";
+import { darken, color, alpha } from "metabase/lib/colors";
 
 export const SidebarIcon = styled(Icon)<{
   color?: string | null;
@@ -72,13 +72,13 @@ NodeRoot.defaultProps = {
   hasDefaultIconStyle: true,
 };
 
+export const collectionDragAndDropHoverStyle = css`
+  color: ${color("text-white")};
+  background-color: ${color("brand")};
+`;
+
 export const CollectionNodeRoot = styled(NodeRoot)<{ hovered?: boolean }>`
-  ${props =>
-    props.hovered &&
-    css`
-      color: ${color("text-white")};
-      background-color: ${color("brand")};
-    `}
+  ${props => props.hovered && collectionDragAndDropHoverStyle}
 `;
 
 const itemContentStyle = css`

frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/index.ts

 export { default as SidebarCollectionLink } from "./SidebarCollectionLink";
+export { default as SidebarDataAppLink } from "./SidebarDataAppLink";
 export { default as SidebarLink } from "./SidebarLink";