Merge branch '212561-fix-empty-edit-area' into 'master'

fix: Publish toolbar dissappears when submitting empty content

See merge request gitlab-org/gitlab!29410

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

@@ -12,8 +12,8 @@ export default {
     Toolbar,
   },
   computed: {
-    ...mapState(['content', 'isLoadingContent', 'isSavingChanges']),
-    ...mapGetters(['isContentLoaded', 'contentChanged']),
+    ...mapState(['content', 'isLoadingContent', 'isSavingChanges', 'isContentLoaded']),
+    ...mapGetters(['contentChanged']),
   },
   mounted() {
     this.loadContent();

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

-export const isContentLoaded = ({ originalContent }) => Boolean(originalContent);
+// eslint-disable-next-line import/prefer-default-export
 export const contentChanged = ({ originalContent, content }) => originalContent !== content;

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

@@ -6,6 +6,7 @@ export default {
   },
   [types.RECEIVE_CONTENT_SUCCESS](state, { title, content }) {
     state.isLoadingContent = false;
+    state.isContentLoaded = true;
     state.title = title;
     state.content = content;
     state.originalContent = content;

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

@@ -6,6 +6,8 @@ const createState = (initialState = {}) => ({
   isLoadingContent: false,
   isSavingChanges: false,
 
+  isContentLoaded: false,
+
   originalContent: '',
   content: '',
   title: '',

changelogs/unreleased/212561-fix-empty-edit-area.yml

+---
+title: 'fix: Publish toolbar dissappears when submitting empty content'
+merge_request: 29410
+author:
+type: fixed

spec/frontend/static_site_editor/components/static_site_editor_spec.js

@@ -30,7 +30,6 @@ describe('StaticSiteEditor', () => {
     store = new Vuex.Store({
       state: createState(initialState),
       getters: {
-        isContentLoaded: () => false,
         contentChanged: () => false,
         ...getters,
       },
@@ -43,9 +42,11 @@ describe('StaticSiteEditor', () => {
   };
   const buildContentLoadedStore = ({ initialState, getters } = {}) => {
     buildStore({
-      initialState,
+      initialState: {
+        isContentLoaded: true,
+        ...initialState,
+      },
       getters: {
-        isContentLoaded: () => true,
         ...getters,
       },
     });
@@ -85,7 +86,7 @@ describe('StaticSiteEditor', () => {
     const content = 'edit area content';
 
     beforeEach(() => {
-      buildStore({ initialState: { content }, getters: { isContentLoaded: () => true } });
+      buildContentLoadedStore({ initialState: { content } });
       buildWrapper();
     });
 

spec/frontend/static_site_editor/store/getters_spec.js

 import createState from '~/static_site_editor/store/state';
-import { isContentLoaded, contentChanged } from '~/static_site_editor/store/getters';
+import { contentChanged } from '~/static_site_editor/store/getters';
 import { sourceContent as content } from '../mock_data';
 
 describe('Static Site Editor Store getters', () => {
-  describe('isContentLoaded', () => {
-    it('returns true when originalContent is not empty', () => {
-      expect(isContentLoaded(createState({ originalContent: content }))).toBe(true);
-    });
-
-    it('returns false when originalContent is empty', () => {
-      expect(isContentLoaded(createState({ originalContent: '' }))).toBe(false);
-    });
-  });
-
   describe('contentChanged', () => {
     it('returns true when content and originalContent are different', () => {
       const state = createState({ content, originalContent: 'something else' });

spec/frontend/static_site_editor/store/mutations_spec.js

@@ -19,6 +19,7 @@ describe('Static Site Editor Store mutations', () => {
     mutation                         | stateProperty         | payload                 | expectedValue
     ${types.LOAD_CONTENT}            | ${'isLoadingContent'} | ${undefined}            | ${true}
     ${types.RECEIVE_CONTENT_SUCCESS} | ${'isLoadingContent'} | ${contentLoadedPayload} | ${false}
+    ${types.RECEIVE_CONTENT_SUCCESS} | ${'isContentLoaded'}  | ${contentLoadedPayload} | ${true}
     ${types.RECEIVE_CONTENT_SUCCESS} | ${'title'}            | ${contentLoadedPayload} | ${title}
     ${types.RECEIVE_CONTENT_SUCCESS} | ${'content'}          | ${contentLoadedPayload} | ${content}
     ${types.RECEIVE_CONTENT_SUCCESS} | ${'originalContent'}  | ${contentLoadedPayload} | ${content}