Skip to content

Commit 9c290bb

Browse files
turtledreamsturtledreams
authored
Merge pull request #6948 from Countly/sdk-ui-update
[sdk] UI update
2 parents 49592ad + 230ab3b commit 9c290bb

File tree

15 files changed

+285
-146
lines changed

15 files changed

+285
-146
lines changed

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

Lines changed: 95 additions & 59 deletions
Large diffs are not rendered by default.

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

Lines changed: 100 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -72,21 +72,6 @@
7272
}
7373
}
7474

75-
.cly-vue-tooltip-icon.ion.ion-help-circled.tooltip-success {
76-
color: #6c3 !important;
77-
}
78-
79-
.cly-vue-tooltip-icon.ion.ion-help-circled.tooltip-warning {
80-
color: #fc0 !important;
81-
}
82-
83-
.cly-vue-tooltip-icon.ion.ion-help-circled.tooltip-danger {
84-
color: #f55 !important;
85-
}
86-
87-
.cly-vue-tooltip-icon.ion.ion-help-circled.tooltip-neutral {
88-
color: #A7AEB8 !important;
89-
}
9075

9176
.preset-button {
9277
border-radius: 20px; // pill shape
@@ -119,6 +104,37 @@
119104
align-items: flex-start !important;
120105
}
121106

107+
@media (max-width: 1750px) {
108+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start {
109+
display: flex !important;
110+
flex-direction: column !important;
111+
gap: 12px !important;
112+
align-items: stretch !important;
113+
}
114+
.sdk-preset-select-wrapper { margin-left: 0px !important; }
115+
116+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .sdk-preset-select-wrapper,
117+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .validation-wrapper,
118+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .sdk-number-wrapper,
119+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-select,
120+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-input,
121+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-input-number,
122+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .cly-colorpicker,
123+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .el-upload {
124+
width: 100% !important;
125+
min-width: 0 !important;
126+
}
127+
128+
.sdk-enforce-btn {
129+
margin: 0 !important;
130+
}
131+
132+
.config-section .bu-column.bu-is-3.bu-is-flex.bu-is-justify-content-flex-start .sdk-enforce-btn {
133+
min-width: 0 !important;
134+
align-self: flex-start !important;
135+
}
136+
}
137+
122138
/* SDK config validation styles */
123139
.config-invalid textarea,
124140
.config-invalid input,
@@ -127,11 +143,14 @@
127143
box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.12) !important;
128144
}
129145

146+
.el-textarea {
147+
width: 180px;
148+
}
149+
130150
.validation-wrapper {
131151
display: flex;
132152
flex-direction: column;
133-
width: 100%;
134-
align-items: stretch;
153+
// align-items: stretch;
135154
}
136155

137156
.config-validation-box {
@@ -168,3 +187,67 @@
168187
}
169188
.config-validation-box .dot.green { background: var(--cly-success, #2ecc71); }
170189
.config-validation-box .dot.red { background: var(--cly-danger, #e74c3c); }
190+
191+
.sdk-applied-indicator {
192+
display: inline-flex;
193+
align-items: center;
194+
margin-left: 8px;
195+
color: #10a14a;
196+
font-size: 10px;
197+
padding: 0 6px;
198+
border-radius: 4px;
199+
height: 20px;
200+
line-height: 20px;
201+
font-weight: 500;
202+
white-space: nowrap;
203+
}
204+
.sdk-applied-indicator i { font-size: 12px; margin-right: 4px; }
205+
.configuration-warning-container--applied { @extend .sdk-applied-indicator; background: #ebfaee; }
206+
207+
.sdk-enforce-btn { margin-left: 8px; padding: 0 14px !important; display: inline-flex; align-items: center; justify-content: center; }
208+
.sdk-enforce-btn i { margin-right: 6px; }
209+
.sdk-enforce-btn.enforced {
210+
background: #fff !important;
211+
color: #34495e !important;
212+
border-color: #dcdfe6 !important;
213+
min-width: 180px;
214+
}
215+
.sdk-enforce-btn.enforced i { color: #c0bbbb; }
216+
217+
.sdk-support-text {
218+
display: flex;
219+
align-items: flex-start;
220+
gap: 6px;
221+
font-size: 12px;
222+
margin-top: 6px;
223+
padding: 6px 8px;
224+
border-radius: 6px;
225+
border: 1px solid transparent;
226+
}
227+
.sdk-support-text i { font-size: 12px; margin-top: 2px; }
228+
.sdk-support-text.tooltip-neutral { background: transparent; color: #0166D6; }
229+
.sdk-support-text.tooltip-danger { background: transparent; color: #D23F00; }
230+
.sdk-support-text.tooltip-success { background: transparent; color: #ffffff; }
231+
.sdk-support-text.tooltip-warning { background: transparent; color: #E49700; }
232+
233+
.sdk-default-flag { font-style: italic; color: #909399; }
234+
.sdk-default-hint { margin-top: 4px; font-size: 11px; color: #909399; text-align: center; }
235+
.sdk-enforce-fixed { min-width: 140px; text-align: center; }
236+
.sdk-enforce-btn { align-self: flex-start; height: 32px !important; line-height: 30px !important; }
237+
238+
.sdk-number-wrapper { display: flex; flex-direction: column; }
239+
.sdk-number-wrapper .el-input-number { width: 180px; }
240+
.el-select>.el-input { width: 180px; }
241+
.sdk-switch-select { min-width: 180px; width: 180px; }
242+
.sdk-preset-select-wrapper .el-select { width: 180px; }
243+
244+
.sdk-switch-select { min-width: 140px; }
245+
246+
.sdk-preset-select-wrapper { width: 100%; display: flex; justify-content: flex-start; margin-left: 188px; }
247+
248+
.el-input-number {
249+
.el-input-number__decrease,
250+
.el-input-number__increase {
251+
background: white;
252+
}
253+
}

‎plugins/sdk/frontend/public/templates/config.html‎

Lines changed: 59 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
:tooltip="{description}">
55
<template v-slot:header-right>
66
<div class="bu-level-item">
7-
<el-button @click="enforce" type="default" size="small" icon="cly-icon-btn fas fa-lock">
8-
Enforce All
7+
<el-button @click="enforce" type="default" size="small" icon="cly-icon-btn far fa-check-circle">
8+
Apply all to SDKs
99
</el-button>
1010
</div>
1111
<div class="bu-level-item">
12-
<el-button @click="resetSDKConfiguration" type="default" size="small" icon="cly-icon-btn fas fa-sync">
13-
Reset Configuration
12+
<el-button @click="resetSDKConfiguration" type="default" size="small" icon="cly-icon-btn fas fa-undo">
13+
Reset all settings
1414
</el-button>
1515
</div>
1616
<div class="bu-level-item">
@@ -39,36 +39,32 @@ <h3 v-if="group.label" class="bu-mb-4" data-test-id="sdk-control-label">
3939
<p class="bu-has-text-weight-medium" :data-test-id="slugFor(key) + '-title-label'">
4040
{{ getData[key].name }}
4141
<span v-if="getData[key].experimental" style="display:inline-block;width:5px;"></span>
42-
<cly-tooltip-icon v-if="getData[key].type !== 'preset' && getData[key].tooltipMessage && !getData[key].experimental && ['ew','upw','sw','esw'].indexOf(key) === -1"
43-
:tooltip="getData[key].tooltipMessage"
44-
placement="right"
45-
:tooltip-class="getData[key].tooltipClass">
46-
</cly-tooltip-icon>
47-
<template v-if="key !== 'bom_preset'">
48-
<el-button v-if="getData[key].enforced === true" @click="reverseEnforce(key)" type="success" size="small" icon="fas fa-lock">
49-
Enforced
50-
</el-button>
51-
<el-button v-else @click="enforce(key)" type="default" size="small" icon="fas fa-unlock">
52-
Not Enforced
53-
</el-button>
54-
</template>
42+
<span v-if="getData[key].enforced === true" class="configuration-warning-container--applied">
43+
<i class="far fa-check-circle"></i>Applied to SDKs
44+
</span>
5545
</p>
5646
<p class="bu-has-text-weight-normal bu-mt-2" :data-test-id="slugFor(key) + '-description-label'" v-html="getData[key].description" v-if="getData[key].description"></p>
47+
<div v-if="getData[key].tooltipMessage" :class="['sdk-support-text', getData[key].tooltipClass]">
48+
<i class="fas fa-exclamation-circle"></i>
49+
<span v-html="getData[key].tooltipMessage"></span>
50+
</div>
5751
</div>
5852
<div class="bu-column bu-is-2"></div>
59-
<div class="bu-column bu-is-3 bu-is-flex bu-is-justify-content-end">
60-
<div v-if="getData[key].type === 'preset'">
61-
<div class="button-group bu-is-flex bu-is-justify-content-start bu-is-vcentered bu-p-5 config-section"
62-
style="padding-left: 20px; padding-right: 20px; gap: 10px;">
63-
<template v-for="preset in getData[key].presets">
64-
<el-button v-if="preset.name !== 'Custom'"
65-
:key="preset.name"
66-
@click="onPresetChange(key, preset)"
67-
:class="['preset-button', { active: valueFor(key) === preset.name }]">
68-
{{ preset.name }}
69-
</el-button>
70-
</template>
71-
</div>
53+
<div class="bu-column bu-is-3 bu-is-flex bu-is-justify-content-flex-start">
54+
<div v-if="getData[key].type === 'preset'" class="sdk-preset-select-wrapper">
55+
<el-select
56+
:value="valueFor(key)"
57+
placeholder="Select preset"
58+
@change="onPresetChange(key, getData[key].presets.find(p=>p.name === $event))">
59+
<el-option
60+
v-for="preset in getData[key].presets"
61+
v-if="preset.name !== 'Custom'"
62+
:key="preset.name"
63+
:value="preset.name"
64+
:label="preset.name">
65+
<span>{{ preset.name }}<span v-if="preset.isDefault" class="sdk-default-flag"> (Default)</span></span>
66+
</el-option>
67+
</el-select>
7268
</div>
7369
<div
7470
v-else-if="getData[key].type === 'function'"
@@ -113,21 +109,33 @@ <h3 v-if="group.label" class="bu-mb-4" data-test-id="sdk-control-label">
113109
v-bind="getData[key].attrs">
114110
{{ getData[key].name }}
115111
</el-button>
116-
<el-switch
112+
<el-select
117113
v-else-if="getData[key].type === 'switch'"
118114
:test-id="slugFor(key)"
119-
@change="onChange(key, $event)"
120-
v-model="getData[key].value"
121-
v-bind="getData[key].attrs">
122-
</el-switch>
123-
<el-input-number
124-
v-else-if="getData[key].type === 'number'"
125-
@change="onChange(key, $event)"
126-
:max='2147483647'
127-
:min='0'
128-
:value="valueFor(key)"
129-
v-bind="getData[key].attrs">
130-
</el-input-number>
115+
:data-test-id="slugFor(key) + '-el-switch-wrapper'"
116+
@change="onChange(key, $event === 'enabled')"
117+
:value="getData[key].value ? 'enabled' : 'disabled'"
118+
:class="'sdk-switch-select'"
119+
placeholder="Select">
120+
<el-option key="enabled" label="Enabled" value="enabled">
121+
<span>Enabled<span v-if="getData[key].default === true" class="sdk-default-flag"> (Default)</span></span>
122+
</el-option>
123+
<el-option key="disabled" label="Disabled" value="disabled">
124+
<span>Disabled<span v-if="getData[key].default === false" class="sdk-default-flag"> (Default)</span></span>
125+
</el-option>
126+
</el-select>
127+
<div v-else-if="getData[key].type === 'number'" class="sdk-number-wrapper">
128+
<el-input-number
129+
@change="onChange(key, $event)"
130+
:max='2147483647'
131+
:min='0'
132+
:value="valueFor(key)"
133+
v-bind="getData[key].attrs">
134+
</el-input-number>
135+
<div v-if="getData[key].default !== undefined" class="sdk-default-hint">
136+
Default: {{ getData[key].default }}
137+
</div>
138+
</div>
131139
<cly-colorpicker
132140
v-else-if="getData[key].type === 'colorpicker'"
133141
:value="valueFor(key)"
@@ -163,6 +171,14 @@ <h3 v-if="group.label" class="bu-mb-4" data-test-id="sdk-control-label">
163171
@input="onChange(key, $event)"
164172
:value="getData[key].value || getData[key].default">
165173
</el-input>
174+
<template v-if="key !== 'bom_preset' && key !== 'filter_preset'">
175+
<el-button v-if="getData[key].enforced === true" @click="reverseEnforce(key)" type="default" size="small" icon="fas fa-minus-circle" class="sdk-enforce-btn enforced sdk-enforce-fixed">
176+
Remove from SDKs
177+
</el-button>
178+
<el-button v-else @click="enforce(key)" type="default" size="small" icon="far fa-check-circle" class="sdk-enforce-btn not-enforced sdk-enforce-fixed">
179+
Apply to SDKs
180+
</el-button>
181+
</template>
166182
</div>
167183
</div>
168184

‎ui-tests/cypress/e2e/onboarding/onboarding.cy.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const incomingDataLogsPageHelpers = require('../../lib/dashboard/manage/logger/l
3838
const sdkManagersPageHelpers = require('../../lib/dashboard/manage/sdk/stats');
3939
const requestStatsPageHelpers = require('../../lib/dashboard/manage/sdk/requestStats');
4040
const healthCheckPageHelpers = require('../../lib/dashboard/manage/sdk/healthCheck');
41-
const sdkConfigurationsPageHelpers = require('../../lib/dashboard/manage/sdk/configurations');
41+
// const sdkConfigurationsPageHelpers = require('../../lib/dashboard/manage/sdk/configurations'); // Moved to SDK tests
4242
const complianceHubMetricsPageHelpers = require('../../lib/dashboard/manage/compliance/metrics');
4343
const complianceHubUsersPageHelpers = require('../../lib/dashboard/manage/compliance/users');
4444
const complianceHubHistoryPageHelpers = require('../../lib/dashboard/manage/compliance/history');
@@ -228,8 +228,8 @@ describe('Complete Onboarding', () => {
228228
requestStatsPageHelpers.verifyEmptyPageElements();
229229
requestStatsPageHelpers.clickHealthCheckTab();
230230
healthCheckPageHelpers.verifyEmptyPageElements();
231-
healthCheckPageHelpers.clickSdkConfigurationTab();
232-
sdkConfigurationsPageHelpers.verifyPageElements({});
231+
// healthCheckPageHelpers.clickSdkConfigurationTab(); // Moved to SDK tests
232+
// sdkConfigurationsPageHelpers.verifyPageElements({}); // Moved to SDK tests
233233
navigationHelpers.goToComplianceHubMetricsPage();
234234
complianceHubMetricsPageHelpers.verifyEmptyPageElements();
235235
complianceHubMetricsPageHelpers.clickUsersTab();
@@ -401,7 +401,7 @@ describe('Complete Onboarding', () => {
401401
//healthCheckPageHelpers.verifyFullDataPageElements(); //TODO: Data is not being generated with the populator. Need to generate the data
402402
healthCheckPageHelpers.verifyEmptyPageElements();
403403
healthCheckPageHelpers.clickSdkConfigurationTab();
404-
sdkConfigurationsPageHelpers.verifyPageElements({});
404+
// sdkConfigurationsPageHelpers.verifyPageElements({}); // Moved to SDK tests
405405
navigationHelpers.goToComplianceHubMetricsPage();
406406
complianceHubMetricsPageHelpers.verifyFullDataPageElements();
407407
complianceHubMetricsPageHelpers.clickUsersTab();

‎ui-tests/cypress/e2e/sdk/tool_01.cy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@ describe('1.Neutral tooltip (default at app creation)', () => {
99
});
1010
it('1.3-Test', function() {
1111
goToConfigTab(true);
12-
checkTooltipAppears('neutral');
12+
checkTooltipAppears('neutral', 34);
1313
});
1414
});

‎ui-tests/cypress/e2e/sdk/tool_02.cy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ describe('2.Warning tooltip (old Web SDK version)', () => {
1414
});
1515
it('2.3-Test', function() {
1616
goToConfigTab(true);
17-
checkTooltipAppears('warning');
17+
checkTooltipAppears('warning', 34);
1818
});
1919
});

‎ui-tests/cypress/e2e/sdk/tool_03.cy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ describe('3.Success tooltip (latest Web SDK version)', () => {
1414
});
1515
it('3.3-Test', function() {
1616
goToConfigTab(true);
17-
checkTooltipAppears('success');
17+
checkTooltipAppears('success', 28);
1818
});
1919
});

‎ui-tests/cypress/e2e/sdk/tool_04.cy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ describe('4.Mixed tooltip (old Android SDK version)', () => {
1515
it('4.3-Test', function() {
1616
goToConfigTab(true);
1717
checkTooltipAppears('success', 2, true);
18-
checkTooltipAppears('warning', 25, true);
18+
checkTooltipAppears('warning', 32, true);
1919
});
2020
});

‎ui-tests/cypress/e2e/sdk/tool_05.cy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,6 @@ describe('5.Mixed tooltip (old iOS SDK version)', () => {
1515
it('5.3-Test', function() {
1616
goToConfigTab(true);
1717
checkTooltipAppears('success', 2, true);
18-
checkTooltipAppears('warning', 25, true);
18+
checkTooltipAppears('warning', 32, true);
1919
});
2020
});

‎ui-tests/cypress/e2e/sdk/tool_06.cy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ describe('6.Danger tooltip (unsupported SDK)', () => {
1414
});
1515
it('6.3-Test', function() {
1616
goToConfigTab(true);
17-
checkTooltipAppears('danger');
17+
checkTooltipAppears('danger', 34);
1818
});
1919
});

0 commit comments

Comments
 (0)