Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: BucketRateLimitTable bug causing page crashes on Object Storage Bucket Create/Details drawer #10849

Closed
wants to merge 2 commits into from
Closed

fix: BucketRateLimitTable bug causing page crashes on Object Storage Bucket Create/Details drawer #10849

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f5ce71
fix page crash issue
coliu-akamai Aug 28, 2024
f35a9ab
Added changeset: Page crash when viewing BucketRateLimitTable on Buck…
coliu-akamai Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion packages/manager/src/features/ObjectStorage/BucketDetail/BucketProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import { useController } from 'react-hook-form';
import { FormProvider, useForm } from 'react-hook-form';
import { useHistory, useLocation } from 'react-router-dom';

Expand Down Expand Up @@ -37,6 +38,12 @@ export const BucketProperties = React.memo((props: Props) => {
},
});

const { control } = form;
const { field } = useController({
control,
name: 'rateLimit',
});

const {
formState: { errors, isDirty, isSubmitting },
handleSubmit,
Expand Down Expand Up @@ -75,7 +82,7 @@ export const BucketProperties = React.memo((props: Props) => {
</StyledHelperText>

<form onSubmit={handleSubmit(onSubmit)}>
<BucketRateLimitTable endpointType={endpoint_type} />
<BucketRateLimitTable endpointType={endpoint_type} field={field} />
<StyledActionsPanel
primaryButtonProps={{
disabled: !isDirty,
Expand Down
4 changes: 1 addition & 3 deletions packages/manager/src/features/ObjectStorage/BucketLanding/BucketRateLimitTable.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ import { renderWithTheme } from 'src/utilities/testHelpers';

import { BucketRateLimitTable } from './BucketRateLimitTable';

// recent bucket rate limit changes cause these tests to fail + bug when opening up Create Bucket drawer.
// commenting out these tests for now + will investigate in a separate PR (need to investigate further)
describe.skip('BucketRateLimitTable', () => {
describe('BucketRateLimitTable', () => {
it('should render a BucketRateLimitTable', () => {
const { getAllByRole, getByText, queryByText } = renderWithTheme(
<BucketRateLimitTable endpointType="E2" />
Expand Down
42 changes: 24 additions & 18 deletions packages/manager/src/features/ObjectStorage/BucketLanding/BucketRateLimitTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import { useController, useFormContext } from 'react-hook-form';

import { FormControlLabel } from 'src/components/FormControlLabel';
import { Radio } from 'src/components/Radio/Radio';
Expand All @@ -11,6 +10,7 @@ import { TableRow } from 'src/components/TableRow';

import type { UpdateBucketRateLimitPayload } from '../BucketDetail/BucketProperties';
import type { ObjectStorageEndpointTypes } from '@linode/api-v4';
import type { ControllerRenderProps } from 'react-hook-form';

/**
* TODO: This component is currently using static data until
Expand All @@ -20,6 +20,7 @@ import type { ObjectStorageEndpointTypes } from '@linode/api-v4';

interface BucketRateLimitTableProps {
endpointType: ObjectStorageEndpointTypes | undefined;
field?: ControllerRenderProps<UpdateBucketRateLimitPayload, 'rateLimit'>;
}

const tableHeaders = ['Limits', 'GET', 'PUT', 'LIST', 'DELETE', 'OTHER'];
Expand Down Expand Up @@ -50,13 +51,8 @@ const tableData = ({ endpointType }: BucketRateLimitTableProps) => {

export const BucketRateLimitTable = ({
endpointType,
field,
}: BucketRateLimitTableProps) => {
const { control } = useFormContext<UpdateBucketRateLimitPayload>();
const { field } = useController({
control,
name: 'rateLimit',
});

return (
<Table data-testid="bucket-rate-limit-table" sx={{ marginBottom: 3 }}>
<TableHead>
Expand All @@ -81,17 +77,27 @@ export const BucketRateLimitTable = ({
{tableData({ endpointType }).map((row, rowIndex) => (
<TableRow key={rowIndex}>
<TableCell>
<FormControlLabel
control={
<Radio
checked={field.value === row.id}
disabled
onChange={() => field.onChange(row.id)}
value={row.id}
/>
}
label={row.label}
/>
{field ? (
<FormControlLabel
control={
<Radio
checked={field.value === row.id}
disabled
onChange={() => field.onChange(row.id)}
value={row.id}
/>
}
label={row.label}
/>
) : (
<Radio
checked={row.checked}
disabled
name="limit-selection"
onChange={() => {}}
value="2"
/>
Comment on lines +93 to +99
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Old props for the radio - I'm unsure if the BucketRateLimitTable on the Details/Create drawer will eventually become part of a form, but for now placing this back in so that the page doesn't crash when trying to view the drawers

)}
</TableCell>
{row.values.map((value, index) => {
return (
Expand Down
Loading