ShareDrawer: Improvements (#92956)

This commit is contained in:
Juan Cabanas 2024-09-06 09:37:00 -03:00 committed by GitHub
parent 55abfd7858
commit 8b2091ee4f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 35 additions and 30 deletions

View File

@ -19,7 +19,7 @@ export class ExportAsJson extends ShareExportTab {
static Component = ExportAsJsonRenderer; static Component = ExportAsJsonRenderer;
public getTabLabel(): string { public getTabLabel(): string {
return t('export.json.title', 'Save dashboard JSON'); return t('export.json.title', 'Export dashboard JSON');
} }
} }

View File

@ -15,7 +15,7 @@ import { EmailSharingPricingAlert } from '../../../../../dashboard/components/Sh
import { useShareDrawerContext } from '../../../ShareDrawer/ShareDrawerContext'; import { useShareDrawerContext } from '../../../ShareDrawer/ShareDrawerContext';
export const CreateEmailSharing = ({ hasError }: { hasError: boolean }) => { export const CreateEmailSharing = ({ hasError }: { hasError: boolean }) => {
const { dashboard } = useShareDrawerContext(); const { dashboard, onDismiss } = useShareDrawerContext();
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const [createPublicDashboard, { isLoading, isError }] = useCreatePublicDashboardMutation(); const [createPublicDashboard, { isLoading, isError }] = useCreatePublicDashboardMutation();
@ -49,7 +49,7 @@ export const CreateEmailSharing = ({ hasError }: { hasError: boolean }) => {
<Button type="submit" disabled={!isValid}> <Button type="submit" disabled={!isValid}>
<Trans i18nKey="public-dashboard.email-sharing.accept-button">Accept</Trans> <Trans i18nKey="public-dashboard.email-sharing.accept-button">Accept</Trans>
</Button> </Button>
<Button variant="secondary" onClick={() => dashboard.closeModal()}> <Button variant="secondary" onClick={onDismiss}>
<Trans i18nKey="public-dashboard.email-sharing.cancel-button">Cancel</Trans> <Trans i18nKey="public-dashboard.email-sharing.cancel-button">Cancel</Trans>
</Button> </Button>
{isLoading && <Spinner />} {isLoading && <Spinner />}

View File

@ -108,7 +108,7 @@ async function setup(panelState?: Partial<VizPanelState>, dashboardState?: Parti
await act(async () => await act(async () =>
render( render(
<ShareDrawerContext.Provider value={{ dashboard }}> <ShareDrawerContext.Provider value={{ dashboard, onDismiss: () => {} }}>
<ShareAlerts /> <ShareAlerts />
</ShareDrawerContext.Provider> </ShareDrawerContext.Provider>
) )

View File

@ -10,6 +10,7 @@ import {
import { AccessControlAction } from 'app/types'; import { AccessControlAction } from 'app/types';
import { NoUpsertPermissionsAlert } from '../../../../dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/NoUpsertPermissionsAlert'; import { NoUpsertPermissionsAlert } from '../../../../dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/NoUpsertPermissionsAlert';
import { PublicDashboardAlert } from '../../../../dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/PublicDashboardAlert';
import { useShareDrawerContext } from '../../ShareDrawer/ShareDrawerContext'; import { useShareDrawerContext } from '../../ShareDrawer/ShareDrawerContext';
import { useUnsupportedDatasources } from '../../public-dashboards/hooks'; import { useUnsupportedDatasources } from '../../public-dashboards/hooks';
@ -29,6 +30,7 @@ export default function ShareAlerts({ publicDashboard }: { publicDashboard?: Pub
{publicDashboard?.share === PublicDashboardShareType.EMAIL && isEmailSharingEnabled() && ( {publicDashboard?.share === PublicDashboardShareType.EMAIL && isEmailSharingEnabled() && (
<EmailSharingPricingAlert /> <EmailSharingPricingAlert />
)} )}
{publicDashboard?.share === PublicDashboardShareType.PUBLIC && <PublicDashboardAlert />}
</> </>
); );
} }

View File

@ -113,7 +113,7 @@ export default function ShareConfiguration() {
style={{ flex: 1 }} style={{ flex: 1 }}
description={t( description={t(
'public-dashboard.configuration.display-annotations-description', 'public-dashboard.configuration.display-annotations-description',
'Present annotations on this Dashboard' 'Present annotations on this dashboard'
)} )}
> >
<Trans i18nKey="public-dashboard.configuration.display-annotations-label">Display annotations</Trans> <Trans i18nKey="public-dashboard.configuration.display-annotations-label">Display annotations</Trans>

View File

@ -82,10 +82,10 @@ export default function ShareTypeSelect({
className={styles.select} className={styles.select}
/> />
) : ( ) : (
<> <Stack gap={1} alignItems="center">
{toIconName(anyOneWithTheLinkOpt.icon) && <Icon name={toIconName(anyOneWithTheLinkOpt.icon)!} />} {toIconName(anyOneWithTheLinkOpt.icon) && <Icon name={toIconName(anyOneWithTheLinkOpt.icon)!} />}
<Text>{anyOneWithTheLinkOpt.label}</Text> <Text>{anyOneWithTheLinkOpt.label}</Text>
</> </Stack>
)} )}
</div> </div>
); );

View File

@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { SceneComponentProps } from '@grafana/scenes'; import { SceneComponentProps } from '@grafana/scenes';
import { Alert, ClipboardButton, Divider, Text, useStyles2 } from '@grafana/ui'; import { Alert, ClipboardButton, Divider, Stack, Text, useStyles2 } from '@grafana/ui';
import { t, Trans } from 'app/core/internationalization'; import { t, Trans } from 'app/core/internationalization';
import ShareInternallyConfiguration from '../../ShareInternallyConfiguration'; import ShareInternallyConfiguration from '../../ShareInternallyConfiguration';
@ -66,7 +66,7 @@ function ShareInternallyRenderer({ model }: SceneComponentProps<ShareInternally>
return ( return (
<> <>
<Alert severity="info" title={t('link.share.config-alert-title', 'Link configuration')}> <Alert severity="info" title={t('link.share.config-alert-title', 'Link settings')}>
<Trans i18nKey="link.share.config-alert-description"> <Trans i18nKey="link.share.config-alert-description">
Updating your settings will modify the default copy link to include these changes. Please note that these Updating your settings will modify the default copy link to include these changes. Please note that these
settings are saved within your current browser scope. settings are saved within your current browser scope.
@ -90,17 +90,19 @@ function ShareInternallyRenderer({ model }: SceneComponentProps<ShareInternally>
isLoading={isBuildUrlLoading} isLoading={isBuildUrlLoading}
/> />
<Divider spacing={1} /> <Divider spacing={1} />
<ClipboardButton <Stack gap={1} flex={1} direction={{ xs: 'column', sm: 'row' }}>
icon="link" <ClipboardButton
variant="primary" icon="link"
fill="outline" variant="primary"
disabled={isBuildUrlLoading} fill="outline"
getText={model.getShareUrl} disabled={isBuildUrlLoading}
onClipboardCopy={model.onCopy} getText={model.getShareUrl}
className={styles.copyButtonContainer} onClipboardCopy={model.onCopy}
> className={styles.copyButtonContainer}
<Trans i18nKey="link.share.copy-link-button">Copy link</Trans> >
</ClipboardButton> <Trans i18nKey="link.share.copy-link-button">Copy link</Trans>
</ClipboardButton>
</Stack>
</> </>
); );
} }

View File

@ -64,7 +64,7 @@ function ShareDrawerRenderer({ model }: SceneComponentProps<ShareDrawer>) {
return ( return (
<Drawer title={activeShare.getTabLabel()} onClose={model.onDismiss} size="md"> <Drawer title={activeShare.getTabLabel()} onClose={model.onDismiss} size="md">
<ShareDrawerContext.Provider value={{ dashboard }}> <ShareDrawerContext.Provider value={{ dashboard, onDismiss: model.onDismiss }}>
{<activeShare.Component model={activeShare} />} {<activeShare.Component model={activeShare} />}
</ShareDrawerContext.Provider> </ShareDrawerContext.Provider>
</Drawer> </Drawer>

View File

@ -4,6 +4,7 @@ import { DashboardScene } from '../../scene/DashboardScene';
interface Context { interface Context {
dashboard: DashboardScene; dashboard: DashboardScene;
onDismiss: () => void;
} }
export const ShareDrawerContext = createContext<Context | undefined>(undefined); export const ShareDrawerContext = createContext<Context | undefined>(undefined);

View File

@ -209,7 +209,7 @@ export const publicDashboardApi = createApi({
) )
: t( : t(
'public-dashboard.email-sharing.success-share-type-change', 'public-dashboard.email-sharing.success-share-type-change',
'Dashboard access restricted: Only specific people can now access with the link' 'Dashboard access updated: Only specific people can now access with the link'
); );
} }
dispatch(notifyApp(createSuccessNotification(message))); dispatch(notifyApp(createSuccessNotification(message)));

View File

@ -912,7 +912,7 @@
"download-successful_toast_message": "Your JSON has been downloaded", "download-successful_toast_message": "Your JSON has been downloaded",
"export-externally-label": "Export the dashboard to use in another instance", "export-externally-label": "Export the dashboard to use in another instance",
"info-text": "Copy or download a JSON file containing the JSON of your dashboard", "info-text": "Copy or download a JSON file containing the JSON of your dashboard",
"title": "Save dashboard JSON" "title": "Export dashboard JSON"
}, },
"menu": { "menu": {
"export-as-json-label": "Export", "export-as-json-label": "Export",
@ -1187,7 +1187,7 @@
"link": { "link": {
"share": { "share": {
"config-alert-description": "Updating your settings will modify the default copy link to include these changes. Please note that these settings are saved within your current browser scope.", "config-alert-description": "Updating your settings will modify the default copy link to include these changes. Please note that these settings are saved within your current browser scope.",
"config-alert-title": "Link configuration", "config-alert-title": "Link settings",
"config-description": "Create a personalized, direct link to share your dashboard within your organization, with the following customization settings:", "config-description": "Create a personalized, direct link to share your dashboard within your organization, with the following customization settings:",
"copy-link-button": "Copy link", "copy-link-button": "Copy link",
"copy-to-clipboard": "Link copied to clipboard", "copy-to-clipboard": "Link copied to clipboard",
@ -1930,7 +1930,7 @@
"settings-title": "Settings" "settings-title": "Settings"
}, },
"configuration": { "configuration": {
"display-annotations-description": "Present annotations on this Dashboard", "display-annotations-description": "Present annotations on this dashboard",
"display-annotations-label": "Display annotations", "display-annotations-label": "Display annotations",
"enable-time-range-description": "Allow people to change time range", "enable-time-range-description": "Allow people to change time range",
"enable-time-range-label": "Enable time range", "enable-time-range-label": "Enable time range",
@ -1976,7 +1976,7 @@
"revoke-button": "Revoke", "revoke-button": "Revoke",
"revoke-button-title": "Revoke", "revoke-button-title": "Revoke",
"success-creation": "Your dashboard is ready for external sharing", "success-creation": "Your dashboard is ready for external sharing",
"success-share-type-change": "Dashboard access restricted: Only specific people can now access with the link" "success-share-type-change": "Dashboard access updated: Only specific people can now access with the link"
}, },
"modal-alerts": { "modal-alerts": {
"no-upsert-perm-alert-desc": "Contact your admin to get permission to {{mode}} public dashboards", "no-upsert-perm-alert-desc": "Contact your admin to get permission to {{mode}} public dashboards",

View File

@ -912,7 +912,7 @@
"download-successful_toast_message": "Ÿőūř ĴŜØŃ ĥäş þęęʼn đőŵʼnľőäđęđ", "download-successful_toast_message": "Ÿőūř ĴŜØŃ ĥäş þęęʼn đőŵʼnľőäđęđ",
"export-externally-label": "Ēχpőřŧ ŧĥę đäşĥþőäřđ ŧő ūşę įʼn äʼnőŧĥęř įʼnşŧäʼnčę", "export-externally-label": "Ēχpőřŧ ŧĥę đäşĥþőäřđ ŧő ūşę įʼn äʼnőŧĥęř įʼnşŧäʼnčę",
"info-text": "Cőpy őř đőŵʼnľőäđ ä ĴŜØŃ ƒįľę čőʼnŧäįʼnįʼnģ ŧĥę ĴŜØŃ őƒ yőūř đäşĥþőäřđ", "info-text": "Cőpy őř đőŵʼnľőäđ ä ĴŜØŃ ƒįľę čőʼnŧäįʼnįʼnģ ŧĥę ĴŜØŃ őƒ yőūř đäşĥþőäřđ",
"title": "Ŝävę đäşĥþőäřđ ĴŜØŃ" "title": "Ēχpőřŧ đäşĥþőäřđ ĴŜØŃ"
}, },
"menu": { "menu": {
"export-as-json-label": "Ēχpőřŧ", "export-as-json-label": "Ēχpőřŧ",
@ -1187,7 +1187,7 @@
"link": { "link": {
"share": { "share": {
"config-alert-description": "Ůpđäŧįʼnģ yőūř şęŧŧįʼnģş ŵįľľ mőđįƒy ŧĥę đęƒäūľŧ čőpy ľįʼnĸ ŧő įʼnčľūđę ŧĥęşę čĥäʼnģęş. Pľęäşę ʼnőŧę ŧĥäŧ ŧĥęşę şęŧŧįʼnģş äřę şävęđ ŵįŧĥįʼn yőūř čūřřęʼnŧ þřőŵşęř şčőpę.", "config-alert-description": "Ůpđäŧįʼnģ yőūř şęŧŧįʼnģş ŵįľľ mőđįƒy ŧĥę đęƒäūľŧ čőpy ľįʼnĸ ŧő įʼnčľūđę ŧĥęşę čĥäʼnģęş. Pľęäşę ʼnőŧę ŧĥäŧ ŧĥęşę şęŧŧįʼnģş äřę şävęđ ŵįŧĥįʼn yőūř čūřřęʼnŧ þřőŵşęř şčőpę.",
"config-alert-title": "Ŀįʼnĸ čőʼnƒįģūřäŧįőʼn", "config-alert-title": "Ŀįʼnĸ şęŧŧįʼnģş",
"config-description": "Cřęäŧę ä pęřşőʼnäľįžęđ, đįřęčŧ ľįʼnĸ ŧő şĥäřę yőūř đäşĥþőäřđ ŵįŧĥįʼn yőūř őřģäʼnįžäŧįőʼn, ŵįŧĥ ŧĥę ƒőľľőŵįʼnģ čūşŧőmįžäŧįőʼn şęŧŧįʼnģş:", "config-description": "Cřęäŧę ä pęřşőʼnäľįžęđ, đįřęčŧ ľįʼnĸ ŧő şĥäřę yőūř đäşĥþőäřđ ŵįŧĥįʼn yőūř őřģäʼnįžäŧįőʼn, ŵįŧĥ ŧĥę ƒőľľőŵįʼnģ čūşŧőmįžäŧįőʼn şęŧŧįʼnģş:",
"copy-link-button": "Cőpy ľįʼnĸ", "copy-link-button": "Cőpy ľįʼnĸ",
"copy-to-clipboard": "Ŀįʼnĸ čőpįęđ ŧő čľįpþőäřđ", "copy-to-clipboard": "Ŀįʼnĸ čőpįęđ ŧő čľįpþőäřđ",
@ -1930,7 +1930,7 @@
"settings-title": "Ŝęŧŧįʼnģş" "settings-title": "Ŝęŧŧįʼnģş"
}, },
"configuration": { "configuration": {
"display-annotations-description": "Přęşęʼnŧ äʼnʼnőŧäŧįőʼnş őʼn ŧĥįş Đäşĥþőäřđ", "display-annotations-description": "Přęşęʼnŧ äʼnʼnőŧäŧįőʼnş őʼn ŧĥįş đäşĥþőäřđ",
"display-annotations-label": "Đįşpľäy äʼnʼnőŧäŧįőʼnş", "display-annotations-label": "Đįşpľäy äʼnʼnőŧäŧįőʼnş",
"enable-time-range-description": "Åľľőŵ pęőpľę ŧő čĥäʼnģę ŧįmę řäʼnģę", "enable-time-range-description": "Åľľőŵ pęőpľę ŧő čĥäʼnģę ŧįmę řäʼnģę",
"enable-time-range-label": "Ēʼnäþľę ŧįmę řäʼnģę", "enable-time-range-label": "Ēʼnäþľę ŧįmę řäʼnģę",
@ -1976,7 +1976,7 @@
"revoke-button": "Ŗęvőĸę", "revoke-button": "Ŗęvőĸę",
"revoke-button-title": "Ŗęvőĸę", "revoke-button-title": "Ŗęvőĸę",
"success-creation": "Ÿőūř đäşĥþőäřđ įş řęäđy ƒőř ęχŧęřʼnäľ şĥäřįʼnģ", "success-creation": "Ÿőūř đäşĥþőäřđ įş řęäđy ƒőř ęχŧęřʼnäľ şĥäřįʼnģ",
"success-share-type-change": "Đäşĥþőäřđ äččęşş řęşŧřįčŧęđ: Øʼnľy şpęčįƒįč pęőpľę čäʼn ʼnőŵ äččęşş ŵįŧĥ ŧĥę ľįʼnĸ" "success-share-type-change": "Đäşĥþőäřđ äččęşş ūpđäŧęđ: Øʼnľy şpęčįƒįč pęőpľę čäʼn ʼnőŵ äččęşş ŵįŧĥ ŧĥę ľįʼnĸ"
}, },
"modal-alerts": { "modal-alerts": {
"no-upsert-perm-alert-desc": "Cőʼnŧäčŧ yőūř äđmįʼn ŧő ģęŧ pęřmįşşįőʼn ŧő {{mode}} pūþľįč đäşĥþőäřđş", "no-upsert-perm-alert-desc": "Cőʼnŧäčŧ yőūř äđmįʼn ŧő ģęŧ pęřmįşşįőʼn ŧő {{mode}} pūþľįč đäşĥþőäřđş",