feat(ONYX-29): add privacy icon to the artists list in MyC (#9036)

* feat: add privacy icon

* chore: address review comments

* chore: fix tests

* chore: add tests, update palette-mobile

src/app/Components/ArtistListItem.tsx

@@ -21,6 +21,7 @@ interface Props {
   disableNavigation?: boolean
   onFollowFinish?: () => void
   onPress?: () => void
+  isPrivate?: boolean
   relay: RelayProp
   RightButton?: JSX.Element
   showFollowButton?: boolean
@@ -56,6 +57,7 @@ const ArtistListItem: React.FC<Props> = ({
   disableNavigation,
   onFollowFinish,
   onPress,
+  isPrivate,
   relay,
   RightButton,
   showFollowButton = true,
@@ -146,6 +148,7 @@ const ArtistListItem: React.FC<Props> = ({
                 initials={initials ?? undefined}
                 avatarSize={avatarSize}
                 RightButton={RightButton}
+                displayPrivateIcon={isPrivate}
               />
             </Flex>
             {!!showFollowButton && (

src/app/Scenes/ArtistSeries/ArtistSeriesMeta.tsx

@@ -5,13 +5,12 @@ import {
   OwnerType,
   unfollowedArtist,
 } from "@artsy/cohesion"
-import { Spacer, Text, EntityHeader } from "@artsy/palette-mobile"
+import { Spacer, Text, EntityHeader, Touchable } from "@artsy/palette-mobile"
 import { ArtistSeriesMetaFollowMutation } from "__generated__/ArtistSeriesMetaFollowMutation.graphql"
 import { ArtistSeriesMeta_artistSeries$data } from "__generated__/ArtistSeriesMeta_artistSeries.graphql"
 import { ReadMore } from "app/Components/ReadMore"
 import { navigate } from "app/system/navigation/navigate"
 import { truncatedTextLimit } from "app/utils/hardware"
-import { Touchable } from "@artsy/palette-mobile"
 import React, { useRef } from "react"
 import { TouchableOpacity, View } from "react-native"
 import { commitMutation, createFragmentContainer, graphql, RelayProp } from "react-relay"

src/app/Scenes/MyCollection/Components/MyCollectionCollectedArtistItem.tsx

@@ -9,9 +9,10 @@ interface ArtistItem {
   artist: MyCollectionCollectedArtistItem_artist$key
   // TODO: Implement compact version of artists grid
   compact?: boolean
+  isPrivate?: boolean
 }
 
-export const MyCollectionCollectedArtistItem: React.FC<ArtistItem> = ({ artist }) => {
+export const MyCollectionCollectedArtistItem: React.FC<ArtistItem> = ({ artist, isPrivate }) => {
   const setViewKind = MyCollectionTabsStore.useStoreActions((state) => state.setViewKind)
   const artistData = useFragment<MyCollectionCollectedArtistItem_artist$key>(artistFragment, artist)
   const space = useSpace()
@@ -39,6 +40,7 @@ export const MyCollectionCollectedArtistItem: React.FC<ArtistItem> = ({ artist }
       containerStyle={{ paddingHorizontal: space(2) }}
       RightButton={RightButton}
       onPress={showArtistPreview}
+      isPrivate={isPrivate}
     />
   )
 }

src/app/Scenes/MyCollection/Components/MyCollectionCollectedArtistsView.tests.tsx

@@ -78,12 +78,24 @@ describe("MyCollectionCollectedArtistsView", () => {
     await expect(getByText("Rhombie Sandoval")).toBeTruthy()
     await expect(getByText("Banksy")).toBeTruthy()
   })
+
+  it("renders the privacy lock next to the artist name", async () => {
+    const { getAllByTestId } = renderWithWrappers(<TestRenderer />)
+    resolveMostRecentRelayOperation(mockEnvironment, {
+      Me() {
+        return mockUserInterest
+      },
+    })
+
+    await expect(getAllByTestId("lock-icon")).toHaveLength(2)
+  })
 })
 
 const mockUserInterest = {
   userInterestsConnection: {
     edges: [
       {
+        private: true,
         node: {
           internalID: "5f112c5876efda000e68f3a9",
           name: "Rhombie Sandoval",
@@ -94,6 +106,7 @@ const mockUserInterest = {
         },
       },
       {
+        private: true,
         node: {
           internalID: "5f112c5876efda000e68f3a9",
           name: "Banksy",

src/app/Scenes/MyCollection/Components/MyCollectionCollectedArtistsView.tsx

@@ -3,7 +3,6 @@ import { MyCollectionCollectedArtistsView_me$key } from "__generated__/MyCollect
 import { MyCollectionArtistFilters } from "app/Scenes/MyCollection/Components/MyCollectionArtistFiltersStickyTab"
 import { MyCollectionArtworksKeywordStore } from "app/Scenes/MyCollection/Components/MyCollectionArtworksKeywordStore"
 import { MyCollectionCollectedArtistItem } from "app/Scenes/MyCollection/Components/MyCollectionCollectedArtistItem"
-import { extractNodes } from "app/utils/extractNodes"
 import { useRefreshControl } from "app/utils/refreshHelpers"
 import { stringIncludes } from "app/utils/stringHelpers"
 import { FlatList } from "react-native"
@@ -33,14 +32,16 @@ export const MyCollectionCollectedArtistsView: React.FC<MyCollectionCollectedArt
 
   const RefreshControl = useRefreshControl(refetch)
 
-  const collectedArtists = extractNodes(data.userInterestsConnection)
+  const userInterests = (data.userInterestsConnection?.edges || []).filter((edge) => {
+    return !!edge
+  })
 
-  if (!collectedArtists.length) {
+  if (!userInterests.length) {
     return null
   }
 
-  const artists = extractNodes(data.userInterestsConnection)?.filter((artist) => {
-    return stringIncludes(artist?.name || "", keyword)
+  const filteredUserInterests = userInterests?.filter((userInterest) => {
+    return stringIncludes(userInterest?.node?.name || "", keyword)
   })
 
   return (
@@ -50,11 +51,21 @@ export const MyCollectionCollectedArtistsView: React.FC<MyCollectionCollectedArt
       <Spacer y={1} />
 
       <FlatList
-        data={artists}
+        data={filteredUserInterests}
         key="list"
-        keyExtractor={(item) => "list" + item.internalID}
+        keyExtractor={(item) => "list" + item?.node?.internalID}
         renderItem={({ item }) => {
-          return <MyCollectionCollectedArtistItem artist={item} key={item.internalID} compact />
+          if (item && item.node && item.node.internalID && item.private) {
+            return (
+              <MyCollectionCollectedArtistItem
+                artist={item.node}
+                key={item.node.internalID}
+                isPrivate={item.private}
+                compact
+              />
+            )
+          }
+          return null
         }}
         onEndReached={handleLoadMore}
         ListFooterComponent={!!hasNext ? <LoadingIndicator /> : <Spacer y={2} />}
@@ -84,6 +95,8 @@ const collectedArtistsPaginationFragment = graphql`
       interestType: ARTIST
     ) @connection(key: "MyCollectionCollectedArtistsView_userInterestsConnection") {
       edges {
+        internalID
+        private
         node {
           ... on Artist {
             internalID