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.

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

Add new /instance<instance-id>/editor view #3656

Closed
Tracked by #3646
joepavitt opened this issue Mar 28, 2024 · 0 comments · Fixed by #3709
Closed
Tracked by #3646

Add new /instance<instance-id>/editor view #3656

joepavitt opened this issue Mar 28, 2024 · 0 comments · Fixed by #3709
Assignees
Labels
area:frontend For any issues that require work in the frontend/UI size:M - 3 Sizing estimation point task A piece of work that isn't necessarily tied to a specific Epic or Story.
Milestone

Comments

@joepavitt
Copy link
Contributor

joepavitt commented Mar 28, 2024

As part of #3646, we need to create a new view that will host the "Immersive" experience.

Considerations:

  • Layouts: Every page on our application utilises the /src/layouts/Platform.vue layout component, which is defined at the very top App.vue level. This will be the first view we have that does not need the very top-level navigation header that this view provides. We already have a isModalPage check in App.vue, we could extend this to handle this particular page.
  • Editor Availability: We need to have a temprorary solution in place for when the Editor is not available. As an extensin of thr work, we will eventually implement Improved feedback of Node-RED editor status with integrates editor #3655, but for now we should offer a short-term solution.
  • Tabs: We pass :tabs="navigation" into the instance/index.vue, which utilises the full ff-page-header (SectionNavigationHeader.vue) component. For this new view, we only need the tabs part of that ff-page-header, which can be achieved with <ff-tabs v-if="tabs" :tabs="tabs" />.
  • Reusable Pages: Each child page of /instance should already be available in standalone components, and so these should be re-usable within the new /editor view.
  • Navigation/URL Structure: Something we need to settle on is how we're going to structure the new URLs here. Currently, each tab navigates to a completely new view, now each tab should modify new child <router-view> of the /editor page. I think it's a good first step to have /instance/<instance-id>/editor/snapshots or something along those lines, which would mimic the /instance/<instance-id>/snapshots view.

Acceptance Criteria:

image

  • User can navigate directly to the /editor URL to view this new experience
  • The bottom half view (with tabs) does not need to be resizable (that's covered in Optimize the Node-RED immersive editor experience #3657) - instead a single chevron on the right-side would enable a minimise/maximise approach
@joepavitt joepavitt added size:L - 5 Sizing estimation point size:M - 3 Sizing estimation point and removed size:L - 5 Sizing estimation point labels Mar 28, 2024
@joepavitt joepavitt added task A piece of work that isn't necessarily tied to a specific Epic or Story. area:frontend For any issues that require work in the frontend/UI labels Mar 28, 2024
@hardillb hardillb linked a pull request Apr 10, 2024 that will close this issue
11 tasks
@joepavitt joepavitt added this to the 2.4 milestone May 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:frontend For any issues that require work in the frontend/UI size:M - 3 Sizing estimation point task A piece of work that isn't necessarily tied to a specific Epic or Story.
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

2 participants