Na}{

File Content: `getPanelFrameOptions.tsx`

import React from 'react';

import { config } from '@grafana/runtime';
import { VizPanel } from '@grafana/scenes';
import { DataLinksInlineEditor, Input, RadioButtonGroup, Select, Switch, TextArea } from '@grafana/ui';
import { VizPanelLinks } from 'app/features/dashboard-scene/scene/PanelLinks';
import { dashboardSceneGraph } from 'app/features/dashboard-scene/utils/dashboardSceneGraph';
import { getPanelLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv';

import { GenAIPanelDescriptionButton } from '../GenAI/GenAIPanelDescriptionButton';
import { GenAIPanelTitleButton } from '../GenAI/GenAIPanelTitleButton';
import { RepeatRowSelect } from '../RepeatRowSelect/RepeatRowSelect';

import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
import { OptionPaneRenderProps } from './types';

export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor {
  const { panel, onPanelConfigChange } = props;
  const descriptor = new OptionsPaneCategoryDescriptor({
    title: 'Panel options',
    id: 'Panel options',
    isOpenDefault: true,
  });

  const setPanelTitle = (title: string) => {
    const input = document.getElementById('PanelFrameTitle');
    if (input instanceof HTMLInputElement) {
      input.value = title;
      onPanelConfigChange('title', title);
    }
  };

  const setPanelDescription = (description: string) => {
    const input = document.getElementById('description-text-area');
    if (input instanceof HTMLTextAreaElement) {
      input.value = description;
      onPanelConfigChange('description', description);
    }
  };

  return descriptor
    .addItem(
      new OptionsPaneItemDescriptor({
        title: 'Title',
        value: panel.title,
        popularRank: 1,
        render: function renderTitle() {
          return (
            <Input
              id="PanelFrameTitle"
              defaultValue={panel.title}
              onBlur={(e) => onPanelConfigChange('title', e.currentTarget.value)}
            />
          );
        },
        addon: config.featureToggles.dashgpt && <GenAIPanelTitleButton onGenerate={setPanelTitle} panel={panel} />,
      })
    )
    .addItem(
      new OptionsPaneItemDescriptor({
        title: 'Description',
        description: panel.description,
        value: panel.description,
        render: function renderDescription() {
          return (
            <TextArea
              id="description-text-area"
              defaultValue={panel.description}
              onBlur={(e) => onPanelConfigChange('description', e.currentTarget.value)}
            />
          );
        },
        addon: config.featureToggles.dashgpt && (
          <GenAIPanelDescriptionButton onGenerate={setPanelDescription} panel={panel} />
        ),
      })
    )
    .addItem(
      new OptionsPaneItemDescriptor({
        title: 'Transparent background',
        render: function renderTransparent() {
          return (
            <Switch
              value={panel.transparent}
              id="transparent-background"
              onChange={(e) => onPanelConfigChange('transparent', e.currentTarget.checked)}
            />
          );
        },
      })
    )
    .addCategory(
      new OptionsPaneCategoryDescriptor({
        title: 'Panel links',
        id: 'Panel links',
        isOpenDefault: false,
        itemsCount: panel.links?.length,
      }).addItem(
        new OptionsPaneItemDescriptor({
          title: 'Panel links',
          render: function renderLinks() {
            return (
              <DataLinksInlineEditor
                links={panel.links}
                onChange={(links) => onPanelConfigChange('links', links)}
                getSuggestions={getPanelLinksVariableSuggestions}
                data={[]}
              />
            );
          },
        })
      )
    )
    .addCategory(
      new OptionsPaneCategoryDescriptor({
        title: 'Repeat options',
        id: 'Repeat options',
        isOpenDefault: false,
      })
        .addItem(
          new OptionsPaneItemDescriptor({
            title: 'Repeat by variable',
            description:
              'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.',
            render: function renderRepeatOptions() {
              return (
                <RepeatRowSelect
                  id="repeat-by-variable-select"
                  repeat={panel.repeat}
                  onChange={(value?: string) => {
                    onPanelConfigChange('repeat', value);
                  }}
                />
              );
            },
          })
        )
        .addItem(
          new OptionsPaneItemDescriptor({
            title: 'Repeat direction',
            showIf: () => !!panel.repeat,
            render: function renderRepeatOptions() {
              const directionOptions = [
                { label: 'Horizontal', value: 'h' },
                { label: 'Vertical', value: 'v' },
              ];

              return (
                <RadioButtonGroup
                  options={directionOptions}
                  value={panel.repeatDirection || 'h'}
                  onChange={(value) => onPanelConfigChange('repeatDirection', value)}
                />
              );
            },
          })
        )
        .addItem(
          new OptionsPaneItemDescriptor({
            title: 'Max per row',
            showIf: () => Boolean(panel.repeat && panel.repeatDirection === 'h'),
            render: function renderOption() {
              const maxPerRowOptions = [2, 3, 4, 6, 8, 12].map((value) => ({ label: value.toString(), value }));
              return (
                <Select
                  options={maxPerRowOptions}
                  value={panel.maxPerRow}
                  onChange={(value) => onPanelConfigChange('maxPerRow', value.value)}
                />
              );
            },
          })
        )
    );
}

export function getPanelFrameCategory2(panel: VizPanel): OptionsPaneCategoryDescriptor {
  const descriptor = new OptionsPaneCategoryDescriptor({
    title: 'Panel options',
    id: 'Panel options',
    isOpenDefault: true,
  });

  const panelLinksObject = dashboardSceneGraph.getPanelLinks(panel);
  const links = panelLinksObject.state.rawLinks;

  return descriptor
    .addItem(
      new OptionsPaneItemDescriptor({
        title: 'Title',
        value: panel.state.title,
        popularRank: 1,
        render: function renderTitle() {
          return (
            <Input
              id="PanelFrameTitle"
              defaultValue={panel.state.title}
              onBlur={(e) => panel.setState({ title: e.currentTarget.value })}
            />
          );
        },
        // addon: config.featureToggles.dashgpt && <GenAIPanelTitleButton onGenerate={setPanelTitle} panel={panel} />,
      })
    )
    .addItem(
      new OptionsPaneItemDescriptor({
        title: 'Description',
        description: panel.state.description,
        value: panel.state.description,
        render: function renderDescription() {
          return (
            <TextArea
              id="description-text-area"
              defaultValue={panel.state.description}
              onBlur={(e) => panel.setState({ description: e.currentTarget.value })}
            />
          );
        },
        // addon: config.featureToggles.dashgpt && (
        //   <GenAIPanelDescriptionButton onGenerate={setPanelDescription} panel={panel} />
        // ),
      })
    )
    .addItem(
      new OptionsPaneItemDescriptor({
        title: 'Transparent background',
        render: function renderTransparent() {
          return (
            <Switch
              value={panel.state.displayMode === 'transparent'}
              id="transparent-background"
              onChange={() => {
                panel.setState({
                  displayMode: panel.state.displayMode === 'transparent' ? 'default' : 'transparent',
                });
              }}
            />
          );
        },
      })
    )
    .addCategory(
      new OptionsPaneCategoryDescriptor({
        title: 'Panel links',
        id: 'Panel links',
        isOpenDefault: false,
        itemsCount: links?.length,
      }).addItem(
        new OptionsPaneItemDescriptor({
          title: 'Panel links',
          render: () => <ScenePanelLinksEditor panelLinks={panelLinksObject} />,
        })
      )
    );
  //
  // .addCategory(
  //   new OptionsPaneCategoryDescriptor({
  //     title: 'Repeat options',
  //     id: 'Repeat options',
  //     isOpenDefault: false,
  //   })
  //     .addItem(
  //       new OptionsPaneItemDescriptor({
  //         title: 'Repeat by variable',
  //         description:
  //           'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.',
  //         render: function renderRepeatOptions() {
  //           return (
  //             <RepeatRowSelect
  //               id="repeat-by-variable-select"
  //               repeat={panel.repeat}
  //               onChange={(value?: string) => {
  //                 onPanelConfigChange('repeat', value);
  //               }}
  //             />
  //           );
  //         },
  //       })
  //     )
  //     .addItem(
  //       new OptionsPaneItemDescriptor({
  //         title: 'Repeat direction',
  //         showIf: () => !!panel.repeat,
  //         render: function renderRepeatOptions() {
  //           const directionOptions = [
  //             { label: 'Horizontal', value: 'h' },
  //             { label: 'Vertical', value: 'v' },
  //           ];

  //           return (
  //             <RadioButtonGroup
  //               options={directionOptions}
  //               value={panel.repeatDirection || 'h'}
  //               onChange={(value) => onPanelConfigChange('repeatDirection', value)}
  //             />
  //           );
  //         },
  //       })
  //     )
  //     .addItem(
  //       new OptionsPaneItemDescriptor({
  //         title: 'Max per row',
  //         showIf: () => Boolean(panel.repeat && panel.repeatDirection === 'h'),
  //         render: function renderOption() {
  //           const maxPerRowOptions = [2, 3, 4, 6, 8, 12].map((value) => ({ label: value.toString(), value }));
  //           return (
  //             <Select
  //               options={maxPerRowOptions}
  //               value={panel.maxPerRow}
  //               onChange={(value) => onPanelConfigChange('maxPerRow', value.value)}
  //             />
  //           );
  //         },
  //       })
  //     )
  // );
}

interface ScenePanelLinksEditorProps {
  panelLinks: VizPanelLinks;
}

function ScenePanelLinksEditor({ panelLinks }: ScenePanelLinksEditorProps) {
  const { rawLinks: links } = panelLinks.useState();

  return (
    <DataLinksInlineEditor
      links={links}
      onChange={(links) => panelLinks.setState({ rawLinks: links })}
      getSuggestions={getPanelLinksVariableSuggestions}
      data={[]}
    />
  );
}

Name	Size	Permission
state	---	0755
AngularPanelOptions.tsx	3907 bytes	0644
DynamicConfigValueEditor.tsx	3678 bytes	0644
OptionsPane.tsx	2615 bytes	0644
OptionsPaneCategory.tsx	5759 bytes	0644
OptionsPaneCategoryDescriptor.tsx	1835 bytes	0644
OptionsPaneItemDescriptor.tsx	3584 bytes	0644
OptionsPaneItemOverrides.tsx	1208 bytes	0644
OptionsPaneOptions.test.tsx	9120 bytes	0644
OptionsPaneOptions.tsx	7812 bytes	0644
OverrideCategoryTitle.tsx	2069 bytes	0644
PanelEditor.tsx	16794 bytes	0644
PanelEditorQueries.tsx	4139 bytes	0644
PanelEditorTableView.test.tsx	7264 bytes	0644
PanelEditorTableView.tsx	2203 bytes	0644
PanelEditorTabs.tsx	4931 bytes	0644
PanelHeaderCorner.test.tsx	708 bytes	0644
PanelHeaderCorner.tsx	3489 bytes	0644
PanelNotSupported.test.tsx	1398 bytes	0644
PanelNotSupported.tsx	849 bytes	0644
VisualizationButton.tsx	2277 bytes	0644
VisualizationSelectPane.tsx	6512 bytes	0644
getFieldOverrideElements.tsx	8273 bytes	0644
getLibraryPanelOptions.tsx	1704 bytes	0644
getPanelFrameOptions.tsx	11327 bytes	0644
getVisualizationOptions.test.ts	4366 bytes	0644
getVisualizationOptions.tsx	9787 bytes	0644
types.ts	1823 bytes	0644
usePanelLatestData.ts	2206 bytes	0644
utils.test.ts	5250 bytes	0644
utils.ts	2895 bytes	0644

File Content: getPanelFrameOptions.tsx

File Content: `getPanelFrameOptions.tsx`