Share Panel: Library panels feature (#91419)

public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx

@@ -24,6 +24,7 @@ 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';
@@ -186,17 +187,31 @@ export function panelMenuBehavior(menu: VizPanelMenu, isRepeat = false) {
           },
         });
       } else {
-        moreSubMenu.push({
-          text: t('panel.header-menu.create-library-panel', `Create library panel`),
-          onClick: () => {
-            dashboard.showModal(
-              new ShareModal({
-                panelRef: panel.getRef(),
-                activeTab: shareDashboardType.libraryPanel,
-              })
-            );
-          },
-        });
+        if (config.featureToggles.newDashboardSharingComponent) {
+          moreSubMenu.push({
+            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() }),
+              });
+
+              dashboard.showModal(drawer);
+            },
+          });
+        } else {
+          moreSubMenu.push({
+            text: t('panel.header-menu.create-library-panel', `Create library panel`),
+            onClick: () => {
+              dashboard.showModal(
+                new ShareModal({
+                  panelRef: panel.getRef(),
+                  activeTab: shareDashboardType.libraryPanel,
+                })
+              );
+            },
+          });
+        }
       }
     }
 

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

@@ -48,7 +48,7 @@ function ShareLibraryPanelTabRenderer({ model }: SceneComponentProps<ShareLibrar
         dashboard={dashboardModel}
         panel={panelModel}
         onDismiss={() => {
-          modalRef?.resolve().onDismiss();
+          modalRef ? modalRef.resolve().onDismiss() : dashboardScene.closeModal();
         }}
         onCreateLibraryPanel={(libPanel: LibraryPanel) => dashboardScene.createLibraryPanel(panel, libPanel)}
       />

public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useAsync, useDebounce } from 'react-use';
 
-import { FetchError, isFetchError } from '@grafana/runtime';
+import { config, FetchError, isFetchError } from '@grafana/runtime';
 import { LibraryPanel } from '@grafana/schema/dist/esm/index.gen';
-import { Button, Field, Input, Modal } from '@grafana/ui';
+import { Button, Field, Input, Modal, Stack } from '@grafana/ui';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { t, Trans } from 'app/core/internationalization';
 
@@ -91,15 +91,25 @@ export const AddLibraryPanelContents = ({
           inputId="share-panel-library-panel-folder-picker"
         />
       </Field>
-
-      <Modal.ButtonRow>
-        <Button variant="secondary" onClick={onDismiss} fill="outline">
-          <Trans i18nKey="library-panel.add-modal.cancel">Cancel</Trans>
-        </Button>
-        <Button onClick={onCreate} disabled={invalidInput}>
-          <Trans i18nKey="library-panel.add-modal.create">Create library panel</Trans>
-        </Button>
-      </Modal.ButtonRow>
+      {config.featureToggles.newDashboardSharingComponent ? (
+        <Stack gap={1} justifyContent={'start'}>
+          <Button onClick={onCreate} disabled={invalidInput}>
+            <Trans i18nKey="share-panel.new-library-panel.create-button">Create library panel</Trans>
+          </Button>
+          <Button variant="secondary" onClick={onDismiss} fill="outline">
+            <Trans i18nKey="share-panel.new-library-panel.cancel-button">Cancel</Trans>
+          </Button>
+        </Stack>
+      ) : (
+        <Modal.ButtonRow>
+          <Button variant="secondary" onClick={onDismiss} fill="outline">
+            <Trans i18nKey="library-panel.add-modal.cancel">Cancel</Trans>
+          </Button>
+          <Button onClick={onCreate} disabled={invalidInput}>
+            <Trans i18nKey="library-panel.add-modal.create">Create library panel</Trans>
+          </Button>
+        </Modal.ButtonRow>
+      )}
     </>
   );
 };

public/locales/en-US/grafana.json

@@ -2156,14 +2156,20 @@
   },
   "share-panel": {
     "drawer": {
+      "new-library-panel-title": "New library panel",
       "share-embed-title": "Share embed",
       "share-link-title": "Link settings",
       "share-snapshot-title": "Share snapshot"
     },
     "menu": {
+      "new-library-panel-title": "New library panel",
       "share-embed-title": "Share embed",
       "share-link-title": "Share link",
       "share-snapshot-title": "Share snapshot"
+    },
+    "new-library-panel": {
+      "cancel-button": "Cancel",
+      "create-button": "Create library panel"
     }
   },
   "share-playlist": {

public/locales/pseudo-LOCALE/grafana.json

@@ -2156,14 +2156,20 @@
   },
   "share-panel": {
     "drawer": {
+      "new-library-panel-title": "Ńęŵ ľįþřäřy päʼnęľ",
       "share-embed-title": "Ŝĥäřę ęmþęđ",
       "share-link-title": "Ŀįʼnĸ şęŧŧįʼnģş",
       "share-snapshot-title": "Ŝĥäřę şʼnäpşĥőŧ"
     },
     "menu": {
+      "new-library-panel-title": "Ńęŵ ľįþřäřy päʼnęľ",
       "share-embed-title": "Ŝĥäřę ęmþęđ",
       "share-link-title": "Ŝĥäřę ľįʼnĸ",
       "share-snapshot-title": "Ŝĥäřę şʼnäpşĥőŧ"
+    },
+    "new-library-panel": {
+      "cancel-button": "Cäʼnčęľ",
+      "create-button": "Cřęäŧę ľįþřäřy päʼnęľ"
     }
   },
   "share-playlist": {