Drillable journey

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## Version 25.03.x
 Enterprise Features:
+- [journey_engine] Publish toggle is converted into button and rearranged
 - [journey_engine] Record Event block added
 - [llm interaction] Add LLM interaction event
 - [oidc] PKCE Flow support added

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

@@ -66,6 +66,11 @@
                 type: String
             },
 
+            saveButtonTooltip: {
+                default: null,
+                type: String
+            },
+
             status: {
                 default: () => ({
                     label: 'Status',
@@ -119,11 +124,13 @@
             'tab-change'
         ],
 
-        data: () => ({
-            currentTab: null,
-
-            isReadonlyInput: true
-        }),
+        data() {
+            return {
+                currentTab: null,
+                isReadonlyInput: true,
+                showActionsPopup: false
+            };
+        },
 
         computed: {
             activeTab: {
@@ -136,6 +143,15 @@
                 }
             },
 
+            localValue: {
+                get() {
+                    return countlyCommon.unescapeHtml(this.value);
+                },
+                set(value) {
+                    this.$emit('input', value);
+                }
+            },
+
             closeButtonIcon() {
                 return this.closeButton ? 'cly-io-x' : 'cly-io-arrow-sm-left';
             },
@@ -152,15 +168,6 @@
                 return !!this.options.length;
             },
 
-            localValue: {
-                get() {
-                    return countlyCommon.unescapeHtml(this.value);
-                },
-                set(value) {
-                    this.$emit('input', value);
-                }
-            },
-
             toggleLocalValue: {
                 get() {
                     return this.toggleValue;
@@ -196,6 +203,10 @@
                 this.$emit('save');
             },
 
+            onPublishButtonClick() {
+                this.toggleLocalValue = !this.toggleLocalValue;
+            },
+
             toggleInputReadonlyState() {
                 this.isReadonlyInput = !this.isReadonlyInput;
             }

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

@@ -806,6 +806,19 @@
                     });
                 }
 
+                if (countlyGlobal.plugins.indexOf('journey_engine') !== -1) {
+                    preparedEventList.push({
+                        "label": this.i18n('internal-events.[CLY]_journey_engine'),
+                        "name": "Journey",
+                        "options": [
+                            { label: this.i18n('internal-events.[CLY]_journey_engine_start'), value: '[CLY]_journey_engine_start' },
+                            { label: this.i18n('internal-events.[CLY]_journey_engine_end'), value: '[CLY]_journey_engine_end' },
+                            { label: this.i18n('internal-events.[CLY]_content_shown'), value: '[CLY]_content_shown' },
+                            { label: this.i18n('internal-events.[CLY]_content_interacted'), value: '[CLY]_content_interacted' }
+                        ]
+                    });
+                }
+
                 // {
                 //     "label": this.i18n('internal-events.[CLY]_push_action'),
                 //     "name": "[CLY]_push_action",

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

@@ -13,14 +13,7 @@
                 :class="closeButtonIcon"
             />
         </div>
-        <el-switch
-            v-if="toggle"
-            v-tooltip.right="toggleTooltip"
-            v-model="toggleLocalValue"
-            class="cly-vue-content-builder-header__toggle"
-            test-id="journey-publish"
-            :disabled="isToggleDisabled"
-        />
+
         <div class="cly-vue-content-builder-header__info">
             <div
                 v-tooltip="inputTooltip"
@@ -69,17 +62,34 @@
             :label="status.label"
             :mode="status.mode"
         />
+
         <el-button
             v-if="!hideSaveButton"
             class="cly-vue-content-builder-header__save-button"
             data-test-id="content-header-save-button"
             :disabled="disableSaveButton"
             size="small"
             type="success"
+            v-tooltip="saveButtonTooltip"
             @click="onSaveButtonClick"
         >
             {{ saveButtonLabel }}
         </el-button>
+        <el-button
+            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"
+        >
+            <template v-if="toggleLocalValue">
+                <i class="cly-is cly-is-pause" style="margin-right: 4px;"></i>
+            </template>
+            {{ toggleLocalValue ? 'Pause': 'Publish' }}
+        </el-button>
         <cly-more-options
             v-if="isOptionsButtonVisible"
             class="cly-vue-content-builder-header__options-button"