Specify types for PluginPlaceholders in PLUGIN_CACHING

enterprise/frontend/src/metabase-enterprise/caching/components/DashboardCacheSection/DashboardCacheSection.tsx

@@ -1,12 +1,7 @@
-import type { Dashboard } from "metabase-types/api";
+import type { DashboardCacheSectionProps } from "metabase/plugins";
 
 import CacheSection from "../CacheSection";
 
-interface DashboardCacheSectionProps {
-  dashboard: Dashboard;
-  onSave: (cache_ttl: number | null) => Promise<Dashboard>;
-}
-
 const DashboardCacheSection = ({
   dashboard,
   onSave,

enterprise/frontend/src/metabase-enterprise/caching/components/QuestionCacheSection/QuestionCacheSection.tsx

@@ -1,16 +1,11 @@
 import { t } from "ttag";
 
 import { getRelativeTime } from "metabase/lib/time";
+import type { QuestionCacheSectionProps } from "metabase/plugins";
 import { Stack, Text } from "metabase/ui";
-import type Question from "metabase-lib/v1/Question";
 
 import CacheSection from "../CacheSection";
 
-export interface QuestionCacheSectionProps {
-  question: Question;
-  onSave: (cache_ttl: number | null) => Promise<Question>;
-}
-
 const QuestionCacheSection = ({
   question,
   onSave,

enterprise/frontend/src/metabase-enterprise/caching/index.tsx

@@ -1,4 +1,7 @@
+import { t } from "ttag";
+
 import { PLUGIN_CACHING, PLUGIN_FORM_WIDGETS } from "metabase/plugins";
+import { Stack, Title } from "metabase/ui";
 import { hasPremiumFeature } from "metabase-enterprise/settings";
 
 import CacheTTLField from "./components/CacheTTLField";
@@ -31,4 +34,15 @@ if (hasPremiumFeature("cache_granular_controls")) {
   PLUGIN_CACHING.QuestionCacheSection = QuestionCacheSection;
   PLUGIN_CACHING.isEnabled = () => true;
   PLUGIN_CACHING.hasQuestionCacheSection = hasQuestionCacheSection;
+
+  PLUGIN_CACHING.canOverrideRootCacheInvalidationStrategy = true;
+  PLUGIN_CACHING.showAd = false;
+  PLUGIN_CACHING.explanation = (
+    <Stack spacing="xl">
+      {t`Cache the results of queries to have them display instantly. Here you can choose when cached results should be invalidated. You can set up one rule for all your databases, or apply more specific settings to each database.`}
+      <Title
+        order={4}
+      >{t`Pick the policy for when cached query results should be invalidated.`}</Title>
+    </Stack>
+  );
 }

frontend/src/metabase/plugins/index.ts

@@ -246,13 +246,27 @@ export const PLUGIN_MODERATION = {
   ) => [],
 };
 
+export interface QuestionCacheSectionProps {
+  question: Question;
+  onSave: (cache_ttl?: number) => Promise<Question> | undefined;
+}
+
+export interface DashboardCacheSectionProps {
+  dashboard: Dashboard;
+  onSave: (cache_ttl?: number) => Promise<Dashboard>;
+}
+
 export const PLUGIN_CACHING = {
   dashboardCacheTTLFormField: null,
   questionCacheTTLFormField: null,
-  getQuestionsImplicitCacheTTL: (_question?: any) => null,
-  QuestionCacheSection: PluginPlaceholder,
-  DashboardCacheSection: PluginPlaceholder,
-  DatabaseCacheTimeField: PluginPlaceholder,
+  getQuestionsImplicitCacheTTL: (_question?: any) => null as number | null,
+  QuestionCacheSection:
+    PluginPlaceholder as React.ComponentType<QuestionCacheSectionProps>,
+  DashboardCacheSection:
+    PluginPlaceholder as React.ComponentType<DashboardCacheSectionProps>,
+  DatabaseCacheTimeField: PluginPlaceholder as React.ComponentType<
+    Record<string, never>
+  >,
   isEnabled: () => false,
   hasQuestionCacheSection: (_question: Question) => false,
 };