[ReactNavToolbar] Integration branch (#3513)

* Created ng-controller for react shared context and set editor.loading

* toolbar-header component with menu button (and story)

* Added editor-navigation-toolbar-root and react2angular plumbing

* Added eslint-disable exception to use <a/> instead of <button/>

* added 'menu' to extracted translation

* [ReactNavToolbar] Added cobranding and back to projects buttons (#3515)

GitOrigin-RevId: 27c3bba85cbc96a123d58c66a0bd5d6a2cfd8aca

services/web/frontend/js/shared/context/controllers/root-context-controller.js

@@ -0,0 +1,15 @@
+import App from '../../../base'
+import { react2angular } from 'react2angular'
+import { rootContext } from '../root-context'
+
+App.controller('ReactRootContextController', function($scope, ide) {
+  $scope.editorLoading = !!ide.$scope.state.loading
+  ide.$scope.$watch('state.loading', editorLoading => {
+    $scope.editorLoading = editorLoading
+  })
+})
+
+App.component(
+  'sharedContextReact',
+  react2angular(rootContext.component, ['editorLoading'])
+)

services/web/frontend/js/shared/context/editor-context.js

@@ -3,13 +3,23 @@ import PropTypes from 'prop-types'
 
 export const EditorContext = createContext()
 
-export function EditorProvider({ children }) {
+export function EditorProvider({ children, loading }) {
+  const cobranding = window.brandVariation
+    ? {
+        logoImgUrl: window.brandVariation.logo_url,
+        brandVariationName: window.brandVariation.name,
+        brandVariationHomeUrl: window.brandVariation.home_url
+      }
+    : undefined
+
   const ownerId =
     window._ide.$scope.project && window._ide.$scope.project.owner
       ? window._ide.$scope.project.owner._id
       : null
 
   const editorContextValue = {
+    cobranding,
+    loading,
     projectId: window.project_id,
     isProjectOwner: ownerId === window.user.id
   }
@@ -22,7 +32,8 @@ export function EditorProvider({ children }) {
 }
 
 EditorProvider.propTypes = {
-  children: PropTypes.any
+  children: PropTypes.any,
+  loading: PropTypes.bool
 }
 
 export function useEditorContext() {

services/web/frontend/js/shared/context/root-context.js

@@ -1,15 +1,20 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { ApplicationProvider } from './application-context'
 import { EditorProvider } from './editor-context'
 import createSharedContext from 'react2angular-shared-context'
 
-// eslint-disable-next-line react/prop-types
-export function ContextRoot({ children }) {
+export function ContextRoot({ children, editorLoading }) {
   return (
     <ApplicationProvider>
-      <EditorProvider>{children}</EditorProvider>
+      <EditorProvider loading={editorLoading}>{children}</EditorProvider>
     </ApplicationProvider>
   )
 }
 
+ContextRoot.propTypes = {
+  children: PropTypes.any,
+  editorLoading: PropTypes.bool
+}
+
 export const rootContext = createSharedContext(ContextRoot)