elastic/kibana

Edit role page allows you to exit before changes are saved

Open

#106,576 opened on Jul 22, 2021

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (19,065 stars) (8,021 forks)batch import
Team:Securityenhancementgood first issue

Description

Related: #42503

Kibana version: 7.14.0 and earlier

Describe the bug:

Creating (or editing) a role takes several steps:

  • Add ES privileges
  • Add Kibana privileges
  • Click the "Save role" (or "Create role") button

This is particularly easy to overlook when you are adding a Kibana privilege, because there is a filled in "Add Kibana privilege" (or "Update space privilege") button

Steps to reproduce:

  1. Navigate to Stack Management > Roles
  2. Create or edit a role
  3. Change the role and navigate to a different page
  4. Observe that Kibana lets you leave without saving the role

Expected behavior:

  1. The "Add Kibana privilege" (or "Update space privilege") button on the Kibana privileges flyout should be renamed and/or made less prominent (changed to an outline button?); it's too easy to mistake that that actually updates the role when it doesn't. Also, these names should be more similar (perhaps they can both just be "Continue"?)
  2. If changes are detected but not saved, we should probably catch the user before they navigate away from the page. Note that we should make sure session timeout is not negatively impacted.

Screenshots (if relevant):

image

image

Contributor guide

Tech stack
typescriptreact
Domain
frontendsecurity
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Kibana basicsTypeScriptReactUI navigation patterns
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Start by exploring the Kibana role management UI, likely in the `x pack/plugins/security` directory. Look for components related to the role editor and the Kibana privileges flyout (files such as `edit role page.tsx` or `kibana privileges flyout.tsx`). The fix involves two parts: first, modify the button label and styling to differentiate it from the save action; second, add a navigation guard using `beforeunload` or React Router's `Prompt` to warn users about unsaved changes. Check existing tests in the same directory for guidance on testing the changes. The issue #42503 may have additional context.