@spinnaker/cloudrun 0.0.0-main-2

package/src/pipeline/stages/editLoadBalancer/loadBalancerChoice.modal.html

@@ -0,0 +1,53 @@
+<div modal-page>
+  <modal-close dismiss="$dismiss()"></modal-close>
+  <div class="modal-header">
+    <h4 class="modal-title">Select Load Balancer</h4>
+  </div>
+  <div class="modal-body" ng-if="ctrl.state.loading" style="height: 200px" class="horizontal center middle">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
+  <div class="modal-body" ng-if="!ctrl.state.loading">
+    <div class="alert alert-warning" ng-if="ctrl.loadBalancers.length === 0">
+      <p>
+        Spinnaker cannot create a load balancer for Cloud Run. A Spinnaker load balancer maps to a Cloud Run service
+        which along with a Revision are created from Create Server Group page using a
+      </p>
+      <p><code>yaml file</code> <help-field key="cloudrun.serverGroup.file"></help-field></p>
+      <p>
+        If a service does not exist when a Revision is deployed, it will be created. It will then be editable as a load
+        balancer within Spinnaker.
+      </p>
+    </div>
+    <form
+      role="form"
+      name="form"
+      class="form-horizontal"
+      ng-submit="ctrl.submit()"
+      ng-if="ctrl.loadBalancers.length > 0"
+    >
+      <div class="form-group">
+        <div class="col-md-3 sm-label-right">
+          <b>Load Balancer</b>
+        </div>
+        <div class="col-md-7">
+          <ui-select class="form-control input-sm" ng-model="ctrl.selectedLoadBalancer">
+            <ui-select-match>
+              <account-tag account="$select.selected.account"></account-tag>
+              <span style="margin-left: 5px">{{$select.selected.name}}</span>
+            </ui-select-match>
+            <ui-select-choices repeat="loadBalancer in ctrl.loadBalancers | filter: $select.search">
+              <account-tag account="loadBalancer.account"></account-tag>
+              <span style="margin-left: 5px" ng-bind-html="loadBalancer.name"></span>
+            </ui-select-choices>
+          </ui-select>
+        </div>
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <button class="btn btn-primary" ng-if="ctrl.loadBalancers.length > 0" ng-click="ctrl.submit()">
+      <span class="far fa-check-circle"></span> Edit
+    </button>
+  </div>
+</div>

package/src/rolloutStrategy/redblack.strategy.ts

@@ -0,0 +1,7 @@
+import type { IDeploymentStrategy } from '@spinnaker/core';
+
+export const strategyRedBlack: IDeploymentStrategy = {
+  label: 'Red/Black',
+  description: 'Disables <i>all</i> previous ReplicaSets in the cluster as soon as the new ReplicaSet is ready',
+  key: 'redblack',
+};

package/src/serverGroup/configure/serverGroupCommandBuilder.service.ts

@@ -0,0 +1,254 @@
+import { module } from 'angular';
+import { cloneDeep } from 'lodash';
+import { $q } from 'ngimport';
+
+import type {
+  Application,
+  IAccountDetails,
+  IExpectedArtifact,
+  IMoniker,
+  IPipeline,
+  IServerGroupCommand,
+  IServerGroupCommandViewState,
+  IStage,
+} from '@spinnaker/core';
+import { AccountService } from '@spinnaker/core';
+
+import { CloudrunProviderSettings } from '../../cloudrun.settings';
+import type { CloudrunDeployDescription } from '../serverGroupTransformer.service';
+
+export enum ServerGroupSource {
+  TEXT = 'text',
+  ARTIFACT = 'artifact',
+}
+
+export interface ICloudrunServerGroupCommandData {
+  command: ICloudrunServerGroupCommand;
+  metadata: ICloudrunServerGroupCommandMetadata;
+  stack: string;
+  freeFormDetails: string;
+  configFiles: string[];
+}
+
+export interface ICloudrunServerGroupCommand extends Omit<IServerGroupCommand, 'source' | 'application'> {
+  application?: string;
+  stack?: string;
+  detail?: string;
+  account: string;
+  configFiles: string[];
+  freeFormDetails: string;
+  region: string;
+  regions: [];
+  isNew?: boolean;
+  cloudProvider: string;
+  provider: string;
+  selectedProvider: string;
+  manifest: any; // deprecated
+  manifests: any[];
+  relationships: ICloudrunServerGroupSpinnakerRelationships;
+  moniker: IMoniker;
+  manifestArtifactId?: string;
+  manifestArtifactAccount?: string;
+  source: ServerGroupSource;
+  versioned?: boolean;
+  gitCredentialType?: string;
+  viewState: IServerGroupCommandViewState;
+  mode: string;
+  credentials: string;
+  sourceType: string;
+  configArtifacts: any[];
+  interestingHealthProviderNames: [];
+  fromArtifact: boolean;
+}
+
+export interface IViewState {
+  mode: string;
+  submitButtonLabel: string;
+  disableStrategySelection: boolean;
+  stage?: IStage;
+  pipeline?: IPipeline;
+}
+
+export interface ICloudrunServerGroupCommandMetadata {
+  backingData: any;
+}
+
+export interface ICloudrunServerGroupSpinnakerRelationships {
+  loadBalancers?: string[];
+  securityGroups?: string[];
+}
+
+const getSubmitButtonLabel = (mode: string): string => {
+  switch (mode) {
+    case 'createPipeline':
+      return 'Add';
+    case 'editPipeline':
+      return 'Done';
+    default:
+      return 'Create';
+  }
+};
+
+export class CloudrunV2ServerGroupCommandBuilder {
+  // new add servergroup
+  public buildNewServerGroupCommand(app: Application): PromiseLike<ICloudrunServerGroupCommandData> {
+    return CloudrunServerGroupCommandBuilder.buildNewServerGroupCommand(app, 'cloudrun', 'create');
+  }
+
+  // add servergroup from deploy stage of pipeline
+  public buildNewServerGroupCommandForPipeline(_stage: IStage, pipeline: IPipeline) {
+    return CloudrunServerGroupCommandBuilder.buildNewServerGroupCommandForPipeline(_stage, pipeline);
+  }
+
+  // edit servergroup from deploy stage of pipeline
+  // add servergroup from deploy stage of pipeline
+  public buildServerGroupCommandFromPipeline(
+    app: Application,
+    cluster: CloudrunDeployDescription,
+    _stage: IStage,
+    pipeline: IPipeline,
+  ) {
+    return CloudrunServerGroupCommandBuilder.buildServerGroupCommandFromPipeline(app, cluster, _stage, pipeline);
+  }
+}
+
+export class CloudrunServerGroupCommandBuilder {
+  public static $inject = ['$q'];
+  public static ServerGroupCommandIsValid(command: ICloudrunServerGroupCommand): boolean {
+    if (!command.moniker) {
+      return false;
+    }
+
+    if (!command.moniker.app) {
+      return false;
+    }
+
+    return true;
+  }
+
+  public static copyAndCleanCommand(input: ICloudrunServerGroupCommand): ICloudrunServerGroupCommand {
+    const command = cloneDeep(input);
+    return command;
+  }
+
+  // deploy stage : construct servergroup command
+  public static buildNewServerGroupCommandForPipeline(stage: IStage, pipeline: IPipeline): any {
+    const command: any = this.buildNewServerGroupCommand(
+      { name: pipeline.application } as Application,
+      'cloudrun',
+      'createPipeline',
+    );
+    command.viewState = {
+      ...command.viewState,
+      pipeline,
+      requiresTemplateSelection: true,
+      stage,
+    };
+    return command;
+  }
+
+  private static getExpectedArtifacts(pipeline: IPipeline): IExpectedArtifact[] {
+    return pipeline.expectedArtifacts || [];
+  }
+
+  public static buildServerGroupCommandFromPipeline(
+    app: Application,
+    cluster: CloudrunDeployDescription,
+    _stage: IStage,
+    pipeline: IPipeline,
+  ): PromiseLike<ICloudrunServerGroupCommandData> {
+    return CloudrunServerGroupCommandBuilder.buildNewServerGroupCommand(app, 'cloudrun', 'editPipeline').then(
+      (command: ICloudrunServerGroupCommandData) => {
+        command = {
+          ...command,
+          ...cluster,
+
+          backingData: {
+            ...command.metadata.backingData.backingData,
+
+            expectedArtifacts: CloudrunServerGroupCommandBuilder.getExpectedArtifacts(pipeline),
+          },
+          credentials: cluster.account || command.metadata.backingData.credentials,
+          viewState: {
+            ...command.metadata.backingData.viewState,
+            stage: _stage,
+            pipeline,
+          },
+        } as ICloudrunServerGroupCommandData;
+        return command;
+      },
+    );
+  }
+
+  public static getCredentials(accounts: IAccountDetails[]): string {
+    const accountNames: string[] = (accounts || []).map((account) => account.name);
+    const defaultCredentials: string = CloudrunProviderSettings.defaults.account;
+
+    return accountNames.includes(defaultCredentials) ? defaultCredentials : accountNames[0];
+  }
+
+  public static getRegion(accounts: any[], credentials: string): string {
+    const account = accounts.find((_account) => _account.name === credentials);
+    return account ? account.region : null;
+  }
+
+  // new servergroup command
+  public static buildNewServerGroupCommand(
+    app: Application,
+    sourceAccount: string,
+    mode: string,
+  ): PromiseLike<ICloudrunServerGroupCommandData> {
+    const dataToFetch = {
+      accounts: AccountService.getAllAccountDetailsForProvider('cloudrun'),
+      artifactAccounts: AccountService.getArtifactAccounts(),
+    };
+
+    return $q.all(dataToFetch).then((backingData: { accounts: IAccountDetails[] }) => {
+      const { accounts } = backingData;
+
+      const account = accounts.some((a) => a.name === sourceAccount)
+        ? accounts.find((a) => a.name === sourceAccount).name
+        : accounts.length
+        ? accounts[0].name
+        : null;
+      const viewState: IViewState = {
+        mode,
+        submitButtonLabel: getSubmitButtonLabel(mode),
+        disableStrategySelection: mode === 'create',
+      };
+      const credentials = account ? account : this.getCredentials(accounts);
+      const region = this.getRegion(backingData.accounts, credentials);
+      const cloudProvider = 'cloudrun';
+
+      return {
+        command: {
+          application: app.name,
+          configFiles: [''],
+          cloudProvider,
+          selectedProvider: cloudProvider,
+          provider: cloudProvider,
+          region,
+          credentials,
+          gitCredentialType: 'NONE',
+          manifest: null,
+          sourceType: 'git',
+          configArtifacts: [],
+          interestingHealthProviderNames: [],
+          fromArtifact: false,
+          account,
+          viewState,
+        },
+        metadata: {
+          backingData,
+        },
+      } as ICloudrunServerGroupCommandData;
+    });
+  }
+}
+
+export const CLOUDRUN_SERVER_GROUP_COMMAND_BUILDER = 'spinnaker.cloudrun.serverGroup.commandBuilder.service';
+
+module(CLOUDRUN_SERVER_GROUP_COMMAND_BUILDER, []).service(
+  'cloudrunV2ServerGroupCommandBuilder',
+  CloudrunV2ServerGroupCommandBuilder,
+);

package/src/serverGroup/configure/wizard/BasicSettings.tsx

@@ -0,0 +1,160 @@
+import type { FormikProps } from 'formik';
+import React from 'react';
+
+import type { Application, IAccount, IServerGroup } from '@spinnaker/core';
+import { AccountSelectInput, HelpField, NameUtils, ReactInjector, ServerGroupNamePreview } from '@spinnaker/core';
+
+import type { ICloudrunServerGroupCommandData } from '../serverGroupCommandBuilder.service';
+
+export interface IServerGroupBasicSettingsProps {
+  accounts: IAccount[];
+  onAccountSelect: (account: string) => void;
+  selectedAccount: string;
+  formik: IWizardServerGroupBasicSettingsProps['formik'];
+  onEnterStack: (stack: string) => void;
+  detailsChanged: (detail: string) => void;
+  app: Application;
+}
+
+export interface IServerGroupBasicSettingsState {
+  namePreview: string;
+  createsNewCluster: boolean;
+  latestServerGroup: IServerGroup;
+}
+
+export function ServerGroupBasicSettings({
+  accounts,
+  onAccountSelect,
+  selectedAccount,
+  formik,
+  onEnterStack,
+  detailsChanged,
+  app,
+}: IServerGroupBasicSettingsProps) {
+  const { values } = formik;
+  const { stack = '', freeFormDetails } = values;
+
+  const namePreview = NameUtils.getClusterName(app.name, stack, freeFormDetails);
+  const createsNewCluster = !app.clusters.find((c) => c.name === namePreview);
+  const inCluster = (app.serverGroups.data as IServerGroup[])
+    .filter((serverGroup) => {
+      return (
+        serverGroup.cluster === namePreview &&
+        serverGroup.account === values.command.credentials &&
+        serverGroup.region === values.command.region
+      );
+    })
+    .sort((a, b) => a.createdTime - b.createdTime);
+  const latestServerGroup = inCluster.length ? inCluster.pop() : null;
+
+  const navigateToLatestServerGroup = () => {
+    const { values } = formik;
+    const params = {
+      provider: values.command.selectedProvider,
+      accountId: latestServerGroup.account,
+      region: latestServerGroup.region,
+      serverGroup: latestServerGroup.name,
+    };
+
+    const { $state } = ReactInjector;
+    if ($state.is('home.applications.application.insight.clusters')) {
+      $state.go('.serverGroup', params);
+    } else {
+      $state.go('^.serverGroup', params);
+    }
+  };
+
+  return (
+    <div className="form-horizontal">
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">Account</div>
+        <div className="col-md-7">
+          <AccountSelectInput
+            value={selectedAccount}
+            onChange={(evt: any) => onAccountSelect(evt.target.value)}
+            readOnly={false}
+            accounts={accounts}
+            provider="cloudrun"
+          />
+        </div>
+      </div>
+
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">
+          Stack <HelpField id="cloudrun.serverGroup.stack" />
+        </div>
+        <div className="col-md-7">
+          <input
+            type="text"
+            className="form-control input-sm no-spel"
+            value={stack}
+            onChange={(e) => onEnterStack(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">
+          Detail <HelpField id="cloudrun.serverGroup.detail" />
+        </div>
+        <div className="col-md-7">
+          <input
+            type="text"
+            className="form-control input-sm no-spel"
+            value={freeFormDetails}
+            onChange={(e) => detailsChanged(e.target.value)}
+          />
+        </div>
+      </div>
+      {!values.command.viewState.hideClusterNamePreview && (
+        <ServerGroupNamePreview
+          createsNewCluster={createsNewCluster}
+          latestServerGroupName={latestServerGroup?.name}
+          mode={values.command.viewState.mode}
+          namePreview={namePreview}
+          navigateToLatestServerGroup={navigateToLatestServerGroup}
+        />
+      )}
+    </div>
+  );
+}
+
+export interface IWizardServerGroupBasicSettingsProps {
+  formik: FormikProps<ICloudrunServerGroupCommandData>;
+  app: Application;
+}
+
+export class WizardServerGroupBasicSettings extends React.Component<IWizardServerGroupBasicSettingsProps> {
+  private accountUpdated = (account: string): void => {
+    const { formik } = this.props;
+    formik.values.command.account = account;
+    formik.setFieldValue('account', account);
+  };
+
+  private stackChanged = (stack: string): void => {
+    const { setFieldValue, values } = this.props.formik;
+    values.command.stack = stack;
+    setFieldValue('stack', stack);
+  };
+
+  private freeFormDetailsChanged = (freeFormDetails: string) => {
+    const { setFieldValue, values } = this.props.formik;
+    values.command.freeFormDetails = freeFormDetails;
+    setFieldValue('freeFormDetails', freeFormDetails);
+  };
+
+  public render() {
+    const { formik, app } = this.props;
+    return (
+      <ServerGroupBasicSettings
+        accounts={formik.values.metadata?.backingData?.accounts || []}
+        onAccountSelect={this.accountUpdated}
+        selectedAccount={formik.values.command?.account || ''}
+        onEnterStack={this.stackChanged}
+        formik={formik}
+        detailsChanged={this.freeFormDetailsChanged}
+        app={app}
+      />
+    );
+  }
+}

package/src/serverGroup/configure/wizard/ConfigFiles.tsx

@@ -0,0 +1,75 @@
+import type { FormikProps } from 'formik';
+import React, { useState } from 'react';
+
+import { HelpField, TextAreaInput } from '@spinnaker/core';
+import type { ICloudrunServerGroupCommandData } from '../serverGroupCommandBuilder.service';
+
+export interface IServerGroupConfigFilesSettingsProps {
+  configFiles: string[];
+  onEnterConfig: (file: string[]) => void;
+}
+type configFiles = IServerGroupConfigFilesSettingsProps['configFiles'];
+
+export function ServerGroupConfigFilesSettings({ configFiles, onEnterConfig }: IServerGroupConfigFilesSettingsProps) {
+  const [configValues, setConfigValues] = useState<configFiles>(configFiles);
+
+  function mapTabToSpaces(event: any, i: number) {
+    if (event.which === 9) {
+      event.preventDefault();
+      const cursorPosition = event.target.selectionStart;
+      const inputValue = event.target.value;
+      event.target.value = `${inputValue.substring(0, cursorPosition)}  ${inputValue.substring(cursorPosition)}`;
+      event.target.selectionStart += 2;
+    }
+    const newConfigValues = [...configValues];
+    newConfigValues[i] = event.target.value;
+    setConfigValues(newConfigValues);
+    onEnterConfig(newConfigValues);
+  }
+
+  return (
+    <div className="form-horizontal">
+      <div className="form-group">
+        {configValues.map((configFile, index) => (
+          <>
+            <div className="col-md-3 sm-label-right">
+              Service Yaml
+              <HelpField id="cloudrun.serverGroup.configFiles" />{' '}
+            </div>
+            <div className="col-md-8" key={index}>
+              <TextAreaInput
+                name={'text' + index}
+                value={configFile}
+                rows={10}
+                onChange={(e) => mapTabToSpaces(e, index)}
+              />
+            </div>
+          </>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export interface IWizardServerGroupConfigFilesSettingsProps {
+  formik: FormikProps<ICloudrunServerGroupCommandData>;
+}
+
+export class WizardServerGroupConfigFilesSettings extends React.Component<IWizardServerGroupConfigFilesSettingsProps> {
+  private configUpdated = (configFiles: string[]): void => {
+    const { formik } = this.props;
+    formik.values.command.configFiles = configFiles;
+    formik.setFieldValue('configFiles', configFiles);
+  };
+
+  // yaml config files input from server group wizard
+  public render() {
+    const { formik } = this.props;
+    return (
+      <ServerGroupConfigFilesSettings
+        configFiles={formik.values.configFiles || formik.values.command.configFiles}
+        onEnterConfig={this.configUpdated}
+      />
+    );
+  }
+}

package/src/serverGroup/configure/wizard/serverGroupWizard.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import type { Application, IModalComponentProps, IStage } from '@spinnaker/core';
+//import type { IModalInstanceService } from 'angular-ui-bootstrap';
+import { noop, ReactInjector, ReactModal, TaskMonitor, WizardModal, WizardPage } from '@spinnaker/core';
+import { WizardServerGroupBasicSettings } from './BasicSettings';
+import { WizardServerGroupConfigFilesSettings } from './ConfigFiles';
+import type { ICloudrunServerGroupCommandData } from '../serverGroupCommandBuilder.service';
+import { CloudrunServerGroupCommandBuilder } from '../serverGroupCommandBuilder.service';
+
+export interface ICloudrunServerGroupModalProps extends IModalComponentProps {
+  title: string;
+  application: Application;
+  command: ICloudrunServerGroupCommandData;
+  isNew?: boolean;
+}
+
+export interface ICloudrunServerGroupModalState {
+  command: ICloudrunServerGroupCommandData;
+  loaded: boolean;
+  taskMonitor: TaskMonitor;
+}
+
+export class ServerGroupWizard extends React.Component<ICloudrunServerGroupModalProps, ICloudrunServerGroupModalState> {
+  public static defaultProps: Partial<ICloudrunServerGroupModalProps> = {
+    closeModal: noop,
+    dismissModal: noop,
+  };
+
+  private _isUnmounted = false;
+
+  /*     private serverGroupWriter: ServerGroupWriter; */
+  public static show(props: ICloudrunServerGroupModalProps): Promise<ICloudrunServerGroupCommandData> {
+    const modalProps = { dialogClassName: 'wizard-modal modal-lg' };
+    return ReactModal.show(ServerGroupWizard, props, modalProps);
+  }
+
+  constructor(props: ICloudrunServerGroupModalProps) {
+    super(props);
+    if (!props.command) {
+      CloudrunServerGroupCommandBuilder.buildNewServerGroupCommand(props.application, 'cloudrun', 'create').then(
+        (command) => {
+          Object.assign(this.state.command, command);
+          this.setState({ loaded: true });
+        },
+      );
+    }
+
+    this.state = {
+      loaded: !!props.command,
+      command: props.command || ({} as ICloudrunServerGroupCommandData),
+      taskMonitor: new TaskMonitor({
+        application: props.application,
+        title: `${
+          props.command.command.viewState.submitButtonLabel === 'Create' ? 'Creating' : 'Updating'
+        } your Server Group`,
+        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onTaskComplete: this.onTaskComplete,
+      }),
+    };
+  }
+
+  private onTaskComplete = () => {
+    this.props.application.serverGroups.refresh();
+    this.props.application.serverGroups.onNextRefresh(null, this.onApplicationRefresh);
+  };
+
+  protected onApplicationRefresh = (): void => {
+    if (this._isUnmounted) {
+      return;
+    }
+
+    const { command } = this.props;
+    const { taskMonitor } = this.state;
+    const cloneStage = taskMonitor.task.execution.stages.find((stage: IStage) => stage.type === 'cloneServerGroup');
+    if (cloneStage && cloneStage.context['deploy.server.groups']) {
+      const newServerGroupName = cloneStage.context['deploy.server.groups'][command.command.region];
+      if (newServerGroupName) {
+        const newStateParams = {
+          serverGroup: newServerGroupName,
+          accountId: command.command.credentials,
+          region: command.command.region,
+          provider: 'cloudrun',
+        };
+        let transitionTo = '^.^.^.clusters.serverGroup';
+        if (ReactInjector.$state.includes('**.clusters.serverGroup')) {
+          // clone via details, all view
+          transitionTo = '^.serverGroup';
+        }
+        if (ReactInjector.$state.includes('**.clusters.cluster.serverGroup')) {
+          // clone or create with details open
+          transitionTo = '^.^.serverGroup';
+        }
+        if (ReactInjector.$state.includes('**.clusters')) {
+          // create new, no details open
+          transitionTo = '.serverGroup';
+        }
+        ReactInjector.$state.go(transitionTo, newStateParams);
+      }
+    }
+  };
+
+  private submit = (c: ICloudrunServerGroupCommandData): void => {
+    const command: any = CloudrunServerGroupCommandBuilder.copyAndCleanCommand(c.command);
+    const forPipelineConfig = command.viewState.mode === 'editPipeline' || command.viewState.mode === 'createPipeline';
+    if (forPipelineConfig) {
+      this.props.closeModal && this.props.closeModal(command);
+    } else {
+      //command.viewState.mode = 'create';
+      const submitMethod = () => ReactInjector.serverGroupWriter.cloneServerGroup(command, this.props.application);
+      this.state.taskMonitor.submit(submitMethod);
+      return null;
+    }
+  };
+  public render() {
+    const { dismissModal, application } = this.props;
+    const { loaded, taskMonitor, command } = this.state;
+    const labelButton = this.state.command.command.viewState.submitButtonLabel;
+
+    return (
+      <WizardModal<ICloudrunServerGroupCommandData>
+        heading={`${labelButton === 'Add' || labelButton === 'Create' ? 'Create New' : 'Update'} Server Group`}
+        initialValues={command}
+        loading={!loaded}
+        taskMonitor={taskMonitor}
+        dismissModal={dismissModal}
+        closeModal={this.submit}
+        submitButtonLabel={labelButton}
+        render={({ formik, nextIdx, wizard }) => (
+          <>
+            <WizardPage
+              label="Basic Settings"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => (
+                <WizardServerGroupBasicSettings ref={innerRef} formik={formik} app={application} />
+              )}
+            />
+
+            <WizardPage
+              label="Service Yaml"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <WizardServerGroupConfigFilesSettings ref={innerRef} formik={formik} />}
+            />
+          </>
+        )}
+      />
+    );
+  }
+}