[Dashboard First] By Reference Badge

src/plugins/dashboard/public/application/actions/index.ts

@@ -42,3 +42,8 @@ export {
   UnlinkFromLibraryActionContext,
   ACTION_UNLINK_FROM_LIBRARY,
 } from './unlink_from_library_action';
+export {
+  LibraryNotificationActionContext,
+  LibraryNotificationAction,
+  ACTION_LIBRARY_NOTIFICATION,
+} from './library_notification_action';

src/plugins/dashboard/public/application/actions/library_notification_action.tsx

@@ -0,0 +1,70 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { IEmbeddable, ViewMode, isReferenceOrValueEmbeddable } from '../../embeddable_plugin';
+import { ActionByType, IncompatibleActionError } from '../../ui_actions_plugin';
+
+export const ACTION_LIBRARY_NOTIFICATION = 'ACTION_LIBRARY_NOTIFICATION';
+
+export interface LibraryNotificationActionContext {
+  embeddable: IEmbeddable;
+}
+
+export class LibraryNotificationAction implements ActionByType<typeof ACTION_LIBRARY_NOTIFICATION> {
+  public readonly id = ACTION_LIBRARY_NOTIFICATION;
+  public readonly type = ACTION_LIBRARY_NOTIFICATION;
+  public readonly order = 1;
+
+  public getDisplayName({ embeddable }: LibraryNotificationActionContext) {
+    if (!embeddable.getRoot() || !embeddable.getRoot().isContainer) {
+      throw new IncompatibleActionError();
+    }
+    return i18n.translate('dashboard.panel.LibraryNotification', {
+      defaultMessage: 'Library',
+    });
+  }
+
+  public getIconType({ embeddable }: LibraryNotificationActionContext) {
+    if (!embeddable.getRoot() || !embeddable.getRoot().isContainer) {
+      throw new IncompatibleActionError();
+    }
+    return 'folderCheck';
+  }
+
+  public getDisplayNameTooltip = ({ embeddable }: LibraryNotificationActionContext) => {
+    if (!embeddable.getRoot() || !embeddable.getRoot().isContainer) {
+      throw new IncompatibleActionError();
+    }
+    return i18n.translate('dashboard.panel.libraryNotification.toolTip', {
+      defaultMessage:
+        'This panel is linked to a Library item. Editing the panel might affect other dashboards.',
+    });
+  };
+
+  public isCompatible = async ({ embeddable }: LibraryNotificationActionContext) => {
+    return Boolean(
+      embeddable.getInput()?.viewMode !== ViewMode.VIEW &&
+        isReferenceOrValueEmbeddable(embeddable) &&
+        embeddable.inputIsRefType(embeddable.getInput())
+    );
+  };
+
+  public execute = async () => {};
+}

src/plugins/dashboard/public/plugin.tsx

@@ -40,6 +40,7 @@ import {
   EmbeddableStart,
   SavedObjectEmbeddableInput,
   EmbeddableInput,
+  PANEL_NOTIFICATION_TRIGGER,
 } from '../../embeddable/public';
 import { DataPublicPluginSetup, DataPublicPluginStart, esFilters } from '../../data/public';
 import { SharePluginSetup, SharePluginStart, UrlGeneratorContract } from '../../share/public';
@@ -83,6 +84,12 @@ import {
   ACTION_UNLINK_FROM_LIBRARY,
   UnlinkFromLibraryActionContext,
   UnlinkFromLibraryAction,
+  ACTION_ADD_TO_LIBRARY,
+  AddToLibraryActionContext,
+  AddToLibraryAction,
+  ACTION_LIBRARY_NOTIFICATION,
+  LibraryNotificationActionContext,
+  LibraryNotificationAction,
 } from './application';
 import {
   createDashboardUrlGenerator,
@@ -95,11 +102,6 @@ import { addEmbeddableToDashboardUrl } from './url_utils/url_helper';
 import { PlaceholderEmbeddableFactory } from './application/embeddable/placeholder';
 import { UrlGeneratorState } from '../../share/public';
 import { AttributeService } from '.';
-import {
-  AddToLibraryAction,
-  ACTION_ADD_TO_LIBRARY,
-  AddToLibraryActionContext,
-} from './application/actions/add_to_library_action';
 
 declare module '../../share/public' {
   export interface UrlGeneratorStateMapping {
@@ -162,6 +164,7 @@ declare module '../../../plugins/ui_actions/public' {
     [ACTION_CLONE_PANEL]: ClonePanelActionContext;
     [ACTION_ADD_TO_LIBRARY]: AddToLibraryActionContext;
     [ACTION_UNLINK_FROM_LIBRARY]: UnlinkFromLibraryActionContext;
+    [ACTION_LIBRARY_NOTIFICATION]: LibraryNotificationActionContext;
   }
 }
 
@@ -437,6 +440,10 @@ export class DashboardPlugin
       const unlinkFromLibraryAction = new UnlinkFromLibraryAction();
       uiActions.registerAction(unlinkFromLibraryAction);
       uiActions.attachAction(CONTEXT_MENU_TRIGGER, unlinkFromLibraryAction.id);
+
+      const libraryNotificationAction = new LibraryNotificationAction();
+      uiActions.registerAction(libraryNotificationAction);
+      uiActions.attachAction(PANEL_NOTIFICATION_TRIGGER, libraryNotificationAction.id);
     }
 
     const savedDashboardLoader = createSavedDashboardLoader({

src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx

@@ -64,8 +64,19 @@ function renderNotifications(
 ) {
   return notifications.map((notification) => {
     const context = { embeddable };
+    const iconType = notification.getIconType({ ...context, trigger: panelNotificationTrigger });
 
-    let badge = (
+    let badge = iconType ? (
+      <EuiBadge
+        data-test-subj={`embeddablePanelNotification-${notification.id}`}
+        iconType={iconType}
+        key={notification.id}
+        style={{ marginTop: '2px', marginRight: '4px' }}
+        color="hollow"
+      >
+        {notification.getDisplayName({ ...context, trigger: panelNotificationTrigger })}
+      </EuiBadge>
+    ) : (
       <EuiNotificationBadge
         data-test-subj={`embeddablePanelNotification-${notification.id}`}
         key={notification.id}