refactor(ui): add ModularTable

[petermakowski]

Done

• Replace custom Fabric and Space table implementations with a ModularTable
  • related PR adding changes to the ModularTable component in react-components: feat: customisation of specific headers, rows and cells in ModularTable react-components#723

QA

MAAS deployment

To run this branch you will need access to one of the following MAAS deployments:

• Karura
• Bolla
• A development MAAS
• A local snap MAAS (this will not usually have machines)

Running the branch

You can run this branch by:

• Serving with dotrun
• Building in a development MAAS

QA steps

• Go to MAAS/r/networks?by=fabric, MAAS/r/networks?by=space and make sure all rows are displayed exactly as before

Fixes

Fixes: # .

Launchpad issue

Related Launchpad maas issue in the form lp#number.

Backports

In general, please propose fixes against master rather than release branches (e.g. 2.7), unless the fix is only applicable for that specific release. Please apply backport labels to the PR (e.g. "Backport 2.7") for the appropriate releases to target.

Only bug and security fixes should be backported, new features should only land in master.

[huwshimi]

@petermakowski I know it's a bit awkward working with the external react-components dependency, but I wonder if it might be better to wait for the react-components PR to land and then do this work in a feature branch with a beta release of react-components?

Then when we're happy that all the changes to react-components are made we can release that and then merge the feature branch. What do you think?

Also, not sure if you've spotted this, but maas-ui has a way to link to react-components when developing:

https://github.com/canonical-web-and-design/maas-ui/blob/master/package.json#L32

Which you can use with the scripts in react-components:

https://github.com/canonical-web-and-design/react-components/blob/main/HACKING.md#using-with-another-project

One thing I've found in the past is that you have to run both projects with yarn ... or dotrun ... as using a mix doesn't link the projects correctly.

[petermakowski]

Thanks @huwshimi some very good points. Appreciate you took the time to write this up.

@petermakowski I know it's a bit awkward working with the external react-components dependency, but I wonder if it might be better to wait for the react-components PR to land and then do this work in a feature branch with a beta release of react-components?

I might've been more inclined to do this if it wasn't for the fact that the upgrade of react-components is blocked by vanilla 3.0 upgrade. This may not happen for a very long time (e.g. until we move over the final bits of Angular to React). Having feature branches sitting in the backlog has many downsides and I don't see any clear benefits of doing so.

Also, not sure if you've spotted this, but maas-ui has a way to link to react-components when developing:

https://github.com/canonical-web-and-design/maas-ui/blob/master/package.json#L32

Thanks! Yes I did know this, actually tested react-components a few times with other project's codebases to ensure it all works correctly when I was working on new react-components features.

[huwshimi]

I might've been more inclined to do this if it wasn't for the fact that the upgrade of react-components is blocked by vanilla 3.0 upgrade. This may not happen for a very long time (e.g. until we move over the final bits of Angular to React). Having feature branches sitting in the backlog has many downsides and I don't see any clear benefits of doing so.

Oh, well I've got a present for you! The v3 PR is in review (it's actually been there for a couple of weeks):

#3647

[huwshimi]

Waiting for:

• refactor(ui): upgrade to Vanilla 3 #3647
• fix: Spinner renders text twice react-components#730
• fix(deps): update internal dependencies #3655
• feat: customisation of specific headers, rows and cells in ModularTable react-components#723
• A new release of react-components.
• Upgrade react-components in maas-ui.

[petermakowski]

@huwshimi Opened another PR from a feature branch #3684