Merge branch 'master' into SAN-6094

* master: (79 commits)
  5.20.0
  use shortnames
  add ;
  Fixed left-nav issues with compose parents already existing and clobbering each other.
  5.19.18
  SAN-6097 Code review change
  Typo fix
  5.19.17
  Updated navigation logic for branch syncing.
  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
  ...

Author: damienrunnable

client/assets/styles/scss/components/wells.scss

@@ -67,6 +67,11 @@
     box-shadow: inset 0 0 0 1px $red;
   }
 
+  &.invalid {
+    border-color: $red;
+    box-shadow: inset 0 0 0 1px $red;
+  }
+
   .label-checkbox {
     height: 36px;
     line-height: 36px;

client/assets/styles/scss/forms/forms-inputs.scss

@@ -80,12 +80,13 @@ input {
 
   // placeholder
   &::placeholder {
-    color: $gray;
+    color: $gray-light;
   }
 }
 
 // sizes
 .input {
+  color: $gray-dark;
   height: $input-md;
   line-height: $input-line-height-md;
 

client/assets/styles/scss/forms/forms-payment.scss

@@ -4,7 +4,7 @@
   &.padding-md,
   > .padding-md {
     @include media(xxs) {
-      padding: 15px;
+      padding: $sm;
     }
 
     @include media(xxxs) {
@@ -15,17 +15,12 @@
   .well-payment {
 
     // if server side error
-    &.invalid {
-      border-color: $red;
-      box-shadow: inset 0 0 0 1px $red;
-
-      > .red {
-        margin-bottom: 15px;
-      }
+    &.invalid > .red {
+      margin-bottom: $sm;
     }
 
     > .grid-block + .grid-block {
-      margin-top: 15px;
+      margin-top: $sm;
     }
 
     // payment summary

client/assets/styles/scss/forms/forms-registry.scss

@@ -0,0 +1,24 @@
+.form-registry {
+
+  // error msg
+  .red {
+    padding: $sm $sm 0;
+  }
+
+  .well {
+    border-radius: $input-border-radius-lg;
+
+    > .label {
+      margin-bottom: 0;
+
+      + .label {
+        margin-top: 0;
+        padding-top: 0;
+      }
+    }
+  }
+
+  .footer {
+    border-top: 1px solid $gray-lighter;
+  }
+}

client/assets/styles/scss/index.scss

@@ -107,6 +107,7 @@
 @import "forms/forms-github";
 @import "forms/forms-payment";
 @import "forms/forms-plan";
+@import "forms/forms-registry";
 @import "forms/forms-table-vars";
 @import "forms/forms-trial";
 @import "forms/forms-whitelist";
@@ -151,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

@@ -10,13 +10,18 @@
     min-height: 32px;
   }
 
-  .modal-header .orange {
-    border: 0;
-    border-radius: 15px;
-    font-size: 11px;
-    font-weight: $weight-normal;
-    height: 15px;
-    padding: 0 5px;
+  .modal-header {
+    padding-left: 0;
+    padding-right: 0;
+
+    .orange {
+      border: 0;
+      border-radius: 15px;
+      font-size: 11px;
+      font-weight: $weight-normal;
+      height: 15px;
+      padding: 0 5px;
+    }
   }
 
   .modal-body {
@@ -89,7 +94,6 @@
   }
 
   .list-teammates-pending {
-    background-image: repeating-linear-gradient(60deg, #f9f9f9, #f9f9f9 18px, transparent 18px, transparent 36px);
 
     + .list-teammates-pending {
       margin-top: 15px;
@@ -134,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/assets/styles/scss/views/views-new-service.scss

@@ -53,6 +53,10 @@
       border-top: 1px solid $gray-lighter;
     }
 
+    &:not(:first-child) + .label {
+      padding-top: 0;
+    }
+
     + .label {
       margin-top: 0;
     }

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,22 +38,26 @@
               )
                 | {{data.currentOrg.poppa.trialDaysRemaining() + ' days left'}}
             li.list-item.popover-list-item(
-              ng-click = "actions.openSettingsModal('teamManagement')"
+              data-event-name = "Clicked to Open PR Bot Settings"
+              ng-click = "actions.openSettingsModal('githubIntegration')"
             )
               svg.iconnables
                 use(
-                  xlink:href = "#icons-team"
+                  xlink:href = "#icons-octicons-github-gray"
                 )
-              | Teammates
+              | PR Bot
             li.list-item.popover-list-item(
-              ng-click = "actions.openSettingsModal('githubIntegration')"
+              data-event-name = "Clicked to Open Private Registry Settings"
+              ng-click = "actions.openSettingsModal('privateRegistry')"
+              ng-if = "$root.featureFlags.privateRegistry"
             )
               svg.iconnables
                 use(
-                  xlink:href = "#icons-octicons-github-gray"
+                  xlink:href = "#icons-private-registry"
                 )
-              | PR Bot
+              | Private Registry
             li.list-item.popover-list-item(
+              data-event-name = "Clicked to Open Slack Integration Settings"
               ng-click = "actions.openSettingsModal('slackIntegration')"
             )
               img.iconnables(
@@ -61,6 +66,25 @@
                 width = "24"
               )
               | 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
+                use(
+                  xlink:href = "#icons-team"
+                )
+              | Teammates
           ul.list.popover-list(
             ng-class = "{'list-secondary': !data.currentOrg.isPersonalAccount()}"
           )
@@ -153,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