refactor(core): reactify notification and manual execution modal (#7075)

* Refactor Notifications from angular components to React components.

* Notifications now uses formik

* Refactoring Notifications to formik forced me to refactor Manual Execution Modal to React and formik

* Refactored Stages, Manual Judgment, Triggers and Application Config to use new Notifications

* Updated previously implemented manual execution components to no longer update the command in their props but to use a callback instead

* Leveraged the Registry Service to add Notifications types similar to triggers

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

@@ -57,5 +57,12 @@ module.exports = angular
             this.bannerConfigProps.saveError = true;
           });
       };
+
+      this.notifications = [];
+      this.updateNotifications = notifications => {
+        $scope.$applyAsync(() => {
+          this.notifications = notifications;
+        });
+      };
     },
   ]);

app/scripts/modules/core/src/application/config/applicationConfig.view.html

@@ -7,6 +7,7 @@
       <application-notifications
         application="config.application"
         notifications="config.notifications"
+        update-notifications="config.updateNotifications"
       ></application-notifications>
     </page-section>
     <page-section key="features" label="Features">

app/scripts/modules/core/src/application/config/applicationNotifications.directive.html

@@ -1,6 +1,7 @@
 <p>You can edit notification settings for this application</p>
 <notification-list
+  application="vm.application"
   notifications="vm.notifications"
-  level="application"
-  application="vm.application.name"
+  level="'application'"
+  update-notifications="vm.updateNotifications"
 ></notification-list>

app/scripts/modules/core/src/application/config/applicationNotifications.directive.js

@@ -19,6 +19,7 @@ module.exports = angular
         bindToController: {
           application: '=',
           notifications: '=',
+          updateNotifications: '=',
         },
         controllerAs: 'vm',
         controller: angular.noop,

app/scripts/modules/core/src/domain/INotification.ts

@@ -0,0 +1,8 @@
+import { ITemplateInheritable } from './IPipeline';
+
+export interface INotification extends ITemplateInheritable {
+  level?: string;
+  type: string;
+  when: string[];
+  [key: string]: any;
+}

app/scripts/modules/core/src/domain/INotificationTypeConfig.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export interface INotificationTypeConfig {
+  label: string;
+  key: string;
+  config?: INotificationTypeCustomConfig;
+  component?: React.ComponentType;
+}
+
+export interface INotificationTypeCustomConfig {
+  fieldName?: string;
+  botName?: string;
+}

app/scripts/modules/core/src/domain/IPipeline.ts

@@ -2,12 +2,7 @@ import { IStage } from './IStage';
 import { ITrigger } from './ITrigger';
 import { IExpectedArtifact } from 'core/domain/IExpectedArtifact';
 import { IEntityTags } from './IEntityTags';
-
-interface INotification extends ITemplateInheritable {
-  type: string;
-  address: string;
-  when: string[];
-}
+import { INotification } from './INotification';
 
 export interface IPipeline {
   application: string;
@@ -39,12 +34,15 @@ export interface IPipeline {
 
 export interface IParameter extends ITemplateInheritable {
   name: string;
+  conditional?: any;
+  constraint?: string;
   description: string;
   default: string;
   hasOptions: boolean;
   pinned: boolean;
   options: IParameterOption[];
   condition?: IParameterCondition;
+  required?: boolean;
 }
 
 export interface IParameterCondition {
@@ -58,12 +56,14 @@ export interface IParameterOption {
 }
 
 export interface IPipelineCommand {
+  dryRun?: boolean;
   extraFields?: { [key: string]: any };
   triggerInvalid?: boolean;
   pipeline: IPipeline;
   trigger: ITrigger;
   notificationEnabled: boolean;
   notification: INotification;
+  parameters?: { [key: string]: any };
   pipelineName: string;
 }
 

app/scripts/modules/core/src/domain/ITrigger.ts

@@ -1,6 +1,8 @@
-import { IExecution, ITemplateInheritable } from 'core/domain';
+import { IArtifact, IExecution, ITemplateInheritable } from 'core/domain';
 
 export interface ITrigger extends ITemplateInheritable {
+  artifacts?: IArtifact[];
+  description?: string;
   enabled: boolean;
   rebake?: boolean;
   user?: string;

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

@@ -1,4 +1,3 @@
-export * from './IAppNotification';
 export * from './IArtifact';
 export * from './IArtifactEditorProps';
 export * from './IArtifactExtractor';
@@ -35,6 +34,9 @@ export * from './ILoadBalancer';
 
 export * from './IManifest';
 
+export * from './INotification';
+export * from './INotificationTypeConfig';
+
 export * from './IOrchestratedItem';
 
 export * from './IPipeline';

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

@@ -53,6 +53,8 @@ export * from './naming';
 export * from './navigation';
 export * from './network';
 
+export * from './notification';
+
 export * from './orchestratedItem';
 export * from './overrideRegistry';
 

app/scripts/modules/core/src/modal/wizard/WizardModal.tsx

@@ -183,7 +183,6 @@ export class WizardModal<T = {}> extends React.Component<IWizardModalProps<T>, I
                     <div className="col-md-3 hidden-sm hidden-xs">
                       <ul className="steps-indicator wizard-navigation">{pageLabels}</ul>
                     </div>
-
                     <div className="col-md-9 col-sm-12">
                       <div className="steps" ref={this.stepsElement} onScroll={this.handleStepsScroll}>
                         {renderPageContents()}

app/scripts/modules/core/src/modal/wizard/WizardPage.tsx

@@ -15,7 +15,7 @@ export interface IWizardPageRenderProps {
 }
 
 export interface IWizardPageProps {
-  label: string;
+  label?: string;
   order: number;
   note?: React.ReactNode;
   render: (props: IWizardPageRenderProps) => JSX.Element;
@@ -98,9 +98,11 @@ export class WizardPage<T> extends React.Component<IWizardPageProps, IWizardPage
 
     return (
       <div className="modal-page" ref={this.ref}>
-        <div className="wizard-subheading sticky-header">
-          <h4 className={className}>{label}</h4>
-        </div>
+        {label && (
+          <div className="wizard-subheading sticky-header">
+            <h4 className={className}>{label}</h4>
+          </div>
+        )}
         <div className="wizard-page-body">
           {pageContents}
           {note && <div className="row">{note}</div>}

app/scripts/modules/core/src/notification/AppNotificationsService.ts

@@ -1,11 +1,11 @@
 import { IPromise } from 'angular';
 
 import { API } from 'core/api/ApiService';
-import { IAppNotification } from 'core/domain';
+import { INotification } from 'core/domain';
 
 export interface IAppNotifications {
   application: string;
-  [key: string]: IAppNotification[] | string; // "| string" is just for application field
+  [key: string]: INotification[] | string; // "| string" is just for application field
 }
 
 export class AppNotificationsService {