Make Jira Connect Vue store an Observable

This improves dev experience,
allowing dev to import store directly into the
Vue file and use store and mutations within the component.

app/assets/javascripts/jira_connect/components/app.vue

 <script>
+import { mapState } from 'vuex';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   name: 'JiraConnectApp',
   mixins: [glFeatureFlagsMixin()],
   computed: {
-    state() {
-      return this.$root.$data.state || {};
-    },
-    error() {
-      return this.state.error;
-    },
+    ...mapState(['errorMessage']),
     showNewUi() {
       return this.glFeatures.newJiraConnectUi;
     },
@@ -21,7 +17,7 @@ export default {
 <template>
   <div>
     <div v-if="showNewUi">
-      <h3>{{ s__('Integrations|Linked namespaces') }}</h3>
+      <h3 data-testid="new-jira-connect-ui-heading">{{ s__('Integrations|Linked namespaces') }}</h3>
     </div>
   </div>
 </template>

app/assets/javascripts/jira_connect/index.js

 import Vue from 'vue';
+import Vuex from 'vuex';
 import $ from 'jquery';
 import setConfigs from '@gitlab/ui/dist/config';
 import Translate from '~/vue_shared/translate';
 import GlFeatureFlagsPlugin from '~/vue_shared/gl_feature_flags_plugin';
 
-import App from './components/app.vue';
+import JiraConnectApp from './components/app.vue';
 import { addSubscription, removeSubscription } from '~/jira_connect/api';
+import createStore from './store';
+import { SET_ERROR_MESSAGE } from './store/mutation_types';
 
-const store = {
-  state: {
-    error: '',
-  },
-  setErrorMessage(errorMessage) {
-    this.state.error = errorMessage;
-  },
-};
+Vue.use(Vuex);
+
+const store = createStore();
 
 /**
- * Initialize necessary form handlers for the Jira Connect app
+ * Initialize form handlers for the Jira Connect app
  */
 const initJiraFormHandlers = () => {
   const reqComplete = () => {
@@ -27,7 +25,7 @@ const initJiraFormHandlers = () => {
   const reqFailed = (res, fallbackErrorMessage) => {
     const { responseJSON: { error = fallbackErrorMessage } = {} } = res || {};
 
-    store.setErrorMessage(error);
+    store.commit(SET_ERROR_MESSAGE, error);
     // eslint-disable-next-line no-alert
     alert(error);
   };
@@ -79,11 +77,9 @@ function initJiraConnect() {
 
   return new Vue({
     el,
-    data: {
-      state: store.state,
-    },
+    store,
     render(createElement) {
-      return createElement(App, {});
+      return createElement(JiraConnectApp, {});
     },
   });
 }

app/assets/javascripts/jira_connect/store/index.js

+import Vuex from 'vuex';
+import mutations from './mutations';
+import state from './state';
+
+export default () =>
+  new Vuex.Store({
+    state,
+    mutations,
+  });

app/assets/javascripts/jira_connect/store/mutation_types.js

+export const SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE';

app/assets/javascripts/jira_connect/store/mutations.js

+import { SET_ERROR_MESSAGE } from './mutation_types';
+
+export default {
+  [SET_ERROR_MESSAGE](state, errorMessage) {
+    state.errorMessage = errorMessage;
+  },
+};

app/assets/javascripts/jira_connect/store/state.js

+export default () => ({
+  errorMessage: undefined,
+});

spec/frontend/jira_connect/components/app_spec.js

 import { shallowMount } from '@vue/test-utils';
-
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import JiraConnectApp from '~/jira_connect/components/app.vue';
 
 describe('JiraConnectApp', () => {
   let wrapper;
 
+  const findHeader = () => wrapper.findByTestId('new-jira-connect-ui-heading');
+  const findHeaderText = () => findHeader().text();
+
   const createComponent = (options = {}) => {
-    wrapper = shallowMount(JiraConnectApp, {
-      provide: {
-        glFeatures: { newJiraConnectUi: true },
-      },
-      ...options,
-    });
+    wrapper = extendedWrapper(
+      shallowMount(JiraConnectApp, {
+        provide: {
+          glFeatures: { newJiraConnectUi: true },
+        },
+        ...options,
+      }),
+    );
   };
 
   afterEach(() => {
@@ -19,9 +24,6 @@ describe('JiraConnectApp', () => {
     wrapper = null;
   });
 
-  const findHeader = () => wrapper.find('h3');
-  const findHeaderText = () => findHeader().text();
-
   describe('template', () => {
     it('renders new UI', () => {
       createComponent();

spec/frontend/jira_connect/store/mutations_spec.js

+import mutations from '~/jira_connect/store/mutations';
+import state from '~/jira_connect/store/state';
+
+describe('JiraConnect store mutations', () => {
+  let localState;
+
+  beforeEach(() => {
+    localState = state();
+  });
+
+  describe('SET_ERROR_MESSAGE', () => {
+    it('sets error message', () => {
+      mutations.SET_ERROR_MESSAGE(localState, 'test error');
+
+      expect(localState.errorMessage).toBe('test error');
+    });
+  });
+});