Epic: UI Overhaul

[bryanculver]

Proposed Changes

Draw the rest of the 2.0 UI Owl. We now need to design and implement all of the research from #1566, #3026 (and somewhat #910)

TODO

Beta Give feedback

1. UI Overhaul: Sprint 50 Hackathon #3691
   15 of 19
   type: feature +1
   

   
2. Homepage Views for Schedule Job, Job Approval
3. Leverage more skeletons, loading widgets (render early, update often after mount)
4. Re-introduce plugin extensibility in views (plugin tabs, etc)

Project

Beta Give feedback

1. UI 2.0: Create Build Pipeline for Core (Generates UI on startup/post-upgrade) #3203
   3 of 3
   type: housekeeping +1
   
2. UI 2.0: Build Pipeline for Apps (inclusion into Core's build pipeline) in final Image #3237
   type: feature +1
   
3. UI 2.0: Update documentation for new install/deplyoment patterns with npm/node #3330
   1 of 5
   type: documentation +1
   
4. UI 2.0: Establish static files manifest storage pattern #3331
   type: feature +1

Development Environments & Testing

Beta Give feedback

1. UI 2.0: Core (& Example Plugin) Development Environment #3204
   6 of 6
   type: housekeeping +1
   
2. UI 2.0: Apps (and update Cookie Cutter) Development Environments #3238
   type: feature +1
3. UI 2.0: UI-specific Unit Tests of Components, Views (specific to the front-end) #3239
   type: feature +1
   
4. Integration Tests: Ensuring the UI and possibly API-"form" can be ensured working together
5. Integration Tests: Ensuring rending of legacy views are still testable
6. Migrating Existing: UI Views as they exist today
7. Migrating Existing: If we move all form-submissions go to the API do many of these go away/get refactored?
8. Migrating Existing: For UI views that stay around ensuring they still work and supported
9. UI 2.0: Copy asset-manifest.json using CopyWebpackPlugin instead of run_command

CI Pipelines

Beta Give feedback

1. Core: CI Pipelines (enforcing tests, making any packaging requirements for publishing PyPI, etc)
2. Apps (and update Cookie Cutter)
3. User Guides (outside of the getting started that exists today that should be updated as a part of the changes above)

Architecture

Beta Give feedback

1. UI 2.0: How should we serve the UI & API seamlessly? #3240
   type: feature +1
   
2. UI 2.0: Migration of legacy core-view extensions (and panel components) into new-UI "frames" #3241
   type: feature +1
3. Non-TemplateExtension context views need a defined migration strategy, possibly an entire replacement
4. Route definitions in the UI
5. Folder structure
6. Naming conventions
7. UI 2.0: Authentication (session, cookies, etc) to be able to hit both the API and UI #3242
   type: feature +1
   
8. UI 2.0: /api/ui/ Endpoint for Detail View Layout #3526
   type: feature +1
   
9. UI 2.0: /api/ui/ Endpoint for Model, Filterset Definition to Schema #3582
   type: feature +1
   
10. UI 2.0: Explore Serving Data from GraphQL instead of REST API #3648
    type: housekeeping +1
    

Components

Beta Give feedback

1. UI 2.0: Common Components Library, Think nautobot-ui as a Package #3205
   type: feature +1
   
2. Advanced components / designs patterns
3. Linked form fields aka "field dependencies" (region limiting site, etc)
4. Convert Prototype Code to Using nautobot-ui/Chakra #3373
   type: feature +1
   
5. Skinny index.js, create an App.jsx
6. Tree view UI component #2516
   type: feature +1
7. UI 2.0: Update Nav Menu for Context-Centered Navigation #3527
   type: feature +1
   
8. Parse Filter Schema Definitions to React Filter Panel Components #3583
   type: feature +1
   
9. Dynamic model choice via API in React

Basic Views

Beta Give feedback

1. UI 2.0: Refine Generic Retrieve View #3528
   type: feature +1
   
2. List
3. Create/Edit
4. Delete
5. Home
6. Bulk-Edit
7. Bulk-Delete
8. Login
9. Error
10. Notes
11. Change logging
12. UI Overhaul: Job Form Features (Definition and Generation) #2980
    0 of 2
    type: feature +1
13. UI 2.0: GenericView Base #3529
    type: feature +1
    

Extensibility

Beta Give feedback

1. UI 2.0: App Provided Non-Model View #3712
   type: feature +1
   
2. UI 2.0: App Provided Model View #3711
   type: feature +1
   

Advanced Views

Beta Give feedback

1. Cable Trace
2. Swagger
3. GraphiQL

Tasks

Beta Give feedback

We're having trouble rendering your tasklist, it's most likely has one of the following formatting errors:

• indented tasks (i.e. nested tasklist; support for this is coming!)
• an empty task (i.e. - [ ] on a line by itself)
• any empty new lines (before/after the tasklist or in between tasks)
• duplicate issue/pr links
• a draft task exceeds 512 characters

Please check the tasklists documentation for more information. 🔗 Feedback Discussion

Thank you for participating in the Private Beta ❤️

1. Add documentation around using `useDispactch`, `useEffect`, `useSelector`
2. Add documentation around state reducers

Potential candidates for react form component library

• https://github.com/vazco/uniforms
• https://github.com/react-hook-form/react-hook-form
• https://github.com/final-form/react-final-form
• https://github.com/redux-form/redux-form
• https://github.com/jaredpalmer/formik
• https://github.com/rjsf-team/react-jsonschema-form
• https://github.com/eclipsesource/jsonforms

Examples of UI schemas

• https://ui-schema.bemit.codes/

[gsnider2195]

Potential reverse proxy for local development environment

https://www.npmjs.com/package/express-http-proxy

[bryanculver]

Follow-up from #3691

• https://github.com/nautobot/nautobot/pull/3651/files#r1179652450
• https://github.com/nautobot/nautobot/pull/3651/files#diff-3efdb02ae49cfbad9f936680d08cd249b0df924462a8e4143a64dbfd2a6ea991R17
• https://github.com/nautobot/nautobot/pull/3651/files#r1182696165
• https://github.com/nautobot/nautobot/pull/3651/files#r1182695421
• https://github.com/nautobot/nautobot/pull/3651/files#r1182693065
• Review return <></>s: https://github.com/nautobot/nautobot/pull/3651/files#r1182670642
• https://github.com/nautobot/nautobot/pull/3651/files#r1182669913
• https://github.com/nautobot/nautobot/pull/3651/files#diff-c01e7ae1f8904441f26e96d62f13f94b8c326fdfb71bd9e905790d6f410f5b9bR27
• https://github.com/nautobot/nautobot/pull/3651/files#diff-9df470b17bd479c30cd4443ed0bf0ab7f07fae2fc38898c06fecba1d1b0c3b95R8
• Separate function: https://github.com/nautobot/nautobot/pull/3651/files#diff-3b98c6bf3b5474c33bade6236095b68d68344016a2cd773455cdd525a284e3aaR9-R30
• Decouple object list view components from object table component
• https://github.com/nautobot/nautobot/pull/3651/files#diff-458c7051c4e43d07a479d6bd045f1742a59b9d42f49b50acb49e8c5bde393cc7R6
• https://github.com/nautobot/nautobot/pull/3651/files#diff-c9c5c695263f7b51326bfc2a389e86c8002b7aef6f3e3afb8c18fb7f870f7088R7
• https://github.com/nautobot/nautobot/pull/3651/files#r1182659136
• https://github.com/nautobot/nautobot/pull/3651/files#r1179643231
• https://github.com/nautobot/nautobot/pull/3651/files#r1182655487
• https://github.com/nautobot/nautobot/pull/3651/files#r1185507076
• https://github.com/nautobot/nautobot/pull/3651/files#r1182648830
• https://github.com/nautobot/nautobot/pull/3651/files#r1187862426

[bryanculver]

• Need to have a focused discussion around the schema for describing table, detail views
• Deconstruct Epic: UI Overhaul #3142 (comment) into actionable items
• Login View
• Prod container doesn't build UI
• Schedule & approval tabs on homepage need design but don't have in Figma
  • 
• Tree view on table
• Icons updated from Figma design, replacing FontAwesome where we can
• [ ]