Skip to content

Commit 3b1ec3f

Browse files
selulselul
committed
feat: adds possible conflicts tab which reports the most common problems that Optimole might have with various plugins
1 parent 4134b05 commit 3b1ec3f

15 files changed

+368
-159
lines changed

‎assets/vue/components/conflict-item.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div class="notification" :class="conflictClass( item.severity )">
3+
<div v-html="item.message"></div>
4+
5+
<a :class="is_loading ? 'is-loading' : '' "
6+
class="is-pulled-right button optml-conflict-done is-small is-link is-inverted is-outlined"
7+
v-on:click="dismissConflict( item.id )"><span v-if="!is_loading" class="dashicons dashicons-yes"></span>{{strings.conflict_close}}</a>
8+
<div class=" is-clearfix"></div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
14+
export default {
15+
name: "conflict-item",
16+
props: {
17+
item:{
18+
type: Object
19+
},
20+
is_loading:{
21+
type: Boolean,
22+
default: false
23+
}
24+
},
25+
data() {
26+
return {
27+
home_url: optimoleDashboardApp.home_url,
28+
strings: optimoleDashboardApp.strings.conflicts,
29+
}
30+
},
31+
methods: {
32+
conflictClass(type) {
33+
if (type === 'high') {
34+
return 'is-danger';
35+
}
36+
if (type === 'medium') {
37+
return 'is-info';
38+
}
39+
return 'is-primary';
40+
},
41+
dismissConflict(conflictID) {
42+
this.is_loading = true;
43+
this.$store.dispatch('dismissConflict', {conflictID: conflictID, component: this});
44+
}
45+
}
46+
}
47+
</script>
48+
<style scoped>
49+
#optimole-app .optml-conflict-done.button.is-link.is-outlined.is-loading::after {
50+
border-color: transparent transparent #fff #fff !important;
51+
}
52+
53+
.optml-conflict-done:hover {
54+
background-color: transparent !important;
55+
color: #fff !important;
56+
border-color: transparent !important;
57+
}
58+
</style>

‎assets/vue/components/conflicts.vue

Lines changed: 16 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,35 @@
11
<template>
22
<div>
33
<div class="conflicts-table">
4-
<h3 class="has-text-centered">{{strings.title}}</h3>
4+
<h6 v-if="!noConflicts" class="has-text-centered">{{strings.title}}</h6>
55
<div v-if="!noConflicts">
6+
7+
<div class="row" v-for="(item, index) in conflictData">
8+
<div class="column">
9+
<conflict-item v-bind:item=item v-bind:is_loading="false"></conflict-item>
10+
</div>
11+
</div>
12+
</div>
13+
<div v-if="noConflicts">
614
<table class="table is-striped is-hoverable is-fullwidth">
715
<tbody>
8-
<tr v-for="(item, index) in conflictData">
9-
<td>
10-
<div class="notification" :class="conflictClass( item.severity )">
11-
<button class="delete" style="box-sizing: border-box;" v-on:click="dismissConflict( item.id )"></button>
12-
{{item.message}}
13-
</div>
14-
</td>
16+
<tr>
17+
<th class="optml-image-heading has-text-centered" v-html="strings.no_conflicts_found"></th>
1518
</tr>
1619
</tbody>
1720
</table>
1821
</div>
19-
<div v-if="noConflicts">
20-
<table class="table is-striped is-hoverable is-fullwidth">
21-
<thead>
22-
<tr>
23-
<th class="optml-image-heading has-text-centered" v-html="strings.no_conflicts_found"></th>
24-
</tr>
25-
</thead>
26-
</table>
27-
</div>
2822
</div>
2923
</div>
3024
</template>
3125

3226
<script>
3327
28+
import ConflictItem from "./conflict-item.vue";
29+
3430
export default {
3531
name: "conflicts",
32+
components: {ConflictItem},
3633
data() {
3734
return {
3835
home_url: optimoleDashboardApp.home_url,
@@ -42,24 +39,10 @@
4239
computed: {
4340
noConflicts() {
4441
return this.$store.state.conflicts.count === 0
45-
},
42+
},
4643
conflictData() {
4744
return this.$store.state.conflicts.conflicts !== null ? this.$store.state.conflicts.conflicts : [];
4845
},
49-
},
50-
methods: {
51-
conflictClass( type ) {
52-
if ( type === 'high' ) {
53-
return 'is-danger';
54-
}
55-
if ( type === 'medium' ) {
56-
return 'is-warning';
57-
}
58-
return 'is-info';
59-
},
60-
dismissConflict( conflictID ) {
61-
this.$store.dispatch('dismissConflict', {conflictID: conflictID, component: this});
62-
}
6346
}
6447
}
65-
</script>
48+
</script>

‎assets/vue/components/main.vue

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="columns is-desktop">
3-
3+
44
<div class="column ">
55
<div class="card">
66
<app-header></app-header>
@@ -10,14 +10,20 @@
1010
<transition name="fade" mode="out-in">
1111
<div v-if="this.$store.state.connected">
1212
<div class="tabs is-left is-boxed is-medium">
13-
<ul class="is-marginless">
13+
<ul class="is-marginless optml-tabs">
1414
<li :class="tab === 'dashboard' ? 'is-active' : ''">
1515
<a @click="changeTab('dashboard')" class="is-size-6-mobile">
1616
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-admin-home"></span>
1717
<span class="is-size-6-mobile is-size-6-touch ">{{strings.dashboard_menu_item}}</span>
1818
</a>
1919
</li>
20-
20+
<li :class="tab === 'conflicts' ? 'is-active' : ''" v-if="conflictCount > 0">
21+
<a @click="changeTab('conflicts')" class="is-size-6-mobile">
22+
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-warning"></span>
23+
<span class="is-size-6-mobile is-size-6-touch">{{strings.conflicts_menu_item}}</span>&nbsp;
24+
<span class="tag is-rounded is-danger">{{conflictCount}}</span>
25+
</a>
26+
</li>
2127
<li :class="tab === 'settings' ? 'is-active' : ''">
2228
<a @click="changeTab('settings')" class="is-size-6-mobile ">
2329
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-admin-settings"></span>
@@ -30,16 +36,10 @@
3036
<span class="is-size-6-mobile is-size-6-touch">{{strings.watermarks_menu_item}}</span>
3137
</a>
3238
</li>
33-
<li :class="tab === 'conflicts' ? 'is-active' : ''" v-if="conflictCount > 0">
34-
<a @click="changeTab('conflicts')" class="is-size-6-mobile">
35-
<span class="icon is-size-6-mobile is-size-6-tablet dashicons dashicons-warning"></span>
36-
<span class="is-size-6-mobile is-size-6-touch">{{strings.conflicts_menu_item}}</span>&nbsp;
37-
<span class="tag is-rounded is-warning">{{conflictCount}}</span>
38-
</a>
39-
</li>
39+
4040
</ul>
4141
</div>
42-
42+
4343
<div class="is-tab" v-if="tab === 'dashboard' " :class="remove_images ? 'no-images' : '' ">
4444
<div class="notification is-success" v-if="strings.notice_just_activated.length > 0"
4545
v-html="strings.notice_just_activated"></div>
@@ -61,7 +61,7 @@
6161
</transition>
6262
</div>
6363
</div>
64-
64+
6565
<div class="level-right">
6666
<p class="level-item"><a href="https://optimole.com" target="_blank">Optimole
6767
v{{strings.version}}</a></p>
@@ -151,19 +151,27 @@
151151
</script>
152152
<style lang="sass-loader">
153153
@import '../../css/style.scss';
154-
154+
155155
#optimole-app .tabs a {
156156
margin-bottom: -4px;
157157
}
158-
158+
159159
#optimole-app .optml-upgrade {
160160
min-width: 200px;
161161
}
162-
162+
163163
#optimole-app .is-tab.no-images{
164164
min-height: 400px;
165165
}
166166
#optimole-app .is-tab {
167167
min-height: 700px;
168168
}
169-
</style>
169+
.optml-tabs{
170+
position: relative;
171+
}
172+
.optml-tabs .optml-conflicts-tabs{
173+
position: absolute;
174+
right: 0;
175+
top: 0;
176+
}
177+
</style>

‎assets/vue/store/actions.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const connectOptimole = function ( {commit, state}, data ) {
1313
url: optimoleDashboardApp.root + '/connect',
1414
method: 'POST',
1515
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
16-
params: {'req': data.req},
1716
body: {
1817
'api_key': data.apiKey,
1918
},
@@ -52,7 +51,6 @@ const registerOptimole = function ( {commit, state}, data ) {
5251
url: optimoleDashboardApp.root + '/register',
5352
method: 'POST',
5453
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
55-
params: {'req': data.req},
5654
body: {
5755
'email': data.email,
5856
},
@@ -80,7 +78,6 @@ const disconnectOptimole = function ( {commit, state}, data ) {
8078
url: optimoleDashboardApp.root + '/disconnect',
8179
method: 'GET',
8280
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
83-
params: {'req': data.req},
8481
emulateJSON: true,
8582
responseType: 'json'
8683
}
@@ -164,7 +161,6 @@ const retrieveOptimizedImages = function ( {commit, state}, data ) {
164161
method: 'GET',
165162
emulateJSON: true,
166163
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
167-
params: {'req': 'Get Optimized Images'},
168164
responseType: 'json',
169165
timeout: 10000
170166
}
@@ -199,7 +195,6 @@ const retrieveWatermarks = function ( {commit, state}, data ) {
199195
url: optimoleDashboardApp.root + '/poll_watermarks',
200196
method: 'GET',
201197
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
202-
params: {'req': 'Get Watermarks'},
203198
responseType: 'json',
204199
} ).then( function ( response ) {
205200
commit( 'toggleLoading', false );
@@ -260,7 +255,6 @@ const retrieveConflicts = function ( {commit, state}, data ) {
260255
url: optimoleDashboardApp.root + '/poll_conflicts',
261256
method: 'GET',
262257
headers: {'X-WP-Nonce': optimoleDashboardApp.nonce},
263-
params: {'req': 'Get Conflicts'},
264258
responseType: 'json',
265259
} ).then( function ( response ) {
266260
commit( 'toggleLoading', false );

‎inc/admin.php

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -527,10 +527,11 @@ private function get_dashboard_strings() {
527527
'dashboard_menu_item' => __( 'Dashboard', 'optimole-wp' ),
528528
'settings_menu_item' => __( 'General Settings', 'optimole-wp' ),
529529
'watermarks_menu_item' => __( 'Watermark options', 'optimole-wp' ),
530-
'conflicts_menu_item' => __( 'Conflicts', 'optimole-wp' ),
530+
'conflicts_menu_item' => __( 'Possible issues', 'optimole-wp' ),
531531
'conflicts' => array(
532-
'title' => __( 'Possible Conflicts', 'optimole-wp' ),
532+
'title' => __( 'We might have some possible conflicts with the plugins that you use. In order to benefit from Optimole\'s full potential you will need to address this issues.', 'optimole-wp' ),
533533
'message' => __( 'Details', 'optimole-wp' ),
534+
'conflict_close' => __( 'I\'ve done this.', 'optimole-wp' ),
534535
'no_conflicts_found' => __( 'No conflicts found. We are all peachy now. 🍑', 'optimole-wp' ),
535536
),
536537
'upgrade' => array(

‎inc/conflicts/abstract_conflict.php

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
*
1212
* @since 2.0.6
1313
*/
14-
abstract class Optml_Abstract_Conflict {
14+
abstract class Optml_Abstract_Conflict {
1515
/**
1616
* Constant for low severity.
1717
*
@@ -74,67 +74,69 @@ public function __construct() {
7474
}
7575

7676
/**
77-
* Get the id for the conflict.
77+
* Set the message property
7878
*
7979
* @since 2.0.6
8080
* @access public
81-
* @param int $length Optional. A length for the generated ID.
82-
*
83-
* @return bool|string
8481
*/
85-
public function get_id( $length = 8 ) {
86-
$hash = sha1( $this->message . $this->type . $this->severity . $this->priority );
87-
return substr( $hash, 0, $length );
88-
}
82+
abstract public function define_message();
8983

9084
/**
9185
* Checks if conflict is active.
9286
*
93-
* @since 2.0.6
94-
* @access public
9587
* @param array $dismissed_conflicts A list of dismissed conflicts. Passed by the manager.
9688
*
9789
* @return bool
90+
* @since 2.0.6
91+
* @access public
9892
*/
9993
public function is_active( $dismissed_conflicts = array() ) {
10094
$conflict_id = $this->get_id();
10195
if ( isset( $dismissed_conflicts[ $conflict_id ] ) && $dismissed_conflicts[ $conflict_id ] === 'true' ) {
10296
return false;
10397
}
98+
10499
return $this->is_conflict_valid();
105100
}
106101

107102
/**
108-
* Set the message property
103+
* Get the id for the conflict.
104+
*
105+
* @param int $length Optional. A length for the generated ID.
109106
*
107+
* @return bool|string
110108
* @since 2.0.6
111109
* @access public
112110
*/
113-
abstract public function define_message();
111+
public function get_id( $length = 8 ) {
112+
$hash = sha1( strtolower( get_called_class() ) . $this->type . $this->severity . $this->priority );
113+
114+
return substr( $hash, 0, $length );
115+
}
114116

115117
/**
116118
* Determine if conflict is applicable.
117119
*
120+
* @return bool
118121
* @since 2.0.6
119122
* @access public
120-
* @return bool
121123
*/
122124
abstract public function is_conflict_valid();
123125

124126
/**
125127
* Get the conflict information.
126128
*
129+
* @return array
127130
* @since 2.0.6
128131
* @access public
129-
* @return array
130132
*/
131133
public function get_conflict() {
132134
return array(
133-
'id' => $this->get_id(),
134-
'type' => $this->type,
135+
'id' => $this->get_id(),
136+
'type' => $this->type,
135137
'priority' => $this->priority,
136138
'severity' => $this->severity,
137-
'message' => $this->message,
139+
'message' => $this->message,
138140
);
139141
}
140142
}

0 commit comments

Comments
 (0)