1 files changed, 40 insertions, 11 deletions
diff --git a/app/assets/javascripts/boards/components/board_form.vue b/app/assets/javascripts/boards/components/board_form.vue
index 78da4137d69..aa75a0d68f5 100644
--- a/app/assets/javascripts/boards/components/board_form.vue
+++ b/app/assets/javascripts/boards/components/board_form.vue
@@ -1,7 +1,7 @@
 <script>
-import { GlModal } from '@gitlab/ui';
-import { mapGetters } from 'vuex';
-import { deprecatedCreateFlash as Flash } from '~/flash';
+import { GlModal, GlAlert } from '@gitlab/ui';
+import { mapGetters, mapActions, mapState } from 'vuex';
+import ListLabel from '~/boards/models/label';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { visitUrl } from '~/lib/utils/url_utility';
@@ -44,6 +44,7 @@ export default {
     BoardScope: () => import('ee_component/boards/components/board_scope.vue'),
     GlModal,
     BoardConfigurationOptions,
+    GlAlert,
   },
   inject: {
     fullPath: {
@@ -107,6 +108,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(['error']),
     ...mapGetters(['isIssueBoard', 'isGroupBoard', 'isProjectBoard']),
     isNewForm() {
       return this.currentPage === formType.new;
@@ -222,9 +224,7 @@ export default {
     }
   },
   methods: {
-    setIteration(iterationId) {
-      this.board.iteration_id = iterationId;
-    },
+    ...mapActions(['setError', 'unsetError']),
     boardCreateResponse(data) {
       return data.createBoard.board.webPath;
     },
@@ -235,6 +235,9 @@ export default {
         : '';
       return `${path}${param}`;
     },
+    cancel() {
+      this.$emit('cancel');
+    },
     async createOrUpdateBoard() {
       const response = await this.$apollo.mutate({
         mutation: this.currentMutation,
@@ -263,7 +266,7 @@ export default {
           await this.deleteBoard();
           visitUrl(this.rootPath);
         } catch {
-          Flash(this.$options.i18n.deleteErrorMessage);
+          this.setError({ message: this.$options.i18n.deleteErrorMessage });
         } finally {
           this.isLoading = false;
         }
@@ -272,15 +275,12 @@ export default {
           const url = await this.createOrUpdateBoard();
           visitUrl(url);
         } catch {
-          Flash(this.$options.i18n.saveErrorMessage);
+          this.setError({ message: this.$options.i18n.saveErrorMessage });
         } finally {
           this.isLoading = false;
         }
       }
     },
-    cancel() {
-      this.$emit('cancel');
-    },
     resetFormState() {
       if (this.isNewForm) {
         // Clear the form when we open the "New board" modal
@@ -289,6 +289,25 @@ export default {
         this.board = { ...boardDefaults, ...this.currentBoard };
       }
     },
+    setIteration(iterationId) {
+      this.board.iteration_id = iterationId;
+    },
+    setBoardLabels(labels) {
+      labels.forEach((label) => {
+        if (label.set && !this.board.labels.find((l) => l.id === label.id)) {
+          this.board.labels.push(
+            new ListLabel({
+              id: label.id,
+              title: label.title,
+              color: label.color,
+              textColor: label.text_color,
+            }),
+          );
+        } else if (!label.set) {
+          this.board.labels = this.board.labels.filter((selected) => selected.id !== label.id);
+        }
+      });
+    },
   },
 };
 </script>
@@ -308,6 +327,15 @@ export default {
     @close="cancel"
     @hide.prevent
   >
+    <gl-alert
+      v-if="error"
+      class="gl-mb-3"
+      variant="danger"
+      :dismissible="true"
+      @dismiss="unsetError"
+    >
+      {{ error }}
+    </gl-alert>
     <p v-if="isDeleteForm" data-testid="delete-confirmation-message">
       {{ $options.i18n.deleteConfirmationMessage }}
     </p>
@@ -346,6 +374,7 @@ export default {
         :group-id="groupId"
         :weights="weights"
         @set-iteration="setIteration"
+        @set-board-labels="setBoardLabels"
       />
     </form>
   </gl-modal>