diff --git a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
index 2a8933ff543..95df7aad844 100644
--- a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
+++ b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx
@@ -1,11 +1,8 @@
-import { ManagedServicePayload } from '@linode/api-v4/lib/managed';
-import { APIError } from '@linode/api-v4/lib/types';
import Grid from '@mui/material/Unstable_Grid2';
-import { FormikBag } from 'formik';
import { useSnackbar } from 'notistack';
import * as React from 'react';
-import AddNewLink from 'src/components/AddNewLink';
+import { Button } from 'src/components/Button/Button';
import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
import { DocumentTitleSegment } from 'src/components/DocumentTitle';
import OrderBy from 'src/components/OrderBy';
@@ -41,6 +38,10 @@ import {
} from './MonitorTable.styles';
import MonitorTableContent from './MonitorTableContent';
+import type { ManagedServicePayload } from '@linode/api-v4/lib/managed';
+import type { APIError } from '@linode/api-v4/lib/types';
+import type { FormikBag } from 'formik';
+
export type Modes = 'create' | 'edit';
export type FormikProps = FormikBag<{}, ManagedServicePayload>;
@@ -180,10 +181,12 @@ export const MonitorTable = () => {
- setMonitorDrawerOpen(true)}
- />
+ >
+ Add Monitor
+
diff --git a/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx b/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx
index 1c971babe18..6630b7509c9 100644
--- a/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx
+++ b/packages/manager/src/features/NodeBalancers/ConfigNodeIPSelect.tsx
@@ -1,4 +1,3 @@
-import { Linode } from '@linode/api-v4/lib/linodes';
import { Box } from '@mui/material';
import * as React from 'react';
@@ -6,6 +5,7 @@ import { SelectedIcon } from 'src/components/Autocomplete/Autocomplete.styles';
import { LinodeSelect } from 'src/features/Linodes/LinodeSelect/LinodeSelect';
import { privateIPRegex } from 'src/utilities/ipUtils';
+import type { Linode } from '@linode/api-v4/lib/linodes';
import type { TextFieldProps } from 'src/components/TextField';
interface ConfigNodeIPSelectProps {
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx
new file mode 100644
index 00000000000..6ea897d87fa
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.test.tsx
@@ -0,0 +1,76 @@
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { NodeBalancerConfigNode } from './NodeBalancerConfigNode';
+
+import type { NodeBalancerConfigNodeProps } from './NodeBalancerConfigNode';
+
+const node = {
+ address: 'some address',
+ label: 'some label',
+};
+
+const props: NodeBalancerConfigNodeProps = {
+ configIdx: 1,
+ disabled: false,
+ forEdit: true,
+ idx: 1,
+ node,
+ onNodeAddressChange: vi.fn(),
+ onNodeLabelChange: vi.fn(),
+ onNodeModeChange: vi.fn(),
+ onNodePortChange: vi.fn(),
+ onNodeWeightChange: vi.fn(),
+ removeNode: vi.fn(),
+};
+
+describe('NodeBalancerConfigNode', () => {
+ it('renders the NodeBalancerConfigNode', () => {
+ const { getByLabelText, getByText, queryByText } = renderWithTheme(
+
-
- this.addNodeBalancerConfig()}
- >
- {configs.length === 0
- ? 'Add a Configuration'
- : 'Add Another Configuration'}
-
-
- )}
+ static defaultDeleteNodeConfirmDialogState = {
+ configIdxToDelete: undefined,
+ errors: undefined,
+ nodeIdxToDelete: undefined,
+ open: false,
+ submitting: false,
+ };
-
-
- Are you sure you want to delete this NodeBalancer Configuration?
-
-
-
- );
- }
+ static defaultFieldsStates = {
+ configs: [createNewNodeBalancerConfig(true)],
+ };
addNode = (configIdx: number) => () => {
this.setState(
@@ -343,26 +306,6 @@ class NodeBalancerConfigurations extends React.Component<
);
};
- static defaultDeleteConfigConfirmDialogState = {
- errors: undefined,
- idxToDelete: undefined,
- open: false,
- portToDelete: undefined,
- submitting: false,
- };
-
- static defaultDeleteNodeConfirmDialogState = {
- configIdxToDelete: undefined,
- errors: undefined,
- nodeIdxToDelete: undefined,
- open: false,
- submitting: false,
- };
-
- static defaultFieldsStates = {
- configs: [createNewNodeBalancerConfig(true)],
- };
-
deleteConfig = () => {
const {
deleteConfigConfirmDialog: { idxToDelete },
@@ -749,23 +692,6 @@ class NodeBalancerConfigurations extends React.Component<
);
};
- renderConfigConfirmationActions = ({ onClose }: { onClose: () => void }) => (
-
+
+ {Array.isArray(configs) &&
+ configs.map(
+ this.renderConfig(panelMessages, configErrors, configSubmitting)
+ )}
+
+ {!hasUnsavedConfig && (
+
+ this.addNodeBalancerConfig()}
+ >
+ {configs.length === 0
+ ? 'Add a Configuration'
+ : 'Add Another Configuration'}
+
+
+ )}
+
+
+ }
+ title={
+ typeof this.state.deleteConfigConfirmDialog.portToDelete !==
+ 'undefined'
+ ? `Delete this configuration on port ${this.state.deleteConfigConfirmDialog.portToDelete}?`
+ : 'Delete this configuration?'
+ }
+ error={this.confirmationConfigError()}
+ onClose={this.onCloseConfirmation}
+ open={this.state.deleteConfigConfirmDialog.open}
+ >
+
+ Are you sure you want to delete this NodeBalancer Configuration?
+
+
+
({
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
index 886043c757e..c951f4e1f8e 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerDetail.tsx
@@ -24,7 +24,7 @@ import { useGrants } from 'src/queries/profile/profile';
import { getErrorMap } from 'src/utilities/errorUtils';
import NodeBalancerConfigurations from './NodeBalancerConfigurations';
-import NodeBalancerSettings from './NodeBalancerSettings';
+import { NodeBalancerSettings } from './NodeBalancerSettings';
import { NodeBalancerSummary } from './NodeBalancerSummary/NodeBalancerSummary';
export const NodeBalancerDetail = () => {
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.test.tsx
new file mode 100644
index 00000000000..2d6747ef8a3
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerFirewalls.test.tsx
@@ -0,0 +1,111 @@
+import * as React from 'react';
+
+import { firewallFactory } from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { NodeBalancerFirewalls } from './NodeBalancerFirewalls';
+
+const firewall = firewallFactory.build({ label: 'mock-firewall-1' });
+
+// Set up various mocks for tests
+
+const queryMocks = vi.hoisted(() => ({
+ useNodeBalancersFirewallsQuery: vi.fn().mockReturnValue({ data: undefined }),
+}));
+
+vi.mock('src/queries/nodebalancers', async () => {
+ const actual = await vi.importActual('src/queries/nodebalancers');
+ return {
+ ...actual,
+ useNodeBalancersFirewallsQuery: queryMocks.useNodeBalancersFirewallsQuery,
+ };
+});
+
+const props = {
+ displayFirewallInfoText: false,
+ nodeBalancerId: 1,
+};
+
+describe('NodeBalancerFirewalls', () => {
+ beforeEach(() => {
+ queryMocks.useNodeBalancersFirewallsQuery.mockReturnValue({
+ data: { data: [firewall] },
+ isLoading: false,
+ });
+ });
+
+ afterEach(() => {
+ vi.resetAllMocks();
+ });
+
+ it('renders the Firewall table', () => {
+ const { getByText } = renderWithTheme(
setIsDeleteDialogOpen(true)}
>
@@ -155,5 +156,3 @@ export const NodeBalancerSettings = () => {
);
};
-
-export default NodeBalancerSettings;
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
index c13926a5156..24a13313f92 100644
--- a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/NodeBalancerSummary.tsx
@@ -1,5 +1,5 @@
-import Grid from '@mui/material/Unstable_Grid2';
import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
import * as React from 'react';
import { useParams } from 'react-router-dom';
diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.test.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.test.tsx
new file mode 100644
index 00000000000..42fceb03770
--- /dev/null
+++ b/packages/manager/src/features/NodeBalancers/NodeBalancerDetail/NodeBalancerSummary/SummaryPanel.test.tsx
@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+import {
+ firewallFactory,
+ nodeBalancerConfigFactory,
+ nodeBalancerFactory,
+} from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { SummaryPanel } from './SummaryPanel';
+
+// Set up various mocks for tests
+const queryMocks = vi.hoisted(() => ({
+ useAllNodeBalancerConfigsQuery: vi.fn().mockReturnValue({ data: undefined }),
+ useNodeBalancerQuery: vi.fn().mockReturnValue({ data: undefined }),
+ useNodeBalancersFirewallsQuery: vi.fn().mockReturnValue({ data: undefined }),
+}));
+
+vi.mock('src/queries/nodebalancers', async () => {
+ const actual = await vi.importActual('src/queries/nodebalancers');
+ return {
+ ...actual,
+ useAllNodeBalancerConfigsQuery: queryMocks.useAllNodeBalancerConfigsQuery,
+ useNodeBalancerQuery: queryMocks.useNodeBalancerQuery,
+ useNodeBalancersFirewallsQuery: queryMocks.useNodeBalancersFirewallsQuery,
+ };
+});
+
+const nodeBalancerDetails = 'NodeBalancer Details';
+
+describe('SummaryPanel', () => {
+ beforeEach(() => {
+ queryMocks.useAllNodeBalancerConfigsQuery.mockReturnValue({
+ data: nodeBalancerConfigFactory.buildList(2),
+ });
+ queryMocks.useNodeBalancerQuery.mockReturnValue({
+ data: nodeBalancerFactory.build(),
+ });
+ queryMocks.useNodeBalancersFirewallsQuery.mockReturnValue({
+ data: { data: [firewallFactory.build({ label: 'mock-firewall-1' })] },
+ });
+ });
+
+ afterEach(() => {
+ vi.resetAllMocks();
+ });
+
+ it('does not render anything if there is no nodebalancer', () => {
+ queryMocks.useAllNodeBalancerConfigsQuery.mockReturnValue({
+ data: undefined,
+ });
+ const { queryByText } = renderWithTheme(
{message}
{showProgress && (
diff --git a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
index 620151a4769..6820ce92683 100644
--- a/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
+++ b/packages/manager/src/features/NotificationCenter/NotificationCenter.styles.ts
@@ -4,10 +4,8 @@ import { makeStyles } from 'tss-react/mui';
import { Avatar } from 'src/components/Avatar/Avatar';
import { Box } from 'src/components/Box';
-import { GravatarByUsername } from 'src/components/GravatarByUsername';
import { Link } from 'src/components/Link';
import { Typography } from 'src/components/Typography';
-import { fadeIn } from 'src/styles/keyframes';
import { omittedProps } from 'src/utilities/omittedProps';
import type { NotificationCenterNotificationMessageProps } from './types';
@@ -120,16 +118,6 @@ export const NotificationEventStyledBox = styled(Box, {
width: '100%',
}));
-export const NotificationEventGravatar = styled(GravatarByUsername, {
- label: 'StyledGravatarByUsername',
-})(() => ({
- animation: `${fadeIn} .2s ease-in-out forwards`,
- height: 32,
- marginTop: 2,
- minWidth: 32,
- width: 32,
-}));
-
export const NotificationEventAvatar = styled(Avatar, {
label: 'StyledAvatar',
})(() => ({
diff --git a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketDetail.tsx b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketDetail.tsx
index a72be5b389b..ec2f91870a0 100644
--- a/packages/manager/src/features/ObjectStorage/BucketDetail/BucketDetail.tsx
+++ b/packages/manager/src/features/ObjectStorage/BucketDetail/BucketDetail.tsx
@@ -1,5 +1,5 @@
import { getObjectList, getObjectURL } from '@linode/api-v4/lib/object-storage';
-import { useQueryClient } from '@tanstack/react-query';
+import { InfiniteData, useQueryClient } from '@tanstack/react-query';
import produce from 'immer';
import { useSnackbar } from 'notistack';
import * as React from 'react';
@@ -21,14 +21,12 @@ import { OBJECT_STORAGE_DELIMITER } from 'src/constants';
import { useFlags } from 'src/hooks/useFlags';
import { useAccount } from 'src/queries/account/account';
import {
+ getObjectBucketObjectsQueryKey,
objectStorageQueries,
useObjectBucketObjectsInfiniteQuery,
useObjectStorageBuckets,
} from 'src/queries/object-storage/queries';
-import {
- fetchBucketAndUpdateCache,
- prefixToQueryKey,
-} from 'src/queries/object-storage/utilities';
+import { fetchBucketAndUpdateCache } from 'src/queries/object-storage/utilities';
import { isFeatureEnabledV2 } from 'src/utilities/accountCapabilities';
import { sendDownloadObjectEvent } from 'src/utilities/analytics/customEventAnalytics';
import { getQueryParamFromQueryString } from 'src/utilities/queryParams';
@@ -237,11 +235,7 @@ export const BucketDetail = (props: Props) => {
pageParams: string[];
pages: ObjectStorageObjectList[];
}>(
- [
- ...objectStorageQueries.bucket(clusterId, bucketName)._ctx.objects
- .queryKey,
- ...prefixToQueryKey(prefix),
- ],
+ getObjectBucketObjectsQueryKey(clusterId, bucketName, prefix),
(data) => ({
pageParams: data?.pageParams || [],
pages,
@@ -279,7 +273,11 @@ export const BucketDetail = (props: Props) => {
};
const addOneFile = (objectName: string, sizeInBytes: number) => {
- if (!data) {
+ const currentData = queryClient.getQueryData<
+ InfiniteData
+ >(getObjectBucketObjectsQueryKey(clusterId, bucketName, prefix));
+
+ if (!currentData) {
return;
}
@@ -291,13 +289,13 @@ export const BucketDetail = (props: Props) => {
size: sizeInBytes,
};
- for (let i = 0; i < data.pages.length; i++) {
- const foundObjectIndex = data.pages[i].data.findIndex(
+ for (let i = 0; i < currentData.pages.length; i++) {
+ const foundObjectIndex = currentData.pages[i].data.findIndex(
(_object) => _object.name === object.name
);
if (foundObjectIndex !== -1) {
- const copy = [...data.pages];
- const pageCopy = [...data.pages[i].data];
+ const copy = [...currentData.pages];
+ const pageCopy = [...currentData.pages[i].data];
pageCopy[foundObjectIndex] = object;
@@ -309,7 +307,7 @@ export const BucketDetail = (props: Props) => {
}
}
- const copy = [...data.pages];
+ const copy = [...currentData.pages];
const dataCopy = [...copy[copy.length - 1].data];
dataCopy.push(object);
@@ -322,7 +320,11 @@ export const BucketDetail = (props: Props) => {
};
const addOneFolder = (objectName: string) => {
- if (!data) {
+ const currentData = queryClient.getQueryData<
+ InfiniteData
+ >(getObjectBucketObjectsQueryKey(clusterId, bucketName, prefix));
+
+ if (!currentData) {
return;
}
@@ -334,7 +336,7 @@ export const BucketDetail = (props: Props) => {
size: null,
};
- for (const page of data.pages) {
+ for (const page of currentData.pages) {
if (page.data.find((object) => object.name === folder.name)) {
// If a folder already exists in the store, invalidate that store for that specific
// prefix. Due to how invalidateQueries works, all subdirectories also get invalidated.
@@ -349,7 +351,7 @@ export const BucketDetail = (props: Props) => {
}
}
- const copy = [...data.pages];
+ const copy = [...currentData.pages];
const dataCopy = [...copy[copy.length - 1].data];
dataCopy.push(folder);
diff --git a/packages/manager/src/features/OneClickApps/AppDetailDrawer.test.tsx b/packages/manager/src/features/OneClickApps/AppDetailDrawer.test.tsx
deleted file mode 100644
index 193e20874c8..00000000000
--- a/packages/manager/src/features/OneClickApps/AppDetailDrawer.test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react';
-
-import { renderWithTheme } from 'src/utilities/testHelpers';
-
-import AppDetailDrawer from './AppDetailDrawer';
-
-describe('AppDetailDrawer component', () => {
- it("should have a title ending in 'Cluster' if the app is a cluster", () => {
- const { queryByTestId } = renderWithTheme(
- {}}
- open={true}
- stackScriptLabel="Galera Cluster "
- />
- );
-
- const innerHTML = queryByTestId('app-name')?.innerHTML;
- expect(innerHTML).toBe('Galera Cluster');
- });
-
- it("should not have a title ending in 'Cluster' if the app is not a cluster", () => {
- const { queryByTestId } = renderWithTheme(
- {}}
- open={true}
- stackScriptLabel="Docker "
- />
- );
-
- const innerHTML = queryByTestId('app-name')?.innerHTML;
- expect(innerHTML).toBe('Docker');
- });
-
- it('should not logically break if the stackScriptLabel for a cluster does not have the expected spaces', () => {
- const { queryByTestId } = renderWithTheme(
- {}}
- open={true}
- stackScriptLabel="Galera Cluster"
- />
- );
-
- const innerHTML = queryByTestId('app-name')?.innerHTML;
- expect(innerHTML).toBe('Galera Cluster');
- });
-});
diff --git a/packages/manager/src/features/OneClickApps/AppDetailDrawer.tsx b/packages/manager/src/features/OneClickApps/AppDetailDrawer.tsx
deleted file mode 100644
index fab152f1a4d..00000000000
--- a/packages/manager/src/features/OneClickApps/AppDetailDrawer.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import Close from '@mui/icons-material/Close';
-import Drawer from '@mui/material/Drawer';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from 'tss-react/mui';
-import * as React from 'react';
-
-import { Box } from 'src/components/Box';
-import { Button } from 'src/components/Button/Button';
-import { Link } from 'src/components/Link';
-import { Typography } from 'src/components/Typography';
-import { useFlags } from 'src/hooks/useFlags';
-import { sanitizeHTML } from 'src/utilities/sanitizeHTML';
-
-import { oneClickApps } from './oneClickApps';
-import { mapStackScriptLabelToOCA } from './utils';
-
-import type { OCA } from './types';
-
-const useStyles = makeStyles()((theme: Theme) => ({
- appName: {
- color: '#fff !important',
- fontFamily: theme.font.bold,
- fontSize: '2.2rem',
- lineHeight: '2.5rem',
- textAlign: 'center',
- },
- button: {
- '& :hover, & :focus, & :active': {
- backgroundColor: 'unset !important',
- color: 'white',
- },
- backgroundColor: 'unset !important',
- borderRadius: '50%',
- color: 'white',
- margin: theme.spacing(2),
- minHeight: 'auto',
- minWidth: 'auto',
- padding: theme.spacing(2),
- position: 'absolute',
- },
- container: {
- display: 'flex',
- flexDirection: 'column',
- gap: theme.spacing(2),
- padding: theme.spacing(4),
- },
- description: {
- lineHeight: 1.5,
- marginBottom: theme.spacing(2),
- marginTop: theme.spacing(2),
- },
- image: {
- width: 50,
- },
- link: {
- fontSize: '0.875rem',
- lineHeight: '24px',
- wordBreak: 'break-word',
- },
- logoContainer: {
- gap: theme.spacing(),
- height: 225,
- padding: theme.spacing(2),
- },
- paper: {
- [theme.breakpoints.up('sm')]: {
- width: 480,
- },
- },
- wrapAppName: {
- maxWidth: 'fit-content',
- minWidth: 170,
- },
- wrapLogo: {
- marginLeft: `-${theme.spacing(3)}`,
- },
-}));
-
-interface Props {
- onClose: () => void;
- open: boolean;
- stackScriptLabel: string;
-}
-
-export const AppDetailDrawer: React.FunctionComponent = (props) => {
- const { onClose, open, stackScriptLabel } = props;
- const { classes } = useStyles();
- const { oneClickAppsDocsOverride } = useFlags();
-
- const [selectedApp, setSelectedApp] = React.useState(null);
-
- const gradient = {
- backgroundImage: `url(/assets/marketplace-background.png),linear-gradient(to right, #${selectedApp?.colors.start}, #${selectedApp?.colors.end})`,
- };
-
- React.useEffect(() => {
- const app = mapStackScriptLabelToOCA({
- oneClickApps,
- stackScriptLabel,
- });
-
- if (!app) {
- return;
- }
-
- setSelectedApp(app);
-
- return () => {
- setSelectedApp(null);
- };
- }, [stackScriptLabel]);
-
- return (
-
-
-
-
-
- {selectedApp ? (
- <>
-
-
-
-
- {selectedApp.summary}
-
- {selectedApp.website ? (
-
- Website
-
- ) : null}
- {selectedApp.related_guides ? (
-
- Guides
-
- {(
- oneClickAppsDocsOverride?.[selectedApp.name] ??
- selectedApp.related_guides
- ).map((link, idx) => (
-
-
- ) : null}
- {selectedApp.tips ? (
-
- Tips
-
- {selectedApp.tips.map((tip, idx) => (
-
- {tip}
-
- ))}
-
-
- ) : null}
-
-
- ) : (
-
- App Details Not Found
-
- We were unable to load the details of this app.
-
-
- Exit
-
-
- )}
-
- );
-};
-
-// remove this when we make the svgs white via css
-const REUSE_WHITE_ICONS = {
- 'mongodbmarketplaceocc.svg': 'mongodb.svg',
- 'postgresqlmarketplaceocc.svg': 'postgresql.svg',
- 'redissentinelmarketplaceocc.svg': 'redis.svg',
-};
-
-export default AppDetailDrawer;
diff --git a/packages/manager/src/features/OneClickApps/index.tsx b/packages/manager/src/features/OneClickApps/index.tsx
deleted file mode 100644
index d910f9ab161..00000000000
--- a/packages/manager/src/features/OneClickApps/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { default as AppDetailDrawer } from './AppDetailDrawer';
diff --git a/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts b/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts
index 4dbb5d87fc9..61094ec2475 100644
--- a/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts
+++ b/packages/manager/src/features/OneClickApps/oneClickAppsv2.ts
@@ -1,5 +1,3 @@
-import { oneClickAppFactory } from 'src/factories/stackscripts';
-
import type { OCA } from './types';
/**
@@ -9,10 +7,6 @@ import type { OCA } from './types';
* for it to be visible to users.
*/
export const oneClickApps: Record = {
- 0: oneClickAppFactory.build({
- isNew: true,
- name: 'E2E Test App',
- }),
401697: {
alt_description: 'Popular website content management system.',
alt_name: 'CMS: content management system',
@@ -2606,7 +2600,7 @@ export const oneClickApps: Record = {
related_guides: [
{
href:
- 'https://www.linode.com/docs/marketplace-docs/guides/apache-spark/',
+ 'https://www.linode.com/docs/marketplace-docs/guides/apache-spark-cluster/',
title: 'Deploy Apache Spark through the Linode Marketplace',
},
],
diff --git a/packages/manager/src/features/OneClickApps/utils.test.ts b/packages/manager/src/features/OneClickApps/utils.test.ts
deleted file mode 100644
index 1f9809436f6..00000000000
--- a/packages/manager/src/features/OneClickApps/utils.test.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { oneClickAppFactory } from 'src/factories/stackscripts';
-
-import { mapStackScriptLabelToOCA } from './utils';
-
-describe('mapStackScriptLabelToOneClickAppName', () => {
- const onClickApp = oneClickAppFactory.build();
-
- it('should return undefined if no match is found', () => {
- const result = mapStackScriptLabelToOCA({
- oneClickApps: [],
- stackScriptLabel: '',
- });
-
- expect(result).toBeUndefined();
- });
-
- it('should return the matching app', () => {
- const result = mapStackScriptLabelToOCA({
- oneClickApps: [onClickApp],
- stackScriptLabel: 'Test App',
- });
-
- expect(result).toBeDefined();
- });
-
- it('should return the matching app when the StackScript label contains unexpected characters', () => {
- const onClickAppWithUnexpectedCharacters = oneClickAppFactory.build({
- name: 'Test @App ®',
- });
-
- const result = mapStackScriptLabelToOCA({
- oneClickApps: [onClickAppWithUnexpectedCharacters],
- stackScriptLabel: 'Test App',
- });
-
- expect(result).toBeDefined();
- });
-});
diff --git a/packages/manager/src/features/OneClickApps/utils.ts b/packages/manager/src/features/OneClickApps/utils.ts
deleted file mode 100644
index 302ad6cd953..00000000000
--- a/packages/manager/src/features/OneClickApps/utils.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { OCA } from './types';
-
-const OCA_MAPPING_REGEX = /[^A-Za-z0-9\s\/$*+\-?&.:()]/g;
-
-interface Options {
- oneClickApps: OCA[];
- stackScriptLabel: string;
-}
-
-/**
- * Given a StackScript label, return the corresponding One-Click App name
- * @param oneClickApps
- * @param stackScriptLabel
- * @returns {string}
- */
-export const mapStackScriptLabelToOCA = ({
- oneClickApps,
- stackScriptLabel,
-}: Options): OCA | undefined => {
- return oneClickApps.find((app) => {
- const cleanedStackScriptLabel = stackScriptLabel
- .replace(OCA_MAPPING_REGEX, '')
- .trim();
-
- const cleanedAppName = app.name
- .replace('®', '')
- .replace(OCA_MAPPING_REGEX, '')
- .trim();
-
- return cleanedStackScriptLabel === cleanedAppName;
- });
-};
diff --git a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx
index 124ffd92732..96de8bb2306 100644
--- a/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx
+++ b/packages/manager/src/features/Profile/APITokens/CreateAPITokenDrawer.test.tsx
@@ -32,16 +32,16 @@ const props = {
describe('Create API Token Drawer', () => {
it('checks API Token Drawer rendering', () => {
- const { getByTestId, getByText } = renderWithTheme(
+ const { getAllByTestId, getByTestId, getByText } = renderWithTheme(
) => {
- form.setFieldValue('expiry', e.value);
- };
-
// Permission scopes with a different default when Selecting All for the specified access level.
const excludedScopesFromSelectAll: ExcludedScope[] = [
{
@@ -214,11 +211,30 @@ export const CreateAPITokenDrawer = (props: Props) => {
value={form.values.label}
/>
-
+ form.setFieldValue('expiry', selected.value)
+ }
+ slotProps={{
+ popper: {
+ sx: {
+ '&& .MuiAutocomplete-listbox': {
+ padding: 0,
+ },
+ },
+ },
+ }}
+ sx={{
+ '&& .MuiAutocomplete-inputRoot': {
+ paddingLeft: 1,
+ paddingRight: 0,
+ },
+ '&& .MuiInput-input': {
+ padding: '0px 2px',
+ },
+ }}
+ disableClearable
label="Expiry"
- name="expiry"
- onChange={handleExpiryChange}
options={expiryList}
value={expiryList.find((item) => item.value === form.values.expiry)}
/>
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
index 4a05ca75936..d6caaa14b50 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
@@ -1,10 +1,11 @@
import { styled } from '@mui/material/styles';
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
import { Box } from 'src/components/Box';
-import Select from 'src/components/EnhancedSelect/Select';
+import { FormHelperText } from 'src/components/FormHelperText';
import { TextField } from 'src/components/TextField';
import { Typography } from 'src/components/Typography';
-import { FormHelperText } from 'src/components/FormHelperText';
+import { omittedProps } from 'src/utilities/omittedProps';
export const StyledCodeSentMessageBox = styled(Box, {
label: 'StyledCodeSentMessageBox',
@@ -19,18 +20,22 @@ export const StyledPhoneNumberTitle = styled(Typography, {
marginTop: theme.spacing(1.5),
}));
-export const StyledButtonContainer = styled(Box, {
- label: 'StyledButtonContainer',
+export const StyledLabel = styled(Typography, {
+ label: 'StyledLabel',
})(({ theme }) => ({
- gap: theme.spacing(),
- [theme.breakpoints.down('md')]: {
- marginTop: theme.spacing(2),
- },
+ color: theme.name === 'light' ? '#555' : '#c9cacb',
+ fontSize: '.875rem',
+ lineHeight: '1',
+ marginBottom: '8px',
+ marginTop: theme.spacing(2),
+ padding: 0,
}));
export const StyledInputContainer = styled(Box, {
label: 'StyledInputContainer',
+ shouldForwardProp: omittedProps(['isPhoneInputFocused']),
})<{ isPhoneInputFocused: boolean }>(({ isPhoneInputFocused, theme }) => ({
+ backgroundColor: theme.name === 'dark' ? '#343438' : undefined,
border: theme.name === 'light' ? '1px solid #ccc' : '1px solid #222',
transition: 'border-color 225ms ease-in-out',
width: 'fit-content',
@@ -46,28 +51,31 @@ export const StyledInputContainer = styled(Box, {
})),
}));
-export const StyledPhoneNumberInput = styled(TextField, {
- label: 'StyledPhoneNumberInput',
-})(() => ({
- '&.Mui-focused': {
+export const StyledISOCodeSelect = styled(Autocomplete, {
+ label: 'StyledISOCodeSelect',
+})(({ theme }) => ({
+ '& div.Mui-focused': {
borderColor: 'unset',
boxShadow: 'none',
},
+ '& div.MuiAutocomplete-inputRoot': {
+ border: 'unset',
+ },
+ '&& .MuiInputBase-root svg': {
+ color: `${theme.palette.primary.main}`,
+ opacity: '1',
+ },
'&:focus': {
borderColor: 'unset',
boxShadow: 'unset',
},
- border: 'unset',
- minWidth: '300px',
+ height: '34px',
+ width: '70px !important',
}));
-export const StyledSelect = styled(Select, {
- label: 'StyledSelect',
-})(({ theme }) => ({
- '& .MuiInputBase-input .react-select__indicators svg': {
- color: `${theme.palette.primary.main} !important`,
- opacity: '1 !important',
- },
+export const StyledPhoneNumberInput = styled(TextField, {
+ label: 'StyledPhoneNumberInput',
+})(() => ({
'&.Mui-focused': {
borderColor: 'unset',
boxShadow: 'none',
@@ -77,19 +85,7 @@ export const StyledSelect = styled(Select, {
boxShadow: 'unset',
},
border: 'unset',
- height: '34px',
- width: '70px !important',
-}));
-
-export const StyledLabel = styled(Typography, {
- label: 'StyledLabel',
-})(({ theme }) => ({
- color: theme.name === 'light' ? '#555' : '#c9cacb',
- fontSize: '.875rem',
- lineHeight: '1',
- marginBottom: '8px',
- marginTop: theme.spacing(2),
- padding: 0,
+ minWidth: '300px',
}));
export const StyledFormHelperText = styled(FormHelperText, {
@@ -102,3 +98,12 @@ export const StyledFormHelperText = styled(FormHelperText, {
top: 42,
width: '100%',
}));
+
+export const StyledButtonContainer = styled(Box, {
+ label: 'StyledButtonContainer',
+})(({ theme }) => ({
+ gap: theme.spacing(),
+ [theme.breakpoints.down('md')]: {
+ marginTop: theme.spacing(2),
+ },
+}));
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
index c22efc95617..c0d5334bc02 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx
@@ -1,9 +1,8 @@
-import { APIError } from '@linode/api-v4/lib/types';
+import { useQueryClient } from '@tanstack/react-query';
import { useFormik } from 'formik';
-import { CountryCode, parsePhoneNumber } from 'libphonenumber-js';
+import { parsePhoneNumber } from 'libphonenumber-js';
import { useSnackbar } from 'notistack';
import * as React from 'react';
-import { useQueryClient } from '@tanstack/react-query';
import { Box } from 'src/components/Box';
import { Button } from 'src/components/Button/Button';
@@ -19,24 +18,30 @@ import {
useVerifyPhoneVerificationCodeMutation,
} from 'src/queries/profile/profile';
+import { countries } from './countries';
+import { getCountryFlag, getCountryName, getFormattedNumber } from './helpers';
import {
StyledButtonContainer,
StyledCodeSentMessageBox,
StyledFormHelperText,
+ StyledISOCodeSelect,
StyledInputContainer,
StyledLabel,
StyledPhoneNumberInput,
StyledPhoneNumberTitle,
- StyledSelect,
} from './PhoneVerification.styles';
-import { countries } from './countries';
-import { getCountryFlag, getCountryName, getFormattedNumber } from './helpers';
import type {
SendPhoneVerificationCodePayload,
VerifyVerificationCodePayload,
} from '@linode/api-v4/lib/profile/types';
-import type { Item } from 'src/components/EnhancedSelect/Select';
+import type { APIError } from '@linode/api-v4/lib/types';
+import type { CountryCode } from 'libphonenumber-js';
+
+export interface SelectPhoneVerificationOption {
+ label: string;
+ value: string;
+}
export const PhoneVerification = ({
phoneNumberRef,
@@ -67,18 +72,22 @@ export const PhoneVerification = ({
mutateAsync: sendPhoneVerificationCode,
reset: resetSendCodeMutation,
} = useSendPhoneVerificationCodeMutation();
+
const {
error: verifyError,
mutateAsync: sendVerificationCode,
reset: resetCodeMutation,
} = useVerifyPhoneVerificationCodeMutation();
+
const isCodeSent = data !== undefined;
+
const onSubmitPhoneNumber = async (
values: SendPhoneVerificationCodePayload
) => {
resetCodeMutation();
return await sendPhoneVerificationCode(values);
};
+
const onSubmitVerificationCode = async (
values: VerifyVerificationCodePayload
) => {
@@ -166,22 +175,10 @@ export const PhoneVerification = ({
);
};
- const customStyles = {
- menu: () => ({
- marginLeft: '-1px !important',
- marginTop: '0px !important',
- width: '500px',
- }),
- singleValue: (provided: React.CSSProperties) =>
- ({
- ...provided,
- fontSize: '20px',
- textAlign: 'center',
- } as const),
- };
const selectedCountry = countries.find(
(country) => country.code === sendCodeForm.values.iso_code
);
+
const isFormSubmitting = isCodeSent
? verifyCodeForm.isSubmitting
: sendCodeForm.isSubmitting;
@@ -204,6 +201,7 @@ export const PhoneVerification = ({