Merge branch '204821-step-1-clean-up-collapsible-panel-things' into 'master'

Step 1 - Clean up some collapsible_panel things

See merge request gitlab-org/gitlab!32464

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

@@ -23,6 +23,8 @@ export default {
 
       this.updateActivityBarView(view);
 
+      // TODO: We must use JQuery here to interact with the Bootstrap tooltip API
+      // https://gitlab.com/gitlab-org/gitlab/-/issues/217577
       $(e.currentTarget).tooltip('hide');
     },
   },

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

@@ -9,7 +9,7 @@ import CommitForm from './commit_sidebar/form.vue';
 import IdeReview from './ide_review.vue';
 import SuccessMessage from './commit_sidebar/success_message.vue';
 import IdeProjectHeader from './ide_project_header.vue';
-import { leftSidebarViews } from '../constants';
+import { leftSidebarViews, LEFT_SIDEBAR_INIT_WIDTH } from '../constants';
 
 export default {
   components: {
@@ -33,11 +33,16 @@ export default {
       );
     },
   },
+  LEFT_SIDEBAR_INIT_WIDTH,
 };
 </script>
 
 <template>
-  <resizable-panel :initial-width="340" side="left" class="flex-column">
+  <resizable-panel
+    :initial-width="$options.LEFT_SIDEBAR_INIT_WIDTH"
+    side="left"
+    class="multi-file-commit-panel 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/resizable_panel.vue

 <script>
 import { mapActions } from 'vuex';
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
+import { DEFAULT_SIDEBAR_MIN_WIDTH } from '../constants';
 
 export default {
   components: {
@@ -14,7 +15,7 @@ export default {
     minSize: {
       type: Number,
       required: false,
-      default: 340,
+      default: DEFAULT_SIDEBAR_MIN_WIDTH,
     },
     side: {
       type: String,
@@ -45,7 +46,7 @@ export default {
 </script>
 
 <template>
-  <div :style="panelStyle" class="multi-file-commit-panel">
+  <div :style="panelStyle">
     <slot></slot>
     <panel-resizer
       :size.sync="width"

app/assets/javascripts/ide/constants.js

@@ -4,6 +4,9 @@ export const MAX_WINDOW_HEIGHT_COMPACT = 750;
 export const MAX_TITLE_LENGTH = 50;
 export const MAX_BODY_LENGTH = 72;
 
+export const LEFT_SIDEBAR_INIT_WIDTH = 340;
+export const DEFAULT_SIDEBAR_MIN_WIDTH = 340;
+
 // File view modes
 export const FILE_VIEW_MODE_EDITOR = 'editor';
 export const FILE_VIEW_MODE_PREVIEW = 'preview';

app/assets/stylesheets/page_bundles/ide.scss

@@ -65,6 +65,7 @@ $ide-commit-header-height: 48px;
   flex-direction: column;
   flex: 1;
   border-left: 1px solid var(--ide-border-color, $white-dark);
+  border-right: 1px solid var(--ide-border-color, $white-dark);
   overflow: hidden;
 }
 
@@ -584,14 +585,15 @@ $ide-commit-header-height: 48px;
       background: var(--ide-highlight-background, $white);
     }
 
-    &.is-right {
-      padding-right: $gl-padding;
-      padding-left: $gl-padding + 1px;
+  }
 
-      &::after {
-        right: auto;
-        left: -1px;
-      }
+  &.is-right {
+    padding-right: $gl-padding;
+    padding-left: $gl-padding + 1px;
+
+    &::after {
+      right: auto;
+      left: -1px;
     }
   }
 }
@@ -877,15 +879,11 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-right-sidebar {
-  .ide-activity-bar {
-    border-left: 1px solid var(--ide-border-color, $white-dark);
-  }
-
   .multi-file-commit-panel-inner {
     width: 350px;
     padding: $grid-size 0;
     background-color: var(--ide-highlight-background, $white);
-    border-left: 1px solid var(--ide-border-color, $white-dark);
+    border-right: 1px solid var(--ide-border-color, $white-dark);
   }
 
   .ide-right-sidebar-jobs-detail {