From 8862578f50a3835c45912f794982d7fa5d7ba0d4 Mon Sep 17 00:00:00 2001
From: Juan Cabanas <juan.cabanas@grafana.com>
Date: Tue, 27 Aug 2024 10:31:07 -0300
Subject: [PATCH] ShareDrawer: Wrap render logic and add `shareView` query
 param (#92060)

---
 .../scene/DashboardSceneUrlSync.ts            |  13 ++-
 .../scene/NavToolbarActions.tsx               |   3 +-
 .../scene/PanelMenuBehavior.tsx               |  20 ++--
 .../scene/keyboardShortcuts.ts                |  17 ++-
 .../sharing/ExportButton/ExportAsJson.tsx     |  10 +-
 .../sharing/ExportButton/ExportMenu.tsx       |  26 +----
 .../sharing/ShareButton/ShareMenu.tsx         |  35 ++----
 .../share-externally/ShareExternally.tsx      |   9 +-
 .../share-internally/ShareInternally.tsx      |  10 +-
 .../share-snapshot/ShareSnapshot.tsx          |  13 ++-
 .../sharing/ShareDrawer/ShareDrawer.tsx       | 109 +++++++++++++++---
 .../sharing/ShareExportTab.tsx                |   4 +-
 .../sharing/ShareLibraryPanelTab.tsx          |   5 +-
 .../dashboard-scene/sharing/ShareLinkTab.tsx  |   4 +-
 .../sharing/SharePanelEmbedTab.tsx            |   5 +-
 .../sharing/ShareSnapshotTab.tsx              |   4 +-
 .../panel-share/SharePanelInternally.tsx      |  15 ++-
 .../features/dashboard-scene/sharing/types.ts |  11 +-
 .../components/DashNav/ShareButton.tsx        |   4 +-
 .../components/ShareModal/ShareEmbed.tsx      |   4 +-
 public/locales/en-US/grafana.json             |   7 +-
 public/locales/pseudo-LOCALE/grafana.json     |   7 +-
 22 files changed, 201 insertions(+), 134 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts
index 0f0e291daf9..16189017918 100644
--- a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts
+++ b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts
@@ -1,7 +1,7 @@
 import { Unsubscribable } from 'rxjs';
 
 import { AppEvents } from '@grafana/data';
-import { locationService } from '@grafana/runtime';
+import { config, locationService } from '@grafana/runtime';
 import {
   SceneGridLayout,
   SceneObjectBase,
@@ -16,6 +16,7 @@ import { KioskMode } from 'app/types';
 import { PanelInspectDrawer } from '../inspect/PanelInspectDrawer';
 import { buildPanelEditScene } from '../panel-edit/PanelEditor';
 import { createDashboardEditViewFor } from '../settings/utils';
+import { ShareDrawer } from '../sharing/ShareDrawer/ShareDrawer';
 import { ShareModal } from '../sharing/ShareModal';
 import { findVizPanelByKey, getDashboardSceneFor, getLibraryPanel, isPanelClone } from '../utils/utils';
 
@@ -157,9 +158,13 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler {
 
     if (typeof values.shareView === 'string') {
       update.shareView = values.shareView;
-      update.overlay = new ShareModal({
-        activeTab: values.shareView,
-      });
+      update.overlay = config.featureToggles.newDashboardSharingComponent
+        ? new ShareDrawer({
+            shareView: values.shareView,
+          })
+        : new ShareModal({
+            activeTab: values.shareView,
+          });
     } else if (shareView && values.shareView === null) {
       update.overlay = undefined;
       update.shareView = undefined;
diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
index 4140343a9cc..07ab8bfd828 100644
--- a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
+++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx
@@ -24,6 +24,7 @@ import { Trans, t } from 'app/core/internationalization';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { playlistSrv } from 'app/features/playlist/PlaylistSrv';
 
+import { shareDashboardType } from '../../dashboard/components/ShareModal/utils';
 import { PanelEditor, buildPanelEditScene } from '../panel-edit/PanelEditor';
 import ExportButton from '../sharing/ExportButton/ExportButton';
 import ShareButton from '../sharing/ShareButton/ShareButton';
@@ -313,7 +314,7 @@ export function ToolbarActions({ dashboard }: Props) {
         fill="outline"
         onClick={() => {
           DashboardInteractions.toolbarShareClick();
-          locationService.partial({ shareView: 'link' });
+          locationService.partial({ shareView: shareDashboardType.link });
         }}
         data-testid={selectors.components.NavToolbar.shareDashboard}
       >
diff --git a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx
index 35ac461c992..9d3d657401b 100644
--- a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx
+++ b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx
@@ -22,12 +22,8 @@ import { createExtensionSubMenu } from 'app/features/plugins/extensions/utils';
 import { addDataTrailPanelAction } from 'app/features/trails/Integrations/dashboardIntegration';
 import { ShowConfirmModalEvent } from 'app/types/events';
 
-import { ShareSnapshot } from '../sharing/ShareButton/share-snapshot/ShareSnapshot';
 import { ShareDrawer } from '../sharing/ShareDrawer/ShareDrawer';
-import { ShareLibraryPanelTab } from '../sharing/ShareLibraryPanelTab';
 import { ShareModal } from '../sharing/ShareModal';
-import { SharePanelEmbedTab } from '../sharing/SharePanelEmbedTab';
-import { SharePanelInternally } from '../sharing/panel-share/SharePanelInternally';
 import { DashboardInteractions } from '../utils/interactions';
 import { getEditPanelUrl, getInspectUrl, getViewPanelUrl, tryGetExploreUrlForPanel } from '../utils/urlBuilders';
 import { getDashboardSceneFor, getPanelIdForVizPanel, getQueryRunnerFor } from '../utils/utils';
@@ -91,8 +87,8 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
         shortcut: 'p u',
         onClick: () => {
           const drawer = new ShareDrawer({
-            title: t('share-panel.drawer.share-link-title', 'Link settings'),
-            body: new SharePanelInternally({ panelRef: panel.getRef() }),
+            shareView: shareDashboardType.link,
+            panelRef: panel.getRef(),
           });
 
           dashboard.showModal(drawer);
@@ -104,8 +100,8 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
         shortcut: 'p e',
         onClick: () => {
           const drawer = new ShareDrawer({
-            title: t('share-panel.drawer.share-embed-title', 'Share embed'),
-            body: new SharePanelEmbedTab({ panelRef: panel.getRef() }),
+            shareView: shareDashboardType.embed,
+            panelRef: panel.getRef(),
           });
 
           dashboard.showModal(drawer);
@@ -119,8 +115,8 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
           shortcut: 'p s',
           onClick: () => {
             const drawer = new ShareDrawer({
-              title: t('share-panel.drawer.share-snapshot-title', 'Share snapshot'),
-              body: new ShareSnapshot({ dashboardRef: dashboard.getRef(), panelRef: panel.getRef() }),
+              shareView: shareDashboardType.snapshot,
+              panelRef: panel.getRef(),
             });
 
             dashboard.showModal(drawer);
@@ -192,8 +188,8 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
             text: t('share-panel.menu.new-library-panel-title', 'New library panel'),
             onClick: () => {
               const drawer = new ShareDrawer({
-                title: t('share-panel.drawer.new-library-panel-title', 'New library panel'),
-                body: new ShareLibraryPanelTab({ panelRef: panel.getRef() }),
+                shareView: shareDashboardType.libraryPanel,
+                panelRef: panel.getRef(),
               });
 
               dashboard.showModal(drawer);
diff --git a/public/app/features/dashboard-scene/scene/keyboardShortcuts.ts b/public/app/features/dashboard-scene/scene/keyboardShortcuts.ts
index 90d2baa7093..4e025631e01 100644
--- a/public/app/features/dashboard-scene/scene/keyboardShortcuts.ts
+++ b/public/app/features/dashboard-scene/scene/keyboardShortcuts.ts
@@ -2,15 +2,12 @@ import { SetPanelAttentionEvent } from '@grafana/data';
 import { config, locationService } from '@grafana/runtime';
 import { sceneGraph, VizPanel } from '@grafana/scenes';
 import appEvents from 'app/core/app_events';
-import { t } from 'app/core/internationalization';
 import { KeybindingSet } from 'app/core/services/KeybindingSet';
 import { contextSrv } from 'app/core/services/context_srv';
 
-import { ShareSnapshot } from '../sharing/ShareButton/share-snapshot/ShareSnapshot';
+import { shareDashboardType } from '../../dashboard/components/ShareModal/utils';
 import { ShareDrawer } from '../sharing/ShareDrawer/ShareDrawer';
 import { ShareModal } from '../sharing/ShareModal';
-import { SharePanelEmbedTab } from '../sharing/SharePanelEmbedTab';
-import { SharePanelInternally } from '../sharing/panel-share/SharePanelInternally';
 import { dashboardSceneGraph } from '../utils/dashboardSceneGraph';
 import { getEditPanelUrl, getInspectUrl, getViewPanelUrl, tryGetExploreUrlForPanel } from '../utils/urlBuilders';
 import { getPanelIdForVizPanel } from '../utils/utils';
@@ -56,8 +53,8 @@ export function setupKeyboardShortcuts(scene: DashboardScene) {
       key: 'p u',
       onTrigger: withFocusedPanel(scene, async (vizPanel: VizPanel) => {
         const drawer = new ShareDrawer({
-          title: t('share-panel.drawer.share-link-title', 'Link settings'),
-          body: new SharePanelInternally({ panelRef: vizPanel.getRef() }),
+          shareView: shareDashboardType.link,
+          panelRef: vizPanel.getRef(),
         });
 
         scene.showModal(drawer);
@@ -67,8 +64,8 @@ export function setupKeyboardShortcuts(scene: DashboardScene) {
       key: 'p e',
       onTrigger: withFocusedPanel(scene, async (vizPanel: VizPanel) => {
         const drawer = new ShareDrawer({
-          title: t('share-panel.drawer.share-embed-title', 'Share embed'),
-          body: new SharePanelEmbedTab({ panelRef: vizPanel.getRef() }),
+          shareView: shareDashboardType.embed,
+          panelRef: vizPanel.getRef(),
         });
 
         scene.showModal(drawer);
@@ -80,8 +77,8 @@ export function setupKeyboardShortcuts(scene: DashboardScene) {
         key: 'p s',
         onTrigger: withFocusedPanel(scene, async (vizPanel: VizPanel) => {
           const drawer = new ShareDrawer({
-            title: t('share-panel.drawer.share-snapshot-title', 'Share snapshot'),
-            body: new ShareSnapshot({ dashboardRef: scene.getRef(), panelRef: vizPanel.getRef() }),
+            shareView: shareDashboardType.snapshot,
+            panelRef: vizPanel.getRef(),
           });
 
           scene.showModal(drawer);
diff --git a/public/app/features/dashboard-scene/sharing/ExportButton/ExportAsJson.tsx b/public/app/features/dashboard-scene/sharing/ExportButton/ExportAsJson.tsx
index b0b60158096..42fd0ef7a51 100644
--- a/public/app/features/dashboard-scene/sharing/ExportButton/ExportAsJson.tsx
+++ b/public/app/features/dashboard-scene/sharing/ExportButton/ExportAsJson.tsx
@@ -8,20 +8,22 @@ import { SceneComponentProps } from '@grafana/scenes';
 import { Button, ClipboardButton, CodeEditor, Label, Spinner, Stack, Switch, useStyles2 } from '@grafana/ui';
 import { notifyApp } from 'app/core/actions';
 import { createSuccessNotification } from 'app/core/copy/appNotification';
-import { Trans, t } from 'app/core/internationalization';
+import { t, Trans } from 'app/core/internationalization';
 import { dispatch } from 'app/store/store';
 
-import { getDashboardSceneFor } from '../../utils/utils';
 import { ShareExportTab } from '../ShareExportTab';
 
 const selector = e2eSelectors.pages.ExportDashboardDrawer.ExportAsJson;
 
 export class ExportAsJson extends ShareExportTab {
   static Component = ExportAsJsonRenderer;
+
+  public getTabLabel(): string {
+    return t('export.json.title', 'Save dashboard JSON');
+  }
 }
 
 function ExportAsJsonRenderer({ model }: SceneComponentProps<ExportAsJson>) {
-  const dashboard = getDashboardSceneFor(model);
   const styles = useStyles2(getStyles);
 
   const { isSharingExternally } = model.useState();
@@ -98,7 +100,7 @@ function ExportAsJsonRenderer({ model }: SceneComponentProps<ExportAsJson>) {
           <Button
             data-testid={selector.cancelButton}
             variant="secondary"
-            onClick={() => dashboard.closeModal()}
+            onClick={model.useState().onDismiss}
             fill="outline"
           >
             <Trans i18nKey="export.json.cancel-button">Cancel</Trans>
diff --git a/public/app/features/dashboard-scene/sharing/ExportButton/ExportMenu.tsx b/public/app/features/dashboard-scene/sharing/ExportButton/ExportMenu.tsx
index a9b3f91b0aa..02e99fe5ff9 100644
--- a/public/app/features/dashboard-scene/sharing/ExportButton/ExportMenu.tsx
+++ b/public/app/features/dashboard-scene/sharing/ExportButton/ExportMenu.tsx
@@ -1,22 +1,16 @@
 import { useCallback } from 'react';
 
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
-import { SceneObject } from '@grafana/scenes';
+import { locationService } from '@grafana/runtime';
 import { IconName, Menu } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 import { getTrackingSource, shareDashboardType } from 'app/features/dashboard/components/ShareModal/utils';
 
 import { DashboardScene } from '../../scene/DashboardScene';
 import { DashboardInteractions } from '../../utils/interactions';
-import { ShareDrawer } from '../ShareDrawer/ShareDrawer';
-import { SceneShareDrawerState } from '../types';
-
-import { ExportAsJson } from './ExportAsJson';
 
 const newExportButtonSelector = e2eSelectors.pages.Dashboard.DashNav.NewExportButton.Menu;
 
-type CustomDashboardDrawer = new (...args: SceneShareDrawerState[]) => SceneObject;
-
 export interface ExportDrawerMenuItem {
   shareId: string;
   testId: string;
@@ -34,17 +28,9 @@ export function addDashboardExportDrawerItem(item: ExportDrawerMenuItem) {
 }
 
 export default function ExportMenu({ dashboard }: { dashboard: DashboardScene }) {
-  const onMenuItemClick = useCallback(
-    (title: string, component: CustomDashboardDrawer) => {
-      const drawer = new ShareDrawer({
-        title,
-        body: new component(),
-      });
-
-      dashboard.showModal(drawer);
-    },
-    [dashboard]
-  );
+  const onMenuItemClick = (shareView: string) => {
+    locationService.partial({ shareView });
+  };
 
   const buildMenuItems = useCallback(() => {
     const menuItems: ExportDrawerMenuItem[] = [];
@@ -57,11 +43,11 @@ export default function ExportMenu({ dashboard }: { dashboard: DashboardScene })
       icon: 'arrow',
       label: t('share-dashboard.menu.export-json-title', 'Export as JSON'),
       renderCondition: true,
-      onClick: () => onMenuItemClick(t('export.json.title', 'Save dashboard JSON'), ExportAsJson),
+      onClick: () => onMenuItemClick(shareDashboardType.export),
     });
 
     return menuItems.filter((item) => item.renderCondition);
-  }, [onMenuItemClick]);
+  }, []);
 
   const onClick = (item: ExportDrawerMenuItem) => {
     DashboardInteractions.sharingCategoryClicked({
diff --git a/public/app/features/dashboard-scene/sharing/ShareButton/ShareMenu.tsx b/public/app/features/dashboard-scene/sharing/ShareButton/ShareMenu.tsx
index c5a88434302..b899bb92904 100644
--- a/public/app/features/dashboard-scene/sharing/ShareButton/ShareMenu.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareButton/ShareMenu.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
-import { config } from '@grafana/runtime';
-import { SceneObject, VizPanel } from '@grafana/scenes';
+import { config, locationService } from '@grafana/runtime';
+import { VizPanel } from '@grafana/scenes';
 import { IconName, Menu } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { t } from 'app/core/internationalization';
@@ -11,17 +11,9 @@ import { isPublicDashboardsEnabled } from '../../../dashboard/components/ShareMo
 import { getTrackingSource, shareDashboardType } from '../../../dashboard/components/ShareModal/utils';
 import { DashboardScene } from '../../scene/DashboardScene';
 import { DashboardInteractions } from '../../utils/interactions';
-import { ShareDrawer } from '../ShareDrawer/ShareDrawer';
-import { SceneShareDrawerState } from '../types';
-
-import { ShareExternally } from './share-externally/ShareExternally';
-import { ShareInternally } from './share-internally/ShareInternally';
-import { ShareSnapshot } from './share-snapshot/ShareSnapshot';
 
 const newShareButtonSelector = e2eSelectors.pages.Dashboard.DashNav.newShareButton.menu;
 
-type CustomDashboardDrawer = new (...args: SceneShareDrawerState[]) => SceneObject;
-
 export interface ShareDrawerMenuItem {
   shareId: string;
   testId: string;
@@ -39,17 +31,9 @@ export function addDashboardShareDrawerItem(item: ShareDrawerMenuItem) {
 }
 
 export default function ShareMenu({ dashboard, panel }: { dashboard: DashboardScene; panel?: VizPanel }) {
-  const onMenuItemClick = useCallback(
-    (title: string, component: CustomDashboardDrawer) => {
-      const drawer = new ShareDrawer({
-        title,
-        body: new component({ dashboardRef: dashboard.getRef(), panelRef: panel?.getRef() }),
-      });
-
-      dashboard.showModal(drawer);
-    },
-    [dashboard, panel]
-  );
+  const onMenuItemClick = (shareView: string) => {
+    locationService.partial({ shareView });
+  };
 
   const buildMenuItems = useCallback(() => {
     const menuItems: ShareDrawerMenuItem[] = [];
@@ -61,8 +45,7 @@ export default function ShareMenu({ dashboard, panel }: { dashboard: DashboardSc
       label: t('share-dashboard.menu.share-internally-title', 'Share internally'),
       description: t('share-dashboard.menu.share-internally-description', 'Advanced settings'),
       renderCondition: true,
-      onClick: () =>
-        onMenuItemClick(t('share-dashboard.menu.share-internally-title', 'Share internally'), ShareInternally),
+      onClick: () => onMenuItemClick(shareDashboardType.link),
     });
 
     menuItems.push({
@@ -72,7 +55,7 @@ export default function ShareMenu({ dashboard, panel }: { dashboard: DashboardSc
       label: t('share-dashboard.menu.share-externally-title', 'Share externally'),
       renderCondition: !panel && isPublicDashboardsEnabled(),
       onClick: () => {
-        onMenuItemClick(t('share-dashboard.menu.share-externally-title', 'Share externally'), ShareExternally);
+        onMenuItemClick(shareDashboardType.publicDashboard);
       },
     });
 
@@ -85,12 +68,12 @@ export default function ShareMenu({ dashboard, panel }: { dashboard: DashboardSc
       label: t('share-dashboard.menu.share-snapshot-title', 'Share snapshot'),
       renderCondition: contextSrv.isSignedIn && config.snapshotEnabled && dashboard.canEditDashboard(),
       onClick: () => {
-        onMenuItemClick(t('share-dashboard.menu.share-snapshot-title', 'Share snapshot'), ShareSnapshot);
+        onMenuItemClick(shareDashboardType.snapshot);
       },
     });
 
     return menuItems.filter((item) => item.renderCondition);
-  }, [onMenuItemClick, dashboard, panel]);
+  }, [panel, dashboard]);
 
   const onClick = (item: ShareDrawerMenuItem) => {
     DashboardInteractions.sharingCategoryClicked({
diff --git a/public/app/features/dashboard-scene/sharing/ShareButton/share-externally/ShareExternally.tsx b/public/app/features/dashboard-scene/sharing/ShareButton/share-externally/ShareExternally.tsx
index c2a97dcb22e..bc8e90fdcf1 100644
--- a/public/app/features/dashboard-scene/sharing/ShareButton/share-externally/ShareExternally.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareButton/share-externally/ShareExternally.tsx
@@ -20,11 +20,12 @@ import {
   PublicDashboardShareType,
 } from 'app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboardUtils';
 import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
+import { getDashboardSceneFor } from 'app/features/dashboard-scene/utils/utils';
 import { AccessControlAction } from 'app/types';
 
-import { getDashboardSceneFor } from '../../../utils/utils';
 import { ShareDrawerConfirmAction } from '../../ShareDrawer/ShareDrawerConfirmAction';
 import { useShareDrawerContext } from '../../ShareDrawer/ShareDrawerContext';
+import { SceneShareTabState, ShareView } from '../../types';
 
 import { EmailSharing } from './EmailShare/EmailSharing';
 import { PublicSharing } from './PublicShare/PublicSharing';
@@ -61,8 +62,12 @@ const getShareExternallyOptions = () => {
     : [getAnyOneWithTheLinkShareOption()];
 };
 
-export class ShareExternally extends SceneObjectBase {
+export class ShareExternally extends SceneObjectBase<SceneShareTabState> implements ShareView {
   static Component = ShareExternallyRenderer;
+
+  public getTabLabel() {
+    return t('share-dashboard.menu.share-externally-title', 'Share externally');
+  }
 }
 
 function ShareExternallyRenderer({ model }: SceneComponentProps<ShareExternally>) {
diff --git a/public/app/features/dashboard-scene/sharing/ShareButton/share-internally/ShareInternally.tsx b/public/app/features/dashboard-scene/sharing/ShareButton/share-internally/ShareInternally.tsx
index 031f0a5ad83..5fc5e6c8be4 100644
--- a/public/app/features/dashboard-scene/sharing/ShareButton/share-internally/ShareInternally.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareButton/share-internally/ShareInternally.tsx
@@ -1,18 +1,18 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { SceneComponentProps, SceneObjectRef, VizPanel } from '@grafana/scenes';
+import { SceneComponentProps } from '@grafana/scenes';
 import { Alert, ClipboardButton, Divider, Text, useStyles2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import ShareInternallyConfiguration from '../../ShareInternallyConfiguration';
-import { ShareLinkTab } from '../../ShareLinkTab';
+import { ShareLinkTab, ShareLinkTabState } from '../../ShareLinkTab';
 import { getShareLinkConfiguration, updateShareLinkConfiguration } from '../utils';
 
 export class ShareInternally extends ShareLinkTab {
   static Component = ShareInternallyRenderer;
 
-  constructor(state: { panelRef?: SceneObjectRef<VizPanel> }) {
+  constructor(state: Partial<ShareLinkTabState>) {
     const { useAbsoluteTimeRange, useShortUrl, theme } = getShareLinkConfiguration();
     super({
       ...state,
@@ -26,6 +26,10 @@ export class ShareInternally extends ShareLinkTab {
     this.onThemeChange = this.onThemeChange.bind(this);
   }
 
+  public getTabLabel() {
+    return t('share-dashboard.menu.share-internally-title', 'Share internally');
+  }
+
   async onToggleLockedTime() {
     const useLockedTime = !this.state.useLockedTime;
     updateShareLinkConfiguration({
diff --git a/public/app/features/dashboard-scene/sharing/ShareButton/share-snapshot/ShareSnapshot.tsx b/public/app/features/dashboard-scene/sharing/ShareButton/share-snapshot/ShareSnapshot.tsx
index 60ba8c30992..b893d98d7cc 100644
--- a/public/app/features/dashboard-scene/sharing/ShareButton/share-snapshot/ShareSnapshot.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareButton/share-snapshot/ShareSnapshot.tsx
@@ -4,18 +4,23 @@ import useAsyncFn from 'react-use/lib/useAsyncFn';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { SceneComponentProps } from '@grafana/scenes';
 import { Alert } from '@grafana/ui';
-import { Trans, t } from 'app/core/internationalization';
+import { t, Trans } from 'app/core/internationalization';
 
 import { ShareDrawerConfirmAction } from '../../ShareDrawer/ShareDrawerConfirmAction';
 import { ShareSnapshotTab } from '../../ShareSnapshotTab';
+import { ShareView } from '../../types';
 
 import { CreateSnapshot } from './CreateSnapshot';
 import { SnapshotActions } from './SnapshotActions';
 
 const selectors = e2eSelectors.pages.ShareDashboardDrawer.ShareSnapshot;
 
-export class ShareSnapshot extends ShareSnapshotTab {
+export class ShareSnapshot extends ShareSnapshotTab implements ShareView {
   static Component = ShareSnapshotRenderer;
+
+  public getTabLabel() {
+    return t('share-dashboard.menu.share-snapshot-title', 'Share snapshot');
+  }
 }
 
 function ShareSnapshotRenderer({ model }: SceneComponentProps<ShareSnapshot>) {
@@ -23,7 +28,7 @@ function ShareSnapshotRenderer({ model }: SceneComponentProps<ShareSnapshot>) {
   const [showDeletedAlert, setShowDeletedAlert] = useState(false);
   const [step, setStep] = useState(1);
 
-  const { snapshotName, snapshotSharingOptions, selectedExpireOption, dashboardRef, panelRef } = model.useState();
+  const { snapshotName, snapshotSharingOptions, selectedExpireOption, panelRef, onDismiss } = model.useState();
 
   const [snapshotResult, createSnapshot] = useAsyncFn(async (external = false) => {
     const response = await model.onSnapshotCreate(external);
@@ -39,7 +44,7 @@ function ShareSnapshotRenderer({ model }: SceneComponentProps<ShareSnapshot>) {
   });
 
   const onCancelClick = () => {
-    dashboardRef.resolve().closeModal();
+    onDismiss?.();
   };
 
   if (showDeleteConfirmation) {
diff --git a/public/app/features/dashboard-scene/sharing/ShareDrawer/ShareDrawer.tsx b/public/app/features/dashboard-scene/sharing/ShareDrawer/ShareDrawer.tsx
index a183ca49416..e06e31549a4 100644
--- a/public/app/features/dashboard-scene/sharing/ShareDrawer/ShareDrawer.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareDrawer/ShareDrawer.tsx
@@ -1,40 +1,117 @@
-import {
-  SceneComponentProps,
-  SceneObject,
-  SceneObjectBase,
-  SceneObjectRef,
-  SceneObjectState,
-  VizPanel,
-} from '@grafana/scenes';
+import { locationService } from '@grafana/runtime';
+import { SceneComponentProps, SceneObjectBase, SceneObjectRef, SceneObjectState, VizPanel } from '@grafana/scenes';
 import { Drawer } from '@grafana/ui';
 
+import { shareDashboardType } from '../../../dashboard/components/ShareModal/utils';
+import { DashboardScene } from '../../scene/DashboardScene';
 import { getDashboardSceneFor } from '../../utils/utils';
-import { ModalSceneObjectLike } from '../types';
+import { ExportAsJson } from '../ExportButton/ExportAsJson';
+import { ShareExternally } from '../ShareButton/share-externally/ShareExternally';
+import { ShareInternally } from '../ShareButton/share-internally/ShareInternally';
+import { ShareSnapshot } from '../ShareButton/share-snapshot/ShareSnapshot';
+import { ShareLibraryPanelTab } from '../ShareLibraryPanelTab';
+import { SharePanelEmbedTab } from '../SharePanelEmbedTab';
+import { SharePanelInternally } from '../panel-share/SharePanelInternally';
+import { ModalSceneObjectLike, SceneShareTabState, ShareView } from '../types';
 
 import { ShareDrawerContext } from './ShareDrawerContext';
 
 export interface ShareDrawerState extends SceneObjectState {
-  title: string;
   panelRef?: SceneObjectRef<VizPanel>;
-  body: SceneObject;
+  shareView: string;
+  activeShare: ShareView;
+}
+
+type CustomShareViewType = { id: string; shareOption: new (...args: SceneShareTabState[]) => ShareView };
+const customShareViewOptions: CustomShareViewType[] = [];
+
+export function addDashboardShareView(shareView: CustomShareViewType) {
+  customShareViewOptions.push(shareView);
 }
 
 export class ShareDrawer extends SceneObjectBase<ShareDrawerState> implements ModalSceneObjectLike {
   static Component = ShareDrawerRenderer;
 
+  constructor(state: Omit<ShareDrawerState, 'activeShare'>) {
+    super({ ...state, activeShare: new ShareInternally({}) });
+    this.addActivationHandler(() => this.buildActiveShare(state.shareView!));
+  }
+
   onDismiss = () => {
-    const dashboard = getDashboardSceneFor(this);
-    dashboard.closeModal();
+    if (this.state.panelRef) {
+      const dashboard = getDashboardSceneFor(this);
+      dashboard.closeModal();
+    } else {
+      locationService.partial({ shareView: null });
+    }
   };
+
+  private buildActiveShare(shareView: string) {
+    const { panelRef } = this.state;
+    const dashboard = getDashboardSceneFor(this);
+
+    const activeShare = panelRef
+      ? getPanelShareView(shareView, this.onDismiss, dashboard.getRef(), panelRef)
+      : getShareView(shareView, this.onDismiss, dashboard.getRef(), panelRef);
+
+    this.setState({ activeShare });
+  }
 }
 
 function ShareDrawerRenderer({ model }: SceneComponentProps<ShareDrawer>) {
-  const { title, body } = model.useState();
+  const { activeShare } = model.useState();
   const dashboard = getDashboardSceneFor(model);
 
   return (
-    <Drawer title={title} onClose={model.onDismiss} size="md">
-      <ShareDrawerContext.Provider value={{ dashboard }}>{<body.Component model={body} />}</ShareDrawerContext.Provider>
+    <Drawer title={activeShare.getTabLabel()} onClose={model.onDismiss} size="md">
+      <ShareDrawerContext.Provider value={{ dashboard }}>
+        {<activeShare.Component model={activeShare} />}
+      </ShareDrawerContext.Provider>
     </Drawer>
   );
 }
+
+function getShareView(
+  shareView: string,
+  onDismiss: () => void,
+  dashboardRef: SceneObjectRef<DashboardScene>,
+  panelRef?: SceneObjectRef<VizPanel>
+): ShareView {
+  const currentShareView = customShareViewOptions.find((s) => s.id === shareView);
+  if (currentShareView) {
+    return new currentShareView.shareOption({ onDismiss });
+  }
+
+  switch (shareView) {
+    case shareDashboardType.link:
+      return new ShareInternally({ onDismiss });
+    case shareDashboardType.publicDashboard:
+      return new ShareExternally({ onDismiss });
+    case shareDashboardType.snapshot:
+      return new ShareSnapshot({ dashboardRef, panelRef, onDismiss });
+    case shareDashboardType.export:
+      return new ExportAsJson({ onDismiss });
+    default:
+      return new ShareInternally({ onDismiss });
+  }
+}
+
+function getPanelShareView(
+  shareView: string,
+  onDismiss: () => void,
+  dashboardRef: SceneObjectRef<DashboardScene>,
+  panelRef: SceneObjectRef<VizPanel>
+): ShareView {
+  switch (shareView) {
+    case shareDashboardType.link:
+      return new SharePanelInternally({ panelRef, onDismiss });
+    case shareDashboardType.snapshot:
+      return new ShareSnapshot({ dashboardRef, panelRef, onDismiss });
+    case shareDashboardType.embed:
+      return new SharePanelEmbedTab({ panelRef, onDismiss });
+    case shareDashboardType.libraryPanel:
+      return new ShareLibraryPanelTab({ panelRef, onDismiss });
+    default:
+      return new SharePanelInternally({ panelRef, onDismiss });
+  }
+}
diff --git a/public/app/features/dashboard-scene/sharing/ShareExportTab.tsx b/public/app/features/dashboard-scene/sharing/ShareExportTab.tsx
index 6ec5e4138bb..624452bb6fe 100644
--- a/public/app/features/dashboard-scene/sharing/ShareExportTab.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareExportTab.tsx
@@ -14,14 +14,14 @@ import { getVariablesCompatibility } from '../utils/getVariablesCompatibility';
 import { DashboardInteractions } from '../utils/interactions';
 import { getDashboardSceneFor } from '../utils/utils';
 
-import { SceneShareTabState } from './types';
+import { SceneShareTabState, ShareView } from './types';
 
 export interface ShareExportTabState extends SceneShareTabState {
   isSharingExternally?: boolean;
   isViewingJSON?: boolean;
 }
 
-export class ShareExportTab extends SceneObjectBase<ShareExportTabState> {
+export class ShareExportTab extends SceneObjectBase<ShareExportTabState> implements ShareView {
   public tabId = shareDashboardType.export;
   static Component = ShareExportTabRenderer;
 
diff --git a/public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx b/public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx
index fb4eb35d9e8..c9341721896 100644
--- a/public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx
@@ -1,3 +1,4 @@
+import { config } from '@grafana/runtime';
 import { SceneComponentProps, SceneObjectBase, SceneObjectRef, VizPanel } from '@grafana/scenes';
 import { LibraryPanel } from '@grafana/schema/dist/esm/index.gen';
 import { t } from 'app/core/internationalization';
@@ -20,7 +21,9 @@ export class ShareLibraryPanelTab extends SceneObjectBase<ShareLibraryPanelTabSt
   static Component = ShareLibraryPanelTabRenderer;
 
   public getTabLabel() {
-    return t('share-modal.tab-title.library-panel', 'Library panel');
+    return config.featureToggles.newDashboardSharingComponent
+      ? t('share-panel.drawer.new-library-panel-title', 'New library panel')
+      : t('share-modal.tab-title.library-panel', 'Library panel');
   }
 }
 
diff --git a/public/app/features/dashboard-scene/sharing/ShareLinkTab.tsx b/public/app/features/dashboard-scene/sharing/ShareLinkTab.tsx
index 3a1ae740f1e..02436ca3879 100644
--- a/public/app/features/dashboard-scene/sharing/ShareLinkTab.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareLinkTab.tsx
@@ -13,7 +13,7 @@ import { DashboardInteractions } from '../utils/interactions';
 import { getDashboardUrl } from '../utils/urlBuilders';
 import { getDashboardSceneFor } from '../utils/utils';
 
-import { SceneShareTabState } from './types';
+import { SceneShareTabState, ShareView } from './types';
 export interface ShareLinkTabState extends SceneShareTabState, ShareOptions {
   panelRef?: SceneObjectRef<VizPanel>;
 }
@@ -30,7 +30,7 @@ interface ShareOptions extends ShareLinkConfiguration {
   isBuildUrlLoading: boolean;
 }
 
-export class ShareLinkTab extends SceneObjectBase<ShareLinkTabState> {
+export class ShareLinkTab extends SceneObjectBase<ShareLinkTabState> implements ShareView {
   public tabId = shareDashboardType.link;
 
   static Component = ShareLinkTabRenderer;
diff --git a/public/app/features/dashboard-scene/sharing/SharePanelEmbedTab.tsx b/public/app/features/dashboard-scene/sharing/SharePanelEmbedTab.tsx
index 23fe123d2e4..b679f4be329 100644
--- a/public/app/features/dashboard-scene/sharing/SharePanelEmbedTab.tsx
+++ b/public/app/features/dashboard-scene/sharing/SharePanelEmbedTab.tsx
@@ -1,4 +1,5 @@
 import { TimeRange } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { SceneComponentProps, sceneGraph, SceneObjectBase, SceneObjectRef, VizPanel } from '@grafana/scenes';
 import { t } from 'app/core/internationalization';
 import { ShareEmbed } from 'app/features/dashboard/components/ShareModal/ShareEmbed';
@@ -24,7 +25,9 @@ export class SharePanelEmbedTab extends SceneObjectBase<SharePanelEmbedTabState>
   }
 
   public getTabLabel() {
-    return t('share-modal.tab-title.panel-embed', 'Embed');
+    return config.featureToggles.newDashboardSharingComponent
+      ? t('share-panel.drawer.share-embed-title', 'Share embed')
+      : t('share-modal.tab-title.panel-embed', 'Embed');
   }
 }
 
diff --git a/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx b/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx
index 1e25452f58b..32eb43f1041 100644
--- a/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx
+++ b/public/app/features/dashboard-scene/sharing/ShareSnapshotTab.tsx
@@ -16,7 +16,7 @@ import { DashboardScene } from '../scene/DashboardScene';
 import { transformSceneToSaveModel, trimDashboardForSnapshot } from '../serialization/transformSceneToSaveModel';
 import { DashboardInteractions } from '../utils/interactions';
 
-import { SceneShareTabState } from './types';
+import { SceneShareTabState, ShareView } from './types';
 
 const selectors = e2eSelectors.pages.ShareDashboardModal.SnapshotScene;
 
@@ -55,7 +55,7 @@ export interface ShareSnapshotTabState extends SceneShareTabState {
   snapshotSharingOptions?: SnapshotSharingOptions;
 }
 
-export class ShareSnapshotTab extends SceneObjectBase<ShareSnapshotTabState> {
+export class ShareSnapshotTab extends SceneObjectBase<ShareSnapshotTabState> implements ShareView {
   public tabId = shareDashboardType.snapshot;
   static Component = ShareSnapshotTabRenderer;
 
diff --git a/public/app/features/dashboard-scene/sharing/panel-share/SharePanelInternally.tsx b/public/app/features/dashboard-scene/sharing/panel-share/SharePanelInternally.tsx
index 040625c68b2..11f9af59a48 100644
--- a/public/app/features/dashboard-scene/sharing/panel-share/SharePanelInternally.tsx
+++ b/public/app/features/dashboard-scene/sharing/panel-share/SharePanelInternally.tsx
@@ -2,27 +2,30 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { SceneComponentProps, SceneObjectRef, VizPanel } from '@grafana/scenes';
+import { SceneComponentProps } from '@grafana/scenes';
 import { Alert, ClipboardButton, Divider, LinkButton, Stack, Text, useStyles2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { getDashboardSceneFor } from '../../utils/utils';
 import ShareInternallyConfiguration from '../ShareInternallyConfiguration';
-import { ShareLinkTab } from '../ShareLinkTab';
+import { ShareLinkTab, ShareLinkTabState } from '../ShareLinkTab';
 
 export class SharePanelInternally extends ShareLinkTab {
   static Component = SharePanelInternallyRenderer;
 
-  constructor({ panelRef }: { panelRef?: SceneObjectRef<VizPanel> }) {
-    super({
-      panelRef,
-    });
+  constructor(state: Partial<ShareLinkTabState>) {
+    super(state);
+  }
+
+  public getTabLabel() {
+    return t('share-panel.drawer.share-link-title', 'Link settings');
   }
 }
 
 function SharePanelInternallyRenderer({ model }: SceneComponentProps<SharePanelInternally>) {
   const styles = useStyles2(getStyles);
   const { useLockedTime, useShortUrl, selectedTheme, isBuildUrlLoading, imageUrl } = model.useState();
+
   const dashboard = getDashboardSceneFor(model);
   const isDashboardSaved = Boolean(dashboard.state.uid);
 
diff --git a/public/app/features/dashboard-scene/sharing/types.ts b/public/app/features/dashboard-scene/sharing/types.ts
index 6531995ac2f..d6c93a7eb2a 100644
--- a/public/app/features/dashboard-scene/sharing/types.ts
+++ b/public/app/features/dashboard-scene/sharing/types.ts
@@ -1,12 +1,10 @@
-import { SceneObject, SceneObjectRef, SceneObjectState, VizPanel } from '@grafana/scenes';
-
-import { DashboardScene } from '../scene/DashboardScene';
+import { SceneObject, SceneObjectRef, SceneObjectState } from '@grafana/scenes';
 
 export interface ModalSceneObjectLike {
   onDismiss: () => void;
 }
 
-export interface SceneShareTabState extends SceneObjectState {
+export interface SceneShareTabState extends SceneObjectState, Partial<ModalSceneObjectLike> {
   modalRef?: SceneObjectRef<ModalSceneObjectLike>;
 }
 
@@ -15,7 +13,6 @@ export interface SceneShareTab<T extends SceneShareTabState = SceneShareTabState
   tabId: string;
 }
 
-export interface SceneShareDrawerState extends SceneObjectState {
-  dashboardRef: SceneObjectRef<DashboardScene>;
-  panelRef?: SceneObjectRef<VizPanel>;
+export interface ShareView extends SceneObject {
+  getTabLabel(): string;
 }
diff --git a/public/app/features/dashboard/components/DashNav/ShareButton.tsx b/public/app/features/dashboard/components/DashNav/ShareButton.tsx
index 5a73143687e..2e794b97c8c 100644
--- a/public/app/features/dashboard/components/DashNav/ShareButton.tsx
+++ b/public/app/features/dashboard/components/DashNav/ShareButton.tsx
@@ -5,6 +5,8 @@ import { Trans } from 'app/core/internationalization';
 import { DashboardModel } from 'app/features/dashboard/state';
 import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
 
+import { shareDashboardType } from '../ShareModal/utils';
+
 export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
   return (
     <Button
@@ -13,7 +15,7 @@ export const ShareButton = ({ dashboard }: { dashboard: DashboardModel }) => {
       size="sm"
       onClick={() => {
         DashboardInteractions.toolbarShareClick();
-        locationService.partial({ shareView: 'link' });
+        locationService.partial({ shareView: shareDashboardType.link });
       }}
     >
       <Trans i18nKey="dashboard.toolbar.share-button">Share</Trans>
diff --git a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
index def9aee5f5c..26b99f5e126 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
@@ -70,7 +70,7 @@ export function ShareEmbed({ panel, dashboard, range, onCancelClick, buildIframe
       <Field>
         <Stack gap={1} alignItems="start">
           <Switch
-            label={t('share-modal.embed.time-range', 'Time range')}
+            label={t('share-modal.embed.time-range', 'Lock time range')}
             id="share-current-time-range"
             value={useCurrentTimeRange}
             onChange={onUseCurrentTimeRangeChange}
@@ -81,7 +81,7 @@ export function ShareEmbed({ panel, dashboard, range, onCancelClick, buildIframe
               'Change the current relative time range to an absolute time range'
             )}
           >
-            <Trans i18nKey="embed.share.time-range-label">Time range</Trans>
+            <Trans i18nKey="embed.share.time-range-label">Lock time range</Trans>
           </Label>
         </Stack>
       </Field>
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 81e2f412c07..bdff7757373 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -704,7 +704,7 @@
   "embed": {
     "share": {
       "time-range-description": "Change the current relative time range to an absolute time range",
-      "time-range-label": "Time range"
+      "time-range-label": "Lock time range"
     }
   },
   "explore": {
@@ -2244,7 +2244,7 @@
       "html": "Embed HTML",
       "html-description": "The HTML code below can be pasted and included in another web page. Unless anonymous access is enabled, the user viewing that page need to be signed into Grafana for the graph to load.",
       "info": "Generate HTML for embedding an iframe with this panel.",
-      "time-range": "Time range"
+      "time-range": "Lock time range"
     },
     "export": {
       "back-button": "Back to export config",
@@ -2316,8 +2316,7 @@
     "drawer": {
       "new-library-panel-title": "New library panel",
       "share-embed-title": "Share embed",
-      "share-link-title": "Link settings",
-      "share-snapshot-title": "Share snapshot"
+      "share-link-title": "Link settings"
     },
     "menu": {
       "new-library-panel-title": "New library panel",
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index c7bd960da56..8687fb0f5ac 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -704,7 +704,7 @@
   "embed": {
     "share": {
       "time-range-description": "Cĥäʼnģę ŧĥę čūřřęʼnŧ řęľäŧįvę ŧįmę řäʼnģę ŧő äʼn äþşőľūŧę ŧįmę řäʼnģę",
-      "time-range-label": "Ŧįmę řäʼnģę"
+      "time-range-label": "Ŀőčĸ ŧįmę řäʼnģę"
     }
   },
   "explore": {
@@ -2244,7 +2244,7 @@
       "html": "Ēmþęđ ĦŦMĿ",
       "html-description": "Ŧĥę ĦŦMĿ čőđę þęľőŵ čäʼn þę päşŧęđ äʼnđ įʼnčľūđęđ įʼn äʼnőŧĥęř ŵęþ päģę. Ůʼnľęşş äʼnőʼnymőūş äččęşş įş ęʼnäþľęđ, ŧĥę ūşęř vįęŵįʼnģ ŧĥäŧ päģę ʼnęęđ ŧő þę şįģʼnęđ įʼnŧő Ğřäƒäʼnä ƒőř ŧĥę ģřäpĥ ŧő ľőäđ.",
       "info": "Ğęʼnęřäŧę ĦŦMĿ ƒőř ęmþęđđįʼnģ äʼn įƒřämę ŵįŧĥ ŧĥįş päʼnęľ.",
-      "time-range": "Ŧįmę řäʼnģę"
+      "time-range": "Ŀőčĸ ŧįmę řäʼnģę"
     },
     "export": {
       "back-button": "ßäčĸ ŧő ęχpőřŧ čőʼnƒįģ",
@@ -2316,8 +2316,7 @@
     "drawer": {
       "new-library-panel-title": "Ńęŵ ľįþřäřy päʼnęľ",
       "share-embed-title": "Ŝĥäřę ęmþęđ",
-      "share-link-title": "Ŀįʼnĸ şęŧŧįʼnģş",
-      "share-snapshot-title": "Ŝĥäřę şʼnäpşĥőŧ"
+      "share-link-title": "Ŀįʼnĸ şęŧŧįʼnģş"
     },
     "menu": {
       "new-library-panel-title": "Ńęŵ ľįþřäřy päʼnęľ",