feat(migration components): add migration components to conditionally…

… render on app-launch

create `IncompatibleBackend`, `MigratingBackend` and `MigrationFailed` components to run on app-launch. Create `ReportCrashAndReload` component to handle crash report, issue filing and reload functionality and refactor `ErrorHandler` to use this

app/components/ErrorHandler.tsx

@@ -1,28 +1,16 @@
 import React from 'react'
-import versions from '../../version'
-import { CRASH_REPORTER_URL } from '../constants'
 
+import ReportCrashAndReload, { ErrorProps } from './ReportCrashAndReload'
 import localStore from '../utils/localStore'
-import ExternalLink from './ExternalLink'
-import Button from './chrome/Button'
 
 export default class ErrorHandler extends React.Component {
  state = {
  error: undefined,
- errorInfo: undefined,
- sendingReport: false,
- sentReport: false
+ errorInfo: undefined
  }
 
- constructor (props) {
- super(props)
-
- this.handleSendCrashReport = this.handleSendCrashReport.bind(this)
- this.handleReload = this.handleReload.bind(this)
- }
-
- componentDidCatch (error, errorInfo) {
- this.setState({ error, errorInfo, sendingReport: false })
+ componentDidCatch (error: ErrorProps['error'], errorInfo: ErrorProps['errorInfo']) {
+ this.setState({ error, errorInfo })
 
  // clear local storage, which may cause re-crashing if in an error put us
  // into an un-recoverable state
@@ -33,87 +21,16 @@ export default class ErrorHandler extends React.Component {
  localStore().setItem('commitComponent', '')
  }
 
- handleSendCrashReport (e: React.MouseEvent) {
- const { error, errorInfo } = this.state
- this.setState({ error, errorInfo, sendingReport: true })
-
- console.log('sending report')
- postCrashReport(error, errorInfo)
- .then(() => {
- this.setState({
- sentReport: true,
- sendingReport: false
- })
- })
- .catch((e) => {
- console.log(e)
- this.setState({
- sendingReport: false
- })
- })
- }
-
- handleReload (e: React.MouseEvent) {
- window.location.hash = '/'
- window.location.reload()
- }
-
  render () {
  if (!this.state.error) {
  return this.props.children
  }
 
- const { sendingReport, sentReport } = this.state
-
  return (
- <div className="error-container">
- <div className="dialog">
- <h1>Dang. It broke.</h1>
- <p>Apologies, Qri desktop encountered an error. Send us a crash report!</p>
- <div className="reporting actions">
- {sentReport
- ? <p>Thanks!</p>
- : <Button
- id="send-crash-report"
- text="Send Crash Report"
- color="primary"
- loading={sendingReport}
- onClick={this.handleSendCrashReport}
- />}
- </div>
- <div className="reload">
- <p>If you have additional info or questions, feel free to <ExternalLink id="file-issue" href="https://github.com/qri-io/desktop/issues/new">file an issue</ExternalLink> describing where things went wrong. The more detail, the better. Reload to get back to Qri.</p>
- <Button
- id="error-reload"
- text="Reload Qri Desktop"
- color="dark"
- onClick={this.handleReload}
- />
- </div>
- </div>
- </div>
+ <ReportCrashAndReload
+ title='Dang. It broke.'
+ error={this.state.error}
+ errorInfo={this.state.errorInfo}/>
  )
  }
 }
-
-// TODO (b5) - bring this back in the near future for fetching home feed
-async function postCrashReport (err, errInfo): Promise<any> {
- const options: FetchOptions = {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- app: 'desktop',
- version: versions.desktopVersion,
- platform: navigator.platform,
- error: err.toString(),
- info: errInfo.componentStack
- })
- }
-
- console.log(CRASH_REPORTER_URL)
- const r = await fetch(CRASH_REPORTER_URL, options)
- const res = await r.json()
- return res
-}

app/components/IncompatibleBackend.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import WelcomeTemplate from './onboard/WelcomeTemplate'
+import ExternalLink from './ExternalLink'
+
+interface IncompatibleBackendProps {
+ incompatibleVersion: string
+}
+
+// TODO: this variable needs to be replaced when the
+// lowestCompatibleBackend variable exists in backend.js
+const lowestCompatibleBackend = '0.9.8'
+
+const IncompatibleBackend: React.FC<IncompatibleBackendProps> = ({ incompatibleVersion }) => (
+ <WelcomeTemplate title='Incompatible Backend Version'>
+ <p>{`The lowest supported backend version is v${lowestCompatibleBackend}, but you are running on v${incompatibleVersion}.`}</p>
+ <p>Please file an issue <ExternalLink id="file-issue" href="https://github.com/qri-io/desktop/issues/new">here</ExternalLink>.</p>
+ </WelcomeTemplate>
+)
+
+export default IncompatibleBackend

app/components/MigratingBackend.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import WelcomeTemplate from './onboard/WelcomeTemplate'
+
+const MigratingBackend: React.FC<{}> = () => (
+ <WelcomeTemplate title='Migrating the Qri backend' subtitle='This might take a minute...' loading/>
+)
+
+export default MigratingBackend

app/components/MigrationFailed.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import ReportCrashAndReload from './ReportCrashAndReload'
+
+const MigrationFailed: React.FC<{}> = () => <ReportCrashAndReload title='The Qri backend migration failed!'/>
+
+export default MigrationFailed

app/components/ReportCrashAndReload.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react'
+import Button from './chrome/Button'
+import ExternalLink from './ExternalLink'
+import WelcomeTemplate from './onboard/WelcomeTemplate'
+import { FetchOptions } from '../store/api'
+import versions from '../../version'
+import { CRASH_REPORTER_URL } from '../constants'
+
+interface ReportCrashAndReloadProps extends ErrorProps {
+ title: string
+}
+
+export interface ErrorProps {
+ error?: Error
+ errorInfo?: React.ErrorInfo
+}
+
+const ReportCrashAndReload: React.FC<ReportCrashAndReloadProps> = ({ title, error, errorInfo }) => {
+ const [sendingReport, setSendingReport] = useState(false)
+ const [sentReport, setSentReport] = useState(false)
+
+ const handleSendCrashReport = async () => {
+ setSendingReport(true)
+ try {
+ console.log('sending report')
+ await postCrashReport(error, errorInfo)
+ setSendingReport(true)
+ setSentReport(true)
+ } catch (e) {
+ console.log(e)
+ setSendingReport(false)
+ }
+ }
+
+ const handleReload = () => {
+ window.location.hash = '/'
+ window.location.reload()
+ }
+
+ return (
+ <WelcomeTemplate title={title}>
+ <div className="reporting actions">
+ <p>Apologies, Qri desktop encountered an error. Send us a crash report!</p>
+ {sentReport
+ ? <p>Thanks!</p>
+ : <Button
+ id="send-crash-report"
+ text="Send Crash Report"
+ color="primary"
+ loading={sendingReport}
+ onClick={handleSendCrashReport}
+ />}
+ </div>
+ <br />
+ <div className="reload">
+ <p>If you have additional info or questions, feel free to <ExternalLink id="file-issue" href="https://github.com/qri-io/desktop/issues/new">file an issue</ExternalLink> describing where things went wrong. The more detail, the better. Reload to get back to Qri.</p>
+ <Button
+ id="error-reload"
+ text="Reload Qri Desktop"
+ color="dark"
+ onClick={handleReload}
+ />
+ </div>
+ </WelcomeTemplate>
+ )
+}
+
+// TODO (b5) - bring this back in the near future for fetching home feed
+const postCrashReport = async (error: ErrorProps['error'], errorInfo: ErrorProps['errorInfo']): Promise<any> => {
+ const options: FetchOptions = {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ app: 'desktop',
+ version: versions.desktopVersion,
+ platform: navigator.platform,
+ error: error?.toString(),
+ info: errorInfo?.componentStack
+ })
+ }
+
+ console.log(CRASH_REPORTER_URL)
+ const r = await fetch(CRASH_REPORTER_URL, options)
+ const res = await r.json()
+ return res
+}
+
+export default ReportCrashAndReload

stories/AppLaunch.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import IncompatibleBackend from '../app/components/IncompatibleBackend'
+import MigratingBackend from '../app/components/MigratingBackend'
+import MigrationFailed from '../app/components/MigrationFailed'
+
+export default {
+ title: 'App Launch',
+ parameters: {
+ notes: 'List of migration components conditionally rendered on app launch'
+ }
+}
+
+export const incompatibleBackend = () => (<IncompatibleBackend incompatibleVersion='0.0.1'/>)
+
+incompatibleBackend.story = {
+ name: 'Incompatible Backend',
+ parameters: { note: 'Screen when user is running an incompatible backend qri version' }
+}
+
+export const migratingBackend = () => <MigratingBackend />
+
+migratingBackend.story = {
+ name: 'Migrating Backend',
+ parameters: { note: 'Screen when backend is in the process of migrating' }
+}
+
+export const migrationFailed = () => <MigrationFailed />
+
+migrationFailed.story = {
+ name: 'Migration Failed',
+ parameters: { note: 'Screen when backend migration has failed' }
+}

stories/Error.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import ReportCrashAndReload from '../app/components/ReportCrashAndReload'
+
+export default {
+ title: 'Error',
+ parameters: {
+ notes: 'Application error handling'
+ }
+}
+
+const reportCrashAndReloadProps = {
+ title: 'Storybook test has crashed',
+ error: new Error('Test error for Storybook!'),
+ errorInfo: { 
+ componentStack: `in ComponentThatThrows (created by App)
+ in ErrorBoundary (created by App)
+ in div (created by App)
+ in App` }
+}
+
+export const reportCrashAndReload = () => (<ReportCrashAndReload {...reportCrashAndReloadProps}/>)
+
+reportCrashAndReload.story = {
+ name: 'Report Crash and Reload',
+ parameters: { note: 'Screen when app throws an error and is caught. Prompts error report, issue and reload CTAs' }
+}