Nonnegative integer weights in issuable sidebar

app/assets/javascripts/droplab/plugins/custom_number.js

+const CustomNumber = {
+  keydown(e) {
+    if (this.destroyed) return;
+
+    const { list } = e.detail.hook;
+    const { value } = e.detail.hook.trigger;
+    const parsedValue = Number(value);
+    const config = e.detail.hook.config.CustomNumber;
+    const { defaultOptions } = config;
+
+    const isValidNumber = !Number.isNaN(parsedValue) && value !== '';
+    const customOption = [{ id: parsedValue, title: parsedValue }];
+    const defaultDropdownOptions = defaultOptions.map(o => ({ id: o, title: o }));
+
+    list.setData(isValidNumber ? customOption : defaultDropdownOptions);
+    list.currentIndex = 0;
+  },
+
+  debounceKeydown(e) {
+    if (
+      [
+        13, // enter
+        16, // shift
+        17, // ctrl
+        18, // alt
+        20, // caps lock
+        37, // left arrow
+        38, // up arrow
+        39, // right arrow
+        40, // down arrow
+        91, // left window
+        92, // right window
+        93, // select
+      ].indexOf(e.detail.which || e.detail.keyCode) > -1
+    )
+      return;
+
+    if (this.timeout) clearTimeout(this.timeout);
+    this.timeout = setTimeout(this.keydown.bind(this, e), 200);
+  },
+
+  init(hook) {
+    this.hook = hook;
+    this.destroyed = false;
+
+    this.eventWrapper = {};
+    this.eventWrapper.debounceKeydown = this.debounceKeydown.bind(this);
+
+    this.hook.trigger.addEventListener('keydown.dl', this.eventWrapper.debounceKeydown);
+    this.hook.trigger.addEventListener('mousedown.dl', this.eventWrapper.debounceKeydown);
+  },
+
+  destroy() {
+    if (this.timeout) clearTimeout(this.timeout);
+    this.destroyed = true;
+
+    this.hook.trigger.removeEventListener('keydown.dl', this.eventWrapper.debounceKeydown);
+    this.hook.trigger.removeEventListener('mousedown.dl', this.eventWrapper.debounceKeydown);
+  },
+};
+
+export default CustomNumber;

app/assets/javascripts/filtered_search/dropdown_weight.js

+import FilteredSearchDropdown from './filtered_search_dropdown';
+import DropdownUtils from './dropdown_utils';
+import CustomNumber from '../droplab/plugins/custom_number';
+
+export default class DropdownWeight extends FilteredSearchDropdown {
+  constructor(options = {}) {
+    super(options);
+
+    this.defaultOptions = Array.from(Array(21).keys());
+
+    this.config = {
+      CustomNumber: {
+        defaultOptions: this.defaultOptions,
+      },
+    };
+  }
+
+  itemClicked(e) {
+    super.itemClicked(e, selected => {
+      const title = selected.querySelector('.js-data-value').innerText.trim();
+      return `${DropdownUtils.getEscapedText(title)}`;
+    });
+  }
+
+  renderContent(forceShowList = false) {
+    this.droplab.changeHookList(this.hookId, this.dropdown, [CustomNumber], this.config);
+
+    const defaultDropdownOptions = this.defaultOptions.map(o => ({ id: o, title: o }));
+    this.droplab.setData(defaultDropdownOptions);
+
+    super.renderContent(forceShowList);
+  }
+
+  init() {
+    this.droplab.addHook(this.input, this.dropdown, [CustomNumber], this.config).init();
+  }
+}

app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js

@@ -7,6 +7,7 @@ import DropdownHint from './dropdown_hint';
 import DropdownEmoji from './dropdown_emoji';
 import DropdownNonUser from './dropdown_non_user';
 import DropdownUser from './dropdown_user';
+import DropdownWeight from './dropdown_weight';
 import FilteredSearchVisualTokens from './filtered_search_visual_tokens';
 
 export default class FilteredSearchDropdownManager {
@@ -92,12 +93,12 @@ export default class FilteredSearchDropdownManager {
       },
       weight: {
         reference: null,
-        gl: DropdownNonUser,
+        gl: DropdownWeight,
         element: this.container.querySelector('#js-dropdown-weight'),
       },
     };
 
-    supportedTokens.forEach((type) => {
+    supportedTokens.forEach(type => {
       if (availableMappings[type]) {
         allowedMappings[type] = availableMappings[type];
       }
@@ -152,13 +153,16 @@ export default class FilteredSearchDropdownManager {
 
   updateDropdownOffset(key) {
     // Always align dropdown with the input field
-    let offset = this.filteredSearchInput.getBoundingClientRect().left - this.container.querySelector('.scroll-container').getBoundingClientRect().left;
+    let offset =
+      this.filteredSearchInput.getBoundingClientRect().left -
+      this.container.querySelector('.scroll-container').getBoundingClientRect().left;
 
     const maxInputWidth = 240;
     const currentDropdownWidth = this.mapping[key].element.clientWidth || maxInputWidth;
 
     // Make sure offset never exceeds the input container
-    const offsetMaxWidth = this.container.querySelector('.scroll-container').clientWidth - currentDropdownWidth;
+    const offsetMaxWidth =
+      this.container.querySelector('.scroll-container').clientWidth - currentDropdownWidth;
     if (offsetMaxWidth < offset) {
       offset = offsetMaxWidth;
     }
@@ -184,8 +188,7 @@ export default class FilteredSearchDropdownManager {
       const glArguments = Object.assign({}, defaultArguments, extraArguments);
 
       // Passing glArguments to `new glClass(<arguments>)`
-      mappingKey.reference =
-        new (Function.prototype.bind.apply(glClass, [null, glArguments]))();
+      mappingKey.reference = new (Function.prototype.bind.apply(glClass, [null, glArguments]))();
     }
 
     if (firstLoad) {
@@ -212,8 +215,8 @@ export default class FilteredSearchDropdownManager {
     }
 
     const match = this.filteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase());
-    const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key
-      && this.mapping[match.key];
+    const shouldOpenFilterDropdown =
+      match && this.currentDropdown !== match.key && this.mapping[match.key];
     const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
 
     if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
@@ -224,8 +227,10 @@ export default class FilteredSearchDropdownManager {
 
   setDropdown() {
     const query = DropdownUtils.getSearchQuery(true);
-    const { lastToken, searchToken } =
-      this.tokenizer.processTokens(query, this.filteredSearchTokenKeys.getKeys());
+    const { lastToken, searchToken } = this.tokenizer.processTokens(
+      query,
+      this.filteredSearchTokenKeys.getKeys(),
+    );
 
     if (this.currentDropdown) {
       this.updateCurrentDropdownOffset();

app/assets/stylesheets/pages/issuable.scss

@@ -215,6 +215,15 @@
         }
       }
     }
+
+    &.weight {
+      .gl-field-error {
+        margin-top: $gl-padding-8;
+        margin-left: -6px;
+        display: flex;
+        align-items: center;
+      }
+    }
   }
 
   .block-first {

app/views/shared/issuable/_search_bar.html.haml

@@ -107,17 +107,16 @@
             - if type == :issues || type == :boards || type == :boards_modal
               #js-dropdown-weight.filtered-search-input-dropdown-menu.dropdown-menu
                 %ul{ 'data-dropdown' => true }
-                  %li.filter-dropdown-item{ 'data-value' => 'none' }
+                  %li.filter-dropdown-item{ 'data-value' => 'None' }
                     %button.btn.btn-link
-                      No Weight
-                  %li.filter-dropdown-item{ 'data-value' => 'any' }
+                      None
+                  %li.filter-dropdown-item{ 'data-value' => 'Any' }
                     %button.btn.btn-link
-                      Any Weight
+                      Any
                   %li.divider.droplab-item-ignore
-                %ul.filter-dropdown{ 'data-dropdown' => true }
-                  - Issue.weight_filter_options.each do |weight|
-                    %li.filter-dropdown-item{ 'data-value' => "#{weight}" }
-                      %button.btn.btn-link= weight
+                %ul.filter-dropdown{ data: { dropdown: true, dynamic: true } }
+                  %li.filter-dropdown-item{ data: { value: '{{id}}' } }
+                    %button.btn.btn-link {{title}}
 
           %button.clear-search.hidden{ type: 'button' }
             = icon('times')

doc/workflow/issue_weight.md

 # Issue Weight **[STARTER]**
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/76)
-in [GitLab Starter](https://about.gitlab.com/products/) 8.3.
+> in [GitLab Starter](https://about.gitlab.com/products/) 8.3.
 
 When you have a lot of issues, it can be hard to get an overview.
 By adding a weight to each issue, you can get a better idea of how much time,
 value or complexity a given issue has or will cost.
 
 You can set the weight of an issue during its creation, by simply changing the
-value in the dropdown menu. You can set it to a numeric value from 1 to 9.
+value in the dropdown menu. You can set it to a non-negative integer
+value from 0, 1, 2, and so on. You can remove weight from an issue
+as well.
 
 This value will appear on the right sidebar of an individual issue, as well as
 in the issues page next to a distinctive balance scale icon.

ee/app/assets/javascripts/filtered_search/filtered_search_token_keys_issues.js

@@ -6,17 +6,17 @@ const weightTokenKey = {
   param: '',
   symbol: '',
   icon: 'balance-scale',
-  tag: 'weight',
+  tag: 'number',
 };
 
 const weightConditions = [{
-  url: 'weight=No+Weight',
+  url: 'weight=None',
   tokenKey: 'weight',
-  value: 'none',
+  value: 'None',
 }, {
-  url: 'weight=Any+Weight',
+  url: 'weight=Any',
   tokenKey: 'weight',
-  value: 'any',
+  value: 'Any',
 }];
 
 const alternativeTokenKeys = [{

ee/app/assets/javascripts/sidebar/components/weight/sidebar_weight.vue

 <script>
-  import Flash from '~/flash';
-  import eventHub from '~/sidebar/event_hub';
-  import weightComponent from './weight.vue';
+import Flash from '~/flash';
+import eventHub from '~/sidebar/event_hub';
+import weightComponent from './weight.vue';
 
-  export default {
+export default {
   components: {
     weight: weightComponent,
   },
@@ -27,13 +27,12 @@
 
   methods: {
     onUpdateWeight(newWeight) {
-        this.mediator.updateWeight(newWeight)
-          .catch(() => {
+      this.mediator.updateWeight(newWeight).catch(() => {
         Flash('Error occurred while updating the issue weight');
       });
     },
   },
-  };
+};
 </script>
 
 <template>
@@ -41,7 +40,6 @@
     :fetching="mediator.store.isFetching.weight"
     :loading="mediator.store.isLoading.weight"
     :weight="mediator.store.weight"
-    :weight-options="mediator.store.weightOptions"
     :weight-none-value="mediator.store.weightNoneValue"
     :editable="mediator.store.editable"
   />

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

 <script>
-  /* eslint-disable vue/require-default-prop */
+import $ from 'jquery';
+import { s__ } from '~/locale';
+import eventHub from '~/sidebar/event_hub';
+import tooltip from '~/vue_shared/directives/tooltip';
+import icon from '~/vue_shared/components/icon.vue';
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 
-  import $ from 'jquery';
-  import { s__ } from '~/locale';
-  import eventHub from '~/sidebar/event_hub';
-  import tooltip from '~/vue_shared/directives/tooltip';
-  import icon from '~/vue_shared/components/icon.vue';
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-
-  export default {
+export default {
   components: {
     icon,
     loadingIcon,
@@ -28,16 +26,14 @@
       default: false,
     },
     weight: {
-        type: Number,
+      type: [String, Number],
       required: false,
-      },
-      weightOptions: {
-        type: Array,
-        required: true,
+      default: '',
     },
     weightNoneValue: {
       type: String,
       required: true,
+      default: 'None',
     },
     editable: {
       type: Boolean,
@@ -45,14 +41,16 @@
       default: false,
     },
     id: {
-        type: Number,
+      type: [String, Number],
       required: false,
+      default: '',
     },
   },
   data() {
     return {
-        shouldShowDropdown: false,
-        collapseAfterDropdownCloses: false,
+      hasValidInput: true,
+      shouldShowEditField: false,
+      collapsedAfterUpdate: false,
     };
   },
   computed: {
@@ -62,7 +60,12 @@
     collapsedWeightLabel() {
       let label = this.weight;
       if (this.checkIfNoValue(this.weight)) {
-          label = s__('Sidebar|No');
+        label = this.noValueLabel;
+      }
+
+      // Truncate with ellipsis after five digits
+      if (this.weight > 99999) {
+        label = `${this.weight.toString().substr(0, 5)}&hellip;`;
       }
 
       return label;
@@ -82,7 +85,7 @@
       return label;
     },
     shouldShowWeight() {
-        return !this.fetching && !this.shouldShowDropdown;
+      return !this.fetching && !this.shouldShowEditField;
     },
     tooltipTitle() {
       let tooltipTitle = s__('Sidebar|Weight');
@@ -94,66 +97,51 @@
       return tooltipTitle;
     },
   },
-    mounted() {
-      $(this.$refs.weightDropdown).glDropdown({
-        showMenuAbove: false,
-        selectable: true,
-        filterable: false,
-        multiSelect: false,
-        data: (searchTerm, callback) => {
-          callback(this.weightOptions);
-        },
-        renderRow: (weight) => {
-          const isActive = weight === this.weight ||
-            (this.checkIfNoValue(weight) && this.checkIfNoValue(this.weight));
-
-          return `
-            <li>
-              <a href="#" class="${isActive ? 'is-active' : ''}">
-                ${weight}
-              </a>
-            </li>
-          `;
-        },
-        hidden: () => {
-          this.shouldShowDropdown = false;
-          this.collapseAfterDropdownCloses = false;
-        },
-        clicked: (options) => {
-          const selectedValue = this.checkIfNoValue(options.selectedObj) ?
-            null :
-            options.selectedObj;
-          const resultantValue = options.isMarking ? selectedValue : null;
-          eventHub.$emit('updateWeight', resultantValue, this.id);
-        },
-      });
-    },
   methods: {
     checkIfNoValue(weight) {
-        return weight === undefined ||
-          weight === null ||
-          weight === 0 ||
-          weight === this.weightNoneValue;
+      return weight === undefined || weight === null || weight === this.weightNoneValue;
     },
-      showDropdown() {
-        this.shouldShowDropdown = true;
-        // Trigger the bootstrap dropdown
-        setTimeout(() => {
-          $(this.$refs.dropdownToggle).dropdown('toggle');
+    showEditField(bool = true) {
+      this.shouldShowEditField = bool;
+
+      if (this.shouldShowEditField) {
+        this.$nextTick(() => {
+          this.$refs.editableField.focus();
         });
+      }
     },
     onCollapsedClick() {
-        this.collapseAfterDropdownCloses = true;
-        this.showDropdown();
+      this.showEditField(true);
+      this.collapsedAfterUpdate = true;
     },
+    onSubmit(e) {
+      const { value } = e.target;
+      const validatedValue = Number(value);
+      const isNewValue = validatedValue !== this.weight;
+
+      this.hasValidInput = validatedValue >= 0 || value === '';
+
+      if (!this.loading && this.hasValidInput) {
+        $(this.$el).trigger('hidden.gl.dropdown');
+
+        if (isNewValue) {
+          eventHub.$emit('updateWeight', value, this.id);
+        }
+
+        this.showEditField(false);
+      }
     },
-  };
+    removeWeight() {
+      eventHub.$emit('updateWeight', '', this.id);
+    },
+  },
+};
 </script>
 
 <template>
   <div
     class="block weight"
-    :class="{ 'collapse-after-update': collapseAfterDropdownCloses }"
+    :class="{ 'collapse-after-update': collapsedAfterUpdate }"
   >
     <div
       class="sidebar-collapsed-icon js-weight-collapsed-block"
@@ -174,10 +162,9 @@
       />
       <span
         v-else
+        v-html="collapsedWeightLabel"
         class="js-weight-collapsed-weight-label"
-      >
-        {{ collapsedWeightLabel }}
-      </span>
+      ></span>
     </div>
     <div class="title hide-collapsed">
       {{ s__('Sidebar|Weight') }}
@@ -190,76 +177,55 @@
         v-if="editable"
         class="float-right js-weight-edit-link"
         href="#"
-        @click="showDropdown"
+        @click="showEditField(!shouldShowEditField)"
       >
         {{ __('Edit') }}
       </a>
     </div>
     <div
-      v-if="shouldShowWeight"
-      class="value hide-collapsed js-weight-weight-label"
+      class="hide-collapsed"
+      v-if="shouldShowEditField"
     >
-      <strong v-if="!isNoValue">
-        {{ weight }}
-      </strong>
+      <input
+        class="form-control"
+        type="text"
+        ref="editableField"
+        :value="weight"
+        @blur="onSubmit"
+        @keydown.enter="onSubmit"
+      />
       <span
-        v-else
-        class="no-value">
-        {{ noValueLabel }}
+        class="gl-field-error"
+        v-if="!hasValidInput"
+      >
+        <icon
+          name="merge-request-close-m"
+          :size="24"
+        />
+        {{ s__('Sidebar|Only numeral characters allowed') }}
       </span>
     </div>
-
     <div
-      class="selectbox hide-collapsed"
-      :class="{ show: shouldShowDropdown }"
-    >
-      <div
-        ref="weightDropdown"
-        class="dropdown"
-      >
-        <button
-          ref="dropdownToggle"
-          class="dropdown-menu-toggle js-gl-dropdown-refresh-on-open"
-          type="button"
-          data-toggle="dropdown"
+      v-if="shouldShowWeight"
+      class="value hide-collapsed js-weight-weight-label"
     >
-          <span
-            class="dropdown-toggle-text js-weight-dropdown-toggle-text"
-            :class="{ 'is-default': isNoValue }"
+      <span v-if="!isNoValue">
+        <strong class="js-weight-weight-label-value">{{ weight }}</strong>
+        &nbsp;-&nbsp;
+        <a
+          v-if="editable"
+          class="btn-default-hover-link js-weight-remove-link"
+          href="#"
+          @click="removeWeight"
         >
-            {{ dropdownToggleLabel }}
+          {{ __('remove weight') }}
+        </a>
       </span>
-          <i
-            aria-hidden="true"
-            data-hidden="true"
-            class="fa fa-chevron-down"
-          >
-          </i>
-        </button>
-        <div
-          v-once
-          class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-weight"
-        >
-          <div class="dropdown-title">
-            <span>
-              {{ changeWeightLabel }}
+      <span
+        v-else
+        class="no-value">
+        {{ noValueLabel }}
       </span>
-            <button
-              class="dropdown-title-button dropdown-menu-close"
-              aria-label="Close"
-              type="button"
-            >
-              <i
-                aria-hidden="true"
-                data-hidden="true"
-                class="fa fa-times dropdown-menu-close-icon"
-              >
-              </i>
-            </button>
-          </div>
-          <div class="dropdown-content js-weight-dropdown-content"></div>
-        </div>
-      </div>
     </div>
   </div>
 </template>

ee/app/models/ee/issue.rb

@@ -4,13 +4,15 @@ module EE
     extend ::Gitlab::Utils::Override
 
     prepended do
-      WEIGHT_RANGE = 1..9
+      WEIGHT_RANGE = 0..20
       WEIGHT_ALL = 'Everything'.freeze
-      WEIGHT_ANY = 'Any Weight'.freeze
-      WEIGHT_NONE = 'No Weight'.freeze
+      WEIGHT_ANY = 'Any'.freeze
+      WEIGHT_NONE = 'None'.freeze
 
       scope :order_weight_desc, -> { reorder ::Gitlab::Database.nulls_last_order('weight', 'DESC') }
       scope :order_weight_asc, -> { reorder ::Gitlab::Database.nulls_last_order('weight') }
+
+      validates :weight, allow_nil: true, numericality: { greater_than_or_equal_to: 0 }
     end
 
     # override

ee/app/services/ee/quick_actions/interpret_service.rb

@@ -21,13 +21,13 @@ module EE
       explanation do |weight|
         "Sets weight to #{weight}." if weight
       end
-      params ::Issue::WEIGHT_RANGE.to_s.squeeze('.').tr('.', '-')
+      params "0, 1, 2, …"
       condition do
         issuable.supports_weight? &&
           current_user.can?(:"admin_#{issuable.to_ability_name}", issuable)
       end
       parse_params do |weight|
-        weight.to_i if ::Issue.weight_filter_options.include?(weight.to_i)
+        weight.to_i if weight.to_i > 0
       end
       command :weight do |weight|
         @updates[:weight] = weight if weight

ee/changelogs/unreleased/3969-nonnegative-integer-weights.yml

+---
+title: Add support for non-negative integer weight values in issuable sidebar
+merge_request:
+author:
+type: changed

ee/spec/features/boards/scoped_issue_board_spec.rb

@@ -170,8 +170,8 @@ describe 'Scoped issue boards', :js do
           end
         end
 
-        it 'creates board filtering by "Any weight"' do
-          create_board_weight('Any Weight')
+        it 'creates board filtering by "Any" weight' do
+          create_board_weight('Any')
 
           expect(page).to have_selector('.board-card', count: 4)
         end
@@ -356,7 +356,7 @@ describe 'Scoped issue boards', :js do
         end
 
         it 'sets board to Any weight' do
-          update_board_weight('Any Weight')
+          update_board_weight('Any')
 
           expect(page).to have_selector('.board-card', count: 4)
         end

ee/spec/features/boards/sidebar_spec.rb

@@ -186,7 +186,7 @@ describe 'Issue Boards', :js do
 
       page.within '.weight' do
         click_link 'Edit'
-        click_link '1'
+        find('.block.weight input').send_keys 1, :enter
 
         page.within '.value' do
           expect(page).to have_content '1'
@@ -212,8 +212,7 @@ describe 'Issue Boards', :js do
       wait_for_requests
 
       page.within '.weight' do
-        click_link 'Edit'
-        click_link 'No Weight'
+        click_link 'remove weight'
 
         page.within '.value' do
           expect(page).to have_content 'None'

ee/spec/features/issues/filtered_search/dropdown_weight_spec.rb

@@ -17,7 +17,7 @@ describe 'Dropdown weight', :js do
   end
 
   def click_weight(text)
-    find('#js-dropdown-weight .filter-dropdown .filter-dropdown-item', text: text).click
+    find('#js-dropdown-weight .filter-dropdown .filter-dropdown-item', text: text, exact_text: true).click
   end
 
   def click_static_weight(text)
@@ -49,7 +49,7 @@ describe 'Dropdown weight', :js do
     it 'should load all the weights when opened' do
       send_keys_to_filtered_search('weight:')
 
-      expect(page.all('#js-dropdown-weight .filter-dropdown .filter-dropdown-item').size).to eq(9)
+      expect(page.all('#js-dropdown-weight .filter-dropdown .filter-dropdown-item').size).to eq(21)
     end
   end
 
@@ -83,10 +83,10 @@ describe 'Dropdown weight', :js do
     end
 
     it 'fills in `no weight`' do
-      click_static_weight('No Weight')
+      click_static_weight('None')
 
       expect(page).to have_css(js_dropdown_weight, visible: false)
-      expect_tokens([{ name: 'Weight', value: 'none' }])
+      expect_tokens([{ name: 'Weight', value: 'None' }])
       expect_filtered_search_input_empty
     end
   end

ee/spec/features/issues/issue_sidebar_spec.rb

+require 'rails_helper'
+
+feature 'Issue Sidebar' do
+  include MobileHelpers
+
+  let(:group) { create(:group, :nested) }
+  let(:project) { create(:project, :public, namespace: group) }
+  let!(:user) { create(:user)}
+  let!(:label) { create(:label, project: project, title: 'bug') }
+  let(:issue) { create(:labeled_issue, project: project, labels: [label]) }
+
+  before do
+    sign_in(user)
+  end
+
+  context 'updating weight', :js do
+    before do
+      project.add_master(user)
+      visit_issue(project, issue)
+    end
+
+    it 'updates weight in sidebar to 1' do
+      page.within '.weight' do
+        click_link 'Edit'
+        find('input').send_keys 1, :enter
+
+        page.within '.value' do
+          expect(page).to have_content '1'
+        end
+      end
+    end
+
+    it 'updates weight in sidebar to no weight' do
+      page.within '.weight' do
+        click_link 'Edit'
+        find('input').send_keys 1, :enter
+
+        page.within '.value' do
+          expect(page).to have_content '1'
+        end
+
+        click_link 'remove weight'
+
+        page.within '.value' do
+          expect(page).to have_content 'None'
+        end
+      end
+    end
+  end
+
+  def visit_issue(project, issue)
+    visit project_issue_path(project, issue)
+  end
+end

ee/spec/models/issue_spec.rb

@@ -4,6 +4,29 @@ describe Issue do
   using RSpec::Parameterized::TableSyntax
   include ExternalAuthorizationServiceHelpers
 
+  describe 'validations' do
+    subject { build(:issue) }
+
+    describe 'weight' do
+      it 'is not valid when negative number' do
+        subject.weight = -1
+
+        expect(subject).not_to be_valid
+        expect(subject.errors[:weight]).not_to be_empty
+      end
+
+      it 'is valid when non-negative' do
+        subject.weight = 0
+
+        expect(subject).to be_valid
+
+        subject.weight = 1
+
+        expect(subject).to be_valid
+      end
+    end
+  end
+
   describe '#allows_multiple_assignees?' do
     it 'does not allow multiple assignees without license' do
       stub_licensed_features(multiple_issue_assignees: false)

spec/features/issues/issue_sidebar_spec.rb

@@ -225,35 +225,6 @@ feature 'Issue Sidebar' do
     end
   end
 
-  context 'updating weight', :js do
-    before do
-      project.add_master(user)
-      visit_issue(project, issue)
-    end
-
-    it 'updates weight in sidebar to 1' do
-      page.within '.weight' do
-        click_link 'Edit'
-        click_link '1'
-
-        page.within '.value' do
-          expect(page).to have_content '1'
-        end
-      end
-    end
-
-    it 'updates weight in sidebar to no weight' do
-      page.within '.weight' do
-        click_link 'Edit'
-        click_link 'No Weight'
-
-        page.within '.value' do
-          expect(page).to have_content 'None'
-        end
-      end
-    end
-  end
-
   def visit_issue(project, issue)
     visit project_issue_path(project, issue)
   end

spec/features/issues_spec.rb

@@ -546,7 +546,7 @@ describe 'Issues' do
           expect(page).to have_content "None"
           click_link 'Edit'
 
-          find('.dropdown-content a', text: '1').click
+          find('.block.weight input').send_keys 1, :enter
 
           page.within('.value') do
             expect(page).to have_content "1"

spec/javascripts/filtered_search/filtered_search_token_keys_issues_spec.js

@@ -7,7 +7,7 @@ describe('Filtered Search Token Keys (Issues EE)', () => {
     param: '',
     symbol: '',
     icon: 'balance-scale',
-    tag: 'weight',
+    tag: 'number',
   };
 
   describe('get', () => {

spec/javascripts/sidebar/ee_mock_data.js

@@ -9,7 +9,8 @@ RESPONSE_MAP.GET['/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar'] =
       username: 'user0',
       id: 22,
       state: 'active',
-      avatar_url: 'http: //www.gravatar.com/avatar/52e4ce24a915fb7e51e1ad3b57f4b00a?s=80\u0026d=identicon',
+      avatar_url:
+        'http: //www.gravatar.com/avatar/52e4ce24a915fb7e51e1ad3b57f4b00a?s=80\u0026d=identicon',
       web_url: 'http: //localhost:3001/user0',
     },
     {
@@ -17,7 +18,8 @@ RESPONSE_MAP.GET['/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar'] =
       username: 'tajuana',
       id: 18,
       state: 'active',
-      avatar_url: 'http: //www.gravatar.com/avatar/4852a41fb41616bf8f140d3701673f53?s=80\u0026d=identicon',
+      avatar_url:
+        'http: //www.gravatar.com/avatar/4852a41fb41616bf8f140d3701673f53?s=80\u0026d=identicon',
       web_url: 'http: //localhost:3001/tajuana',
     },
     {
@@ -25,7 +27,8 @@ RESPONSE_MAP.GET['/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar'] =
       username: 'michaele.will',
       id: 16,
       state: 'active',
-      avatar_url: 'http: //www.gravatar.com/avatar/e301827eb03be955c9c172cb9a8e4e8a?s=80\u0026d=identicon',
+      avatar_url:
+        'http: //www.gravatar.com/avatar/e301827eb03be955c9c172cb9a8e4e8a?s=80\u0026d=identicon',
       web_url: 'http: //localhost:3001/michaele.will',
     },
   ],
@@ -37,7 +40,8 @@ RESPONSE_MAP.GET['/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar'] =
       username: 'user0',
       id: 22,
       state: 'active',
-      avatar_url: 'http: //www.gravatar.com/avatar/52e4ce24a915fb7e51e1ad3b57f4b00a?s=80\u0026d=identicon',
+      avatar_url:
+        'http: //www.gravatar.com/avatar/52e4ce24a915fb7e51e1ad3b57f4b00a?s=80\u0026d=identicon',
       web_url: 'http: //localhost:3001/user0',
     },
     {
@@ -45,7 +49,8 @@ RESPONSE_MAP.GET['/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar'] =
       username: 'tajuana',
       id: 18,
       state: 'active',
-      avatar_url: 'http: //www.gravatar.com/avatar/4852a41fb41616bf8f140d3701673f53?s=80\u0026d=identicon',
+      avatar_url:
+        'http: //www.gravatar.com/avatar/4852a41fb41616bf8f140d3701673f53?s=80\u0026d=identicon',
       web_url: 'http: //localhost:3001/tajuana',
     },
     {
@@ -53,7 +58,8 @@ RESPONSE_MAP.GET['/gitlab-org/gitlab-shell/issues/5.json?serializer=sidebar'] =
       username: 'michaele.will',
       id: 16,
       state: 'active',
-      avatar_url: 'http: //www.gravatar.com/avatar/e301827eb03be955c9c172cb9a8e4e8a?s=80\u0026d=identicon',
+      avatar_url:
+        'http: //www.gravatar.com/avatar/e301827eb03be955c9c172cb9a8e4e8a?s=80\u0026d=identicon',
       web_url: 'http: //localhost:3001/michaele.will',
     },
   ],
@@ -67,8 +73,8 @@ export default {
   ...CEMockData,
   mediator: {
     ...CEMockData.mediator,
-    weightOptions: ['No Weight', 0, 1, 3],
-    weightNoneValue: 'No Weight',
+    weightOptions: ['None', 0, 1, 3],
+    weightNoneValue: 'None',
   },
   responseMap: RESPONSE_MAP,
 };

spec/javascripts/sidebar/ee_sidebar_store_spec.js

@@ -6,8 +6,8 @@ describe('EE Sidebar store', () => {
   beforeEach(() => {
     store = new SidebarStore({
       weight: null,
-      weightOptions: ['No Weight', 0, 1, 3],
-      weightNoneValue: 'No Weight',
+      weightOptions: ['None', 0, 1, 3],
+      weightNoneValue: 'None',
     });
   });
 

spec/javascripts/sidebar/weight_spec.js

 import Vue from 'vue';
 import weight from 'ee/sidebar/components/weight/weight.vue';
 import eventHub from '~/sidebar/event_hub';
+import { ENTER_KEY_CODE } from '~/lib/utils/keycodes';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
 
 const DEFAULT_PROPS = {
-  weightOptions: ['No Weight', 1, 2, 3],
-  weightNoneValue: 'No Weight',
+  weightNoneValue: 'None',
 };
 
-describe('Weight', function () {
+describe('Weight', function() {
   let vm;
   let Weight;
 
@@ -51,9 +50,12 @@ describe('Weight', function () {
       weight: WEIGHT,
     });
 
-    expect(vm.$el.querySelector('.js-weight-collapsed-weight-label').textContent.trim()).toEqual(`${WEIGHT}`);
-    expect(vm.$el.querySelector('.js-weight-weight-label').textContent.trim()).toEqual(`${WEIGHT}`);
-    expect(vm.$el.querySelector('.js-weight-dropdown-toggle-text').textContent.trim()).toEqual(`${WEIGHT}`);
+    expect(vm.$el.querySelector('.js-weight-collapsed-weight-label').textContent.trim()).toEqual(
+      `${WEIGHT}`,
+    );
+    expect(vm.$el.querySelector('.js-weight-weight-label-value').textContent.trim()).toEqual(
+      `${WEIGHT}`,
+    );
   });
 
   it('shows weight no-value', () => {
@@ -64,20 +66,23 @@ describe('Weight', function () {
       weight: WEIGHT,
     });
 
-    expect(vm.$el.querySelector('.js-weight-collapsed-weight-label').textContent.trim()).toEqual('No');
-    expect(vm.$el.querySelector('.js-weight-weight-label').textContent.trim()).toEqual('None');
-    // Put a placeholder in the dropdown toggle
-    expect(vm.$el.querySelector('.js-weight-dropdown-toggle-text').textContent.trim()).toEqual('Weight');
+    expect(vm.$el.querySelector('.js-weight-collapsed-weight-label').textContent.trim()).toEqual(
+      'None',
+    );
+    expect(vm.$el.querySelector('.js-weight-weight-label .no-value').textContent.trim()).toEqual(
+      'None',
+    );
   });
 
-  it('adds `collapse-after-update` class when clicking the collapsed block', (done) => {
+  it('adds `collapse-after-update` class when clicking the collapsed block', done => {
     vm = mountComponent(Weight, {
       ...DEFAULT_PROPS,
     });
 
     vm.$el.querySelector('.js-weight-collapsed-block').click();
 
-    vm.$nextTick()
+    vm
+      .$nextTick()
       .then(() => {
         expect(vm.$el.classList.contains('collapse-after-update')).toEqual(true);
       })
@@ -85,26 +90,28 @@ describe('Weight', function () {
       .catch(done.fail);
   });
 
-  it('shows dropdown on "Edit" link click', (done) => {
+  it('shows dropdown on "Edit" link click', done => {
     vm = mountComponent(Weight, {
       ...DEFAULT_PROPS,
       editable: true,
     });
 
-    expect(vm.shouldShowDropdown).toEqual(false);
+    expect(vm.shouldShowEditField).toEqual(false);
 
     vm.$el.querySelector('.js-weight-edit-link').click();
 
-    vm.$nextTick()
+    vm
+      .$nextTick()
       .then(() => {
-        expect(vm.shouldShowDropdown).toEqual(true);
+        expect(vm.shouldShowEditField).toEqual(true);
       })
       .then(done)
       .catch(done.fail);
   });
 
-  it('emits event on dropdown item click', (done) => {
+  it('emits event on input submission', done => {
     const ID = 123;
+    const expectedWeightValue = '3';
     spyOn(eventHub, '$emit');
     vm = mountComponent(Weight, {
       ...DEFAULT_PROPS,
@@ -114,15 +121,78 @@ describe('Weight', function () {
 
     vm.$el.querySelector('.js-weight-edit-link').click();
 
-    vm.$nextTick()
-      .then(() => getSetTimeoutPromise())
-      .then(() => {
-        vm.$el.querySelector('.js-weight-dropdown-content li:nth-child(2) a').click();
-      })
-      .then(() => {
-        expect(eventHub.$emit).toHaveBeenCalledWith('updateWeight', DEFAULT_PROPS.weightOptions[1], ID);
-      })
-      .then(done)
-      .catch(done.fail);
+    vm.$nextTick(() => {
+      const event = new CustomEvent('keydown');
+      event.keyCode = ENTER_KEY_CODE;
+
+      vm.$refs.editableField.click();
+      vm.$refs.editableField.value = expectedWeightValue;
+      vm.$refs.editableField.dispatchEvent(event);
+
+      expect(vm.hasValidInput).toBe(true);
+      expect(eventHub.$emit).toHaveBeenCalledWith('updateWeight', expectedWeightValue, ID);
+      done();
+    });
+  });
+
+  it('emits event on remove weight link click', done => {
+    const ID = 123;
+    spyOn(eventHub, '$emit');
+    vm = mountComponent(Weight, {
+      ...DEFAULT_PROPS,
+      editable: true,
+      weight: 3,
+      id: ID,
+    });
+
+    vm.$el.querySelector('.js-weight-remove-link').click();
+
+    vm.$nextTick(() => {
+      expect(vm.hasValidInput).toBe(true);
+      expect(eventHub.$emit).toHaveBeenCalledWith('updateWeight', '', ID);
+      done();
+    });
+  });
+
+  it('triggers error on invalid string value', done => {
+    vm = mountComponent(Weight, {
+      ...DEFAULT_PROPS,
+      editable: true,
+    });
+
+    vm.$el.querySelector('.js-weight-edit-link').click();
+
+    vm.$nextTick(() => {
+      const event = new CustomEvent('keydown');
+      event.keyCode = ENTER_KEY_CODE;
+
+      vm.$refs.editableField.click();
+      vm.$refs.editableField.value = 'potato';
+      vm.$refs.editableField.dispatchEvent(event);
+
+      expect(vm.hasValidInput).toBe(false);
+      done();
+    });
+  });
+
+  it('triggers error on invalid negative integer value', done => {
+    vm = mountComponent(Weight, {
+      ...DEFAULT_PROPS,
+      editable: true,
+    });
+
+    vm.$el.querySelector('.js-weight-edit-link').click();
+
+    vm.$nextTick(() => {
+      const event = new CustomEvent('keydown');
+      event.keyCode = ENTER_KEY_CODE;
+
+      vm.$refs.editableField.click();
+      vm.$refs.editableField.value = -9001;
+      vm.$refs.editableField.dispatchEvent(event);
+
+      expect(vm.hasValidInput).toBe(false);
+      done();
+    });
   });
 });