new: STORIF-310 - Bucket tab filters created.

packages/manager/cypress/e2e/core/objectStorage/object-storage.e2e.spec.ts

@@ -3,6 +3,7 @@
  */
 
 import { createBucket } from '@linode/api-v4/lib/object-storage';
+import { getNewRegionLabel } from '@linode/utilities';
 import { authenticate } from 'support/api/authentication';
 import {
   interceptGetNetworkUtilization,
@@ -16,6 +17,7 @@
   interceptGetBuckets,
   interceptUpdateBucketAccess,
 } from 'support/intercepts/object-storage';
+import { interceptGetRegions } from 'support/intercepts/regions';
 import { ui } from 'support/ui';
 import { cleanUp } from 'support/util/cleanup';
 import { chooseCluster } from 'support/util/clusters';
@@ -27,6 +29,8 @@
   createObjectStorageBucketFactoryLegacy,
 } from 'src/factories';
 
+import type { Region } from '@linode/api-v4/lib/object-storage';
+
 /**
  * Create a bucket with the given label and cluster.
  *
@@ -41,23 +45,29 @@
  */
 const setUpBucket = (
   label: string,
-  cluster: string,
+  region: string,
   cors_enabled: boolean = true
 ) => {
   return createBucket(
     createObjectStorageBucketFactoryLegacy.build({
-      cluster,
+      region,
       cors_enabled,
       label,
 
       // API accepts either `cluster` or `region`, but not both. Our factory
-      // populates both fields, so we have to manually set `region` to `undefined`
+      // populates both fields, so we have to manually set `cluster` to `undefined`
       // to avoid 400 responses from the API.
-      region: undefined,
+      cluster: undefined,
     })
   );
 };
 
+const setupBuckets = (bucketsDetails: { label: string; region: string }[]) => {
+  return Promise.all(
+    bucketsDetails.map(({ label, region }) => setUpBucket(label, region))
+  );
+};
+
 authenticate();
 beforeEach(() => {
   cy.tag('method:e2e');
@@ -158,17 +168,15 @@
   it('can update bucket access', () => {
     const bucketLabel = randomLabel();
     const bucketClusterObj = chooseCluster();
-    const bucketCluster = bucketClusterObj.id;
-    const bucketAccessPage = `/object-storage/buckets/${bucketCluster}/${bucketLabel}/access`;
+    const bucketRegion = bucketClusterObj.region;
+    const bucketAccessPage = `/object-storage/buckets/${bucketRegion}/${bucketLabel}/access`;
 
     cy.defer(
-      () => setUpBucket(bucketLabel, bucketCluster),
+      () => setUpBucket(bucketLabel, bucketRegion),
       'creating Object Storage bucket'
     ).then(() => {
-      interceptGetBucketAccess(bucketLabel, bucketCluster).as(
-        'getBucketAccess'
-      );
-      interceptUpdateBucketAccess(bucketLabel, bucketCluster).as(
+      interceptGetBucketAccess(bucketLabel, bucketRegion).as('getBucketAccess');
+      interceptUpdateBucketAccess(bucketLabel, bucketRegion).as(
         'updateBucketAccess'
       );
 
@@ -198,4 +206,155 @@
       cy.findByText('Bucket access updated successfully.');
     });
   });
+
+  /*
+   * - Confirms that user can filter bucket list by region.
+   */
+  it('can filter the list of buckets by region', () => {
+    interceptGetBuckets().as('getBuckets');
+    interceptGetRegions().as('getRegions');
+
+    const bucketsDetails = new Array(2).fill({}).map((_, index) => ({
+      label: randomLabel(),
+      region: index === 0 ? 'us-ord' : 'us-lax',
+    }));
+
+    cy.defer(
+      () => setupBuckets(bucketsDetails),
+      'creating Object Storage bucket'
+    ).then(() => {
+      cy.visitWithLogin('/object-storage/buckets');
+      cy.wait(['@getBuckets', '@getRegions']).then(([_, { response }]) => {
+        const regions: Region[] = response?.body.data;
+
+        const selectedBucket = bucketsDetails[0];
+        const selectedRegion = regions.find(
+          (region) => region.id === selectedBucket.region
+        );
+
+        expect(
+          selectedRegion,
+          `expected region matching ${selectedBucket.region}`
+        ).to.exist;
+
+        const selectedRegionLabel = selectedRegion
+          ? getNewRegionLabel(selectedRegion)
+          : '';
+
+        const regionSelect = ui.autocomplete
+          .findByLabel('Region')
+          .should('be.visible')
+          .type(selectedRegionLabel);
+
+        ui.autocompletePopper
+          .findByTitle(selectedRegionLabel, { exact: false })
+          .should('be.visible')
+          .click();
+
+        regionSelect.click();
+
+        cy.get('tbody').within(() => {
+          cy.get('tr')
+            .should('have.length', 1)
+            .within(() => {
+              cy.findByText(selectedBucket.label).should('be.visible');
+            });
+        });
+      });
+    });
+  });
+
+  /*
+   * - Confirms that user can filter bucket list by endpoint.
+   */
+  it('can filter the list of buckets by endpoint', () => {
+    interceptGetBuckets().as('getBuckets');
+    interceptGetRegions().as('getRegions');
+
+    const bucketsDetails = new Array(2).fill({}).map((_, index) => ({
+      label: randomLabel(),
+      region: index === 0 ? 'us-ord' : 'us-lax',
+    }));
+
+    cy.defer(
+      () => setupBuckets(bucketsDetails),
+      'creating Object Storage bucket'
+    ).then(() => {
+      cy.visitWithLogin('/object-storage/buckets');
+      cy.wait(['@getBuckets', '@getRegions']);
+
+      const selectedBucket = bucketsDetails[0];
+      const selectedBucketRegion = selectedBucket.region;
+
+      const endpointSelect = ui.autocomplete.findByLabel('Endpoint');
+      endpointSelect.should('be.visible').type(selectedBucketRegion);
+      ui.autocompletePopper
+        .findByTitle(selectedBucketRegion, { exact: false })
+        .should('be.visible')
+        .click();
+      endpointSelect.click();
+
+      cy.get('tbody').within(() => {
+        cy.get('tr')
+          .should('have.length', 1)
+          .within(() => {
+            cy.findByText(selectedBucket.label).should('be.visible');
+          });
+      });
+    });
+  });
+
+  /*
+   * - Confirms that when region is selected, endpoint multiselect.
+   * shows only endpoints related to the selected region.
+   */
+  it('should filter list of endpoints when region is selected', () => {
+    interceptGetBuckets().as('getBuckets');
+    interceptGetRegions().as('getRegions');
+
+    const bucketsDetails = new Array(2).fill({}).map((_, index) => ({
+      label: randomLabel(),
+      region: index === 0 ? 'us-ord' : 'us-lax',
+    }));
+
+    cy.defer(
+      () => setupBuckets(bucketsDetails),
+      'creating Object Storage bucket'
+    ).then(() => {
+      cy.visitWithLogin('/object-storage/buckets');
+      cy.wait(['@getBuckets', '@getRegions']).then(([_, { response }]) => {
+        const regions: Region[] = response?.body.data;
+
+        const selectedBucket = bucketsDetails[0];
+        const selectedRegion = regions.find(
+          (region) => region.id === selectedBucket.region
+        );
+
+        expect(
+          selectedRegion,
+          `expected region matching ${selectedBucket.region}`
+        ).to.exist;
+
+        const selectedRegionLabel = selectedRegion
+          ? getNewRegionLabel(selectedRegion)
+          : '';
+
+        const regionSelect = ui.autocomplete
+          .findByLabel('Region')
+          .should('be.visible')
+          .type(selectedRegionLabel);
+        ui.autocompletePopper
+          .findByTitle(selectedRegionLabel, { exact: false })
+          .should('be.visible')
+          .click();
+        regionSelect.click();
+
+        ui.autocomplete.findByLabel('Endpoint').should('be.visible').click();
+
+        ui.autocompletePopper
+          .findByTitle(new RegExp('^.*-.*-.*\..*.'))
+          .should('have.length', 1);
+      });
+    });
+  });
 });

packages/manager/cypress/support/intercepts/object-storage.ts

@@ -197,7 +197,7 @@ export const interceptDeleteBucket = (
       apiMatcher(`object-storage/buckets/${cluster}/*`)
     );
   }
-  return cy.intercept('DELETE', apiMatcher('object-storage/buckets/*'));
+  return cy.intercept('DELETE', apiMatcher('object-storage/buckets/**/*'));
 };
 
 /**

packages/manager/cypress/support/intercepts/regions.ts

@@ -14,6 +14,15 @@ import { makeResponse } from 'support/util/response';
 import type { Region, RegionAvailability } from '@linode/api-v4';
 import type { ExtendedRegion } from 'support/util/regions';
 
+/**
+ * Intercepts GET regions request.
+ *
+ * @returns Cypress chainable.
+ */
+export const interceptGetRegions = (): Cypress.Chainable<null> => {
+  return cy.intercept('GET', apiMatcher('regions*'));
+};
+
 /**
  * Intercepts GET request to fetch Linode regions and mocks response.
  *