Implement Save changes action in SSE

Implement UI to submit changes in the Static Site
Editor and display an indicator that changes are
being saved.

app/assets/javascripts/static_site_editor/components/publish_toolbar.vue

 <script>
-import { GlNewButton } from '@gitlab/ui';
+import { GlNewButton, GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
     GlNewButton,
+    GlLoadingIcon,
   },
   props: {
     saveable: {
@@ -11,12 +12,22 @@ export default {
       required: false,
       default: false,
     },
+    savingChanges: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 };
 </script>
 <template>
   <div class="d-flex bg-light border-top justify-content-between align-items-center py-3 px-4">
-    <gl-new-button variant="success" :disabled="!saveable">
+    <gl-loading-icon :class="{ invisible: !savingChanges }" size="md" />
+    <gl-new-button
+      variant="success"
+      :disabled="!saveable || savingChanges"
+      @click="$emit('submit')"
+    >
       {{ __('Submit Changes') }}
     </gl-new-button>
   </div>

app/assets/javascripts/static_site_editor/components/static_site_editor.vue

@@ -12,14 +12,14 @@ export default {
     Toolbar,
   },
   computed: {
-    ...mapState(['content', 'isLoadingContent']),
+    ...mapState(['content', 'isLoadingContent', 'isSavingChanges']),
     ...mapGetters(['isContentLoaded', 'contentChanged']),
   },
   mounted() {
     this.loadContent();
   },
   methods: {
-    ...mapActions(['loadContent', 'setContent']),
+    ...mapActions(['loadContent', 'setContent', 'submitChanges']),
   },
 };
 </script>
@@ -41,7 +41,11 @@ export default {
         :value="content"
         @input="setContent"
       />
-      <toolbar :saveable="contentChanged" />
+      <toolbar
+        :saveable="contentChanged"
+        :saving-changes="isSavingChanges"
+        @submit="submitChanges"
+      />
     </div>
   </div>
 </template>

app/assets/javascripts/static_site_editor/index.js

@@ -6,7 +6,7 @@ const initStaticSiteEditor = el => {
   const { projectId, path: sourcePath } = el.dataset;
 
   const store = createStore({
-    initialState: { projectId, sourcePath },
+    initialState: { projectId, sourcePath, username: window.gon.current_username },
   });
 
   return new Vue({

app/assets/javascripts/static_site_editor/services/submit_content_changes.js

+// TODO implement
+const submitContentChanges = () => new Promise(resolve => setTimeout(resolve, 1000));
+
+export default submitContentChanges;

app/assets/javascripts/static_site_editor/store/actions.js

@@ -3,6 +3,7 @@ import { __ } from '~/locale';
 
 import * as mutationTypes from './mutation_types';
 import loadSourceContent from '~/static_site_editor/services/load_source_content';
+import submitContentChanges from '~/static_site_editor/services/submit_content_changes';
 
 export const loadContent = ({ commit, state: { sourcePath, projectId } }) => {
   commit(mutationTypes.LOAD_CONTENT);
@@ -19,4 +20,15 @@ export const setContent = ({ commit }, content) => {
   commit(mutationTypes.SET_CONTENT, content);
 };
 
+export const submitChanges = ({ state: { projectId, content, sourcePath, username }, commit }) => {
+  commit(mutationTypes.SUBMIT_CHANGES);
+
+  return submitContentChanges({ content, projectId, sourcePath, username })
+    .then(data => commit(mutationTypes.SUBMIT_CHANGES_SUCCESS, data))
+    .catch(error => {
+      commit(mutationTypes.SUBMIT_CHANGES_ERROR);
+      createFlash(error.message);
+    });
+};
+
 export default () => {};

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

@@ -2,3 +2,6 @@ export const LOAD_CONTENT = 'loadContent';
 export const RECEIVE_CONTENT_SUCCESS = 'receiveContentSuccess';
 export const RECEIVE_CONTENT_ERROR = 'receiveContentError';
 export const SET_CONTENT = 'setContent';
+export const SUBMIT_CHANGES = 'submitChanges';
+export const SUBMIT_CHANGES_SUCCESS = 'submitChangesSuccess';
+export const SUBMIT_CHANGES_ERROR = 'submitChangesError';

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

@@ -16,4 +16,15 @@ export default {
   [types.SET_CONTENT](state, content) {
     state.content = content;
   },
+  [types.SUBMIT_CHANGES](state) {
+    state.isSavingChanges = true;
+  },
+  [types.SUBMIT_CHANGES_SUCCESS](state, meta) {
+    state.savedContentMeta = meta;
+    state.isSavingChanges = false;
+    state.originalContent = state.content;
+  },
+  [types.SUBMIT_CHANGES_ERROR](state) {
+    state.isSavingChanges = false;
+  },
 };

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

 const createState = (initialState = {}) => ({
+  username: null,
   projectId: null,
   sourcePath: null,
 

spec/frontend/static_site_editor/components/publish_toolbar_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlNewButton } from '@gitlab/ui';
+import { GlNewButton, GlLoadingIcon } from '@gitlab/ui';
 
 import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
 
@@ -16,6 +16,7 @@ describe('Static Site Editor Toolbar', () => {
   };
 
   const findSaveChangesButton = () => wrapper.find(GlNewButton);
+  const findLoadingIndicator = () => wrapper.find(GlLoadingIcon);
 
   beforeEach(() => {
     buildWrapper();
@@ -33,6 +34,10 @@ describe('Static Site Editor Toolbar', () => {
     expect(findSaveChangesButton().attributes('disabled')).toBe('true');
   });
 
+  it('does not display saving changes indicator', () => {
+    expect(findLoadingIndicator().classes()).toContain('invisible');
+  });
+
   describe('when saveable', () => {
     it('enables Submit Changes button', () => {
       buildWrapper({ saveable: true });
@@ -40,4 +45,26 @@ describe('Static Site Editor Toolbar', () => {
       expect(findSaveChangesButton().attributes('disabled')).toBeFalsy();
     });
   });
+
+  describe('when saving changes', () => {
+    beforeEach(() => {
+      buildWrapper({ saveable: true, savingChanges: true });
+    });
+
+    it('disables Submit Changes button', () => {
+      expect(findSaveChangesButton().attributes('disabled')).toBe('true');
+    });
+
+    it('displays saving changes indicator', () => {
+      expect(findLoadingIndicator().classes()).not.toContain('invisible');
+    });
+  });
+
+  it('emits submit event when submit button is clicked', () => {
+    buildWrapper({ saveable: true });
+
+    findSaveChangesButton().vm.$emit('click');
+
+    expect(wrapper.emitted('submit')).toHaveLength(1);
+  });
 });

spec/frontend/static_site_editor/components/static_site_editor_spec.js

@@ -9,6 +9,8 @@ import StaticSiteEditor from '~/static_site_editor/components/static_site_editor
 import EditArea from '~/static_site_editor/components/edit_area.vue';
 import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
 
+import { sourceContent } from '../mock_data';
+
 const localVue = createLocalVue();
 
 localVue.use(Vuex);
@@ -18,10 +20,12 @@ describe('StaticSiteEditor', () => {
   let store;
   let loadContentActionMock;
   let setContentActionMock;
+  let submitChangesActionMock;
 
   const buildStore = ({ initialState, getters } = {}) => {
     loadContentActionMock = jest.fn();
     setContentActionMock = jest.fn();
+    submitChangesActionMock = jest.fn();
 
     store = new Vuex.Store({
       state: createState(initialState),
@@ -33,6 +37,7 @@ describe('StaticSiteEditor', () => {
       actions: {
         loadContent: loadContentActionMock,
         setContent: setContentActionMock,
+        submitChanges: submitChangesActionMock,
       },
     });
   };
@@ -119,18 +124,35 @@ describe('StaticSiteEditor', () => {
     expect(findSkeletonLoader().exists()).toBe(true);
   });
 
+  it('sets toolbar as saving when saving changes', () => {
+    buildContentLoadedStore({
+      initialState: {
+        isSavingChanges: true,
+      },
+    });
+    buildWrapper();
+
+    expect(findPublishToolbar().props('savingChanges')).toBe(true);
+  });
+
   it('dispatches load content action', () => {
     expect(loadContentActionMock).toHaveBeenCalled();
   });
 
   it('dispatches setContent action when edit area emits input event', () => {
-    const content = 'new content';
-
     buildContentLoadedStore();
     buildWrapper();
 
-    findEditArea().vm.$emit('input', content);
+    findEditArea().vm.$emit('input', sourceContent);
+
+    expect(setContentActionMock).toHaveBeenCalledWith(expect.anything(), sourceContent, undefined);
+  });
+
+  it('dispatches submitChanges action when toolbar emits submit event', () => {
+    buildContentLoadedStore();
+    buildWrapper();
+    findPublishToolbar().vm.$emit('submit');
 
-    expect(setContentActionMock).toHaveBeenCalledWith(expect.anything(), content, undefined);
+    expect(submitChangesActionMock).toHaveBeenCalled();
   });
 });

spec/frontend/static_site_editor/mock_data.js

@@ -14,5 +14,23 @@ twitter_image: '/images/tweets/handbook-gitlab.png'
 
 export const sourceContentTitle = 'Handbook';
 
+export const username = 'gitlabuser';
 export const projectId = '123456';
 export const sourcePath = 'foobar.md.html';
+
+export const savedContentMeta = {
+  branch: {
+    label: 'foobar',
+    url: 'foobar/-/tree/foorbar',
+  },
+  commit: {
+    label: 'c1461b08 ',
+    url: 'foobar/-/c1461b08',
+  },
+  mergeRequest: {
+    label: '123',
+    url: 'foobar/-/merge_requests/123',
+  },
+};
+
+export const submitChangesError = 'Could not save changes';

spec/frontend/static_site_editor/store/actions_spec.js

@@ -3,18 +3,23 @@ import createState from '~/static_site_editor/store/state';
 import * as actions from '~/static_site_editor/store/actions';
 import * as mutationTypes from '~/static_site_editor/store/mutation_types';
 import loadSourceContent from '~/static_site_editor/services/load_source_content';
+import submitContentChanges from '~/static_site_editor/services/submit_content_changes';
 
 import createFlash from '~/flash';
 
 import {
+  username,
   projectId,
   sourcePath,
   sourceContentTitle as title,
   sourceContent as content,
+  savedContentMeta,
+  submitChangesError,
 } from '../mock_data';
 
 jest.mock('~/flash');
 jest.mock('~/static_site_editor/services/load_source_content', () => jest.fn());
+jest.mock('~/static_site_editor/services/submit_content_changes', () => jest.fn());
 
 describe('Static Site Editor Store actions', () => {
   let state;
@@ -84,4 +89,59 @@ describe('Static Site Editor Store actions', () => {
       ]);
     });
   });
+
+  describe('submitChanges', () => {
+    describe('on success', () => {
+      beforeEach(() => {
+        state = createState({
+          projectId,
+          content,
+          username,
+          sourcePath,
+        });
+        submitContentChanges.mockResolvedValueOnce(savedContentMeta);
+      });
+
+      it('commits submitChangesSuccess mutation', () => {
+        testAction(
+          actions.submitChanges,
+          null,
+          state,
+          [
+            { type: mutationTypes.SUBMIT_CHANGES },
+            { type: mutationTypes.SUBMIT_CHANGES_SUCCESS, payload: savedContentMeta },
+          ],
+          [],
+        );
+
+        expect(submitContentChanges).toHaveBeenCalledWith({
+          username,
+          projectId,
+          content,
+          sourcePath,
+        });
+      });
+    });
+
+    describe('on error', () => {
+      const expectedMutations = [
+        { type: mutationTypes.SUBMIT_CHANGES },
+        { type: mutationTypes.SUBMIT_CHANGES_ERROR },
+      ];
+
+      beforeEach(() => {
+        submitContentChanges.mockRejectedValueOnce(new Error(submitChangesError));
+      });
+
+      it('dispatches receiveContentError', () => {
+        testAction(actions.submitChanges, null, state, expectedMutations);
+      });
+
+      it('displays flash communicating error', () => {
+        return testAction(actions.submitChanges, null, state, expectedMutations).then(() => {
+          expect(createFlash).toHaveBeenCalledWith(submitChangesError);
+        });
+      });
+    });
+  });
 });

spec/frontend/static_site_editor/store/mutations_spec.js

 import createState from '~/static_site_editor/store/state';
 import mutations from '~/static_site_editor/store/mutations';
 import * as types from '~/static_site_editor/store/mutation_types';
-import { sourceContentTitle as title, sourceContent as content } from '../mock_data';
+import {
+  sourceContentTitle as title,
+  sourceContent as content,
+  savedContentMeta,
+} from '../mock_data';
 
 describe('Static Site Editor Store mutations', () => {
   let state;
+  const contentLoadedPayload = { title, content };
 
   beforeEach(() => {
     state = createState();
   });
 
-  describe('loadContent', () => {
-    beforeEach(() => {
-      mutations[types.LOAD_CONTENT](state);
-    });
-
-    it('sets isLoadingContent to true', () => {
-      expect(state.isLoadingContent).toBe(true);
-    });
-  });
-
-  describe('receiveContentSuccess', () => {
-    const payload = { title, content };
-
-    beforeEach(() => {
-      mutations[types.RECEIVE_CONTENT_SUCCESS](state, payload);
-    });
-
-    it('sets current state to LOADING', () => {
-      expect(state.isLoadingContent).toBe(false);
-    });
-
-    it('sets title', () => {
-      expect(state.title).toBe(payload.title);
-    });
-
-    it('sets originalContent and content', () => {
-      expect(state.content).toBe(payload.content);
-      expect(state.originalContent).toBe(payload.content);
-    });
-  });
-
-  describe('receiveContentError', () => {
-    beforeEach(() => {
-      mutations[types.RECEIVE_CONTENT_ERROR](state);
-    });
-
-    it('sets current state to LOADING_ERROR', () => {
-      expect(state.isLoadingContent).toBe(false);
-    });
-  });
-
-  describe('setContent', () => {
-    it('sets content', () => {
-      mutations[types.SET_CONTENT](state, content);
-
-      expect(state.content).toBe(content);
-    });
+  it.each`
+    mutation                         | stateProperty         | payload                 | expectedValue
+    ${types.LOAD_CONTENT}            | ${'isLoadingContent'} | ${undefined}            | ${true}
+    ${types.RECEIVE_CONTENT_SUCCESS} | ${'isLoadingContent'} | ${contentLoadedPayload} | ${false}
+    ${types.RECEIVE_CONTENT_SUCCESS} | ${'title'}            | ${contentLoadedPayload} | ${title}
+    ${types.RECEIVE_CONTENT_SUCCESS} | ${'content'}          | ${contentLoadedPayload} | ${content}
+    ${types.RECEIVE_CONTENT_SUCCESS} | ${'originalContent'}  | ${contentLoadedPayload} | ${content}
+    ${types.RECEIVE_CONTENT_ERROR}   | ${'isLoadingContent'} | ${undefined}            | ${false}
+    ${types.SET_CONTENT}             | ${'content'}          | ${content}              | ${content}
+    ${types.SUBMIT_CHANGES}          | ${'isSavingChanges'}  | ${undefined}            | ${true}
+    ${types.SUBMIT_CHANGES_SUCCESS}  | ${'savedContentMeta'} | ${savedContentMeta}     | ${savedContentMeta}
+    ${types.SUBMIT_CHANGES_SUCCESS}  | ${'isSavingChanges'}  | ${savedContentMeta}     | ${false}
+    ${types.SUBMIT_CHANGES_ERROR}    | ${'isSavingChanges'}  | ${undefined}            | ${false}
+  `(
+    '$mutation sets $stateProperty to $expectedValue',
+    ({ mutation, stateProperty, payload, expectedValue }) => {
+      mutations[mutation](state, payload);
+      expect(state[stateProperty]).toBe(expectedValue);
+    },
+  );
+
+  it(`${types.SUBMIT_CHANGES_SUCCESS} sets originalContent to content current value`, () => {
+    const editedContent = `${content} plus something else`;
+
+    state = createState({
+      originalContent: content,
+      content: editedContent,
+    });
+    mutations[types.SUBMIT_CHANGES_SUCCESS](state);
+
+    expect(state.originalContent).toBe(state.content);
   });
 });