diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketProperties.styles.ts b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketProperties.styles.ts index e44936ac4ba..96183503462 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketProperties.styles.ts +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketProperties.styles.ts @@ -24,14 +24,6 @@ export const StyledRootContainer = styled(Paper, { padding: theme.spacing(3), })); -export const StyledHelperText = styled(Typography, { - label: 'StyledHelperText', -})(({ theme }) => ({ - lineHeight: 1.5, - paddingBottom: theme.spacing(), - paddingTop: theme.spacing(), -})); - export const StyledActionsPanel = styled(ActionsPanel, { label: 'StyledActionsPanel', })(() => ({ diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketProperties.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketProperties.tsx index 019050b040c..6ab5971ae72 100644 --- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketProperties.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketProperties.tsx @@ -1,18 +1,12 @@ import * as React from 'react'; -import { FormProvider, useForm } from 'react-hook-form'; import { useHistory, useLocation } from 'react-router-dom'; -import { Link } from 'src/components/Link'; -import { Notice } from 'src/components/Notice/Notice'; -import { SupportLink } from 'src/components/SupportLink'; -import { Typography } from 'src/components/Typography'; import { getQueryParamFromQueryString } from 'src/utilities/queryParams'; import { BucketRateLimitTable } from '../BucketLanding/BucketRateLimitTable'; import { BucketBreadcrumb } from './BucketBreadcrumb'; import { StyledActionsPanel, - StyledHelperText, StyledRootContainer, StyledText, } from './BucketProperties.styles'; @@ -23,69 +17,36 @@ interface Props { bucket: ObjectStorageBucket; } -export interface UpdateBucketRateLimitPayload { - rateLimit: string; -} - export const BucketProperties = React.memo((props: Props) => { const { bucket } = props; const { endpoint_type, hostname, label } = bucket; - const form = useForm({ - defaultValues: { - rateLimit: '1', - }, - }); - - const { - formState: { errors, isDirty, isSubmitting }, - handleSubmit, - } = form; - const location = useLocation(); const history = useHistory(); const prefix = getQueryParamFromQueryString(location.search, 'prefix'); - const onSubmit = () => { - // TODO: OBJGen2 - Handle Bucket Rate Limit update logic once the endpoint for updating is available. - // The 'data' argument is expected -> data: UpdateBucketRateLimitPayload - }; - return ( - + <> - {hostname || 'Loading...'} + {hostname} - Bucket Rate Limits - - {errors.root?.message ? ( - - ) : null} - - {/* TODO: OBJGen2 - We need to handle link in upcoming PR */} - - Specifies the maximum Requests Per Second (RPS) for an Endpoint. To - increase it to High,{' '} - - . Understand bucket rate limits. - - -
- - - + + {/* TODO: OBJGen2 - This will be handled once we receive API for bucket rates */} +
-
+ ); }); diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx index 7b774484f9e..4c8376d4a7d 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx @@ -59,6 +59,12 @@ export const BucketDetailsDrawer = React.memo( account?.capabilities ?? [] ); + const isObjectStorageGen2Enabled = isFeatureEnabledV2( + 'Object Storage Endpoint Types', + Boolean(flags.objectStorageGen2?.enabled), + account?.capabilities ?? [] + ); + // @TODO OBJGen2 - We could clean this up when OBJ Gen2 is in GA. const { data: clusters } = useObjectStorageClusters( !isObjMultiClusterEnabled @@ -74,8 +80,6 @@ export const BucketDetailsDrawer = React.memo( ); let formattedCreated; - const showBucketRateLimitTable = - endpoint_type === 'E2' || endpoint_type === 'E3'; try { if (created) { @@ -141,21 +145,15 @@ export const BucketDetailsDrawer = React.memo( )} {/* @TODO OBJ Multicluster: use region instead of cluster if isObjMultiClusterEnabled to getBucketAccess and updateBucketAccess. */} - { - <> - - Bucket Rate Limits - - {showBucketRateLimitTable ? ( - - ) : ( - - This endpoint type supports up to 750 Requests Per Second(RPS).{' '} - Understand bucket rate limits. - - )} - - } + {isObjectStorageGen2Enabled && ( + + )} {} {cluster && label && ( { +describe('BucketRateLimitTable', () => { it('should render a BucketRateLimitTable', () => { const { getAllByRole, getByText, queryByText } = renderWithTheme( diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRateLimitTable.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRateLimitTable.tsx index 4cd414406dd..99bb79ac6c5 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRateLimitTable.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/BucketRateLimitTable.tsx @@ -1,25 +1,30 @@ import React from 'react'; -import { useController, useFormContext } from 'react-hook-form'; +import { Box } from 'src/components/Box'; import { FormControlLabel } from 'src/components/FormControlLabel'; +import { FormLabel } from 'src/components/FormLabel'; +import { Link } from 'src/components/Link'; import { Radio } from 'src/components/Radio/Radio'; +import { SupportLink } from 'src/components/SupportLink'; import { Table } from 'src/components/Table'; import { TableBody } from 'src/components/TableBody'; import { TableCell } from 'src/components/TableCell'; import { TableHead } from 'src/components/TableHead'; import { TableRow } from 'src/components/TableRow'; +import { Typography } from 'src/components/Typography'; -import type { UpdateBucketRateLimitPayload } from '../BucketDetail/BucketProperties'; import type { ObjectStorageEndpointTypes } from '@linode/api-v4'; +import type { TypographyProps } from 'src/components/Typography'; /** - * TODO: This component is currently using static data until + * TODO: [IMPORTANT NOTE]: This component is currently using static data until * and API endpoint is available to return rate limits for * each endpoint type. */ interface BucketRateLimitTableProps { - endpointType: ObjectStorageEndpointTypes | undefined; + endpointType?: ObjectStorageEndpointTypes; + typographyProps?: TypographyProps; } const tableHeaders = ['Limits', 'GET', 'PUT', 'LIST', 'DELETE', 'OTHER']; @@ -50,66 +55,93 @@ const tableData = ({ endpointType }: BucketRateLimitTableProps) => { export const BucketRateLimitTable = ({ endpointType, + typographyProps, }: BucketRateLimitTableProps) => { - const { control } = useFormContext(); - const { field } = useController({ - control, - name: 'rateLimit', - }); + const isGen2EndpointType = endpointType === 'E2' || endpointType === 'E3'; return ( - - - - {tableHeaders.map((header, index) => { - return ( - - {header} - - ); - })} - - - - {tableData({ endpointType }).map((row, rowIndex) => ( - - - field.onChange(row.id)} - value={row.id} + + + + Bucket Rate Limits + + + + {isGen2EndpointType ? ( + <> + Specifies the maximum Requests Per Second (RPS) for a bucket. To + increase it to High,{' '} + + .{' '} + + ) : ( + 'This endpoint type supports up to 750 Requests Per Second (RPS). ' + )} + Understand bucket rate limits. + + + {isGen2EndpointType && ( +
+ + + {tableHeaders.map((header, index) => { + return ( + + {header} + + ); + })} + + + + {tableData({ endpointType }).map((row, rowIndex) => ( + + + null} + value={row.id} + /> + } + label={row.label} /> - } - label={row.label} - /> - - {row.values.map((value, index) => { - return ( - - {value} - ); - })} - - ))} - -
+ {row.values.map((value, index) => { + return ( + + {value} + + ); + })} + + ))} + + + )} + ); }; diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.test.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.test.tsx index a600017fb90..dd6e664daf6 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.test.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.test.tsx @@ -1,4 +1,4 @@ -import { fireEvent, waitFor } from '@testing-library/react'; +import { fireEvent } from '@testing-library/react'; import * as React from 'react'; import { objectStorageEndpointsFactory } from 'src/factories'; @@ -42,7 +42,7 @@ describe('OMC_CreateBucketDrawer', () => { }); it( - 'should display the endpoint selector if endpoints exist', + 'should not display the endpoint selector if regions is not selected', server.boundary(async () => { server.use( http.get('*/v4/object-storage/endpoints', () => { @@ -58,7 +58,7 @@ describe('OMC_CreateBucketDrawer', () => { }) ); - const { getByText, queryByText } = renderWithThemeAndHookFormContext({ + const { queryByText } = renderWithThemeAndHookFormContext({ component: , options: { flags: { @@ -71,19 +71,6 @@ describe('OMC_CreateBucketDrawer', () => { expect( queryByText('Object Storage Endpoint Type') ).not.toBeInTheDocument(); - - await waitFor( - () => - expect(getByText('Object Storage Endpoint Type')).toBeInTheDocument(), - { - timeout: 2000, - } - ); - - // Additional verification after waitFor - const endpointTypeElement = getByText('Object Storage Endpoint Type'); - expect(endpointTypeElement).toBeVisible(); - expect(endpointTypeElement.tagName).toBe('LABEL'); }) ); diff --git a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx index 4cce7084f1a..c41755ed4de 100644 --- a/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx +++ b/packages/manager/src/features/ObjectStorage/BucketLanding/OMC_CreateBucketDrawer.tsx @@ -6,7 +6,6 @@ import { Controller, useForm } from 'react-hook-form'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; import { Drawer } from 'src/components/Drawer'; -import { FormLabel } from 'src/components/FormLabel'; import { Link } from 'src/components/Link'; import { Notice } from 'src/components/Notice/Notice'; import { TextField } from 'src/components/TextField'; @@ -236,11 +235,6 @@ export const OMC_CreateBucketDrawer = (props: Props) => { ); }, [filteredEndpointOptions, watch]); - const isGen2EndpointType = - selectedEndpointOption && - selectedEndpointOption.endpoint_type !== 'E0' && - selectedEndpointOption.endpoint_type !== 'E1'; - const { showGDPRCheckbox } = getGDPRDetails({ agreements, profile, @@ -334,7 +328,7 @@ export const OMC_CreateBucketDrawer = (props: Props) => { name="region" /> {selectedRegion?.id && } - {Boolean(endpoints) && ( + {Boolean(endpoints) && selectedRegion && ( <> ( @@ -365,24 +359,13 @@ export const OMC_CreateBucketDrawer = (props: Props) => { control={control} name="endpoint_type" /> - {selectedEndpointOption && ( - <> - - - Bucket Rate Limits - - - - {isGen2EndpointType - ? 'Specifies the maximum Requests Per Second (RPS) for a bucket. To increase it to High, open a support ticket. ' - : 'This endpoint type supports up to 750 Requests Per Second (RPS). '} - Understand bucket rate limits. - - - )} - {isGen2EndpointType && ( + {Boolean(endpoints) && selectedEndpointOption && ( )}