Merge branch 'tz-optimise-label-select' into 'master'

Optimize Sidebar Label Selector

See merge request gitlab-org/gitlab!65530

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue

@@ -315,7 +315,7 @@ export default {
       </dropdown-value>
       <dropdown-button v-show="dropdownButtonVisible" class="gl-mt-2" />
       <dropdown-contents
-        v-show="dropdownButtonVisible && showDropdownContents"
+        v-if="dropdownButtonVisible && showDropdownContents"
         ref="dropdownContents"
         :render-on-top="!contentIsOnViewport"
       />

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js

@@ -20,7 +20,11 @@ export const receiveLabelsFailure = ({ commit }) => {
     message: __('Error fetching labels.'),
   });
 };
-export const fetchLabels = ({ state, dispatch }) => {
+export const fetchLabels = ({ state, dispatch }, options) => {
+  if (state.labelsFetched && (!options || !options.refetch)) {
+    return Promise.resolve();
+  }
+
   dispatch('requestLabels');
   return axios
     .get(state.labelsFetchPath)
@@ -46,6 +50,7 @@ export const createLabel = ({ state, dispatch }, label) => {
     })
     .then(({ data }) => {
       if (data.id) {
+        dispatch('fetchLabels', { refetch: true });
         dispatch('receiveCreateLabelSuccess');
         dispatch('toggleDropdownContentsCreateView');
       } else {

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/mutations.js

@@ -36,6 +36,7 @@ export default {
     // selectedLabels array.
     const selectedLabelIds = state.selectedLabels.map((label) => label.id);
     state.labelsFetchInProgress = false;
+    state.labelsFetched = true;
     state.labels = labels.reduce((allLabels, label) => {
       allLabels.push({
         ...label,

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/state.js

 export default () => ({
   // Initial Data
   labels: [],
+  labelsFetched: false,
   selectedLabels: [],
   labelsListTitle: '',
   labelsCreateTitle: '',

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/labels_select_root.vue

@@ -330,7 +330,7 @@ export default {
       </dropdown-value>
       <dropdown-button v-show="dropdownButtonVisible" class="gl-mt-2" />
       <dropdown-contents
-        v-show="dropdownButtonVisible && showDropdownContents"
+        v-if="dropdownButtonVisible && showDropdownContents"
         ref="dropdownContents"
         :render-on-top="!contentIsOnViewport"
         :labels-create-title="labelsCreateTitle"

spec/frontend/vue_shared/components/sidebar/labels_select_vue/store/actions_spec.js

@@ -214,7 +214,7 @@ describe('LabelsSelect Actions', () => {
     });
 
     describe('on success', () => {
-      it('dispatches `requestCreateLabel`, `receiveCreateLabelSuccess` & `toggleDropdownContentsCreateView` actions', (done) => {
+      it('dispatches `requestCreateLabel`, `fetchLabels` & `receiveCreateLabelSuccess` & `toggleDropdownContentsCreateView` actions', (done) => {
         const label = { id: 1 };
         mock.onPost(/labels.json/).replyOnce(200, label);
 
@@ -225,6 +225,7 @@ describe('LabelsSelect Actions', () => {
           [],
           [
             { type: 'requestCreateLabel' },
+            { payload: { refetch: true }, type: 'fetchLabels' },
             { type: 'receiveCreateLabelSuccess' },
             { type: 'toggleDropdownContentsCreateView' },
           ],