diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts b/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts index 3f8b44e707235..6ce0866fce218 100644 --- a/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts +++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.messages.ts @@ -1,4 +1,6 @@ export const Messages = { + sectionTitle: 'Select service type', + description: 'Select the service type you want to configure and then add it to your inventory.', titles: { rds: 'Amazon RDS', azure: 'Microsoft Azure MySQL or PostgreSQL', diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.styles.ts b/public/app/percona/add-instance/components/AddInstance/AddInstance.styles.ts index 7a68c6d2aa1df..d53786ce51856 100644 --- a/public/app/percona/add-instance/components/AddInstance/AddInstance.styles.ts +++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.styles.ts @@ -1,52 +1,30 @@ import { css } from '@emotion/css'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; -export const getStyles = ({ border, colors, spacing, typography }: GrafanaTheme) => ({ - navigationButton: css` +export const getStyles = (theme: GrafanaTheme2) => ({ + Content: css` display: flex; flex-direction: column; - justify-content: flex-end; - align-items: center; - padding-bottom: 1.2em; - margin: ${spacing.sm}; - border-radius: ${border.radius.md}; - width: 230px; - height: 160px; - text-align: center; - background-color: transparent; - border: ${border.width.sm} dashed ${colors.border2}; - - :hover { - cursor: pointer; - background-color: ${colors.dropdownOptionHoverBg}; - border: ${border.width.sm} solid ${colors.border2}; - } + align-items: flex-start; `, - navigationPanel: css` + NavigationPanel: css` display: flex; flex-direction: row; - justify-content: center; + justify-content: flex-start; flex-wrap: wrap; - max-width: 800px; + max-width: 825px; width: 100%; overflow: hidden; + gap: ${theme.spacing(2)}; + padding: 3px; + margin: -3px; `, - content: css` - display: flex; - flex-direction: column; - align-items: center; - margin-top: 2em; + InstanceCard: css` + width: 375px; + margin: 0; `, - addInstance: css` - margin-top: ${spacing.sm}; - font-size: ${typography.size.sm}; - `, - addInstanceTitle: css` - margin-top: ${spacing.sm}; - overflow: hidden; - line-height: ${typography.lineHeight.md}; - width: 65%; - height: 3em; + Description: css` + color: ${theme.colors.text.secondary}; `, }); diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx b/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx index c599bed11cdb8..8210fc97ebc54 100644 --- a/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx +++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.test.tsx @@ -5,14 +5,20 @@ import { Provider } from 'react-redux'; import { configureStore } from 'app/store/configureStore'; import { StoreState } from 'app/types'; +import { InstanceAvailable } from '../../panel.types'; + import { AddInstance } from './AddInstance'; import { instanceList } from './AddInstance.constants'; jest.mock('app/percona/settings/Settings.service'); +const selectedInstanceType: InstanceAvailable = { type: '' }; + describe('AddInstance page::', () => { it('should render a given number of links', async () => { - const ui = withStore( {}} />); + const ui = withStore( + {}} selectedInstanceType={selectedInstanceType} /> + ); await waitFor(() => render(ui)); expect(screen.getAllByRole('button')).toHaveLength(instanceList.length); @@ -22,7 +28,9 @@ describe('AddInstance page::', () => { }); it('should render azure option', async () => { - const ui = withStore( {}} />); + const ui = withStore( + {}} selectedInstanceType={selectedInstanceType} /> + ); await waitFor(() => render(ui)); expect(screen.getAllByRole('button')).toHaveLength(instanceList.length + 1); @@ -35,13 +43,15 @@ describe('AddInstance page::', () => { it('should invoke a callback with a proper instance type', async () => { const onSelectInstanceType = jest.fn(); - const ui = withStore(); + const ui = withStore( + + ); render(ui); expect(onSelectInstanceType).toBeCalledTimes(0); - const button = await screen.findByTestId('rds-instance'); - fireEvent.click(button); + const button = (await screen.findByTestId('rds-instance')).querySelector('button'); + fireEvent.click(button!); expect(onSelectInstanceType).toBeCalledTimes(1); expect(onSelectInstanceType.mock.calls[0][0]).toStrictEqual({ type: 'rds' }); diff --git a/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx b/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx index 0ade58abc3544..19f5d4b9b95e0 100644 --- a/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx +++ b/public/app/percona/add-instance/components/AddInstance/AddInstance.tsx @@ -2,8 +2,7 @@ import React, { FC, useMemo } from 'react'; import { v4 as uuidv4 } from 'uuid'; -import { useStyles } from '@grafana/ui'; -import { Database } from 'app/percona/shared/components/Elements/Icons/Database'; +import { Card, Icon, useStyles2 } from '@grafana/ui'; import { Databases } from 'app/percona/shared/core'; import * as UserFlow from 'app/percona/shared/core/reducers/userFlow'; import { useDispatch } from 'app/types'; @@ -12,37 +11,34 @@ import { InstanceAvailableType, InstanceTypesExtra } from '../../panel.types'; import { Messages } from './AddInstance.messages'; import { getStyles } from './AddInstance.styles'; -import { AddInstanceProps, SelectInstanceProps } from './AddInstance.types'; +import { AddInstanceProps, InstanceListItem, SelectInstanceProps } from './AddInstance.types'; -export const SelectInstance: FC = ({ type, selectInstanceType, title }) => { - const styles = useStyles(getStyles); +export const SelectInstance: FC = ({ type, isSelected, icon, selectInstanceType, title }) => { + const styles = useStyles2(getStyles); return ( - + + {title} + {Messages.titles.addInstance} + + + + ); }; -export const AddInstance: FC = ({ onSelectInstanceType, showAzure }) => { - const styles = useStyles(getStyles); - const instanceList = useMemo( +export const AddInstance: FC = ({ selectedInstanceType, onSelectInstanceType, showAzure }) => { + const styles2 = useStyles2(getStyles); + const instanceList = useMemo( () => [ { type: InstanceTypesExtra.rds, title: Messages.titles.rds }, - { type: InstanceTypesExtra.azure, title: Messages.titles.azure, isHidden: !showAzure }, - { type: Databases.postgresql, title: Messages.titles.postgresql }, - { type: Databases.mysql, title: Messages.titles.mysql }, - { type: Databases.mongodb, title: Messages.titles.mongodb }, - { type: Databases.proxysql, title: Messages.titles.proxysql }, + { type: Databases.mysql, title: Messages.titles.mysql, icon: 'percona-database-mysql' }, + { type: Databases.mongodb, title: Messages.titles.mongodb, icon: 'percona-database-mongodb' }, + { type: Databases.postgresql, title: Messages.titles.postgresql, icon: 'percona-database-postgresql' }, + { type: Databases.proxysql, title: Messages.titles.proxysql, icon: 'percona-database-proxysql' }, + { type: Databases.haproxy, title: Messages.titles.haproxy, icon: 'percona-database-haproxy' }, { type: InstanceTypesExtra.external, title: Messages.titles.external }, - { type: Databases.haproxy, title: Messages.titles.haproxy }, + { type: InstanceTypesExtra.azure, title: Messages.titles.azure, isHidden: !showAzure }, ], [showAzure] ); @@ -61,14 +57,18 @@ export const AddInstance: FC = ({ onSelectInstanceType, showAz }; return ( -
-