refactor(core): Convert AddEntityTagLinks to React (#9147)

* refactor(core): Convert AddEntityTagLinks to React * refactor(core): Import entityTags help into module
spinnaker · May 12, 2021 · 39fa773 · 39fa773
1 parent 03c684d
commit 39fa773
Show file tree

Hide file tree

Showing 18 changed files with 81 additions and 111 deletions.
diff --git a/app/scripts/modules/amazon/src/function/details/FunctionActions.tsx b/app/scripts/modules/amazon/src/function/details/FunctionActions.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { Dropdown } from 'react-bootstrap';
 
 import {
+  AddEntityTagLinks,
   Application,
   ApplicationReader,
   ConfirmationModalService,
   FunctionWriter,
-  NgReact,
   SETTINGS,
 } from '@spinnaker/core';
 import { IAmazonFunction, IAmazonFunctionDeleteCommand } from 'amazon/domain';
@@ -93,8 +93,6 @@ export class FunctionActions extends React.Component<IFunctionActionsProps, IFun
     const { app, functionDef } = this.props;
     const { application } = this.state;
 
-    const { AddEntityTagLinks } = NgReact;
-
     return (
       <div style={{ display: 'inline-block' }}>
         <Dropdown className="dropdown" id="function-actions-dropdown">

diff --git a/app/scripts/modules/amazon/src/loadBalancer/details/LoadBalancerActions.tsx b/app/scripts/modules/amazon/src/loadBalancer/details/LoadBalancerActions.tsx
@@ -3,13 +3,13 @@ import React from 'react';
 import { Dropdown } from 'react-bootstrap';
 
 import {
+  AddEntityTagLinks,
   Application,
   ApplicationReader,
   ConfirmationModalService,
   HelpField,
   LoadBalancerWriter,
   ManagedMenuItem,
-  NgReact,
   SETTINGS,
 } from '@spinnaker/core';
 import { IAmazonLoadBalancer, IAmazonLoadBalancerDeleteCommand } from 'amazon/domain';
@@ -104,7 +104,6 @@ export class LoadBalancerActions extends React.Component<ILoadBalancerActionsPro
   public render() {
     const { app, loadBalancer } = this.props;
     const { application } = this.state;
-    const { AddEntityTagLinks } = NgReact;
 
     const { loadBalancerType, instances, instanceCounts } = loadBalancer;
     const loadBalancerAppName = loadBalancer.name.split('-')[0];

diff --git a/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.html b/app/scripts/modules/amazon/src/securityGroup/details/securityGroupDetail.html
@@ -47,7 +47,7 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
               component="securityGroup"
               application="ctrl.application"
               entity-type="securityGroup"
-              on-update="ctrl.application.securityGroups.refresh()"
+              on-update="ctrl.application.securityGroups.refresh"
             ></add-entity-tag-links>
           </render-if-feature>
         </ul>

diff --git a/app/scripts/modules/amazon/src/serverGroup/details/AmazonServerGroupActions.tsx b/app/scripts/modules/amazon/src/serverGroup/details/AmazonServerGroupActions.tsx
@@ -3,14 +3,14 @@ import React from 'react';
 import { Dropdown, MenuItem, Tooltip } from 'react-bootstrap';
 
 import {
+  AddEntityTagLinks,
   ClusterTargetBuilder,
   ConfirmationModalService,
   IOwnerOption,
   IServerGroupActionsProps,
   IServerGroupJob,
   ManagedMenuItem,
   ModalInjector,
-  NgReact,
   Overridable,
   ReactInjector,
   ServerGroupWarningMessageService,
@@ -285,7 +285,6 @@ export class AmazonServerGroupActions extends React.Component<IAmazonServerGroup
   public render(): JSX.Element {
     const { app, serverGroup } = this.props;
 
-    const { AddEntityTagLinks } = NgReact;
     const showEntityTags = SETTINGS.feature && SETTINGS.feature.entityTags;
     const entityTagTargets: IOwnerOption[] = ClusterTargetBuilder.buildClusterTargets(serverGroup);
 

diff --git a/app/scripts/modules/cloudfoundry/src/serverGroup/details/cloudFoundryServerGroupActions.tsx b/app/scripts/modules/cloudfoundry/src/serverGroup/details/cloudFoundryServerGroupActions.tsx
@@ -3,12 +3,12 @@ import React from 'react';
 import { Dropdown, Tooltip } from 'react-bootstrap';
 
 import {
+  AddEntityTagLinks,
   ClusterTargetBuilder,
   ConfirmationModalService,
   IOwnerOption,
   IServerGroupActionsProps,
   IServerGroupJob,
-  NgReact,
   ReactInjector,
   ServerGroupWarningMessageService,
   SETTINGS,
@@ -284,7 +284,6 @@ export class CloudFoundryServerGroupActions extends React.Component<ICloudFoundr
   public render(): JSX.Element {
     const { app, serverGroup } = this.props;
     const { loadBalancers } = serverGroup;
-    const { AddEntityTagLinks } = NgReact;
     const showEntityTags = SETTINGS.feature && SETTINGS.feature.entityTags;
     const entityTagTargets: IOwnerOption[] = ClusterTargetBuilder.buildClusterTargets(serverGroup);
 

diff --git a/app/scripts/modules/core/src/entityTag/AddEntityTagLinks.tsx b/app/scripts/modules/core/src/entityTag/AddEntityTagLinks.tsx
@@ -1,5 +1,9 @@
+import * as React from 'react';
+
 import { Application } from 'core/application';
-import { IOwnerOption } from './EntityTagEditor';
+import { IEntityRef, IEntityTag } from 'core/domain';
+import { HelpField } from 'core/help';
+import { EntityTagEditor, IOwnerOption } from './EntityTagEditor';
 
 export interface IAddEntityTagLinksProps {
   application: Application;
@@ -9,3 +13,48 @@ export interface IAddEntityTagLinksProps {
   ownerOptions?: IOwnerOption[];
   tagType?: string;
 }
+
+export const AddEntityTagLinks = ({
+  application,
+  component,
+  entityType,
+  onUpdate,
+  ownerOptions,
+}: IAddEntityTagLinksProps) => {
+  const addTag = (tagType: string) => {
+    const tagProps = {
+      application,
+      entityType,
+      entityRef: null as IEntityRef,
+      isNew: true,
+      onUpdate,
+      owner: component,
+      ownerOptions,
+      tag: {
+        name: null,
+        value: {
+          message: null,
+          type: tagType,
+        },
+      } as IEntityTag,
+    };
+
+    EntityTagEditor.show(tagProps);
+  };
+
+  return (
+    <>
+      <li className="divider"></li>
+      <li>
+        <a onClick={() => addTag('notice')}>
+          Add notice <HelpField id={`entityTags.${entityType}.notice`} />
+        </a>
+      </li>
+      <li>
+        <a onClick={() => addTag('alert')}>
+          Add alert <HelpField id={`entityTags.${entityType}.alert`} />
+        </a>
+      </li>
+    </>
+  );
+};
diff --git a/app/scripts/modules/core/src/entityTag/addEntityTagLinks.component.ts b/app/scripts/modules/core/src/entityTag/addEntityTagLinks.component.ts
@@ -1,91 +1,19 @@
-import { IComponentOptions, IController, module } from 'angular';
-import { Application } from 'core/application';
-import { IEntityTag } from 'core/domain';
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+import { withErrorBoundary } from 'core/presentation';
 
-import { EntityTagEditor, IEntityTagEditorProps, IOwnerOption } from './EntityTagEditor';
-import './entityTags.help';
-
-class AddEntityTagLinksCtrl implements IController {
-  public application: Application;
-  public tagType: string;
-
-  private component: any;
-  private entityType: string;
-  private onUpdate: () => any;
-  private ownerOptions: IOwnerOption[];
-
-  public addTag(tagType: string): void {
-    const tag: IEntityTag = {
-      name: null,
-      value: {
-        message: null,
-        type: tagType,
-      },
-    };
-
-    const props: IEntityTagEditorProps = {
-      tag,
-      isNew: true,
-      owner: this.component,
-      entityType: this.entityType,
-      application: this.application,
-      entityRef: null,
-      onUpdate: this.onUpdate,
-      ownerOptions: this.ownerOptions,
-    };
-
-    EntityTagEditor.show(props);
-  }
-}
-
-const addEntityTagLinksComponent: IComponentOptions = {
-  bindings: {
-    component: '<',
-    application: '<',
-    entityType: '@',
-    onUpdate: '&?',
-    tagType: '@',
-    ownerOptions: '<?',
-  },
-  controller: AddEntityTagLinksCtrl,
-  template: `
-    <li role="presentation" class="divider"></li>
-    <li>
-      <a href ng-click="$ctrl.addTag('notice')">
-        Add notice <help-field key="entityTags.{{$ctrl.entityType}}.notice"></help-field>
-      </a>
-    </li>
-    <li>
-      <a href ng-click="$ctrl.addTag('alert')">
-        Add alert <help-field key="entityTags.{{$ctrl.entityType}}.alert"></help-field>
-      </a>
-    </li>
-  `,
-};
-
-export const addEntityTagLinksWrapperComponent: IComponentOptions = {
-  bindings: {
-    component: '<',
-    application: '<',
-    entityType: '<',
-    onUpdate: '<?',
-    tagType: '<',
-    ownerOptions: '<?',
-  },
-  controller: AddEntityTagLinksCtrl,
-  template: `
-    <add-entity-tag-links
-      component="$ctrl.component"
-      application="$ctrl.application"
-      entity-type={{$ctrl.entityType}}
-      on-update="$ctrl.onUpdate()"
-      tag-type={{$ctrl.tagType}}
-      owner-options="$ctrl.ownerOptions">
-    </add-entity-tag-links>
-  `,
-};
+import { AddEntityTagLinks } from './AddEntityTagLinks';
 
 export const ADD_ENTITY_TAG_LINKS_COMPONENT = 'spinnaker.core.entityTag.details.component';
-module(ADD_ENTITY_TAG_LINKS_COMPONENT, [])
-  .component('addEntityTagLinks', addEntityTagLinksComponent)
-  .component('addEntityTagLinksWrapper', addEntityTagLinksWrapperComponent);
+
+module(ADD_ENTITY_TAG_LINKS_COMPONENT, []).component(
+  'addEntityTagLinks',
+  react2angular(withErrorBoundary(AddEntityTagLinks, 'addEntityTagLinks'), [
+    'application',
+    'component',
+    'entityType',
+    'onUpdate',
+    'ownerOptions',
+    'tagType',
+  ]),
+);
diff --git a/app/scripts/modules/core/src/entityTag/entityTags.module.ts b/app/scripts/modules/core/src/entityTag/entityTags.module.ts
@@ -3,6 +3,7 @@ import { module } from 'angular';
 import { ADD_ENTITY_TAG_LINKS_COMPONENT } from './addEntityTagLinks.component';
 import { ENTITY_SOURCE_COMPONENT } from './entitySource.component';
 import { ENTITY_TAGS_DATA_SOURCE } from './entityTags.dataSource';
+import './entityTags.help';
 import { DATA_SOURCE_NOTIFICATIONS } from './notifications/DataSourceNotifications';
 import { ENTITY_NOTIFICATIONS } from './notifications/entityNotifications.component';
 

diff --git a/app/scripts/modules/core/src/reactShims/ngReact.ts b/app/scripts/modules/core/src/reactShims/ngReact.ts
@@ -3,9 +3,7 @@ import React from 'react';
 
 import { IViewChangesLinkProps } from 'core/diffs/ViewChangesLink';
 import { viewChangesLinkWrapper } from 'core/diffs/viewChangesLink.component';
-import { IAddEntityTagLinksProps } from 'core/entityTag/AddEntityTagLinks';
 import { IEntitySourceProps } from 'core/entityTag/EntitySource';
-import { addEntityTagLinksWrapperComponent } from 'core/entityTag/addEntityTagLinks.component';
 import { entitySourceComponent } from 'core/entityTag/entitySource.component';
 import { INumberListProps } from 'core/forms/numberList/NumberList';
 import { numberListWrapperComponent } from 'core/forms/numberList/numberList.component';
@@ -41,7 +39,6 @@ export class NgReactInjector extends ReactInject {
 
   // Reactified components
   public AccountRegionClusterSelector: React.ComponentClass<IAccountRegionClusterSelectorProps> = angular2react('accountRegionClusterSelectorWrapper', accountRegionClusterSelectorWrapperComponent, this.$injectorProxy) as any;
-  public AddEntityTagLinks: React.ComponentClass<IAddEntityTagLinksProps>                       = angular2react('addEntityTagLinksWrapper', addEntityTagLinksWrapperComponent, this.$injectorProxy) as any;
   public ButtonBusyIndicator: React.ComponentClass<IButtonBusyIndicatorProps>                   = angular2react('buttonBusyIndicator', buttonBusyIndicatorComponent, this.$injectorProxy) as any;
   public EntitySource: React.ComponentClass<IEntitySourceProps>                                 = angular2react('entitySource', entitySourceComponent, this.$injectorProxy) as any;
   public HelpField: React.ComponentClass<IHelpFieldProps>                                       = angular2react('helpFieldWrapper', helpFieldWrapperComponent, this.$injectorProxy) as any;

diff --git a/app/scripts/modules/ecs/src/serverGroup/details/serverGroupDetails.html b/app/scripts/modules/ecs/src/serverGroup/details/serverGroupDetails.html
@@ -66,7 +66,7 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
                 application="ctrl.application"
                 entity-type="serverGroup"
                 owner-options="ctrl.entityTagTargets"
-                on-update="ctrl.application.serverGroups.refresh()"
+                on-update="ctrl.application.serverGroups.refresh"
               ></add-entity-tag-links>
             </render-if-feature>
           </ul>

diff --git a/app/scripts/modules/google/src/loadBalancer/details/loadBalancerDetails.html b/app/scripts/modules/google/src/loadBalancer/details/loadBalancerDetails.html
@@ -56,7 +56,7 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
                 component="loadBalancer"
                 application="ctrl.application"
                 entity-type="loadBalancer"
-                on-update="ctrl.application.loadBalancers.refresh()"
+                on-update="ctrl.application.loadBalancers.refresh"
               ></add-entity-tag-links>
             </render-if-feature>
           </ul>

diff --git a/app/scripts/modules/google/src/securityGroup/details/securityGroupDetail.html b/app/scripts/modules/google/src/securityGroup/details/securityGroupDetail.html
@@ -44,7 +44,7 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
               component="securityGroup"
               application="ctrl.application"
               entity-type="securityGroup"
-              on-update="ctrl.application.securityGroups.refresh()"
+              on-update="ctrl.application.securityGroups.refresh"
             ></add-entity-tag-links>
           </render-if-feature>
         </ul>

diff --git a/app/scripts/modules/google/src/serverGroup/details/serverGroupDetails.html b/app/scripts/modules/google/src/serverGroup/details/serverGroupDetails.html
@@ -60,7 +60,7 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
                 application="ctrl.application"
                 entity-type="serverGroup"
                 owner-options="ctrl.entityTagTargets"
-                on-update="ctrl.application.serverGroups.refresh()"
+                on-update="ctrl.application.serverGroups.refresh"
               ></add-entity-tag-links>
             </render-if-feature>
           </ul>

diff --git a/app/scripts/modules/kubernetes/src/loadBalancer/details/details.html b/app/scripts/modules/kubernetes/src/loadBalancer/details/details.html
@@ -55,7 +55,7 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
               component="ctrl.loadBalancer"
               application="ctrl.app"
               entity-type="loadBalancer"
-              on-update="ctrl.app.loadBalancers.refresh()"
+              on-update="ctrl.app.loadBalancers.refresh"
             ></add-entity-tag-links>
           </render-if-feature>
         </ul>

diff --git a/app/scripts/modules/kubernetes/src/securityGroup/details/details.html b/app/scripts/modules/kubernetes/src/securityGroup/details/details.html
@@ -57,7 +57,7 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
               component="ctrl.securityGroup"
               application="ctrl.app"
               entity-type="securityGroup"
-              on-update="ctrl.app.securityGroups.refresh()"
+              on-update="ctrl.app.securityGroups.refresh"
             ></add-entity-tag-links>
           </render-if-feature>
         </ul>

diff --git a/app/scripts/modules/kubernetes/src/serverGroup/details/details.html b/app/scripts/modules/kubernetes/src/serverGroup/details/details.html
@@ -64,7 +64,7 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
               application="ctrl.app"
               entity-type="serverGroup"
               owner-options="ctrl.entityTagTargets"
-              on-update="ctrl.app.serverGroups.refresh()"
+              on-update="ctrl.app.serverGroups.refresh"
             ></add-entity-tag-links>
           </render-if-feature>
         </ul>

diff --git a/app/scripts/modules/kubernetes/src/serverGroupManager/details/details.html b/app/scripts/modules/kubernetes/src/serverGroupManager/details/details.html
@@ -73,7 +73,7 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
               application="ctrl.app"
               entity-type="serverGroupManager"
               owner-options="ctrl.entityTagTargets"
-              on-update="ctrl.app.serverGroupManagers.refresh()"
+              on-update="ctrl.app.serverGroupManagers.refresh"
             ></add-entity-tag-links>
           </render-if-feature>
         </ul>

diff --git a/app/scripts/modules/titus/src/serverGroup/details/serverGroupDetails.html b/app/scripts/modules/titus/src/serverGroup/details/serverGroupDetails.html
@@ -52,7 +52,7 @@ <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
               application="ctrl.application"
               entity-type="serverGroup"
               owner-options="ctrl.entityTagTargets"
-              on-update="ctrl.application.serverGroups.refresh()"
+              on-update="ctrl.application.serverGroups.refresh"
             ></add-entity-tag-links>
           </ul>
         </div>