configureNewServiceView.jade

header.grid-block.vertical.align-center.modal-header(
  ng-if = "$root.featureFlags.composeEditing"
  ng-init = "state.selectedTab = 'compose'"
)
  .container-title-wrapper
    .server-status-card-pop-over.no-touching
      .container-title {{NCC.state.instanceName}}
  svg.iconnables.icons-close(
    ng-click = "NCC.close()"
  )
    use(
      xlink:href = "#icons-close"
    )

  .row.modal-tabs.tabs-all.grid-block.clearfix(
    ng-init = "tabs = [\
      {name: 'compose', iconName: 'icons-compose', label: 'Compose Files'},\
      {name: 'env', iconName: 'icons-environment-variable', label: 'Environment Variables'}\
    ];"
  )
    button.btn.btn-radio.grid-block.vertical(
      ng-class = "{'active': state.selectedTab === '{{tab.name}}'}"
      ng-click = "state.selectedTab = tab.name"
      ng-repeat = "tab in tabs"
    )
      svg.iconnables.grid-content
        use(
          ng-attr-xlink:href = "{{'#' + $sce.trustAs($sce.HTML, tab.iconName)}}"
          xlink:href = ""
        )
      .btn-text.grid-content {{tab.label}}

section.grid-block.vertical.modal-body(
  ng-init = "state.selectedTab = 'compose'"
)

  svg.iconnables.icons-close(
    ng-click = "NCC.close()"
    ng-if = "!$root.featureFlags.composeEditing"
  )
    use(
      xlink:href = "#icons-close"
    )

  .grid-block.vertical.modal-form.no-border(
    ng-if = "state.selectedTab === 'compose'"
  )
    .label-tabs.grid-block(
      ng-if = "!$root.featureFlags.composeEditing"
      ng-include = "'setupMethodView'"
    )

    //- form for naming the environment
    form.grid-block.vertical.label.label-name(
      name = "NCC.nameForm"
      ng-include = "'nameNewServiceView'"
    )

    //- default branch selector
    label.grid-block.vertical.label(
      ng-if = "NCC.state.dockerFileTab === 'compose' && $root.featureFlags.composeDefaultBranch"
      ng-include = "'defaultBranchView'"
    )

    .grid-block.vertical.views-kubernetes-setup(
      ng-if = "NCC.state.dockerFileTab === 'kubernetes'"
      ng-include = "'kubernetesSetupView'"
      ng-init = "ymlFiles = [\
        {path: 'k8/deployments/api.yml'},\
        {path: 'k8/deployments/mongo.yml'},\
        {path: 'k8/deployments/web.yml'},\
        {path: 'k8/deployments/web-e2e.yml'},\
        {path: 'k8/services/api.yml'},\
        {path: 'k8/services/mongo.yml'},\
        {path: 'k8/services/web.yml'}\
      ]"
    )

    //- form for dockerfile setup
    .grid-block.vertical.label.views-dockerfile-setup(
      branch-name = "NCC.state.branch.attrs.name"
      mirror-dockerfile
      name = "'newContainer'"
      ng-if = "NCC.state.dockerFileTab !== 'kubernetes'"
      repo = "NCC.state.repo"
      state = "NCC.state"
    )

  .modal-form(
    ng-form = "envVarForm"
    ng-include = "'viewFormEnvironmentVariables'"
    ng-if = "state.selectedTab === 'env'"
  )

footer.modal-footer.clearfix
  button.btn.btn-md.gray.btn-cancel.float-left(
    ng-click = "NCC.close()"
  ) Cancel
  button.btn.btn-md.green.float-right(
    data-event-name = "Clicked to Add Service"
    ng-click = "NCC.saveDockerfileMirroring()"
    ng-disabled = "!NCC.canCreateBuild()"
  )
    .spinner-wrapper.spinner-white.spinner-sm.float-left(
      ng-if = "$root.isLoading.newContainerSingleRepo || $root.isLoading.creatingDockerCompose"
      ng-include = "'spinner'"
    )
    span(
      ng-if = "$root.featureFlags.composeNewService && NCC.state.repo"
    ) {{$root.featureFlags.composeEditing ? 'Save Changes' : NCC.getNextStepText()}}
    span(
      ng-if = "NCC.state.templateSource"
    ) Add Service