NTP: Prevent data loss in topSites after update

Fix brave/brave-browser#8781
Top sites (now called grid sites) now have their
own storage. This change allows the migration
process from a shared to a dedicated storage.

components/brave_new_tab_ui/helpers/newTabUtils.ts

@@ -24,8 +24,9 @@ export const getCharForSite = (
   return name.charAt(0).toUpperCase()
 }
 
-export const generateGridSiteId = (currentIndex: number): string => {
-  return `topsite-${currentIndex}-${Date.now()}`
+export const generateGridSiteId = (): string => {
+  const randomNumber = Math.floor(Math.random() * 10000)
+  return `topsite-${randomNumber}-${Date.now()}`
 }
 
 export const generateGridSiteFavicon = (url: string): string => {
@@ -53,21 +54,25 @@ export const isExistingGridSite = (
 
 export const generateGridSiteProperties = (
   index: number,
-  topSite: chrome.topSites.MostVisitedURL
+  topSite: chrome.topSites.MostVisitedURL,
+  fromLegacyData?: boolean
 ): NewTab.Site => {
   return {
-    ...topSite,
-    id: generateGridSiteId(index),
+    title: topSite.title,
+    url: topSite.url,
+    id: generateGridSiteId(),
     letter: getCharForSite(topSite),
     favicon: generateGridSiteFavicon(topSite.url),
-    pinnedIndex: undefined,
+    // In the legacy version of topSites the pinnedIndex
+    // was the site index itself.
+    pinnedIndex: fromLegacyData ? index : undefined,
     bookmarkInfo: undefined
   }
 }
 
 export const getGridSitesWhitelist = (
   topSites: chrome.topSites.MostVisitedURL[]
-): chrome.topSites.MostVisitedURL[] => {
+  ): chrome.topSites.MostVisitedURL[] => {
   const defaultChromeWebStoreUrl: string = 'https://chrome.google.com/webstore'
   const filteredGridSites: chrome.topSites.MostVisitedURL[] = topSites
     .filter(site => {
@@ -76,3 +81,28 @@ export const getGridSitesWhitelist = (
     })
   return filteredGridSites
 }
+
+export const generateGridSitesFromLegacyEntries = (legacyTopSites: NewTab.LegacySite[]) => {
+  const newGridSites: NewTab.Site[] = []
+  if (legacyTopSites == null) {
+    return []
+  }
+  for (const topSite of legacyTopSites) {
+    newGridSites
+      .push(generateGridSiteProperties(topSite.index, topSite, true))
+  }
+
+  return newGridSites
+}
+
+export function filterFromExcludedSites (
+  sitesData: NewTab.Site[],
+  removedSitesData: NewTab.Site[]
+): NewTab.Site[] {
+  return sitesData
+    .filter((site: NewTab.Site) => {
+      // In updatedGridSites we only want sites not removed by the user
+      return removedSitesData
+        .every((removedSite: NewTab.Site) => removedSite.url !== site.url)
+    })
+}

components/brave_new_tab_ui/reducers/grid_sites_reducer.ts

@@ -28,6 +28,21 @@ export const gridSitesReducer: Reducer<NewTab.GridSitesState | undefined> = (
 
   switch (action.type) {
     case types.GRID_SITES_SET_FIRST_RENDER_DATA: {
+
+      // If there are legacy values from a previous
+      // storage, update first render data with it
+      state = gridSitesState
+        .gridSitesReducerSetFirstRenderDataFromLegacy(
+          state,
+          startingState.legacy
+        )
+      // Now that we stored the legacy reference, delete it
+      // so it won't override gridSites in further updates
+      if (startingState.legacy) {
+        delete startingState.legacy
+      }
+
+      // New profiles just store what comes from Chromium
       state = gridSitesState
         .gridSitesReducerSetFirstRenderData(state, payload.topSites)
       break

components/brave_new_tab_ui/state/gridSitesState.ts

@@ -8,9 +8,28 @@ import {
   isExistingGridSite,
   getGridSitesWhitelist,
   isGridSitePinned,
-  isGridSiteBookmarked
+  isGridSiteBookmarked,
+  filterFromExcludedSites
 } from '../helpers/newTabUtils'
 
+export function gridSitesReducerSetFirstRenderDataFromLegacy (
+  state: NewTab.GridSitesState,
+  legacyState: NewTab.LegacyState
+) {
+  const { ignoredTopSites, pinnedTopSites } = legacyState
+
+  if (ignoredTopSites.length > 0) {
+    for (const ignoredTopSite of ignoredTopSites) {
+      state = gridSitesReducerRemoveSite(state, ignoredTopSite)
+    }
+  }
+
+  if (pinnedTopSites) {
+    state = gridSitesReducerAddSiteOrSites(state, pinnedTopSites)
+  }
+  return state
+}
+
 export function gridSitesReducerSetFirstRenderData (
   state: NewTab.GridSitesState,
   topSites: chrome.topSites.MostVisitedURL[]
@@ -25,7 +44,12 @@ export function gridSitesReducerSetFirstRenderData (
     }
     newGridSites.push(generateGridSiteProperties(index, topSite))
   }
-  state = gridSitesReducerAddSiteOrSites(state, newGridSites)
+
+  // If there are removed sites coming from a legacy storage,
+  // ensure they get filtered.
+  const sitesToAdd = filterFromExcludedSites(newGridSites, state.removedSites)
+  state = gridSitesReducerAddSiteOrSites(state, sitesToAdd)
+
   return state
 }
 
@@ -87,12 +111,8 @@ export function gridSitesReducerRemoveSite (
     removedSites: [ ...state.removedSites, removedSite ]
   }
 
-  const filterRemovedFromGridSites = state.gridSites
-    .filter((site: NewTab.Site) => {
-      // In updatedGridSites we only want sites not removed by the user
-      return state.removedSites
-        .every((removedSite: NewTab.Site) => removedSite.url !== site.url)
-    })
+  const filterRemovedFromGridSites =
+    filterFromExcludedSites(state.gridSites, state.removedSites)
   state = gridSitesReducerDataUpdated(state, filterRemovedFromGridSites)
   return state
 }

components/brave_new_tab_ui/storage/grid_sites_storage.ts

@@ -5,13 +5,29 @@
 
 // Utils
 import { debounce } from '../../common/debounce'
+import { keyName as newTabKeyName } from './new_tab_storage'
+import { generateGridSitesFromLegacyEntries } from '../helpers/newTabUtils'
+const keyName = 'grid-sites-data-v1'
 
-const keyName = 'grid-sites-data'
+const newTabData: any = window.localStorage.getItem(newTabKeyName)
+const parsedNewTabData = JSON.parse(newTabData)
 
 export const initialGridSitesState: NewTab.GridSitesState = {
   gridSites: [],
   removedSites: [],
-  shouldShowSiteRemovedNotification: false
+  shouldShowSiteRemovedNotification: false,
+  legacy: {
+    // Store legacy pinnedTopSites so users
+    // migrating to this new storage won't lose
+    // data. Once this change hits the release channel
+    // we are safe to remove this bridge
+    pinnedTopSites: generateGridSitesFromLegacyEntries(
+      parsedNewTabData.pinnedTopSites
+    ),
+    ignoredTopSites: generateGridSitesFromLegacyEntries(
+      parsedNewTabData.ignoredTopSites
+    )
+  }
 }
 
 export const load = (): NewTab.GridSitesState => {

components/brave_new_tab_ui/storage/new_tab_storage.ts

@@ -6,7 +6,7 @@
 // Utils
 import { debounce } from '../../common/debounce'
 
-const keyName = 'new-tab-data'
+export const keyName = 'new-tab-data'
 
 export const defaultState: NewTab.State = {
   initialDataLoaded: false,

components/definitions/newTab.d.ts

@@ -40,6 +40,21 @@ declare namespace NewTab {
     bookmarkInfo: chrome.bookmarks.BookmarkTreeNode | undefined
   }
 
+  // This is preserved for migration reasons.
+  // Do not tyoe new code using this interface.
+  export interface LegacySite {
+    index: number
+    url: string
+    title: string
+    favicon: string
+    letter: string
+    thumb: string
+    themeColor: string
+    computedThemeColor: string
+    pinned: boolean
+    bookmarked?: Bookmark
+  }
+
   export interface Stats {
     adsBlockedStat: number
     javascriptBlockedStat: number
@@ -58,10 +73,16 @@ declare namespace NewTab {
 
   export type StackWidget = 'rewards' | 'binance'
 
+  export interface LegacyState {
+    pinnedTopSites: Site[]
+    ignoredTopSites: Site[]
+  }
+
   export interface GridSitesState {
     removedSites: Site[]
     gridSites: Site[]
     shouldShowSiteRemovedNotification: boolean
+    legacy: LegacyState
   }
 
   export interface PageState {