app/assets/javascripts/api.js

@@ -9,6 +9,7 @@ const Api = {
   groupsPath: '/api/:version/groups.json',
   groupPath: '/api/:version/groups/:id',
   groupMembersPath: '/api/:version/groups/:id/members',
+  groupMilestonesPath: '/api/:version/groups/:id/milestones',
   subgroupsPath: '/api/:version/groups/:id/subgroups',
   namespacesPath: '/api/:version/namespaces.json',
   groupPackagesPath: '/api/:version/groups/:id/packages',
@@ -110,6 +111,17 @@ const Api = {
     });
   },
 
+  groupMilestones(id, options) {
+    const url = Api.buildUrl(this.groupMilestonesPath).replace(':id', encodeURIComponent(id));
+
+    return axios.get(url, {
+      params: {
+        per_page: DEFAULT_PER_PAGE,
+        ...options,
+      },
+    });
+  },
+
   // Return groups list. Filtered by query
   groups(query, options, callback = () => {}) {
     const url = Api.buildUrl(Api.groupsPath);

app/assets/javascripts/badges/components/badge_form.vue

@@ -184,7 +184,7 @@ export default {
         @input="debouncedPreview"
       />
       <div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
-      <span class="form-text text-muted"> {{ badgeLinkUrlExample }} </span>
+      <span class="form-text text-muted">{{ badgeLinkUrlExample }}</span>
     </div>
 
     <div class="form-group">
@@ -199,7 +199,7 @@ export default {
         @input="debouncedPreview"
       />
       <div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
-      <span class="form-text text-muted"> {{ badgeImageUrlExample }} </span>
+      <span class="form-text text-muted">{{ badgeImageUrlExample }}</span>
     </div>
 
     <div class="form-group">
@@ -210,22 +210,26 @@ export default {
         :image-url="renderedImageUrl"
         :link-url="renderedLinkUrl"
       />
-      <p v-show="isRendering"><gl-loading-icon :inline="true" /></p>
+      <p v-show="isRendering">
+        <gl-loading-icon :inline="true" />
+      </p>
       <p v-show="!renderedBadge && !isRendering" class="disabled-content">
         {{ s__('Badges|No image to preview') }}
       </p>
     </div>
 
-    <div v-if="isEditing" class="row-content-block">
+    <div v-if="isEditing" class="row-content-block gl-display-flex gl-justify-content-end">
+      <button class="btn btn-cancel gl-mr-4" type="button" @click="onCancel">
+        {{ __('Cancel') }}
+      </button>
       <loading-button
         :loading="isSaving"
         :label="s__('Badges|Save changes')"
         type="submit"
         container-class="btn btn-success"
       />
-      <button class="btn btn-cancel" type="button" @click="onCancel">{{ __('Cancel') }}</button>
     </div>
-    <div v-else class="form-group">
+    <div v-else class="gl-display-flex gl-justify-content-end form-group">
       <loading-button
         :loading="isSaving"
         :label="s__('Badges|Add badge')"

app/assets/javascripts/behaviors/quick_submit.js

@@ -72,7 +72,7 @@ $(document).on(
 
     $this.tooltip({
       container: 'body',
-      html: 'true',
+      html: true,
       placement: 'top',
       title,
       trigger: 'manual',

app/assets/javascripts/blob/components/blob_edit_content.vue

@@ -20,6 +20,13 @@ export default {
       required: false,
       default: '',
     },
+    // This is used to help uniquely create a monaco model
+    // even if two blob's share a file path.
+    fileGlobalId: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -36,7 +43,11 @@ export default {
       el: this.$refs.editor,
       blobPath: this.fileName,
       blobContent: this.value,
+      blobGlobalId: this.fileGlobalId,
     });
+
+    this.editor.onChangeContent(debounce(this.onFileChange.bind(this), 250));
+
     window.requestAnimationFrame(() => {
       if (!performance.getEntriesByName(SNIPPET_MARK_BLOBS_CONTENT).length) {
         performance.mark(SNIPPET_MARK_BLOBS_CONTENT);
@@ -45,16 +56,19 @@ export default {
       }
     });
   },
+  beforeDestroy() {
+    this.editor.dispose();
+  },
   methods: {
-    triggerFileChange: debounce(function debouncedFileChange() {
+    onFileChange() {
       this.$emit('input', this.editor.getValue());
-    }, 250),
+    },
   },
 };
 </script>
 <template>
   <div class="file-content code">
-    <div id="editor" ref="editor" data-editor-loading @keyup="triggerFileChange">
+    <div id="editor" ref="editor" data-editor-loading>
       <pre class="editor-loading-content">{{ value }}</pre>
     </div>
   </div>

app/assets/javascripts/blob/components/blob_edit_header.vue

 <script>
-import { GlFormInput } from '@gitlab/ui';
+import { GlFormInput, GlButton } from '@gitlab/ui';
 
 export default {
   components: {
     GlFormInput,
+    GlButton,
   },
   inheritAttrs: false,
   props: {
@@ -11,6 +12,16 @@ export default {
       type: String,
       required: true,
     },
+    canDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showDelete: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -21,17 +32,27 @@ export default {
 </script>
 <template>
   <div class="js-file-title file-title-flex-parent">
-    <gl-form-input
-      id="snippet_file_name"
-      v-model="name"
-      :placeholder="
-        s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby')
-      "
-      name="snippet_file_name"
-      class="form-control js-snippet-file-name"
-      type="text"
-      v-bind="$attrs"
-      @change="$emit('input', name)"
-    />
+    <div class="gl-display-flex gl-align-items-center gl-w-full">
+      <gl-form-input
+        v-model="name"
+        :placeholder="
+          s__('Snippets|Give your file a name to add code highlighting, e.g. example.rb for Ruby')
+        "
+        name="snippet_file_name"
+        class="form-control js-snippet-file-name"
+        type="text"
+        v-bind="$attrs"
+        @change="$emit('input', name)"
+      />
+      <gl-button
+        v-if="showDelete"
+        class="gl-ml-4"
+        variant="danger"
+        category="secondary"
+        :disabled="!canDelete"
+        @click="$emit('delete')"
+        >{{ s__('Snippets|Delete file') }}</gl-button
+      >
+    </div>
   </div>
 </template>

app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue

 <script>
-import { GlPopover, GlSprintf, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { GlPopover, GlSprintf, GlButton } from '@gitlab/ui';
 import { parseBoolean, scrollToElement, setCookie, getCookie } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
@@ -29,8 +29,7 @@ export default {
   components: {
     GlPopover,
     GlSprintf,
-    GlIcon,
-    GlDeprecatedButton,
+    GlButton,
   },
   mixins: [trackingMixin],
   props: {
@@ -112,18 +111,17 @@ export default {
     <template #title>
       <span v-html="suggestTitle"></span>
       <span class="ml-auto">
-        <gl-deprecated-button
+        <gl-button
           :aria-label="__('Close')"
           class="btn-blank"
           name="dismiss"
+          icon="close"
           :data-track-property="humanAccess"
           :data-track-value="$options.dismissTrackValue"
           :data-track-event="$options.clickTrackValue"
           :data-track-label="trackLabel"
           @click="onDismiss"
-        >
-          <gl-icon name="close" aria-hidden="true" />
-        </gl-deprecated-button>
+        />
       </span>
     </template>
 

app/assets/javascripts/blob/utils.js

 import Editor from '~/editor/editor_lite';
 
-export function initEditorLite({ el, blobPath, blobContent }) {
+export function initEditorLite({ el, ...args }) {
   if (!el) {
     throw new Error(`"el" parameter is required to initialize Editor`);
   }
-  const editor = new Editor();
+  const editor = new Editor({
+    scrollbar: {
+      alwaysConsumeMouseWheel: false,
+    },
+  });
   editor.createInstance({
     el,
-    blobPath,
-    blobContent,
+    ...args,
   });
 
   return editor;

app/assets/javascripts/boards/boards_util.js

+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import ListIssue from 'ee_else_ce/boards/models/issue';
+
 export function getMilestone() {
   return null;
 }
 
+export function formatListIssues(listIssues) {
+  return listIssues.nodes.reduce((map, list) => {
+    return {
+      ...map,
+      [list.id]: list.issues.nodes.map(
+        i =>
+          new ListIssue({
+            ...i,
+            id: getIdFromGraphQLId(i.id),
+            labels: i.labels?.nodes || [],
+            assignees: i.assignees?.nodes || [],
+          }),
+      ),
+    };
+  }, {});
+}
+
 export default {
   getMilestone,
+  formatListIssues,
 };

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

@@ -42,7 +42,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['isShowingEpicsSwimlanes']),
+    ...mapState(['isShowingEpicsSwimlanes', 'boardLists']),
     isSwimlanesOn() {
       return this.glFeatures.boardsWithSwimlanes && this.isShowingEpicsSwimlanes;
     },
@@ -73,11 +73,12 @@ export default {
     <epics-swimlanes
       v-else
       ref="swimlanes"
-      :lists="lists"
+      :lists="boardLists"
       :can-admin-list="canAdminList"
       :disabled="disabled"
       :board-id="boardId"
       :group-id="groupId"
+      :root-path="rootPath"
     />
   </div>
 </template>

app/assets/javascripts/boards/filtered_search_boards.js

@@ -10,6 +10,7 @@ export default class FilteredSearchBoards extends FilteredSearchManager {
       isGroupDecendent: true,
       stateFiltersSelector: '.issues-state-filters',
       isGroup: IS_EE,
+      useDefaultState: false,
       filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
     });
 

app/assets/javascripts/boards/index.js

@@ -117,7 +117,7 @@ export default () => {
         boardId: this.boardId,
         fullPath: $boardApp.dataset.fullPath,
       };
-      this.setEndpoints(endpoints);
+      this.setInitialBoardData({ ...endpoints, boardType: this.parent });
       boardsStore.setEndpoints(endpoints);
       boardsStore.rootPath = this.boardsEndpoint;
 
@@ -189,7 +189,7 @@ export default () => {
       }
     },
     methods: {
-      ...mapActions(['setEndpoints']),
+      ...mapActions(['setInitialBoardData']),
       updateTokens() {
         this.filterManager.updateTokens();
       },

app/assets/javascripts/boards/models/list.js

@@ -60,7 +60,9 @@ class List {
       this.title = this.milestone.title;
     }
 
-    if (!typeInfo.isBlank && this.id) {
+    // doNotFetchIssues is a temporary workaround until issues are fetched using GraphQL on issue boards
+    // Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/229416
+    if (!typeInfo.isBlank && this.id && !obj.doNotFetchIssues) {
       this.getIssues().catch(() => {
         // TODO: handle request error
       });

app/assets/javascripts/boards/queries/board_list_shared.fragment.graphql

@@ -4,6 +4,7 @@ fragment BoardListShared on BoardList {
   position
   listType
   collapsed
+  maxIssueCount
   label {
     id
     title

app/assets/javascripts/boards/queries/group_lists_issues.query.graphql

+#import "./issue.fragment.graphql"
+
+query GroupListIssues($fullPath: ID!, $boardId: ID!) {
+  group(fullPath: $fullPath) {
+    board(id: $boardId) {
+      lists {
+        nodes {
+          id
+          issues {
+            nodes {
+              ...IssueNode
+            }
+          }
+        }
+      }
+    }
+  }
+}

app/assets/javascripts/boards/queries/issue.fragment.graphql

+#import "~/graphql_shared/fragments/user.fragment.graphql"
+
+fragment IssueNode on Issue {
+  id
+  iid
+  title
+  referencePath: reference(full: true)
+  dueDate
+  timeEstimate
+  weight
+  confidential
+  webUrl
+  subscribed
+  blocked
+  epic {
+    id
+  }
+  assignees {
+    nodes {
+      ...User
+    }
+  }
+  labels {
+    nodes {
+      id
+      title
+      color
+      description
+    }
+  }
+}

app/assets/javascripts/boards/queries/project_lists_issues.query.graphql

+#import "./issue.fragment.graphql"
+
+query ProjectListIssues($fullPath: ID!, $boardId: ID!) {
+  project(fullPath: $fullPath) {
+    board(id: $boardId) {
+      lists {
+        nodes {
+          id
+          issues {
+            nodes {
+              ...IssueNode
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

 import * as types from './mutation_types';
+import createDefaultClient from '~/lib/graphql';
+import { BoardType } from '~/boards/constants';
+import { formatListIssues } from '../boards_util';
+import groupListsIssuesQuery from '../queries/group_lists_issues.query.graphql';
+import projectListsIssuesQuery from '../queries/project_lists_issues.query.graphql';
+
+const gqlClient = createDefaultClient();
 
 const notImplemented = () => {
   /* eslint-disable-next-line @gitlab/require-i18n-strings */
@@ -6,8 +13,8 @@ const notImplemented = () => {
 };
 
 export default {
-  setEndpoints: ({ commit }, endpoints) => {
-    commit(types.SET_ENDPOINTS, endpoints);
+  setInitialBoardData: ({ commit }, data) => {
+    commit(types.SET_INITIAL_BOARD_DATA, data);
   },
 
   setActiveId({ commit }, id) {
@@ -38,6 +45,32 @@ export default {
     notImplemented();
   },
 
+  fetchIssuesForAllLists: ({ state, commit }) => {
+    commit(types.REQUEST_ISSUES_FOR_ALL_LISTS);
+
+    const { endpoints, boardType } = state;
+    const { fullPath, boardId } = endpoints;
+
+    const query = boardType === BoardType.group ? groupListsIssuesQuery : projectListsIssuesQuery;
+
+    const variables = {
+      fullPath,
+      boardId: `gid://gitlab/Board/${boardId}`,
+    };
+
+    return gqlClient
+      .query({
+        query,
+        variables,
+      })
+      .then(({ data }) => {
+        const { lists } = data[boardType]?.board;
+        const listIssues = formatListIssues(lists);
+        commit(types.RECEIVE_ISSUES_FOR_ALL_LISTS_SUCCESS, listIssues);
+      })
+      .catch(() => commit(types.RECEIVE_ISSUES_FOR_ALL_LISTS_FAILURE));
+  },
+
   moveIssue: () => {
     notImplemented();
   },

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

@@ -81,7 +81,7 @@ const boardsStore = {
   showPage(page) {
     this.state.currentPage = page;
   },
-  addList(listObj) {
+  updateListPosition(listObj) {
     const listType = listObj.listType || listObj.list_type;
     let { position } = listObj;
     if (listType === ListType.closed) {
@@ -91,6 +91,10 @@ const boardsStore = {
     }
 
     const list = new List({ ...listObj, position });
+    return list;
+  },
+  addList(listObj) {
+    const list = this.updateListPosition(listObj);
     this.state.lists = sortBy([...this.state.lists, list], 'position');
     return list;
   },
@@ -850,19 +854,28 @@ const boardsStore = {
   },
 
   refreshIssueData(issue, obj) {
-    issue.id = obj.id;
-    issue.iid = obj.iid;
-    issue.title = obj.title;
-    issue.confidential = obj.confidential;
-    issue.dueDate = obj.due_date;
-    issue.sidebarInfoEndpoint = obj.issue_sidebar_endpoint;
-    issue.referencePath = obj.reference_path;
-    issue.path = obj.real_path;
-    issue.toggleSubscriptionEndpoint = obj.toggle_subscription_endpoint;
+    // issue.id = obj.id;
+    // issue.iid = obj.iid;
+    // issue.title = obj.title;
+    // issue.confidential = obj.confidential;
+    // issue.dueDate = obj.due_date || obj.dueDate;
+    // issue.sidebarInfoEndpoint = obj.issue_sidebar_endpoint;
+    // issue.referencePath = obj.reference_path || obj.referencePath;
+    // issue.path = obj.real_path || obj.webUrl;
+    // issue.toggleSubscriptionEndpoint = obj.toggle_subscription_endpoint;
+    // issue.project_id = obj.project_id;
+    // issue.timeEstimate = obj.time_estimate || obj.timeEstimate;
+    // issue.assignableLabelsEndpoint = obj.assignable_labels_endpoint;
+    // issue.blocked = obj.blocked;
+    // issue.epic = obj.epic;
+
+    const convertedObj = convertObjectPropsToCamelCase(obj, {
+      dropKeys: ['issue_sidebar_endpoint', 'real_path', 'webUrl'],
+    });
+    convertedObj.sidebarInfoEndpoint = obj.issue_sidebar_endpoint;
+    issue.path = obj.real_path || obj.webUrl;
     issue.project_id = obj.project_id;
-    issue.timeEstimate = obj.time_estimate;
-    issue.assignableLabelsEndpoint = obj.assignable_labels_endpoint;
-    issue.blocked = obj.blocked;
+    Object.assign(issue, convertedObj);
 
     if (obj.project) {
       issue.project = new IssueProject(obj.project);

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

-export const SET_ENDPOINTS = 'SET_ENDPOINTS';
+export const SET_INITIAL_BOARD_DATA = 'SET_INITIAL_BOARD_DATA';
 export const REQUEST_ADD_LIST = 'REQUEST_ADD_LIST';
 export const RECEIVE_ADD_LIST_SUCCESS = 'RECEIVE_ADD_LIST_SUCCESS';
 export const RECEIVE_ADD_LIST_ERROR = 'RECEIVE_ADD_LIST_ERROR';
@@ -8,6 +8,9 @@ export const RECEIVE_UPDATE_LIST_ERROR = 'RECEIVE_UPDATE_LIST_ERROR';
 export const REQUEST_REMOVE_LIST = 'REQUEST_REMOVE_LIST';
 export const RECEIVE_REMOVE_LIST_SUCCESS = 'RECEIVE_REMOVE_LIST_SUCCESS';
 export const RECEIVE_REMOVE_LIST_ERROR = 'RECEIVE_REMOVE_LIST_ERROR';
+export const REQUEST_ISSUES_FOR_ALL_LISTS = 'REQUEST_ISSUES_FOR_ALL_LISTS';
+export const RECEIVE_ISSUES_FOR_ALL_LISTS_SUCCESS = 'RECEIVE_ISSUES_FOR_ALL_LISTS_SUCCESS';
+export const RECEIVE_ISSUES_FOR_ALL_LISTS_FAILURE = 'RECEIVE_ISSUES_FOR_ALL_LISTS_FAILURE';
 export const REQUEST_ADD_ISSUE = 'REQUEST_ADD_ISSUE';
 export const RECEIVE_ADD_ISSUE_SUCCESS = 'RECEIVE_ADD_ISSUE_SUCCESS';
 export const RECEIVE_ADD_ISSUE_ERROR = 'RECEIVE_ADD_ISSUE_ERROR';

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

@@ -6,8 +6,10 @@ const notImplemented = () => {
 };
 
 export default {
-  [mutationTypes.SET_ENDPOINTS]: (state, endpoints) => {
+  [mutationTypes.SET_INITIAL_BOARD_DATA]: (state, data) => {
+    const { boardType, ...endpoints } = data;
     state.endpoints = endpoints;
+    state.boardType = boardType;
   },
 
   [mutationTypes.SET_ACTIVE_ID](state, id) {
@@ -50,6 +52,20 @@ export default {
     notImplemented();
   },
 
+  [mutationTypes.REQUEST_ISSUES_FOR_ALL_LISTS]: state => {
+    state.isLoadingIssues = true;
+  },
+
+  [mutationTypes.RECEIVE_ISSUES_FOR_ALL_LISTS_SUCCESS]: (state, listIssues) => {
+    state.issuesByListId = listIssues;
+    state.isLoadingIssues = false;
+  },
+
+  [mutationTypes.RECEIVE_ISSUES_FOR_ALL_LISTS_FAILURE]: state => {
+    state.listIssueFetchFailure = true;
+    state.isLoadingIssues = false;
+  },
+
   [mutationTypes.REQUEST_ADD_ISSUE]: () => {
     notImplemented();
   },