Merge branch 'fe-ide-clean-resiable-panel' into 'master'

Remove unused collapsible props from IDE

See merge request gitlab-org/gitlab!31950

app/assets/javascripts/ide/components/ide_side_bar.vue

@@ -37,7 +37,7 @@ export default {
 </script>
 
 <template>
-  <resizable-panel :collapsible="false" :initial-width="340" side="left" class="flex-column">
+  <resizable-panel :initial-width="340" side="left" class="flex-column">
     <template v-if="loading">
       <div class="multi-file-commit-panel-inner">
         <div v-for="n in 3" :key="n" class="multi-file-loading-container">

app/assets/javascripts/ide/components/panes/collapsible_sidebar.vue

@@ -103,7 +103,6 @@ export default {
   >
     <resizable-panel
       v-show="isOpen"
-      :collapsible="false"
       :initial-width="width"
       :min-size="width"
       :class="`ide-${side}-sidebar-${currentView}`"

app/assets/javascripts/ide/components/repo_commit_section.vue

@@ -17,13 +17,7 @@ export default {
     tooltip,
   },
   computed: {
-    ...mapState([
-      'changedFiles',
-      'stagedFiles',
-      'rightPanelCollapsed',
-      'lastCommitMsg',
-      'unusedSeal',
-    ]),
+    ...mapState(['changedFiles', 'stagedFiles', 'lastCommitMsg', 'unusedSeal']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
     ...mapGetters(['lastOpenedFile', 'hasChanges', 'someUncommittedChanges', 'activeFile']),
     ...mapGetters('commit', ['discardDraftButtonDisabled']),

app/assets/javascripts/ide/components/repo_editor.vue

@@ -31,7 +31,6 @@ export default {
       rightPaneIsOpen: 'isOpen',
     }),
     ...mapState([
-      'rightPanelCollapsed',
       'viewer',
       'panelResizing',
       'currentActivityView',
@@ -118,9 +117,6 @@ export default {
         });
       }
     },
-    rightPanelCollapsed() {
-      this.refreshEditorDimensions();
-    },
     viewer() {
       if (!this.file.pending) {
         this.createEditorInstance();

app/assets/javascripts/ide/components/resizable_panel.vue

 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions } from 'vuex';
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 
 export default {
@@ -7,10 +7,6 @@ export default {
     PanelResizer,
   },
   props: {
-    collapsible: {
-      type: Boolean,
-      required: true,
-    },
     initialWidth: {
       type: Number,
       required: true,
@@ -31,11 +27,6 @@ export default {
     };
   },
   computed: {
-    ...mapState({
-      collapsed(state) {
-        return state[`${this.side}PanelCollapsed`];
-      },
-    }),
     panelStyle() {
       if (!this.collapsed) {
         return {
@@ -47,33 +38,17 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['setPanelCollapsedStatus', 'setResizingStatus']),
-    toggleFullbarCollapsed() {
-      if (this.collapsed && this.collapsible) {
-        this.setPanelCollapsedStatus({
-          side: this.side,
-          collapsed: !this.collapsed,
-        });
-      }
-    },
+    ...mapActions(['setResizingStatus']),
   },
   maxSize: window.innerWidth / 2,
 };
 </script>
 
 <template>
-  <div
-    :class="{
-      'is-collapsed': collapsed && collapsible,
-    }"
-    :style="panelStyle"
-    class="multi-file-commit-panel"
-    @click="toggleFullbarCollapsed"
-  >
+  <div :style="panelStyle" class="multi-file-commit-panel">
     <slot></slot>
     <panel-resizer
       :size.sync="width"
-      :enabled="!collapsed"
       :start-size="initialWidth"
       :min-size="minSize"
       :max-size="$options.maxSize"

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

@@ -24,14 +24,6 @@ export const closeAllFiles = ({ state, dispatch }) => {
   state.openFiles.forEach(file => dispatch('closeFile', file));
 };
 
-export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => {
-  if (side === 'left') {
-    commit(types.SET_LEFT_PANEL_COLLAPSED, collapsed);
-  } else {
-    commit(types.SET_RIGHT_PANEL_COLLAPSED, collapsed);
-  }
-};
-
 export const setResizingStatus = ({ commit }, resizing) => {
   commit(types.SET_RESIZING_STATUS, resizing);
 };

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

@@ -2,8 +2,6 @@ export const SET_INITIAL_DATA = 'SET_INITIAL_DATA';
 export const TOGGLE_LOADING = 'TOGGLE_LOADING';
 export const SET_LAST_COMMIT_DATA = 'SET_LAST_COMMIT_DATA';
 export const SET_LAST_COMMIT_MSG = 'SET_LAST_COMMIT_MSG';
-export const SET_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED';
-export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED';
 export const SET_RESIZING_STATUS = 'SET_RESIZING_STATUS';
 export const SET_EMPTY_STATE_SVGS = 'SET_EMPTY_STATE_SVGS';
 export const SET_LINKS = 'SET_LINKS';

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

@@ -29,16 +29,6 @@ export default {
       });
     }
   },
-  [types.SET_LEFT_PANEL_COLLAPSED](state, collapsed) {
-    Object.assign(state, {
-      leftPanelCollapsed: collapsed,
-    });
-  },
-  [types.SET_RIGHT_PANEL_COLLAPSED](state, collapsed) {
-    Object.assign(state, {
-      rightPanelCollapsed: collapsed,
-    });
-  },
   [types.SET_RESIZING_STATUS](state, resizing) {
     Object.assign(state, {
       panelResizing: resizing,

app/assets/javascripts/ide/stores/state.js

@@ -15,8 +15,6 @@ export default () => ({
   parentTreeUrl: '',
   trees: {},
   projects: {},
-  leftPanelCollapsed: false,
-  rightPanelCollapsed: false,
   panelResizing: false,
   entries: {},
   viewer: viewerTypes.edit,

spec/frontend/ide/components/commit_sidebar/list_spec.js

@@ -21,8 +21,6 @@ describe('Multi-file editor commit sidebar list', () => {
       keyPrefix: 'staged',
     });
 
-    vm.$store.state.rightPanelCollapsed = false;
-
     vm.$mount();
   });
 

spec/frontend/ide/components/repo_commit_section_spec.js

@@ -36,7 +36,6 @@ describe('RepoCommitSection', () => {
       }),
     );
 
-    store.state.rightPanelCollapsed = false;
     store.state.currentBranch = 'master';
     store.state.changedFiles = [];
     store.state.stagedFiles = [{ ...files[0] }, { ...files[1] }];

spec/frontend/ide/stores/mutations_spec.js

@@ -55,30 +55,6 @@ describe('Multi-file store mutations', () => {
     });
   });
 
-  describe('SET_LEFT_PANEL_COLLAPSED', () => {
-    it('sets left panel collapsed', () => {
-      mutations.SET_LEFT_PANEL_COLLAPSED(localState, true);
-
-      expect(localState.leftPanelCollapsed).toBeTruthy();
-
-      mutations.SET_LEFT_PANEL_COLLAPSED(localState, false);
-
-      expect(localState.leftPanelCollapsed).toBeFalsy();
-    });
-  });
-
-  describe('SET_RIGHT_PANEL_COLLAPSED', () => {
-    it('sets right panel collapsed', () => {
-      mutations.SET_RIGHT_PANEL_COLLAPSED(localState, true);
-
-      expect(localState.rightPanelCollapsed).toBeTruthy();
-
-      mutations.SET_RIGHT_PANEL_COLLAPSED(localState, false);
-
-      expect(localState.rightPanelCollapsed).toBeFalsy();
-    });
-  });
-
   describe('CLEAR_STAGED_CHANGES', () => {
     it('clears stagedFiles array', () => {
       localState.stagedFiles.push('a');

spec/javascripts/ide/components/repo_editor_spec.js

@@ -62,11 +62,6 @@ describe('RepoEditor', () => {
   });
 
   const findEditor = () => vm.$el.querySelector('.multi-file-editor-holder');
-  const changeRightPanelCollapsed = () => {
-    const { state } = vm.$store;
-
-    state.rightPanelCollapsed = !state.rightPanelCollapsed;
-  };
 
   it('sets renderWhitespace to `all`', () => {
     vm.$store.state.renderWhitespaceInCode = true;
@@ -319,17 +314,6 @@ describe('RepoEditor', () => {
       spyOn(vm.editor, 'updateDiffView');
     });
 
-    it('calls updateDimensions when rightPanelCollapsed is changed', done => {
-      changeRightPanelCollapsed();
-
-      vm.$nextTick(() => {
-        expect(vm.editor.updateDimensions).toHaveBeenCalled();
-        expect(vm.editor.updateDiffView).toHaveBeenCalled();
-
-        done();
-      });
-    });
-
     it('calls updateDimensions when panelResizing is false', done => {
       vm.$store.state.panelResizing = true;
 
@@ -407,17 +391,6 @@ describe('RepoEditor', () => {
       expect(findEditor()).toHaveCss({ display: 'none' });
     });
 
-    it('should not update dimensions', done => {
-      changeRightPanelCollapsed();
-
-      vm.$nextTick()
-        .then(() => {
-          expect(vm.editor.updateDimensions).not.toHaveBeenCalled();
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-
     describe('when file view mode changes to editor', () => {
       beforeEach(done => {
         vm.file.viewMode = FILE_VIEW_MODE_EDITOR;