From f535e525d4145a0d7ae744734ee821272af29e8f Mon Sep 17 00:00:00 2001 From: Jammy Louie Date: Fri, 27 Sep 2019 11:30:20 -0400 Subject: [PATCH] refactor(pipeline): reactify pipeline config actions dropdown (#7447) --- .../config/actions/PipelineConfigAction.tsx | 16 +++++ .../config/actions/PipelineConfigActions.tsx | 65 +++++++++++++++++++ .../config/actions/pipelineConfigActions.html | 32 --------- .../actions/pipelineConfigActions.module.ts | 21 ++++++ .../pipeline/config/pipelineConfigurer.html | 15 ++++- .../src/pipeline/config/pipelineConfigurer.js | 11 ++-- 6 files changed, 122 insertions(+), 38 deletions(-) create mode 100644 app/scripts/modules/core/src/pipeline/config/actions/PipelineConfigAction.tsx create mode 100644 app/scripts/modules/core/src/pipeline/config/actions/PipelineConfigActions.tsx delete mode 100644 app/scripts/modules/core/src/pipeline/config/actions/pipelineConfigActions.html create mode 100644 app/scripts/modules/core/src/pipeline/config/actions/pipelineConfigActions.module.ts diff --git a/app/scripts/modules/core/src/pipeline/config/actions/PipelineConfigAction.tsx b/app/scripts/modules/core/src/pipeline/config/actions/PipelineConfigAction.tsx new file mode 100644 index 00000000000..f7f1be47fbc --- /dev/null +++ b/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 ( +
  • + + {props.name} + +
    • + ); +} diff --git a/app/scripts/modules/core/src/pipeline/config/actions/PipelineConfigActions.tsx b/app/scripts/modules/core/src/pipeline/config/actions/PipelineConfigActions.tsx new file mode 100644 index 00000000000..f6e7b5d8b60 --- /dev/null +++ b/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 ( + + + {pipeline.strategy === true ? 'Strategy' : 'Pipeline'} Actions + + + {!pipeline.locked && } + {!pipeline.locked && } + {!pipeline.locked && pipeline.disabled && } + {!pipeline.locked && !pipeline.disabled && } + {!pipeline.locked && } + {pipeline.locked && pipeline.locked.allowUnlockUi && ( + + )} + {pipeline.locked && } + {!pipeline.locked && } + {loadingHistory && } + {!loadingHistory && hasHistory && } + {!loadingHistory && !hasHistory && } + {managedPipelineTemplatesV2UI && ( + + )} + + + ); +} diff --git a/app/scripts/modules/core/src/pipeline/config/actions/pipelineConfigActions.html b/app/scripts/modules/core/src/pipeline/config/actions/pipelineConfigActions.html deleted file mode 100644 index fe2f3f79bbc..00000000000 --- a/app/scripts/modules/core/src/pipeline/config/actions/pipelineConfigActions.html +++ /dev/null @@ -1,32 +0,0 @@ -
    - - -
    diff --git a/app/scripts/modules/core/src/pipeline/config/actions/pipelineConfigActions.module.ts b/app/scripts/modules/core/src/pipeline/config/actions/pipelineConfigActions.module.ts new file mode 100644 index 00000000000..8ddca0bfc69 --- /dev/null +++ b/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', + ]), +); diff --git a/app/scripts/modules/core/src/pipeline/config/pipelineConfigurer.html b/app/scripts/modules/core/src/pipeline/config/pipelineConfigurer.html index 21c6f8ffc56..954265dc228 100644 --- a/app/scripts/modules/core/src/pipeline/config/pipelineConfigurer.html +++ b/app/scripts/modules/core/src/pipeline/config/pipelineConfigurer.html @@ -34,7 +34,20 @@

    -
    +
    diff --git a/app/scripts/modules/core/src/pipeline/config/pipelineConfigurer.js b/app/scripts/modules/core/src/pipeline/config/pipelineConfigurer.js index d9c67306e71..9fcecd79cec 100644 --- a/app/scripts/modules/core/src/pipeline/config/pipelineConfigurer.js +++ b/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');