Add latest changes from gitlab-org/gitlab@master

3 files changed, 25 insertions, 12 deletions

diff --git a/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue b/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue
index 7ec3ec3f84d..a56fce98f85 100644
--- a/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue
+++ b/app/assets/javascripts/deploy_tokens/components/new_deploy_token.vue
@@ -8,7 +8,9 @@ import {
   GlFormInputGroup,
   GlSprintf,
   GlLink,
+  GlAlert,
 } from '@gitlab/ui';
+import { MountingPortal } from 'portal-vue';
 import { createAlert, VARIANT_INFO } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { formatDate } from '~/lib/utils/datetime_utility';
@@ -26,6 +28,8 @@ export default {
     ClipboardButton,
     GlSprintf,
     GlLink,
+    GlAlert,
+    MountingPortal,
   },
 
   props: {
@@ -170,12 +174,17 @@ export default {
 </script>
 <template>
   <div>
-    <div v-if="newTokenDetails" class="created-deploy-token-container info-well">
-      <div class="well-segment">
-        <h5>{{ $options.translations.newTokenMessage }}</h5>
+    <mounting-portal append mount-to="#new-deploy-token-alert">
+      <gl-alert
+        v-if="newTokenDetails"
+        variant="success"
+        class="gl-mb-4"
+        @dismiss="newTokenDetails = null"
+      >
+        <h5 class="gl-mt-0!">{{ $options.translations.newTokenMessage }}</h5>
         <gl-form-group>
           <template #description>
-            <div class="deploy-token-help-block gl-mt-2 text-success">
+            <div class="deploy-token-help-block gl-mt-2">
               <gl-sprintf
                 :message="$options.translations.newTokenUsernameDescription"
                 :placeholders="placeholders.link"
@@ -200,9 +209,9 @@ export default {
             </template>
           </gl-form-input-group>
         </gl-form-group>
-        <gl-form-group>
+        <gl-form-group class="gl-mb-0">
           <template #description>
-            <div class="deploy-token-help-block gl-mt-2 text-danger">
+            <div class="deploy-token-help-block gl-mt-2">
               <gl-sprintf
                 :message="$options.translations.newTokenDescription"
                 :placeholders="placeholders.i"
@@ -222,9 +231,9 @@ export default {
             </template>
           </gl-form-input-group>
         </gl-form-group>
-      </div>
-    </div>
-    <h5>{{ $options.translations.addTokenHeader }}</h5>
+      </gl-alert>
+    </mounting-portal>
+    <h4 class="gl-mt-0">{{ $options.translations.addTokenHeader }}</h4>
     <p>
       <gl-sprintf
         :message="$options.translations.addTokenDescription"
@@ -296,6 +305,9 @@ export default {
       <gl-button variant="confirm" @click="createDeployToken">
         {{ $options.translations.addTokenButton }}
       </gl-button>
+      <gl-button class="gl-ml-3 js-toggle-button">
+        {{ $options.translations.cancelTokenCreation }}
+      </gl-button>
     </div>
     <gl-datepicker v-model="expiresAt" target="#deploy_token_expires_at" container="body" />
   </div>
diff --git a/app/assets/javascripts/deploy_tokens/components/revoke_button.vue b/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
index 7879357a042..52d94e65e72 100644
--- a/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
+++ b/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
@@ -35,9 +35,9 @@ export default {
   <div>
     <gl-button
       v-gl-modal="modalId"
-      category="primary"
+      category="secondary"
       variant="danger"
-      class="gl-float-right"
+      size="small"
       data-testid="revoke-button"
       >{{ s__('DeployTokens|Revoke') }}</gl-button
     >
diff --git a/app/assets/javascripts/deploy_tokens/deploy_token_translations.js b/app/assets/javascripts/deploy_tokens/deploy_token_translations.js
index 410864a83a2..0d3f92b2347 100644
--- a/app/assets/javascripts/deploy_tokens/deploy_token_translations.js
+++ b/app/assets/javascripts/deploy_tokens/deploy_token_translations.js
@@ -2,6 +2,7 @@ import { s__ } from '~/locale';
 
 const translations = {
   addTokenButton: s__('DeployTokens|Create deploy token'),
+  cancelTokenCreation: s__('DeployTokens|Cancel'),
   addTokenExpiryLabel: s__('DeployTokens|Expiration date (optional)'),
   addTokenExpiryDescription: s__(
     'DeployTokens|Enter an expiration date for your token. Defaults to never expire.',
@@ -23,7 +24,7 @@ const translations = {
   newTokenDescription: s__(
     'DeployTokens|Use this token as a password. Save it. This password can %{i_start}not%{i_end} be recovered.',
   ),
-  newTokenMessage: s__('DeployTokens|Your New Deploy Token'),
+  newTokenMessage: s__('DeployTokens|Your new deploy token'),
   newTokenUsernameCopy: s__('DeployTokens|Copy username'),
   newTokenUsernameDescription: s__(
     'DeployTokens|This username supports access. %{link_start}What kind of access?%{link_end}',