diff --git a/packages/manager/src/features/Account/constants.ts b/packages/manager/src/features/Account/constants.ts
index 4b7bb56aa35..d3f361c0a63 100644
--- a/packages/manager/src/features/Account/constants.ts
+++ b/packages/manager/src/features/Account/constants.ts
@@ -5,6 +5,7 @@ export const CUSTOMER_SUPPORT = 'customer support';
export const grantTypeMap = {
account: 'Account',
bucket: 'Buckets',
+ key: 'Access Keys',
database: 'Databases',
domain: 'Domains',
firewall: 'Firewalls',
diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.test.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.test.tsx
index 66837df0145..535aab60d99 100644
--- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.test.tsx
+++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.test.tsx
@@ -4,17 +4,9 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
import { AccessKeyLanding } from './AccessKeyLanding';
-const props = {
- accessDrawerOpen: false,
- closeAccessDrawer: vi.fn(),
- isRestrictedUser: false,
- mode: 'creating' as any,
- openAccessDrawer: vi.fn(),
-};
-
describe('AccessKeyLanding', () => {
it('should render a table of access keys', async () => {
- const { getByTestId } = renderWithTheme();
+ const { getByTestId } = renderWithTheme();
expect(getByTestId('data-qa-access-key-table')).toBeInTheDocument();
});
});
diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.tsx
index e624b21443f..70110c9d3fa 100644
--- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.tsx
+++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/AccessKeyLanding.tsx
@@ -1,59 +1,22 @@
-import {
- createObjectStorageKeys,
- revokeObjectStorageKey,
- updateObjectStorageKey,
-} from '@linode/api-v4/lib/object-storage';
-import { useAccountSettings } from '@linode/queries';
+import { revokeObjectStorageKey } from '@linode/api-v4/lib/object-storage';
import { useErrors, useOpenClose } from '@linode/utilities';
import { useNavigate } from '@tanstack/react-router';
import * as React from 'react';
import { DocumentTitleSegment } from 'src/components/DocumentTitle';
import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
-import { SecretTokenDialog } from 'src/features/Profile/SecretTokenDialog/SecretTokenDialog';
import { usePaginationV2 } from 'src/hooks/usePaginationV2';
import { useObjectStorageAccessKeys } from 'src/queries/object-storage/queries';
-import {
- sendCreateAccessKeyEvent,
- sendEditAccessKeyEvent,
- sendRevokeAccessKeyEvent,
-} from 'src/utilities/analytics/customEventAnalytics';
-import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
+import { sendRevokeAccessKeyEvent } from 'src/utilities/analytics/customEventAnalytics';
+import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
-import { useIsObjMultiClusterEnabled } from '../hooks/useIsObjectStorageGen2Enabled';
-import { AccessKeyDrawer } from './AccessKeyDrawer';
import { AccessKeyTable } from './AccessKeyTable/AccessKeyTable';
-import { OMC_AccessKeyDrawer } from './OMC_AccessKeyDrawer';
import { RevokeAccessKeyDialog } from './RevokeAccessKeyDialog';
-import { ViewPermissionsDrawer } from './ViewPermissionsDrawer';
import type { MODE, OpenAccessDrawer } from './types';
-import type {
- CreateObjectStorageKeyPayload,
- ObjectStorageKey,
- UpdateObjectStorageKeyPayload,
-} from '@linode/api-v4/lib/object-storage';
-import type { FormikBag, FormikHelpers } from 'formik';
-
-interface Props {
- accessDrawerOpen: boolean;
- closeAccessDrawer: () => void;
- isRestrictedUser: boolean;
- mode: MODE;
- openAccessDrawer: (mode: MODE) => void;
-}
-
-export type FormikProps = FormikBag;
-
-export const AccessKeyLanding = (props: Props) => {
- const {
- accessDrawerOpen,
- closeAccessDrawer,
- isRestrictedUser,
- mode,
- openAccessDrawer,
- } = props;
+import type { ObjectStorageKey } from '@linode/api-v4/lib/object-storage';
+export const AccessKeyLanding = () => {
const navigate = useNavigate();
const pagination = usePaginationV2({
currentRoute: '/object-storage/access-keys',
@@ -66,18 +29,6 @@ export const AccessKeyLanding = (props: Props) => {
page_size: pagination.pageSize,
});
- const { data: accountSettings, refetch: requestAccountSettings } =
- useAccountSettings();
-
- // Key to display in Confirmation Modal upon creation
- const [keyToDisplay, setKeyToDisplay] =
- React.useState(null);
-
- // Key to rename (by clicking on a key's kebab menu )
- const [keyToEdit, setKeyToEdit] = React.useState(
- null
- );
-
// Key to revoke (by clicking on a key's kebab menu )
const [keyToRevoke, setKeyToRevoke] = React.useState(
null
@@ -85,11 +36,8 @@ export const AccessKeyLanding = (props: Props) => {
const [isRevoking, setIsRevoking] = React.useState(false);
const [revokeErrors, setRevokeErrors] = useErrors();
- const displayKeysDialog = useOpenClose();
const revokeKeysDialog = useOpenClose();
- const { isObjMultiClusterEnabled } = useIsObjMultiClusterEnabled();
-
// Redirect to base access keys route if current page has no data
// TODO: Remove this implementation and replace `usePagination` with `usePaginate` hook. See [M3-10442]
React.useEffect(() => {
@@ -109,123 +57,6 @@ export const AccessKeyLanding = (props: Props) => {
}
}, [data, isLoading, pagination.page, navigate]);
- const handleCreateKey = (
- values: CreateObjectStorageKeyPayload,
- {
- setErrors,
- setStatus,
- setSubmitting,
- }: FormikHelpers
- ) => {
- // Clear out status (used for general errors)
- setStatus(null);
- setSubmitting(true);
-
- createObjectStorageKeys(values)
- .then((data) => {
- setSubmitting(false);
-
- setKeyToDisplay(data);
-
- // "Refresh" keys to include the newly created key
- refetch();
-
- props.closeAccessDrawer();
- displayKeysDialog.open();
-
- // If our Redux Store says that the user doesn't have OBJ enabled,
- // it probably means they have just enabled it with the creation
- // of this key. In that case, update the Redux Store so that
- // subsequently created keys don't need to go through the
- // confirmation flow.
- if (accountSettings?.object_storage === 'disabled') {
- requestAccountSettings();
- }
-
- // @analytics
- sendCreateAccessKeyEvent();
- })
- .catch((errorResponse) => {
- // We also need to refresh account settings on failure, since, depending
- // on the error, Object Storage service might have actually been enabled.
- if (accountSettings?.object_storage === 'disabled') {
- requestAccountSettings();
- }
-
- setSubmitting(false);
-
- const errors = getAPIErrorOrDefault(
- errorResponse,
- 'There was an issue creating your Access Key.'
- );
- const mappedErrors = getErrorMap(['label'], errors);
-
- // `status` holds general errors
- if (mappedErrors.none) {
- setStatus(mappedErrors.none);
- }
-
- setErrors(mappedErrors);
- });
- };
-
- const handleEditKey = (
- values: UpdateObjectStorageKeyPayload,
- {
- setErrors,
- setStatus,
- setSubmitting,
- }: FormikHelpers
- ) => {
- // This shouldn't happen, but just in case.
- if (!keyToEdit) {
- return;
- }
-
- // Clear out status (used for general errors)
- setStatus(null);
-
- // If the new label is the same as the old one, no need to make an API
- // request. Just close the drawer and return early.
- if (values.label === keyToEdit.label) {
- return closeAccessDrawer();
- }
-
- setSubmitting(true);
-
- updateObjectStorageKey(
- keyToEdit.id,
- isObjMultiClusterEnabled ? values : { label: values.label }
- )
- .then((_) => {
- setSubmitting(false);
-
- // "Refresh" keys to display the newly updated key
- refetch();
-
- closeAccessDrawer();
-
- // @analytics
- sendEditAccessKeyEvent();
- })
- .catch((errorResponse) => {
- setSubmitting(false);
-
- const errors = getAPIErrorOrDefault(
- errorResponse,
- 'There was an issue updating your Access Key.'
- );
- const mappedErrors = getErrorMap(['label'], errors);
-
- // `status` holds general errors
- if (mappedErrors.none) {
- setStatus(mappedErrors.none);
- }
-
- setErrors(mappedErrors);
- });
- };
-
const handleRevokeKeys = () => {
// This shouldn't happen, but just in case.
if (!keyToRevoke) {
@@ -260,12 +91,19 @@ export const AccessKeyLanding = (props: Props) => {
const openDrawer: OpenAccessDrawer = (
mode: MODE,
- objectStorageKey: null | ObjectStorageKey = null
+ objectStorageKey: ObjectStorageKey
) => {
- setKeyToEdit(objectStorageKey);
- if (mode !== 'creating') {
- openAccessDrawer(mode);
+ let drawerUrl = `/object-storage/access-keys/${objectStorageKey.id}`;
+
+ if (mode === 'editing') {
+ drawerUrl += `/update`;
+ }
+
+ if (mode === 'viewing') {
+ drawerUrl += `/details`;
}
+
+ navigate({ to: drawerUrl });
};
const openRevokeDialog = (objectStorageKey: ObjectStorageKey) => {
@@ -279,19 +117,18 @@ export const AccessKeyLanding = (props: Props) => {
};
return (
-
-
+ <>
+
+
+
{
pageSize={pagination.pageSize}
/>
- {isObjMultiClusterEnabled ? (
-
- ) : (
-
- )}
-
-
-
{
label={keyToRevoke?.label || ''}
numAccessKeys={data?.results || 0}
/>
-