Skip to content

Fixing editing cluster instructions. Ordering now works and GOOD - BA… #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CalMurph wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fixing editing cluster instructions. Ordering now works and GOOD - BA… #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0856fb8
Fixing editing cluster instructions. Ordering now works and GOOD - BA…
CalMurph Aug 27, 2026
777c782
chore: apply formatting
github-actions[bot] Aug 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 73 additions & 53 deletions frontend/app/components/ClusterSettings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ export default function ClusterSettingsPage() {
expectedTime,
bad,
good,
position
position: Number(position)
})
});

Expand Down Expand Up @@ -370,7 +370,7 @@ export default function ClusterSettingsPage() {
<div className="mt-6 space-y-3">
{!hasChecks ? (
<div className="flex flex-wrap justify-start gap-3">
<span className="rounded-full border border-blue-400/30 bg-blue-500/20 px-4 py-2 text-sm font-semibold text-blue-200">
<span className="rounded-full border border-blue-400/30 tracking-wider bg-blue-500/20 px-4 py-2 text-sm font-medium text-blue-300">
No checks have been performed for this cluster
</span>
</div>
Expand All @@ -395,13 +395,15 @@ export default function ClusterSettingsPage() {
)}

<div className="flex flex-wrap justify-start gap-3 pt-3">
<span className="rounded-full border border-white/10 bg-white/5 px-4 py-2 font-mono text-sm text-slate-300">
<span className="rounded-full border border-amber/10 bg-amber/5 px-4 py-2 font-mono text-sm text-amber-300/80">
id: {clusterId}
</span>

<span className="rounded-full border border-white/10 bg-white/5 px-4 py-2 font-mono text-sm text-slate-300">
pool: {cluster.pool.name}
</span>
{cluster.pool.name && (
<span className="rounded-full border border-sky/10 bg-sky/5 px-4 py-2 font-mono text-sm text-sky-300">
pool: {cluster.pool.name}
</span>
)}
</div>
</div>
</div>
Expand Down Expand Up @@ -558,14 +560,19 @@ export default function ClusterSettingsPage() {
<div className="min-w-0 flex-1">
{editingInstructionId === step.id ? (
<div className="space-y-3">
<label className="font-semibold text-slate-300 ml-1">
Title
</label>
<input
value={editedInstructionTitle}
onChange={(e) =>
setEditedInstructionTitle(e.target.value)
}
className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
/>

<label className="font-semibold text-slate-300 ml-1">
Instruction
</label>
<textarea
rows={4}
value={editedInstructionDescription}
Expand All @@ -574,7 +581,9 @@ export default function ClusterSettingsPage() {
}
className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
/>

<label className="font-semibold text-slate-300 ml-1">
Expected time
</label>
<input
value={editedInstructionExpectedTime}
onChange={(e) =>
Expand All @@ -583,7 +592,9 @@ export default function ClusterSettingsPage() {
placeholder="Expected time (e.g. 5 mins)"
className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
/>

<label className="font-semibold text-slate-300 ml-1">
Good outcome
</label>
<input
value={editedInstructionGood}
onChange={(e) =>
Expand All @@ -592,6 +603,9 @@ export default function ClusterSettingsPage() {
placeholder="Everything worked"
className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
/>
<label className="font-semibold text-slate-300 ml-1">
Bad outcome
</label>
<input
value={editedInstructionBad}
onChange={(e) =>
Expand All @@ -600,14 +614,16 @@ export default function ClusterSettingsPage() {
placeholder="Everything is on fire"
className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
/>

<label className="font-semibold text-slate-300 ml-1">
Position
</label>
<div className="relative">
<select
value={editedInstructionPosition}
onChange={(e) =>
setEditedInstructionPosition(e.target.value)
}
className="w-full appearance-none rounded-xl border border-slate-700 bg-slate-900 p-4 pr-12 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
className="w-full cursor-pointer appearance-none rounded-xl border border-slate-700 bg-slate-900 p-4 pr-12 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
>
{Array.from({ length: steps.length }, (_, i) => (
<option key={i + 1} value={i + 1}>
Expand Down Expand Up @@ -656,8 +672,10 @@ export default function ClusterSettingsPage() {
editedInstructionTitle.trim(),
editedInstructionDescription.trim(),
editedInstructionExpectedTime.trim(),
editedInstructionGood.trim(),
editedInstructionBad.trim(),

editedInstructionGood.trim(),

editedInstructionPosition
)
}
Expand Down Expand Up @@ -685,46 +703,48 @@ export default function ClusterSettingsPage() {
</div>

<p className="text-slate-300">{step.description}</p>
</>
)}
</div>

<div className="flex w-full flex-col gap-3 md:w-auto md:flex-row md:items-start">
<button
type="button"
onClick={() => {
setEditingInstructionId(step.id);
setEditedInstructionTitle(step.title || '');
setEditedInstructionDescription(
step.description || ''
);
setEditedInstructionExpectedTime(
step.expectedTime || ''
);
setEditedInstructionGood(step.good || '');
setEditedInstructionBad(step.bad || '');
setEditedInstructionPosition(step.position || 1);
}}
className="w-full cursor-pointer rounded-xl border border-blue-300/25 bg-blue-500/10 px-4 py-2 text-sm font-semibold text-blue-100 shadow-md shadow-black/20 transition duration-200 hover:-translate-y-0.5 hover:border-blue-300/45 hover:bg-blue-500/20 hover:text-white cursor-pointer md:w-auto"
>
Edit Instruction
</button>
<div className="flex w-full mt-3 justify-end flex-col gap-3 md:w-auto md:flex-row md:items-start">
<button
type="button"
onClick={() => {
setEditingInstructionId(step.id);
setEditedInstructionTitle(step.title || '');
setEditedInstructionDescription(
step.description || ''
);
setEditedInstructionExpectedTime(
step.expectedTime || ''
);
setEditedInstructionGood(step.good || '');
setEditedInstructionBad(step.bad || '');
setEditedInstructionPosition(
step.position || 1
);
}}
className="w-full cursor-pointer rounded-xl border border-blue-300/25 bg-blue-500/10 px-4 py-2 text-sm font-semibold text-blue-100 shadow-md shadow-black/20 transition duration-200 hover:-translate-y-0.5 hover:border-blue-300/45 hover:bg-blue-500/20 hover:text-white cursor-pointer md:w-auto"
>
Edit Instruction
</button>

<button
type="button"
onClick={() => {
const confirmed = window.confirm(
'Delete this instruction? This will remove all methods too.'
);

if (confirmed) {
deleteInstruction(step.id);
}
}}
className="w-full cursor-pointer rounded-xl border border-red-300/25 bg-red-500/10 px-4 py-2 text-sm font-semibold text-red-100 shadow-md shadow-black/20 transition duration-200 hover:-translate-y-0.5 hover:border-red-300/45 hover:bg-red-500/20 hover:text-white cursor-pointer md:w-auto"
>
Delete Instruction
</button>
<button
type="button"
onClick={() => {
const confirmed = window.confirm(
'Delete this instruction? This will remove all methods too.'
);

if (confirmed) {
deleteInstruction(step.id);
}
}}
className="w-full cursor-pointer rounded-xl border border-red-300/25 bg-red-500/10 px-4 py-2 text-sm font-semibold text-red-100 shadow-md shadow-black/20 transition duration-200 hover:-translate-y-0.5 hover:border-red-300/45 hover:bg-red-500/20 hover:text-white cursor-pointer md:w-auto"
>
Delete Instruction
</button>
</div>
</>
)}
</div>
</div>

Expand Down Expand Up @@ -788,12 +808,12 @@ export default function ClusterSettingsPage() {
</div>
</div>
) : (
<div className="flex gap-3">
<span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-500/20 text-xs font-semibold text-blue-300">
<div className="flex gap-3 items-center">
<span className=" flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-500/20 text-md p-2 font-semibold text-blue-300">
{methodIndex + 1}
</span>

<div className="prose prose-invert max-w-none text-sm leading-relaxed overflow-x-auto">
<div className="prose prose-invert max-w-none text-md leading-relaxed overflow-x-auto">
<ReactMarkdown>
{method.content}
</ReactMarkdown>
Expand Down
2 changes: 1 addition & 1 deletion frontend/app/components/Overview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export default function Overview() {
{/* Body */}
<div className="mb-6 overflow-hidden mt-6">
{!report.id ? (
<p className="flex items-center justify-center text-white">
<p className="flex items-center justify-center text-slate-400">
No overview available
</p>
) : (
Expand Down
2 changes: 1 addition & 1 deletion frontend/app/components/PersonalSchedule.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ export default function PersonalSchedule() {
Checks are not open yet. Please come back during the allocated time window.
</strong>
) : !canComplete ? (
<strong className="mt-2 block text-lg text-red-500">
<strong className="mt-2 block text-lg font-mono text-red-500">
You are outside of the allocated time window for checks. Speak to your
manager or system administrator.
</strong>
Expand Down
4 changes: 3 additions & 1 deletion frontend/app/components/PoolSettingsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,9 @@ export default function PoolClustersPage() {
Manage clusters assigned to this pool.
</p>

<p className="mt-2 text-sm text-amber-300">id: {pool.id}</p>
<p className="rounded-full w-fit mt-3 border border-amber/10 bg-amber/5 px-4 py-2 font-mono text-sm text-amber-300/80">
id: {pool.id}
</p>
</div>

{statusMessage && (
Expand Down
4 changes: 3 additions & 1 deletion frontend/app/components/TeamsSettingsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,9 @@ export default function TeamSettingsPage() {
Manage users and pools assigned to this team.
</p>

<p className="mt-2 text-sm text-amber-300">id: {team.id}</p>
<p className="rounded-full w-fit mt-3 border border-amber/10 bg-amber/5 px-4 py-2 font-mono text-sm text-amber-300/80">
id: {team.id}
</p>
</div>

{statusMessage && (
Expand Down
4 changes: 2 additions & 2 deletions frontend/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ body {
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(16px) scale(0.98);
transform: translateY(22px) scale(0.96);
filter: blur(6px);
}

Expand All @@ -42,7 +42,7 @@ body {
}

.animate-fade-up {
animation: fadeUp 1000ms ease-out both;
animation: fadeUp 1945ms ease-out both;
}

.results-datepicker {
Expand Down