Skip to content

Commit d53ff41

Browse files
tommaso-moromattdholloway
tommaso-moro
authored and
mattdholloway
committed
update ui for issue creatioon
1 parent 02ce9bf commit d53ff41

File tree

1 file changed

+139
-31
lines changed

1 file changed

+139
-31
lines changed

‎pkg/github/issues_ui.go‎

Lines changed: 139 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -190,22 +190,13 @@ const IssueWriteUIHTML = `<!DOCTYPE html>
190190
.status-message {
191191
padding: 12px 16px;
192192
border-radius: var(--border-radius-sm, 6px);
193-
margin-bottom: 16px;
194-
}
195-
.status-success {
196-
background: var(--color-background-success-subtle, #dafbe1);
197-
color: var(--color-text-success, #1a7f37);
198-
border: 1px solid var(--color-border-success, #aceebb);
193+
margin: 16px;
199194
}
200195
.status-error {
201196
background: var(--color-background-danger-subtle, #ffebe9);
202197
color: var(--color-text-danger, #cf222e);
203198
border: 1px solid var(--color-border-danger, #ffcecb);
204199
}
205-
.status-success a {
206-
color: var(--color-text-success, #1a7f37);
207-
font-weight: 600;
208-
}
209200
.hidden {
210201
display: none;
211202
}
@@ -236,17 +227,97 @@ const IssueWriteUIHTML = `<!DOCTYPE html>
236227
border-radius: 3px;
237228
font-size: inherit;
238229
}
230+
/* Success view styles */
231+
.success-view {
232+
padding: 16px;
233+
}
234+
.success-header {
235+
display: flex;
236+
align-items: center;
237+
gap: 8px;
238+
margin-bottom: 16px;
239+
color: var(--color-text-success, #1a7f37);
240+
}
241+
.success-icon {
242+
width: 24px;
243+
height: 24px;
244+
border-radius: 50%;
245+
background: var(--color-background-success, #1f883d);
246+
color: #fff;
247+
display: flex;
248+
align-items: center;
249+
justify-content: center;
250+
font-size: 14px;
251+
}
252+
.success-title {
253+
font-weight: 600;
254+
font-size: var(--font-heading-xs-size, 16px);
255+
}
256+
.issue-card {
257+
border: 1px solid var(--color-border-primary, #d0d7de);
258+
border-radius: var(--border-radius-sm, 6px);
259+
background: var(--color-background-primary, #fff);
260+
overflow: hidden;
261+
}
262+
.issue-card-header {
263+
padding: 12px 16px;
264+
border-bottom: 1px solid var(--color-border-primary, #d0d7de);
265+
display: flex;
266+
align-items: flex-start;
267+
gap: 8px;
268+
}
269+
.issue-state-icon {
270+
color: var(--color-text-success, #1a7f37);
271+
margin-top: 2px;
272+
}
273+
.issue-title-link {
274+
font-weight: 600;
275+
color: var(--color-text-primary, #24292f);
276+
text-decoration: none;
277+
}
278+
.issue-title-link:hover {
279+
color: var(--color-text-info, #0969da);
280+
text-decoration: underline;
281+
}
282+
.issue-number {
283+
color: var(--color-text-secondary, #656d76);
284+
font-weight: 400;
285+
}
286+
.issue-card-body {
287+
padding: 12px 16px;
288+
color: var(--color-text-secondary, #656d76);
289+
font-size: var(--font-text-sm-size, 13px);
290+
}
291+
.issue-card-body p {
292+
margin: 0;
293+
white-space: pre-wrap;
294+
word-break: break-word;
295+
}
296+
.issue-card-footer {
297+
padding: 8px 16px;
298+
background: var(--color-background-tertiary, #f6f8fa);
299+
border-top: 1px solid var(--color-border-primary, #d0d7de);
300+
font-size: var(--font-text-sm-size, 12px);
301+
color: var(--color-text-secondary, #656d76);
302+
}
303+
.issue-card-footer a {
304+
color: var(--color-text-info, #0969da);
305+
text-decoration: none;
306+
}
307+
.issue-card-footer a:hover {
308+
text-decoration: underline;
309+
}
239310
</style>
240311
</head>
241312
<body>
242313
<div id="content">
243-
<div class="issue-form">
314+
<!-- Form View -->
315+
<div id="form-view" class="issue-form">
244316
<div class="form-header">
245317
<span class="form-header-icon">●</span>
246318
<span>New Issue</span>
247319
</div>
248320
<div id="repo-info" class="repo-info hidden"></div>
249-
<div id="status-container"></div>
250321
<div class="form-body" id="form-body">
251322
<div class="form-group">
252323
<label class="form-label" for="issue-title">Title</label>
@@ -255,7 +326,7 @@ const IssueWriteUIHTML = `<!DOCTYPE html>
255326
<div class="form-group">
256327
<label class="form-label" for="issue-body">Description</label>
257328
<textarea id="issue-body" class="form-input form-textarea" placeholder="Describe the issue..."></textarea>
258-
<p class="form-hint">Markdown is supported</p>
329+
<p class="form-hint">Markdown is not supported</p>
259330
</div>
260331
</div>
261332
<div class="form-actions" id="form-actions">
@@ -264,6 +335,31 @@ const IssueWriteUIHTML = `<!DOCTYPE html>
264335
</button>
265336
</div>
266337
</div>
338+
339+
<!-- Success View (hidden by default) -->
340+
<div id="success-view" class="issue-form hidden">
341+
<div class="success-view">
342+
<div class="success-header">
343+
<span class="success-icon">✓</span>
344+
<span class="success-title">Issue created</span>
345+
</div>
346+
<div class="issue-card">
347+
<div class="issue-card-header">
348+
<span class="issue-state-icon">●</span>
349+
<div>
350+
<a id="success-issue-link" class="issue-title-link" href="#" target="_blank">
351+
<span id="success-issue-title"></span>
352+
<span id="success-issue-number" class="issue-number"></span>
353+
</a>
354+
</div>
355+
</div>
356+
<div id="success-issue-body" class="issue-card-body"></div>
357+
<div class="issue-card-footer">
358+
<a id="success-view-link" href="#" target="_blank">View on GitHub →</a>
359+
</div>
360+
</div>
361+
</div>
362+
</div>
267363
</div>
268364
<script>
269365
// ============================================================
@@ -386,7 +482,7 @@ const IssueWriteUIHTML = `<!DOCTYPE html>
386482
}
387483
388484
setLoading(true);
389-
clearStatus();
485+
clearError();
390486
391487
try {
392488
const result = await sendRequest('tools/call', {
@@ -409,12 +505,15 @@ const IssueWriteUIHTML = `<!DOCTYPE html>
409505
if (textContent?.text) {
410506
try {
411507
const issueData = JSON.parse(textContent.text);
508+
// Store the title and body we submitted for the success view
509+
issueData._submittedTitle = title;
510+
issueData._submittedBody = body;
412511
showSuccess(issueData);
413512
} catch {
414-
showSuccess({ url: textContent.text });
513+
showSuccess({ url: textContent.text, _submittedTitle: title, _submittedBody: body });
415514
}
416515
} else {
417-
showSuccess({});
516+
showSuccess({ _submittedTitle: title, _submittedBody: body });
418517
}
419518
}
420519
} catch (error) {
@@ -434,30 +533,39 @@ const IssueWriteUIHTML = `<!DOCTYPE html>
434533
}
435534
}
436535
437-
function clearStatus() {
438-
document.getElementById('status-container').innerHTML = '';
536+
function clearError() {
537+
document.getElementById('error-container').innerHTML = '';
439538
}
440539
441540
function showSuccess(data) {
442-
const container = document.getElementById('status-container');
443-
let message = '✓ Issue created successfully!';
444-
if (data.url || data.URL) {
445-
const url = data.url || data.URL;
446-
message += ' <a href="' + escapeHtml(url) + '" target="_blank">View Issue →</a>';
447-
}
448-
container.innerHTML = '<div class="status-message status-success">' + message + '</div>';
541+
// Hide the form view
542+
document.getElementById('form-view').classList.add('hidden');
449543
450-
// Disable the form after successful creation
451-
document.getElementById('issue-title').disabled = true;
452-
document.getElementById('issue-body').disabled = true;
453-
document.getElementById('submit-btn').disabled = true;
454-
document.getElementById('submit-btn').innerHTML = 'Created ✓';
544+
// Populate and show the success view
545+
const successView = document.getElementById('success-view');
546+
const url = data.url || data.URL || data.html_url || '#';
547+
const title = data.title || data._submittedTitle || 'Issue';
548+
const body = data.body || data._submittedBody || '';
549+
const number = data.number ? '#' + data.number : '';
550+
551+
document.getElementById('success-issue-title').textContent = title;
552+
document.getElementById('success-issue-number').textContent = number ? ' ' + number : '';
553+
document.getElementById('success-issue-link').href = url;
554+
document.getElementById('success-view-link').href = url;
555+
556+
const bodyEl = document.getElementById('success-issue-body');
557+
if (body) {
558+
bodyEl.innerHTML = '<p>' + escapeHtml(body) + '</p>';
559+
} else {
560+
bodyEl.innerHTML = '<p><em>No description provided.</em></p>';
561+
}
455562
563+
successView.classList.remove('hidden');
456564
notifySize();
457565
}
458566
459567
function showError(message) {
460-
const container = document.getElementById('status-container');
568+
const container = document.getElementById('error-container');
461569
container.innerHTML = '<div class="status-message status-error">' + escapeHtml(message) + '</div>';
462570
notifySize();
463571
}

0 commit comments

Comments
 (0)