Skip to content

Commit 998134e

Browse files
dchyrva-akamaidchyrva-akamai
committed
refactor: STORIF-335 - Comments resolved.
1 parent 722bd73 commit 998134e

11 files changed

Lines changed: 155 additions & 97 deletions

‎packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const AccessKeyLanding = (props: Props) => {
4444
const { mutateAsync: deleteAccessKey } = useDeleteAccessKeyMutation();
4545

4646
const { drawer } = useAccessKeyDrawers();
47-
const isCreateAccessDrawerOpen = drawer === 'create-access-key';
47+
const isCreateAccessKeyDrawerOpen = drawer?.type === 'create-access-key';
4848

4949
// Key to revoke (by clicking on a key's kebab menu )
5050
const [keyToRevoke, setKeyToRevoke] = React.useState<null | ObjectStorageKey>(
@@ -113,7 +113,7 @@ export const AccessKeyLanding = (props: Props) => {
113113
return (
114114
<div>
115115
<DocumentTitleSegment
116-
segment={`${isCreateAccessDrawerOpen ? `Create an Access Key` : `Access Keys`}`}
116+
segment={`${isCreateAccessKeyDrawerOpen ? `Create an Access Key` : `Access Keys`}`}
117117
/>
118118
<AccessKeyTable
119119
data={data?.data}

‎packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeysDrawerOutlet.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22

3-
import { useIsObjMultiClusterEnabled } from '../hooks/useIsObjectStorageGen2Enabled';
3+
import { useObjectStorageAccessKey } from 'src/queries/object-storage/queries';
4+
45
import { useAccessKeyDrawers } from './hooks/useAccessKeyDrawers';
56
import { HostNamesDrawer } from './HostNamesDrawer';
67
import { AccessKeyDrawer } from './OMC_AccessKeyDrawer';
@@ -9,33 +10,36 @@ import { ViewPermissionsDrawer } from './ViewPermissionsDrawer';
910
export const AccessKeysDrawerOutlet = () => {
1011
const { drawer, closeDrawer } = useAccessKeyDrawers();
1112

12-
const { isObjMultiClusterEnabled } = useIsObjMultiClusterEnabled();
13+
const { data: objectStorageKey } = useObjectStorageAccessKey(
14+
drawer?.accessKeyId
15+
);
1316

1417
return (
1518
<>
1619
<AccessKeyDrawer
17-
isOpen={drawer === 'create-access-key'}
20+
isOpen={drawer?.type === 'create-access-key'}
1821
mode="creating"
1922
onClose={closeDrawer}
2023
/>
2124

2225
<AccessKeyDrawer
23-
isOpen={drawer === 'edit-access-key'}
26+
isOpen={drawer?.type === 'edit-access-key'}
2427
mode="editing"
28+
objectStorageKey={objectStorageKey}
2529
onClose={closeDrawer}
2630
/>
2731

2832
<ViewPermissionsDrawer
29-
isOpen={drawer === 'access-key-permissions'}
33+
isOpen={drawer?.type === 'access-key-permissions'}
34+
objectStorageKey={objectStorageKey}
3035
onClose={closeDrawer}
3136
/>
3237

33-
{isObjMultiClusterEnabled && (
34-
<HostNamesDrawer
35-
isOpen={drawer === 'access-key-hostnames'}
36-
onClose={closeDrawer}
37-
/>
38-
)}
38+
<HostNamesDrawer
39+
isOpen={drawer?.type === 'access-key-hostnames'}
40+
objectStorageKey={objectStorageKey}
41+
onClose={closeDrawer}
42+
/>
3943
</>
4044
);
4145
};

‎packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.test.tsx‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,19 @@ import { HostNamesDrawer } from './HostNamesDrawer';
1111
// Mock the onClose function
1212
const mockOnClose = vi.fn();
1313

14+
const mockAccessKey = objectStorageKeyFactory.build({
15+
regions: [
16+
{
17+
id: 'region1',
18+
s3_endpoint: 'endpoint1',
19+
},
20+
{
21+
id: 'region2',
22+
s3_endpoint: 'endpoint2',
23+
},
24+
],
25+
});
26+
1427
vi.mock('@linode/queries', async (importOriginal) => ({
1528
...(await importOriginal()),
1629
useRegionsQuery: vi.fn(() => ({
@@ -21,30 +34,15 @@ vi.mock('@linode/queries', async (importOriginal) => ({
2134
})),
2235
}));
2336

24-
vi.mock('src/queries/object-storage/queries', async () => {
25-
const actual = await vi.importActual('src/queries/object-storage/queries');
26-
return {
27-
...actual,
28-
useObjectStorageAccessKey: vi.fn().mockReturnValue({
29-
data: objectStorageKeyFactory.build({
30-
regions: [
31-
{
32-
id: 'region1',
33-
s3_endpoint: 'endpoint1',
34-
},
35-
{
36-
id: 'region2',
37-
s3_endpoint: 'endpoint2',
38-
},
39-
],
40-
}),
41-
}),
42-
};
43-
});
44-
4537
describe('HostNamesDrawer', () => {
4638
it('renders the drawer with regions and copyable text', () => {
47-
renderWithTheme(<HostNamesDrawer isOpen={true} onClose={mockOnClose} />);
39+
renderWithTheme(
40+
<HostNamesDrawer
41+
isOpen={true}
42+
objectStorageKey={mockAccessKey}
43+
onClose={mockOnClose}
44+
/>
45+
);
4846

4947
expect(
5048
screen.getByRole('dialog', { name: 'Regions / S3 Hostnames' })
@@ -69,7 +67,13 @@ describe('HostNamesDrawer', () => {
6967
});
7068

7169
it('calls onClose when the drawer is closed', async () => {
72-
renderWithTheme(<HostNamesDrawer isOpen={true} onClose={mockOnClose} />);
70+
renderWithTheme(
71+
<HostNamesDrawer
72+
isOpen={true}
73+
objectStorageKey={mockAccessKey}
74+
onClose={mockOnClose}
75+
/>
76+
);
7377

7478
const closeButton = screen.getByRole('button', { name: 'Close drawer' });
7579
await userEvent.click(closeButton);

‎packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesDrawer.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
import { Box, Drawer } from '@linode/ui';
2-
import { useParams } from '@tanstack/react-router';
32
import * as React from 'react';
43

54
import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField';
65
import { useObjectStorageRegions } from 'src/features/ObjectStorage/hooks/useObjectStorageRegions';
7-
import { useObjectStorageAccessKey } from 'src/queries/object-storage/queries';
86

97
import { CopyAllHostnames } from './CopyAllHostnames';
108

9+
import type { ObjectStorageKey } from '@linode/api-v4';
10+
1111
interface Props {
1212
isOpen: boolean;
13+
objectStorageKey?: ObjectStorageKey;
1314
onClose: () => void;
1415
}
1516

1617
export const HostNamesDrawer = (props: Props) => {
17-
const { onClose, isOpen } = props;
18-
const { accessKeyId } = useParams({ strict: false });
18+
const { onClose, isOpen, objectStorageKey } = props;
1919

20-
const { data: objectStorageKey } = useObjectStorageAccessKey(accessKeyId);
2120
const { availableStorageRegions, regionsByIdMap } = useObjectStorageRegions();
2221

2322
const regions = objectStorageKey?.regions || [];

‎packages/manager/src/features/ObjectStorage/AccessKeyLanding/OMC_AccessKeyDrawer.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
createObjectStorageKeysSchema,
1313
updateObjectStorageKeysSchema,
1414
} from '@linode/validation';
15-
import { useParams } from '@tanstack/react-router';
1615
import { useFormik } from 'formik';
1716
import React, { useEffect, useState } from 'react';
1817

@@ -21,7 +20,6 @@ import { useObjectStorageRegions } from 'src/features/ObjectStorage/hooks/useObj
2120
import { SecretTokenDialog } from 'src/features/Profile/SecretTokenDialog/SecretTokenDialog';
2221
import {
2322
useCreateAccessKeyMutation,
24-
useObjectStorageAccessKey,
2523
useObjectStorageBuckets,
2624
useUpdateAccessKeyMutation,
2725
} from 'src/queries/object-storage/queries';
@@ -104,8 +102,7 @@ export const getDefaultScopes = (
104102
.sort(sortByRegion(regionLookup));
105103

106104
export const AccessKeyDrawer = (props: AccessKeyDrawerProps) => {
107-
const { mode, onClose, isOpen } = props;
108-
const { accessKeyId } = useParams({ strict: false });
105+
const { mode, onClose, isOpen, objectStorageKey } = props;
109106

110107
const { data: profile } = useProfile();
111108
const isRestrictedUser = profile?.restricted ?? false;
@@ -124,7 +121,6 @@ export const AccessKeyDrawer = (props: AccessKeyDrawerProps) => {
124121
} = useObjectStorageBuckets();
125122

126123
const { data: accountSettings } = useAccountSettings();
127-
const { data: objectStorageKey } = useObjectStorageAccessKey(accessKeyId);
128124
const { mutateAsync: createAccessKey } = useCreateAccessKeyMutation();
129125
const { mutateAsync: updateAccessKey } = useUpdateAccessKeyMutation();
130126

‎packages/manager/src/features/ObjectStorage/AccessKeyLanding/ViewPermissionsDrawer.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
import { Drawer, Typography } from '@linode/ui';
2-
import { useParams } from '@tanstack/react-router';
32
import * as React from 'react';
43

5-
import { useObjectStorageAccessKey } from 'src/queries/object-storage/queries';
6-
74
import { useIsObjMultiClusterEnabled } from '../hooks/useIsObjectStorageGen2Enabled';
85
import { AccessTable } from './AccessTable';
96
import { BucketPermissionsTable } from './BucketPermissionsTable';
107

8+
import type { ObjectStorageKey } from '@linode/api-v4';
9+
1110
export interface Props {
1211
isOpen: boolean;
12+
objectStorageKey?: ObjectStorageKey;
1313
onClose: () => void;
1414
}
1515

1616
export const ViewPermissionsDrawer = (props: Props) => {
17-
const { onClose, isOpen } = props;
18-
const { accessKeyId } = useParams({ strict: false });
17+
const { onClose, isOpen, objectStorageKey } = props;
1918

20-
const { data: objectStorageKey } = useObjectStorageAccessKey(accessKeyId);
2119
const { isObjMultiClusterEnabled } = useIsObjMultiClusterEnabled();
2220

2321
return (

‎packages/manager/src/features/ObjectStorage/AccessKeyLanding/hooks/useAccessKeyDrawers.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,40 @@
1-
import { useMatch, useNavigate } from '@tanstack/react-router';
1+
import { useMatch, useNavigate, useParams } from '@tanstack/react-router';
2+
import { useMemo } from 'react';
23

3-
type AccessKeyDrawers =
4+
type AccessKeyDrawerType =
45
| 'access-key-hostnames'
56
| 'access-key-permissions'
67
| 'create-access-key'
78
| 'edit-access-key';
89

910
const ACCESS_KEYS_BASE_URL = '/object-storage/access-keys';
1011

12+
interface AccessKeyDrawerState {
13+
accessKeyId?: number;
14+
type: AccessKeyDrawerType;
15+
}
16+
1117
export const useAccessKeyDrawers = () => {
1218
const navigate = useNavigate();
1319
const { routeId } = useMatch({ strict: false });
20+
const { accessKeyId } = useParams({ strict: false });
1421

15-
function getDrawer(): AccessKeyDrawers | null {
22+
function getDrawer(): AccessKeyDrawerState | null {
1623
switch (routeId) {
1724
case `${ACCESS_KEYS_BASE_URL}/$accessKeyId/edit`:
18-
return 'edit-access-key';
25+
return { accessKeyId, type: 'edit-access-key' };
1926
case `${ACCESS_KEYS_BASE_URL}/$accessKeyId/hostnames`:
20-
return 'access-key-hostnames';
27+
return { accessKeyId, type: 'access-key-hostnames' };
2128
case `${ACCESS_KEYS_BASE_URL}/$accessKeyId/permissions`:
22-
return 'access-key-permissions';
29+
return { accessKeyId, type: 'access-key-permissions' };
2330
case `${ACCESS_KEYS_BASE_URL}/create`:
24-
return 'create-access-key';
31+
return { type: 'create-access-key' };
2532
default:
2633
return null;
2734
}
2835
}
2936

30-
function openDrawer(drawer: AccessKeyDrawers, accessKeyId?: number) {
37+
function openDrawer(drawer: AccessKeyDrawerType, accessKeyId?: number) {
3138
switch (drawer) {
3239
case 'access-key-hostnames':
3340
navigate({
@@ -55,7 +62,7 @@ export const useAccessKeyDrawers = () => {
5562
}
5663

5764
return {
58-
drawer: getDrawer(),
65+
drawer: useMemo(() => getDrawer(), [routeId]),
5966
openDrawer,
6067
closeDrawer,
6168
};

0 commit comments

Comments
 (0)