Merge branch 'next-5713/form-view-empty-state-is-missing' into 'master'

NEXT-5713 - form view empty state is missing

See merge request shopware/6/product/platform!1900

CHANGELOG-6.2.md

@@ -247,6 +247,7 @@ To get the diff between two versions, go to https://github.com/shopware/platform
     * Added new component `sw-order-create-promotion-modal` which can be used to display the automatic promotions will be disabled before click to the button disable
     * Added an error notification for user when he deletes a customer group that has a SalesChannel and/or a customer assigned to it.
     * Added `bulk-modal-cancel`, `bulk-modal-delete-items`, `delete-modal-cancel` and `delete-modal-delete-item` slots to `sw-entity-listing.html.twig`
+    * Added twig blocks `sw_cms_page_form_section_empty_state_block_text` and `sw_cms_page_form_section_empty_state_block` to `sw-cms-page-form.html.twig`
 
     * Removed `v-fixed` directive in `sw-entity-single-select` of `sw-order-product-select`
     * The `fixed` directive is now deprecated and will be removed with version 6.4

src/Administration/Resources/app/administration/src/module/sw-cms/component/sw-cms-page-form/sw-cms-page-form.html.twig

@@ -28,9 +28,19 @@
                                 </div>
                             {% endblock %}
                         </div>
+
+                        {% block sw_cms_page_form_section_empty_state_block %}
+                            <sw-card v-if="section.blocks.length === 0"
+                                     class="sw-cms-page-form__block-card is--empty">
+
+                                {% block sw_cms_page_form_section_empty_state_block_text %}
+                                    <p class="sw-cms-page-form__empty-state-text">{{ $tc('sw-cms.section.sectionEmptyState') }}</p>
+                                {% endblock %}
+                            </sw-card>
+                        {% endblock %}
+
+                        <template v-else v-for="block in section.blocks">
 
-                        <template v-for="block in section.blocks">
-
                             {% block sw_cms_page_form_section_type_label_wrapper %}
                                 <div v-if="displaySectionType(block)"
                                      class="sw-cms-page-form__section-type">

src/Administration/Resources/app/administration/src/module/sw-cms/component/sw-cms-page-form/sw-cms-page-form.scss

@@ -58,11 +58,23 @@
     .sw-cms-page-form__block-card + .sw-cms-page-form__block-card {
         margin-top: 60px;
     }
+
+    .sw-cms-page-form__block-card.is--empty {
+        box-sizing: border-box;
+        height: 230px;
+    }
+
+    .sw-cms-page-form__empty-state-text {
+        text-align: center;
+        height: 20px;
+        margin: 85px 0;
+        color: $color-gray-500;
+    }
 
     &__section {
         position: relative;
         padding: 50px 30px 70px 30px;
-        border-bottom: 2px solid rgb(209, 217, 224);
+        border-bottom: 2px solid $color-gray-300;
         width: 100%;
 
         &:first-of-type {

src/Administration/Resources/app/administration/src/module/sw-cms/snippet/de-DE.json

@@ -36,7 +36,8 @@
       "sidebar": "Sidebar",
       "isSidebar": "Layout-Sektion - Sidebar",
       "isDefault": "Layout-Sektion - Standard",
-      "layoutSection": "Layout-Sektion"
+      "layoutSection": "Layout-Sektion",
+      "sectionEmptyState": "Noch keine Blöcke und Elemente hinzugefügt"
     },
     "sidebar": {
       "contentMenu": {

src/Administration/Resources/app/administration/src/module/sw-cms/snippet/en-GB.json

@@ -36,7 +36,8 @@
       "sidebar": "Sidebar",
       "layoutSection": "Layout section",
       "isSidebar": "Layout section - Sidebar",
-      "isDefault": "Layout section - Default"
+      "isDefault": "Layout section - Default",
+      "sectionEmptyState": "No blocks and elements in here"
     },
     "sidebar": {
       "contentMenu": {

src/Administration/Resources/app/administration/test/module/sw-cms/component/sw-cms-page-form.spec.js

@@ -0,0 +1,91 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import 'src/module/sw-cms/component/sw-cms-page-form';
+import 'src/app/component/base/sw-card';
+
+function createWrapper() {
+    const localVue = createLocalVue();
+
+    localVue.directive('responsive', {});
+
+    return shallowMount(Shopware.Component.build('sw-cms-page-form'), {
+        localVue,
+        propsData: {
+            page: createPageProp()
+        },
+        stubs: {
+            'sw-icon': '<div></div>',
+            'sw-card': Shopware.Component.build('sw-card'),
+            'sw-cms-el-config-text': '<div class="config-element">Config element</div>'
+        },
+        mocks: {
+            $tc: (value) => value
+        },
+        provide: {
+            cmsService: {
+                getCmsBlockRegistry: () => {
+                    return {};
+                },
+                getCmsElementRegistry: () => {
+                    return {
+                        text: {
+                            configComponent: 'sw-cms-el-config-text'
+                        }
+                    };
+                }
+            }
+        }
+    });
+}
+
+function createPageProp() {
+    // providing only bare minimum
+
+    return {
+        sections: [
+            {
+                blocks: []
+            },
+            {
+                blocks: [
+                    {
+                        slots: [
+                            {
+                                type: 'text'
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    };
+}
+
+describe('module/sw-cms/component/sw-cms-page-form', () => {
+    it('should be a Vue.js component', () => {
+        const wrapper = createWrapper();
+
+        expect(wrapper.isVueInstance()).toBeTruthy();
+    });
+
+    it('should have only one empty state \'card\'', () => {
+        const wrapper = createWrapper();
+        const lengthOfEmptyStates = wrapper.findAll('.sw-cms-page-form__block-card.is--empty').length;
+
+
+        expect(lengthOfEmptyStates).toBe(1);
+    });
+
+    it('should have correct path to snippet', () => {
+        const wrapper = createWrapper();
+        const textOfEmptyStateBlock = wrapper.find('.sw-cms-page-form__empty-state-text').text();
+
+        expect(textOfEmptyStateBlock).toBe('sw-cms.section.sectionEmptyState');
+    });
+
+    it('should have an cms section with a text element', () => {
+        const wrapper = createWrapper();
+        const configElement = wrapper.find('.config-element');
+
+        expect(configElement.text()).toBe('Config element');
+    });
+});