Skip to content

Commit

Permalink
feat: [UIE-8074] - DBaaS GA Summary tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@corya-akamai
corya-akamai committed Oct 11, 2024
1 parent 150d2e5 commit ed86113
Show file tree
Hide file tree
Showing 10 changed files with 1,354 additions and 306 deletions.
216 changes: 216 additions & 0 deletions ...es/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
import { Database } from '@linode/api-v4';
import { waitFor } from '@testing-library/react';
import * as React from 'react';
import { databaseFactory } from 'src/factories';
import { renderWithTheme } from 'src/utilities/testHelpers';
import { vi } from 'vitest';
import * as utils from '../../utilities';
import { DatabaseSummary } from './DatabaseSummary';

const CLUSTER_CONFIGURATION = 'Cluster Configuration';
const THREE_NODE = 'Primary +2 replicas';
const TWO_NODE = 'Primary +1 replicas';
const VERSION = 'Version';

const CONNECTION_DETAILS = 'Connection Details';
const PRIVATE_NETWORK_HOST = 'Private Network Host';
const PRIVATE_NETWORK_HOST_LABEL = 'private network host';
const READONLY_HOST_LABEL = 'read-only host';
const GA_READONLY_HOST_LABEL = 'Read-only Host';

const ACCESS_CONTROLS = 'Access Controls';

const DEFAULT_PLATFORM = 'rdbms-default';
const DEFAULT_PRIMARY = 'db-mysql-default-primary.net';
const DEFAULT_STANDBY = 'db-mysql-default-standby.net';

const LEGACY_PLATFORM = 'rdbms-legacy';
const LEGACY_PRIMARY = 'db-mysql-legacy-primary.net';
const LEGACY_SECONDARY = 'db-mysql-legacy-secondary.net';

const spy = vi.spyOn(utils, 'useIsDatabasesEnabled');
spy.mockReturnValue({
isDatabasesEnabled: true,
isDatabasesV1Enabled: true,
isDatabasesV2Enabled: true,
isDatabasesV2Beta: false,
isV2ExistingBetaUser: false,
isV2NewBetaUser: false,
isDatabasesGAEnabled: true,
isV2GAUser: true,
});

describe('Database Summary', () => {
it('should render V2GA view default db', async () => {
const database = databaseFactory.build({
platform: DEFAULT_PLATFORM,
cluster_size: 2,
hosts: {
primary: DEFAULT_PRIMARY,
standby: DEFAULT_STANDBY,
},
}) as Database;

const { queryAllByText } = renderWithTheme(
<DatabaseSummary database={database} />
);

await waitFor(() => {
expect(queryAllByText(CLUSTER_CONFIGURATION)).toHaveLength(1);
expect(queryAllByText(TWO_NODE)).toHaveLength(1);
expect(queryAllByText(VERSION)).toHaveLength(0);

expect(queryAllByText(CONNECTION_DETAILS)).toHaveLength(1);
expect(queryAllByText(PRIVATE_NETWORK_HOST)).toHaveLength(0);
expect(queryAllByText(GA_READONLY_HOST_LABEL)).toHaveLength(1);
expect(queryAllByText(DEFAULT_STANDBY)).toHaveLength(1);

expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(0);
});
});

it('should render V2GA view legacy db', async () => {
const database = databaseFactory.build({
platform: LEGACY_PLATFORM,
cluster_size: 3,
hosts: {
primary: LEGACY_PRIMARY,
secondary: LEGACY_SECONDARY,
},
}) as Database;

const { queryAllByText } = renderWithTheme(
<DatabaseSummary database={database} />
);

await waitFor(() => {
expect(queryAllByText(CLUSTER_CONFIGURATION)).toHaveLength(1);
expect(queryAllByText(THREE_NODE)).toHaveLength(1);
expect(queryAllByText(VERSION)).toHaveLength(0);

expect(queryAllByText(CONNECTION_DETAILS)).toHaveLength(1);
expect(queryAllByText(PRIVATE_NETWORK_HOST)).toHaveLength(1);
expect(queryAllByText(GA_READONLY_HOST_LABEL)).toHaveLength(0);
expect(queryAllByText(LEGACY_SECONDARY)).toHaveLength(1);

expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(0);
});
});

it('should render Beta view default db', async () => {
spy.mockReturnValue({
isDatabasesEnabled: true,
isDatabasesV1Enabled: true,
isDatabasesV2Enabled: true,
isDatabasesV2Beta: true,
isV2ExistingBetaUser: true,
isV2NewBetaUser: false,
isDatabasesGAEnabled: false,
isV2GAUser: false,
});
const database = databaseFactory.build({
platform: DEFAULT_PLATFORM,
cluster_size: 2,
hosts: {
primary: DEFAULT_PRIMARY,
standby: DEFAULT_STANDBY,
secondary: undefined,
},
}) as Database;

const { queryAllByText } = renderWithTheme(
<DatabaseSummary database={database} />
);

await waitFor(() => {
expect(queryAllByText(CLUSTER_CONFIGURATION)).toHaveLength(1);
expect(queryAllByText(TWO_NODE)).toHaveLength(1);
expect(queryAllByText(VERSION)).toHaveLength(1);

expect(queryAllByText(CONNECTION_DETAILS)).toHaveLength(1);
expect(queryAllByText(PRIVATE_NETWORK_HOST_LABEL)).toHaveLength(0);
expect(queryAllByText(READONLY_HOST_LABEL)).toHaveLength(1);
expect(queryAllByText(/db-mysql-default-standby.net/)).toHaveLength(1);

expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(1);
});
});

it('should render Beta view legacy db', async () => {
spy.mockReturnValue({
isDatabasesEnabled: true,
isDatabasesV1Enabled: true,
isDatabasesV2Enabled: true,
isDatabasesV2Beta: true,
isV2ExistingBetaUser: true,
isV2NewBetaUser: false,
isDatabasesGAEnabled: false,
isV2GAUser: false,
});
const database = databaseFactory.build({
platform: LEGACY_PLATFORM,
cluster_size: 3,
hosts: {
primary: LEGACY_PRIMARY,
secondary: LEGACY_SECONDARY,
standby: undefined,
},
}) as Database;

const { queryAllByText } = renderWithTheme(
<DatabaseSummary database={database} />
);

await waitFor(() => {
expect(queryAllByText(CLUSTER_CONFIGURATION)).toHaveLength(1);
expect(queryAllByText(THREE_NODE)).toHaveLength(1);
expect(queryAllByText(VERSION)).toHaveLength(1);

expect(queryAllByText(CONNECTION_DETAILS)).toHaveLength(1);
expect(queryAllByText(PRIVATE_NETWORK_HOST_LABEL)).toHaveLength(1);
expect(queryAllByText(READONLY_HOST_LABEL)).toHaveLength(0);
expect(queryAllByText(/db-mysql-legacy-secondary.net/)).toHaveLength(1);

expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(1);
});
});

it('should render V1 view legacy db', async () => {
spy.mockReturnValue({
isDatabasesEnabled: true,
isDatabasesV1Enabled: true,
isDatabasesV2Enabled: false,
isDatabasesV2Beta: false,
isV2ExistingBetaUser: false,
isV2NewBetaUser: false,
isDatabasesGAEnabled: false,
isV2GAUser: false,
});
const database = databaseFactory.build({
platform: LEGACY_PLATFORM,
cluster_size: 3,
hosts: {
primary: LEGACY_PRIMARY,
secondary: LEGACY_SECONDARY,
standby: undefined,
},
}) as Database;

const { queryAllByText } = renderWithTheme(
<DatabaseSummary database={database} />
);

await waitFor(() => {
expect(queryAllByText(CLUSTER_CONFIGURATION)).toHaveLength(1);
expect(queryAllByText(THREE_NODE)).toHaveLength(1);
expect(queryAllByText(VERSION)).toHaveLength(1);

expect(queryAllByText(CONNECTION_DETAILS)).toHaveLength(1);
expect(queryAllByText(PRIVATE_NETWORK_HOST_LABEL)).toHaveLength(1);
expect(queryAllByText(READONLY_HOST_LABEL)).toHaveLength(0);
expect(queryAllByText(/db-mysql-legacy-secondary.net/)).toHaveLength(1);

expect(queryAllByText(ACCESS_CONTROLS)).toHaveLength(1);
});
});
});
51 changes: 34 additions & 17 deletions packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import type { Database } from '@linode/api-v4/lib/databases/types';
import Grid from '@mui/material/Unstable_Grid2';
import * as React from 'react';

import { Divider } from 'src/components/Divider';
import { Link } from 'src/components/Link';
import { Paper } from 'src/components/Paper';
import { Typography } from 'src/components/Typography';

import AccessControls from '../AccessControls';
import ClusterConfiguration from './DatabaseSummaryClusterConfiguration';
import ConnectionDetails from './DatabaseSummaryConnectionDetails';

import type { Database } from '@linode/api-v4/lib/databases/types';
import AccessControls from 'src/features/Databases/DatabaseDetail/AccessControls';
import ClusterConfiguration from 'src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration';
import ConnectionDetails from 'src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails';
import ClusterConfigurationLegacy from 'src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryClusterConfigurationLegacy';
import ConnectionDetailsLegacy from 'src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy';
import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';

interface Props {
database: Database;
Expand All @@ -19,6 +19,7 @@ interface Props {

export const DatabaseSummary: React.FC<Props> = (props) => {
const { database, disabled } = props;
const { isV2GAUser } = useIsDatabasesEnabled();

const description = (
<>
Expand All @@ -40,19 +41,35 @@ export const DatabaseSummary: React.FC<Props> = (props) => {
return (
<Paper>
<Grid container spacing={2}>
<Grid md={4} sm={12}>
<ClusterConfiguration database={database} />
<Grid md={isV2GAUser ? 12 : 4} sm={12}>
{isV2GAUser ? (
<ClusterConfiguration database={database} />
) : (
// Deprecated @since DBaaS V2 GA. Will be removed remove post GA release ~ Dec 2024
<ClusterConfigurationLegacy database={database} />
)}
</Grid>
<Grid md={8} sm={12}>
<ConnectionDetails database={database} />
<Grid md={isV2GAUser ? 12 : 8} sm={12}>
{isV2GAUser ? (
<ConnectionDetails database={database} />
) : (
// Deprecated @since DBaaS V2 GA. Will be removed remove post GA release ~ Dec 2024
<ConnectionDetailsLegacy database={database} />
)}
</Grid>
</Grid>
<Divider spacingBottom={16} spacingTop={28} />
<AccessControls
database={database}
description={description}
disabled={disabled}
/>
{!isV2GAUser && (
// Deprecated @since DBaaS V2 GA. Will be removed remove post GA release ~ Dec 2024
// AccessControls accessible through dropdown menu on landing page table and on settings tab
<>
<Divider spacingBottom={16} spacingTop={28} />
<AccessControls
database={database}
description={description}
disabled={disabled}
/>
</>
)}
</Paper>
);
};
Expand Down
18 changes: 0 additions & 18 deletions ...r/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryAccessControls.tsx
View file

This file was deleted.

61 changes: 61 additions & 0 deletions ...res/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryClusterConfiguration.style.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { styled } from '@mui/material/styles';
import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
import { Box } from 'src/components/Box';
import { Typography } from 'src/components/Typography';

export const StyledGridContainer = styled(Grid2, {
label: 'StyledGridContainer',
})(({ theme }) => ({
'&>*:nth-of-type(even)': {
boxShadow: `inset 0px -1px 0px 0 ${
theme.palette.mode === 'dark'
? theme.color.white
: theme.palette.grey[200]
}`,
},
'&>*:nth-of-type(odd)': {
boxShadow: `inset 0px -1px 0px 0 ${theme.color.white}`,
marginBottom: '1px',
},
boxShadow: `inset 0 -1px 0 0 ${
theme.palette.mode === 'dark' ? theme.color.white : theme.palette.grey[200]
}, inset 0 1px 0 0 ${
theme.palette.mode === 'dark' ? theme.color.white : theme.palette.grey[200]
}, inset -1px 0 0 ${
theme.palette.mode === 'dark' ? theme.color.white : theme.palette.grey[200]
}`,
}));

export const StyledLabelTypography = styled(Typography, {
label: 'StyledLabelTypography',
})(({ theme }) => ({
background:
theme.palette.mode === 'dark'
? theme.bg.tableHeader
: theme.palette.grey[200],
color: theme.palette.mode === 'dark' ? theme.color.grey6 : 'inherit',
fontFamily: theme.font.bold,
height: '100%',
padding: '4px 15px',
}));

export const StyledValueBox = styled(Box, {
label: 'StyledValueBox',
})(({ theme }) => ({
'& > button': {
marginTop: '-5px',
},
'& > div': {
alignSelf: 'flex-start',
verticalAlign: 'sub',
},
'& button.MuiButtonBase-root': {
marginTop: '0',
},
'& button.copy-tooltip': {
marginTop: '-3px',
},
color: theme.palette.mode === 'dark' ? theme.color.grey8 : theme.color.black,
display: 'flex',
padding: '3px 5px',
}));
Loading

0 comments on commit ed86113

Please sign in to comment.