Schema: Add schema for library panels (#62169)

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

@@ -62,7 +62,7 @@ interface FolderLinkProps {
 function FolderLink({ libraryPanel }: FolderLinkProps): ReactElement | null {
   const styles = useStyles2(getStyles);
 
-  if (!libraryPanel.meta.folderUid && !libraryPanel.meta.folderName) {
+  if (!libraryPanel.meta?.folderUid && !libraryPanel.meta?.folderName) {
     return null;
   }
 

public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.test.tsx

@@ -4,11 +4,12 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { PanelPluginMeta, PluginType } from '@grafana/data';
+import { Panel } from '@grafana/schema';
 
 import { backendSrv } from '../../../../core/services/backend_srv';
 import * as panelUtils from '../../../panel/state/util';
 import * as api from '../../state/api';
-import { LibraryElementKind, LibraryElementsSearchResult } from '../../types';
+import { LibraryElementsSearchResult } from '../../types';
 
 import { LibraryPanelsSearch, LibraryPanelsSearchProps } from './LibraryPanelsSearch';
 
@@ -182,15 +183,12 @@ describe('LibraryPanelsSearch', () => {
           {
             elements: [
               {
-                id: 1,
                 name: 'Library Panel Name',
-                kind: LibraryElementKind.Panel,
                 uid: 'uid',
                 description: 'Library Panel Description',
                 folderUid: '',
-                model: { type: 'timeseries', title: 'A title' },
+                model: { type: 'timeseries', title: 'A title' } as Panel,
                 type: 'timeseries',
-                orgId: 1,
                 version: 1,
                 meta: {
                   folderName: 'General',
@@ -237,15 +235,12 @@ describe('LibraryPanelsSearch', () => {
           perPage: 40,
           elements: [
             {
-              id: 1,
               name: 'Library Panel Name',
-              kind: LibraryElementKind.Panel,
               uid: 'uid',
               description: 'Library Panel Description',
               folderUid: '',
-              model: { type: 'timeseries', title: 'A title' },
+              model: { type: 'timeseries', title: 'A title' } as Panel,
               type: 'timeseries',
-              orgId: 1,
               version: 1,
               meta: {
                 folderName: 'General',
@@ -281,15 +276,12 @@ describe('LibraryPanelsSearch', () => {
           perPage: 40,
           elements: [
             {
-              id: 1,
               name: 'Library Panel Name',
-              kind: LibraryElementKind.Panel,
               uid: 'uid',
               description: 'Library Panel Description',
               folderUid: '',
-              model: { type: 'timeseries', title: 'A title' },
+              model: { type: 'timeseries', title: 'A title' } as Panel,
               type: 'timeseries',
-              orgId: 1,
               version: 1,
               meta: {
                 folderName: 'General',

public/app/features/library-panels/components/LibraryPanelsView/reducer.test.ts

@@ -1,7 +1,8 @@
 import { LoadingState } from '@grafana/data';
+import { Panel } from '@grafana/schema';
 
 import { reducerTester } from '../../../../../test/core/redux/reducerTester';
-import { LibraryElementDTO, LibraryElementKind } from '../../types';
+import { LibraryElementDTO } from '../../types';
 
 import {
   changePage,
@@ -93,7 +94,6 @@ function getLibraryPanelMocks(count: number): LibraryElementDTO[] {
     mocks.push(
       mockLibraryPanel({
         uid: i.toString(10),
-        id: i,
         name: `Test Panel ${i}`,
       })
     );
@@ -104,11 +104,9 @@ function getLibraryPanelMocks(count: number): LibraryElementDTO[] {
 
 function mockLibraryPanel({
   uid = '1',
-  id = 1,
-  orgId = 1,
   folderUid = '',
   name = 'Test Panel',
-  model = { type: 'text', title: 'Test Panel' },
+  model = { type: 'text', title: 'Test Panel' } as Panel,
   meta = {
     folderName: 'General',
     folderUid: '',
@@ -124,11 +122,8 @@ function mockLibraryPanel({
 }: Partial<LibraryElementDTO> = {}): LibraryElementDTO {
   return {
     uid,
-    id,
-    orgId,
     folderUid,
     name,
-    kind: LibraryElementKind.Panel,
     model,
     version,
     meta,

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

@@ -64,8 +64,8 @@ export const SaveLibraryPanelModal = ({
         <p className={styles.textInfo}>
           {'This update will affect '}
           <strong>
-            {panel.libraryPanel.meta.connectedDashboards}{' '}
-            {panel.libraryPanel.meta.connectedDashboards === 1 ? 'dashboard' : 'dashboards'}.
+            {panel.libraryPanel.meta?.connectedDashboards}{' '}
+            {panel.libraryPanel.meta?.connectedDashboards === 1 ? 'dashboard' : 'dashboards'}.
           </strong>
           The following dashboards using the panel will be affected:
         </p>

public/app/features/library-panels/types.ts

@@ -1,17 +1,22 @@
 import { AnyAction } from '@reduxjs/toolkit';
 import { Dispatch } from 'react';
 
+import { LibraryPanel } from '@grafana/schema';
+import { LibraryElementDTOMetaUser } from '@grafana/schema/src/raw/librarypanel/x/librarypanel_types.gen';
+
 import { PanelModel } from '../dashboard/state';
 
 export enum LibraryElementKind {
   Panel = 1,
-  Variable,
 }
 
 export enum LibraryElementConnectionKind {
   Dashboard = 1,
 }
 
+/** @deprecated use LibraryPanel */
+export interface LibraryElementDTO extends LibraryPanel {}
+
 export interface LibraryElementConnectionDTO {
   id: number;
   kind: LibraryElementConnectionKind;
@@ -24,48 +29,13 @@ export interface LibraryElementConnectionDTO {
 
 export interface LibraryElementsSearchResult {
   totalCount: number;
-  elements: LibraryElementDTO[];
+  elements: LibraryPanel[];
   perPage: number;
   page: number;
 }
 
-export interface LibraryElementDTO {
-  id: number;
-  orgId: number;
-  folderUid: string;
-  uid: string;
-  name: string;
-  kind: LibraryElementKind;
-  type: string;
-  description: string;
-  model: any;
-  version: number;
-  meta: LibraryElementDTOMeta;
-}
-
-export interface LibraryElementDTOMeta {
-  folderName: string;
-  folderUid: string;
-  connectedDashboards: number;
-  created: string;
-  updated: string;
-  createdBy: LibraryElementDTOMetaUser;
-  updatedBy: LibraryElementDTOMetaUser;
-}
-
-export interface LibraryElementDTOMetaUser {
-  id: number;
-  name: string;
-  avatarUrl: string;
-}
-
-export interface LibraryPanelRef {
-  name: string;
-  uid: string;
-}
-
 export interface PanelModelWithLibraryPanel extends PanelModel {
-  libraryPanel: LibraryElementDTO;
+  libraryPanel: LibraryPanel;
 }
 
 export type DispatchResult = (dispatch: Dispatch<AnyAction>) => void;