Add latest changes from gitlab-org/gitlab@master

3 files changed, 92 insertions, 17 deletions

diff --git a/app/assets/javascripts/admin/broadcast_messages/components/base.vue b/app/assets/javascripts/admin/broadcast_messages/components/base.vue
index 667ab4c34f5..55bffe0a340 100644
--- a/app/assets/javascripts/admin/broadcast_messages/components/base.vue
+++ b/app/assets/javascripts/admin/broadcast_messages/components/base.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlPagination } from '@gitlab/ui';
+import { GlButton, GlCard, GlIcon, GlPagination } from '@gitlab/ui';
 import { redirectTo } from '~/lib/utils/url_utility'; // eslint-disable-line import/no-deprecated
 import { buildUrlWithCurrentLocation } from '~/lib/utils/common_utils';
 import { createAlert, VARIANT_DANGER } from '~/alert';
@@ -15,6 +15,9 @@ export default {
   name: 'BroadcastMessagesBase',
   NEW_BROADCAST_MESSAGE,
   components: {
+    GlButton,
+    GlCard,
+    GlIcon,
     GlPagination,
     MessageForm,
     MessagesTable,
@@ -36,6 +39,10 @@ export default {
   },
 
   i18n: {
+    title: s__('BroadcastMessages|Messages'),
+    addTitle: s__('BroadcastMessages|Add new message'),
+    emptyMessage: s__('BroadcastMessages|No broadcast messages defined yet.'),
+    addButton: s__('BroadcastMessages|Add new message'),
     deleteError: s__(
       'BroadcastMessages|There was an issue deleting this message, please try again later.',
     ),
@@ -49,6 +56,7 @@ export default {
         ...message,
         disable_delete: false,
       })),
+      showAddForm: false,
     };
   },
 
@@ -75,7 +83,12 @@ export default {
     buildPageUrl(newPage) {
       return buildUrlWithCurrentLocation(`?page=${newPage}`);
     },
-
+    toggleAddForm() {
+      this.showAddForm = !this.showAddForm;
+    },
+    closeAddForm() {
+      this.showAddForm = false;
+    },
     async deleteMessage(messageId) {
       const index = this.visibleMessages.findIndex((m) => m.id === messageId);
       if (!index === -1) return;
@@ -101,17 +114,48 @@ export default {
 
 <template>
   <div>
-    <message-form :broadcast-message="$options.NEW_BROADCAST_MESSAGE" />
-    <messages-table
-      v-if="hasVisibleMessages"
-      :messages="visibleMessages"
-      @delete-message="deleteMessage"
-    />
+    <gl-card
+      class="gl-new-card"
+      header-class="gl-new-card-header"
+      body-class="gl-new-card-body gl-overflow-hidden gl-px-0"
+    >
+      <template #header>
+        <div class="gl-new-card-title-wrapper">
+          <h3 class="gl-new-card-title">{{ $options.i18n.title }}</h3>
+          <div class="gl-new-card-count">
+            <gl-icon name="messages" class="gl-mr-2" />
+            {{ messagesCount }}
+          </div>
+        </div>
+        <gl-button v-if="!showAddForm" size="small" @click="toggleAddForm">{{
+          $options.i18n.addButton
+        }}</gl-button>
+      </template>
+
+      <div v-if="showAddForm" class="gl-new-card-add-form gl-m-3">
+        <h4 class="gl-mt-0">{{ $options.i18n.addTitle }}</h4>
+        <message-form
+          :broadcast-message="$options.NEW_BROADCAST_MESSAGE"
+          @close-add-form="closeAddForm"
+        />
+      </div>
+
+      <messages-table
+        v-if="hasVisibleMessages"
+        :messages="visibleMessages"
+        @delete-message="deleteMessage"
+      />
+      <div v-else-if="!showAddForm" class="gl-new-card-empty gl-px-5 gl-py-4">
+        {{ $options.i18n.emptyMessage }}
+      </div>
+    </gl-card>
+
     <gl-pagination
       v-model="currentPage"
       :total-items="totalMessages"
       :link-gen="buildPageUrl"
       align="center"
+      class="gl-mt-5"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue b/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue
index 42a959e1b89..b06b6e1437a 100644
--- a/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue
+++ b/app/assets/javascripts/admin/broadcast_messages/components/message_form.vue
@@ -172,6 +172,9 @@ export default {
     this.targetSelected = this.initialTarget();
   },
   methods: {
+    closeForm() {
+      this.$emit('close-add-form');
+    },
     async onSubmit() {
       this.loading = true;
 
@@ -182,7 +185,6 @@ export default {
         this.loading = false;
       }
     },
-
     async submitForm() {
       const requestMethod = this.isAddForm ? 'post' : 'patch';
 
@@ -197,7 +199,6 @@ export default {
       }
       return true;
     },
-
     async renderPreview() {
       try {
         const res = await axios.post(this.previewPath, this.formPayload, FORM_HEADERS);
@@ -206,7 +207,6 @@ export default {
         this.renderedMessage = '';
       }
     },
-
     initialTarget() {
       if (this.targetAccessLevels.length > 0) {
         return TARGET_ROLES;
@@ -238,6 +238,7 @@ export default {
         id="message-textarea"
         v-model="message"
         size="sm"
+        autofocus
         :debounce="$options.DEFAULT_DEBOUNCE_AND_THROTTLE_MS"
         :placeholder="$options.i18n.messagePlaceholder"
         data-testid="message-input"
@@ -329,7 +330,10 @@ export default {
       >
         {{ isAddForm ? $options.i18n.add : $options.i18n.update }}
       </gl-button>
-      <gl-button v-if="!isAddForm" :href="messagesPath" data-testid="cancel-button">
+      <gl-button v-if="isAddForm" @click="closeForm">
+        {{ $options.i18n.cancel }}
+      </gl-button>
+      <gl-button v-else :href="messagesPath" data-testid="cancel-button">
         {{ $options.i18n.cancel }}
       </gl-button>
     </div>
diff --git a/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue b/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
index c95d4c96ea9..924b6e7451b 100644
--- a/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
+++ b/app/assets/javascripts/admin/broadcast_messages/components/messages_table.vue
@@ -1,7 +1,7 @@
 <script>
-import { GlBroadcastMessage, GlButton, GlTableLite } from '@gitlab/ui';
+import { GlBroadcastMessage, GlButton, GlTableLite, GlModal, GlModalDirective } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
-import { __ } from '~/locale';
+import { __, s__ } from '~/locale';
 import { formatDate } from '~/lib/utils/datetime/date_format_utility';
 
 const DEFAULT_TD_CLASSES = 'gl-vertical-align-middle!';
@@ -12,13 +12,31 @@ export default {
     GlBroadcastMessage,
     GlButton,
     GlTableLite,
+    GlModal,
   },
   directives: {
     SafeHtml,
+    GlModal: GlModalDirective,
   },
   i18n: {
+    title: s__('BroadcastMessages|Delete broadcast message'),
     edit: __('Edit'),
     delete: __('Delete'),
+    modalMessage: s__('BroadcastMessages|Do you really want to delete this broadcast message?'),
+  },
+  modal: {
+    actionPrimary: {
+      text: s__('BroadcastMessages|Delete message'),
+      attributes: {
+        variant: 'danger',
+      },
+    },
+    actionSecondary: {
+      text: __('Cancel'),
+      attributes: {
+        variant: 'default',
+      },
+    },
   },
   props: {
     messages: {
@@ -81,6 +99,7 @@ export default {
     :items="messages"
     :fields="$options.fields"
     :tbody-tr-attr="{ 'data-testid': 'message-row' }"
+    class="gl-mt-n1 gl-mb-n2"
     stacked="md"
   >
     <template #cell(preview)="{ item: { message, theme, broadcast_type, dismissable } }">
@@ -104,17 +123,25 @@ export default {
         :href="edit_path"
         data-testid="edit-message"
       />
-
       <gl-button
+        v-gl-modal="`delete-message-${id}`"
         class="gl-ml-3"
         icon="remove"
-        variant="danger"
         :aria-label="$options.i18n.delete"
         rel="nofollow"
         :disabled="disable_delete"
         :data-testid="`delete-message-${id}`"
-        @click="$emit('delete-message', id)"
       />
+      <gl-modal
+        :title="$options.i18n.title"
+        :action-primary="$options.modal.actionPrimary"
+        :action-secondary="$options.modal.actionSecondary"
+        :modal-id="`delete-message-${id}`"
+        size="sm"
+        @primary="$emit('delete-message', id)"
+      >
+        {{ $options.i18n.modalMessage }}
+      </gl-modal>
     </template>
   </gl-table-lite>
 </template>