({
'& svg': {
- borderRadius: theme.tokens.alias.Radius.Default,
+ borderRadius: theme.tokens.borderRadius.None,
color: theme.color.tagIcon,
height: 15,
width: 15,
@@ -85,7 +85,7 @@ export const StyledDeleteButton = styled(StyledLinkButton, {
? theme.tokens.color.Neutrals.White
: theme.tokens.color.Neutrals[100]
}`,
- borderRadius: theme.tokens.alias.Radius.Default,
+ borderRadius: theme.tokens.borderRadius.None,
borderTopRightRadius: 3,
height: 30,
margin: 0,
diff --git a/packages/manager/src/components/Tag/Tag.tsx b/packages/manager/src/components/Tag/Tag.tsx
index 0336fbe0d0f..b1dab233322 100644
--- a/packages/manager/src/components/Tag/Tag.tsx
+++ b/packages/manager/src/components/Tag/Tag.tsx
@@ -1,8 +1,9 @@
-import { truncateEnd } from '@linode/utilities';
import Close from '@mui/icons-material/Close';
import * as React from 'react';
import { useHistory } from 'react-router-dom';
+import { truncateEnd } from 'src/utilities/truncate';
+
import { StyledChip, StyledDeleteButton } from './Tag.styles';
import type { ChipProps } from '@linode/ui';
@@ -58,7 +59,7 @@ export const Tag = (props: TagProps) => {
if (closeMenu) {
closeMenu();
}
- history.push(`/search?query=tag:${label}`);
+ history.push(`/search/?query=tag:${label}`);
};
// If maxLength is set, truncate display to that length.
diff --git a/packages/manager/src/components/TagCell/AddTag.tsx b/packages/manager/src/components/TagCell/AddTag.tsx
index 0f42da8f29b..efa75c81202 100644
--- a/packages/manager/src/components/TagCell/AddTag.tsx
+++ b/packages/manager/src/components/TagCell/AddTag.tsx
@@ -1,12 +1,10 @@
-import {
- updateTagsSuggestionsData,
- useAllTagsQuery,
- useProfile,
-} from '@linode/queries';
import { Autocomplete } from '@linode/ui';
import { useQueryClient } from '@tanstack/react-query';
import * as React from 'react';
+import { useProfile } from 'src/queries/profile/profile';
+import { updateTagsSuggestionsData, useAllTagsQuery } from 'src/queries/tags';
+
interface AddTagProps {
addTag: (tag: string) => Promise
;
existingTags: string[];
@@ -31,9 +29,8 @@ export const AddTag = (props: AddTagProps) => {
const createTag =
!!accountTags &&
!!inputValue &&
- inputValue.trim() !== '' &&
!accountTags.some(
- (tag) => tag.label.toLowerCase() === inputValue.toLowerCase()
+ (tag) => tag.label.toLowerCase() == inputValue.toLowerCase()
);
const tagOptions: { displayLabel?: string; label: string }[] = [
diff --git a/packages/manager/src/components/TagCell/TagCell.tsx b/packages/manager/src/components/TagCell/TagCell.tsx
index 38b357df55e..140591b795d 100644
--- a/packages/manager/src/components/TagCell/TagCell.tsx
+++ b/packages/manager/src/components/TagCell/TagCell.tsx
@@ -241,7 +241,7 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
color: theme.tokens.color.Neutrals.White,
},
backgroundColor: theme.color.tagButtonBg,
- borderRadius: theme.tokens.alias.Radius.Default,
+ borderRadius: theme.tokens.borderRadius.None,
color: theme.color.tagIcon,
height: 30,
marginLeft: theme.spacing(0.5),
diff --git a/packages/manager/src/components/TagCell/TagDrawer.tsx b/packages/manager/src/components/TagCell/TagDrawer.tsx
index 8e0f33d10b9..a1830098a02 100644
--- a/packages/manager/src/components/TagCell/TagDrawer.tsx
+++ b/packages/manager/src/components/TagCell/TagDrawer.tsx
@@ -1,7 +1,7 @@
-import { Drawer } from '@linode/ui';
import * as React from 'react';
-import { NotFound } from '../NotFound';
+import { Drawer } from 'src/components/Drawer';
+
import { TagCell } from './TagCell';
export interface TagDrawerProps {
@@ -18,7 +18,6 @@ export const TagDrawer = (props: TagDrawerProps) => {
return (
{
])
);
});
-
- it('validates the input tag when the tag is empty', async () => {
- const onChangeMock = vi.fn();
-
- renderWithTheme();
-
- const input = screen.getByRole('combobox');
-
- await userEvent.type(input, ' ');
-
- const createOption = screen.getByText('Create " "');
- userEvent.click(createOption);
-
- await waitFor(() => {
- expect(screen.getByText('Tag cannot be an empty')).toBeInTheDocument();
- });
- });
-
- it('validates the input tag when the tag length is between 1 and 50 characters', async () => {
- const onChangeMock = vi.fn();
-
- renderWithTheme();
-
- const input = screen.getByRole('combobox');
-
- await userEvent.type(input, 'Ta');
-
- const createOption = screen.getByText('Create "Ta"');
- userEvent.click(createOption);
-
- expect(
- screen.queryByText('Length must be 1-50 characters')
- ).not.toBeInTheDocument();
-
- await waitFor(() =>
- expect(onChangeMock).toHaveBeenCalledWith([{ label: 'Ta', value: 'Ta' }])
- );
- });
});
diff --git a/packages/manager/src/components/TagsInput/TagsInput.tsx b/packages/manager/src/components/TagsInput/TagsInput.tsx
index b550d90a9a0..ae0c205148f 100644
--- a/packages/manager/src/components/TagsInput/TagsInput.tsx
+++ b/packages/manager/src/components/TagsInput/TagsInput.tsx
@@ -1,14 +1,11 @@
-import {
- updateTagsSuggestionsData,
- useAllTagsQuery,
- useProfile,
-} from '@linode/queries';
import { Autocomplete, Chip } from '@linode/ui';
import CloseIcon from '@mui/icons-material/Close';
import { useQueryClient } from '@tanstack/react-query';
import { concat } from 'ramda';
import * as React from 'react';
+import { useProfile } from 'src/queries/profile/profile';
+import { updateTagsSuggestionsData, useAllTagsQuery } from 'src/queries/tags';
import { getErrorMap } from 'src/utilities/errorUtils';
import type { APIError } from '@linode/api-v4/lib/types';
@@ -89,26 +86,13 @@ export const TagsInput = (props: TagsInputProps) => {
const newTag = { label: inputValue, value: inputValue };
const updatedSelectedTags = concat(value, [newTag]);
- const errors = [];
-
- inputValue = inputValue.trim();
-
- if (inputValue === '') {
- errors.push({
- field: 'label',
- reason: 'Tag cannot be an empty',
- });
- }
-
- if (inputValue.length < 1 || inputValue.length > 50) {
- errors.push({
- field: 'label',
- reason: 'Length must be 1-50 characters',
- });
- }
-
- if (errors.length > 0) {
- setErrors(errors);
+ if (inputValue.length < 3 || inputValue.length > 50) {
+ setErrors([
+ {
+ field: 'label',
+ reason: 'Length must be 3-50 characters',
+ },
+ ]);
} else {
setErrors([]);
onChange(updatedSelectedTags);
diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx
index dec2b1743dd..e878fa4db59 100644
--- a/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx
+++ b/packages/manager/src/components/TransferDisplay/TransferDisplay.tsx
@@ -1,7 +1,8 @@
import { Box, CircleProgress, StyledLinkButton, Typography } from '@linode/ui';
import * as React from 'react';
-import { useAccountNetworkTransfer, useRegionsQuery } from '@linode/queries';
+import { useAccountNetworkTransfer } from 'src/queries/account/transfer';
+import { useRegionsQuery } from 'src/queries/regions/regions';
import { StyledTransferDisplayContainer } from './TransferDisplay.styles';
import { TransferDisplayDialog } from './TransferDisplayDialog';
diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.test.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.test.tsx
index bc0254826fd..1c82bc0abe2 100644
--- a/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.test.tsx
+++ b/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.test.tsx
@@ -1,7 +1,7 @@
-import { regionFactory } from '@linode/utilities';
import { fireEvent } from '@testing-library/react';
import React from 'react';
+import { regionFactory } from 'src/factories';
import {
accountTransferFactory,
accountTransferNoResourceFactory,
diff --git a/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx b/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx
index 70727a373a0..d99221a5f9a 100644
--- a/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx
+++ b/packages/manager/src/components/TransferDisplay/TransferDisplayDialog.tsx
@@ -1,12 +1,11 @@
-import { useIsGeckoEnabled } from '@linode/shared';
import { Box, Dialog, Divider, Typography } from '@linode/ui';
import { styled } from '@mui/material/styles';
import { useTheme } from '@mui/material/styles';
import * as React from 'react';
import { Link } from 'src/components/Link';
-import { useFlags } from 'src/hooks/useFlags';
+import { useIsGeckoEnabled } from '../RegionSelect/RegionSelect.utils';
import { NETWORK_TRANSFER_USAGE_AND_COST_LINK } from './constants';
import { TransferDisplayDialogHeader } from './TransferDisplayDialogHeader';
import { TransferDisplayUsage } from './TransferDisplayUsage';
@@ -37,11 +36,7 @@ export const TransferDisplayDialog = React.memo(
regionTransferPools,
} = props;
const theme = useTheme();
- const flags = useFlags();
- const { isGeckoLAEnabled } = useIsGeckoEnabled(
- flags.gecko2?.enabled,
- flags.gecko2?.la
- );
+ const { isGeckoLAEnabled } = useIsGeckoEnabled();
const daysRemainingInMonth = getDaysRemaining();
const listOfOtherRegionTransferPools: string[] =
diff --git a/packages/manager/src/components/TransferDisplay/utils.test.tsx b/packages/manager/src/components/TransferDisplay/utils.test.tsx
index 61d5e8b1cce..6ec9b1eced7 100644
--- a/packages/manager/src/components/TransferDisplay/utils.test.tsx
+++ b/packages/manager/src/components/TransferDisplay/utils.test.tsx
@@ -1,9 +1,8 @@
+import { accountTransferFactory } from 'src/factories/account';
import {
regionFactory,
regionWithDynamicPricingFactory,
-} from '@linode/utilities';
-
-import { accountTransferFactory } from 'src/factories/account';
+} from 'src/factories/regions';
import {
calculatePoolUsagePct,
@@ -21,8 +20,7 @@ const mockRegions = [
regionWithDynamicPricingFactory.build(),
];
-vi.mock('@linode/queries', async (importOriginal) => ({
- ...(await importOriginal()),
+vi.mock('src/queries/regions/regions', () => ({
useRegionsQuery: vi.fn(() => mockRegions),
}));
diff --git a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.test.tsx b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.test.tsx
index 2c18dc04d40..3c3981192c0 100644
--- a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.test.tsx
+++ b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.test.tsx
@@ -4,7 +4,7 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
import { TypeToConfirm } from './TypeToConfirm';
-import type { ManagerPreferences } from '@linode/utilities';
+import type { ManagerPreferences } from 'src/types/ManagerPreferences';
const props = { onClick: vi.fn() };
@@ -14,8 +14,8 @@ const queryMocks = vi.hoisted(() => ({
usePreferences: vi.fn().mockReturnValue({}),
}));
-vi.mock('@linode/queries', async () => {
- const actual = await vi.importActual('@linode/queries');
+vi.mock('src/queries/profile/preferences', async () => {
+ const actual = await vi.importActual('src/queries/profile/preferences');
return {
...actual,
usePreferences: queryMocks.usePreferences,
diff --git a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx
index 7c4776725ab..10c109d3d22 100644
--- a/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx
+++ b/packages/manager/src/components/TypeToConfirm/TypeToConfirm.tsx
@@ -1,13 +1,13 @@
-import { usePreferences } from '@linode/queries';
import { Checkbox, FormControlLabel, TextField, Typography } from '@linode/ui';
import * as React from 'react';
import { FormGroup } from 'src/components/FormGroup';
import { Link } from 'src/components/Link';
+import { usePreferences } from 'src/queries/profile/preferences';
import type { TextFieldProps, TypographyProps } from '@linode/ui';
-import type { Theme } from '@mui/material';
import type { SxProps } from '@mui/material';
+import type { Theme } from '@mui/material';
export interface TypeToConfirmProps extends Omit {
confirmationText?: JSX.Element | string;
@@ -40,9 +40,9 @@ export const TypeToConfirm = (props: TypeToConfirmProps) => {
onChange,
textFieldStyle,
title,
- titleVariant,
typographyStyle,
typographyStyleSx,
+ titleVariant,
visible = false,
...rest
} = props;
diff --git a/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.test.tsx b/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.test.tsx
index 0001eb67445..b89326787d1 100644
--- a/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.test.tsx
+++ b/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.test.tsx
@@ -6,7 +6,7 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
import { TypeToConfirmDialog } from './TypeToConfirmDialog';
-import type { ManagerPreferences } from '@linode/utilities';
+import type { ManagerPreferences } from 'src/types/ManagerPreferences';
const props = { onClick: vi.fn(), onClose: vi.fn() };
@@ -16,8 +16,8 @@ const queryMocks = vi.hoisted(() => ({
usePreferences: vi.fn().mockReturnValue({}),
}));
-vi.mock('@linode/queries', async () => {
- const actual = await vi.importActual('@linode/queries');
+vi.mock('src/queries/profile/preferences', async () => {
+ const actual = await vi.importActual('src/queries/profile/preferences');
return {
...actual,
usePreferences: queryMocks.usePreferences,
diff --git a/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx b/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx
index c25a34e7e4d..da512017444 100644
--- a/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx
+++ b/packages/manager/src/components/TypeToConfirmDialog/TypeToConfirmDialog.tsx
@@ -1,13 +1,13 @@
-import { ActionsPanel } from '@linode/ui';
import { FormLabel } from '@mui/material';
import * as React from 'react';
+import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm';
-import { usePreferences } from '@linode/queries';
+import { usePreferences } from 'src/queries/profile/preferences';
import type { APIError } from '@linode/api-v4/lib/types';
-import type { ActionButtonsProps } from '@linode/ui';
+import type { ActionButtonsProps } from 'src/components/ActionsPanel/ActionsPanel';
import type { ConfirmationDialogProps } from 'src/components/ConfirmationDialog/ConfirmationDialog';
import type { TypeToConfirmProps } from 'src/components/TypeToConfirm/TypeToConfirm';
diff --git a/packages/manager/src/components/Uploaders/FileUpload.tsx b/packages/manager/src/components/Uploaders/FileUpload.tsx
index df304ebf8ef..c5969abd713 100644
--- a/packages/manager/src/components/Uploaders/FileUpload.tsx
+++ b/packages/manager/src/components/Uploaders/FileUpload.tsx
@@ -1,10 +1,10 @@
import { Button, Tooltip, Typography } from '@linode/ui';
-import { readableBytes } from '@linode/utilities';
import * as React from 'react';
import CautionIcon from 'src/assets/icons/caution.svg';
import FileUploadComplete from 'src/assets/icons/fileUploadComplete.svg';
import { LinearProgress } from 'src/components/LinearProgress';
+import { readableBytes } from 'src/utilities/unitConversions';
import {
StyledActionsContainer,
diff --git a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx
index 6759f3ccb8f..6c70707cd20 100644
--- a/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx
+++ b/packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx
@@ -1,5 +1,4 @@
import { Box, Button, Stack, Typography } from '@linode/ui';
-import { readableBytes } from '@linode/utilities';
import { styled } from '@mui/material';
import { Duration } from 'luxon';
import * as React from 'react';
@@ -7,6 +6,7 @@ import { useDropzone } from 'react-dropzone';
import { BarPercent } from 'src/components/BarPercent';
import { MAX_FILE_SIZE_IN_BYTES } from 'src/components/Uploaders/reducer';
+import { readableBytes } from 'src/utilities/unitConversions';
import type { AxiosProgressEvent } from 'axios';
import type { DropzoneProps } from 'react-dropzone';
diff --git a/packages/manager/src/components/Uploaders/ObjectUploader/ObjectUploader.tsx b/packages/manager/src/components/Uploaders/ObjectUploader/ObjectUploader.tsx
index cb17876ab02..40292f3ec98 100644
--- a/packages/manager/src/components/Uploaders/ObjectUploader/ObjectUploader.tsx
+++ b/packages/manager/src/components/Uploaders/ObjectUploader/ObjectUploader.tsx
@@ -1,6 +1,5 @@
import { getObjectURL } from '@linode/api-v4/lib/object-storage';
import { Button } from '@linode/ui';
-import { readableBytes } from '@linode/utilities';
import { useQueryClient } from '@tanstack/react-query';
import { useSnackbar } from 'notistack';
import * as React from 'react';
@@ -9,6 +8,7 @@ import { debounce } from 'throttle-debounce';
import { fetchBucketAndUpdateCache } from 'src/queries/object-storage/utilities';
import { sendObjectsQueuedForUploadEvent } from 'src/utilities/analytics/customEventAnalytics';
+import { readableBytes } from 'src/utilities/unitConversions';
import { uploadObject } from '../../../features/ObjectStorage/requests';
import { FileUpload } from '../FileUpload';
diff --git a/packages/manager/src/components/VLANSelect.tsx b/packages/manager/src/components/VLANSelect.tsx
index 00da2fbff28..d198b0150a8 100644
--- a/packages/manager/src/components/VLANSelect.tsx
+++ b/packages/manager/src/components/VLANSelect.tsx
@@ -1,8 +1,9 @@
-import { useVLANsInfiniteQuery } from '@linode/queries';
import { Autocomplete } from '@linode/ui';
-import { useDebouncedValue } from '@linode/utilities';
import React, { useEffect, useState } from 'react';
+import { useDebouncedValue } from 'src/hooks/useDebouncedValue';
+import { useVLANsInfiniteQuery } from 'src/queries/vlans';
+
import type { Filter } from '@linode/api-v4';
import type { SxProps, Theme } from '@mui/material';
@@ -20,10 +21,6 @@ interface Props {
* Default API filter
*/
filter?: Filter;
- /**
- * Helper text that will show below the select
- */
- helperText?: string;
/**
* Called when the field is blurred
*/
@@ -49,16 +46,7 @@ interface Props {
* - Allows VLAN creation
*/
export const VLANSelect = (props: Props) => {
- const {
- disabled,
- errorText,
- filter,
- helperText,
- onBlur,
- onChange,
- sx,
- value,
- } = props;
+ const { disabled, errorText, filter, onBlur, onChange, sx, value } = props;
const [open, setOpen] = React.useState(false);
const [inputValue, setInputValue] = useState('');
@@ -146,7 +134,6 @@ export const VLANSelect = (props: Props) => {
}}
disabled={disabled}
errorText={errorText ?? error?.[0].reason}
- helperText={helperText}
inputValue={selectedVLAN ? selectedVLAN.label : inputValue}
label="VLAN"
loading={isFetching}
diff --git a/packages/manager/src/constants.ts b/packages/manager/src/constants.ts
index c7a7d036033..9d110cf545d 100644
--- a/packages/manager/src/constants.ts
+++ b/packages/manager/src/constants.ts
@@ -15,15 +15,6 @@ export const ENABLE_DEV_TOOLS = getBooleanEnv(
export const ENABLE_MAINTENANCE_MODE =
import.meta.env.REACT_APP_ENABLE_MAINTENANCE_MODE === 'true';
-/**
- * Because Cloud Manager uses two different search implementations depending on the account's
- * size, we have this environment variable which allows us to force Cloud Manager to use
- * a desired implementation.
- *
- * @example REACT_APP_FORCE_SEARCH_TYPE=api
- */
-export const FORCE_SEARCH_TYPE = import.meta.env.REACT_APP_FORCE_SEARCH_TYPE;
-
/** required for the app to function */
export const APP_ROOT =
import.meta.env.REACT_APP_APP_ROOT || 'http://localhost:3000';
@@ -51,6 +42,11 @@ export const LINODE_STATUS_PAGE_URL =
import.meta.env.REACT_APP_STATUS_PAGE_URL ||
'https://status.linode.com/api/v2';
+// Maximum page size allowed by the API. Used in the `getAll()` helper function
+// to request as many items at once as possible.
+export const API_MAX_PAGE_SIZE =
+ Number(import.meta.env.REACT_APP_API_MAX_PAGE_SIZE) || 500;
+
// Having more of a single entity than this number classifies you as having
// a "large account".
export const LARGE_ACCOUNT_THRESHOLD = 1500;
diff --git a/packages/manager/src/containers/longview.container.ts b/packages/manager/src/containers/longview.container.ts
index 970e388bdf0..a6bc3c44ee3 100644
--- a/packages/manager/src/containers/longview.container.ts
+++ b/packages/manager/src/containers/longview.container.ts
@@ -1,19 +1,17 @@
-import { connect } from 'react-redux';
+import { Filter, Params } from '@linode/api-v4';
+import { LongviewClient } from '@linode/api-v4/lib/longview';
+import { InferableComponentEnhancerWithProps, connect } from 'react-redux';
+import { ApplicationState } from 'src/store';
+import { State } from 'src/store/longview/longview.reducer';
import {
deleteLongviewClient as _delete,
createLongviewClient as create,
getAllLongviewClients,
updateLongviewClient as update,
} from 'src/store/longview/longview.requests';
-
-import type { Filter, Params } from '@linode/api-v4';
-import type { LongviewClient } from '@linode/api-v4/lib/longview';
-import type { GetAllData } from '@linode/utilities';
-import type { InferableComponentEnhancerWithProps } from 'react-redux';
-import type { ApplicationState } from 'src/store';
-import type { State } from 'src/store/longview/longview.reducer';
-import type { ThunkDispatch } from 'src/store/types';
+import { ThunkDispatch } from 'src/store/types';
+import { GetAllData } from 'src/utilities/getAll';
export interface DispatchProps {
createLongviewClient: (label?: string) => Promise;
diff --git a/packages/manager/src/containers/profile.container.ts b/packages/manager/src/containers/profile.container.ts
index d31f4ac94e3..0ba0c0d0b29 100644
--- a/packages/manager/src/containers/profile.container.ts
+++ b/packages/manager/src/containers/profile.container.ts
@@ -3,7 +3,7 @@ import { APIError } from '@linode/api-v4/lib/types';
import * as React from 'react';
import { UseQueryResult } from '@tanstack/react-query';
-import { useGrants, useProfile } from '@linode/queries';
+import { useGrants, useProfile } from 'src/queries/profile/profile';
export interface WithProfileProps {
grants: UseQueryResult;
diff --git a/packages/manager/src/dev-tools/DesignTokensTool.tsx b/packages/manager/src/dev-tools/DesignTokensTool.tsx
deleted file mode 100644
index b54d77fa106..00000000000
--- a/packages/manager/src/dev-tools/DesignTokensTool.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import { ThemeProvider } from '@emotion/react';
-import {
- Box,
- CircleProgress,
- Notice,
- Select,
- Stack,
- Typography,
- light,
-} from '@linode/ui';
-import { capitalize } from '@linode/utilities';
-import * as React from 'react';
-
-import { DebouncedSearchTextField } from 'src/components/DebouncedSearchTextField';
-import { Link } from 'src/components/Link';
-import { SafeTabPanel } from 'src/components/Tabs/SafeTabPanel';
-import { Tab } from 'src/components/Tabs/Tab';
-import { TabList } from 'src/components/Tabs/TabList';
-import { TabPanels } from 'src/components/Tabs/TabPanels';
-import { Tabs } from 'src/components/Tabs/Tabs';
-import { themes } from 'src/utilities/theme';
-
-import { TokenSection } from './components/Tokens/TokenSection';
-import { countTokens, filterTokenObject } from './components/Tokens/utils';
-
-import type { ThemeName } from '@linode/ui';
-
-const _tokens = Object.entries(light.tokens ?? {});
-
-export type TokenObjects = typeof _tokens;
-export type TokenObject = TokenObjects[number][1];
-export type RecursiveTokenObject = {
- [key: string]: RecursiveTokenObject | string;
-};
-export type TokenCategory = keyof NonNullable;
-
-const TokenPanelContent = ({
- searchValue,
- tokenCategory,
- tokenObject,
-}: {
- searchValue: string;
- tokenCategory: TokenCategory;
- tokenObject: TokenObject;
-}) => {
- const [
- renderedContent,
- setRenderedContent,
- ] = React.useState(null);
- const [isSearching, setIsSearching] = React.useState(false);
-
- React.useEffect(() => {
- const computeTokens = async () => {
- setIsSearching(true);
- await new Promise((resolve) => setTimeout(resolve, 100));
-
- const filteredObject = searchValue
- ? filterTokenObject(tokenObject, searchValue.toLowerCase())
- : tokenObject;
-
- const totalResults = filteredObject ? countTokens(filteredObject) : 0;
-
- const content =
- totalResults > 0 ? (
-
- {Object.entries(filteredObject).map(([key, value], index) => (
-
- ))}
-
- ) : (
-
-
- No matching tokens found for "{searchValue}"
-
-
- );
- setRenderedContent(content);
- setIsSearching(false);
- };
-
- computeTokens();
- }, [tokenCategory, tokenObject, searchValue]);
-
- if (!renderedContent || isSearching) {
- return (
-
-
-
- );
- }
-
- return renderedContent;
-};
-
-export const DesignTokensTool = () => {
- const [selectedTheme, setSelectedTheme] = React.useState('light');
- const [selectedTab, setSelectedTab] = React.useState(0);
- const [isLoading, setIsLoading] = React.useState(false);
- const [searchValue, setSearchValue] = React.useState('');
-
- const handleThemeChange = React.useCallback(
- async (
- _e: React.SyntheticEvent,
- value: { value: ThemeName }
- ) => {
- setIsLoading(true);
- await new Promise((resolve) => setTimeout(resolve, 100));
-
- const newTokens = Object.entries(themes[value.value].tokens ?? {});
- setSelectedTheme(value.value);
- setIsLoading(false);
-
- return newTokens;
- },
- []
- );
-
- const filteredTokens = Object.entries(themes[selectedTheme].tokens ?? {});
- return (
-
- ({
- backgroundColor: theme.tokens.alias.Background.Normal,
- flex: 1,
- height: '100%',
- overflow: 'auto',
- position: 'absolute',
- width: '100%',
- })}
- className="dev-tools__design-tokens"
- >
- {isLoading ? (
-
-
-
- ) : (
-
-
-
-
- {filteredTokens.map(([tokenCategory, _tokenObject]) => (
-
- {capitalize(tokenCategory)}
-
- ))}
-
-
-
-
-
- {filteredTokens.map(([tokenCategory, tokenObject], index) => (
-
- {tokenCategory === 'color' && (
-
-
- Do not use theme.tokens.color directly in
- application code.
- These are global tokens which are not theme-sensitive
- and will not respond to theme changes (light/dark
- mode).
-
- See our{' '}
-
- Design Tokens
- {' '}
- usage guide for more information.
-
-
- )}
- {tokenCategory === 'spacing' && (
-
-
- See our{' '}
-
- Spacing Tokens
- {' '}
- usage guide to use the new spacing function replacing
- the deprecated MUI theme.spacing.
-
-
- )}
-
-
- ))}
-
-
-
- )}
-
-
- );
-};
diff --git a/packages/manager/src/dev-tools/DevTools.tsx b/packages/manager/src/dev-tools/DevTools.tsx
index 26bd0aa8c06..508a00e3a35 100644
--- a/packages/manager/src/dev-tools/DevTools.tsx
+++ b/packages/manager/src/dev-tools/DevTools.tsx
@@ -1,4 +1,3 @@
-import { getRoot } from '@linode/utilities';
import CloseIcon from '@mui/icons-material/Close';
import Handyman from '@mui/icons-material/Handyman';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
@@ -8,8 +7,9 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import React from 'react';
import { Provider } from 'react-redux';
+import { getRoot } from 'src/utilities/rootManager';
+
import { Draggable } from './components/Draggable';
-import { DesignTokensTool } from './DesignTokensTool';
import './dev-tools.css';
import { EnvironmentToggleTool } from './EnvironmentToggleTool';
import { FeatureFlagTool } from './FeatureFlagTool';
@@ -19,7 +19,7 @@ import { isMSWEnabled } from './utils';
import type { QueryClient } from '@tanstack/react-query';
import type { ApplicationStore } from 'src/store';
-export type DevToolsView = 'design-tokens' | 'mocks' | 'react-query';
+export type DevToolsView = 'mocks' | 'react-query';
const reactQueryDevtoolsStyle = {
border: '1px solid rgba(255, 255, 255, 0.25)',
@@ -42,10 +42,6 @@ export const install = (store: ApplicationStore, queryClient: QueryClient) => {
setView('mocks');
};
- const handleOpenDesignTokens = () => {
- setView('design-tokens');
- };
-
const handleDraggableToggle = () => {
setIsDraggable(!isDraggable);
if (isDraggable) {
@@ -89,28 +85,21 @@ export const install = (store: ApplicationStore, queryClient: QueryClient) => {
return (
{!isDraggable && (
-
)}
{isOpen && (
-
@@ -123,7 +112,7 @@ export const install = (store: ApplicationStore, queryClient: QueryClient) => {
-
-
@@ -176,7 +154,6 @@ export const install = (store: ApplicationStore, queryClient: QueryClient) => {
)}
- {view === 'design-tokens' && }