Add latest changes from gitlab-org/gitlab@master

8 files changed, 109 insertions, 71 deletions

diff --git a/app/assets/javascripts/admin/abuse_report/components/report_actions.vue b/app/assets/javascripts/admin/abuse_report/components/report_actions.vue
index 57d5d46ceb4..92478e10289 100644
--- a/app/assets/javascripts/admin/abuse_report/components/report_actions.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/report_actions.vue
@@ -95,10 +95,12 @@ export default {
         return;
       }
 
-      axios
-        .put(this.report.updatePath, this.form)
-        .then(this.handleResponse)
-        .catch(this.handleError);
+      // TODO: In 16.4 use moderateUserPath without falling back to using updatePath
+      // See https://gitlab.com/gitlab-org/modelops/anti-abuse/team-tasks/-/issues/167?work_item_iid=443
+      const { moderateUserPath, updatePath } = this.report;
+      const path = moderateUserPath || updatePath;
+
+      axios.put(path, this.form).then(this.handleResponse).catch(this.handleError);
     },
     handleResponse({ data }) {
       this.toggleActionsDrawer();
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index 4860215d8f2..ec17bbea48f 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
+import { GlButton, GlIcon, GlLoadingIcon } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { s__ } from '~/locale';
 import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
@@ -14,8 +14,9 @@ export default {
     ConfirmModal,
     KeysPanel,
     NavigationTabs,
-    GlLoadingIcon,
+    GlButton,
     GlIcon,
+    GlLoadingIcon,
   },
   props: {
     endpoint: {
@@ -42,6 +43,10 @@ export default {
     available_project_keys: s__('DeployKeys|Privately accessible deploy keys'),
     public_keys: s__('DeployKeys|Publicly accessible deploy keys'),
   },
+  i18n: {
+    loading: s__('DeployKeys|Loading deploy keys'),
+    addButton: s__('DeployKeys|Add new key'),
+  },
   computed: {
     tabs() {
       return Object.keys(this.$options.scopes).map((scope) => {
@@ -132,23 +137,41 @@ export default {
 </script>
 
 <template>
-  <div class="gl-mb-3 deploy-keys">
+  <div class="deploy-keys">
     <confirm-modal :visible="confirmModalVisible" @remove="removeKey" @cancel="cancel" />
     <gl-loading-icon
       v-if="isLoading && !hasKeys"
-      :label="s__('DeployKeys|Loading deploy keys')"
-      size="lg"
+      :label="$options.i18n.loading"
+      size="sm"
+      class="gl-m-5"
     />
     <template v-else-if="hasKeys">
-      <div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
-        <div class="fade-left">
-          <gl-icon name="chevron-lg-left" :size="12" />
-        </div>
-        <div class="fade-right">
-          <gl-icon name="chevron-lg-right" :size="12" />
+      <div class="gl-new-card-header gl-align-items-center gl-pt-0 gl-pb-0 gl-pl-0">
+        <div class="top-area scrolling-tabs-container inner-page-scroll-tabs gl-border-b-0">
+          <div class="fade-left">
+            <gl-icon name="chevron-lg-left" :size="12" />
+          </div>
+          <div class="fade-right">
+            <gl-icon name="chevron-lg-right" :size="12" />
+          </div>
+
+          <navigation-tabs
+            :tabs="tabs"
+            scope="deployKeys"
+            class="gl-rounded-lg"
+            @onChangeTab="onChangeTab"
+          />
         </div>
 
-        <navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" />
+        <div class="gl-new-card-actions">
+          <gl-button
+            size="small"
+            class="js-toggle-button js-toggle-content"
+            data-testid="add-new-deploy-key-button"
+          >
+            {{ $options.i18n.addButton }}
+          </gl-button>
+        </div>
       </div>
       <keys-panel
         :project-id="projectId"
diff --git a/app/assets/javascripts/deploy_keys/components/key.vue b/app/assets/javascripts/deploy_keys/components/key.vue
index 79c45553659..16c745d8cff 100644
--- a/app/assets/javascripts/deploy_keys/components/key.vue
+++ b/app/assets/javascripts/deploy_keys/components/key.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlIcon, GlLink, GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { GlBadge, GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { head, tail } from 'lodash';
 import { s__, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -10,9 +10,9 @@ import ActionBtn from './action_btn.vue';
 export default {
   components: {
     ActionBtn,
+    GlBadge,
     GlButton,
     GlIcon,
-    GlLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -111,12 +111,21 @@ export default {
 </script>
 
 <template>
-  <div class="gl-responsive-table-row deploy-key">
+  <div
+    class="gl-responsive-table-row gl-align-items-flex-start deploy-key gl-bg-gray-10 gl-md-pl-5 gl-md-pr-5 gl-border-gray-100!"
+  >
     <div class="table-section section-40">
-      <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Deploy key') }}</div>
+      <div
+        role="rowheader"
+        class="table-mobile-header gl-align-self-start gl-font-weight-bold gl-text-gray-700"
+      >
+        {{ s__('DeployKeys|Deploy key') }}
+      </div>
       <div class="table-mobile-content" data-testid="key-container">
-        <strong class="title" data-testid="key-title-content"> {{ deployKey.title }} </strong>
-        <dl>
+        <p class="title gl-font-weight-semibold gl-text-gray-700" data-testid="key-title-content">
+          {{ deployKey.title }}
+        </p>
+        <dl class="gl-font-sm gl-mb-0">
           <dt>{{ __('SHA256') }}</dt>
           <dd class="fingerprint" data-testid="key-sha256-fingerprint-content">
             {{ deployKey.fingerprint_sha256 }}
@@ -133,53 +142,62 @@ export default {
       </div>
     </div>
     <div class="table-section section-20 section-wrap">
-      <div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Project usage') }}</div>
-      <div class="table-mobile-content deploy-project-list">
+      <div role="rowheader" class="table-mobile-header gl-font-weight-bold gl-text-gray-700">
+        {{ s__('DeployKeys|Project usage') }}
+      </div>
+      <div class="table-mobile-content deploy-project-list gl-display-flex gl-flex-wrap">
         <template v-if="projects.length > 0">
-          <gl-link
+          <gl-badge
             v-gl-tooltip
             :title="projectTooltipTitle(firstProject)"
-            class="label deploy-project-label"
+            :icon="firstProject.can_push ? 'lock-open' : 'lock'"
+            class="deploy-project-label gl-mr-2 gl-mb-2 gl-truncate"
           >
-            <span> {{ firstProject.project.full_name }} </span>
-            <gl-icon :name="firstProject.can_push ? 'lock-open' : 'lock'" />
-          </gl-link>
-          <gl-link
+            <span class="gl-text-truncate">{{ firstProject.project.full_name }}</span>
+          </gl-badge>
+
+          <gl-badge
             v-if="isExpandable"
             v-gl-tooltip
             :title="restProjectsTooltip"
-            class="label deploy-project-label"
-            @click="toggleExpanded"
+            class="deploy-project-label gl-mr-2 gl-mb-2 gl-truncate"
+            href="#"
+            @click.native="toggleExpanded"
           >
-            <span>{{ restProjectsLabel }}</span>
-          </gl-link>
-          <gl-link
+            <span class="gl-text-truncate">{{ restProjectsLabel }}</span>
+          </gl-badge>
+
+          <gl-badge
             v-for="deployKeysProject in restProjects"
             v-else-if="isExpanded"
             :key="deployKeysProject.project.full_path"
             v-gl-tooltip
             :href="deployKeysProject.project.full_path"
             :title="projectTooltipTitle(deployKeysProject)"
-            class="label deploy-project-label"
+            :icon="deployKeysProject.can_push ? 'lock-open' : 'lock'"
+            class="deploy-project-label gl-mr-2 gl-mb-2 gl-truncate"
           >
-            <span> {{ deployKeysProject.project.full_name }} </span>
-            <gl-icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" />
-          </gl-link>
+            <span class="gl-text-truncate">{{ deployKeysProject.project.full_name }}</span>
+          </gl-badge>
         </template>
-        <span v-else class="text-secondary">{{ __('None') }}</span>
+        <span v-else class="gl-text-secondary">{{ __('None') }}</span>
       </div>
     </div>
     <div class="table-section section-15">
-      <div role="rowheader" class="table-mobile-header">{{ __('Created') }}</div>
-      <div class="table-mobile-content text-secondary key-created-at">
+      <div role="rowheader" class="table-mobile-header gl-font-weight-bold gl-text-gray-700">
+        {{ __('Created') }}
+      </div>
+      <div class="table-mobile-content gl-text-gray-700 key-created-at">
         <span v-gl-tooltip :title="tooltipTitle(deployKey.created_at)">
           <gl-icon name="calendar" /> <span>{{ timeFormatted(deployKey.created_at) }}</span>
         </span>
       </div>
     </div>
     <div class="table-section section-15">
-      <div role="rowheader" class="table-mobile-header">{{ __('Expires') }}</div>
-      <div class="table-mobile-content text-secondary key-expires-at">
+      <div role="rowheader" class="table-mobile-header gl-font-weight-bold gl-text-gray-700">
+        {{ __('Expires') }}
+      </div>
+      <div class="table-mobile-content gl-text-gray-700 key-expires-at">
         <span
           v-if="deployKey.expires_at"
           v-gl-tooltip
@@ -214,7 +232,7 @@ export default {
           :deploy-key="deployKey"
           :title="__('Remove')"
           :aria-label="__('Remove')"
-          category="primary"
+          category="secondary"
           variant="danger"
           icon="remove"
           type="remove"
@@ -229,7 +247,7 @@ export default {
           type="disable"
           data-container="body"
           icon="cancel"
-          category="primary"
+          category="secondary"
           variant="danger"
         />
       </div>
diff --git a/app/assets/javascripts/deploy_keys/components/keys_panel.vue b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
index e04cbbe72b9..dac63188aa5 100644
--- a/app/assets/javascripts/deploy_keys/components/keys_panel.vue
+++ b/app/assets/javascripts/deploy_keys/components/keys_panel.vue
@@ -28,9 +28,12 @@ export default {
 </script>
 
 <template>
-  <div class="deploy-keys-panel table-holder">
+  <div class="deploy-keys-panel table-holder gl-bg-white gl-rounded-lg">
     <template v-if="keys.length > 0">
-      <div role="row" class="gl-responsive-table-row table-row-header">
+      <div
+        role="row"
+        class="gl-responsive-table-row table-row-header gl-font-base gl-font-weight-bold gl-text-gray-900 gl-md-pl-5 gl-md-pr-5 gl-bg-gray-10 gl-border-gray-100!"
+      >
         <div role="rowheader" class="table-section section-40">
           {{ s__('DeployKeys|Deploy key') }}
         </div>
@@ -50,8 +53,8 @@ export default {
         :project-id="projectId"
       />
     </template>
-    <div v-else class="settings-message text-center gl-mt-5">
-      {{ s__('DeployKeys|No deploy keys found. Create one with the form above.') }}
+    <div v-else class="gl-new-card-empty gl-bg-gray-10 gl-text-center gl-p-5">
+      {{ s__('DeployKeys|No deploy keys found, start by adding a new one above.') }}
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/nav/components/new_nav_toggle.vue b/app/assets/javascripts/nav/components/new_nav_toggle.vue
index 82302ec4602..4e5d6b0ce6c 100644
--- a/app/assets/javascripts/nav/components/new_nav_toggle.vue
+++ b/app/assets/javascripts/nav/components/new_nav_toggle.vue
@@ -68,10 +68,15 @@ export default {
   <gl-disclosure-dropdown-item v-if="newNavigation" @action="toggleNav">
     <div class="gl-new-dropdown-item-content">
       <div
-        class="gl-new-dropdown-item-text-wrapper gl-display-flex! gl-justify-content-space-between gl-align-items-center gl-py-2!"
+        class="gl-new-dropdown-item-text-wrapper gl-display-flex! gl-justify-content-space-between gl-align-items-center gl-py-2! gl-gap-3"
       >
         {{ $options.i18n.toggleMenuItemLabel }}
-        <gl-toggle :value="isEnabled" :label="$options.i18n.toggleLabel" label-position="hidden" />
+        <gl-toggle
+          class="gl-flex-grow-0!"
+          :value="isEnabled"
+          :label="$options.i18n.toggleLabel"
+          label-position="hidden"
+        />
       </div>
     </div>
   </gl-disclosure-dropdown-item>
@@ -84,11 +89,12 @@ export default {
     </div>
 
     <div
-      class="menu-item gl-cursor-pointer gl-display-flex! gl-justify-content-space-between gl-align-items-center"
+      class="menu-item gl-cursor-pointer gl-display-flex! gl-justify-content-space-between gl-align-items-center gl-gap-3"
       @click.prevent.stop="toggleNav"
     >
       {{ $options.i18n.toggleMenuItemLabel }}
       <gl-toggle
+        class="gl-flex-grow-0!"
         :value="isEnabled"
         :label="$options.i18n.toggleLabel"
         label-position="hidden"
diff --git a/app/assets/javascripts/service_desk/components/empty_state_without_any_issues.vue b/app/assets/javascripts/service_desk/components/empty_state_without_any_issues.vue
index 0679d31a8b8..9dbed2c2579 100644
--- a/app/assets/javascripts/service_desk/components/empty_state_without_any_issues.vue
+++ b/app/assets/javascripts/service_desk/components/empty_state_without_any_issues.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlEmptyState, GlLink } from '@gitlab/ui';
-import { helpPagePath } from '~/helpers/help_page_helper';
 import {
   noIssuesSignedOutButtonText,
   infoBannerTitle,
@@ -17,7 +16,6 @@ export default {
     infoBannerAdminNote,
     learnMore,
   },
-  serviceDeskHelpPagePath: helpPagePath('user/project/service_desk/index'),
   components: {
     GlEmptyState,
     GlLink,
@@ -29,6 +27,7 @@ export default {
     'canAdminIssues',
     'isServiceDeskEnabled',
     'serviceDeskEmailAddress',
+    'serviceDeskHelpPath',
   ],
   computed: {
     canSeeEmailAddress() {
@@ -50,7 +49,7 @@ export default {
           {{ $options.i18n.infoBannerAdminNote }} <br /><code>{{ serviceDeskEmailAddress }}</code>
         </p>
         <p>{{ $options.i18n.infoBannerUserNote }}</p>
-        <gl-link :href="$options.serviceDeskHelpPagePath" target="_blank">
+        <gl-link :href="serviceDeskHelpPath">
           {{ $options.i18n.learnMore }}
         </gl-link>
       </template>
@@ -67,7 +66,7 @@ export default {
   >
     <template #description>
       <p>{{ $options.i18n.infoBannerUserNote }}</p>
-      <gl-link :href="$options.serviceDeskHelpPagePath">
+      <gl-link :href="serviceDeskHelpPath">
         {{ $options.i18n.learnMore }}
       </gl-link>
     </template>
diff --git a/app/assets/javascripts/service_desk/components/info_banner.vue b/app/assets/javascripts/service_desk/components/info_banner.vue
index 8aaced839a5..5667ee2f31d 100644
--- a/app/assets/javascripts/service_desk/components/info_banner.vue
+++ b/app/assets/javascripts/service_desk/components/info_banner.vue
@@ -51,7 +51,7 @@ export default {
       </p>
       <p>
         {{ $options.i18n.infoBannerUserNote }}
-        <gl-link :href="serviceDeskHelpPath" target="_blank">{{ $options.i18n.learnMore }}</gl-link
+        <gl-link :href="serviceDeskHelpPath">{{ $options.i18n.learnMore }}</gl-link
         >.
       </p>
       <p v-if="canEnableServiceDesk" class="gl-mt-3">
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 71936f37333..b9cae28537d 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -65,7 +65,6 @@
     white-space: normal;
   }
 
-  .deploy-project-label,
   .key-created-at {
     svg {
       vertical-align: text-top;
@@ -83,18 +82,6 @@
 
 .deploy-project-list {
   margin-bottom: -$gl-padding-4;
-
-  a.deploy-project-label {
-    margin-right: $gl-padding-4;
-    margin-bottom: $gl-padding-4;
-    color: $gl-text-color-secondary;
-    background-color: $gray-50;
-    line-height: $gl-btn-line-height;
-
-    &:hover {
-      color: $blue-600;
-    }
-  }
 }
 
 .vs-public {