ShareDrawer: Improvements (#92956)

public/app/features/dashboard-scene/sharing/ExportButton/ExportAsJson.tsx

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

public/app/features/dashboard-scene/sharing/ShareButton/share-externally/EmailShare/CreateEmailSharing.tsx

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

public/app/features/dashboard-scene/sharing/ShareButton/share-externally/ShareAlerts.test.tsx

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

public/app/features/dashboard-scene/sharing/ShareButton/share-externally/ShareAlerts.tsx

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

public/app/features/dashboard-scene/sharing/ShareButton/share-externally/ShareConfiguration.tsx

@@ -113,7 +113,7 @@ export default function ShareConfiguration() {
                   style={{ flex: 1 }}
                   description={t(
                     '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>

public/app/features/dashboard-scene/sharing/ShareButton/share-externally/ShareTypeSelect.tsx

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

public/app/features/dashboard-scene/sharing/ShareButton/share-internally/ShareInternally.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 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 ShareInternallyConfiguration from '../../ShareInternallyConfiguration';
@@ -66,7 +66,7 @@ function ShareInternallyRenderer({ model }: SceneComponentProps<ShareInternally>
 
   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">
           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.
@@ -90,17 +90,19 @@ function ShareInternallyRenderer({ model }: SceneComponentProps<ShareInternally>
         isLoading={isBuildUrlLoading}
       />
       <Divider spacing={1} />
-      <ClipboardButton
-        icon="link"
-        variant="primary"
-        fill="outline"
-        disabled={isBuildUrlLoading}
-        getText={model.getShareUrl}
-        onClipboardCopy={model.onCopy}
-        className={styles.copyButtonContainer}
-      >
-        <Trans i18nKey="link.share.copy-link-button">Copy link</Trans>
-      </ClipboardButton>
+      <Stack gap={1} flex={1} direction={{ xs: 'column', sm: 'row' }}>
+        <ClipboardButton
+          icon="link"
+          variant="primary"
+          fill="outline"
+          disabled={isBuildUrlLoading}
+          getText={model.getShareUrl}
+          onClipboardCopy={model.onCopy}
+          className={styles.copyButtonContainer}
+        >
+          <Trans i18nKey="link.share.copy-link-button">Copy link</Trans>
+        </ClipboardButton>
+      </Stack>
     </>
   );
 }

public/app/features/dashboard-scene/sharing/ShareDrawer/ShareDrawer.tsx

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

public/app/features/dashboard-scene/sharing/ShareDrawer/ShareDrawerContext.tsx

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

public/app/features/dashboard/api/publicDashboardApi.ts

@@ -209,7 +209,7 @@ export const publicDashboardApi = createApi({
                 )
               : t(
                   '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)));

public/locales/en-US/grafana.json

@@ -912,7 +912,7 @@
       "download-successful_toast_message": "Your JSON has been downloaded",
       "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",
-      "title": "Save dashboard JSON"
+      "title": "Export dashboard JSON"
     },
     "menu": {
       "export-as-json-label": "Export",
@@ -1187,7 +1187,7 @@
   "link": {
     "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-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:",
       "copy-link-button": "Copy link",
       "copy-to-clipboard": "Link copied to clipboard",
@@ -1930,7 +1930,7 @@
       "settings-title": "Settings"
     },
     "configuration": {
-      "display-annotations-description": "Present annotations on this Dashboard",
+      "display-annotations-description": "Present annotations on this dashboard",
       "display-annotations-label": "Display annotations",
       "enable-time-range-description": "Allow people to change time range",
       "enable-time-range-label": "Enable time range",
@@ -1976,7 +1976,7 @@
       "revoke-button": "Revoke",
       "revoke-button-title": "Revoke",
       "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": {
       "no-upsert-perm-alert-desc": "Contact your admin to get permission to {{mode}} public dashboards",

public/locales/pseudo-LOCALE/grafana.json

@@ -912,7 +912,7 @@
       "download-successful_toast_message": "Ÿőūř ĴŜØŃ ĥäş þęęʼn đőŵʼnľőäđęđ",
       "export-externally-label": "Ēχpőřŧ ŧĥę đäşĥþőäřđ ŧő ūşę įʼn äʼnőŧĥęř įʼnşŧäʼnčę",
       "info-text": "Cőpy őř đőŵʼnľőäđ ä ĴŜØŃ ƒįľę čőʼnŧäįʼnįʼnģ ŧĥę ĴŜØŃ őƒ yőūř đäşĥþőäřđ",
-      "title": "Ŝävę đäşĥþőäřđ ĴŜØŃ"
+      "title": "Ēχpőřŧ đäşĥþőäřđ ĴŜØŃ"
     },
     "menu": {
       "export-as-json-label": "Ēχpőřŧ",
@@ -1187,7 +1187,7 @@
   "link": {
     "share": {
       "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ģş:",
       "copy-link-button": "Cőpy ľįʼnĸ",
       "copy-to-clipboard": "Ŀįʼnĸ čőpįęđ ŧő čľįpþőäřđ",
@@ -1930,7 +1930,7 @@
       "settings-title": "Ŝęŧŧįʼnģş"
     },
     "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ş",
       "enable-time-range-description": "Åľľőŵ pęőpľę ŧő čĥäʼnģę ŧįmę řäʼnģę",
       "enable-time-range-label": "Ēʼnäþľę ŧįmę řäʼnģę",
@@ -1976,7 +1976,7 @@
       "revoke-button": "Ŗęvőĸę",
       "revoke-button-title": "Ŗęvőĸę",
       "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": {
       "no-upsert-perm-alert-desc": "Cőʼnŧäčŧ yőūř äđmįʼn ŧő ģęŧ pęřmįşşįőʼn ŧő {{mode}} pūþľįč đäşĥþőäřđş",