feat: [UIE-8009] - DBaaS enhancements Backups

[mpolotsk-akamai]

Description 📝

DBaaS 2.0 Backups

Changes 🔄

• Added a section titled “Summary” with additional subtitle text.
• Implemented a DatePicker and TimePicker.
• Added a dialog window for new restore.
• Added Database Logo

Target release date 🗓️

9/16/24

Preview 📷

Before	After

How to test 🧪

Note:
To test all beta features, beta must be enabled, and the user must have the "Managed Databases Beta" account capability.

Prerequisites

(How to setup test environment)

Enable DatabaseV2Beta flag

Verification steps

(How to verify changes)

1. Navigate to the Databases section.
2. Choose the Database Cluster.
3. Go to the Backups tab.
4. Select a date from the DatePicker.
5. Choose the time from the TimePicker.
6. Click the 'Restore' button.
7. A popup will appear with the Database Label and the chosen date and time.
8. Click the 'Restore' button in the popup dialog.
9. You will be redirected to the Summary tab.

As an Author I have considered 🤔

Check all that apply

• 👀 Doing a self review
• ❔ Our contribution guidelines
• 🤏 Splitting feature into small PRs
• ➕ Adding a changeset
• 🧪 Providing/Improving test coverage
• 🔐 Removing all sensitive information from the code and PR description
• 🚩 Using a feature flag to protect the release
• 👣 Providing comprehensive reproduction steps
• 📑 Providing or updating our documentation
• 🕛 Scheduling a pair reviewing session
• 📱 Providing mobile support
• ♿ Providing accessibility support

[github-actions]

Coverage Report: ✅
Base Coverage: 86.94%
Current Coverage: 86.94%

[mjac0bs]

@mpolotsk-akamai

This PR contains some changes that would have been best separated out into their own PRs (the creation of new components - which we typically abstract, style, unit test, and add to Storybook). If DBaaS is willing to use more basic components for date and/or time selection for now, the Cloud Manager team would then follow up with the core components in an M3 ticket to do the abstraction with calendar and time components.

As far as the actual functionality of the Backups tab for new DBs - the changes worked and I did not see any regressions for legacy DBs Backups.

I did leave some feedback throughout.

[mjac0bs]

This component has some styling issues, which are especially visible in dark mode. The double scroll bars, different colored options in dark mode, extra spacing before the OK button, and the transparency of the button itself are things we'd want to address. Building out our own TimePicker component is how we'd style this more consistently, rather than a direct import from MUI.

[abailly-akamai]

@gitkcosby Wanted to check in with you about this. We have planned to build a date picker but it isn't available yet. Here, @mpolotsk-akamai has imported the component straight from MUI which is problematic for a variety of reasons (functionality, styling, testing, reliability) and we'd like to ask for a grace period to build this right and make it available to the Cloud Manager ecosystem the right way.

I'd like to suggest using a <Texfield type="date"><Texfield type="date"> combo during this grace period and replace it once the has been built, which I estimate to be done one or two releases following the DBaaS 9/30 beta release (in short we'd live with the temp solution for a sprint or two).

Any thoughts?

[mpolotsk-akamai]

@abailly-akamai , I've updated the time picker, to match the one in Settings Tab, for consistency.

[abailly-akamai]

Thanks for the contribution @mpolotsk-akamai - great PR and attention to testing and coding conventions. I added a few comments to clean things up and let's see what we do with the picker before moving forward

[mjac0bs]

I'll give this a final approval once the date and time picker are swapped out and Alban's feedback is addressed, but thank you for making initial changes - this is looking good and clean overall!

As far as test failures:

• The unit test failure is legit and is a quick fix to include the space betweenTime and (UTC).
  

• I noticed a Cypress failure on the update-databases.spec.ts that I hadn't seen recently. But from running that test locally and watching it, it only seems to be touching the Settings page, and I don't see any interaction with the Backups tab changes made here. Seems like it may have been flake - worth keeping an eye on, though.

[mpolotsk-akamai]

@mjac0bs , @abailly-akamai thank you for the review.
I’ve updated the time picker and made all the necessary changes.

[mjac0bs]

I'm approving pending CI finishes and looks good.

Just so we're all on the same page (cc @abailly-akamai , @gitkcosby) - we're on board with keeping the MUI imported calendar at the moment, because this use case (specific day) does differ a little from the Settings tab, which is only selecting a week day?

[abailly-akamai]

@mpolotsk-akamai @mjac0bs @gitkcosby I believe we agreed on using a day select as well and removing this version of the calendar waiting for the real component. This is the request that was agreed upon. Pretty much

except it would be a date field on the left

[mpolotsk-akamai]

@abailly-akamai , based on our discussion with @gitkcosby , @corya-akamai we’ll proceed with the MUI Calendar and a standard drop down for selecting a time.

[mjac0bs]

except it would be a date field on the left

Right. @mpolotsk-akamai, @mpolotsk-akamai, @corya-akamai - I think @abailly-akamai's recommendation of <Texfield type="date"> is the way to go here, as it will get you the same data and avoid introducing the new calendar component just yet.

[abailly-akamai]

@mjac0bs I cleared it with @gitkcosby - we'll keep it for DBaaS and we'll do as quick a follow up as possible to replace this instance soon, hoping no more pop up. If we catch other instances in other PRs we can prevent spread.

I am reviewing the e2e failures now but this should be good to go otherwise

[mjac0bs]

Note that the update-database spec failure will be fixed by #10975.