diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index f32d35bf7740114dc9ee351575f3dac279345b4b..95e46c1e2e812c57ceb4dde100848aeb6a1cfdfa 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,9 +1,9 @@
 <script>
 import { GlSkeletonLoader } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
-import { SIDEBAR_INIT_WIDTH, leftSidebarViews } from '../constants';
+import CommitForm from '~/vue_shared/components/commit_sidebar/form.vue';
+import { SIDEBAR_INIT_WIDTH, leftSidebarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../constants';
 import ActivityBar from './activity_bar.vue';
-import CommitForm from './commit_sidebar/form.vue';
 import IdeProjectHeader from './ide_project_header.vue';
 import IdeTree from './ide_tree.vue';
 import ResizablePanel from './resizable_panel.vue';
@@ -21,9 +21,34 @@ export default {
     CommitForm,
     IdeProjectHeader,
   },
+  data() {
+    return {
+      isCompact: true,
+    };
+  },
   computed: {
     ...mapState(['loading', 'currentActivityView', 'changedFiles', 'stagedFiles', 'lastCommitMsg']),
     ...mapGetters(['currentProject', 'someUncommittedChanges']),
+    currentViewIsCommitView() {
+      return this.currentActivityView === leftSidebarViews.commit.name;
+    },
+  },
+  watch: {
+    currentActivityView: 'handleCompactState',
+    someUncommittedChanges: 'handleCompactState',
+    lastCommitMsg: 'handleCompactState',
+  },
+  methods: {
+    handleCompactState() {
+      if (this.lastCommitMsg) {
+        this.isCompact = false;
+      } else {
+        this.isCompact =
+          !this.someUncommittedChanges ||
+          !this.currentViewIsCommitView ||
+          window.innerHeight < MAX_WINDOW_HEIGHT_COMPACT;
+      }
+    },
   },
   SIDEBAR_INIT_WIDTH,
 };
@@ -52,7 +77,7 @@ export default {
               <component :is="currentActivityView" @tree-ready="$emit('tree-ready')" />
             </keep-alive>
           </div>
-          <commit-form />
+          <commit-form :collapsible="true" :compact="isCompact" />
         </div>
       </div>
     </template>
diff --git a/app/assets/javascripts/ide/lib/errors.js b/app/assets/javascripts/ide/lib/errors.js
index a8a048e588f47bc10e796b7b470d831b1b239584..ceb79422aa764195fbd3cc78d55cde60910ae8f6 100644
--- a/app/assets/javascripts/ide/lib/errors.js
+++ b/app/assets/javascripts/ide/lib/errors.js
@@ -1,6 +1,7 @@
 import { escape } from 'lodash';
 import { __ } from '~/locale';
-import { COMMIT_TO_NEW_BRANCH } from '../stores/modules/commit/constants';
+import { COMMIT_TO_NEW_BRANCH } from '~/vue_shared/components/commit_sidebar/constants';
+import { createUnexpectedCommitError } from '~/vue_shared/components/commit_sidebar/errors';
 
 const CODEOWNERS_REGEX = /Push.*protected branches.*CODEOWNERS/;
 const BRANCH_CHANGED_REGEX = /changed.*since.*start.*edit/;
@@ -11,11 +12,6 @@ const createNewBranchAndCommit = (store) =>
     .dispatch('commit/updateCommitAction', COMMIT_TO_NEW_BRANCH)
     .then(() => store.dispatch('commit/commitChanges'));
 
-export const createUnexpectedCommitError = (message) => ({
-  title: __('Unexpected error'),
-  messageHTML: escape(message) || __('Could not commit. An unexpected error occurred.'),
-});
-
 export const createCodeownersCommitError = (message) => ({
   title: __('CODEOWNERS rule violation'),
   messageHTML: escape(message),
diff --git a/app/assets/javascripts/ide/stores/index.js b/app/assets/javascripts/ide/stores/index.js
index b660ff178a2fb4023057c7c1606325449600f47f..7a9b74f579a23bd2f253d6b1affd13ee7e209403 100644
--- a/app/assets/javascripts/ide/stores/index.js
+++ b/app/assets/javascripts/ide/stores/index.js
@@ -1,10 +1,11 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import commitModule from '~/vue_shared/components/commit_sidebar/store';
 import * as actions from './actions';
 import * as getters from './getters';
 import branches from './modules/branches';
 import clientsideModule from './modules/clientside';
-import commitModule from './modules/commit';
+import * as commitModuleActionsOverrides from './modules/commit/actions';
 import editorModule from './modules/editor';
 import { setupFileEditorsSync } from './modules/editor/setup';
 import fileTemplates from './modules/file_templates';
@@ -17,13 +18,21 @@ import state from './state';
 
 Vue.use(Vuex);
 
+const commit = {
+  ...commitModule,
+  actions: {
+    ...commitModule.actions,
+    ...commitModuleActionsOverrides,
+  },
+};
+
 export const createStoreOptions = () => ({
   state: state(),
   actions,
   mutations,
   getters,
   modules: {
-    commit: commitModule,
+    commit,
     pipelines,
     mergeRequests,
     branches,
diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js
index cbc6e0fe519fbc5f39eb16ea60178000738e6028..97f8a785ba29e355bce8287880822fbe2b668ada 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/commit/actions.js
@@ -1,112 +1,11 @@
 import { createAlert } from '~/flash';
-import { addNumericSuffix } from '~/ide/utils';
-import { sprintf, __ } from '~/locale';
+import { COMMIT_TO_CURRENT_BRANCH } from '~/vue_shared/components/commit_sidebar/constants';
+import * as types from '~/vue_shared/components/commit_sidebar/store/mutation_types';
 import { leftSidebarViews } from '../../../constants';
-import eventHub from '../../../eventhub';
 import { parseCommitError } from '../../../lib/errors';
 import service from '../../../services';
 import * as rootTypes from '../../mutation_types';
 import { createCommitPayload, createNewMergeRequestUrl } from '../../utils';
-import { COMMIT_TO_CURRENT_BRANCH } from './constants';
-import * as types from './mutation_types';
-
-export const updateCommitMessage = ({ commit }, message) => {
-  commit(types.UPDATE_COMMIT_MESSAGE, message);
-};
-
-export const discardDraft = ({ commit }) => {
-  commit(types.UPDATE_COMMIT_MESSAGE, '');
-};
-
-export const updateCommitAction = ({ commit }, commitAction) => {
-  commit(types.UPDATE_COMMIT_ACTION, { commitAction });
-};
-
-export const toggleShouldCreateMR = ({ commit }) => {
-  commit(types.TOGGLE_SHOULD_CREATE_MR);
-};
-
-export const updateBranchName = ({ commit }, branchName) => {
-  commit(types.UPDATE_NEW_BRANCH_NAME, branchName);
-};
-
-export const addSuffixToBranchName = ({ commit, state }) => {
-  const newBranchName = addNumericSuffix(state.newBranchName, true);
-
-  commit(types.UPDATE_NEW_BRANCH_NAME, newBranchName);
-};
-
-export const setLastCommitMessage = ({ commit, rootGetters }, data) => {
-  const { currentProject } = rootGetters;
-  const commitStats = data.stats
-    ? sprintf(__('with %{additions} additions, %{deletions} deletions.'), {
-        additions: data.stats.additions,
-        deletions: data.stats.deletions,
-      })
-    : '';
-  const commitMsg = sprintf(
-    __('Your changes have been committed. Commit %{commitId} %{commitStats}'),
-    {
-      commitId: `<a href="${currentProject.web_url}/-/commit/${data.short_id}" class="commit-sha">${data.short_id}</a>`,
-      commitStats,
-    },
-    false,
-  );
-
-  commit(rootTypes.SET_LAST_COMMIT_MSG, commitMsg, { root: true });
-};
-
-export const updateFilesAfterCommit = ({ commit, dispatch, rootState, rootGetters }, { data }) => {
-  const selectedProject = rootGetters.currentProject;
-  const lastCommit = {
-    commit_path: `${selectedProject.web_url}/-/commit/${data.id}`,
-    commit: {
-      id: data.id,
-      message: data.message,
-      authored_date: data.committed_date,
-      author_name: data.committer_name,
-    },
-  };
-
-  commit(
-    rootTypes.SET_BRANCH_WORKING_REFERENCE,
-    {
-      projectId: rootState.currentProjectId,
-      branchId: rootState.currentBranchId,
-      reference: data.id,
-    },
-    { root: true },
-  );
-
-  rootState.stagedFiles.forEach((file) => {
-    const changedFile = rootState.changedFiles.find((f) => f.path === file.path);
-
-    commit(
-      rootTypes.UPDATE_FILE_AFTER_COMMIT,
-      {
-        file,
-        lastCommit,
-      },
-      { root: true },
-    );
-
-    commit(
-      rootTypes.TOGGLE_FILE_CHANGED,
-      {
-        file,
-        changed: false,
-      },
-      { root: true },
-    );
-
-    dispatch('updateTempFlagForEntry', { file, tempFile: false }, { root: true });
-
-    eventHub.$emit(`editor.update.model.content.${file.key}`, {
-      content: file.content,
-      changed: Boolean(changedFile),
-    });
-  });
-};
 
 export const commitChanges = ({ commit, state, getters, dispatch, rootState, rootGetters }) => {
   // Pull commit options out because they could change
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/vue_shared/components/commit_sidebar/actions.vue
similarity index 96%
rename from app/assets/javascripts/ide/components/commit_sidebar/actions.vue
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/actions.vue
index fcc900bbc960d81f06ef700750e88d046560618d..a5562b5b9bc4a5ccdf9d44e2c278750f4a414517 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
+++ b/app/assets/javascripts/vue_shared/components/commit_sidebar/actions.vue
@@ -3,10 +3,7 @@ import { GlSprintf } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
 import { s__ } from '~/locale';
-import {
-  COMMIT_TO_CURRENT_BRANCH,
-  COMMIT_TO_NEW_BRANCH,
-} from '../../stores/modules/commit/constants';
+import { COMMIT_TO_CURRENT_BRANCH, COMMIT_TO_NEW_BRANCH } from './constants';
 import NewMergeRequestOption from './new_merge_request_option.vue';
 import RadioGroup from './radio_group.vue';
 
diff --git a/app/assets/javascripts/vue_shared/components/commit_sidebar/constants.js b/app/assets/javascripts/vue_shared/components/commit_sidebar/constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..dfe8000af7aa7fb3e5ee0281f1a85a11e035397b
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/commit_sidebar/constants.js
@@ -0,0 +1,10 @@
+import { leftSidebarViews, MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from '~/ide/constants';
+import { COMMIT_TO_CURRENT_BRANCH, COMMIT_TO_NEW_BRANCH } from './store/constants';
+
+export {
+  COMMIT_TO_CURRENT_BRANCH,
+  COMMIT_TO_NEW_BRANCH,
+  leftSidebarViews,
+  MAX_TITLE_LENGTH,
+  MAX_BODY_LENGTH,
+};
diff --git a/app/assets/javascripts/vue_shared/components/commit_sidebar/errors.js b/app/assets/javascripts/vue_shared/components/commit_sidebar/errors.js
new file mode 100644
index 0000000000000000000000000000000000000000..295a7b4b0e5d00d50f46adb5587850b58099846a
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/commit_sidebar/errors.js
@@ -0,0 +1,7 @@
+import { escape } from 'lodash';
+import { __ } from '~/locale';
+
+export const createUnexpectedCommitError = (message) => ({
+  title: __('Unexpected error'),
+  messageHTML: escape(message) || __('Could not commit. An unexpected error occurred.'),
+});
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/vue_shared/components/commit_sidebar/form.vue
similarity index 88%
rename from app/assets/javascripts/ide/components/commit_sidebar/form.vue
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/form.vue
index d02dc67d933e3e793efe2140a6d6aaa8685ace47..7f55271a0bfb337fcab1d2db40f9c4ec35323400 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/vue_shared/components/commit_sidebar/form.vue
@@ -2,8 +2,8 @@
 import { GlModal, GlSafeHtmlDirective, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { n__ } from '~/locale';
-import { leftSidebarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../../constants';
-import { createUnexpectedCommitError } from '../../lib/errors';
+import { leftSidebarViews } from './constants';
+import { createUnexpectedCommitError } from './errors';
 import Actions from './actions.vue';
 import CommitMessageField from './message_field.vue';
 import SuccessMessage from './success_message.vue';
@@ -20,16 +20,28 @@ export default {
     SafeHtml: GlSafeHtmlDirective,
     GlTooltip: GlTooltipDirective,
   },
+  props: {
+    collapsible: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+    compact: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
   data() {
     return {
-      isCompact: true,
+      isCompact: this.compact,
       componentHeight: null,
       // Keep track of "lastCommitError" so we hold onto the value even when "commitError" is cleared.
       lastCommitError: createUnexpectedCommitError(),
     };
   },
   computed: {
-    ...mapState(['changedFiles', 'stagedFiles', 'currentActivityView', 'lastCommitMsg']),
+    ...mapState(['stagedFiles', 'lastCommitMsg']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading', 'commitError']),
     ...mapGetters(['someUncommittedChanges', 'canPushCodeStatus']),
     ...mapGetters('commit', ['discardDraftButtonDisabled', 'preBuiltCommitMessage']),
@@ -46,9 +58,6 @@ export default {
     overviewText() {
       return n__('%d changed file', '%d changed files', this.stagedFiles.length);
     },
-    currentViewIsCommitView() {
-      return this.currentActivityView === leftSidebarViews.commit.name;
-    },
     commitErrorPrimaryAction() {
       const { primaryAction } = this.lastCommitError || {};
 
@@ -59,9 +68,6 @@ export default {
     },
   },
   watch: {
-    currentActivityView: 'handleCompactState',
-    someUncommittedChanges: 'handleCompactState',
-    lastCommitMsg: 'handleCompactState',
     commitError(val) {
       if (!val) {
         return;
@@ -88,16 +94,6 @@ export default {
 
       return this.commitChanges();
     },
-    handleCompactState() {
-      if (this.lastCommitMsg) {
-        this.isCompact = false;
-      } else {
-        this.isCompact =
-          !this.someUncommittedChanges ||
-          !this.currentViewIsCommitView ||
-          window.innerHeight < MAX_WINDOW_HEIGHT_COMPACT;
-      }
-    },
     toggleIsCompact() {
       this.isCompact = !this.isCompact;
     },
@@ -201,7 +197,7 @@ export default {
             {{ __('Discard draft') }}
           </gl-button>
           <gl-button
-            v-else
+            v-else-if="collapsible"
             type="button"
             class="float-right"
             category="secondary"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/vue_shared/components/commit_sidebar/message_field.vue
similarity index 98%
rename from app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/message_field.vue
index 2799ea1378e89e10f452f418837a12d493ef5e85..99936bb0e585e8e91e96e496b7f36a60d5490f9f 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
+++ b/app/assets/javascripts/vue_shared/components/commit_sidebar/message_field.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlIcon, GlPopover } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import { MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from '../../constants';
+import { MAX_TITLE_LENGTH, MAX_BODY_LENGTH } from './constants';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue b/app/assets/javascripts/vue_shared/components/commit_sidebar/new_merge_request_option.vue
similarity index 100%
rename from app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/new_merge_request_option.vue
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/vue_shared/components/commit_sidebar/radio_group.vue
similarity index 100%
rename from app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/radio_group.vue
diff --git a/app/assets/javascripts/vue_shared/components/commit_sidebar/store/actions.js b/app/assets/javascripts/vue_shared/components/commit_sidebar/store/actions.js
new file mode 100644
index 0000000000000000000000000000000000000000..2b6d29aa30b09b584322687567eb71863eaa49e9
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/commit_sidebar/store/actions.js
@@ -0,0 +1,184 @@
+import { createAlert } from '~/flash';
+import { addNumericSuffix } from '~/ide/utils';
+import { sprintf, __ } from '~/locale';
+import eventHub from '~/ide/eventhub';
+import { parseCommitError } from '~/ide/lib/errors';
+import service from '~/ide/services';
+import * as rootTypes from '~/ide/stores/mutation_types';
+import { createCommitPayload, createNewMergeRequestUrl } from '~/ide/stores/utils';
+import { COMMIT_TO_CURRENT_BRANCH } from './constants';
+import * as types from './mutation_types';
+
+export const updateCommitMessage = ({ commit }, message) => {
+  commit(types.UPDATE_COMMIT_MESSAGE, message);
+};
+
+export const discardDraft = ({ commit }) => {
+  commit(types.UPDATE_COMMIT_MESSAGE, '');
+};
+
+export const updateCommitAction = ({ commit }, commitAction) => {
+  commit(types.UPDATE_COMMIT_ACTION, { commitAction });
+};
+
+export const toggleShouldCreateMR = ({ commit }) => {
+  commit(types.TOGGLE_SHOULD_CREATE_MR);
+};
+
+export const updateBranchName = ({ commit }, branchName) => {
+  commit(types.UPDATE_NEW_BRANCH_NAME, branchName);
+};
+
+export const addSuffixToBranchName = ({ commit, state }) => {
+  const newBranchName = addNumericSuffix(state.newBranchName, true);
+
+  commit(types.UPDATE_NEW_BRANCH_NAME, newBranchName);
+};
+
+export const setLastCommitMessage = ({ commit, rootGetters }, data) => {
+  const { currentProject } = rootGetters;
+  const commitStats = data.stats
+    ? sprintf(__('with %{additions} additions, %{deletions} deletions.'), {
+        additions: data.stats.additions,
+        deletions: data.stats.deletions,
+      })
+    : '';
+  const commitMsg = sprintf(
+    __('Your changes have been committed. Commit %{commitId} %{commitStats}'),
+    {
+      commitId: `<a href="${currentProject.web_url}/-/commit/${data.short_id}" class="commit-sha">${data.short_id}</a>`,
+      commitStats,
+    },
+    false,
+  );
+
+  commit(rootTypes.SET_LAST_COMMIT_MSG, commitMsg, { root: true });
+};
+
+export const updateFilesAfterCommit = ({ commit, dispatch, rootState, rootGetters }, { data }) => {
+  const selectedProject = rootGetters.currentProject;
+  const lastCommit = {
+    commit_path: `${selectedProject.web_url}/-/commit/${data.id}`,
+    commit: {
+      id: data.id,
+      message: data.message,
+      authored_date: data.committed_date,
+      author_name: data.committer_name,
+    },
+  };
+
+  commit(
+    rootTypes.SET_BRANCH_WORKING_REFERENCE,
+    {
+      projectId: rootState.currentProjectId,
+      branchId: rootState.currentBranchId,
+      reference: data.id,
+    },
+    { root: true },
+  );
+
+  rootState.stagedFiles.forEach((file) => {
+    const changedFile = rootState.changedFiles.find((f) => f.path === file.path);
+
+    commit(
+      rootTypes.UPDATE_FILE_AFTER_COMMIT,
+      {
+        file,
+        lastCommit,
+      },
+      { root: true },
+    );
+
+    commit(
+      rootTypes.TOGGLE_FILE_CHANGED,
+      {
+        file,
+        changed: false,
+      },
+      { root: true },
+    );
+
+    dispatch('updateTempFlagForEntry', { file, tempFile: false }, { root: true });
+
+    eventHub.$emit(`editor.update.model.content.${file.key}`, {
+      content: file.content,
+      changed: Boolean(changedFile),
+    });
+  });
+};
+
+export const commitChanges = ({ commit, state, getters, dispatch, rootState, rootGetters }) => {
+  // Pull commit options out because they could change
+  // During some of the pre and post commit processing
+  const { shouldCreateMR, shouldHideNewMrOption, isCreatingNewBranch, branchName } = getters;
+  const newBranch = state.commitAction !== COMMIT_TO_CURRENT_BRANCH;
+  const stageFilesPromise = rootState.stagedFiles.length
+    ? Promise.resolve()
+    : dispatch('stageAllChanges', null, { root: true });
+
+  commit(types.CLEAR_ERROR);
+  commit(types.UPDATE_LOADING, true);
+
+  return stageFilesPromise
+    .then(() => {
+      const payload = createCommitPayload({
+        branch: branchName,
+        newBranch,
+        getters,
+        state,
+        rootState,
+        rootGetters,
+      });
+
+      return service.commit(rootState.currentProjectId, payload);
+    })
+    .catch((e) => {
+      commit(types.UPDATE_LOADING, false);
+      commit(types.SET_ERROR, parseCommitError(e));
+
+      throw e;
+    })
+    .then(({ data }) => {
+      commit(types.UPDATE_LOADING, false);
+
+      if (!data.short_id) {
+        createAlert({
+          message: data.message,
+          fadeTransition: false,
+          addBodyClass: true,
+        });
+        return null;
+      }
+
+      dispatch('setLastCommitMessage', data);
+      dispatch('updateCommitMessage', '');
+      return data;
+    })
+    .then((data) => {
+      return dispatch('updateFilesAfterCommit', {
+        data,
+        branch: branchName,
+      });
+    })
+    .then(() => {
+      commit(rootTypes.CLEAR_STAGED_CHANGES, null, { root: true });
+
+      setTimeout(() => {
+        commit(rootTypes.SET_LAST_COMMIT_MSG, '', { root: true });
+      }, 5000);
+
+      if (shouldCreateMR && !shouldHideNewMrOption) {
+        const { currentProject } = rootGetters;
+        const targetBranch = isCreatingNewBranch
+          ? rootState.currentBranchId
+          : currentProject.default_branch;
+
+        dispatch(
+          'redirectToUrl',
+          createNewMergeRequestUrl(currentProject.web_url, branchName, targetBranch),
+          { root: true },
+        );
+      }
+    })
+    .then(() => dispatch('updateCommitAction', COMMIT_TO_CURRENT_BRANCH));
+};
diff --git a/app/assets/javascripts/ide/stores/modules/commit/constants.js b/app/assets/javascripts/vue_shared/components/commit_sidebar/store/constants.js
similarity index 100%
rename from app/assets/javascripts/ide/stores/modules/commit/constants.js
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/store/constants.js
diff --git a/app/assets/javascripts/ide/stores/modules/commit/getters.js b/app/assets/javascripts/vue_shared/components/commit_sidebar/store/getters.js
similarity index 100%
rename from app/assets/javascripts/ide/stores/modules/commit/getters.js
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/store/getters.js
diff --git a/app/assets/javascripts/ide/stores/modules/commit/index.js b/app/assets/javascripts/vue_shared/components/commit_sidebar/store/index.js
similarity index 100%
rename from app/assets/javascripts/ide/stores/modules/commit/index.js
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/store/index.js
diff --git a/app/assets/javascripts/ide/stores/modules/commit/mutation_types.js b/app/assets/javascripts/vue_shared/components/commit_sidebar/store/mutation_types.js
similarity index 100%
rename from app/assets/javascripts/ide/stores/modules/commit/mutation_types.js
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/store/mutation_types.js
diff --git a/app/assets/javascripts/ide/stores/modules/commit/mutations.js b/app/assets/javascripts/vue_shared/components/commit_sidebar/store/mutations.js
similarity index 100%
rename from app/assets/javascripts/ide/stores/modules/commit/mutations.js
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/store/mutations.js
diff --git a/app/assets/javascripts/ide/stores/modules/commit/state.js b/app/assets/javascripts/vue_shared/components/commit_sidebar/store/state.js
similarity index 100%
rename from app/assets/javascripts/ide/stores/modules/commit/state.js
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/store/state.js
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue b/app/assets/javascripts/vue_shared/components/commit_sidebar/success_message.vue
similarity index 100%
rename from app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
rename to app/assets/javascripts/vue_shared/components/commit_sidebar/success_message.vue