Explore: Show a drawer with tabs for the library and query history (#86279)

* Create basic feature toggle

* Rename context to reflect it contains query history and query library

* Update icons and variants

* Rename hooks

* Update tests

* Fix mock

* Add tracking

* Turn button into a toggle

* Make dropdown active as well

This is required to have better UI and an indication of selected state in split view

* Update Query Library icon

This is to make it consistent with the toolbar button

* Hide query history button when query library is available

This is to avoid confusing UX with 2 button triggering the drawer but with slightly different behavior

* Make the drawer bigger for query library

To avoid confusion for current users and test it internally a bit more it's behind a feature toggle. Bigger drawer may obstruct the view and add more friction in the UX.

* Fix tests

The test was failing because queryLibraryAvailable was set to true for tests. This change makes it more explicit what use case is being tested

* Remove active state underline from the dropdown

* Allow closing Query Library drawer from the toolbar

* Simplify dropdown design

pkg/services/featuremgmt/registry.go

@@ -1211,6 +1211,14 @@ var (
 			HideFromDocs:      true,
 			HideFromAdminPage: true,
 		},
+		{
+			Name:           "queryLibrary",
+			Description:    "Enables Query Library feature in Explore",
+			Stage:          FeatureStageExperimental,
+			Owner:          grafanaExploreSquad,
+			FrontendOnly:   false,
+			AllowSelfServe: false,
+		},
 	}
 )
 

pkg/services/featuremgmt/toggles_gen.csv

@@ -161,3 +161,4 @@ cloudWatchNewLabelParsing,GA,@grafana/aws-datasources,false,false,false
 accessActionSets,experimental,@grafana/identity-access-team,false,false,false
 disableNumericMetricsSortingInExpressions,experimental,@grafana/observability-metrics,false,true,false
 grafanaManagedRecordingRules,experimental,@grafana/alerting-squad,false,false,false
+queryLibrary,experimental,@grafana/explore-squad,false,false,false

pkg/services/featuremgmt/toggles_gen.go

@@ -654,4 +654,8 @@ const (
 	// FlagGrafanaManagedRecordingRules
 	// Enables Grafana-managed recording rules.
 	FlagGrafanaManagedRecordingRules = "grafanaManagedRecordingRules"
+
+	// FlagQueryLibrary
+	// Enables Query Library feature in Explore
+	FlagQueryLibrary = "queryLibrary"
 )

pkg/services/featuremgmt/toggles_gen.json

@@ -2088,6 +2088,21 @@
         "hideFromAdminPage": true,
         "hideFromDocs": true
       }
+    },
+    {
+      "metadata": {
+        "name": "queryLibrary",
+        "resourceVersion": "1713260947272",
+        "creationTimestamp": "2024-04-16T07:18:28Z",
+        "annotations": {
+          "grafana.app/updatedTimestamp": "2024-04-16 09:49:07.272595 +0000 UTC"
+        }
+      },
+      "spec": {
+        "description": "Enables Query Library feature in Explore",
+        "stage": "experimental",
+        "codeowner": "@grafana/explore-squad"
+      }
     }
   ]
-}
+}