new: STORIF-310 - Bucket tab filters created.

Author: dchyrva-akamai

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

@@ -2,7 +2,12 @@
  * @file End-to-end tests for Object Storage operations.
  */
 
-import { createBucket } from '@linode/api-v4/lib/object-storage';
+import {
+  createBucket,
+  ObjectStorageCluster,
+  Region,
+} from '@linode/api-v4/lib/object-storage';
+import { getNewRegionLabel } from '@linode/utilities';
 import { authenticate } from 'support/api/authentication';
 import {
   interceptGetNetworkUtilization,
@@ -16,6 +21,7 @@ import {
   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';
@@ -58,6 +64,14 @@ const setUpBucket = (
   );
 };
 
+const setupBuckets = (
+  bucketsDetails: { cluster: ObjectStorageCluster; label: string }[]
+) => {
+  return Promise.all(
+    bucketsDetails.map(({ label, cluster }) => setUpBucket(label, cluster.id))
+  );
+};
+
 authenticate();
 beforeEach(() => {
   cy.tag('method:e2e');
@@ -78,12 +92,11 @@ describe('object storage end-to-end tests', () => {
     cy.tag('purpose:syntheticTesting');
     const bucketLabel = randomLabel();
     const bucketClusterObj = chooseCluster();
-    const bucketCluster = bucketClusterObj.id;
     const bucketRegion = getRegionById(bucketClusterObj.region).label;
     const bucketHostname = `${bucketLabel}.${bucketClusterObj.domain}`;
     interceptGetBuckets().as('getBuckets');
     interceptCreateBucket().as('createBucket');
-    interceptDeleteBucket(bucketLabel, bucketCluster).as('deleteBucket');
+    interceptDeleteBucket().as('deleteBucket');
     interceptGetNetworkUtilization().as('getNetworkUtilization');
 
     mockGetAccount(accountFactory.build({ capabilities: ['Object Storage'] }));
@@ -197,4 +210,146 @@ describe('object storage end-to-end tests', () => {
       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(() => ({
+      label: randomLabel(),
+      cluster: chooseCluster(),
+    }));
+
+    cy.defer(
+      () => setupBuckets(bucketsDetails),
+      'creating Object Storage bucket'
+    ).then(() => {
+      cy.visitWithLogin('/object-storage/buckets');
+      cy.wait('@getBuckets');
+      cy.wait('@getRegions').then(({ response }) => {
+        const regions: Region[] = response?.body.data;
+
+        const selectedBucket = bucketsDetails[0];
+        const selectedRegion = regions.find(
+          (region) => region.id === selectedBucket.cluster.region
+        );
+
+        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(() => ({
+      label: randomLabel(),
+      cluster: chooseCluster(),
+    }));
+
+    cy.defer(
+      () => setupBuckets(bucketsDetails),
+      'creating Object Storage bucket'
+    ).then(() => {
+      cy.visitWithLogin('/object-storage/buckets');
+      cy.wait(['@getBuckets', '@getRegions']);
+
+      const selectedBucket = bucketsDetails[0];
+      const selectedEndpoint = selectedBucket.cluster.id;
+      const endpointSelect = ui.autocomplete.findByLabel('Endpoint');
+      endpointSelect.should('be.visible').type(selectedEndpoint);
+      ui.autocompletePopper
+        .findByTitle(selectedEndpoint, { 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 endpoinds when region is selected', () => {
+    interceptGetBuckets().as('getBuckets');
+    interceptGetRegions().as('getRegions');
+
+    const bucketsDetails = new Array(2).fill({}).map(() => ({
+      label: randomLabel(),
+      cluster: chooseCluster(),
+    }));
+
+    cy.defer(
+      () => setupBuckets(bucketsDetails),
+      'creating Object Storage bucket'
+    ).then(() => {
+      cy.visitWithLogin('/object-storage/buckets');
+      cy.wait('@getBuckets');
+      cy.wait('@getRegions').then(({ response }) => {
+        const regions: Region[] = response?.body.data;
+
+        const selectedBucket = bucketsDetails[0];
+        const selectedRegion = regions.find(
+          (region) => region.id === selectedBucket.cluster.region
+        );
+
+        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.
  *

packages/manager/src/features/ObjectStorage/BucketLanding/OMC_BucketLanding.tsx

@@ -1,5 +1,11 @@
 import { useProfile } from '@linode/queries';
-import { CircleProgress, ErrorState, Notice, Typography } from '@linode/ui';
+import {
+  Box,
+  CircleProgress,
+  ErrorState,
+  Notice,
+  Typography,
+} from '@linode/ui';
 import { readableBytes, useOpenClose } from '@linode/utilities';
 import Grid from '@mui/material/Grid';
 import * as React from 'react';
@@ -21,10 +27,15 @@ import {
 } from 'src/utilities/analytics/customEventAnalytics';
 
 import { CancelNotice } from '../CancelNotice';
+import { EndpointMultiselect } from '../Partials/EndpointMultiselect';
+import { RegionMultiselect } from '../Partials/RegionMultiselect';
+import { uniqueByKey } from '../utilities';
 import { BucketDetailsDrawer } from './BucketDetailsDrawer';
 import { BucketLandingEmptyState } from './BucketLandingEmptyState';
 import { BucketTable } from './BucketTable';
 
+import type { EndpointMultiselectValue } from '../Partials/EndpointMultiselect';
+import type { RegionMultiselectValue } from '../Partials/RegionMultiselect';
 import type { APIError, ObjectStorageBucket } from '@linode/api-v4';
 import type { Theme } from '@mui/material/styles';
 
@@ -62,6 +73,14 @@ export const OMC_BucketLanding = (props: Props) => {
   const [bucketDetailDrawerOpen, setBucketDetailDrawerOpen] =
     React.useState<boolean>(false);
 
+  const [selectedRegions, setSelectedRegions] = React.useState<
+    RegionMultiselectValue[]
+  >([]);
+
+  const [selectedEndpoints, setSelectedEndpoints] = React.useState<
+    EndpointMultiselectValue[]
+  >([]);
+
   const [selectedBucket, setSelectedBucket] = React.useState<
     ObjectStorageBucket | undefined
   >(undefined);
@@ -144,6 +163,25 @@ export const OMC_BucketLanding = (props: Props) => {
   const totalUsage = sumBucketUsage(buckets);
   const bucketLabel = selectedBucket ? selectedBucket.label : '';
 
+  const endpointOptions = React.useMemo(
+    () =>
+      uniqueByKey(
+        buckets.map((bucket) => ({
+          label: bucket.s3_endpoint,
+        })),
+        'label'
+      ).filter((option) => {
+        if (selectedRegions.length) {
+          return selectedRegions.some((region) =>
+            option.label.includes(region.value)
+          );
+        }
+
+        return true;
+      }) as EndpointMultiselectValue[],
+    [buckets, selectedRegions]
+  );
+
   const {
     handleOrderChange,
     order,
@@ -161,6 +199,20 @@ export const OMC_BucketLanding = (props: Props) => {
     preferenceKey: 'object-storage-buckets',
   });
 
+  const filteredData = orderedData?.filter((bucket) => {
+    if (selectedEndpoints.length) {
+      return selectedEndpoints.some(
+        (endpoint) => bucket.s3_endpoint === endpoint.label
+      );
+    }
+
+    if (selectedRegions.length) {
+      return selectedRegions.some((region) => bucket.region === region.value);
+    }
+
+    return true;
+  });
+
   if (isRestrictedUser) {
     return <RenderEmpty />;
   }
@@ -190,16 +242,48 @@ export const OMC_BucketLanding = (props: Props) => {
   }
 
   return (
-    <React.Fragment>
+    <>
       <DocumentTitleSegment
         segment={`${isCreateBucketDrawerOpen ? 'Create a Bucket' : 'Buckets'}`}
       />
+
       {unavailableRegionLabels && unavailableRegionLabels.length > 0 && (
         <UnavailableRegionsDisplay regionLabels={unavailableRegionLabels} />
       )}
+
+      <Typography gutterBottom variant="h3">
+        Filter by
+      </Typography>
+
+      <Box
+        sx={(theme) => ({
+          display: 'flex',
+          gap: theme.spacingFunction(16),
+          marginBottom: theme.spacingFunction(16),
+        })}
+      >
+        <RegionMultiselect
+          filterFn={(option) =>
+            buckets.some((bucket) => bucket.region === option.value)
+          }
+          onChange={setSelectedRegions}
+          showLabel={true}
+          sx={{ flex: 1 }}
+          values={selectedRegions}
+        />
+
+        <EndpointMultiselect
+          onChange={setSelectedEndpoints}
+          options={endpointOptions}
+          showLabel={true}
+          sx={{ flex: 1 }}
+          values={selectedEndpoints}
+        />
+      </Box>
+
       <Grid size={12}>
         <BucketTable
-          data={orderedData ?? []}
+          data={filteredData ?? []}
           handleClickDetails={handleClickDetails}
           handleClickRemove={handleClickRemove}
           handleOrderChange={handleOrderChange}
@@ -217,6 +301,7 @@ export const OMC_BucketLanding = (props: Props) => {
         ) : null}
         <TransferDisplay spacingTop={buckets.length > 1 ? 8 : 18} />
       </Grid>
+
       <TypeToConfirmDialog
         entity={{
           action: 'deletion',
@@ -256,12 +341,13 @@ export const OMC_BucketLanding = (props: Props) => {
           Account Settings. */}
         {buckets.length === 1 && <CancelNotice className={classes.copy} />}
       </TypeToConfirmDialog>
+
       <BucketDetailsDrawer
         onClose={closeBucketDetailDrawer}
         open={bucketDetailDrawerOpen}
         selectedBucket={selectedBucket}
       />
-    </React.Fragment>
+    </>
   );
 };