PublicDashboards: Checkboxes list refactor (#61947)

This commit is contained in:
juanicabanas 2023-01-23 17:23:23 -03:00 committed by GitHub
parent fe27acc3a9
commit 9b5e396be2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 54 deletions

View File

@ -4,7 +4,48 @@ import { UseFormRegister } from 'react-hook-form';
import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
import { Checkbox, FieldSet, HorizontalGroup, LinkButton, VerticalGroup } from '@grafana/ui/src';
import { SharePublicDashboardInputs } from './SharePublicDashboard';
import { SharePublicDashboardAcknowledgmentInputs, SharePublicDashboardInputs } from './SharePublicDashboard';
type Acknowledge = {
type: keyof SharePublicDashboardAcknowledgmentInputs;
description: string;
testId: string;
info: {
href: string;
tooltip: string;
};
};
const selectors = e2eSelectors.pages.ShareDashboardModal.PublicDashboard;
const ACKNOWLEDGES: Acknowledge[] = [
{
type: 'publicAcknowledgment',
description: 'Your entire dashboard will be public',
testId: selectors.WillBePublicCheckbox,
info: {
href: 'https://grafana.com/docs/grafana/latest/dashboards/dashboard-public/',
tooltip: 'Learn more about public dashboards',
},
},
{
type: 'dataSourcesAcknowledgment',
description: 'Publishing currently only works with a subset of datasources',
testId: selectors.LimitedDSCheckbox,
info: {
href: 'https://grafana.com/docs/grafana/latest/datasources/',
tooltip: 'Learn more about public datasources',
},
},
{
type: 'usageAcknowledgment',
description: 'Making a dashboard public causes queries to run each time it is viewed, which may increase costs',
testId: selectors.CostIncreaseCheckbox,
info: {
href: 'https://grafana.com/docs/grafana/latest/enterprise/query-caching/',
tooltip: 'Learn more about query caching',
},
},
];
export const AcknowledgeCheckboxes = ({
disabled,
@ -12,65 +53,30 @@ export const AcknowledgeCheckboxes = ({
}: {
disabled: boolean;
register: UseFormRegister<SharePublicDashboardInputs>;
}) => {
const selectors = e2eSelectors.pages.ShareDashboardModal.PublicDashboard;
return (
<>
<p>Before you click Save, please acknowledge the following information:</p>
<FieldSet disabled={disabled}>
<VerticalGroup spacing="md">
<HorizontalGroup spacing="none">
}) => (
<>
<p>Before you click Save, please acknowledge the following information:</p>
<FieldSet disabled={disabled}>
<VerticalGroup spacing="md">
{ACKNOWLEDGES.map((acknowledge) => (
<HorizontalGroup key={acknowledge.type} spacing="none" align="center">
<Checkbox
{...register('publicAcknowledgment')}
label="Your entire dashboard will be public"
data-testid={selectors.WillBePublicCheckbox}
{...register(acknowledge.type)}
label={acknowledge.description}
data-testid={acknowledge.testId}
/>
<LinkButton
variant="primary"
href="https://grafana.com/docs/grafana/latest/dashboards/dashboard-public/"
href={acknowledge.info.href}
target="_blank"
fill="text"
icon="info-circle"
rel="noopener noreferrer"
tooltip="Learn more about public dashboards"
tooltip={acknowledge.info.tooltip}
/>
</HorizontalGroup>
<HorizontalGroup spacing="none">
<Checkbox
{...register('dataSourcesAcknowledgment')}
label="Publishing currently only works with a subset of datasources"
data-testid={selectors.LimitedDSCheckbox}
/>
<LinkButton
variant="primary"
href="https://grafana.com/docs/grafana/latest/datasources/"
target="_blank"
fill="text"
icon="info-circle"
rel="noopener noreferrer"
tooltip="Learn more about public datasources"
/>
</HorizontalGroup>
<HorizontalGroup spacing="none">
<Checkbox
{...register('usageAcknowledgment')}
label="Making your dashboard public will cause queries to run each time the dashboard is viewed which may increase costs"
data-testid={selectors.CostIncreaseCheckbox}
/>
<LinkButton
variant="primary"
href="https://grafana.com/docs/grafana/latest/enterprise/query-caching/"
target="_blank"
fill="text"
icon="info-circle"
rel="noopener noreferrer"
tooltip="Learn more about query caching"
/>
</HorizontalGroup>
</VerticalGroup>
</FieldSet>
</>
);
};
))}
</VerticalGroup>
</FieldSet>
</>
);

View File

@ -45,7 +45,7 @@ import { ShareModal } from '../ShareModal';
interface Props extends ShareModalTabProps {}
type SharePublicDashboardAcknowledgmentInputs = {
export type SharePublicDashboardAcknowledgmentInputs = {
publicAcknowledgment: boolean;
dataSourcesAcknowledgment: boolean;
usageAcknowledgment: boolean;