Fix/frontend errors

[mateodurante]

This pull request introduces several improvements to the frontend, focusing on enhanced search functionality, better error handling, improved backend health monitoring, and UI/UX refinements. Key changes include a redesigned and more accessible search component with a clear button, a new shared list view header, robust backend health checks with browser coordination, and improved localization and error handling throughout the app.

UI/UX Improvements:

• Added a new ListViewHeader component to unify and simplify the header area for list views, integrating search, filter, and action buttons. Updated analyzer and analyzer mapping list views to use this header. [1] [2] [3] [4] [5]
• Redesigned the Search component to include a clear button, improved focus/blur handling, and better accessibility. Added supporting styles in _custom.scss and new translation keys for the clear button in English and Spanish. [1] [2] [3] [4] [5]

Backend Health Monitoring:

• Implemented a new useBackendHealth hook and supporting service to efficiently monitor backend health across browser tabs, using BroadcastChannel and the Web Locks API for leader election and status sharing. Added new translation keys for connection status. [1] [2] [3] [4] [5]

Localization and Error Handling:

• Improved error handling during app initialization and language loading, ensuring the app falls back gracefully if backend or language settings fail. [1] [2]
• Added new translation keys for SSO login and login UI in both English and Spanish. [1] [2]

Other Notable Changes:

• Updated the logout functionality to use the API service method directly, improving consistency and reliability. [1] [2]
• Minor logic improvements to the filter toolbar to avoid rendering unused components.

These changes collectively enhance the user experience, improve reliability, and lay groundwork for further frontend improvements.

[Copilot]

Pull request overview

This PR improves frontend search, list layouts, authentication reliability, localization, and backend health monitoring.

Changes:

• Adds a public health endpoint with cross-tab frontend monitoring.
• Introduces shared list headers with search, filters, refresh, and clear actions.
• Improves login, logout, initialization fallback, styling, and translations.

Reviewed changes

Copilot reviewed 47 out of 47 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Changes	Final review comments
project/urls.py	Registers the health endpoint.	No final comments.
ngen/views/tools.py	Implements the health response.	No final comments.
ngen/tests/api/test_health.py	Tests health endpoint access.	No final comments.
frontend/src/views/user/ListUser.jsx	Uses the shared list header.	No final comments.
frontend/src/views/user/EditUser.jsx	Standardizes the layout.	No final comments.
frontend/src/views/user/CreateUser.jsx	Standardizes the layout.	No final comments.
frontend/src/views/tools/lookup/ShowLookup.jsx	Standardizes the layout.	No final comments.
frontend/src/views/tlp/ListTLP.jsx	Uses the shared list header.	No final comments.
frontend/src/views/template/ListTemplate.jsx	Adds shared filters and refresh.	No final comments.
frontend/src/views/taxonomyGroup/ListTaxonomyGroups.jsx	Uses the shared list header.	No final comments.
frontend/src/views/taxonomy/ListTaxonomies.jsx	Adds shared filters and refresh.	No final comments.
frontend/src/views/tag/ListTag.jsx	Uses the shared list header.	No final comments.
frontend/src/views/state/ListState.jsx	Uses the shared list header.	No final comments.
frontend/src/views/state/EditState.jsx	Standardizes the layout.	No final comments.
frontend/src/views/state/CreateState.jsx	Standardizes the layout.	No final comments.
frontend/src/views/setting/EditSetting.jsx	Standardizes the layout.	No final comments.
frontend/src/views/report/ListReport.jsx	Uses the shared list header.	No final comments.
frontend/src/views/report/EditReport.jsx	Standardizes the layout.	No final comments.
frontend/src/views/priority/ListPriority.jsx	Uses the shared list header.	No final comments.
frontend/src/views/playbook/ListPlaybook.jsx	Uses the shared list header.	No final comments.
frontend/src/views/network/ListNetwork.jsx	Adds shared filters and refresh.	No final comments.
frontend/src/views/groups/ListGroup.jsx	Uses the shared list header.	No final comments.
frontend/src/views/feeds/ListFeed.jsx	Uses the shared list header.	No final comments.
frontend/src/views/event/ListEvent.jsx	Adds shared filters and refresh.	No final comments.
frontend/src/views/event/ExportEventsForm.jsx	Standardizes the layout.	No final comments.
frontend/src/views/event/CreateEvent.jsx	Standardizes the layout.	No final comments.
frontend/src/views/entity/ListEntity.jsx	Uses the shared list header.	No final comments.
frontend/src/views/contact/ListContact.jsx	Uses the shared list header.	No final comments.
frontend/src/views/case/ListCase.jsx	Adds shared filters and refresh.	No final comments.
frontend/src/views/case/CreateCase.jsx	Standardizes the layout.	No final comments.
frontend/src/views/auth/signin/SignIn1.jsx	Integrates backend health and translations.	No final comments.
frontend/src/views/auth/signin/RestLogin.jsx	Improves validation and connection handling.	No final comments.
frontend/src/views/audits/ListAudit.jsx	Uses the shared header and filters.	Moderate (2 votes): Refresh on the default page does not issue another request.
frontend/src/views/analyzerMapping/ListAnalyzerMappings.jsx	Uses the shared list header.	No final comments.
frontend/src/views/analyzer/ListAnalyzers.jsx	Uses the shared list header.	No final comments.
frontend/src/layouts/AdminLayout/NavBar/NavRight/index.jsx	Uses API logout.	No final comments.
frontend/src/index.jsx	Adds initialization error handling.	No final comments.
frontend/src/i18n.js	Adds language fallback handling.	No final comments.
frontend/src/hooks/useBackendHealth.jsx	Monitors backend availability.	Critical (2 votes): The API base URL requires normalization before appending the health endpoint.
frontend/src/config/constant.jsx	Adds the health URL.	No final comments.
frontend/src/components/Search/Search.jsx	Adds clear and blur behavior.	Moderate (2 votes): Blur on an empty field triggers an unnecessary search request.
frontend/src/components/ListViewHeader/ListViewHeader.jsx	Adds the shared list header.	No final comments.
frontend/src/components/Button/FilterToolbar.jsx	Makes filter controls conditional.	No final comments.
frontend/src/assets/scss/partials/_custom.scss	Styles search and login controls.	Moderate (3 votes): Restore a visible keyboard focus indicator; scope the .mb-3 override to avoid changing application-wide spacing.
frontend/src/api/services/backendHealth.js	Coordinates health status across tabs.	No final comments.
frontend/public/locales/es/translation.json	Adds Spanish translations.	No final comments.
frontend/public/locales/en/translation.json	Adds English translations.	No final comments.

Suppressed comments (6)

frontend/src/components/Search/Search.jsx:64

• When focus moves to the clear or submit button via keyboard, no pointer-down handler runs before blur, so this applies the unsubmitted query and can start a request before the button action starts the next one. Those requests can complete out of order and leave the list showing stale filtered results; an untouched input can also submit search=&. Skip blur when relatedTarget is one of the form buttons and only apply a non-empty or previously applied search.

  const handleInputBlur = () => {
    if (skipBlurApplyRef.current) {
      skipBlurApplyRef.current = false;
      return;
    }
    action();

frontend/src/hooks/useBackendHealth.jsx:17

• initializeApp now continues after loadEnv fails, so API_SERVER can be absent. The API client already falls back to http://localhost:3003/api/, but this health query throws instead, leaving connected false and permanently disabling REST login even though the API client has a usable fallback. Reuse the same fallback or avoid disabling login until configuration is available.

  const apiServer = localStorage.getItem("API_SERVER");
  if (!apiServer) {
    throw new Error("API_SERVER is not set");
  }
  const res = await fetch(apiServer + COMPONENT_URL.health, { cache: "no-store" });

frontend/src/views/audits/ListAudit.jsx:86

• The shared “Clear filters” action is wired to a callback that resets the structured audit filters but never clears wordToSearch. Consequently, a search entered in the header survives clicking Clear filters, unlike the other list views. Include setWordToSearch("") in this handler (or update clearFilters).

                onClearFilters={clearFilters}

frontend/src/views/auth/signin/RestLogin.jsx:48

• The feedback below is shown when submitCount > 0, but this input's invalid class and aria-invalid state still depend only on touched.username. Submitting an empty form therefore displays an error without invalid styling or semantic invalid state; include the submit condition in both expressions.

                className={"form-control" + (touched.username && errors.username ? " is-invalid" : "")}
                aria-invalid={!!(touched.username && errors.username)}

frontend/src/views/auth/signin/RestLogin.jsx:64

• The password feedback below is shown when submitCount > 0, but this input's invalid class and aria-invalid state still depend only on touched.password. Submitting an empty form therefore displays an error without invalid styling or semantic invalid state; include the submit condition in both expressions.

                className={"form-control" + (touched.password && errors.password ? " is-invalid" : "")}
                aria-invalid={!!(touched.password && errors.password)}

frontend/src/views/auth/signin/SignIn1.jsx:116

• The health gate is applied to the REST login button, but this SSO button still remains clickable when connected is false. handleSsoLogin navigates to the same API_SERVER, so during the outage detected by the hook this action sends the user to an unreachable endpoint instead of preventing the failed login attempt. Apply the same health gate to the SSO action.

                    {t("login.sso")}

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.