[Lens] Make table and metric show on top Chart switcher (#96601) (#96775)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>

x-pack/plugins/lens/public/datatable_visualization/visualization.tsx

@@ -60,6 +60,7 @@ export const datatableVisualization: Visualization<DatatableVisualizationState>
       groupLabel: i18n.translate('xpack.lens.datatable.groupLabel', {
         defaultMessage: 'Tabular and single value',
       }),
+      sortPriority: 1,
     },
   ],
 

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx

@@ -219,12 +219,15 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
       // reorganize visualizations in groups
       const grouped: Record<
         string,
-        Array<
-          VisualizationType & {
-            visualizationId: string;
-            selection: VisualizationSelection;
-          }
-        >
+        {
+          priority: number;
+          visualizations: Array<
+            VisualizationType & {
+              visualizationId: string;
+              selection: VisualizationSelection;
+            }
+          >;
+        }
       > = {};
       // Will need it later on to quickly pick up the metadata from it
       const lookup: Record<
@@ -240,13 +243,17 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
             visualizationType.label.toLowerCase().includes(lowercasedSearchTerm) ||
             visualizationType.fullLabel?.toLowerCase().includes(lowercasedSearchTerm);
           if (isSearchMatch) {
-            grouped[visualizationType.groupLabel] = grouped[visualizationType.groupLabel] || [];
+            grouped[visualizationType.groupLabel] = grouped[visualizationType.groupLabel] || {
+              priority: 0,
+              visualizations: [],
+            };
             const visualizationEntry = {
               ...visualizationType,
               visualizationId,
               selection: getSelection(visualizationId, visualizationType.id),
             };
-            grouped[visualizationType.groupLabel].push(visualizationEntry);
+            grouped[visualizationType.groupLabel].priority += visualizationType.sortPriority || 0;
+            grouped[visualizationType.groupLabel].visualizations.push(visualizationEntry);
             lookup[`${visualizationId}:${visualizationType.id}`] = visualizationEntry;
           }
         }
@@ -254,9 +261,11 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
 
       return {
         visualizationTypes: Object.keys(grouped)
-          .sort()
+          .sort((groupA, groupB) => {
+            return grouped[groupB].priority - grouped[groupA].priority;
+          })
           .flatMap((group): SelectableEntry[] => {
-            const visualizations = grouped[group];
+            const { visualizations } = grouped[group];
             if (visualizations.length === 0) {
               return [];
             }

x-pack/plugins/lens/public/metric_visualization/visualization.tsx

@@ -55,6 +55,7 @@ export const metricVisualization: Visualization<MetricState> = {
       groupLabel: i18n.translate('xpack.lens.metric.groupLabel', {
         defaultMessage: 'Tabular and single value',
       }),
+      sortPriority: 1,
     },
   ],
 

x-pack/plugins/lens/public/types.ts

@@ -550,6 +550,11 @@ export interface VisualizationType {
    * The group the visualization belongs to
    */
   groupLabel: string;
+  /**
+   * The priority of the visualization in the list (global priority)
+   * Higher number means higher priority. When omitted defaults to 0
+   */
+  sortPriority?: number;
 }
 
 export interface Visualization<T = unknown> {