Explore: prevent direct access to explore if disabled via feature toggle (#47714) (#48096)

* Explore: prevent explore route to be registered if explore is disabled

* add feature toggle page

(cherry picked from commit 6899f23a22)

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

public/app/features/explore/FeatureTogglePage.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Page from 'app/core/components/Page/Page';
+import { css } from '@emotion/css';
+import { useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+
+export default function FeatureTogglePage() {
+  const styles = useStyles2(
+    (theme: GrafanaTheme2) =>
+      css`
+        margin-top: ${theme.spacing(2)};
+      `
+  );
+
+  return (
+    <Page className={styles}>
+      <Page.Contents>
+        <h1>Explore is disabled</h1>
+        To enable Explore, enable it in the Grafana config:
+        <div>
+          <pre>
+            {`[explore]
+enable = true
+`}
+          </pre>
+        </div>
+      </Page.Contents>
+    </Page>
+  );
+}

public/app/routes/routes.tsx

@@ -161,7 +161,11 @@ export function getAppRoutes(): RouteDescriptor[] {
           () => (config.viewersCanEdit ? [] : ['Editor', 'Admin']),
           [AccessControlAction.DataSourcesExplore]
         ),
-      component: SafeDynamicImport(() => import(/* webpackChunkName: "explore" */ 'app/features/explore/Wrapper')),
+      component: SafeDynamicImport(() =>
+        config.exploreEnabled
+          ? import(/* webpackChunkName: "explore" */ 'app/features/explore/Wrapper')
+          : import(/* webpackChunkName: "explore-feature-toggle-page" */ 'app/features/explore/FeatureTogglePage')
+      ),
     },
     {
       path: '/a/:pluginId/',