Evaluate the Effort for Implementing In-Page Edit Mode in Busola

[valentinvieriu]

Description

As part of EPIC #2621, we need to assess the effort required to transition the edit mode in Busola from an overlay window style to an in-page style. This evaluation will help in understanding the scope and complexity of the work involved and assist in breaking down the task into smaller, manageable user stories.

Acceptance Criteria

• [ ] Determine the technical feasibility of implementing the in-page edit mode.
• [ ] Estimate the effort and time required for the implementation.
• [ ] Identify potential challenges and solutions.
• [ ] Break down the task into smaller user stories.
• [ ] Ensure that the new design aligns with the layout provided in the Figma File.

Business Value

Implementing an in-page edit menu will enhance user experience by facilitating faster switching between view and edit modes, and providing a more integrated and seamless interface.

Reasons

• Improves user experience by enabling quicker and more intuitive navigation.
• Offers flexibility with form-based and YAML-based editors.
• Remembers user preferences for default views, improving personalized usability. The User can choose in the preference what the default view should be. He could choose to see the Edit Yaml view as the default view. and this will be remembered for future interactions
• Streamlines the creation and editing of resources within Busola.

Dependencies

This spike depends on the overall design and architecture decisions made in the related EPIC and other ongoing UI/UX improvements.

Non-functional Requirements

• The implementation should maintain or improve the current performance levels.
• The solution must be scalable and maintainable.
• Ensure that the new design is consistent with existing UI elements and themes.

Notes and Comments

• The focus is on understanding the effort rather than immediate implementation.
• Collaboration with the UI/UX team will be essential for aligning the implementation with the provided designs.

Size or Effort

This spike is expected to be a medium-sized effort, requiring thorough analysis and collaboration across multiple teams.

Mockups or Diagrams

Refer to the provided Figma File for design and layout reference.

Useful Links

• EPIC #2621 - Context and details of the overarching EPIC.
• Figma Design File - For design and layout reference.

Attachments

[akucharska]

POC: https://github.com/kyma-project/busola/pull/2688

Tasks to be done:

• [x] Tabs (small) - https://github.com/kyma-project/busola/pull/2688
• [x] adjust general layout (buttons in panel header / margins) - @akucharska https://github.com/kyma-project/busola/pull/2688
• [ ] Adjust Functions layout (Tabs) (medium)
• [ ] Add to preferences default yaml (small)
• [ ] Remove simple mode and migrate ModeSelector
• [ ] Adjust ResourceForm components (each one is small):
  • [x] CollapsibleSection - https://github.com/kyma-project/busola/pull/2688
  • [ ] FormField
  • [ ] Label
  • [ ] ModeSelector
  • [ ] Presets
  • [ ] SingleForm
  • [ ] Title
  • [ ] Wrapper
• [ ] Adjust ResourceForm fields (each one is small with exceptions):
  • [ ] RichEditorDataField
  • [ ] ComboboxArrayInput
  • [ ] DataField
  • [ ] Editor
  • [ ] ItemArray
  • [ ] K8sNameField
  • [ ] KeyValueField (tricky)
  • [ ] MultiInput (tricky)
  • [ ] RuntimeResources
  • [ ] SelectArrayInput
  • [ ] TextArrayInput
• [ ] Adjust Extensibility components
• [ ] Tests

[akucharska]

Basic logic:


• [x] Show create in column
• [x] Show edit in tab
• [x] move to details after create
• [x] add buttons in create and edit

Migrate the above in routes:

• [x] createResourceRoutes.js
• [x] ExtensibilityRoutes.js
• [x] BusolaExtensions.routes.js
• [x] CustomResourceDetails.routes.js
• [x] CustomResourceListOfType.routes
• [x] CRDetails.routes
• [x] helmReleasesList.routes!!!

Migrated resources:

• [x] ClusterRoleBindings
• [x] ClusterRoles
• [x] ConfigMaps
• [x] CronJobs
• [x] DaemonSets
• [x] Deployments
• [x] Ingresses
• [x] Jobs
• [x] Namespaces
• [x] NetworkPolicies
• [x] PersistentVolumeClaims
• [x] PersistentVolumes
• [x] Pods
• [x] ReplicaSets
• [x] RoleBindings
• [x] Roles
• [x] Secrets
• [x] ServiceAccounts
• [x] StatefulSet
• [x] StorageClasses

To migrate:

• [x] ClusterEvents // Nothing to change as there is no create
• [x] CustomResourceDefinitions
• [x] Events // Nothing to change as there is no create
• [x] HorizontalPodAutoscalers // HPA List is an extenshion. This one is used on details and has no create
• [x] Limit ranges // create button is hidden for now
• [x] Other?
• [x] ResourceQuotas // create button is hidden for now

Other:

• [ ] UI changes
• [ ] do something with tabs in extensibility (functions)
[ ] make sure it worka without feature COLUMN_LAYOUT (isColumnLeyoutEnabled)
• [x] code editor
• [x] get rid of simple/advanced. Only form/Yaml should be there
• [x] move protected resources info to header
• [ ] make dynamic page header visible all the time
• [ ] make buttons visible all the time (currently in panel header)
• [x] fix path if create is opened while details are shown
• [ ] all from the comment above

[akucharska]

• [ ] UI changes:

  • [x] Adjust layout to new design (@akucharska https://github.com/kyma-project/busola/pull/2819)
  • [x] Adjust breadcrumbs (remove breadcrumbs) (@chriskari https://github.com/kyma-project/busola/pull/2810)
  • [x] if user choose YAML view, then YAML view should stay across the rest of the resources (latest change) (@OliwiaGowor)
  • [x] make header and pannel header sticky (scroll only content) (next point is connected) (@akucharska)
  • [x] in details view, both in View and Edit there is unnecessary scroll, that scrolls top header (@akucharska)
  • [x] in some Create forms the bar with buttons is jumping up and down or it's overlaying the form (possibly it will be removed, but to not forget about it) - may be connected to previous two
  • [x] Adjust Functions layout (Tabs) - resource metadata and status should be on top of the page, tabs (extensibility tabs not view/edit) and their content. should be below (@chriskari https://github.com/kyma-project/busola/pull/2814)

• [x] protected. resources (@akucharska https://github.com/kyma-project/busola/pull/2806/)

• [x] in resources that don't have create form (for example Daemon Sets, Pods) there is no Form/YAML button displayed and only default YAML displayed in Edit. We should think how to handle that (@akucharska https://github.com/kyma-project/busola/pull/2806/) Current approach is: if there is only yaml don't show Form/YAML button. Also if an edit is disabled rename the Edit tab to the YAML tab

• [x] Fix bug with path in custom resources (@OliwiaGowor)

• [x] in Helm Releases view details are not being displayed (@akucharska https://github.com/kyma-project/busola/pull/2806/)

• [x] fix allowClone (@OliwiaGowor https://github.com/kyma-project/busola/pull/2820)

• [x] form/yaml is not centered properly (@chriskari https://github.com/kyma-project/busola/pull/2823)

• [x] Some translations in form are broken

• [x] Tests (@chriskari https://github.com/kyma-project/busola/pull/2823)

[mrCherry97]

Some more UX adjustments:

• [x] https://www.figma.com/file/AkzF9I1INdwc5iUtm5fKNU/Redesign-%26-Modules?type=design&node-id=10712-5275&mode=design&t=H00hglrEN2OpHORf-0 ( @OliwiaGowor )
• [x] Collapsible section for forms is not using UI5 components (example: SimpleList.js ) ( @chriskari https://github.com/kyma-project/busola/pull/2829)
• [x] Check the rest of the form components and adjust to use UI5 web components (@OliwiaGowor )