search

tektoncd / dashboard

A dashboard for Tekton!
Apache License 2.0
863 stars 258 forks source link

Update Carbon #3493

Open AlanGreene opened 5 days ago

AlanGreene commented 5 days ago

Update to Carbon 11.

Carbon 10 is being sunset and will no longer be supported as of 1st October 2024.

Announcements:

We have already done quite a bit of preparation for this, including simplification of the data / API layers which allowed us to reduce the number of custom page containers used in the app in https://github.com/tektoncd/dashboard/issues/2452 and related issues.

So far it looks like React 18 should not be required for this effort 🤞 If it is, see https://github.com/tektoncd/dashboard/issues/3492 for details.

Migration guide: https://carbondesignsystem.com/migrating/guide/overview/

Initially we'll migrate to the new versions keeping the design as close as possible to existing. This is to minimise the impact / overhead on tests, developer experience, and user experience during the migration process.

Some changes will be required, particularly around use of notifications and tooltips. Details in the migration guide.

Once the initial migration is complete we can consider adopting some of the new components and behaviours provided to enhance the experience.

AlanGreene commented 4 days ago

Results of first pass at updating the Dashboard to Carbon 11 (most styling is expected to be broken / missing for now):

This was just to get a baseline status and a better feel for the amount of work required to migrate fully.

~10% of unit tests (55/581) are failing in this state, affecting ~25% of the test suites (19/73).

About page: image

PipelineRuns: image

PipelineRun details: image

The next step is to go through the longer / more detailed manual migration guide at https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md to resolve the styling and functional issues.

There are a number of breaking changes to components such as notifications and tooltips that will need to be addressed, as well as changes to the structure of tabs, etc.

My hope is that the bulk of the issues will be resolved by changes to common components that are reused in multiple places.

Once the issues with the core app and components are resolved we'll also need to address any issues with the experimental / WIP components and utils such as the graph components.

AlanGreene commented 4 days ago

Looking a bit better after some minor changes to the theme-related styles and how the base Carbon component styles were being loaded.

About: image

PipelineRuns: image

PipelineRun details: image

There are still a number of layer / theme related issues that need to be resolved, but looks like we have a solid foundation to start from.

One issue that may take a little more experimentation (and was also present after the first pass above) is an apparent change in behaviour for the side nav. It now overlaps the content when open instead of influencing (pushing) the grid: image

AlanGreene commented 3 days ago

Getting closer, still some colour, typography, and spacing tokens to migrate but this should be the bulk of the big styling issues resolved.

About: image

PipelineRuns: image

Next, move onto the functional issues, starting with the tab components as they're not currently rendering the tab list. Once the main functionality is roughly working, we can focus on getting the tests passing again and deal with any remaining issues as we find them.

AlanGreene commented 13 hours ago

Starting to look a lot better now, tabs are rendered correctly and hooked up to the URL again. Most major styling issues resolved, working through remaining cleanup and functional fixes.

PipelineRuns: image

PipelineRun details: image

There are still some minor issues with the actions menu button and the log toolbar buttons but everything on this page appears to be functional at least 😸