refactor(core): convert security groups views to React (#7676)

app/scripts/modules/amazon/src/securityGroup/configure/configSecurityGroup.mixin.controller.js

@@ -235,7 +235,7 @@ module.exports = angular
       function clearInvalidSecurityGroups() {
         var removed = $scope.state.removedRules,
           securityGroup = $scope.securityGroup;
-        $scope.securityGroup.securityGroupIngress = securityGroup.securityGroupIngress.filter(rule => {
+        $scope.securityGroup.securityGroupIngress = (securityGroup.securityGroupIngress || []).filter(rule => {
           if (
             rule.accountName &&
             rule.vpcId &&

app/scripts/modules/core/src/managed/index.ts

@@ -2,7 +2,6 @@ export * from './ManagedReader';
 export * from './ManagedWriter';
 export * from './ManagedResourceDetailsIndicator';
 export * from './managedResourceDetailsIndicator.component';
-export * from './managedResourceStatusIndicator.component';
 export * from './ManagedResourceStatusIndicator';
 export * from './managed.dataSource';
 export * from './managedResourceDecorators';

app/scripts/modules/core/src/securityGroup/CreateSecurityGroupButton.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+
+import { Application } from 'core/application';
+import { CloudProviderRegistry, ICloudProviderConfig, ProviderSelectionService } from 'core/cloudProvider';
+import { ModalInjector, ReactInjector } from 'core/reactShims';
+import { Tooltip } from 'core/presentation';
+import { IAccountDetails } from 'core/account';
+import { SETTINGS } from 'core/config/settings';
+
+import { FirewallLabels } from './label/FirewallLabels';
+
+const providerFilterFn = (_application: Application, _account: IAccountDetails, provider: ICloudProviderConfig) => {
+  const sgConfig = provider.securityGroup;
+  return (
+    sgConfig &&
+    (sgConfig.CreateSecurityGroupModal ||
+      (sgConfig.createSecurityGroupTemplateUrl && sgConfig.createSecurityGroupController))
+  );
+};
+
+const getDefaultCredentials = (app: Application, provider: string) =>
+  app.defaultCredentials[provider] || SETTINGS.providers[provider].defaults.account;
+const getDefaultRegion = (app: Application, provider: string) =>
+  app.defaultRegions[provider] || SETTINGS.providers[provider].defaults.region;
+
+const getAngularModalOptions = (provider: any, selectedProvider: string, app: Application) => ({
+  templateUrl: provider.createSecurityGroupTemplateUrl,
+  controller: `${provider.createSecurityGroupController} as ctrl`,
+  size: 'lg',
+  resolve: {
+    securityGroup: () => {
+      return {
+        credentials: getDefaultCredentials(app, selectedProvider),
+        subnet: 'none',
+        regions: [getDefaultRegion(app, selectedProvider)],
+      };
+    },
+    application: () => {
+      return app;
+    },
+  },
+});
+
+const getReactModalOptions = (selectedProvider: string, app: Application) => ({
+  credentials: getDefaultCredentials(app, selectedProvider),
+  application: app,
+  isNew: true,
+});
+
+export const CreateSecurityGroupButton = ({ app }: { app: Application }) => {
+  const createSecurityGroup = (): void => {
+    const { skinSelectionService } = ReactInjector;
+
+    ProviderSelectionService.selectProvider(app, 'securityGroup', providerFilterFn).then(selectedProvider => {
+      skinSelectionService.selectSkin(selectedProvider).then(selectedSkin => {
+        const provider = CloudProviderRegistry.getValue(selectedProvider, 'securityGroup', selectedSkin);
+
+        if (provider.CreateSecurityGroupModal) {
+          provider.CreateSecurityGroupModal.show(getReactModalOptions(selectedProvider, app));
+        } else {
+          // angular
+          ModalInjector.modalService
+            .open(getAngularModalOptions(provider, selectedProvider, app))
+            .result.catch(() => {});
+        }
+      });
+    });
+  };
+
+  return (
+    <div>
+      <button className="btn btn-sm btn-default" onClick={createSecurityGroup}>
+        <span className="glyphicon glyphicon-plus-sign visible-lg-inline" />
+        <Tooltip value="Create Load Balancer">
+          <span className="glyphicon glyphicon-plus-sign visible-md-inline visible-sm-inline" />
+        </Tooltip>
+        <span className="visible-lg-inline"> Create {FirewallLabels.get('Firewall')}</span>
+      </button>
+    </div>
+  );
+};