Add latest changes from gitlab-org/gitlab@master

5 files changed, 117 insertions, 78 deletions

diff --git a/app/assets/javascripts/comment_templates/components/form.vue b/app/assets/javascripts/comment_templates/components/form.vue
index 334c67ca339..0dadec7a5c5 100644
--- a/app/assets/javascripts/comment_templates/components/form.vue
+++ b/app/assets/javascripts/comment_templates/components/form.vue
@@ -5,6 +5,7 @@ import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { logError } from '~/lib/logger';
 import { __ } from '~/locale';
+import { InternalEvents } from '~/tracking';
 import createSavedReplyMutation from '../queries/create_saved_reply.mutation.graphql';
 import updateSavedReplyMutation from '../queries/update_saved_reply.mutation.graphql';
 
@@ -17,6 +18,7 @@ export default {
     GlAlert,
     MarkdownField,
   },
+  mixins: [InternalEvents.mixin()],
   props: {
     id: {
       type: String,
@@ -91,6 +93,7 @@ export default {
               this.$emit('saved');
               this.updateCommentTemplate = { name: '', content: '' };
               this.showValidation = false;
+              this.track_event('i_code_review_saved_replies_create');
             }
           },
         })
diff --git a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
index b13b0ede9f0..e1c47fde81d 100644
--- a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
+++ b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_modal.vue
@@ -24,10 +24,10 @@ export default {
     static: true,
     lazy: true,
   },
-  translations: {
+  i18n: {
     cronPlaceholder: '* * * * *',
     cronSyntaxInstructions: __(
-      'Define a custom deploy freeze pattern with %{cronSyntaxStart}cron syntax%{cronSyntaxEnd}',
+      'Define a custom deploy freeze pattern with %{cronSyntaxStart}cron syntax%{cronSyntaxEnd}.',
     ),
     addTitle: __('Add deploy freeze'),
     editTitle: __('Edit deploy freeze'),
@@ -81,9 +81,7 @@ export default {
       return Boolean(this.selectedId);
     },
     modalTitle() {
-      return this.isEditing
-        ? this.$options.translations.editTitle
-        : this.$options.translations.addTitle;
+      return this.isEditing ? this.$options.i18n.editTitle : this.$options.i18n.addTitle;
     },
   },
   methods: {
@@ -104,6 +102,13 @@ export default {
         this.addFreezePeriod();
       }
     },
+    focusFirstInput() {
+      if (this.$refs.freezeStartCron) {
+        setTimeout(() => {
+          this.$refs.freezeStartCron?.$el?.focus();
+        }, 250);
+      }
+    },
   },
 };
 </script>
@@ -115,9 +120,10 @@ export default {
     :action-primary="addDeployFreezeButton"
     @primary="submit"
     @canceled="resetModalHandler"
+    @change="focusFirstInput"
   >
     <p>
-      <gl-sprintf :message="$options.translations.cronSyntaxInstructions">
+      <gl-sprintf :message="$options.i18n.cronSyntaxInstructions">
         <template #cronSyntax="{ content }">
           <gl-link href="https://crontab.guru/" target="_blank">{{ content }}</gl-link>
         </template>
@@ -132,11 +138,13 @@ export default {
     >
       <gl-form-input
         id="deploy-freeze-start"
+        ref="freezeStartCron"
         v-model="freezeStartCron"
         class="gl-font-monospace!"
         data-qa-selector="deploy_freeze_start_field"
-        :placeholder="$options.translations.cronPlaceholder"
+        :placeholder="$options.i18n.cronPlaceholder"
         :state="freezeStartCronState"
+        autofocus
         trim
       />
     </gl-form-group>
@@ -152,7 +160,7 @@ export default {
         v-model="freezeEndCron"
         class="gl-font-monospace!"
         data-qa-selector="deploy_freeze_end_field"
-        :placeholder="$options.translations.cronPlaceholder"
+        :placeholder="$options.i18n.cronPlaceholder"
         :state="freezeEndCronState"
         trim
       />
diff --git a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue
index 77767456f76..24ea8f01c20 100644
--- a/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue
+++ b/app/assets/javascripts/deploy_freeze/components/deploy_freeze_table.vue
@@ -1,39 +1,48 @@
 <script>
-import { GlTable, GlButton, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import {
+  GlCard,
+  GlTable,
+  GlButton,
+  GlIcon,
+  GlModal,
+  GlModalDirective,
+  GlSprintf,
+} from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 export default {
   fields: [
     {
       key: 'freezeStart',
       label: s__('DeployFreeze|Freeze start'),
+      tdClass: 'gl-vertical-align-middle!',
     },
     {
       key: 'freezeEnd',
       label: s__('DeployFreeze|Freeze end'),
+      tdClass: 'gl-vertical-align-middle!',
     },
     {
       key: 'cronTimezone',
       label: s__('DeployFreeze|Time zone'),
+      tdClass: 'gl-vertical-align-middle!',
     },
     {
-      key: 'edit',
-      label: s__('DeployFreeze|Edit'),
-    },
-    {
-      key: 'delete',
-      label: s__('DeployFreeze|Delete'),
+      key: 'actions',
+      label: __('Actions'),
+      thClass: 'gl-text-right',
     },
   ],
-  translations: {
+  i18n: {
+    title: s__('DeployFreeze|Deploy freezes'),
     addDeployFreeze: s__('DeployFreeze|Add deploy freeze'),
     deleteDeployFreezeTitle: s__('DeployFreeze|Delete deploy freeze?'),
     deleteDeployFreezeMessage: s__(
       'DeployFreeze|Deploy freeze from %{start} to %{end} in %{timezone} will be removed. Are you sure?',
     ),
     emptyStateText: s__(
-      'DeployFreeze|No deploy freezes exist for this project. To add one, select %{strongStart}Add deploy freeze%{strongEnd}',
+      'DeployFreeze|No deploy freezes exist for this project. To add one, select %{strongStart}Add deploy freeze%{strongEnd} above.',
     ),
   },
   modal: {
@@ -42,10 +51,16 @@ export default {
       text: s__('DeployFreeze|Delete freeze period'),
       attributes: { variant: 'danger', 'data-testid': 'modal-confirm' },
     },
+    actionSecondary: {
+      text: __('Cancel'),
+      attributes: { variant: 'default' },
+    },
   },
   components: {
+    GlCard,
     GlTable,
     GlButton,
+    GlIcon,
     GlModal,
     GlSprintf,
   },
@@ -80,65 +95,78 @@ export default {
 </script>
 
 <template>
-  <div class="deploy-freeze-table">
+  <gl-card
+    class="gl-new-card deploy-freeze-table"
+    header-class="gl-new-card-header"
+    body-class="gl-new-card-body gl-px-0"
+  >
+    <template #header>
+      <div class="gl-new-card-title-wrapper">
+        <h3 class="gl-new-card-title">{{ $options.i18n.title }}</h3>
+        <span class="gl-new-card-count">
+          <gl-icon name="deployments" class="gl-mr-2" />
+          {{ freezePeriods.length }}
+        </span>
+      </div>
+      <div class="gl-new-card-actions">
+        <gl-button v-gl-modal.deploy-freeze-modal size="small" data-testid="add-deploy-freeze">{{
+          $options.i18n.addDeployFreeze
+        }}</gl-button>
+      </div>
+    </template>
+
     <gl-table
       data-testid="deploy-freeze-table"
       :items="freezePeriods"
       :fields="$options.fields"
       show-empty
-      stacked="lg"
+      stacked="md"
     >
       <template #cell(cronTimezone)="{ item }">
         {{ item.cronTimezone.formattedTimezone }}
       </template>
-      <template #cell(edit)="{ item }">
-        <gl-button
-          v-gl-modal.deploy-freeze-modal
-          icon="pencil"
-          data-testid="edit-deploy-freeze"
-          :aria-label="__('Edit deploy freeze')"
-          @click="setFreezePeriod(item)"
-        />
-      </template>
-      <template #cell(delete)="{ item }">
-        <gl-button
-          v-gl-modal="$options.modal.id"
-          category="secondary"
-          variant="danger"
-          icon="remove"
-          :aria-label="$options.modal.actionPrimary.text"
-          :loading="item.isDeleting"
-          data-testid="delete-deploy-freeze"
-          @click="handleDeleteFreezePeriod(item)"
-        />
+      <template #cell(actions)="{ item }">
+        <div class="gl-display-flex gl-justify-content-end gl-mt-n2 gl-mb-n2">
+          <gl-button
+            v-gl-modal.deploy-freeze-modal
+            icon="pencil"
+            data-testid="edit-deploy-freeze"
+            :aria-label="__('Edit deploy freeze')"
+            class="gl-mr-3"
+            @click="setFreezePeriod(item)"
+          />
+          <gl-button
+            v-gl-modal="$options.modal.id"
+            category="secondary"
+            variant="danger"
+            icon="remove"
+            :aria-label="$options.modal.actionPrimary.text"
+            :loading="item.isDeleting"
+            data-testid="delete-deploy-freeze"
+            @click="handleDeleteFreezePeriod(item)"
+          />
+        </div>
       </template>
       <template #empty>
-        <p data-testid="empty-freeze-periods" class="gl-text-center text-plain">
-          <gl-sprintf :message="$options.translations.emptyStateText">
+        <p data-testid="empty-freeze-periods" class="gl-text-secondary gl-text-center gl-mb-0">
+          <gl-sprintf :message="$options.i18n.emptyStateText">
             <template #strong="{ content }">
-              <strong>{{ content }}</strong>
+              {{ content }}
             </template>
           </gl-sprintf>
         </p>
       </template>
     </gl-table>
-    <gl-button
-      v-gl-modal.deploy-freeze-modal
-      data-testid="add-deploy-freeze"
-      category="primary"
-      variant="confirm"
-    >
-      {{ $options.translations.addDeployFreeze }}
-    </gl-button>
     <gl-modal
-      :title="$options.translations.deleteDeployFreezeTitle"
+      :title="$options.i18n.deleteDeployFreezeTitle"
       :modal-id="$options.modal.id"
       :action-primary="$options.modal.actionPrimary"
+      :action-secondary="$options.modal.actionSecondary"
       static
       @primary="confirmDeleteFreezePeriod"
     >
       <template v-if="freezePeriodToDelete">
-        <gl-sprintf :message="$options.translations.deleteDeployFreezeMessage">
+        <gl-sprintf :message="$options.i18n.deleteDeployFreezeMessage">
           <template #start>
             <code>{{ freezePeriodToDelete.freezeStart }}</code>
           </template>
@@ -149,5 +177,5 @@ export default {
         </gl-sprintf>
       </template>
     </gl-modal>
-  </div>
+  </gl-card>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue
index bb2ca838279..b58e2249829 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list.vue
@@ -6,6 +6,7 @@ import { fetchPolicies } from '~/lib/graphql';
 import { joinPaths } from '~/lib/utils/url_utility';
 import Tracking from '~/tracking';
 import RegistryList from '~/packages_and_registries/shared/components/registry_list.vue';
+import PersistedPagination from '~/packages_and_registries/shared/components/persisted_pagination.vue';
 import PersistedSearch from '~/packages_and_registries/shared/components/persisted_search.vue';
 import TagsLoader from '~/packages_and_registries/shared/components/tags_loader.vue';
 import { FILTERED_SEARCH_TERM } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -27,6 +28,7 @@ import {
 import getContainerRepositoryTagsQuery from '../../graphql/queries/get_container_repository_tags.query.graphql';
 import deleteContainerRepositoryTagsMutation from '../../graphql/mutations/delete_container_repository_tags.mutation.graphql';
 import DeleteModal from '../delete_modal.vue';
+import { getPageParams, getNextPageParams, getPreviousPageParams } from '../../utils';
 import TagsListRow from './tags_list_row.vue';
 
 export default {
@@ -37,6 +39,7 @@ export default {
     TagsListRow,
     TagsLoader,
     RegistryList,
+    PersistedPagination,
     PersistedSearch,
   },
   mixins: [Tracking.mixin()],
@@ -62,7 +65,7 @@ export default {
       required: false,
     },
   },
-  searchConfig: { NAME_SORT_FIELD },
+  sortableFields: [NAME_SORT_FIELD],
   i18n: {
     REMOVE_TAGS_BUTTON_TITLE,
     TAGS_LIST_TITLE,
@@ -87,7 +90,7 @@ export default {
       containerRepository: {},
       filters: {},
       itemsToBeDeleted: [],
-      mutationLoading: false,
+      isDeleteInProgress: false,
       sort: null,
       pageParams: {},
     };
@@ -121,7 +124,7 @@ export default {
       return (
         this.isImageLoading ||
         this.$apollo.queries.containerRepository.loading ||
-        this.mutationLoading ||
+        this.isDeleteInProgress ||
         !this.sort
       );
     },
@@ -153,7 +156,7 @@ export default {
     async handleDeleteTag() {
       this.track('confirm_delete');
       const { itemsToBeDeleted } = this;
-      this.mutationLoading = true;
+      this.isDeleteInProgress = true;
       try {
         const { data } = await this.$apollo.mutate({
           mutation: deleteContainerRepositoryTagsMutation,
@@ -180,24 +183,17 @@ export default {
       } catch (e) {
         this.$emit('delete', itemsToBeDeleted.length === 1 ? ALERT_DANGER_TAG : ALERT_DANGER_TAGS);
       } finally {
-        this.mutationLoading = false;
+        this.isDeleteInProgress = false;
       }
     },
     fetchNextPage() {
-      this.pageParams = {
-        after: this.tagsPageInfo?.endCursor,
-        first: GRAPHQL_PAGE_SIZE,
-      };
+      this.pageParams = getNextPageParams(this.tagsPageInfo?.endCursor);
     },
     fetchPreviousPage() {
-      this.pageParams = {
-        first: null,
-        before: this.tagsPageInfo?.startCursor,
-        last: GRAPHQL_PAGE_SIZE,
-      };
+      this.pageParams = getPreviousPageParams(this.tagsPageInfo?.startCursor);
     },
-    handleSearchUpdate({ sort, filters }) {
-      this.pageParams = {};
+    handleSearchUpdate({ sort, filters, pageInfo }) {
+      this.pageParams = getPageParams(pageInfo);
       this.sort = sort;
 
       const parsed = {
@@ -224,10 +220,8 @@ export default {
   <div>
     <persisted-search
       class="gl-mb-5"
-      :sortable-fields="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [
-        $options.searchConfig.NAME_SORT_FIELD,
-      ] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
-      :default-order="$options.searchConfig.NAME_SORT_FIELD.orderBy"
+      :sortable-fields="$options.sortableFields"
+      :default-order="$options.sortableFields[0].orderBy"
       default-sort="asc"
       @update="handleSearchUpdate"
     />
@@ -244,11 +238,8 @@ export default {
         <registry-list
           :hidden-delete="hideBulkDelete"
           :title="listTitle"
-          :pagination="tagsPageInfo"
           :items="tags"
           id-property="name"
-          @prev-page="fetchPreviousPage"
-          @next-page="fetchNextPage"
           @delete="deleteTags"
         >
           <template #default="{ selectItem, isSelected, item, first }">
@@ -272,5 +263,14 @@ export default {
         />
       </template>
     </template>
+
+    <div v-if="!isDeleteInProgress" class="gl-display-flex gl-justify-content-center">
+      <persisted-pagination
+        class="gl-mt-3"
+        :pagination="tagsPageInfo"
+        @prev="fetchPreviousPage"
+        @next="fetchNextPage"
+      />
+    </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
index d44bdd1bba2..df87ee79111 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/pages/list.vue
@@ -339,7 +339,7 @@ export default {
         </template>
       </template>
 
-      <div class="gl-display-flex gl-justify-content-center">
+      <div v-if="!mutationLoading" class="gl-display-flex gl-justify-content-center">
         <persisted-pagination
           class="gl-mt-3"
           :pagination="pageInfo"