Skip to content
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

Jump to bottom

inspector views tabs #6118

Closed
davetsay opened this issue Jan 13, 2023 · 2 comments · Fixed by #6137
Closed

inspector views tabs #6118

davetsay opened this issue Jan 13, 2023 · 2 comments · Fixed by #6137
Labels
type:enhancement type:feature Feature. Required intentional design
Milestone
Target:2.2.0

Comments

@davetsay
Copy link
Contributor

davetsay commented Jan 13, 2023 •
edited
Loading

Summary
Inspector views are getting more complex and there are more of them. We need a better way to organize them.

Describe the solution you'd like
TABS!

Describe alternatives you've considered
Accordions

Testing Instructions

  1. put the inspector through its paces
    2. select different objects in the tree and see that the inspector displays context for the selection
    3. select different tabs and see that the inspector view changes appropriately
    4. go into and out of edit mode (both saving and exiting without saving)
    5. tabs should only be visible for intended selections and in correct state (edit mode, stylable, etc.)
  2. some more specific tests
    2. plots have different view / edit inspector views
    3. folders and non-persistables should not display a styles tab
  3. things to keep an eye out for
    2. wacky or super long tab names
    3. empty inspector views
@davetsay davetsay added this to the Target:2.1.6 milestone Jan 13, 2023
@davetsay davetsay self-assigned this Jan 13, 2023
This was referenced Jan 13, 2023
Closed
Merged
Open
@akhenry akhenry added the type:feature Feature. Required intentional design label Jan 20, 2023
charlesh88 added a commit that referenced this issue Jan 21, 2023
@charlesh88
Closes #6118
50d7844 
- Significant layout and behavior refinements to Inspector tabs.
- New theme constants for tabs.
- Tabs in Tab Views updated to use theme constants.
charlesh88 added a commit that referenced this issue Jan 21, 2023
@charlesh88
Closes #6118
c535b7b 
- Refinement to look of Inspector tabs.
- Shortened names in many *InspectorViewProvider.js files.
- WIP adding glyph capability, display not yet wired up.
charlesh88 added a commit that referenced this issue Jan 21, 2023
@charlesh88
Closes #6118
4eddeeb 
- Tightened H2 spacing in Inspector.
@akhenry akhenry modified the milestones: Target:2.1.6, Target:2.2.0 Feb 6, 2023
@davetsay davetsay mentioned this issue Feb 24, 2023
Open
7 tasks
@ozyx ozyx added the unverified label Mar 6, 2023
ozyx added a commit that referenced this issue Mar 6, 2023
@davetsay @ozyx
@charlesh88 @unlikelyzero @scottbell
feat: Inspector tabs (#6137)
1d4cf1f 
* framework for all inspector views being provided

* move elements view to plugin

* move location view into plugin

* move styles view into plugin

* move properties view into plugin

* install inspector views in index.html

* rename filters inspector view provider for tab

* finish elements view as plugin

* finish location view as plugin

* finish properties view as plugin

* finish styles view as plugin

* point main styles to new plugins

* finish inspector tab and views components

* fix paths for styles views

* fix path issues

* rename fault management inspector view

fix unit test

* fix paths for unit tests

* rename bar graph inspector view

fix unit test

* rename plots inspector view

fix unit test

* inspector views installed in mct.js

* sort inspector views by priority

* make name required for inspector tabs

* priority changes

* only show filters tab if filters exist

* object renamed to domainObject

* remove dead code

* select first tab if selected tab becomes hidden

* bandaid fix to get e2e working

* also apply bandaid to this test

* [a11y] Basic ARIA tab role for Inspector panels

* test(e2e): better selectors for scatterPlot test

* test(e2e): fix search test selector

* pass key and glyph to views

* use key for tabs identification

* high + 1 priority for object specific views

* Closes #6118
- Significant layout and behavior refinements to Inspector tabs.
- New theme constants for tabs.
- Tabs in Tab Views updated to use theme constants.

* Closes #6118
- Refinement to look of Inspector tabs.
- Shortened names in many *InspectorViewProvider.js files.
- WIP adding glyph capability, display not yet wired up.

* Closes #6118
- Tightened H2 spacing in Inspector.

* move annotations into plugin

* register annotations view provider

* move tags inside annotations

* fix paths

* move element item group into plugin

* move PlotElementsPool view into plugin

* plots has a different element view

* fix paths for plot elements pool

* fix: `role=` instead of `aria-role=` 🤦‍♂️

* test(e2e): fix tab locators

* move location views into properties tab view

* include location.scss

* move location into properties tab

* fix html for location within properties view

* retain selected tab on new selection

* refresh view of same tab with new selection

* add browse mode inspector view for alphanumerics

* fix prop passing

* removed vestigial code

* fix inspector tab selection

* remove timeouts and unnessecary awaits

* test: assert checkbox status before checking

* add selectInspectorTab to general app actions

* use selectInspectorTabs from appActions

* need to pass page to playwright function

* select the correct tab

* fix plan unit test

* fix plots tests by clicking on correct tab

---------

Co-authored-by: Jesse Mazzella <[email protected]>
Co-authored-by: Charles Hacskaylo <[email protected]>
Co-authored-by: John Hill <[email protected]>
Co-authored-by: Scott Bell <[email protected]>
@ozyx ozyx closed this as completed in #6137 Mar 6, 2023
@unlikelyzero unlikelyzero added needs:test instructions Missing testing notes and removed needs:test instructions Missing testing notes labels Mar 9, 2023
@rukmini-bose
Copy link
Contributor

rukmini-bose commented Mar 9, 2023 •
edited
Loading

Testathon Verified 3/9/23.

Everything seems like its working, but I am noticing that for Display Layouts, the more elements exist in the object, the longer the "Elements" tab takes quite some time to load. I have a Display Layout with simply 6 objects in it, and the elements tab took 3 seconds to load. I almost thought it was broken at first glance since it was lagging. I'm just thinking about how this may be problematic in the future when it is being used for way more advanced layouts.

@shefalijoshi
Copy link
Contributor

Verified. Looks really good!
Sometimes the tabs are too small to click on, but that's not something that can be helped.

@davetsay davetsay mentioned this issue Sep 8, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type:enhancement type:feature Feature. Required intentional design
Projects
None yet
Milestone
Target:2.2.0
Development

Successfully merging a pull request may close this issue.

Inspector tabs nasa/openmct
[Duplicate] Inspector tabs nasa/openmct
6 participants
@davetsay @akhenry @shefalijoshi @ozyx @unlikelyzero @rukmini-bose