refactor(application): reactify delete application section (#7501)

app/scripts/modules/core/src/application/config/DeleteApplicationSection.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { Application, ApplicationWriter } from 'core/application';
+import { ReactInjector } from 'core/reactShims';
+import { FirewallLabel } from 'core/securityGroup/label';
+
+export interface IDeleteApplicationSection {
+  application: Application;
+}
+
+export function DeleteApplicationSection(props: IDeleteApplicationSection) {
+  const { application } = props;
+  const deleteApplication = (): void => {
+    const taskMonitor = {
+      application,
+      title: `Deleting ${application.name}`,
+      hasKatoTask: false,
+      onTaskComplete: () => {
+        ReactInjector.$state.go('home.infrastructure');
+      },
+    };
+
+    ReactInjector.confirmationModalService.confirm({
+      header: `Really delete ${application.name} ?`,
+      buttonText: `Delete ${application.name}`,
+      provider: 'aws',
+      taskMonitorConfig: taskMonitor,
+      submitMethod: () => ApplicationWriter.deleteApplication(application.attributes),
+    });
+  };
+
+  if (application.notFound) {
+    return (
+      <>
+        <p>Application not found.</p>
+      </>
+    );
+  } else {
+    return Boolean(application.serverGroups.data.length) ? (
+      <>
+        <p>You cannot delete this application because it has server groups.</p>
+      </>
+    ) : (
+      <>
+        <p>
+          Deleting the application only removes the associated metadata around the application. It will{' '}
+          <strong>not</strong> delete any <FirewallLabel label="firewalls" />, load balancers, or pipeline
+          configurations you may have created.
+        </p>
+        <button className="btn btn-link clickable" onClick={deleteApplication}>
+          <span>
+            <span className="glyphicon glyphicon-trash" /> Delete Application
+          </span>
+        </button>
+      </>
+    );
+  }
+}

app/scripts/modules/core/src/application/config/applicationConfig.controller.js

@@ -6,6 +6,7 @@ import { TRAFFIC_GUARD_CONFIG_COMPONENT } from './trafficGuard/trafficGuardConfi
 import { SETTINGS } from 'core/config/settings';
 import { ApplicationWriter } from 'core/application/service/ApplicationWriter';
 import { ManagedReader } from 'core/managed';
+import { DELETE_APPLICATION_SECTION } from './deleteApplicationSection.module';
 
 const angular = require('angular');
 
@@ -14,8 +15,8 @@ module.exports = angular
     require('@uirouter/angularjs').default,
     require('./applicationAttributes.directive').name,
     require('./applicationNotifications.directive').name,
-    require('./deleteApplicationSection.directive').name,
     require('./applicationSnapshotSection.component').name,
+    DELETE_APPLICATION_SECTION,
     APPLICATION_DATA_SOURCE_EDITOR,
     CHAOS_MONKEY_CONFIG_COMPONENT,
     TRAFFIC_GUARD_CONFIG_COMPONENT,

app/scripts/modules/core/src/application/config/deleteApplicationSection.module.ts

@@ -0,0 +1,8 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+import { DeleteApplicationSection } from './DeleteApplicationSection';
+export const DELETE_APPLICATION_SECTION = 'spinnaker.core.application.config.delete.directive';
+module(DELETE_APPLICATION_SECTION, []).component(
+  'deleteApplicationSection',
+  react2angular(DeleteApplicationSection, ['application']),
+);

app/scripts/modules/core/src/securityGroup/label/FirewallLabel.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import { FirewallLabels } from './FirewallLabels';
+
+export interface IFirewallLabel {
+  label: string;
+}
+
+export function FirewallLabel(props: IFirewallLabel) {
+  return <span>{FirewallLabels.get(props.label)}</span>;
+}

app/scripts/modules/core/src/securityGroup/label/index.ts

@@ -1 +1,2 @@
+export * from './FirewallLabel';
 export * from './FirewallLabels';