initial react inbox landing page

fixes VICE-860
flag=react_inbox

test plan:
  - navigate to /conversations
    - the inbox should render as normal
  - enable the react_inbox feature flag
  - navigate to /conversations
    - the inbox should be replaced with a placeholder
      for our new container

qa risk: low

Change-Id: Ib10d6a20bf9fa5b4dbed804bcd1396a1843cf0b1
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/254506
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Tested-by: Jeffrey Johnson <jeffrey.johnson@instructure.com>
Reviewed-by: Jeffrey Johnson <jeffrey.johnson@instructure.com>
QA-Review: Jeffrey Johnson <jeffrey.johnson@instructure.com>
Product-Review: Jeffrey Johnson <jeffrey.johnson@instructure.com>

.storybook/preview-body.html

@@ -1 +1 @@
-<div id="screenreader_alert_holder" role="alert" aria-live="assertive" aria-relevant="additions text" aria-atomic="false"></div>
+<div id="flash_screenreader_holder" role="alert" aria-live="assertive" aria-relevant="additions text" aria-atomic="false"></div>

app/controllers/conversations_controller.rb

@@ -280,6 +280,11 @@ class ConversationsController < ApplicationController
       return redirect_to conversations_path(:scope => params[:redirect_scope]) if params[:redirect_scope]
       @current_user.reset_unread_conversations_counter
       @current_user.reload
+      if @domain_root_account.feature_enabled?(:react_inbox)
+        js_bundle :canvas_inbox
+        render html: '', layout: true
+        return
+      end
 
       hash = {
         :ATTACHMENTS_FOLDER_ID => @current_user.conversation_attachments_folder.id.to_s,

app/jsx/bundles/canvas_inbox.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import renderCanvasInboxApp from '../canvas_inbox/index'
+import ready from '@instructure/ready'
+
+ready(() => {
+  renderCanvasInboxApp(ENV, document.getElementById('content'))
+})

app/jsx/canvas_inbox/CanvasInbox.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+
+const CanvasInbox = () => {
+  return <div>Inbox!</div>
+}
+
+export default CanvasInbox

app/jsx/canvas_inbox/components/CourseSelect/CourseSelect.js

@@ -228,7 +228,7 @@ export class CourseSelect extends React.Component {
           {this.renderGroups()}
         </Select>
         <Alert
-          liveRegion={() => document.getElementById('screenreader_alert_holder')}
+          liveRegion={() => document.getElementById('flash_screenreader_holder')}
           liveRegionPoliteness="assertive"
           screenReaderOnly
         >

app/jsx/canvas_inbox/index.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {ApolloProvider, createClient} from 'jsx/canvas-apollo'
+import ErrorBoundary from 'jsx/shared/components/ErrorBoundary'
+import GenericErrorPage from 'jsx/shared/components/GenericErrorPage/index'
+import errorShipUrl from 'jsx/shared/svg/ErrorShip.svg'
+import AlertManager from 'jsx/shared/components/AlertManager'
+// TODO: dummy component, remove once real queries are defined
+import CanvasInbox from './CanvasInbox'
+
+const client = createClient()
+
+export default function renderCanvasInboxApp(env, elt) {
+  ReactDOM.render(
+    <ApolloProvider client={client}>
+      <ErrorBoundary
+        errorComponent={
+          <GenericErrorPage imageUrl={errorShipUrl} errorCategory="Canvas Inbox Error Page" />
+        }
+      >
+        <AlertManager>
+          <CanvasInbox />
+        </AlertManager>
+      </ErrorBoundary>
+    </ApolloProvider>,
+    elt
+  )
+}