BanGUI/Docs/Tasks.md

BanGUI — Task List

This document breaks the entire BanGUI project into development stages, ordered so that each stage builds on the previous one. Every task is described in prose with enough detail for a developer to begin work. References point to the relevant documentation.

---

Stage: Config Page Cleanup & Improvements

These tasks refine the Configuration page UI. Each task is self-contained and can be completed independently. References point to the specific files that need modification.

---

✅ Task 1 — Remove the Export tab from the Config page

Status: Done — Removed ExportTab import, "export" from TabValue, the <Tab> element, and the conditional render. DocumentArrowDown24Regular icon import also cleaned up.

Goal: Remove the "Export" tab entirely from the Configuration page. Users should no longer see the Export option in the tab bar, and its rendering logic should be cleaned up.

Files to modify:

• frontend/src/pages/ConfigPage.tsx

What to do:

1. Remove the "export" value from the TabValue union type.
2. Remove the <Tab value="export" icon={<DocumentArrowDown24Regular />}>Export</Tab> element from the <TabList>.
3. Remove the {tab === "export" && <ExportTab />} conditional render from the tab content area.
4. Remove the ExportTab import from the component imports.
5. Remove the DocumentArrowDown24Regular icon import if it is no longer used elsewhere.

Verification: The Config page should render without the Export tab. No TypeScript errors. All other tabs continue to work.

---

✅ Task 2 — Remove "Refresh" and "Reload fail2ban" buttons from the Jails tab

Status: Done — Removed buttonRow div with both buttons, the reloadMsg MessageBar, all associated state (reloading, reloadMsg, deactivating) and handlers (handleRefresh, handleReload). Cleaned up reloadAll from useJailConfigs() destructure and ArrowClockwise24Regular icon import.

Goal: Remove the two action buttons ("Refresh" and "Reload fail2ban") that appear at the top of the Jails tab.

Files to modify:

• frontend/src/components/config/JailsTab.tsx

What to do:

1. In the JailsTab component (the public export, starting around line 584), locate the <div className={styles.buttonRow}> block that renders the "Refresh" and "Reload fail2ban" buttons (around lines 722–740).
2. Remove the entire <div className={styles.buttonRow}>...</div> block containing both buttons.
3. Remove the reloadMsg <MessageBar> block that follows the button row (around lines 741–748), since it only displays messages from the reload action.
4. Clean up the now-unused state variables and handlers: reloading, reloadMsg, setReloading, setReloadMsg, handleRefresh, and handleReload.
5. Remove the reloadAll destructured value from the useJailConfigs() call if it is no longer used.
6. Remove the ArrowClockwise24Regular icon import if it is no longer used elsewhere in this file.
7. Keep refresh and loadInactive — they are still used by handleDeactivate and handleActivated.

Verification: The Jails tab no longer shows the two buttons or any reload message bar. Active and inactive jails still load and display correctly. Deactivate and activate flows still work.

---

✅ Task 3 — Add a "Create Config" button to the Jails tab

Status: Done — Created CreateJailDialog.tsx, wired listHeader prop into ConfigListDetail with an Add24Regular button, added createDialogOpen state. Dialog calls createJailConfigFile API and refreshes list on success. Exported from config/index.ts.

Goal: Add a button at the top of the Jails tab list pane that opens a dialog to create a new jail configuration file by name. This is analogous to the "Create Filter" button already present in the Filters tab.

Files to modify:

• frontend/src/components/config/JailsTab.tsx — add button + dialog trigger
• Optionally create a new frontend/src/components/config/CreateJailDialog.tsx dialog component

What to do:

1. Add a "Create Config" button at the top of the Jails tab. The recommended approach is to use the listHeader prop of <ConfigListDetail>, the same pattern used in FiltersTab.tsx (see lines 233–240). Pass a <Button appearance="outline" icon={<Add24Regular />} size="small">Create Config</Button> as the listHeader.
2. Create a CreateJailDialog component (or inline the logic). The dialog should:
   • Accept a name input from the user (the jail config file name, e.g. my-custom-jail).
   • On confirm, call the existing createJailConfigFile API function from frontend/src/api/config.ts with { name, content: "# <name>\n" } as the payload.
   • Show a loading state while the request is in flight.
   • Display any errors from the API.
   • On success, close the dialog and refresh the jail list (call refresh() and loadInactive()).
3. Wire the button's onClick to open the dialog, and handle the onCreated callback to refresh data.

Reference: See CreateFilterDialog.tsx for the established dialog pattern, and JailFilesTab.tsx lines 98–110 for the createJailConfigFile API usage.

Verification: Clicking "Create Config" opens a dialog. Entering a name and confirming creates a new jail config file. The new file appears in the jail list after creation.

---

✅ Task 4 — Remove the "Active" badge from the Filter and Action detail panes

Status: Done — Removed the <div> wrapper with Active/Inactive and "Has local override" badges from FilterDetail in FiltersTab.tsx and from ActionDetail in ActionsTab.tsx. Removed unused Badge import from both files.

Goal: Remove the <Badge> component that shows "Active" or "Inactive" in the detail (right) pane of both the Filters tab and the Actions tab. The badge in the list pane (left side, inside ConfigListDetail) should remain — only the one in the detail section needs to be removed.

Files to modify:

• frontend/src/components/config/FiltersTab.tsx
• frontend/src/components/config/ActionsTab.tsx

What to do in FiltersTab.tsx:

1. In the FilterDetail component (around lines 90–112), locate the <div style={{ display: "flex", flexDirection: "column", gap: 4 }}> block that wraps the Active/Inactive <Badge> and the optional "Has local override" <Badge>.
2. Remove this entire <div> block, including both badges inside it.
3. If the Badge import from @fluentui/react-components is no longer used in this file, remove it.

What to do in ActionsTab.tsx:

1. In the ActionDetail component (around lines 115–137), locate the same <div style={{ display: "flex", flexDirection: "column", gap: 4 }}> block with the Active/Inactive badge and the "Has local override" badge.
2. Remove this entire <div> block, including both badges.
3. Clean up unused Badge import if applicable.

Verification: Selecting a filter or action in the list still works. The detail pane no longer shows the Active/Inactive badge or the "Has local override" badge. The list pane badges are unaffected.

---

✅ Task 5 — Fix Jail log paths: remove path text spans, populate editable fields

Status: Done — Replaced the read-only <span> elements for existing log paths with editable <Input> fields, each with an onChange handler that updates the corresponding index in logPaths state. Delete button preserved.

Goal: In the active jail detail pane, the "Log Paths" field currently renders each existing log path as a read-only <span> text element with a delete button. The actual <Input> field below is always empty and is only used for adding new paths. The user wants to remove the read-only text spans and instead make each log path an editable field.

Files to modify:

• frontend/src/components/config/JailsTab.tsx

What to do:

1. In the JailConfigDetail component, locate the <Field label="Log Paths"> block (around lines 292–350).
2. Remove the read-only span list that renders existing log paths:

   {logPaths.length === 0 ? (
     <Text ...>(none)</Text>
   ) : (
     logPaths.map((p) => (
       <div key={p} className={styles.regexItem}>
         <span className={styles.codeFont} style={{ flexGrow: 1 }}>{p}</span>
         <Button ... title="Remove log path" ... />
       </div>
     ))
   )}
   

3. Replace it with editable <Input> fields for each existing log path. Each row should have:
   • An <Input> pre-filled with the path value (value={p}), editable.
   • An onChange handler that updates the corresponding entry in the logPaths state array.
   • The same delete button (reuse the existing handleDeleteLogPath callback).
4. Keep the "Add new log path" form at the bottom unchanged (the <Input> with placeholder, <Switch> for tail/head, and "Add" button).
5. Ensure the logPaths state is properly initialized from jail.log_paths (this is already the case at line 87).

Implementation hint: Map over logPaths with an index, render an <Input value={logPaths[i]}> for each, and on change update the array at that index. Example:

logPaths.map((p, i) => (
  <div key={i} className={styles.regexItem}>
    <Input
      className={styles.codeFont}
      style={{ flexGrow: 1 }}
      value={p}
      onChange={(_e, d) => {
        setLogPaths((prev) => prev.map((v, j) => (j === i ? d.value : v)));
      }}
    />
    <Button
      appearance="subtle"
      icon={<Dismiss24Regular />}
      size="small"
      disabled={deletingPath === p}
      title="Remove log path"
      onClick={() => void handleDeleteLogPath(p)}
    />
  </div>
))

Verification: When selecting an active jail that has log paths configured, the paths appear as editable input fields (not plain text). The input values can be modified. The delete button still works. The "Add" form at the bottom still works for adding new paths.