Add latest changes from gitlab-org/gitlab@master

10 files changed, 237 insertions, 189 deletions

diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
index 4faec24e19d..f4e1da9b34f 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_settings.vue
@@ -117,6 +117,7 @@ export default {
         @handle-prev-page="$emit('handle-prev-page')"
         @handle-next-page="$emit('handle-next-page')"
         @set-selected-variable="setSelectedVariable"
+        @delete-variable="deleteVariable"
         @sort-changed="(val) => $emit('sort-changed', val)"
       />
       <ci-variable-modal
diff --git a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
index ec7a921664f..a14cd1e387a 100644
--- a/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci/ci_variable_list/components/ci_variable_table.vue
@@ -3,11 +3,14 @@ import {
   GlAlert,
   GlBadge,
   GlButton,
+  GlCard,
+  GlIcon,
   GlLoadingIcon,
   GlModalDirective,
   GlKeysetPagination,
   GlLink,
   GlTable,
+  GlModal,
   GlTooltipDirective,
 } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
@@ -45,9 +48,8 @@ export default {
     },
     {
       key: 'actions',
-      label: '',
-      tdClass: 'text-right',
-      thClass: 'gl-w-5p',
+      label: __('Actions'),
+      thClass: 'gl-text-right',
     },
   ],
   inheritedVarsFields: [
@@ -73,10 +75,13 @@ export default {
     GlAlert,
     GlBadge,
     GlButton,
+    GlCard,
     GlKeysetPagination,
     GlLink,
+    GlIcon,
     GlLoadingIcon,
     GlTable,
+    GlModal,
   },
   directives: {
     GlModalDirective,
@@ -84,6 +89,14 @@ export default {
   },
   mixins: [glFeatureFlagsMixin()],
   inject: ['isInheritedGroupVars'],
+  i18n: {
+    title: s__('CiVariables|CI/CD Variables'),
+    addButton: s__('CiVariables|Add variable'),
+    editButton: __('Edit'),
+    deleteButton: __('Delete'),
+    modalDeleteTitle: s__('CiVariables|Delete variable'),
+    modalDeleteMessage: s__('CiVariables|Do you want to delete the variable %{key}?'),
+  },
   props: {
     entity: {
       type: String,
@@ -107,6 +120,20 @@ export default {
       required: true,
     },
   },
+  deleteModal: {
+    actionPrimary: {
+      text: __('Delete'),
+      attributes: {
+        variant: 'danger',
+      },
+    },
+    actionSecondary: {
+      text: __('Cancel'),
+      attributes: {
+        variant: 'default',
+      },
+    },
+  },
   data() {
     return {
       areValuesHidden: true,
@@ -165,6 +192,9 @@ export default {
     setSelectedVariable(index = -1) {
       this.$emit('set-selected-variable', this.variables[index] ?? null);
     },
+    deleteSelectedVariable(index = -1) {
+      this.$emit('delete-variable', this.variables[index] ?? null);
+    },
     getAttributes(item) {
       const attributes = [];
       if (item.variableType === variableTypes.fileType) {
@@ -181,188 +211,219 @@ export default {
       }
       return attributes;
     },
+    removeVariableMessage(key) {
+      return sprintf(this.$options.i18n.modalDeleteMessage, {
+        key,
+      });
+    },
   },
   maximumVariableLimitReached: MAXIMUM_VARIABLE_LIMIT_REACHED,
 };
 </script>
 
 <template>
-  <div class="ci-variable-table" :data-testid="tableDataTestId">
-    <gl-loading-icon v-if="isLoading" />
-    <gl-alert
-      v-if="showAlert"
-      :dismissible="false"
-      :title="$options.maximumVariableLimitReached"
-      variant="info"
-    >
-      {{ exceedsVariableLimitText }}
-    </gl-alert>
-    <div
-      v-if="showPagination && !isInheritedGroupVars"
-      class="ci-variable-actions gl-display-flex gl-justify-content-end gl-my-3"
+  <div>
+    <gl-card
+      class="gl-new-card ci-variable-table"
+      header-class="gl-new-card-header"
+      body-class="gl-new-card-body gl-px-0"
+      :data-testid="tableDataTestId"
     >
-      <gl-button v-if="!isTableEmpty" @click="toggleHiddenState">{{ valuesButtonText }}</gl-button>
-      <gl-button
-        v-gl-modal-directive="$options.modalId"
-        class="gl-mx-3"
-        data-qa-selector="add_ci_variable_button"
-        variant="confirm"
-        category="primary"
-        :aria-label="__('Add')"
-        :disabled="exceedsVariableLimit"
-        @click="setSelectedVariable()"
-        >{{ __('Add variable') }}</gl-button
-      >
-    </div>
-    <gl-table
-      v-if="!isLoading"
-      :fields="fields"
-      :items="variablesWithAttributes"
-      tbody-tr-class="js-ci-variable-row"
-      sort-by="key"
-      sort-direction="asc"
-      stacked="lg"
-      fixed
-      show-empty
-      sort-icon-left
-      no-sort-reset
-      no-local-sorting
-      @sort-changed="(val) => $emit('sort-changed', val)"
-    >
-      <template #table-colgroup="scope">
-        <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" />
-      </template>
-      <template #cell(key)="{ item }">
-        <div
-          class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
-        >
-          <span
-            :id="`ci-variable-key-${item.id}`"
-            class="gl-display-inline-block gl-max-w-full gl-word-break-word"
-            >{{ item.key }}</span
-          >
+      <template #header>
+        <div class="gl-new-card-title-wrapper">
+          <h5 class="gl-new-card-title">{{ $options.i18n.title }}</h5>
+          <span class="gl-new-card-count">
+            <gl-icon name="code" class="gl-mr-2" />
+            {{ variables.length }}
+          </span>
+        </div>
+        <div v-if="!isInheritedGroupVars" class="gl-new-card-actions gl-font-size-0">
           <gl-button
-            v-gl-tooltip
+            v-if="!isTableEmpty"
             category="tertiary"
-            icon="copy-to-clipboard"
-            class="gl-my-n3 gl-ml-2"
-            :title="__('Copy key')"
-            :data-clipboard-text="item.key"
-            :aria-label="__('Copy to clipboard')"
-          />
-        </div>
-      </template>
-      <template v-if="!isInheritedGroupVars" #cell(value)="{ item }">
-        <div
-          class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
-        >
-          <span v-if="areValuesHidden" data-testid="hiddenValue">*****</span>
-          <span
-            v-else
-            :id="`ci-variable-value-${item.id}`"
-            class="gl-display-inline-block gl-max-w-full gl-text-truncate"
-            data-testid="revealedValue"
-            >{{ item.value }}</span
+            size="small"
+            class="gl-mr-3"
+            @click="toggleHiddenState"
+            >{{ valuesButtonText }}</gl-button
           >
           <gl-button
-            v-gl-tooltip
-            category="tertiary"
-            icon="copy-to-clipboard"
-            class="gl-my-n3 gl-ml-2"
-            :title="__('Copy value')"
-            :data-clipboard-text="item.value"
-            :aria-label="__('Copy to clipboard')"
-          />
+            v-gl-modal-directive="$options.modalId"
+            size="small"
+            :disabled="exceedsVariableLimit"
+            data-qa-selector="add_ci_variable_button"
+            data-testid="add-ci-variable-button"
+            @click="setSelectedVariable()"
+            >{{ $options.i18n.addButton }}</gl-button
+          >
         </div>
       </template>
-      <template #cell(attributes)="{ item }">
-        <span data-testid="ci-variable-table-row-attributes">
-          <gl-badge
-            v-for="attribute in item.attributes"
-            :key="`${item.key}-${attribute}`"
-            class="gl-mr-2"
-            variant="info"
-            size="sm"
+
+      <gl-loading-icon v-if="isLoading" class="gl-p-4" />
+      <gl-alert
+        v-if="showAlert"
+        :dismissible="false"
+        :title="$options.maximumVariableLimitReached"
+        variant="info"
+      >
+        {{ exceedsVariableLimitText }}
+      </gl-alert>
+      <gl-table
+        v-if="!isLoading"
+        :fields="fields"
+        :items="variablesWithAttributes"
+        tbody-tr-class="js-ci-variable-row"
+        sort-by="key"
+        sort-direction="asc"
+        stacked="md"
+        fixed
+        show-empty
+        sort-icon-left
+        no-sort-reset
+        no-local-sorting
+        @sort-changed="(val) => $emit('sort-changed', val)"
+      >
+        <template #table-colgroup="scope">
+          <col v-for="field in scope.fields" :key="field.key" :style="field.customStyle" />
+        </template>
+        <template #cell(key)="{ item }">
+          <div
+            class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
           >
-            {{ attribute }}
-          </gl-badge>
-        </span>
-      </template>
-      <template #cell(environmentScope)="{ item }">
-        <div
-          class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
-        >
-          <span
-            :id="`ci-variable-env-${item.id}`"
-            class="gl-display-inline-block gl-max-w-full gl-word-break-word"
-            >{{ convertEnvironmentScopeValue(item.environmentScope) }}</span
+            <span
+              :id="`ci-variable-key-${item.id}`"
+              class="gl-display-inline-block gl-max-w-full gl-word-break-word"
+              >{{ item.key }}</span
+            >
+            <gl-button
+              v-gl-tooltip
+              category="tertiary"
+              icon="copy-to-clipboard"
+              class="gl-my-n3 gl-ml-2"
+              :title="__('Copy key')"
+              :data-clipboard-text="item.key"
+              :aria-label="__('Copy to clipboard')"
+            />
+          </div>
+        </template>
+        <template v-if="!isInheritedGroupVars" #cell(value)="{ item }">
+          <div
+            class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
           >
-          <gl-button
-            v-gl-tooltip
-            category="tertiary"
-            icon="copy-to-clipboard"
-            class="gl-my-n3 gl-ml-2"
-            :title="__('Copy environment')"
-            :data-clipboard-text="convertEnvironmentScopeValue(item.environmentScope)"
-            :aria-label="__('Copy to clipboard')"
-          />
-        </div>
-      </template>
-      <template v-if="isInheritedGroupVars" #cell(group)="{ item }">
-        <div
-          class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
-        >
-          <gl-link
-            :id="`ci-variable-group-${item.id}`"
-            data-testid="ci-variable-table-row-cicd-path"
-            class="gl-display-inline-block gl-max-w-full gl-word-break-word"
-            :href="item.groupCiCdSettingsPath"
+            <span v-if="areValuesHidden" data-testid="hiddenValue">*****</span>
+            <span
+              v-else
+              :id="`ci-variable-value-${item.id}`"
+              class="gl-display-inline-block gl-max-w-full gl-text-truncate"
+              data-testid="revealedValue"
+              >{{ item.value }}</span
+            >
+            <gl-button
+              v-gl-tooltip
+              category="tertiary"
+              icon="copy-to-clipboard"
+              class="gl-my-n3 gl-ml-2"
+              :title="__('Copy value')"
+              :data-clipboard-text="item.value"
+              :aria-label="__('Copy to clipboard')"
+            />
+          </div>
+        </template>
+        <template #cell(attributes)="{ item }">
+          <span data-testid="ci-variable-table-row-attributes">
+            <gl-badge
+              v-for="attribute in item.attributes"
+              :key="`${item.key}-${attribute}`"
+              class="gl-mr-2"
+              variant="info"
+              size="sm"
+            >
+              {{ attribute }}
+            </gl-badge>
+          </span>
+        </template>
+        <template #cell(environmentScope)="{ item }">
+          <div
+            class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
           >
-            {{ item.groupName }}
-          </gl-link>
-        </div>
-      </template>
-      <template v-if="!isInheritedGroupVars" #cell(actions)="{ item }">
-        <gl-button
-          v-gl-modal-directive="$options.modalId"
-          icon="pencil"
-          :aria-label="__('Edit')"
-          data-qa-selector="edit_ci_variable_button"
-          @click="setSelectedVariable(item.index)"
-        />
-      </template>
-      <template #empty>
-        <p class="gl-text-center gl-py-6 gl-text-black-normal gl-mb-0">
-          {{ __('There are no variables yet.') }}
-        </p>
-      </template>
-    </gl-table>
-    <gl-alert
-      v-if="showAlert"
-      :dismissible="false"
-      :title="$options.maximumVariableLimitReached"
-      variant="info"
-    >
-      {{ exceedsVariableLimitText }}
-    </gl-alert>
+            <span
+              :id="`ci-variable-env-${item.id}`"
+              class="gl-display-inline-block gl-max-w-full gl-word-break-word"
+              >{{ convertEnvironmentScopeValue(item.environmentScope) }}</span
+            >
+            <gl-button
+              v-gl-tooltip
+              category="tertiary"
+              icon="copy-to-clipboard"
+              class="gl-my-n3 gl-ml-2"
+              :title="__('Copy environment')"
+              :data-clipboard-text="convertEnvironmentScopeValue(item.environmentScope)"
+              :aria-label="__('Copy to clipboard')"
+            />
+          </div>
+        </template>
+        <template v-if="isInheritedGroupVars" #cell(group)="{ item }">
+          <div
+            class="gl-display-flex gl-align-items-flex-start gl-justify-content-end gl-lg-justify-content-start gl-mr-n3"
+          >
+            <gl-link
+              :id="`ci-variable-group-${item.id}`"
+              data-testid="ci-variable-table-row-cicd-path"
+              class="gl-display-inline-block gl-max-w-full gl-word-break-word"
+              :href="item.groupCiCdSettingsPath"
+            >
+              {{ item.groupName }}
+            </gl-link>
+          </div>
+        </template>
+        <template v-if="!isInheritedGroupVars" #cell(actions)="{ item }">
+          <div class="gl-display-flex gl-justify-content-end gl-mt-n2 gl-mb-n2">
+            <gl-button
+              v-gl-modal-directive="$options.modalId"
+              icon="pencil"
+              size="small"
+              class="gl-mr-3"
+              :aria-label="$options.i18n.editButton"
+              data-qa-selector="edit_ci_variable_button"
+              @click="setSelectedVariable(item.index)"
+            />
+            <gl-button
+              v-gl-modal-directive="`delete-variable-${item.index}`"
+              variant="danger"
+              category="secondary"
+              icon="remove"
+              size="small"
+              :aria-label="$options.i18n.deleteButton"
+              data-qa-selector="delete_ci_variable_button"
+            />
+            <gl-modal
+              ref="modal"
+              :modal-id="`delete-variable-${item.index}`"
+              :title="$options.i18n.modalDeleteTitle"
+              :action-primary="$options.deleteModal.actionPrimary"
+              :action-secondary="$options.deleteModal.actionSecondary"
+              @primary="deleteSelectedVariable(item.index)"
+            >
+              {{ removeVariableMessage(item.key) }}
+            </gl-modal>
+          </div>
+        </template>
+        <template #empty>
+          <p class="gl-text-secondary gl-text-center gl-py-1 gl-mb-0">
+            {{ __('There are no variables yet.') }}
+          </p>
+        </template>
+      </gl-table>
+      <gl-alert
+        v-if="showAlert"
+        :dismissible="false"
+        :title="$options.maximumVariableLimitReached"
+        variant="info"
+      >
+        {{ exceedsVariableLimitText }}
+      </gl-alert>
+    </gl-card>
     <div v-if="!isInheritedGroupVars">
-      <div v-if="!showPagination" class="ci-variable-actions gl-display-flex gl-mt-5">
-        <gl-button
-          v-gl-modal-directive="$options.modalId"
-          class="gl-mr-3"
-          data-qa-selector="add_ci_variable_button"
-          variant="confirm"
-          category="primary"
-          :aria-label="__('Add')"
-          :disabled="exceedsVariableLimit"
-          @click="setSelectedVariable()"
-          >{{ __('Add variable') }}</gl-button
-        >
-        <gl-button v-if="!isTableEmpty" @click="toggleHiddenState">{{
-          valuesButtonText
-        }}</gl-button>
-      </div>
-      <div v-else class="gl-display-flex gl-justify-content-center gl-mt-6">
+      <div v-if="showPagination" class="gl-display-flex gl-justify-content-center gl-mt-5">
         <gl-keyset-pagination
           v-bind="pageInfo"
           :prev-text="__('Previous')"
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index 5c53fc04640..87274e9c8ea 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -230,20 +230,12 @@ export default function setupVueRepositoryList() {
 
   const treeHistoryLinkEl = document.getElementById('js-tree-history-link');
   const { historyLink } = treeHistoryLinkEl.dataset;
-  let { isProjectOverview } = treeHistoryLinkEl.dataset;
-
-  const isProjectOverviewAfterEach = router.afterEach(() => {
-    isProjectOverview = false;
-    isProjectOverviewAfterEach();
-  });
 
   // eslint-disable-next-line no-new
   new Vue({
     el: treeHistoryLinkEl,
     router,
     render(h) {
-      if (parseBoolean(isProjectOverview) && !this.$route.params.path) return null;
-
       return h(
         GlButton,
         {
diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss
index a1d7761bd88..3fcaab671f3 100644
--- a/app/assets/stylesheets/framework/new_card.scss
+++ b/app/assets/stylesheets/framework/new_card.scss
@@ -97,7 +97,8 @@
   // Table adjustments
   @mixin new-card-table-adjustments {
     tbody > tr {
-      &:first-of-type > td[data-label] {
+      &:first-of-type > td[data-label],
+      &:first-of-type > td:first-of-type:last-of-type {
         @include gl-border-t-0;
       }
 
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index ad792a6ee50..c6f2b730d9b 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -50,7 +50,6 @@
   }
 }
 
-.ci-variable-table,
 .deploy-freeze-table,
 .ci-secure-files-table {
   table {
diff --git a/app/mailers/emails/merge_requests.rb b/app/mailers/emails/merge_requests.rb
index 6678bb563ed..67a445c14ab 100644
--- a/app/mailers/emails/merge_requests.rb
+++ b/app/mailers/emails/merge_requests.rb
@@ -186,5 +186,3 @@ module Emails
     end
   end
 end
-
-Emails::MergeRequests.prepend_mod_with('Emails::MergeRequests')
diff --git a/app/views/admin/application_settings/ci_cd.html.haml b/app/views/admin/application_settings/ci_cd.html.haml
index a9a16f72ebe..9b36a983f26 100644
--- a/app/views/admin/application_settings/ci_cd.html.haml
+++ b/app/views/admin/application_settings/ci_cd.html.haml
@@ -8,7 +8,7 @@
     = render 'admin/application_settings/ci/header', expanded: expanded_by_default?
   .settings-content
     - if ci_variable_protected_by_default?
-      %p.settings-message.text-center
+      %p.settings-message.text-center.gl-mb-0
         - link_start = '<a href="%{url}">'.html_safe % { url: help_page_path('ci/variables/index', anchor: 'protect-a-cicd-variable') }
         = s_('Environment variables on this GitLab instance are configured to be %{link_start}protected%{link_end} by default.').html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
     #js-instance-variables{ data: { endpoint: admin_ci_variables_path, maskable_regex: ci_variable_maskable_regex, protected_by_default: ci_variable_protected_by_default?.to_s} }
diff --git a/app/views/ci/variables/_index.html.haml b/app/views/ci/variables/_index.html.haml
index 5eed4e92386..7e5e8d8f961 100644
--- a/app/views/ci/variables/_index.html.haml
+++ b/app/views/ci/variables/_index.html.haml
@@ -32,7 +32,5 @@
   environment_scope_link: help_page_path('ci/environments/index', anchor: 'limit-the-environment-scope-of-a-cicd-variable') } }
 
 - if !@group && @project.group
-  .settings-header.border-top.gl-mt-6
-    = render 'ci/group_variables/header'
-  .settings-content.pr-0
-    = render 'ci/group_variables/index'
+  = render 'ci/group_variables/header'
+  = render 'ci/group_variables/index'
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index ba6cf689bdc..cb341ede9de 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -15,7 +15,7 @@
       #js-code-owners{ data: { branch: @ref, can_view_branch_rules: can_view_branch_rules?, branch_rules_path: branch_rules_path } }
 
   .nav-block.gl-display-flex.gl-xs-flex-direction-column.gl-align-items-stretch
-    = render 'projects/tree/tree_header', tree: @tree, is_project_overview: is_project_overview
+    = render 'projects/tree/tree_header', tree: @tree
 
   - if project.forked?
     #js-fork-info{ data: vue_fork_divergence_data(project, ref) }
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index c834a0bc818..a4ed19c2fc9 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -1,5 +1,3 @@
-- is_project_overview = local_assigns.fetch(:is_project_overview, false)
-
 .tree-ref-container.gl-display-flex.gl-flex-wrap.gl-gap-2.mb-2.mb-md-0
   .tree-ref-holder.gl-max-w-26{ data: { qa_selector: 'ref_dropdown_container' } }
     #js-tree-ref-switcher{ data: { project_id: @project.id, ref_type: @ref_type.to_s, project_root_path: project_path(@project) } }
@@ -10,7 +8,7 @@
 .tree-controls
   .d-block.d-sm-flex.flex-wrap.align-items-start.gl-children-ml-sm-3.gl-first-child-ml-sm-0<
     = render_if_exists 'projects/tree/lock_link'
-    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref), is_project_overview: is_project_overview.to_s } }
+    #js-tree-history-link{ data: { history_link: project_commits_path(@project, @ref) } }
 
     = render 'projects/find_file_link'
     = render 'shared/web_ide_button', blob: nil