Redesign Kyma Modularization to Improve User Experience and Navigation

[valentinvieriu]

Description

As Sebastian and Matthew, we would like the Kyma Modularization feature to be redesigned based on the feedback we provided.

Acceptance Criteria

• [x] Follow Project DOD

• [x] Integrate a hero banner on the homepage.

• [x] Add a configuration navigation node at the cluster level.

• [x] Implement card-style design for module listings based on Figma prototype.

• [x] Create dedicated landing pages for each module with additional configurations.

• [x] Utilize a 3-step navigation system for module details.

• [x] Allow in-context editing in a different tab.

• [x] Match SAP's Horizon Visual Theme.

• [x] Use UI5 Web Components.

• [x] Make sure that no modules section looks like this:

• [x] https://github.com/kyma-project/busola/issues/3030

• [x] https://github.com/kyma-project/busola/issues/3031

• [x] https://github.com/kyma-project/busola/issues/3028

• [x] https://github.com/kyma-project/busola/issues/3022

• [x] https://github.com/kyma-project/busola/issues/2995

Useful Links

• SAP Horizon Theme Documentation
• UI5 Web Components
• Fima Prototype

Reasons

• Enhancing the user experience based on actual user feedback ensures that the platform evolves in alignment with user needs.
• The modular landing pages provide a more organized and intuitive way for users to interact with different modules.
• A card-style design will improve readability and navigation, making it easier to access crucial information.
• The updated design and navigation features are particularly beneficial for our personas, Sebastian and Matthew, who have high standards for operational support, modular architecture, and tool flexibility.

Attachments

[janmedrek]

As specified in this proposal we will be introducing a separation between lifecycle and business statuses for modules. It would mean that the user needs to be presented with double status for each module - one corresponding to the overall health of the module and the workload, and a second that would indicate the module-related logic state to the user.

Some examples:

• The module was deployed and configured correctly, and everything runs fine - Healthy/Available (naming TBD) + Ready
• The module was deployed but the module operator is processing some information - Healthy/Available + Processing
• The module was deployed but there is an error in the configuration - Healthy/Available + Error
• The module deployment failed - Error (+ no status?)

We would need a way to present that in a nice way to the users, also, we would need to think on how to aggregate the "business statuses" for the modules as Kyma CR will only aggregate the lifecycle ones.

[mrCherry97]

• [x] add modules should work and edit kyma resource
  • [x] checkboxes
  • [x] dropdowns
• [x] module details should be displayed in the column layout
• [ ] when the module doesn't have a details view, custom resources should be displayed( @akucharska @OliwiaGowor )
• [x] empty modules generic list should match figma file ( @mrCherry97 )
• [x] descriptions should be adjusted with TWS ( @mrCherry97 )
• [x] refreshing on details should work (take from params and add start column in route) ( @akucharska )
• [x] editing kyma resource (on details click edit tab) ( @mrCherry97 )
• [x] modules table should take data from spec.modules and status.modules ( @mrCherry97 )
• [x] addCutomNode only when Kyma is installed on cluster ( @OliwiaGowor )
• [x] resourceName should be taken dynamically (now it's hardcoded for default which is not working with local k3d with kyma alpha deploy) (partially it's done, KymaModuleAddModule needs to take it from somewhere)
• [x] force update should be by default (need to take this functionality from Modules.js related files)

[mrCherry97]

Cards view needs to be adjusted

[mrCherry97]

Cards view needs to be adjusted

[mrCherry97]

Adjust styles on full screen and small screen (check figma)

[mrCherry97]

Sort modal will be redesign as follow up: https://github.com/kyma-project/busola/issues/2958

[mrCherry97]

Need to release kyma-dashboard

[mrCherry97]

Need adjustment for community modules and maneged.