Skip to content

new: STORIF-310 - Bucket tab filters created.#13481

Open
dchyrva-akamai wants to merge 1 commit intolinode:developfrom
dchyrva-akamai:feature/STORIF-310
Open

new: STORIF-310 - Bucket tab filters created.#13481
dchyrva-akamai wants to merge 1 commit intolinode:developfrom
dchyrva-akamai:feature/STORIF-310

Conversation

@dchyrva-akamai
Copy link
Contributor

Description 📝

Bucket tab filters created.

Preview 📷

image

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

@dchyrva-akamai dchyrva-akamai marked this pull request as ready for review March 12, 2026 09:09
@dchyrva-akamai dchyrva-akamai requested review from a team as code owners March 12, 2026 09:09
@dchyrva-akamai dchyrva-akamai requested review from jdamore-linode and removed request for a team March 12, 2026 09:09
@linode-gh-bot
Copy link
Collaborator

Cloud Manager UI test results

🔺 1 failing test on test run #4 ↗︎

❌ Failing✅ Passing↪️ Skipped🕐 Duration
1 Failing882 Passing11 Skipped39m 38s

Details

Failing Tests
SpecTest
lke-create.spec.tsCloud 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/kubernetes/lke-create.spec.ts"

).then(() => {
cy.visitWithLogin('/object-storage/buckets');
cy.wait('@getBuckets');
cy.wait('@getRegions').then(({ response }) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might not work if region is fetched before buckets. To wait for both buckets and region disregarding the order, you could do:

cy.wait(['@getBuckets', @getRegions'].then(([, regionsResponse]) => {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Region multiselect should not be rendered until buckets finish loading. I understand that in the real application Regions might be fetched from some other place and stay in the cache, but I am not sure how it works in the test.

(region) => region.id === selectedBucket.cluster.region
);

const selectedRegionLabel = selectedRegion
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;


const bucketsDetails = new Array(2).fill({}).map(() => ({
label: randomLabel(),
cluster: chooseCluster(),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test seems to be non-deterministic. What if you select the same cluster twice? Or 2 clusters from the same region?

* - Confirms that when region is selected, endpoint multiselect.
* shows only endpoints related to the selected region.
*/
it('should filter list of endpoinds when region is selected', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo

).filter((option) => {
if (selectedRegions.length) {
return selectedRegions.some((region) =>
option.label.includes(region.value)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can't rely on region being part of the endpoint. Instead, you could filter the buckets by regions first, and then map them to endpoints. (This is a mandatory change)

const onChangeMock = vi.fn();

describe('RegionMultiselect', () => {
it('should show loading text while fetching endpoints', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should it be "regions" instead of "endpoints"?

import type { RegionMultiselectValue } from './RegionMultiselect';

const queryMocks = vi.hoisted(() => ({
useRegionsQuery: vi.fn().mockReturnValue([]),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't it be:

{
      data: [],
      isFetching: true,
    }

?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Value is mocked in each specific test case, this pattern is used across all the similar tests.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is just a placeholder mock, wouldn't it make more sense to return null or empty object?

expect(getByPlaceholderText('Loading Regions...')).toBeVisible();
});

it('should show proper placeholder after fetching regions', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

async don't really needed.

return regions.filter((region) => endpointRegions.has(region.id));
};

export const uniqueByKey = (arr: Array<any>, key: string) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As eslint suggests, try to avoid declaring "any" type, instead use generic types. Also, declare the returning type, for example:

export const uniqueByKey = <T extends Record<string, unknown>>(arr: T[], key: string): T[] => {

@github-project-automation github-project-automation bot moved this from Review to Changes Requested in Cloud Manager Mar 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Changes Requested

Development

Successfully merging this pull request may close these issues.

3 participants