Suggestions: Add keyboard support (#114517)

* Suggestions: hashes on suggestions, update logic to select first suggestion

* fix types

* Suggestions: New UI style updates

* update some styles

* getting styles just right

* remove grouping when not on flag

* adjust minimum width for sidebar

* CI cleanups

* updates from ad hoc review

* add loading and error states to suggestions

* remove unused import

* update header ui for panel editor

* restore back button to vizpicker

* fix e2e test

* fix e2e

* add i18n update

* use new util for setVisualization operation

* Apply suggestions from code review

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

* comments from review

* updates from review

* Suggestions: Add keyboard support

* fix selector for PluginVisualization.item

---------

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -1057,6 +1057,7 @@ export const versionedComponents = {
   },
   PluginVisualization: {
     item: {
+      '12.4.0': (title: string) => `data-testid Plugin visualization item ${title}`,
       [MIN_GRAFANA_VERSION]: (title: string) => `Plugin visualization item ${title}`,
     },
     current: {

packages/grafana-schema/src/raw/composable/table/panelcfg/x/TablePanelCfg_types.gen.ts

@@ -17,6 +17,10 @@ export interface Options {
    * Controls the height of the rows
    */
   cellHeight?: ui.TableCellHeight;
+  /**
+   * If true, disables all keyboard events in the table. this is used when previewing a table (i.e. suggestions)
+   */
+  disableKeyboardEvents?: boolean;
   /**
    * Enable pagination on the table
    */

packages/grafana-schema/src/raw/composable/timeseries/panelcfg/x/TimeSeriesPanelCfg_types.gen.ts

@@ -13,6 +13,7 @@ import * as common from '@grafana/schema';
 export const pluginVersion = "12.4.0-pre";
 
 export interface Options extends common.OptionsWithTimezones, common.OptionsWithAnnotations {
+  disableKeyboardEvents?: boolean;
   legend: common.VizLegendOptions;
   orientation?: common.VizOrientation;
   timeCompare?: common.TimeCompareOptions;

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

@@ -105,6 +105,7 @@ export function TableNG(props: TableNGProps) {
   const {
     cellHeight,
     data,
+    disableKeyboardEvents,
     disableSanitizeHtml,
     enablePagination = false,
     enableSharedCrosshair = false,
@@ -819,9 +820,9 @@ export function TableNG(props: TableNGProps) {
           }
         }}
         onCellKeyDown={
-          hasNestedFrames
+          hasNestedFrames || disableKeyboardEvents
             ? (_, event) => {
-                if (event.isDefaultPrevented()) {
+                if (disableKeyboardEvents || event.isDefaultPrevented()) {
                   // skip parent grid keyboard navigation if nested grid handled it
                   event.preventGridDefault();
                 }

packages/grafana-ui/src/components/Table/TableNG/types.ts

@@ -138,6 +138,8 @@ export interface BaseTableProps {
   enableVirtualization?: boolean;
   // for MarkdownCell, this flag disables sanitization of HTML content. Configured via config.ini.
   disableSanitizeHtml?: boolean;
+  // if true, disables all keyboard events in the table. this is used when previewing a table (i.e. suggestions)
+  disableKeyboardEvents?: boolean;
 }
 
 /* ---------------------------- Table cell props ---------------------------- */