Lock a newly created item card in boards

Review feedback

app/assets/javascripts/boards/components/board_card_inner.vue

@@ -185,7 +185,7 @@ export default {
         <a
           :href="item.path || item.webUrl || ''"
           :title="item.title"
-          :class="{ 'gl-text-gray-400': item.isLoading }"
+          :class="{ 'gl-text-gray-400!': item.isLoading }"
           @mousemove.stop
           >{{ item.title }}</a
         >

app/assets/javascripts/boards/components/board_list.vue

@@ -86,7 +86,9 @@ export default {
         : this.$options.i18n.showingAllIssues;
     },
     treeRootWrapper() {
-      return this.canAdminList ? Draggable : 'ul';
+      return this.canAdminList && !this.listsFlags[this.list.id]?.addItemToListInProgress
+        ? Draggable
+        : 'ul';
     },
     treeRootOptions() {
       const options = {

app/assets/javascripts/boards/components/board_new_issue.vue

@@ -102,7 +102,7 @@ export default {
             ref="submitButton"
             :disabled="disabled"
             class="float-left js-no-auto-disable"
-            variant="success"
+            variant="confirm"
             category="primary"
             type="submit"
           >

app/assets/javascripts/boards/stores/actions.js

@@ -489,8 +489,13 @@ export default {
     });
   },
 
-  addListItem: ({ commit }, { list, item, position }) => {
-    commit(types.ADD_BOARD_ITEM_TO_LIST, { listId: list.id, itemId: item.id, atIndex: position });
+  addListItem: ({ commit }, { list, item, position, inProgress = false }) => {
+    commit(types.ADD_BOARD_ITEM_TO_LIST, {
+      listId: list.id,
+      itemId: item.id,
+      atIndex: position,
+      inProgress,
+    });
     commit(types.UPDATE_BOARD_ITEM, item);
   },
 
@@ -510,7 +515,7 @@ export default {
     }
 
     const placeholderIssue = formatIssue({ ...issueInput, id: placeholderId, isLoading: true });
-    dispatch('addListItem', { list, item: placeholderIssue, position: 0 });
+    dispatch('addListItem', { list, item: placeholderIssue, position: 0, inProgress: true });
 
     gqlClient
       .mutate({

app/assets/javascripts/boards/stores/mutations.js

@@ -166,8 +166,9 @@ export default {
 
   [mutationTypes.ADD_BOARD_ITEM_TO_LIST]: (
     state,
-    { itemId, listId, moveBeforeId, moveAfterId, atIndex },
+    { itemId, listId, moveBeforeId, moveAfterId, atIndex, inProgress = false },
   ) => {
+    Vue.set(state.listsFlags, listId, { ...state.listsFlags, addItemToListInProgress: inProgress });
     addItemToList({ state, listId, itemId, moveBeforeId, moveAfterId, atIndex });
   },
 

spec/frontend/boards/stores/actions_spec.js

@@ -1114,6 +1114,7 @@ describe('addListItem', () => {
           listId: mockLists[0].id,
           itemId: mockIssue.id,
           atIndex: 0,
+          inProgress: false,
         },
       },
       { type: types.UPDATE_BOARD_ITEM, payload: mockIssue },
@@ -1246,6 +1247,7 @@ describe('addListNewIssue', () => {
               list: fakeList,
               item: formatIssue({ ...mockIssue, id: 'tmp', isLoading: true }),
               position: 0,
+              inProgress: true,
             },
           },
           { type: 'removeListItem', payload: { listId: fakeList.id, itemId: 'tmp' } },
@@ -1288,6 +1290,7 @@ describe('addListNewIssue', () => {
               list: fakeList,
               item: formatIssue({ ...mockIssue, id: 'tmp', isLoading: true }),
               position: 0,
+              inProgress: true,
             },
           },
           { type: 'removeListItem', payload: { listId: fakeList.id, itemId: 'tmp' } },