Table: Move cell-specific styles out to their own methods (#108941)

* TableNG: Markdown cell, plus custom row height

* tab indentation in cue file

* fix i18n

* trying an auto height with the updated RDG

* get auto cellHeight working

* i18n updates

* hoor disable_sanitize_html flag in MarkdownCell

* update react-data-grid version to attempt to support page up and down

* removing custom height

* use the latest experimental RDG with paging up and down

* TableNG: Wrap text for DataLinks and Pills; groundwork for max wrap length

* disable editing max wrapped lines for now

* disable wrap text line limit e2e

* new i18n extract after commenting out input

* wip

* kill max wrapped lines for now

* more cleanup

* remove targeting classes added for max wrapped lines

* fix Pill test

* couple more style cleanups

* Table: Move cell-specific styles out to their own methods

* move styles into their own file

* combine renderer and style declarations to make auto cells work better, complete cleanup of internal cell elements

* fix e2es given these updates

* add a couple tests

* wip: tests

* add tests

* bump up capital letters in lorem ipsum

* fix copy-pasta mistake

* whoops, mis-merged the selector

* use a local count instead of getCellLinks

* use react-data-grid on react-18 branch

* fix linting on test

* gdev dashboard and smoketest for Markdown table

* remove cellHeightCustom

* restore bugfix from adversarial AI-generated JSON

* reorganize in light of recent and upcoming changes

* cleanup

* override the whitespace for markdown

* what are these auto imports about...

* fix cell height selector from merge

* also remove cellHeightCustom

* i18n

* avoid the important override in markdown cell styles

* revert some betterer config autoformatting

* slight code cleanup

* s/cat/grot, add color link panel to kitchen sink, fix color link/image link style issues

* update panelid for empty table panel test

* link styles outside of cell style setup

* flesh out kitchen sink examples, update ImageCell and applyToRow

* clean up some inconsistent states

* fix lint issue

* gdev update

* format JSON to satisfy linter

* shortening the text in the long text field

---------

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

e2e-playwright/panels-suite/table-kitchenSink.spec.ts

@@ -1,6 +1,6 @@
 import { Page, Locator } from '@playwright/test';
 
-import { test, expect } from '@grafana/plugin-e2e';
+import { test, expect, E2ESelectorGroups } from '@grafana/plugin-e2e';
 
 const DASHBOARD_UID = 'dcb9f5e9-8066-4397-889e-864b99555dbb';
 
@@ -41,6 +41,21 @@ const getColumnIdx = async (loc: Page | Locator, columnName: string) => {
   return result;
 };
 
+const disableAllTextWrap = async (loc: Page | Locator, selectors: E2ESelectorGroups) => {
+  // disable text wrapping for all of the columns, since long text with links in them can push the links off the screen.
+  const wrapTextToggle = loc.locator(
+    `[aria-label="${selectors.components.PanelEditor.OptionsPane.fieldLabel('Wrap text')}"]`
+  );
+  const count = await wrapTextToggle.count();
+
+  for (let i = 0; i < count; i++) {
+    const toggle = wrapTextToggle.nth(i);
+    if ((await toggle.locator('//preceding-sibling::input').getAttribute('checked')) !== null) {
+      await toggle.click();
+    }
+  }
+};
+
 test.describe('Panels test: Table - Kitchen Sink', { tag: ['@panels', '@table'] }, () => {
   test('Tests word wrap, hover overflow, and cell inspect', async ({ gotoDashboardPage, selectors, page }) => {
     const dashboardPage = await gotoDashboardPage({
@@ -214,11 +229,7 @@ test.describe('Panels test: Table - Kitchen Sink', { tag: ['@panels', '@table']
     // because of text wrapping, we're guaranteed to only be showing a single row when we enable pagination.
     await expect(page.getByText(/([\d]+) - ([\d]+) of ([\d]+) rows/)).toBeVisible();
 
-    // FIXME horrible selector for the "Wrap text" toggle for the "Long text" column.
-    await page
-      .locator('[id="Override 13"]')
-      .locator(`[aria-label="${selectors.components.PanelEditor.OptionsPane.fieldLabel('Wrap text')}"]`)
-      .click();
+    await disableAllTextWrap(page, selectors);
 
     // any number of rows that is not "1" is allowed here, we don't want to police the exact number of rows that
     // are rendered since there are tons of factors which could effect this. we do want to grab this number for comparison
@@ -281,13 +292,7 @@ test.describe('Panels test: Table - Kitchen Sink', { tag: ['@panels', '@table']
       dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('Table - Kitchen Sink'))
     ).toBeVisible();
 
-    // disable text wrapping for this test to make it easier to click the links, the long lorem ipsum
-    // can push the links off the screen.
-    // FIXME very bad selector to get the correct "wrap text" toggle here.
-    await page
-      .locator('[id="Override 13"]')
-      .locator(`[aria-label="${selectors.components.PanelEditor.OptionsPane.fieldLabel('Wrap text')}"]`)
-      .click();
+    await disableAllTextWrap(page, selectors);
 
     const infoColumnIdx = await getColumnIdx(page, 'Info');
     const pillColIdx = await getColumnIdx(page, 'Pills');
@@ -351,7 +356,7 @@ test.describe('Panels test: Table - Kitchen Sink', { tag: ['@panels', '@table']
   test('Empty Table panel', async ({ gotoDashboardPage, selectors }) => {
     const dashboardPage = await gotoDashboardPage({
       uid: DASHBOARD_UID,
-      queryParams: new URLSearchParams({ editPanel: '2' }),
+      queryParams: new URLSearchParams({ editPanel: '3' }),
     });
 
     await expect(