Proof of concept for import during Welcome

Tracked with brave/brave-browser#1530

Code is rough, but this does work (ex: you can pick an option and import will happen)

browser/ui/webui/brave_welcome_ui.cc

@@ -16,6 +16,7 @@
 #include "chrome/browser/ui/browser_finder.h"
 #include "chrome/browser/ui/chrome_pages.h"
 #include "chrome/browser/ui/webui/settings/search_engines_handler.h"
+#include "chrome/browser/ui/webui/settings/settings_import_data_handler.h"
 #include "chrome/common/pref_names.h"
 #include "chrome/common/webui_url_constants.h"
 #include "components/grit/brave_components_resources.h"
@@ -65,6 +66,7 @@ BraveWelcomeUI::BraveWelcomeUI(content::WebUI* web_ui, const std::string& name)
     : BasicUI(web_ui, name, kBraveWelcomeGenerated,
         kBraveWelcomeGeneratedSize, IDR_BRAVE_WELCOME_HTML) {
   web_ui->AddMessageHandler(std::make_unique<WelcomeDOMHandler>());
+  web_ui->AddMessageHandler(std::make_unique<settings::ImportDataHandler>());
 
   Profile* profile = Profile::FromWebUI(web_ui);
 

components/brave_welcome_ui/components/screens/importBox.tsx

@@ -6,6 +6,7 @@ import * as React from 'react'
 
 // Feature-specific components
 import { Content, Title, Paragraph, PrimaryButton } from 'brave-ui/features/welcome'
+import { SelectBox, Toggle } from 'brave-ui/features/shields'
 
 // Images
 import { WelcomeImportImage } from 'brave-ui/features/welcome/images'
@@ -19,9 +20,90 @@ interface Props {
   onClick: () => void
 }
 
-export default class ImportBox extends React.PureComponent<Props, {}> {
+interface State {
+  browserProfiles: any,
+  selectedBrowserProfile: BrowserProfile | null
+}
+
+interface BrowserProfile {
+  autofillFormData: boolean,
+  cookies: boolean,
+  favorites: boolean,
+  history: boolean,
+  index: number,
+  ledger: boolean,
+  name: string,
+  passwords: boolean,
+  search: boolean,
+  stats: boolean,
+  windows: boolean
+}
+
+export default class ImportBox extends React.PureComponent<Props, State> {
+  constructor (props: Props) {
+    super(props)
+    this.state = {
+      browserProfiles: undefined,
+      selectedBrowserProfile: null
+    }
+
+    let self = this
+
+    window.cr.sendWithPromise('initializeImportDialog')
+      .then(function (browser_profiles: any) {
+        self.setState({browserProfiles: browser_profiles})
+      })
+  }
+
+  onChangeImporter = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    if (event.target.value === '') {
+      this.setState({ selectedBrowserProfile: null })
+      return
+    }
+
+    let selectedEntry = this.state.browserProfiles.find((entry: BrowserProfile) => {
+      return entry.index.toString() === event.target.value
+    })
+
+    if (selectedEntry) {
+      this.setState({ selectedBrowserProfile: selectedEntry })
+    }
+  }
+
+  onToggleChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
+    console.log('todo: ...')
+  }
+
+// class ImportDataBrowserProxyImpl {
+//     /** @override */
+//     initializeImportDialog() {
+//       return cr.sendWithPromise('initializeImportDialog');
+//     }
+
+//     /** @override */
+//     importData(sourceBrowserProfileIndex) {
+//       chrome.send('importData', [sourceBrowserProfileIndex]);
+//     }
+
+//     /** @override */
+//     importFromBookmarksFile() {
+//       chrome.send('importFromBookmarksFile');
+//     }
+//   }
+
+  onHandleImport = () => {
+    const { onClick } = this.props
+
+    let sourceBrowserProfileIndex: number
+    sourceBrowserProfileIndex = this.state && this.state.selectedBrowserProfile && this.state.selectedBrowserProfile.index || 0
+
+    chrome.send('importData', [sourceBrowserProfileIndex])
+    onClick()
+  }
+
   render () {
-    const { index, currentScreen, onClick } = this.props
+    const { index, currentScreen } = this.props
+    const { browserProfiles, selectedBrowserProfile } = this.state
     return (
       <Content
         zIndex={index}
@@ -31,13 +113,46 @@ export default class ImportBox extends React.PureComponent<Props, {}> {
       >
         <WelcomeImportImage />
         <Title>{getLocale('importFromAnotherBrowser')}</Title>
+
+        <SelectBox
+          onChange={this.onChangeImporter}
+        >
+          <option key={0} value=''>Import from...</option>
+          {!browserProfiles ? null : browserProfiles.map((browserProfile: BrowserProfile, index: number) =>
+            <option
+              key={index + 1}
+              value={browserProfile.index}
+            >
+              {browserProfile.name}
+            </option>
+          )}
+        </SelectBox>
+
+        {
+          !selectedBrowserProfile
+          ? null
+          : <div>
+            <h3>Import from {selectedBrowserProfile.name}</h3>
+            <div>
+              {!selectedBrowserProfile.cookies? null : <div><Toggle id='import_cookies' onChange={this.onToggleChanged} />Import cookies</div>}
+              {!selectedBrowserProfile.favorites? null : <div><Toggle id='import_favorites' onChange={this.onToggleChanged} />Favorites</div>}
+              {!selectedBrowserProfile.history? null : <div><Toggle id='import_history' onChange={this.onToggleChanged} />History</div>}
+              {!selectedBrowserProfile.ledger? null : <div><Toggle id='import_ledger' onChange={this.onToggleChanged} />Ledger</div>}
+              {!selectedBrowserProfile.passwords? null : <div><Toggle id='import_passwords' onChange={this.onToggleChanged} />Passwords</div>}
+              {!selectedBrowserProfile.search? null : <div><Toggle id='import_search' onChange={this.onToggleChanged} />Search</div>}
+              {!selectedBrowserProfile.stats? null : <div><Toggle id='import_stats' onChange={this.onToggleChanged} />Stats</div>}
+              {!selectedBrowserProfile.windows? null : <div><Toggle id='import_windows' onChange={this.onToggleChanged} />Windows</div>}
+            </div>
+          </div>
+        }
+
         <Paragraph>{getLocale('setupImport')}</Paragraph>
           <PrimaryButton
             level='primary'
             type='accent'
             size='large'
             text={getLocale('import')}
-            onClick={onClick}
+            onClick={this.onHandleImport}
           />
       </Content>
     )

components/brave_welcome_ui/reducers/welcome_reducer.ts

@@ -20,7 +20,7 @@ const welcomeReducer: Reducer<Welcome.State | undefined> = (state: Welcome.State
   const startingState = state
   switch (action.type) {
     case types.IMPORT_NOW_REQUESTED:
-      chrome.send('importNowRequested', [])
+      console.log('IMPORT NOW PRESSED')
       break
     case types.GO_TO_TAB_REQUESTED:
       window.open(payload.url, payload.target)