Merge branch 'master' into SAN-6097

* master: (56 commits)
  5.19.17
  add events for all settings tabs
  add events for all settings buttons
  fix button width in safari
  fix PR bot button alignment
  add event for private registry "back" button
  add events for accounts popover buttons
  add events for settings modal tabs
  update adding private registry event
  add ssh key events
  add private registry events
  add documentation link
  add orgs to key names
  update authed modal
  fix creating state
  fix indentation
  remove negative margins + fix recently added state
  remove loading state
  fix border color on recently added state
  title case
  ...

# Conflicts:
#	client/directives/components/mirrorDockerfile/addDockerfileView.jade
#	client/directives/components/newContainer/forms/configureNewServiceView.jade

Also had to manually edit setupMethodView.jade since it was where the conflict for configureNewServiceView.jade had been moved too.

Author: damienrunnable

client/assets/styles/scss/index.scss

@@ -152,6 +152,7 @@
 @import "modals/modals-repository-details";
 @import "modals/modals-server-select";
 @import "modals/modals-settings";
+@import "modals/modals-ssh-auth";
 
 // popovers
 @import "popover/popover";

client/assets/styles/scss/modals/modals-empty.scss

@@ -64,7 +64,6 @@
 
   // submit buttons (like for api token)
   .green {
-    display: table;
     margin-left: auto;
     margin-right: auto;
   }

client/assets/styles/scss/modals/modals-settings.scss

@@ -138,3 +138,100 @@
     }
   }
 }
+
+.form-ssh {
+
+  .list-item {
+    font-size: 13px;
+    min-height: 90px;
+    padding: $sm;
+
+    @include media(xxs) {
+      align-items: flex-start;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    &.recently-added {
+      background-color: $blue-lighter;
+      border-color: transparent;
+      box-shadow: inset 0 0 0 $input-border-lg $blue-light;
+      margin: -$input-border;
+      min-height: 90px + $input-border * 2;
+      padding: $sm + $input-border;
+      z-index: 1;
+
+      @include media(xxs) {
+        .icons-key {
+          bottom: $sm + $input-border;
+          right: $sm + $input-border;
+        }
+      }
+    }
+
+    > .icons-key,
+    > .spinner-wrapper {
+      height: 24px;
+      padding: 3px;
+      width: 24px;
+
+      @include media(xxs) {
+        bottom: $sm;
+        position: absolute;
+        right: $sm;
+      }
+    }
+  }
+
+  .p {
+    padding: 0 $sm;
+
+    @include media(xxs) {
+      max-width: 100%;
+      padding: 0;
+    }
+  }
+
+  .btn-xs:not(.btn-create-key) {
+    flex: 0 0 114px;
+
+    @include media(xxs) {
+      flex: 0 0 auto;
+      margin-top: 9px;
+    }
+  }
+
+  // a.btn.gray
+  .gray {
+    color: $gray-dark;
+
+    .spinner-wrapper {
+      height: 12px;
+      margin-right: 3px;
+      width: 12px;
+    }
+  }
+
+  .btn-authorized {
+    background-color: transparent;
+    border-color: transparent;
+    color: $gray;
+    pointer-events: none;
+
+    @include media(xxs) {
+      padding: 0;
+    }
+  }
+
+  .icons-check,
+  .icons-octicons-github {
+    flex: 0 0 18px;
+    margin-right: 2px;
+  }
+
+  .icons-link-external-alt {
+    height: 9px;
+    margin-left: 4px;
+    width: 9px;
+  }
+}

client/assets/styles/scss/modals/modals-ssh-auth.scss

@@ -0,0 +1,17 @@
+.modal-ssh-auth {
+
+  .padding-md {
+    @include media(xxs) {
+      padding: $sm;
+    }
+  }
+
+  .runnabear {
+    left: 0;
+    margin: 0 auto;
+    position: absolute;
+    right: 0;
+    top: -119px;
+    z-index: 1;
+  }
+}

client/directives/accountsSelect/popoverAccountMenu/viewPopoverAccountMenu.jade

@@ -23,8 +23,9 @@
           )
             li.list-item.popover-list-item.small.disabled {{data.currentOrg.github.oauthName()}} Settings
             li.list-item.popover-list-item(
-              ng-if = "data.currentOrg.isBillingVisible()"
+              data-event-name = "Clicked to Open Billing Settings"
               ng-click = "actions.openSettingsModal('billing')"
+              ng-if = "data.currentOrg.isBillingVisible()"
             )
               svg.iconnables
                 use(
@@ -37,6 +38,7 @@
               )
                 | {{data.currentOrg.poppa.trialDaysRemaining() + ' days left'}}
             li.list-item.popover-list-item(
+              data-event-name = "Clicked to Open PR Bot Settings"
               ng-click = "actions.openSettingsModal('githubIntegration')"
             )
               svg.iconnables
@@ -45,6 +47,7 @@
                 )
               | PR Bot
             li.list-item.popover-list-item(
+              data-event-name = "Clicked to Open Private Registry Settings"
               ng-click = "actions.openSettingsModal('privateRegistry')"
               ng-if = "$root.featureFlags.privateRegistry"
             )
@@ -54,6 +57,7 @@
                 )
               | Private Registry
             li.list-item.popover-list-item(
+              data-event-name = "Clicked to Open Slack Integration Settings"
               ng-click = "actions.openSettingsModal('slackIntegration')"
             )
               img.iconnables(
@@ -63,6 +67,17 @@
               )
               | Slack Integration
             li.list-item.popover-list-item(
+              data-event-name = "Clicked to Open SSH Keys Settings"
+              ng-click = "actions.openSettingsModal('SSHKeys')"
+              ng-if = "$root.featureFlags.composeSSHKeys"
+            )
+              svg.iconnables
+                use(
+                  xlink:href = "#icons-key"
+                )
+              | SSH Keys
+            li.list-item.popover-list-item(
+              data-event-name = "Clicked to Open Teammates Settings"
               ng-click = "actions.openSettingsModal('teamManagement')"
             )
               svg.iconnables
@@ -162,3 +177,8 @@
               ng-if = "flag === 'gitHubScope'"
               style = "position: absolute; right: 9px; top: 6px;"
             ) Go
+            button.btn.btn-xs.gray(
+              internal-modal-helper = "composeSSHAuthView"
+              ng-if = "flag === 'composeSSHAuthView'"
+              style = "position: absolute; right: 9px; top: 6px;"
+            ) Go

client/directives/components/mirrorDockerfile/addDockerfileView.jade

@@ -15,7 +15,7 @@ form(
         dockerfile-exists-validator = "{{fileType}}"
         full-repo = "fullRepo"
         id = "add-dockerfile-input"
-        ng-disabled = "state.dockerFileAdded || MDC.isSaving()"
+        ng-disabled = "state.dockerFileAdded || $root.featureFlags.composeEditing || MDC.isSaving()"
         ng-model = "newDockerfile"
         ng-model-options = "{ debounce: { 'default': 100, 'blur': 0 } }"
         placeholder = "{{ fileName }}"

client/directives/components/newContainer/forms/compose/composeFilePathView.jade

@@ -3,6 +3,7 @@
     .padding-left-xxs.small.label-sm {{type === 'stage' ? 'Compose for Staging' : 'Compose for Testing'}}
     .toggle-wrapper
       input.toggle-input(
+        ng-disabled = "$root.featureFlags.composeEditing"
         ng-model = "pathEnabled"
         type = "checkbox"
         ng-disabled = "MDC.isSaving()"

client/directives/components/newContainer/forms/configureNewServiceView.jade

@@ -1,56 +1,54 @@
-section.grid-block.vertical.modal-body
-
+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"
     )
 
-  .grid-block.vertical.modal-form.no-border
-    .label-tabs.grid-block
-      label.grid-block.align-center.btn.btn-radio(
-        ng-class = "{'active': NCC.state.dockerFileTab === 'kubernetes'}"
-        ng-click = "\
-          NCC.state.dockerFileTab = 'kubernetes';\
-          NCC.state.configurationMethod = 'dockerComposeFile'\
-        "
-        ng-if = "$root.featureFlags.kubernetes"
-      )
-        svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
-          use(
-            xlink:href = "#icons-check"
-          )
-        .grid-block.vertical.text-left
-          p.p.weight-strong Use Kubernetes
-          small.small Set up from Kubernetes files in your repo.
+  .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'"
+)
 
-      label.grid-block.align-center.btn.btn-radio(
-        data-event-name = "Selected Compose Setup"
-        ng-class = "{'active': NCC.state.dockerFileTab === 'compose'}"
-        ng-click = "NCC.isSaving() || ((NCC.state.dockerFileTab = 'compose') && (NCC.state.configurationMethod = 'dockerComposeFile'))"
-      )
-        svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
-          use(
-            xlink:href = "#icons-check"
-          )
-        .grid-block.vertical.text-left
-          p.p.weight-strong Use a Compose File
-          small.small Set up from a Compose file in your repo.
+  svg.iconnables.icons-close(
+    ng-click = "NCC.close()"
+    ng-if = "!$root.featureFlags.composeEditing"
+  )
+    use(
+      xlink:href = "#icons-close"
+    )
 
-      label.grid-block.align-center.btn.btn-radio(
-        data-event-name = "Selected Dockerfile Setup"
-        ng-class = "{'active': NCC.state.dockerFileTab === 'dockerfile'}"
-        ng-click = "NCC.isSaving() || ((NCC.state.dockerFileTab = 'dockerfile') && (NCC.state.configurationMethod = 'dockerfile'))"
-        ng-if = "!$root.featureFlags.kubernetes"
-      )
-        svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
-          use(
-            xlink:href = "#icons-check"
-          )
-        .grid-block.vertical.text-left
-          p.p.weight-strong No Compose File
-          small.small Set up from scratch or from a Dockerfile.
+  .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(
@@ -82,6 +80,12 @@ section.grid-block.vertical.modal-body
       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()"
@@ -97,7 +101,7 @@ footer.modal-footer.clearfix
     )
     span(
       ng-if = "$root.featureFlags.composeNewService && NCC.state.repo"
-    ) {{ NCC.getNextStepText() }}
+    ) {{$root.featureFlags.composeEditing ? 'Save Changes' : 'NCC.getNextStepText()'}}
     span(
       ng-if = "NCC.state.templateSource"
     ) Add Service

client/directives/components/newContainer/forms/nameNewServiceView.jade

@@ -6,6 +6,7 @@ label
       maxlength = "19"
       name = "instanceName"
       no-double-dash-validator
+      ng-disabled = "$root.featureFlags.composeEditing"
       ng-model = "NCC.state.instanceName"
       ng-pattern = "/^[a-zA-Z0-9-]*$/"
       ng-placeholder = "{{NCC.state.instanceName}}"

client/directives/components/newContainer/forms/setupMethodView.jade

@@ -0,0 +1,42 @@
+label.grid-block.align-center.btn.btn-radio(
+  ng-class = "{'active': NCC.state.dockerFileTab === 'kubernetes'}"
+  ng-click = "\
+    NCC.state.dockerFileTab = 'kubernetes';\
+    NCC.state.configurationMethod = 'dockerComposeFile'\
+  "
+  ng-if = "$root.featureFlags.kubernetes"
+)
+  svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
+    use(
+      xlink:href = "#icons-check"
+    )
+  .grid-block.vertical.text-left
+    p.p.weight-strong Use Kubernetes
+    small.small Set up from Kubernetes files in your repo.
+
+label.grid-block.align-center.btn.btn-radio(
+  data-event-name = "Selected Compose Setup"
+  ng-class = "{'active': NCC.state.dockerFileTab === 'compose'}"
+  ng-click = "NCC.state.dockerFileTab = 'compose'; NCC.state.configurationMethod = 'dockerComposeFile'"
+)
+  svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
+    use(
+      xlink:href = "#icons-check"
+    )
+  .grid-block.vertical.text-left
+    p.p.weight-strong Use a Compose File
+    small.small Set up from a Compose file in your repo.
+
+label.grid-block.align-center.btn.btn-radio(
+  data-event-name = "Selected Dockerfile Setup"
+  ng-class = "{'active': NCC.state.dockerFileTab === 'dockerfile'}"
+  ng-click = "NCC.state.dockerFileTab = 'dockerfile'; NCC.state.configurationMethod = 'dockerfile'"
+  ng-if = "!$root.featureFlags.kubernetes"
+)
+  svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
+    use(
+      xlink:href = "#icons-check"
+    )
+  .grid-block.vertical.text-left
+    p.p.weight-strong No Compose File
+    small.small Set up from scratch or from a Dockerfile.