chore(table-ng): move wrap text to field config

packages/grafana-ui/src/components/Table/TableRT/Table.tsx

@@ -314,7 +314,7 @@ export const Table = memo((props: Props) => {
         const matcher = getFieldMatcher(override.matcher);
         if (matcher(field, data, [data])) {
           for (const property of override.properties) {
-            if (property.id === 'custom.cellOptions' && property.value.wrapText) {
+            if (property.id === 'custom.wrapText' && property.value) {
               textWrapField = field;
             }
           }

packages/grafana-ui/src/components/Table/utils.ts

@@ -720,7 +720,7 @@ export function guessLongestField(fieldConfig: FieldConfigSource, data: DataFram
   // If the default field option is set to allow text wrapping
   // we determine the field to wrap text with here and then
   // pass it to the RowsList
-  if (fieldConfig.defaults.custom?.cellOptions?.wrapText) {
+  if (fieldConfig.defaults.custom?.wrapText) {
     const stringFields = data.fields.filter((field: Field) => field.type === FieldType.string);
 
     if (stringFields.length >= 1 && stringFields[0].values.length > 0) {

public/app/plugins/panel/table/cells/AutoCellOptionsEditor.tsx

@@ -1,5 +1,4 @@
 import { TableAutoCellOptions, TableColorTextCellOptions } from '@grafana/schema';
-import { Field, Switch, Badge, Label } from '@grafana/ui';
 
 import { TableCellEditorProps } from '../TableCellOptionEditor';
 
@@ -7,24 +6,5 @@ export const AutoCellOptionsEditor = ({
   cellOptions,
   onChange,
 }: TableCellEditorProps<TableAutoCellOptions | TableColorTextCellOptions>) => {
-  // Handle row coloring changes
-  const onWrapTextChange = () => {
-    cellOptions.wrapText = !cellOptions.wrapText;
-    onChange(cellOptions);
-  };
-
-  const label = (
-    <Label description="If selected text will be wrapped to the width of text in the configured column">
-      {'Wrap text '}
-      <Badge text="Alpha" color="blue" style={{ fontSize: '11px', marginLeft: '5px', lineHeight: '1.2' }} />
-    </Label>
-  );
-
-  return (
-    <>
-      <Field label={label}>
-        <Switch value={cellOptions.wrapText} onChange={onWrapTextChange} />
-      </Field>
-    </>
-  );
+  return <></>;
 };

public/app/plugins/panel/table/cells/ColorBackgroundCellOptionsEditor.tsx

@@ -1,6 +1,7 @@
 import { SelectableValue } from '@grafana/data';
 import { TableCellBackgroundDisplayMode, TableColoredBackgroundCellOptions } from '@grafana/schema';
-import { Field, RadioButtonGroup, Switch, Label, Badge } from '@grafana/ui';
+// import { Field, RadioButtonGroup, Switch, Label, Badge } from '@grafana/ui';
+import { Field, RadioButtonGroup, Switch } from '@grafana/ui';
 
 import { TableCellEditorProps } from '../TableCellOptionEditor';
 
@@ -25,19 +26,6 @@ export const ColorBackgroundCellOptionsEditor = ({
     onChange(cellOptions);
   };
 
-  // Handle row coloring changes
-  const onWrapTextChange = () => {
-    cellOptions.wrapText = !cellOptions.wrapText;
-    onChange(cellOptions);
-  };
-
-  const label = (
-    <Label description="If selected text will be wrapped to the width of text in the configured column">
-      {'Wrap text '}
-      <Badge text="Alpha" color="blue" style={{ fontSize: '11px', marginLeft: '5px', lineHeight: '1.2' }} />
-    </Label>
-  );
-
   return (
     <>
       <Field label="Background display mode">
@@ -53,9 +41,6 @@ export const ColorBackgroundCellOptionsEditor = ({
       >
         <Switch value={cellOptions.applyToRow} onChange={onColorRowChange} />
       </Field>
-      <Field label={label}>
-        <Switch value={cellOptions.wrapText} onChange={onWrapTextChange} />
-      </Field>
     </>
   );
 };

public/app/plugins/panel/table/migrations.ts

@@ -20,11 +20,41 @@ import { Options } from './panelcfg.gen';
  * a saved table configuration exists.
  */
 export const tableMigrationHandler = (panel: PanelModel<Options>): Partial<Options> => {
+  const pluginVersion = panel?.pluginVersion ?? '';
+
   // Table was saved as an angular table, lets just swap to the 'table-old' panel
   if (!panel.pluginVersion && 'columns' in panel) {
     console.log('Was angular table', panel);
   }
 
+  if (parseFloat(pluginVersion) <= 11.6) {
+    if (panel.fieldConfig.defaults.custom?.cellOptions?.wrapText !== undefined) {
+      panel.fieldConfig = {
+        defaults: {
+          ...panel.fieldConfig.defaults,
+          custom: {
+            ...panel.fieldConfig.defaults.custom,
+            wrapText: panel.fieldConfig.defaults.custom.cellOptions.wrapText,
+          },
+        },
+        overrides: panel.fieldConfig.overrides.map((override) => {
+          override.properties.forEach((prop) => {
+            if (prop.id === 'custom.cellOptions' && prop.value?.wrapText !== undefined) {
+              override.properties.push({
+                id: 'custom.wrapText',
+                value: prop.value.wrapText,
+              });
+              delete prop.value.wrapText;
+            }
+          });
+          return override;
+        }),
+      };
+
+      delete panel.fieldConfig.defaults.custom.cellOptions.wrapText;
+    }
+  }
+
   // Nothing changed
   return panel.options;
 };

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

@@ -78,6 +78,20 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(TablePanel)
           category: cellCategory,
           shouldApply: () => true,
         })
+        .addBooleanSwitch({
+          path: 'wrapText',
+          name: 'Wrap text',
+          description: 'Wrap text to the width of the column',
+          defaultValue: false,
+          category: cellCategory,
+          showIf: (cfg) => {
+            return (
+              cfg.cellOptions.type === TableCellDisplayMode.Auto ||
+              cfg.cellOptions.type === TableCellDisplayMode.ColorText ||
+              cfg.cellOptions.type === TableCellDisplayMode.ColorBackground
+            );
+          },
+        })
         .addBooleanSwitch({
           path: 'inspect',
           name: 'Cell value inspect',