Patryk Kopyciński
a1d02824f1
[shared-ux-router] Add Router and Routes components ( #159834 )
...
## Summary
Why?
To simplify the process of migration to react-router@6.
https://github.com/remix-run/react-router/discussions/8753
What problems exactly it solves?
- In my previous PR I added `CompatRouter`
https://github.com/elastic/kibana/pull/159173 , which caused changes in
~50 files and pinged 15 Teams. And this is just meant to be a temporary
change, so when we're done with the migration I would have to revert
these changes and engage everyone to review the PR again. And it is just
a single step in the migration strategy. So to make our lives easier I
think it would be better to have a common place where we do import our
router components because it will allow us to surface some extra logic
in single place instead of going through the whole source code again.
- `react-router@6` doesn't support a custom `Route` component, so that
means our custom `Route` component that we're using almost everywhere
today, will need to be replaced by a different solution. I have decided
to add `Routes` component, which will be responsible for rendering the
proper component (`react-router@6` renamed `Switch` to `Routes`, so I
have named this component to align with the dictionary of the new
router) and also is going to add the logic that today is done in `Route`
(moving logic to `Routes` will be done in the follow-up PR, here I just
wanted to focus on using the common router components to make the review
process easier)
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2023-06-23 10:02:06 -05:00
Patryk Kopyciński
09577fa0af
Add react-router-dom-v5-compat ( #159173 )
...
## Summary
Prep work for bumping react-router to v6
Following https://github.com/remix-run/react-router/discussions/8753
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2023-06-14 05:13:15 -07:00
Devon Thomson
5342563a22
[Dashboard] Fast Navigation Between Dashboards ( #157437 )
...
## Summary
Makes all navigation from one Dashboard to another feel snappier.
2023-05-25 14:40:48 -04:00
Devon Thomson
ffc349225e
[Analyst Experience Components] Dashboard & Control Group APIs ( #150121 )
...
Aligns the Portable Dashboard renderer and the Control Group renderer to a new API structure using `useImperativeHandle` rather than the overcomplicated and mostly unused wrapper provider system.
2023-04-19 15:34:39 -04:00
Devon Thomson
b689c27ce2
[Portable Dashboards] Export Dashboard Listing Table ( #154295 )
...
export the Dashboard Listing Page component lazily. This component is a wrapper around the TableListView and can be used as-is.
2023-04-17 16:22:06 -04:00
Hannah Mudge
8fec139c78
[Dashboard] [Controls] Make floating actions keyboard accessible ( #152155 )
...
Closes https://github.com/elastic/kibana/issues/135458
Unblocks https://github.com/elastic/kibana/issues/151233
## Summary
This PR adds the floating actions back into the regular HTML tree by
removing the `EuiPortal` that surrounded them, thus making them keyboard
accessible via some added CSS.
In order to do this, however, there were a few changes that had to be
made to the overall Dashboard HTML structure. Previously, as part of
[relocating the Dashboard
scrollbar](https://github.com/elastic/kibana/pull/145628 ), the
scrollable section of the app was moved to the Dashboard viewport, like
so:
https://user-images.githubusercontent.com/8698078/222511861-8707917c-9edc-4292-a182-58924bb00c8a.mov
<br>
While this had a lot of visual appeal, because of the structure of the
HTML tree, the floating actions had to be moved to an `EuiPortal` as
part of this change so that they would continue to float above the top
navigation bar rather than clipping behind it alongside the other
contents of the viewport - this made it impossible to add native
keyboard accessibility since they were removed from the natural HTML
structure.
Unfortunately, by removing the `EuiPortal` in order to allow for
keyboard accessibility, this meant that the scrollable section could
**no longer** be constrained to the viewport - this is because the
`z-index` of child of a given scrollable `div` is **always relative** to
its parent, which means that the floating actions would clip behind the
top nav bar regardless of how high you set their `z-index`:
<p align="center"><img
src="https://user-images.githubusercontent.com/8698078/222518354-80f1df75-69e5-4433-a256-d0b7dc57cd97.gif "/></p>
Therefore, in order to avoid this clipping, the scrollable section had
to remain at the top of the app, like so:
https://user-images.githubusercontent.com/8698078/222512203-60a88fc5-dd68-47ba-aeab-2425afc60a67.mov
<br>
In order to keep the benefit of the top query bar remaining in place,
the top nav bar was added to a **fixed position** `div` that floats
above the contents of the viewport as the user scrolls - this ensures
that the floating actions, which are now also positioned via a `fixed`
container, can still float above the nav bar while remaining part of the
natural order of the HTML tree.
As a follow up, we should also address
https://github.com/elastic/kibana/issues/152609 .
### Checklist
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html )
were updated or added to match the most common scenarios
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/ ))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/ ),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US ))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server ))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers )
### For maintainers
- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process )
2023-03-06 16:31:50 -07:00
Hannah Mudge
27dda79627
[Portable Dashboards] Add portable dashboard example plugin ( #148997 )
...
Closes https://github.com/elastic/kibana/issues/145427
## Summary
This PR adds an example plugin that demonstrates a few uses of the new
portable dashboards. It includes the following examples:
1. A by-value dashboard with controls
2. A by-value empty dashboard that allows panels (both by-value and
by-reference) to be added where the state can be saved to local storage
3. Two side-by-side by-value empty dashboards with independent redux
states
4. A static, by-reference dashboard
5. A static, by-value dashboard
As part of this, I created a new demo embeddable type - the
`FilterDebuggerEmbeddable` which, when added to a dashboard, will
display the filters + query that it is receiving as an input. You can
see how this embeddable works in the GIF for the first example above.
### Checklist
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers )
### For maintainers
- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process )
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2023-02-10 13:21:53 -07:00
