Merge pull request #6343 from Countly/SER-2423-toogle-button-bugfixes-ce

[SER-2423] publish button interactions

Author: coskunaydinoglu

frontend/express/public/javascripts/countly/vue/components/content.js

@@ -121,7 +121,8 @@
             'input',
             'save',
             'switch-toggle',
-            'tab-change'
+            'tab-change',
+            'publish-button-click'
         ],
 
         data() {
@@ -204,6 +205,10 @@
             },
 
             onPublishButtonClick() {
+                if (this.isToggleDisabled) {
+                    this.$emit('publish-button-click');
+                    return;
+                }
                 this.toggleLocalValue = !this.toggleLocalValue;
             },
 

frontend/express/public/javascripts/countly/vue/templates/content/content-header.html

@@ -65,6 +65,7 @@
 
         <el-button
             v-if="!hideSaveButton"
+            id="journey-save-button"
             class="cly-vue-content-builder-header__save-button"
             data-test-id="content-header-save-button"
             :disabled="disableSaveButton"
@@ -75,21 +76,29 @@
         >
             {{ saveButtonLabel }}
         </el-button>
-        <el-button
+        <div
             v-if="toggle"
-            v-tooltip.down="toggleTooltip"
-            :disabled="isToggleDisabled"
-            class="cly-vue-content-builder-header__save-button"
-            test-id="journey-publish"
-            :type="toggleLocalValue ? 'warning' : 'success'"
-            size="small"
-            @click="onPublishButtonClick"
+            style="display: inline-block; margin-left: 8px;"
         >
-            <template v-if="toggleLocalValue">
-                <i class="cly-is cly-is-pause" style="margin-right: 4px;"></i>
-            </template>
-            {{ toggleLocalValue ? 'Pause': 'Publish' }}
-        </el-button>
+            <button
+                v-tooltip.down="toggleTooltip"
+                :class="[
+                    'cly-vue-content-builder-header__save-button',
+                    'el-button',
+                    'el-button--small',
+                    isToggleDisabled ? 'is-disabled' : '',
+                    toggleLocalValue ? 'el-button--warning' : 'el-button--success'
+                ]"
+                test-id="journey-publish"
+                :disabled="false"
+                @click="onPublishButtonClick"
+            >
+                <template v-if="toggleLocalValue">
+                    <i class="cly-is cly-is-pause" style="margin-right: 4px;"></i>
+                </template>
+                {{ toggleLocalValue ? 'Pause': 'Publish' }}
+            </button>
+        </div>
         <cly-more-options
             v-if="isOptionsButtonVisible"
             class="cly-vue-content-builder-header__options-button"