Skip to content

Commit 27580f7

Browse files
theodesptheodesp
authored
Merge pull request #251 from wpengine/feat-webhooks-smart-cache-integration
feat: webhooks smart cache integration
2 parents 760a87c + b1548b1 commit 27580f7

File tree

19 files changed

+3038
-526
lines changed

19 files changed

+3038
-526
lines changed

‎examples/next/webhooks-isr/.wp-env.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
2-
"phpVersion": "7.4",
2+
"phpVersion": "8.0",
33
"plugins": [
44
"https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
5+
"https://github.com/wp-graphql/wp-graphql-smart-cache/releases/download/v2.0.0/wpgraphql-smart-cache.zip",
56
"https://downloads.wordpress.org/plugin/code-snippets.3.6.8.zip",
67
"../../../plugins/wp-graphql-headless-webhooks"
78
],

‎plugins/wp-graphql-headless-webhooks/assets/css/admin.css‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
/**
2+
* Minimal custom styles for Webhooks admin
3+
* Leveraging WordPress core admin classes
4+
*/
5+
6+
/* Use core WordPress styles for most elements */
7+
8+
/* Webhook method badge styling */
9+
.webhook-method {
10+
font-weight: 600;
11+
text-transform: uppercase;
12+
font-size: 11px;
13+
}
14+
15+
/* Header row styling using core form-table classes */
16+
.webhook-headers .form-table td {
17+
padding: 5px 10px 5px 0;
18+
}
19+
20+
/* Minimal adjustment for header inputs */
21+
.webhook-header-row {
22+
margin-bottom: 10px;
23+
}
24+
25+
.webhook-header-row input[type="text"] {
26+
width: calc(50% - 50px);
27+
margin-right: 10px;
28+
}
29+
30+
/* Use core button styles, just add spacing */
31+
.test-webhook {
32+
margin-right: 5px;
33+
}
34+
35+
/* Test button states */
36+
.test-webhook.testing {
37+
opacity: 0.6;
38+
cursor: not-allowed;
39+
}
40+
41+
.test-webhook.success {
42+
color: #46b450;
43+
}
44+
45+
.test-webhook.error {
46+
color: #dc3232;
47+
}
48+
49+
/* Webhook test result row */
50+
.webhook-test-result td {
51+
padding: 0 !important;
52+
background: transparent !important;
53+
}
54+
55+
.webhook-test-result .notice {
56+
margin: 10px;
57+
position: relative;
58+
}
59+
60+
.webhook-test-result .notice.inline {
61+
display: block;
62+
}
63+
64+
/* Test details styling */
65+
.webhook-test-details {
66+
padding: 12px;
67+
}
68+
69+
.webhook-test-details p {
70+
margin: 0.5em 0;
71+
}
72+
73+
.webhook-test-details strong {
74+
font-weight: 600;
75+
}
76+
77+
/* Status indicators */
78+
.webhook-test-details .status-success {
79+
color: #46b450;
80+
font-weight: 600;
81+
}
82+
83+
.webhook-test-details .status-error {
84+
color: #dc3232;
85+
font-weight: 600;
86+
}
87+
88+
/* Expandable details */
89+
.webhook-test-details details {
90+
margin: 10px 0;
91+
border: 1px solid #ddd;
92+
border-radius: 3px;
93+
padding: 0;
94+
}
95+
96+
.webhook-test-details summary {
97+
padding: 10px;
98+
cursor: pointer;
99+
background: #f7f7f7;
100+
border-bottom: 1px solid #ddd;
101+
font-weight: 600;
102+
}
103+
104+
.webhook-test-details details[open] summary {
105+
border-bottom: 1px solid #ddd;
106+
}
107+
108+
.webhook-test-details pre {
109+
margin: 0;
110+
padding: 10px;
111+
background: #f9f9f9;
112+
overflow-x: auto;
113+
white-space: pre-wrap;
114+
word-wrap: break-word;
115+
font-size: 12px;
116+
line-height: 1.4;
117+
}
118+
119+
/* Payload and response styling */
120+
.webhook-test-payload,
121+
.webhook-response-body {
122+
font-family: Consolas, Monaco, monospace;
123+
max-height: 300px;
124+
overflow-y: auto;
125+
}
126+
127+
/* Notice dismiss button positioning */
128+
.webhook-test-result .notice-dismiss {
129+
position: absolute;
130+
top: 0;
131+
right: 1px;
132+
padding: 10px 15px;
133+
font-size: 13px;
134+
line-height: 1.23076923;
135+
text-decoration: none;
136+
}
137+
138+
.webhook-test-result .notice-dismiss:before {
139+
content: "\f153";
140+
font-family: dashicons;
141+
font-size: 20px;
142+
font-style: normal;
143+
font-weight: 400;
144+
height: 20px;
145+
width: 20px;
146+
-webkit-font-smoothing: antialiased;
147+
-moz-osx-font-smoothing: grayscale;
148+
}
149+
150+
/* Webhook URL column styling */
151+
.webhook-url {
152+
display: block;
153+
max-width: 100%;
154+
overflow: hidden;
155+
text-overflow: ellipsis;
156+
white-space: nowrap;
157+
font-family: Consolas, Monaco, monospace;
158+
font-size: 13px;
159+
color: #2271b1;
160+
}
161+
162+
/* Ensure proper column spacing */
163+
.wp-list-table .column-url {
164+
width: 35%;
165+
min-width: 200px;
166+
}
167+
168+
.wp-list-table .column-name {
169+
width: 25%;
170+
}
171+
172+
.wp-list-table .column-event {
173+
width: 20%;
174+
}
175+
176+
.wp-list-table .column-method {
177+
width: 10%;
178+
}
179+
180+
.wp-list-table .column-headers {
181+
width: 10%;
182+
}
183+
184+
/* Row actions test link styling */
185+
.row-actions .test-webhook {
186+
color: #2271b1;
187+
text-decoration: none;
188+
}
189+
190+
.row-actions .test-webhook:hover {
191+
color: #135e96;
192+
text-decoration: underline;
193+
}
194+
195+
.row-actions .test-webhook.testing {
196+
color: #666;
197+
cursor: default;
198+
pointer-events: none;
199+
}
200+
201+
.row-actions .test-webhook.success {
202+
color: #46b450;
203+
}
204+
205+
.row-actions .test-webhook.error {
206+
color: #dc3232;
207+
}

0 commit comments

Comments
 (0)