new: STORIF-310 - Bucket tab filters created.

[dchyrva-akamai]

Description 📝

Bucket tab filters created.

Preview 📷

How to test 🧪

• Run pnpm dev.
• Navigate to /object-storage/buckets page.
• Observe two new filters above the buckets table.

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

[skulpok-akamai]

The test should target a specific scenario - the region should either be defined, or not. In this case, I recommend to fail early in case region is undefined:

expect(selectedRegion, `expected region matching ${selectedBucket.cluster.region}`).to.exist;

[skulpok-akamai]

Since new we know that region exists, this line could be simplified to

const selectedRegionLabel = getNewRegionLabel(selectedRegion)

[dchyrva-akamai]

I am afraid it couldn't, find() method always return T | undefined, the region is 100% there, it is purely a typization issue.

[bnussman-akamai]

Could we just reuse the RegionMultiSelect that already exists in the codebase?

import { RegionMultiSelect } from 'src/components/RegionSelect/RegionMultiSelect';

Suggested change

	<RegionMultiselect
	filterFn={(option) =>
	buckets.some((bucket) => bucket.region === option.value)
	}
	onChange={setSelectedRegions}
	showLabel={true}
	sx={{ flex: 1 }}
	values={selectedRegions}
	/>
	<RegionMultiSelect
	currentCapability="Object Storage"
	fullWidth
	isGeckoLAEnabled={false}
	noMarginTop
	onChange={(values) =>
	setSelectedRegions(values.map((value) => ({ label: value, value })))
	}
	regions={availableStorageRegions.filter((r) =>
	buckets.some((b) => b.region === r.id)
	)}
	selectedIds={selectedRegions.map(r => r.value)}
	/>

[dchyrva-akamai]

Good idea, thank you for the comment.

[bnussman-akamai]

From my understanding, we always want a label even if we hide it. This allows us to keep the component accessable. The Autocomplete will handle hiding the label, no need to set it to an empty string

Suggested change

	label={showLabel ? 'Region' : ''}
	label="Region"

[dchyrva-akamai]

We don't need to display label on the Summary Page, I didn't find any other option to hide the label without modifying the Autocomplete component.

[linode-gh-bot]

Cloud Manager UI test results

🔺 7 failing tests on test run #20 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
7 Failing	884 Passing	11 Skipped	62m 38s

Details

Failing Tests
	Spec	Test
❌	alerts-create.spec.ts	Cloud Manager Cypress Tests→Create flow when beta alerts enabled by region and feature flag » create flow after switching to beta alerts
❌	alerts-create.spec.ts	Cloud Manager Cypress Tests→Create flow when beta alerts enabled by region and feature flag » can toggle from legacy to beta alerts and back to legacy
❌	object-storage.e2e.spec.ts	Cloud Manager Cypress Tests→object storage end-to-end tests » can filter the list of buckets by region
❌	object-storage.e2e.spec.ts	Cloud Manager Cypress Tests→object storage end-to-end tests » can filter the list of buckets by endpoint
❌	object-storage.e2e.spec.ts	Cloud Manager Cypress Tests→object storage end-to-end tests » should filter list of endpoints when region is selected
❌	search-images.spec.ts	Cloud Manager Cypress Tests→Search Images » creates two images and make sure they show up in the table and are searchable
❌	lke-create.spec.ts	Cloud Manager Cypress Tests→LKE Cluster Creation with LKE-E→shows the LKE-E flow with the feature flag on » creates an LKE-E cluster with the account capability

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/linodes/alerts-create.spec.ts,cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts,cypress/e2e/core/images/search-images.spec.ts,cypress/e2e/core/kubernetes/lke-create.spec.ts"