Debug Panel: Introduce schema types (#62094)

* feat(debugpanel): schematizing debug panel plugin

* delete old types and update imports to new generated schema

* update to experimental

* derived counters, fix options key name

* num to int

* chore(debugpanel): update ts imports post type rename

* chore(kindsys): refresh report.json

* migrate UpdateCounters back to runtime

* merge with main

---------

Co-authored-by: Will Browne <will.browne@grafana.com>
Co-authored-by: sam boyer <sdboyer@grafana.com>

docs/sources/developers/kinds/composable/debugpanelcfg/schema-reference.md

@@ -0,0 +1,51 @@
+---
+keywords:
+  - grafana
+  - schema
+title: DebugPanelCfg kind
+---
+> Both documentation generation and kinds schemas are in active development and subject to change without prior notice.
+
+# DebugPanelCfg kind
+
+## Maturity: experimental
+## Version: 0.0
+
+## Properties
+
+| Property       | Type                    | Required | Description                                                               |
+|----------------|-------------------------|----------|---------------------------------------------------------------------------|
+| `DebugMode`    | string                  | **Yes**  | Possible values are: `render`, `events`, `cursor`, `State`, `ThrowError`. |
+| `PanelOptions` | [object](#paneloptions) | **Yes**  |                                                                           |
+| `UpdateConfig` | [object](#updateconfig) | **Yes**  |                                                                           |
+
+## PanelOptions
+
+### Properties
+
+| Property   | Type                          | Required | Description                                                               |
+|------------|-------------------------------|----------|---------------------------------------------------------------------------|
+| `mode`     | string                        | **Yes**  | Possible values are: `render`, `events`, `cursor`, `State`, `ThrowError`. |
+| `counters` | [UpdateConfig](#updateconfig) | No       |                                                                           |
+
+### UpdateConfig
+
+#### Properties
+
+| Property        | Type    | Required | Description |
+|-----------------|---------|----------|-------------|
+| `dataChanged`   | boolean | **Yes**  |             |
+| `render`        | boolean | **Yes**  |             |
+| `schemaChanged` | boolean | **Yes**  |             |
+
+## UpdateConfig
+
+### Properties
+
+| Property        | Type    | Required | Description |
+|-----------------|---------|----------|-------------|
+| `dataChanged`   | boolean | **Yes**  |             |
+| `render`        | boolean | **Yes**  |             |
+| `schemaChanged` | boolean | **Yes**  |             |
+
+

pkg/kindsys/report.json

@@ -404,7 +404,9 @@
     },
     "debugpanelcfg": {
       "category": "composable",
-      "codeowners": [],
+      "codeowners": [
+        "ryantxu"
+      ],
       "currentVersion": [
         0,
         0
@@ -412,13 +414,13 @@
       "grafanaMaturityCount": 0,
       "lineageIsGroup": true,
       "links": {
-        "docs": "n/a",
+        "docs": "https://grafana.com/docs/grafana/next/developers/kinds/composable/debugpanelcfg/schema-reference",
         "go": "n/a",
-        "schema": "n/a",
+        "schema": "https://github.com/grafana/grafana/tree/main/public/app/plugins/panel/debug/panelcfg.cue",
-        "ts": "n/a"
+        "ts": "https://github.com/grafana/grafana/tree/main/public/app/plugins/panel/debug/panelcfg.gen.ts"
       },
       "machineName": "debugpanelcfg",
-      "maturity": "planned",
+      "maturity": "experimental",
       "name": "DebugPanelCfg",
       "pluralMachineName": "debugpanelcfgs",
       "pluralName": "DebugPanelCfgs",
@@ -1980,6 +1982,7 @@
           "bargaugepanelcfg",
           "dashboard",
           "dashboardlistpanelcfg",
+          "debugpanelcfg",
           "gaugepanelcfg",
           "histogrampanelcfg",
           "librarypanel",
@@ -2030,7 +2033,6 @@
           "dashboarddataquery",
           "dashboarddatasourcecfg",
           "datasource",
-          "debugpanelcfg",
           "elasticsearchdatasourcecfg",
           "flamegraphpanelcfg",
           "folder",

public/app/plugins/panel/debug/DebugPanel.tsx

@@ -6,9 +6,9 @@ import { CursorView } from './CursorView';
 import { EventBusLoggerPanel } from './EventBusLogger';
 import { RenderInfoViewer } from './RenderInfoViewer';
 import { StateView } from './StateView';
-import { DebugPanelOptions, DebugMode } from './types';
+import { PanelOptions, DebugMode } from './panelcfg.gen';
 
-type Props = PanelProps<DebugPanelOptions>;
+type Props = PanelProps<PanelOptions>;
 
 export class DebugPanel extends Component<Props> {
   render() {

public/app/plugins/panel/debug/RenderInfoViewer.tsx

@@ -11,9 +11,13 @@ import {
 } from '@grafana/data';
 import { IconButton } from '@grafana/ui';
 
-import { DebugPanelOptions, UpdateCounters, UpdateConfig } from './types';
+import { PanelOptions, UpdateConfig } from './panelcfg.gen';
 
-type Props = PanelProps<DebugPanelOptions>;
+type Props = PanelProps<PanelOptions>;
+
+type UpdateCounters = {
+  [K in keyof UpdateConfig]: number;
+};
 
 export class RenderInfoViewer extends Component<Props> {
   // Intentionally not state to avoid overhead -- yes, things will be 1 tick behind

public/app/plugins/panel/debug/StateView.tsx

@@ -3,9 +3,9 @@ import React, { FormEvent } from 'react';
 import { PanelOptionsEditorProps, PanelProps } from '@grafana/data';
 import { Field, Input, usePanelContext } from '@grafana/ui';
 
-import { DebugPanelOptions } from './types';
+import { PanelOptions } from './panelcfg.gen';
 
-export function StateView(props: PanelProps<DebugPanelOptions>) {
+export function StateView(props: PanelProps<PanelOptions>) {
   const context = usePanelContext();
 
   const onChangeName = (e: FormEvent<HTMLInputElement>) => {

public/app/plugins/panel/debug/module.tsx

@@ -2,9 +2,9 @@ import { PanelPlugin } from '@grafana/data';
 
 import { DebugPanel } from './DebugPanel';
 import { StateViewEditor } from './StateView';
-import { DebugMode, DebugPanelOptions } from './types';
+import { DebugMode, PanelOptions } from './panelcfg.gen';
 
-export const plugin = new PanelPlugin<DebugPanelOptions>(DebugPanel).useFieldConfig().setPanelOptions((builder) => {
+export const plugin = new PanelPlugin<PanelOptions>(DebugPanel).useFieldConfig().setPanelOptions((builder) => {
   builder
     .addSelect({
       path: 'mode',

public/app/plugins/panel/debug/panelcfg.cue

@@ -0,0 +1,50 @@
+// Copyright 2023 Grafana Labs
+//
+// Licensed 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.
+
+package grafanaplugin
+
+import (
+	// "github.com/grafana/grafana/packages/grafana-schema/src/common"
+	"github.com/grafana/grafana/pkg/plugins/pfs"
+)
+
+// This file (with its sibling .cue files) implements pfs.GrafanaPlugin
+pfs.GrafanaPlugin
+
+composableKinds: PanelCfg: {
+	maturity: "experimental"
+
+	lineage: {
+		seqs: [
+			{
+				schemas: [
+					{
+						UpdateConfig: {
+							render:        bool
+							dataChanged:   bool
+							schemaChanged: bool
+						} @cuetsy(kind="type")
+
+						DebugMode: "render" | "events" | "cursor" | "State" | "ThrowError" @cuetsy(kind="enum")
+
+						PanelOptions: {
+							mode:      DebugMode
+							counters?: UpdateConfig
+						} @cuetsy(kind="interface")
+					},
+				]
+			},
+		]
+	}
+}

public/app/plugins/panel/debug/panelcfg.gen.ts

@@ -0,0 +1,30 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+//
+// Generated by:
+//     public/app/plugins/gen.go
+// Using jennies:
+//     TSTypesJenny
+//     PluginTSTypesJenny
+//
+// Run 'make gen-cue' from repository root to regenerate.
+
+export const PanelCfgModelVersion = Object.freeze([0, 0]);
+
+export type UpdateConfig = {
+  render: boolean,
+  dataChanged: boolean,
+  schemaChanged: boolean,
+};
+
+export enum DebugMode {
+  Cursor = 'cursor',
+  Events = 'events',
+  Render = 'render',
+  State = 'State',
+  ThrowError = 'ThrowError',
+}
+
+export interface PanelOptions {
+  counters?: UpdateConfig;
+  mode: DebugMode;
+}

public/app/plugins/panel/debug/types.ts

@@ -1,22 +0,0 @@
-export type UpdateConfig = {
-  [K in keyof UpdateCounters]: boolean;
-};
-
-export type UpdateCounters = {
-  render: number;
-  dataChanged: number;
-  schemaChanged: number;
-};
-
-export enum DebugMode {
-  Render = 'render',
-  Events = 'events',
-  Cursor = 'cursor',
-  State = 'State',
-  ThrowError = 'ThrowError',
-}
-
-export interface DebugPanelOptions {
-  mode: DebugMode;
-  counters?: UpdateConfig;
-}