Remove the empty pinned section banner (#20074)

* remove the empty pinned section banner

* make drop zone show up without any items

* Skip associated unit test

frontend/src/metabase/collections/components/PinDropZone/PinDropZone.styled.tsx

@@ -12,6 +12,7 @@ export type PinDropTargetProps = {
 export type PinDropTargetRenderArgs = PinDropTargetProps & {
   hovered: boolean;
   highlighted: boolean;
+  empty?: boolean;
 };
 
 export const StyledPinDropTarget = styled(PinDropTarget)<PinDropTargetProps>`
@@ -39,4 +40,6 @@ export const PinDropTargetIndicator = styled.div<PinDropTargetRenderArgs>`
   border-left: ${props =>
     `4px solid ${props.hovered ? color("brand") : color("bg-medium")}`};
   display: ${props => !(props.hovered || props.highlighted) && "none"};
+  min-height: 2rem;
+  transform: ${props => props.empty && "translateY(-1rem)"};
 `;

frontend/src/metabase/collections/components/PinDropZone/PinDropZone.tsx

@@ -8,13 +8,17 @@ import {
   PinDropTargetRenderArgs,
 } from "./PinDropZone.styled";
 
-type PinDropZoneProps = Pick<PinDropTargetProps, "variant">;
+type PinDropZoneProps = {
+  variant: "pin" | "unpin";
+  empty?: boolean;
+};
 
 PinDropZone.propTypes = {
   variant: PropTypes.oneOf(["pin", "unpin"]).isRequired,
+  empty: PropTypes.bool,
 };
 
-function PinDropZone({ variant, ...props }: PinDropZoneProps) {
+function PinDropZone({ variant, empty, ...props }: PinDropZoneProps) {
   return (
     <StyledPinDropTarget
       variant={variant}
@@ -22,7 +26,9 @@ function PinDropZone({ variant, ...props }: PinDropZoneProps) {
       hideUntilDrag
       {...props}
     >
-      {(args: PinDropTargetRenderArgs) => <PinDropTargetIndicator {...args} />}
+      {(args: PinDropTargetRenderArgs) => (
+        <PinDropTargetIndicator empty={empty} {...args} />
+      )}
     </StyledPinDropTarget>
   );
 }

frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.tsx

@@ -5,7 +5,6 @@ import { t } from "ttag";
 import Metadata from "metabase-lib/lib/metadata/Metadata";
 import PinnedItemCard from "metabase/collections/components/PinnedItemCard";
 import CollectionCardVisualization from "metabase/collections/components/CollectionCardVisualization";
-import EmptyPinnedItemsBanner from "../EmptyPinnedItemsBanner/EmptyPinnedItemsBanner";
 import PinnedItemSortDropTarget from "metabase/collections/components/PinnedItemSortDropTarget";
 import { Item, Collection, isRootCollection } from "metabase/collections/utils";
 import PinDropZone from "metabase/collections/components/PinDropZone";
@@ -42,8 +41,7 @@ function PinnedItemOverview({
 
   return items.length === 0 ? (
     <Container>
-      <PinDropZone variant="pin" />
-      <EmptyPinnedItemsBanner />
+      <PinDropZone variant="pin" empty />
     </Container>
   ) : (
     <Container data-testid="pinned-items">

frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.unit.spec.js

@@ -60,7 +60,7 @@ function setup({ items, collection } = {}) {
 }
 
 describe("PinnedItemOverview", () => {
-  it("should render an empty banner when there are no items", () => {
+  it.skip("should render an empty banner when there are no items", () => {
     const { container } = setup({ items: [] });
     expect(container.textContent).toContain(
       "Save your questions, dashboards, and models in collections — and pin them to feature them at the top.",