Na}{

File Content: `getFieldOverrideElements.tsx`

import { css } from '@emotion/css';
import { cloneDeep } from 'lodash';
import React from 'react';

import {
  FieldConfigOptionsRegistry,
  SelectableValue,
  isSystemOverride as isSystemOverrideGuard,
  VariableSuggestionsScope,
  DynamicConfigValue,
  ConfigOverrideRule,
  GrafanaTheme2,
  fieldMatchers,
  FieldConfigSource,
  DataFrame,
} from '@grafana/data';
import { fieldMatchersUI, useStyles2, ValuePicker } from '@grafana/ui';
import { getDataLinksVariableSuggestions } from 'app/features/panel/panellinks/link_srv';

import { DynamicConfigValueEditor } from './DynamicConfigValueEditor';
import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
import { OverrideCategoryTitle } from './OverrideCategoryTitle';

export function getFieldOverrideCategories(
  fieldConfig: FieldConfigSource,
  registry: FieldConfigOptionsRegistry,
  data: DataFrame[],
  searchQuery: string,
  onFieldConfigsChange: (config: FieldConfigSource) => void
): OptionsPaneCategoryDescriptor[] {
  const categories: OptionsPaneCategoryDescriptor[] = [];
  const currentFieldConfig = fieldConfig;

  if (!registry || registry.isEmpty()) {
    return [];
  }

  const onOverrideChange = (index: number, override: ConfigOverrideRule) => {
    let overrides = cloneDeep(currentFieldConfig.overrides);
    overrides[index] = override;
    onFieldConfigsChange({ ...currentFieldConfig, overrides });
  };

  const onOverrideRemove = (overrideIndex: number) => {
    let overrides = cloneDeep(currentFieldConfig.overrides);
    overrides.splice(overrideIndex, 1);
    onFieldConfigsChange({ ...currentFieldConfig, overrides });
  };

  const onOverrideAdd = (value: SelectableValue<string>) => {
    const info = fieldMatchers.get(value.value!);
    if (!info) {
      return;
    }

    onFieldConfigsChange({
      ...currentFieldConfig,
      overrides: [
        ...currentFieldConfig.overrides,
        {
          matcher: {
            id: info.id,
            options: info.defaultOptions,
          },
          properties: [],
        },
      ],
    });
  };

  const context = {
    data,
    getSuggestions: (scope?: VariableSuggestionsScope) => getDataLinksVariableSuggestions(data, scope),
    isOverride: true,
  };

  /**
   * Main loop through all override rules
   */
  for (let idx = 0; idx < currentFieldConfig.overrides.length; idx++) {
    const override = currentFieldConfig.overrides[idx];
    const overrideName = `Override ${idx + 1}`;
    const matcherUi = fieldMatchersUI.get(override.matcher.id);
    const configPropertiesOptions = getOverrideProperties(registry);
    const isSystemOverride = isSystemOverrideGuard(override);
    // A way to force open new override categories
    const forceOpen = override.properties.length === 0 ? 1 : 0;

    const category = new OptionsPaneCategoryDescriptor({
      title: overrideName,
      id: overrideName,
      forceOpen,
      renderTitle: function renderOverrideTitle(isExpanded: boolean) {
        return (
          <OverrideCategoryTitle
            override={override}
            isExpanded={isExpanded}
            registry={registry}
            overrideName={overrideName}
            matcherUi={matcherUi}
            onOverrideRemove={() => onOverrideRemove(idx)}
          />
        );
      },
    });

    const onMatcherConfigChange = (options: any) => {
      override.matcher.options = options;
      onOverrideChange(idx, override);
    };

    const onDynamicConfigValueAdd = (o: ConfigOverrideRule, value: SelectableValue<string>) => {
      const registryItem = registry.get(value.value!);
      const propertyConfig: DynamicConfigValue = {
        id: registryItem.id,
        value: registryItem.defaultValue,
      };

      if (override.properties) {
        o.properties.push(propertyConfig);
      } else {
        o.properties = [propertyConfig];
      }

      onOverrideChange(idx, o);
    };

    /**
     * Add override matcher UI element
     */
    category.addItem(
      new OptionsPaneItemDescriptor({
        title: matcherUi.name,
        render: function renderMatcherUI() {
          return (
            <matcherUi.component
              id={`${matcherUi.matcher.id}-${idx}`}
              matcher={matcherUi.matcher}
              data={data ?? []}
              options={override.matcher.options}
              onChange={onMatcherConfigChange}
            />
          );
        },
      })
    );

    /**
     * Loop through all override properties
     */
    for (let propIdx = 0; propIdx < override.properties.length; propIdx++) {
      const property = override.properties[propIdx];
      const registryItemForProperty = registry.getIfExists(property.id);

      if (!registryItemForProperty) {
        continue;
      }

      const onPropertyChange = (value: DynamicConfigValue) => {
        override.properties[propIdx].value = value;
        onOverrideChange(idx, override);
      };

      const onPropertyRemove = () => {
        override.properties.splice(propIdx, 1);
        onOverrideChange(idx, override);
      };

      /**
       * Add override property item
       */
      category.addItem(
        new OptionsPaneItemDescriptor({
          title: registryItemForProperty.name,
          skipField: true,
          render: function renderPropertyEditor() {
            return (
              <DynamicConfigValueEditor
                key={`${property.id}/${propIdx}`}
                isSystemOverride={isSystemOverride}
                onChange={onPropertyChange}
                onRemove={onPropertyRemove}
                property={property}
                registry={registry}
                context={context}
                searchQuery={searchQuery}
              />
            );
          },
        })
      );
    }

    /**
     * Add button that adds new overrides
     */
    if (!isSystemOverride && override.matcher.options) {
      category.addItem(
        new OptionsPaneItemDescriptor({
          title: '----------',
          skipField: true,
          render: function renderAddPropertyButton() {
            return (
              <ValuePicker
                key="Add override property"
                label="Add override property"
                variant="secondary"
                isFullWidth={true}
                icon="plus"
                menuPlacement="auto"
                options={configPropertiesOptions}
                onChange={(v) => onDynamicConfigValueAdd(override, v)}
              />
            );
          },
        })
      );
    }

    categories.push(category);
  }

  categories.push(
    new OptionsPaneCategoryDescriptor({
      title: 'add button',
      id: 'add button',
      customRender: function renderAddButton() {
        return (
          <AddOverrideButtonContainer key="Add override">
            <ValuePicker
              icon="plus"
              label="Add field override"
              variant="secondary"
              menuPlacement="auto"
              isFullWidth={true}
              size="md"
              options={fieldMatchersUI
                .list()
                .filter((o) => !o.excludeFromPicker)
                .map<SelectableValue<string>>((i) => ({ label: i.name, value: i.id, description: i.description }))}
              onChange={(value) => onOverrideAdd(value)}
            />
          </AddOverrideButtonContainer>
        );
      },
    })
  );

  return categories;
}

function getOverrideProperties(registry: FieldConfigOptionsRegistry) {
  return registry
    .list()
    .filter((o) => !o.hideFromOverrides)
    .map((item) => {
      let label = item.name;
      if (item.category) {
        label = [...item.category, item.name].join(' > ');
      }
      return {
        label,
        value: item.id,
        description: item.description,
      };
    });
}

function AddOverrideButtonContainer({ children }: { children: React.ReactNode }) {
  const styles = useStyles2(getBorderTopStyles);
  return <div className={styles}>{children}</div>;
}

function getBorderTopStyles(theme: GrafanaTheme2) {
  return css({
    borderTop: `1px solid ${theme.colors.border.weak}`,
    padding: `${theme.spacing(2)}`,
    display: 'flex',
  });
}

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: getFieldOverrideElements.tsx

File Content: `getFieldOverrideElements.tsx`