From 1056cc6a0d6c0e7a541ce0eee7e3a36c9a3eb7f4 Mon Sep 17 00:00:00 2001
From: Lucy Chen <140550297+lucychen-grafana@users.noreply.github.com>
Date: Tue, 20 Aug 2024 09:56:10 -0400
Subject: [PATCH] Share Panel: Library panels feature (#91419)

---
 .../scene/PanelMenuBehavior.tsx               | 37 +++++++++++++------
 .../sharing/ShareLibraryPanelTab.tsx          |  2 +-
 .../AddLibraryPanelModal.tsx                  | 32 ++++++++++------
 public/locales/en-US/grafana.json             |  6 +++
 public/locales/pseudo-LOCALE/grafana.json     |  6 +++
 5 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx b/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx
index 9a736dc2936..35ac461c992 100644
--- a/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx
+++ b/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,
+                })
+              );
+            },
+          });
+        }
       }
     }
 
diff --git a/public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx b/public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx
index 435601736a4..fb4eb35d9e8 100644
--- a/public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx
+++ b/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)}
       />
diff --git a/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx b/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
index 15c0a7d4622..afa39633756 100644
--- a/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
+++ b/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>
+      )}
     </>
   );
 };
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 7858779fd21..a0753371a30 100644
--- a/public/locales/en-US/grafana.json
+++ b/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": {
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index deafbde58f3..ac9ac502962 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/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": {