Zakaria/floci-ui
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add API Gateway route testing and discovery

Browse Source
This commit is contained in:
Zakaria
2026-09-24 08:56:22 -04:00
parent 7e49be27f1
commit 9bbe80b5f2
10 changed files with 802 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/index.css
+217
View File
@@ -2557,6 +2557,223 @@ pre,
overflow-wrap: anywhere;
}
.apigateway-test-panel {
border-top: 1px solid var(--border);
margin-top: 18px;
padding-top: 16px;
}
.apigateway-route-explorer {
border-top: 1px solid var(--border);
margin-top: 18px;
padding-top: 16px;
}
.apigateway-route-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.apigateway-route-item {
align-items: center;
background: var(--surface-subtle);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text);
cursor: pointer;
display: flex;
gap: 8px;
padding: 7px 9px;
text-align: left;
}
.apigateway-route-item:hover,
.apigateway-route-item.selected {
border-color: var(--accent);
}
.apigateway-route-item small {
color: var(--text-muted);
font-size: 11px;
}
.apigateway-route-method {
color: var(--accent);
font-size: 11px;
font-weight: 700;
}
.apigateway-test-form {
display: grid;
gap: 12px;
grid-template-columns: minmax(0, 1fr);
}
.apigateway-test-workspace {
display: grid;
gap: 22px;
grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
margin-top: 12px;
}
.apigateway-test-response {
border-left: 1px solid var(--border);
min-height: 280px;
padding-left: 22px;
}
.apigateway-request-flow {
align-items: center;
background: var(--surface-subtle);
border: 1px solid var(--border);
border-radius: 8px;
display: flex;
gap: 8px;
margin-top: 12px;
overflow-x: auto;
padding: 10px;
}
.apigateway-flow-step {
align-items: center;
display: flex;
flex: 1 0 144px;
gap: 8px;
min-width: 144px;
}
.apigateway-flow-step > svg {
color: var(--accent);
flex: 0 0 auto;
}
.apigateway-flow-step strong,
.apigateway-flow-step small {
display: block;
}
.apigateway-flow-step strong {
font-size: 12px;
}
.apigateway-flow-step small {
color: var(--text-muted);
font-size: 11px;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apigateway-flow-arrow {
color: var(--text-muted);
flex: 0 0 auto;
}
.apigateway-flow-response > svg {
color: var(--status-success);
}
.apigateway-test-form .dynamic-field {
gap: 5px;
}
.apigateway-test-form .code-textarea {
min-height: 120px;
}
.apigateway-test-body {
grid-column: auto;
}
.apigateway-test-body-label {
align-items: center;
display: flex;
justify-content: space-between;
}
.apigateway-format-button {
font-size: 11px;
min-height: 24px;
padding: 2px 7px;
}
.apigateway-test-body .code-textarea {
min-height: 120px;
}
.apigateway-test-submit {
grid-column: auto;
justify-self: start;
}
.apigateway-test-result {
background: var(--surface-subtle);
border: 1px solid var(--border);
border-radius: 8px;
margin: 0;
max-width: none;
padding: 12px;
}
.apigateway-test-result-header {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.apigateway-test-result-actions {
align-items: center;
display: flex;
gap: 6px;
}
.apigateway-test-result pre {
margin: 8px 0 0;
max-height: 260px;
overflow: auto;
}
.apigateway-test-result details {
font-size: 12px;
}
.status-success {
color: var(--status-success);
}
.status-error {
color: var(--status-error);
}
@media (max-width: 700px) {
.apigateway-test-form {
grid-template-columns: minmax(0, 1fr);
}
.apigateway-test-body {
grid-column: auto;
}
.apigateway-test-workspace {
grid-template-columns: minmax(0, 1fr);
}
.apigateway-test-response {
border-left: 0;
border-top: 1px solid var(--border);
min-height: 0;
padding: 16px 0 0;
}
.apigateway-request-flow {
justify-content: flex-start;
}
}
.snapshot-list {
display: grid;
gap: 8px;