upcoming: [DI-27104] - Added GlobalFilter and WidgetFilter group by renderer components

[nikhagra-akamai]

Description 📝

Added GlobalFilter and WidgetFilter group by renderer components.

Changes 🔄

List any change(s) relevant to the reviewer.

1. Created a GlobalFilterGroupByRenderer component to render group by options on global filter
2. Created a WidgetFilterGroupByRenderer component to render group by options on widgets.

Scope 🚢

Upon production release, changes in this PR will be visible to:

• All customers
• Some customers (e.g. in Beta or Limited Availability)
• No customers / Not applicable

Target release date 🗓️

23rd September

Preview 📷

Note

This PR does not contains any visual changes. But added a component for new functionality that will be added in next PRs
This is the mockup for this feature: https://www.figma.com/design/2x7VRVdgrjegSJ5lFxoKMv/Standard-Dashboards?node-id=12858-53465&t=Hi2JXFU1Se2Vhlc4-0

How to test 🧪

1. Switch to mock user and go to metrics tab
2. Use below piece of code anywhere in GlobalFilters components to visualize the drawer

<GlobalFilterGroupByRenderer
     handleChange={(groupBy: string[])=>{}}
     selectedDashboard={selectedDashboard}
/>

3. Use below piece of code anywhere in the CloudPulseWidget components to visualize the drawer

 <WidgetFilterGroupByRenderer
          dashboardId={1}
          handleChange={(groupBy: string[])=>{}}
          label={widget.label}
          metric={widget.metric}
          serviceType={'linode'}
        />

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 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

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[venkymano-akamai]

LGTM, pending my comments

[mjac0bs]

Group by icons render the correct state when expected.

I left a couple points of minor feedback.

[mjac0bs]

Not part of this PR, but noting that this pre-existing drawer has spacing inconsistent with the mocks. Mocks suggest 24px, and current spacing is variable, but more than that. This is partially due to a Stack gap that looks like it should be 3, not 4. (32px above the description, 32px + 16px below it, due to the Dimensions label top margin) in the rendered drawer.

[nikhagra-akamai]

thanks for pointing out. I've updated stack gap

[linode-gh-bot]

Cloud Manager UI test results

🎉 809 passing tests on test run #8 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	809 Passing	9 Skipped	35m 58s