feat: New works from galleries you follow home page rail (#12819)

* feat: Galleries from followed artists

* tests

* route

* tests

* address PR review comments

* smoke test

* placeholder fix

* fix header

* From -> from

.secrets.baseline

@@ -565,5 +565,5 @@
       }
     ]
   },
-  "generated_at": "2023-08-18T16:21:53Z"
+  "generated_at": "2023-09-07T10:54:58Z"
 }

cypress/e2e/newWorksFromGalleriesYouFollow.cy.ts

@@ -0,0 +1,9 @@
+import { visitWithStatusRetries } from "../helpers/visitWithStatusRetries"
+
+describe("New Works from Galleries You Follow", () => {
+  it("/new-works-from-galleries-you-follow", () => {
+    visitWithStatusRetries("new-works-from-galleries-you-follow")
+    cy.get("h1").should("contain", "New Works from Galleries You Follow")
+    cy.title().should("eq", "New Works from Galleries You Follow | Artsy")
+  })
+})

src/Apps/Home/Components/HomeNewWorksFromGalleriesYouFollowRail.tsx

@@ -0,0 +1,164 @@
+import { Skeleton } from "@artsy/palette"
+import * as React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { useSystemContext } from "System/useSystemContext"
+import { useTracking } from "react-tracking"
+import { SystemQueryRenderer } from "System/Relay/SystemQueryRenderer"
+import { HomeNewWorksFromGalleriesYouFollowRail_newWorksFromGalleriesYouFollowConnection$data } from "__generated__/HomeNewWorksFromGalleriesYouFollowRail_newWorksFromGalleriesYouFollowConnection.graphql"
+import { HomeNewWorksFromGalleriesYouFollowRailQuery } from "__generated__/HomeNewWorksFromGalleriesYouFollowRailQuery.graphql"
+import {
+  ShelfArtworkFragmentContainer,
+  ShelfArtworkPlaceholder,
+} from "Components/Artwork/ShelfArtwork"
+import { extractNodes } from "Utils/extractNodes"
+import {
+  ActionType,
+  ClickedArtworkGroup,
+  ContextModule,
+  OwnerType,
+  clickedEntityGroup,
+} from "@artsy/cohesion"
+import { Rail } from "Components/Rail/Rail"
+import { useAnalyticsContext } from "System/Analytics/AnalyticsContext"
+
+interface HomeNewWorksFromGalleriesYouFollowRailProps {
+  newWorksFromGalleriesYouFollowConnection: HomeNewWorksFromGalleriesYouFollowRail_newWorksFromGalleriesYouFollowConnection$data
+}
+
+const HomeNewWorksFromGalleriesYouFollowRail: React.FC<HomeNewWorksFromGalleriesYouFollowRailProps> = ({
+  newWorksFromGalleriesYouFollowConnection,
+}) => {
+  const { trackEvent } = useTracking()
+  const {
+    contextPageOwnerId,
+    contextPageOwnerSlug,
+    contextPageOwnerType,
+  } = useAnalyticsContext()
+
+  const artworks = extractNodes(newWorksFromGalleriesYouFollowConnection)
+
+  if (!artworks || artworks?.length === 0) {
+    return null
+  }
+
+  return (
+    <Rail
+      title="New Works from Galleries You Follow"
+      viewAllLabel="View All Works"
+      viewAllHref="/new-works-from-galleries-you-follow"
+      viewAllOnClick={() => {
+        trackEvent(
+          clickedEntityGroup({
+            contextModule: ContextModule.newWorksByGalleriesYouFollowRail,
+            contextPageOwnerId,
+            contextPageOwnerSlug,
+            contextPageOwnerType: contextPageOwnerType!,
+            destinationPageOwnerType: OwnerType.newWorksFromGalleriesYouFollow,
+            type: "viewAll",
+          })
+        )
+      }}
+      getItems={() => {
+        return artworks.map(artwork => (
+          <ShelfArtworkFragmentContainer
+            artwork={artwork}
+            key={artwork.internalID}
+            lazyLoad
+            contextModule={ContextModule.newWorksByGalleriesYouFollowRail}
+            onClick={() => {
+              const trackingEvent: ClickedArtworkGroup = {
+                action: ActionType.clickedArtworkGroup,
+                context_module: ContextModule.newWorksByGalleriesYouFollowRail,
+                context_page_owner_type: OwnerType.home,
+                destination_page_owner_type: OwnerType.artwork,
+                destination_page_owner_id: artwork.internalID,
+                destination_page_owner_slug: artwork.slug,
+                type: "thumbnail",
+              }
+              trackEvent(trackingEvent)
+            }}
+          />
+        ))
+      }}
+    />
+  )
+}
+
+export const HomeNewWorksFromGalleriesYouFollowRailFragmentContainer = createFragmentContainer(
+  HomeNewWorksFromGalleriesYouFollowRail,
+  {
+    newWorksFromGalleriesYouFollowConnection: graphql`
+      fragment HomeNewWorksFromGalleriesYouFollowRail_newWorksFromGalleriesYouFollowConnection on ArtworkConnection {
+        edges {
+          node {
+            internalID
+            slug
+            ...ShelfArtwork_artwork
+          }
+        }
+      }
+    `,
+  }
+)
+
+export const HomeNewWorksFromGalleriesYouFollowRailQueryRenderer: React.FC = () => {
+  const { relayEnvironment } = useSystemContext()
+
+  const { user } = useSystemContext()
+
+  if (!user) {
+    return null
+  }
+
+  return (
+    <SystemQueryRenderer<HomeNewWorksFromGalleriesYouFollowRailQuery>
+      lazyLoad
+      environment={relayEnvironment}
+      query={graphql`
+        query HomeNewWorksFromGalleriesYouFollowRailQuery {
+          me {
+            newWorksFromGalleriesYouFollowConnection(first: 20) {
+              ...HomeNewWorksFromGalleriesYouFollowRail_newWorksFromGalleriesYouFollowConnection
+            }
+          }
+        }
+      `}
+      placeholder={PLACEHOLDER}
+      render={({ error, props }) => {
+        if (error) {
+          console.error(error)
+          return null
+        }
+
+        if (!props?.me) {
+          return PLACEHOLDER
+        }
+
+        if (props.me.newWorksFromGalleriesYouFollowConnection) {
+          return (
+            <HomeNewWorksFromGalleriesYouFollowRailFragmentContainer
+              newWorksFromGalleriesYouFollowConnection={
+                props.me.newWorksFromGalleriesYouFollowConnection
+              }
+            />
+          )
+        }
+
+        return null
+      }}
+    />
+  )
+}
+
+const PLACEHOLDER = (
+  <Skeleton>
+    <Rail
+      title="New Works from Galleries You Follow"
+      getItems={() => {
+        return [...new Array(8)].map((_, i) => {
+          return <ShelfArtworkPlaceholder key={i} index={i} />
+        })
+      }}
+    />
+  </Skeleton>
+)

src/Apps/Home/HomeApp.tsx

@@ -16,6 +16,7 @@ import { HomeWorksForYouTabBar } from "./Components/HomeWorksForYouTabBar"
 import { MyBidsQueryRenderer } from "Apps/Auctions/Components/MyBids/MyBids"
 import { HomeEmergingPicksArtworksRailQueryRenderer } from "./Components/HomeEmergingPicksArtworksRail"
 import { HomeHeroUnitsFragmentContainer } from "./Components/HomeHeroUnits"
+import { HomeNewWorksFromGalleriesYouFollowRailQueryRenderer } from "Apps/Home/Components/HomeNewWorksFromGalleriesYouFollowRail"
 
 interface HomeAppProps {
   featuredEventsOrderedSet: HomeApp_featuredEventsOrderedSet$data | null
@@ -63,6 +64,8 @@ export const HomeApp: React.FC<HomeAppProps> = ({
 
         <HomeFeaturedGalleriesRailQueryRenderer />
 
+        <HomeNewWorksFromGalleriesYouFollowRailQueryRenderer />
+
         <HomeTrendingArtistsRailQueryRenderer />
       </Join>
     </>

src/Apps/Home/__tests__/HomeNewWorksFromGalleriesYouFollowRail.jest.tsx

@@ -0,0 +1,81 @@
+import { graphql } from "react-relay"
+import { setupTestWrapper } from "DevTools/setupTestWrapper"
+import { HomeNewWorksFromGalleriesYouFollowRailFragmentContainer } from "Apps/Home/Components/HomeNewWorksFromGalleriesYouFollowRail"
+import { HomeNewWorksFromGalleriesYouFollowRail_Test_Query } from "__generated__/HomeNewWorksFromGalleriesYouFollowRail_Test_Query.graphql"
+import { useTracking } from "react-tracking"
+
+jest.unmock("react-relay")
+jest.mock("react-tracking")
+
+const { getWrapper } = setupTestWrapper<
+  HomeNewWorksFromGalleriesYouFollowRail_Test_Query
+>({
+  Component: props => {
+    return (
+      <HomeNewWorksFromGalleriesYouFollowRailFragmentContainer
+        newWorksFromGalleriesYouFollowConnection={
+          props.me?.newWorksFromGalleriesYouFollowConnection!
+        }
+      />
+    )
+  },
+  query: graphql`
+    query HomeNewWorksFromGalleriesYouFollowRail_Test_Query
+      @relay_test_operation {
+      me {
+        newWorksFromGalleriesYouFollowConnection(first: 20) {
+          ...HomeNewWorksFromGalleriesYouFollowRail_newWorksFromGalleriesYouFollowConnection
+        }
+      }
+    }
+  `,
+})
+
+const trackEvent = jest.fn()
+
+beforeAll(() => {
+  ;(useTracking as jest.Mock).mockImplementation(() => ({ trackEvent }))
+})
+
+afterEach(() => {
+  trackEvent.mockClear()
+})
+
+describe("HomeNewWorksFromGalleriesYouFollowRail", () => {
+  it("renders correctly", () => {
+    const wrapper = getWrapper()
+
+    expect(wrapper.html()).toContain("/new-works-from-galleries-you-follow")
+
+    expect(wrapper.text()).toContain("title")
+  })
+
+  describe("tracking", () => {
+    it("tracks view all clicks", () => {
+      const wrapper = getWrapper()
+      wrapper.find("RouterLink").at(1).simulate("click")
+
+      expect(trackEvent).toBeCalledWith({
+        action: "clickedArtworkGroup",
+        context_module: "newWorksByGalleriesYouFollowRail",
+        destination_page_owner_type: "newWorksFromGalleriesYouFollow",
+        type: "viewAll",
+      })
+    })
+
+    it("tracks item clicks", () => {
+      const wrapper = getWrapper()
+      wrapper.find("RouterLink").at(2).simulate("click")
+
+      expect(trackEvent).toBeCalledWith({
+        action: "clickedArtworkGroup",
+        context_module: "newWorksByGalleriesYouFollowRail",
+        context_page_owner_type: "home",
+        destination_page_owner_id: "<Artwork-mock-id-1>",
+        destination_page_owner_slug: "<Artwork-mock-id-2>",
+        destination_page_owner_type: "artwork",
+        type: "thumbnail",
+      })
+    })
+  })
+})