feat(cf): Create Service Key pipeline stage (#6821)

spinnaker/spinnaker#4242

Co-Authored-By: Ria Stein <eleftheria.kousathana@gmail.com>

app/scripts/modules/cloudfoundry/src/cf.module.ts

@@ -28,6 +28,7 @@ import 'cloudfoundry/pipeline/config/validation/cfTargetImpedance.validator';
 import 'cloudfoundry/pipeline/config/validation/instanceSize.validator';
 import 'cloudfoundry/pipeline/config/validation/requiredRoutes.validator';
 import { CLOUD_FOUNDRY_CLONE_SERVER_GROUP_STAGE } from './pipeline/stages/cloneServerGroup/cloudfoundryCloneServerGroupStage.module';
+import './pipeline/stages/createServiceKey/cloudfoundryCreateServiceKeyStage.module';
 import './pipeline/stages/deployService/cloudfoundryDeployServiceStage.module';
 import { CLOUD_FOUNDRY_DESTROY_ASG_STAGE } from './pipeline/stages/destroyAsg/cloudfoundryDestroyAsgStage.module';
 import './pipeline/stages/destroyService/cloudfoundryDestroyServiceStage.module';

app/scripts/modules/cloudfoundry/src/pipeline/stages/createServiceKey/CloudfoundryCreateServiceKeyExecutionDetails.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { get } from 'lodash';
+
+import {
+  AccountTag,
+  ExecutionDetailsSection,
+  IExecutionDetailsSectionProps,
+  StageExecutionLogs,
+  StageFailureMessage,
+} from '@spinnaker/core';
+
+export function CloudfoundryCreateServiceKeyExecutionDetails(props: IExecutionDetailsSectionProps) {
+  const { stage } = props;
+  const { context } = stage;
+  const account = get(context, 'service.account', undefined);
+  const region = get(context, 'service.region', undefined);
+  const serviceInstanceName = get(context, 'serviceInstanceName', undefined);
+  const serviceKeyName = get(context, 'serviceKeyName', undefined);
+  return (
+    <ExecutionDetailsSection name={props.name} current={props.current}>
+      <div className="step-section-details">
+        <div className="row">
+          <div className="col-md-12">
+            <dl className="dl-horizontal">
+              <dt>Account</dt>
+              <dd>
+                <AccountTag account={account} />
+              </dd>
+              <dt>Region</dt>
+              <dd>
+                {region}
+                <br />
+              </dd>
+              <dt>Service Instance Name</dt>
+              <dd>
+                {serviceInstanceName}
+                <br />
+              </dd>
+              <dt>Service Key Name</dt>
+              <dd>
+                {serviceKeyName}
+                <br />
+              </dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+      <StageFailureMessage stage={props.stage} message={props.stage.failureMessage} />
+      <StageExecutionLogs stage={props.stage} />
+    </ExecutionDetailsSection>
+  );
+}
+
+// TODO: refactor this to not use namespace
+// eslint-disable-next-line
+export namespace CloudfoundryCreateServiceKeyExecutionDetails {
+  export const title = 'cloudfoundryCreateServiceKeyConfig';
+}

app/scripts/modules/cloudfoundry/src/pipeline/stages/createServiceKey/CloudfoundryCreateServiceKeyStageConfig.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+
+import { Option } from 'react-select';
+
+import {
+  AccountService,
+  IAccount,
+  IRegion,
+  IStageConfigProps,
+  ReactSelectInput,
+  StageConfigField,
+  TextInput,
+} from '@spinnaker/core';
+
+interface ICloudfoundryCreateServiceKeyStageConfigState {
+  accounts: string[];
+  regions: string[];
+}
+
+export class CloudfoundryCreateServiceKeyStageConfig extends React.Component<
+  IStageConfigProps,
+  ICloudfoundryCreateServiceKeyStageConfigState
+> {
+  constructor(props: IStageConfigProps) {
+    super(props);
+    props.stage.cloudProvider = 'cloudfoundry';
+    this.state = {
+      accounts: [],
+      regions: [],
+    };
+  }
+
+  public componentDidMount = () => {
+    AccountService.listAccounts('cloudfoundry').then((rawAccounts: IAccount[]) => {
+      this.setState({ accounts: rawAccounts.map(it => it.name) });
+    });
+    if (this.props.stage.credentials) {
+      this.clearAndReloadRegions();
+    }
+  };
+
+  private clearAndReloadRegions = () => {
+    this.setState({ regions: [] });
+    AccountService.getRegionsForAccount(this.props.stage.credentials).then((regionList: IRegion[]) => {
+      const regions = regionList.map(r => r.name);
+      regions.sort((a, b) => a.localeCompare(b));
+      this.setState({ regions });
+    });
+  };
+
+  private serviceInstanceNameUpdated = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.updateStageField({ serviceInstanceName: event.target.value });
+  };
+
+  private serviceKeyNameUpdated = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.updateStageField({ serviceKeyName: event.target.value });
+  };
+
+  private accountUpdated = (option: Option<string>) => {
+    const credentials = option.target.value;
+    this.setState({
+      regions: [],
+    });
+    this.props.updateStageField({
+      credentials,
+      region: '',
+    });
+    this.clearAndReloadRegions();
+  };
+
+  private regionUpdated = (option: Option<string>) => {
+    const region = option.target.value;
+    this.props.updateStageField({
+      region,
+    });
+  };
+
+  public render() {
+    const { credentials, region, serviceInstanceName, serviceKeyName } = this.props.stage;
+    const { accounts, regions } = this.state;
+
+    return (
+      <div className="form-horizontal">
+        <StageConfigField label="Account">
+          <ReactSelectInput
+            clearable={false}
+            onChange={this.accountUpdated}
+            value={credentials}
+            stringOptions={accounts}
+          />
+        </StageConfigField>
+        <StageConfigField label="Region">
+          <ReactSelectInput clearable={false} onChange={this.regionUpdated} value={region} stringOptions={regions} />
+        </StageConfigField>
+        <StageConfigField label="Service Instance Name">
+          <TextInput
+            type="text"
+            className="form-control"
+            onChange={this.serviceInstanceNameUpdated}
+            value={serviceInstanceName}
+          />
+        </StageConfigField>
+        <StageConfigField label="Service Key Name">
+          <TextInput
+            type="text"
+            className="form-control"
+            onChange={this.serviceKeyNameUpdated}
+            value={serviceKeyName}
+          />
+        </StageConfigField>
+      </div>
+    );
+  }
+}

app/scripts/modules/cloudfoundry/src/pipeline/stages/createServiceKey/cloudfoundryCreateServiceKeyStage.module.ts

@@ -0,0 +1,21 @@
+import { CloudfoundryCreateServiceKeyStageConfig } from './CloudfoundryCreateServiceKeyStageConfig';
+import { ExecutionDetailsTasks, IStage, Registry } from '@spinnaker/core';
+import { CloudfoundryCreateServiceKeyExecutionDetails } from './CloudfoundryCreateServiceKeyExecutionDetails';
+
+Registry.pipeline.registerStage({
+  accountExtractor: (stage: IStage) => stage.context.credentials,
+  configAccountExtractor: (stage: IStage) => [stage.credentials],
+  cloudProvider: 'cloudfoundry',
+  component: CloudfoundryCreateServiceKeyStageConfig,
+  controller: 'BaseProviderStageCtrl as baseProviderStageCtrl',
+  description: 'Create a service key',
+  executionDetailsSections: [CloudfoundryCreateServiceKeyExecutionDetails, ExecutionDetailsTasks],
+  key: 'createServiceKey',
+  label: 'Create Service Key',
+  validators: [
+    { type: 'requiredField', fieldName: 'credentials', fieldLabel: 'account' },
+    { type: 'requiredField', fieldName: 'region', preventSave: true },
+    { type: 'requiredField', fieldName: 'serviceInstanceName', preventSave: true },
+    { type: 'requiredField', fieldName: 'serviceKeyName', preventSave: true },
+  ],
+});