Add active state to milestones fetch in filtered search

app/assets/javascripts/boards/constants.js

@@ -50,6 +50,8 @@ export const toggleFormEventPrefix = {
   issue: 'toggle-issue-form-',
 };
 
+export const active = 'active';
+
 export const inactiveId = 0;
 
 export const ISSUABLE = 'issuable';

app/assets/javascripts/boards/graphql/group_board_milestones.query.graphql

-query GroupBoardMilestones($fullPath: ID!, $searchTerm: String) {
+query GroupBoardMilestones($fullPath: ID!, $searchTerm: String, $state: MilestoneStateEnum) {
   group(fullPath: $fullPath) {
     id
-    milestones(includeAncestors: true, searchTitle: $searchTerm) {
+    milestones(includeAncestors: true, searchTitle: $searchTerm, state: $state) {
       nodes {
         id
         title

app/assets/javascripts/boards/graphql/project_board_milestones.query.graphql

-query ProjectBoardMilestones($fullPath: ID!, $searchTerm: String) {
+query ProjectBoardMilestones($fullPath: ID!, $searchTerm: String, $state: MilestoneStateEnum) {
   project(fullPath: $fullPath) {
     id
-    milestones(searchTitle: $searchTerm, includeAncestors: true) {
+    milestones(searchTitle: $searchTerm, includeAncestors: true, state: $state) {
       nodes {
         id
         title

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

@@ -15,6 +15,7 @@ import {
   FilterFields,
   ListTypeTitles,
   DraggableItemTypes,
+  active,
 } from 'ee_else_ce/boards/constants';
 import {
   formatIssueInput,
@@ -209,6 +210,7 @@ export default {
     const variables = {
       fullPath,
       searchTerm,
+      state: active,
     };
 
     let query;

spec/frontend/boards/stores/actions_spec.js

@@ -29,6 +29,8 @@ import * as types from '~/boards/stores/mutation_types';
 import mutations from '~/boards/stores/mutations';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
+import projectBoardMilestones from '~/boards/graphql/project_board_milestones.query.graphql';
+import groupBoardMilestones from '~/boards/graphql/group_board_milestones.query.graphql';
 import {
   mockLists,
   mockListsById,
@@ -308,6 +310,36 @@ describe('fetchMilestones', () => {
     expect(() => actions.fetchMilestones(store)).toThrow(new Error('Unknown board type'));
   });
 
+  it.each([
+    [
+      'project',
+      {
+        query: projectBoardMilestones,
+        variables: { fullPath: 'gitlab-org/gitlab', state: 'active' },
+      },
+    ],
+    [
+      'group',
+      {
+        query: groupBoardMilestones,
+        variables: { fullPath: 'gitlab-org/gitlab', state: 'active' },
+      },
+    ],
+  ])(
+    'when boardType is %s it calls fetchMilestones with the correct query and variables',
+    (boardType, variables) => {
+      jest.spyOn(gqlClient, 'query').mockResolvedValue(queryResponse);
+
+      const store = createStore();
+
+      store.state.boardType = boardType;
+
+      actions.fetchMilestones(store);
+
+      expect(gqlClient.query).toHaveBeenCalledWith(variables);
+    },
+  );
+
   it('sets milestonesLoading to true', async () => {
     jest.spyOn(gqlClient, 'query').mockResolvedValue(queryResponse);