refactor(pipeline): reactify pipeline config actions dropdown (spinna…

…ker#7447)

app/scripts/modules/core/src/pipeline/config/actions/PipelineConfigAction.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface IPipelineConfigActionProps {
+  action?: () => void;
+  name: string;
+}
+
+export function PipelineConfigAction(props: IPipelineConfigActionProps) {
+  return (
+    <li>
+      <a className={props.action ? 'clickable' : 'disable'} onClick={props.action}>
+        {props.name}
+      </a>
+    </li>
+  );
+}

app/scripts/modules/core/src/pipeline/config/actions/PipelineConfigActions.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { Dropdown } from 'react-bootstrap';
+
+import { IPipeline } from 'core/domain';
+import { SETTINGS } from 'core/config/settings';
+import { PipelineConfigAction } from './PipelineConfigAction';
+
+export interface IPipelineConfigActionsProps {
+  hasHistory: boolean;
+  loadingHistory: boolean;
+  pipeline: IPipeline;
+  renamePipeline: () => void;
+  deletePipeline: () => void;
+  enablePipeline: () => void;
+  disablePipeline: () => void;
+  lockPipeline: () => void;
+  unlockPipeline: () => void;
+  editPipelineJson: () => void;
+  showHistory: () => void;
+  exportPipelineTemplate: () => void;
+}
+
+export function PipelineConfigActions(props: IPipelineConfigActionsProps) {
+  const {
+    hasHistory,
+    loadingHistory,
+    pipeline,
+    renamePipeline,
+    deletePipeline,
+    enablePipeline,
+    disablePipeline,
+    lockPipeline,
+    unlockPipeline,
+    editPipelineJson,
+    showHistory,
+    exportPipelineTemplate,
+  } = props;
+  const managedPipelineTemplatesV2UI = SETTINGS.feature.managedPipelineTemplatesV2UI;
+
+  return (
+    <Dropdown className="dropdown" id="pipeline-actions-dropdown">
+      <Dropdown.Toggle className="btn btn-sm dropdown-toggle">
+        {pipeline.strategy === true ? 'Strategy' : 'Pipeline'} Actions
+      </Dropdown.Toggle>
+      <Dropdown.Menu className="dropdown-menu">
+        {!pipeline.locked && <PipelineConfigAction name="Rename" action={renamePipeline} />}
+        {!pipeline.locked && <PipelineConfigAction name="Delete" action={deletePipeline} />}
+        {!pipeline.locked && pipeline.disabled && <PipelineConfigAction name="Enable" action={enablePipeline} />}
+        {!pipeline.locked && !pipeline.disabled && <PipelineConfigAction name="Disable" action={disablePipeline} />}
+        {!pipeline.locked && <PipelineConfigAction name="Lock" action={lockPipeline} />}
+        {pipeline.locked && pipeline.locked.allowUnlockUi && (
+          <PipelineConfigAction name="Unlock" action={unlockPipeline} />
+        )}
+        {pipeline.locked && <PipelineConfigAction name="Show JSON" action={editPipelineJson} />}
+        {!pipeline.locked && <PipelineConfigAction name="Edit as JSON" action={editPipelineJson} />}
+        {loadingHistory && <PipelineConfigAction name="Loading History..." />}
+        {!loadingHistory && hasHistory && <PipelineConfigAction name="Show Revision History" action={showHistory} />}
+        {!loadingHistory && !hasHistory && <PipelineConfigAction name="No version history found" />}
+        {managedPipelineTemplatesV2UI && (
+          <PipelineConfigAction name="Export as Pipeline Template" action={exportPipelineTemplate} />
+        )}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}

app/scripts/modules/core/src/pipeline/config/actions/pipelineConfigActions.module.ts

@@ -0,0 +1,21 @@
+import { module } from 'angular';
+import { react2angular } from 'react2angular';
+import { PipelineConfigActions } from './PipelineConfigActions';
+export const PIPELINE_CONFIG_ACTIONS = 'pinnaker.core.pipeline.config.actions';
+module(PIPELINE_CONFIG_ACTIONS, []).component(
+  'pipelineConfigActions',
+  react2angular(PipelineConfigActions, [
+    'hasHistory',
+    'loadingHistory',
+    'pipeline',
+    'renamePipeline',
+    'deletePipeline',
+    'enablePipeline',
+    'disablePipeline',
+    'lockPipeline',
+    'unlockPipeline',
+    'editPipelineJson',
+    'showHistory',
+    'exportPipelineTemplate',
+  ]),
+);

app/scripts/modules/core/src/pipeline/config/pipelineConfigurer.html

@@ -34,7 +34,20 @@ <h3>
           <create-pipeline application="application"></create-pipeline>
         </div>
         <div class="pipeline-actions text-right">
-          <div ng-include="pipelineConfigurerCtrl.actionsTemplateUrl"></div>
+          <Pipeline-Config-Actions
+            has-history="viewState.hasHistory"
+            loading-history="viewState.loadingHistory"
+            pipeline="pipeline"
+            rename-pipeline="pipelineConfigurerCtrl.renamePipeline"
+            delete-pipeline="pipelineConfigurerCtrl.deletePipeline"
+            enable-pipeline="pipelineConfigurerCtrl.enablePipeline"
+            disable-pipeline="pipelineConfigurerCtrl.disablePipeline"
+            lock-pipeline="pipelineConfigurerCtrl.lockPipeline"
+            unlock-pipeline="pipelineConfigurerCtrl.unlockPipeline"
+            edit-pipeline-json="pipelineConfigurerCtrl.editPipelineJson"
+            show-history="pipelineConfigurerCtrl.showHistory"
+            export-pipeline-template="pipelineConfigurerCtrl.exportPipelineTemplate"
+          ></Pipeline-Config-Actions>
         </div>
       </div>
     </div>

app/scripts/modules/core/src/pipeline/config/pipelineConfigurer.js

@@ -9,6 +9,7 @@ import { ReactModal } from 'core/presentation';
 const angular = require('angular');
 
 import { OVERRIDE_REGISTRY } from 'core/overrideRegistry/override.registry';
+import { PIPELINE_CONFIG_ACTIONS } from 'core/pipeline/config/actions/pipelineConfigActions.module';
 import { PipelineConfigValidator } from './validation/PipelineConfigValidator';
 import { EXECUTION_BUILD_TITLE } from '../executionBuild/ExecutionBuildTitle';
 import { PipelineConfigService } from 'core/pipeline/config/services/PipelineConfigService';
@@ -26,7 +27,11 @@ import { PipelineTemplateV2Service } from 'core/pipeline';
 import { PipelineTemplateWriter } from 'core/pipeline/config/templates/PipelineTemplateWriter';
 
 module.exports = angular
-  .module('spinnaker.core.pipeline.config.pipelineConfigurer', [OVERRIDE_REGISTRY, EXECUTION_BUILD_TITLE])
+  .module('spinnaker.core.pipeline.config.pipelineConfigurer', [
+    OVERRIDE_REGISTRY,
+    PIPELINE_CONFIG_ACTIONS,
+    EXECUTION_BUILD_TITLE,
+  ])
   .directive('pipelineConfigurer', function() {
     return {
       restrict: 'E',
@@ -58,10 +63,6 @@ module.exports = angular
       $scope.renderablePipeline = $scope.plan || $scope.pipeline;
       // Watch for non-reference changes to renderablePipline and make them reference changes to make React happy
       $scope.$watch('renderablePipeline', (newValue, oldValue) => newValue !== oldValue && this.updatePipeline(), true);
-      this.actionsTemplateUrl = overrideRegistry.getTemplate(
-        'pipelineConfigActions',
-        require('./actions/pipelineConfigActions.html'),
-      );
 
       this.warningsPopover = require('./warnings.popover.html');