Merge pull request #6468 from Countly/adding-warning-tags-to-settings

fix: [plugins] Design change for warning tags

Author: pnrgenc

plugins/plugins/frontend/public/javascripts/countly.models.js

@@ -318,9 +318,9 @@
 
     // Tooltip color mappings
     var TOOLTIP_COLORS = {
-        dataIngestion: "color-yellow-100",
-        uiFiltering: "color-blue-100",
-        serverPerformance: "color-red-100"
+        dataIngestion: { bgColor: '#FCF5E5', textColor: '#E49700' },
+        serverPerformance: { bgColor: '#FBECE5', textColor: '#D23F00' },
+        uiFiltering: { bgColor: '#E1EFFF', textColor: '#0166D6' }
     };
 
     /**

plugins/plugins/frontend/public/javascripts/countly.views.js

@@ -540,7 +540,8 @@
                 return warnings.map(function(warning) {
                     return {
                         tooltipText: CV.i18n(warning.text),
-                        color: tooltipColors[warning.type],
+                        bgColor: tooltipColors[warning.type].bgColor,
+                        textColor: tooltipColors[warning.type].textColor,
                         label: countlyPlugins.getTooltipLabel(warning.type)
                     };
                 });

plugins/plugins/frontend/public/localization/plugins.properties

@@ -247,8 +247,8 @@ configs.tooltip.server-performance-warning = Adjusting this value may impact sys
 configs.tooltip.data-ingestion-warning = Adjusting this value may affect data processing
 configs.tooltip.ui-filtering-warning = Adjusting this value controls how much data is shown in the UI
 configs.tooltip.data-ingestion = Data Processing
-configs.tooltip.ui-filtering = UI Display
-configs.tooltip.server-performance = Performance Impact
+configs.tooltip.ui-filtering = Interface
+configs.tooltip.server-performance = Performance
 
 systemlogs.action.change_configs = Setting Changed
 systemlogs.action.change_plugins = Plugins Changed

plugins/plugins/frontend/public/stylesheets/main.scss

@@ -73,6 +73,26 @@
     }
 }
 
+.config-section {
+    &__header {
+        width: max-content;
+    }
+}
+
+.configuration-warning-container {
+    border-radius: 4px;
+    display: flex;
+    height: 20px;
+    width: auto;
+
+    &__text {
+        font-size: 10px;
+        font-weight: 500;
+        margin: 4px 6px;
+        text-transform: uppercase;
+    }
+}
+
 .apikey {
     .el-input {
         width: 320px;

plugins/plugins/frontend/public/templates/configurations.html

@@ -51,26 +51,31 @@ <h3 v-if="predefinedStructure[selectedConfig].groups.length > 1 || group.label"
                                     v-for="key in group.list" :key="key" 
                                     class="bu-columns bu-is-vcentered bu-p-5 config-section">
                                     <div class="bu-column bu-is-7">
-                                        <div 
-                                            v-if="getWarningTags(selectedConfig, key).length"
-                                            class="bu-is-flex bu-is-align-items-center bu-is-justify-content-start bu-mb-2">
-                                            <div
-                                                v-for="(tag, index) in getWarningTags(selectedConfig, key)"
-                                                :key="index"
-                                                class="bu-is-flex bu-is-align-items-center bu-is-justify-content-center"
-                                                v-tooltip="tag.tooltipText"
-                                            >
-                                                <i 
-                                                    class="cly-io cly-io-exclamation text-big"
-                                                    :class="tag.color"
-                                                />
-                                                <span class="bu-ml-1 bu-mr-4 text-smallest" :class="tag.color">{{ tag.label }}</span>
-                                            </div>
-                                        </div>
-                                        <div class="bu-has-text-weight-medium bu-is-flex bu-is-align-items-center" :data-test-id="'settings-title-label-' + key.toLowerCase().replaceAll('_', '-')">
+                                        <div class="bu-has-text-weight-medium bu-is-flex bu-is-align-items-center config-section__header" :data-test-id="'settings-title-label-' + key.toLowerCase().replaceAll('_', '-')">
                                             <div>
                                                 <span class="bu-mr-2"> {{ getLabelName(key) }} </span>
                                             </div>
+                                            <div class="bu-is-flex bu-is-align-items-center">
+                                                <div
+                                                    v-for="(tag, index) in getWarningTags(selectedConfig, key)"
+                                                    :key="index"
+                                                    class="bu-is-flex bu-is-align-items-center bu-is-justify-content-center bu-mr-2"
+                                                >
+                                                    <div
+                                                        :style="{ backgroundColor: tag.bgColor }"
+                                                        v-tooltip="tag.tooltipText"
+                                                        class="configuration-warning-container"
+
+                                                    >
+                                                        <span
+                                                            class="configuration-warning-container__text"
+                                                            :style="{ color: tag.textColor }"
+                                                        > 
+                                                            {{ tag.label }} 
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </div>
                                         </div>
                                         <p class="bu-has-text-weight-normal bu-mt-2 bu-mb-0" v-html="getHelperLabel(key)" v-if="getHelperLabel(key)" :data-test-id="'settings-description-label-' + key.toLowerCase().replaceAll('_', '-')"></p>
                                         <div v-if="checkIfOverwritten(key)" class="config-section-overwritten">