refactor(core): Convert spinnaker container to React (#8366)

* refactor(core): Convert spinnaker container to React

* Include support for component and tempalte overrides

* refactor(core): Merge with other branches

app/scripts/modules/core/src/bootstrap/SpinnakerContainer.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { UIView } from '@uirouter/react';
+
+import { CustomBanner } from '../header/customBanner/CustomBanner';
+import { Notifier } from '../widgets/notifier/Notifier';
+import { SpinnakerHeader } from '../header/SpinnakerHeader';
+import { Spinner } from '../widgets/spinners/Spinner';
+
+export interface ISpinnakerContainerProps {
+  authenticating: boolean;
+  routing: boolean;
+}
+
+export const SpinnakerContainer = ({ authenticating, routing }: ISpinnakerContainerProps) => (
+  <>
+    <div className="spinnaker-container grid-container">
+      {!authenticating && routing && (
+        <div className="transition-overlay">
+          <Spinner size="medium" />
+        </div>
+      )}
+      <div className="navbar-inverse grid-header">
+        <CustomBanner />
+        <SpinnakerHeader />
+      </div>
+      <div className="spinnaker-content grid-contents">{!authenticating && <UIView name="main" />}</div>
+    </div>
+    <Notifier />
+  </>
+);

app/scripts/modules/core/src/bootstrap/bootstrap.module.ts

@@ -1,13 +1,10 @@
 import { IModule, module } from 'angular';
 
 import { OVERRIDE_REGISTRY } from 'core/overrideRegistry/override.registry';
-
-import { SPINNAKER_HEADER } from 'core/header/spinnakerHeader.component';
-import { CUSTOM_BANNER } from 'core/header/customBanner/customBanner.component';
+import { SPINNAKER_CONTAINER_COMPONENT } from './spinnakerContainer.component';
 
 export const APPLICATION_BOOTSTRAP_MODULE = 'spinnaker.core.applicationBootstrap';
 export const bootstrapModule = module(APPLICATION_BOOTSTRAP_MODULE, [
   OVERRIDE_REGISTRY,
-  SPINNAKER_HEADER,
-  CUSTOM_BANNER,
+  SPINNAKER_CONTAINER_COMPONENT,
 ]) as IModule;

app/scripts/modules/core/src/bootstrap/spinnaker.component.ts

@@ -1,37 +1,22 @@
 import { IController } from 'angular';
-import { react2angular } from 'react2angular';
 
 import { bootstrapModule } from './bootstrap.module';
-import { OverrideRegistry } from 'core/overrideRegistry';
 import { IFeatures, SETTINGS } from 'core/config/settings';
-
-import { SpinnakerHeader } from 'core/header/SpinnakerHeader';
+import { IDeckRootScope } from 'core/domain';
 
 const template = `
-  <div class="spinnaker-container grid-container">
-    <div class="transition-overlay" ng-if="!authenticating && routing">
-      <loading-spinner size="'medium'"></loading-spinner>
-    </div>
-    <div class="navbar-inverse grid-header">
-      <custom-banner></custom-banner>
-      <div ng-include="$ctrl.spinnakerHeaderTemplate"></div>
-    </div>
-
-    <div class="spinnaker-content grid-contents">
-      <div ui-view="main" ng-if="!authenticating"></div>
-    </div>
-  </div>
-  <notifier></notifier>
+  <spinnaker-container authenticating="$ctrl.authenticating" routing="$ctrl.routing"></spinnaker-container>
 `;
 
 class SpinnakerController implements IController {
-  public spinnakerHeaderTemplate: string;
+  public authenticating: boolean;
   public feature: IFeatures;
-  public static $inject = ['overrideRegistry'];
-  constructor(overrideRegistry: OverrideRegistry) {
-    react2angular(SpinnakerHeader);
-    this.spinnakerHeaderTemplate = overrideRegistry.getTemplate('spinnakerHeader', require('./spinnakerHeader.html'));
+  public routing: boolean;
+  public static $inject = ['$rootScope'];
+  constructor($rootScope: IDeckRootScope) {
     this.feature = SETTINGS.feature;
+    this.authenticating = $rootScope.authenticating;
+    this.routing = $rootScope.routing;
   }
 }
 

app/scripts/modules/core/src/bootstrap/spinnakerContainer.component.ts

@@ -0,0 +1,10 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+
+import { SpinnakerContainer } from './SpinnakerContainer';
+
+export const SPINNAKER_CONTAINER_COMPONENT = 'spinnaker.core.container.component';
+module(SPINNAKER_CONTAINER_COMPONENT, []).component(
+  'spinnakerContainer',
+  react2angular(SpinnakerContainer, ['authenticating', 'routing']),
+);

app/scripts/modules/core/src/header/SpinnakerHeader.tsx

@@ -3,6 +3,7 @@ import { UISref, UISrefActive } from '@uirouter/react';
 import { UIRouterContext } from '@uirouter/react-hybrid';
 
 import { NgReact } from 'core/reactShims';
+import { Overridable } from 'core/overrideRegistry';
 import { GlobalSearch } from 'core/search/global/GlobalSearch';
 import { HelpMenu } from 'core/help/HelpMenu';
 
@@ -13,6 +14,7 @@ export interface ISpinnakerHeaderState {
 }
 
 @UIRouterContext
+@Overridable('spinnakerHeader')
 export class SpinnakerHeader extends React.Component<{}, ISpinnakerHeaderState> {
   constructor(props: {}) {
     super(props);

app/scripts/modules/core/src/presentation/main.less

@@ -1233,7 +1233,7 @@ html {
     overflow-y: auto;
     flex-direction: column;
     align-items: stretch;
-    > [ui-view='main'] {
+    > [name='main'] {
       display: flex;
       flex-direction: column;
       flex: 1 1 auto;

app/scripts/modules/core/src/widgets/notifier/Notifier.tsx

@@ -4,6 +4,8 @@ import { Subscription } from 'rxjs';
 import { INotifier, NotifierService } from './notifier.service';
 import { Markdown } from 'core/presentation';
 
+import './notifier.component.less';
+
 export interface INotifierState {
   messages: INotifier[];
 }

app/scripts/modules/core/src/widgets/widgets.module.ts

@@ -1,7 +1,6 @@
 import { module } from 'angular';
 
 import { SPINNER_WRAPPER } from './Spinner';
-import { NOTIFIER_COMPONENT } from './notifier/notifier.component';
 import { ACCOUNT_REGION_CLUSTER_SELECTOR_WRAPPER } from './accountRegionClusterSelectorWrapper.component';
 import { CORE_WIDGETS_ACCOUNTNAMESPACECLUSTERSELECTOR_COMPONENT } from './accountNamespaceClusterSelector.component';
 import { CORE_WIDGETS_ACCOUNTREGIONCLUSTERSELECTOR_COMPONENT } from './accountRegionClusterSelector.component';
@@ -16,7 +15,6 @@ module(WIDGETS_MODULE, [
   CORE_WIDGETS_ACCOUNTREGIONCLUSTERSELECTOR_COMPONENT,
   ACCOUNT_REGION_CLUSTER_SELECTOR_WRAPPER,
   CORE_WIDGETS_SCOPECLUSTERSELECTOR_DIRECTIVE,
-  NOTIFIER_COMPONENT,
   CORE_WIDGETS_SPELTEXT_SPELTEXT_DECORATOR,
   CORE_WIDGETS_SPELTEXT_SPELSELECT_COMPONENT,
   CORE_WIDGETS_ACTIONICONS_ACTIONICONS_COMPONENT,

test/functional/cypress/integration/google/clone.spec.js

@@ -16,7 +16,7 @@ describe('google: Clone Modal Build custom instance type', () => {
     // click v000 cluster
     cy.get('.sub-group:contains("compute-engine")')
       .find('.server-group:contains("v000")')
-      .click();
+      .click({ force: true });
 
     // clone dialog
     cy.get('button:contains("Server Group Actions")').click();