Sidebar iteration widget refactor

Use generic dropdown sidebar widget for iterations

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

@@ -26,8 +26,6 @@ export default {
     BoardSidebarMilestoneSelect,
     BoardSidebarWeightInput: () =>
       import('ee_component/boards/components/sidebar/board_sidebar_weight_input.vue'),
-    SidebarIterationWidget: () =>
-      import('ee_component/sidebar/components/sidebar_iteration_widget.vue'),
     SidebarDropdownWidget: () =>
       import('ee_component/sidebar/components/sidebar_dropdown_widget.vue'),
   },
@@ -100,13 +98,16 @@ export default {
       />
       <div>
         <board-sidebar-milestone-select />
-        <sidebar-iteration-widget
+        <sidebar-dropdown-widget
           v-if="iterationFeatureAvailable"
           :iid="activeBoardItem.iid"
+          issuable-attribute="iteration"
           :workspace-path="projectPathForActiveIssue"
-          :iterations-workspace-path="groupPathForActiveIssue"
+          :attr-workspace-path="groupPathForActiveIssue"
           :issuable-type="issuableType"
           class="gl-mt-5"
+          data-testid="iteration-edit"
+          data-qa-selector="iteration_container"
         />
       </div>
       <board-sidebar-time-tracker class="swimlanes-sidebar-time-tracker" />

ee/app/assets/javascripts/sidebar/components/sidebar_iteration_widget.vue

-<script>
-import {
-  GlLink,
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownText,
-  GlSearchBoxByType,
-  GlDropdownDivider,
-  GlLoadingIcon,
-  GlIcon,
-  GlTooltipDirective,
-} from '@gitlab/ui';
-import * as Sentry from '@sentry/browser';
-import createFlash from '~/flash';
-import { IssuableType } from '~/issue_show/constants';
-import { __ } from '~/locale';
-import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
-import {
-  iterationSelectTextMap,
-  iterationDisplayState,
-  noIteration,
-  issuableIterationQueries,
-  iterationsQueries,
-} from '../constants';
-
-export default {
-  noIteration,
-  i18n: {
-    iteration: iterationSelectTextMap.iteration,
-    noIteration: iterationSelectTextMap.noIteration,
-    assignIteration: iterationSelectTextMap.assignIteration,
-    iterationSelectFail: iterationSelectTextMap.iterationSelectFail,
-    noIterationsFound: iterationSelectTextMap.noIterationsFound,
-    currentIterationFetchError: iterationSelectTextMap.currentIterationFetchError,
-    iterationsFetchError: iterationSelectTextMap.iterationsFetchError,
-    edit: __('Edit'),
-    none: __('None'),
-  },
-  issuableIterationQueries,
-  iterationsQueries,
-  tracking: {
-    label: 'right_sidebar',
-    property: 'iteration',
-    event: 'click_edit_button',
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  components: {
-    SidebarEditableItem,
-    GlLink,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownText,
-    GlDropdownDivider,
-    GlSearchBoxByType,
-    GlIcon,
-    GlLoadingIcon,
-  },
-  inject: {
-    isClassicSidebar: {
-      default: false,
-    },
-  },
-  props: {
-    workspacePath: {
-      required: true,
-      type: String,
-    },
-    iid: {
-      required: true,
-      type: String,
-    },
-    iterationsWorkspacePath: {
-      required: true,
-      type: String,
-    },
-    issuableType: {
-      type: String,
-      required: true,
-      validator(value) {
-        // Add supported IssuableType here along with graphql queries
-        // as this widget is used for addtional issuable types.
-        return [IssuableType.Issue].includes(value);
-      },
-    },
-  },
-  apollo: {
-    currentIteration: {
-      query() {
-        return issuableIterationQueries[this.issuableType].query;
-      },
-      variables() {
-        return {
-          fullPath: this.workspacePath,
-          iid: this.iid,
-        };
-      },
-      update(data) {
-        return data?.workspace?.issuable.iteration;
-      },
-      error(error) {
-        createFlash({ message: this.$options.i18n.currentIterationFetchError });
-        Sentry.captureException(error);
-      },
-    },
-    iterations: {
-      query() {
-        return iterationsQueries[this.issuableType].query;
-      },
-      skip() {
-        return !this.editing;
-      },
-      debounce: 250,
-      variables() {
-        return {
-          fullPath: this.iterationsWorkspacePath,
-          title: this.searchTerm,
-          state: iterationDisplayState,
-        };
-      },
-      update(data) {
-        return data?.workspace?.iterations.nodes || [];
-      },
-      error(error) {
-        createFlash({ message: this.$options.i18n.iterationsFetchError });
-        Sentry.captureException(error);
-      },
-    },
-  },
-  data() {
-    return {
-      searchTerm: '',
-      editing: false,
-      updating: false,
-      selectedTitle: null,
-      currentIteration: null,
-      iterations: [],
-    };
-  },
-  computed: {
-    iteration() {
-      return this.iterations.find(({ id }) => id === this.currentIteration);
-    },
-    iterationTitle() {
-      return this.currentIteration?.title;
-    },
-    iterationUrl() {
-      return this.currentIteration?.webUrl;
-    },
-    dropdownText() {
-      return this.currentIteration ? this.currentIteration?.title : this.$options.i18n.iteration;
-    },
-    loading() {
-      return this.$apollo.queries.currentIteration.loading;
-    },
-    noIterations() {
-      return this.iterations.length === 0;
-    },
-  },
-  methods: {
-    updateIteration(iterationId) {
-      if (this.currentIteration === null && iterationId === null) return;
-      if (iterationId === this.currentIteration?.id) return;
-
-      this.updating = true;
-
-      const selectedIteration = this.iterations.find((i) => i.id === iterationId);
-      this.selectedTitle = selectedIteration ? selectedIteration.title : this.$options.i18n.none;
-
-      this.$apollo
-        .mutate({
-          mutation: issuableIterationQueries[this.issuableType].mutation,
-          variables: {
-            fullPath: this.workspacePath,
-            iterationId,
-            iid: this.iid,
-          },
-        })
-        .then(({ data }) => {
-          if (data.issuableSetIteration?.errors?.length) {
-            createFlash(data.issuableSetIteration.errors[0]);
-            Sentry.captureException(data.issuableSetIteration.errors[0]);
-          } else {
-            this.$emit('iteration-updated', data);
-          }
-        })
-        .catch((error) => {
-          createFlash(this.$options.i18n.iterationSelectFail);
-          Sentry.captureException(error);
-        })
-        .finally(() => {
-          this.updating = false;
-          this.searchTerm = '';
-          this.selectedTitle = null;
-        });
-    },
-    isIterationChecked(iterationId = undefined) {
-      return (
-        iterationId === this.currentIteration?.id || (!this.currentIteration?.id && !iterationId)
-      );
-    },
-    showDropdown() {
-      this.$refs.newDropdown.show();
-    },
-    handleOpen() {
-      this.editing = true;
-      this.showDropdown();
-    },
-    handleClose() {
-      this.editing = false;
-    },
-    setFocus() {
-      this.$refs.search.focusInput();
-    },
-  },
-};
-</script>
-
-<template>
-  <div data-qa-selector="iteration_container">
-    <sidebar-editable-item
-      ref="editable"
-      :title="$options.i18n.iteration"
-      data-testid="iteration-edit-link"
-      :tracking="$options.tracking"
-      :loading="updating || loading"
-      @open="handleOpen"
-      @close="handleClose"
-    >
-      <template #collapsed>
-        <div v-if="isClassicSidebar" v-gl-tooltip class="sidebar-collapsed-icon">
-          <gl-icon :size="16" :aria-label="$options.i18n.iteration" name="iteration" />
-          <span class="collapse-truncated-title">{{ iterationTitle }}</span>
-        </div>
-        <div
-          data-testid="select-iteration"
-          :class="isClassicSidebar ? 'hide-collapsed' : 'gl-mt-3'"
-        >
-          <strong v-if="updating">{{ selectedTitle }}</strong>
-          <span v-else-if="!updating && !currentIteration" class="gl-text-gray-500">{{
-            $options.i18n.none
-          }}</span>
-          <gl-link
-            v-else
-            data-qa-selector="iteration_link"
-            class="gl-text-gray-900! gl-font-weight-bold"
-            :href="iterationUrl"
-            ><strong>{{ iterationTitle }}</strong></gl-link
-          >
-        </div>
-      </template>
-      <template #default>
-        <gl-dropdown
-          ref="newDropdown"
-          lazy
-          :header-text="$options.i18n.assignIteration"
-          :text="dropdownText"
-          :loading="loading"
-          class="gl-w-full"
-          @shown="setFocus"
-        >
-          <gl-search-box-by-type ref="search" v-model="searchTerm" />
-          <gl-dropdown-item
-            data-testid="no-iteration-item"
-            :is-check-item="true"
-            :is-checked="isIterationChecked($options.noIteration)"
-            @click="updateIteration($options.noIteration)"
-          >
-            {{ $options.i18n.noIteration }}
-          </gl-dropdown-item>
-          <gl-dropdown-divider />
-          <gl-loading-icon
-            v-if="$apollo.queries.iterations.loading"
-            class="gl-py-4"
-            data-testid="loading-icon-dropdown"
-          />
-          <template v-else>
-            <gl-dropdown-text v-if="noIterations">
-              {{ $options.i18n.noIterationsFound }}
-            </gl-dropdown-text>
-            <gl-dropdown-item
-              v-for="iterationItem in iterations"
-              :key="iterationItem.id"
-              :is-check-item="true"
-              :is-checked="isIterationChecked(iterationItem.id)"
-              data-testid="iteration-items"
-              @click="updateIteration(iterationItem.id)"
-              >{{ iterationItem.title }}</gl-dropdown-item
-            >
-          </template>
-        </gl-dropdown>
-      </template>
-    </sidebar-editable-item>
-  </div>
-</template>

ee/app/assets/javascripts/sidebar/mount_sidebar.js

@@ -7,7 +7,6 @@ import { apolloProvider } from '~/sidebar/graphql';
 import * as CEMountSidebar from '~/sidebar/mount_sidebar';
 import CveIdRequest from './components/cve_id_request/cve_id_request_sidebar.vue';
 import SidebarDropdownWidget from './components/sidebar_dropdown_widget.vue';
-import SidebarIterationWidget from './components/sidebar_iteration_widget.vue';
 import SidebarStatus from './components/status/sidebar_status.vue';
 import SidebarWeight from './components/weight/sidebar_weight.vue';
 import { IssuableAttributeType } from './constants';
@@ -118,19 +117,20 @@ function mountIterationSelect() {
     el,
     apolloProvider,
     components: {
-      SidebarIterationWidget,
+      SidebarDropdownWidget,
     },
     provide: {
       canUpdate: parseBoolean(canEdit),
       isClassicSidebar: true,
     },
     render: (createElement) =>
-      createElement('sidebar-iteration-widget', {
+      createElement('sidebar-dropdown-widget', {
         props: {
-          iterationsWorkspacePath: groupPath,
+          attrWorkspacePath: groupPath,
           workspacePath: projectPath,
           iid: issueIid,
           issuableType: IssuableType.Issue,
+          issuableAttribute: IssuableAttributeType.Iteration,
         },
       }),
   });

ee/app/assets/javascripts/sidebar/queries/group_iterations.query.graphql

@@ -3,7 +3,7 @@
 query issueIterations($fullPath: ID!, $title: String, $state: IterationState) {
   workspace: group(fullPath: $fullPath) {
     __typename
-    iterations(title: $title, state: $state) {
+    attributes: iterations(title: $title, state: $state) {
       nodes {
         ...IterationFragment
         state

ee/app/assets/javascripts/sidebar/queries/project_issue_iteration.mutation.graphql

-mutation projectIssueIterationMutation($fullPath: ID!, $iid: String!, $iterationId: ID) {
-  issuableSetIteration: issueSetIteration(
-    input: { projectPath: $fullPath, iid: $iid, iterationId: $iterationId }
+mutation projectIssueIterationMutation($fullPath: ID!, $iid: String!, $attributeId: ID) {
+  issuableSetAttribute: issueSetIteration(
+    input: { projectPath: $fullPath, iid: $iid, iterationId: $attributeId }
   ) {
     __typename
     errors
     issuable: issue {
       __typename
       id
-      iteration {
+      attribute: iteration {
         title
         id
         state

ee/app/assets/javascripts/sidebar/queries/project_issue_iteration.query.graphql

@@ -6,7 +6,7 @@ query projectIssueIteration($fullPath: ID!, $iid: String!) {
     issuable: issue(iid: $iid) {
       __typename
       id
-      iteration {
+      attribute: iteration {
         ...IterationFragment
       }
     }

ee/spec/features/boards/boards_licensed_features_spec.rb

@@ -27,7 +27,7 @@ RSpec.describe 'Boards licensed features', :js do
       end
 
       it "hides iteration widget" do
-        expect(page).not_to have_selector('[data-testid="iteration-edit-link"]')
+        expect(page).not_to have_selector('[data-testid="iteration-edit"]')
       end
     end
 

ee/spec/features/issues/issue_sidebar_spec.rb

@@ -206,7 +206,7 @@ RSpec.describe 'Issue Sidebar' do
   end
 
   def find_and_click_edit_iteration
-    page.find('[data-testid="iteration-edit-link"] [data-testid="edit-button"]').click
+    page.find('[data-testid="iteration-edit"] [data-testid="edit-button"]').click
 
     wait_for_all_requests
   end

ee/spec/frontend/boards/components/__snapshots__/board_content_sidebar_spec.js.snap

@@ -24,11 +24,14 @@ exports[`ee/BoardContentSidebar matches the snapshot 1`] = `
   <div>
     <boardsidebarmilestoneselect-stub />
      
-    <sidebariterationwidget-stub
+    <sidebardropdownwidget-stub
+      attr-workspace-path="gitlab-org"
       class="gl-mt-5"
+      data-qa-selector="iteration_container"
+      data-testid="iteration-edit"
       iid="27"
+      issuable-attribute="iteration"
       issuable-type="issue"
-      iterations-workspace-path="gitlab-org"
       workspace-path="gitlab-org/gitlab-test"
     />
   </div>

ee/spec/frontend/boards/components/board_content_sidebar_spec.js

@@ -63,7 +63,6 @@ describe('ee/BoardContentSidebar', () => {
         SidebarSubscriptionsWidget: true,
         BoardSidebarMilestoneSelect: true,
         BoardSidebarWeightInput: true,
-        SidebarIterationWidget: true,
         SidebarDropdownWidget: true,
       },
     });

ee/spec/support/shared_examples/features/sidebar_shared_examples.rb

@@ -72,13 +72,13 @@ RSpec.shared_examples 'issue boards sidebar EE' do
 
           select_iteration(iteration.title)
 
-          expect(page.find('[data-testid="iteration-edit-link"]')).to have_content('Iteration 1')
+          expect(page.find('[data-testid="iteration-edit"]')).to have_content('Iteration 1')
 
           find_and_click_edit_iteration
 
           select_iteration('No iteration')
 
-          expect(page.find('[data-testid="iteration-edit-link"]')).to have_content('None')
+          expect(page.find('[data-testid="iteration-edit"]')).to have_content('None')
         end
 
         context 'when iteration feature is not available' do
@@ -90,15 +90,15 @@ RSpec.shared_examples 'issue boards sidebar EE' do
             wait_for_all_requests
           end
 
-          it 'cannot find the iteration-edit-link' do
-            expect(page).not_to have_selector('[data-testid="iteration-edit-link"]')
+          it 'cannot find the iteration-edit' do
+            expect(page).not_to have_selector('[data-testid="iteration-edit"]')
           end
         end
       end
     end
 
     def find_and_click_edit_iteration
-      page.find('[data-testid="iteration-edit-link"] [data-testid="edit-button"]').click
+      page.find('[data-testid="iteration-edit"] [data-testid="edit-button"]').click
 
       wait_for_all_requests
     end

qa/qa/ee/page/project/issue/show.rb

@@ -16,11 +16,6 @@ module QA
                   element :edit_link
                 end
 
-                view 'ee/app/assets/javascripts/sidebar/components/sidebar_iteration_widget.vue' do
-                  element :iteration_container
-                  element :iteration_link
-                end
-
                 view 'ee/app/assets/javascripts/sidebar/components/weight/weight.vue' do
                   element :edit_weight_link
                   element :remove_weight_link