From 9fff736549707052d64a67df76a7f5db8e06b45e Mon Sep 17 00:00:00 2001
From: Konrad Lalik <konrad.lalik@grafana.com>
Date: Wed, 2 Oct 2024 17:14:54 +0200
Subject: [PATCH] Alerting: Support k8s templates API (#92112)

Co-authored-by: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Co-authored-by: Sonia Aguilar <soniaaguilarpeiron@gmail.com>
Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
---
 .betterer.results                             |   6 -
 .../alerting/unified/Templates.test.tsx       | 117 +++++-
 .../alerting/unified/api/templateApi.ts       |  17 +-
 .../app/features/alerting/unified/api/util.ts |   6 +-
 .../DuplicateMessageTemplate.tsx              |  65 ++-
 .../contact-points/EditMessageTemplate.tsx    |  48 ++-
 .../contact-points/NewMessageTemplate.tsx     |  24 +-
 .../NotificationTemplates.test.tsx            |  46 ++-
 .../__mocks__/alertmanager.config.mock.json   |   8 +-
 .../useNotificationTemplates.ts               | 264 ++++++++++--
 .../receivers/DuplicateTemplateView.tsx       |  35 --
 .../components/receivers/EditTemplateView.tsx |  31 --
 .../components/receivers/NewTemplateView.tsx  |  12 -
 .../components/receivers/TemplateForm.tsx     |  70 ++--
 .../components/receivers/TemplatesTable.tsx   | 204 +++++----
 .../NewReceiverView.test.tsx.snap             |   8 +-
 .../form/fields/TemplateSelector.test.tsx     |  70 +++-
 .../form/fields/TemplateSelector.tsx          |  26 +-
 .../unified/mocks/server/all-handlers.ts      |   3 +-
 .../server/handlers/k8s/templates.k8s.ts      | 100 +++++
 .../unified/openapi/templatesApi.gen.ts       | 387 ++++++++++++++++++
 scripts/generate-alerting-rtk-apis.ts         |  13 +
 22 files changed, 1225 insertions(+), 335 deletions(-)
 delete mode 100644 public/app/features/alerting/unified/components/receivers/DuplicateTemplateView.tsx
 delete mode 100644 public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx
 delete mode 100644 public/app/features/alerting/unified/components/receivers/NewTemplateView.tsx
 create mode 100644 public/app/features/alerting/unified/mocks/server/handlers/k8s/templates.k8s.ts
 create mode 100644 public/app/features/alerting/unified/openapi/templatesApi.gen.ts

diff --git a/.betterer.results b/.betterer.results
index 7f27fd80d8f..12d1729d2e1 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1765,12 +1765,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
     ],
-    "public/app/features/alerting/unified/components/receivers/DuplicateTemplateView.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
-    ],
-    "public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
-    ],
     "public/app/features/alerting/unified/components/receivers/GlobalConfigForm.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
diff --git a/public/app/features/alerting/unified/Templates.test.tsx b/public/app/features/alerting/unified/Templates.test.tsx
index a18a74475b7..6d695af5826 100644
--- a/public/app/features/alerting/unified/Templates.test.tsx
+++ b/public/app/features/alerting/unified/Templates.test.tsx
@@ -1,7 +1,12 @@
 import * as React from 'react';
-import { render, screen } from 'test/test-utils';
+import { Props } from 'react-virtualized-auto-sizer';
+import { render, screen, within } from 'test/test-utils';
+import { byRole } from 'testing-library-selector';
 
+import { CodeEditorProps } from '@grafana/ui/src/components/Monaco/types';
+import { AppNotificationList } from 'app/core/components/AppNotifications/AppNotificationList';
 import { setupMswServer } from 'app/features/alerting/unified/mockApi';
+import { testWithFeatureToggles } from 'app/features/alerting/unified/test/test-utils';
 import { AccessControlAction } from 'app/types';
 
 import Templates from './Templates';
@@ -11,6 +16,38 @@ jest.mock('app/core/components/AppChrome/AppChromeUpdate', () => ({
   AppChromeUpdate: ({ actions }: { actions: React.ReactNode }) => <div>{actions}</div>,
 }));
 
+//mock updateDefinesWithUniqueValue
+jest.mock('app/features/alerting/unified/utils/templates', () => ({
+  ...jest.requireActual('app/features/alerting/unified/utils/templates'),
+  updateDefinesWithUniqueValue: (templateContent: string) => {
+    return templateContent.replace(/custom-email/g, 'custom-email_NEW');
+  },
+}));
+
+jest.mock(
+  'react-virtualized-auto-sizer',
+  () =>
+    ({ children }: Props) =>
+      children({ width: 1000, height: 1000, scaledWidth: 1, scaledHeight: 1 })
+);
+
+jest.mock('@grafana/ui', () => ({
+  ...jest.requireActual('@grafana/ui'),
+  CodeEditor: ({ value, onChange }: CodeEditorProps) => (
+    <textarea data-testid="code-editor" value={value} onChange={(e) => onChange?.(e.target.value)} />
+  ),
+}));
+
+const ui = {
+  templateForm: byRole('form', { name: 'Template form' }),
+};
+
+const navUrl = {
+  edit: (name: string) => `/alerting/notifications/templates/${name}/edit?alertmanager=grafana`,
+  duplicate: (name: string) => `/alerting/notifications/templates/${name}/duplicate?alertmanager=grafana`,
+  new: `/alerting/notifications/templates/new`,
+};
+
 setupMswServer();
 
 beforeEach(() => {
@@ -20,11 +57,83 @@ beforeEach(() => {
 describe('Templates routes', () => {
   it('allows duplication of template with spaces in name', async () => {
     render(<Templates />, {
-      historyOptions: {
-        initialEntries: ['/alerting/notifications/templates/template%20with%20spaces/duplicate?alertmanager=grafana'],
-      },
+      historyOptions: { initialEntries: [navUrl.duplicate('template%20with%20spaces')] },
     });
 
     expect(await screen.findByText('Edit payload')).toBeInTheDocument();
   });
+
+  it('allows editing of template with spaces in name', async () => {
+    render(<Templates />, { historyOptions: { initialEntries: [navUrl.edit('template%20with%20spaces')] } });
+
+    expect(await screen.findByText('Edit payload')).toBeInTheDocument();
+  });
+
+  it('renders empty template form', async () => {
+    render(<Templates />, { historyOptions: { initialEntries: [navUrl.new] } });
+
+    const form = await ui.templateForm.find();
+
+    expect(form).toBeInTheDocument();
+    expect(within(form).getByRole('textbox', { name: /Template name/ })).toHaveValue('');
+  });
+});
+
+describe('Templates K8s API', () => {
+  testWithFeatureToggles(['alertingApiServer']);
+
+  it('form edit renders with correct form values', async () => {
+    render(<Templates />, {
+      historyOptions: { initialEntries: [navUrl.edit('k8s-custom-email-resource-name')] },
+    });
+
+    const form = await ui.templateForm.find();
+
+    expect(form).toBeInTheDocument();
+    expect(within(form).getByRole('textbox', { name: /Template name/ })).toHaveValue('custom-email');
+    expect(within(form).getAllByTestId('code-editor')[0]).toHaveValue(
+      '{{ define "custom-email" }}  Custom email template {{ end }}'
+    );
+  });
+
+  it('renders duplicate template form with correct values', async () => {
+    render(<Templates />, {
+      historyOptions: { initialEntries: [navUrl.duplicate('k8s-custom-email-resource-name')] },
+    });
+
+    const form = await ui.templateForm.find();
+
+    expect(form).toBeInTheDocument();
+    expect(within(form).getByRole('textbox', { name: /Template name/ })).toHaveValue('custom-email (copy)');
+    expect(within(form).getAllByTestId('code-editor')[0]).toHaveTextContent(
+      '{{ define "custom-email_NEW" }} Custom email template {{ end }}'
+    );
+  });
+
+  it('updates a template', async () => {
+    const { user } = render(
+      <>
+        <Templates />
+        <AppNotificationList />
+      </>,
+      {
+        historyOptions: { initialEntries: [navUrl.edit('k8s-custom-email-resource-name')] },
+      }
+    );
+
+    const form = await ui.templateForm.find();
+
+    const templateEditor = within(form).getAllByTestId('code-editor')[0];
+
+    await user.clear(templateEditor);
+    await user.type(templateEditor, '{{ define "custom-email" }}Updated custom email template{{ end }}');
+
+    await user.click(screen.getByRole('button', { name: 'Save' }));
+
+    expect(await screen.findByRole('status', { name: 'Template saved' })).toHaveTextContent(
+      'Template custom-email has been saved'
+    );
+
+    expect(ui.templateForm.query()).not.toBeInTheDocument();
+  });
 });
diff --git a/public/app/features/alerting/unified/api/templateApi.ts b/public/app/features/alerting/unified/api/templateApi.ts
index 2d9f83014b9..ccfc5f62042 100644
--- a/public/app/features/alerting/unified/api/templateApi.ts
+++ b/public/app/features/alerting/unified/api/templateApi.ts
@@ -1,9 +1,9 @@
+import { AlertingApiExtraOptions } from 'app/features/alerting/unified/api/alertingApi';
 import { Template } from 'app/features/alerting/unified/components/receivers/form/fields/TemplateSelector';
 import { DEFAULT_TEMPLATES } from 'app/features/alerting/unified/utils/template-constants';
 
 import { parseTemplates } from '../components/receivers/form/fields/utils';
-
-import { alertingApi } from './alertingApi';
+import { generatedTemplatesApi } from '../openapi/templatesApi.gen';
 
 export const previewTemplateUrl = `/api/alertmanager/grafana/config/api/v1/templates/test`;
 
@@ -30,7 +30,18 @@ export interface AlertField {
   labels: KeyValueField[];
 }
 
-export const templatesApi = alertingApi.injectEndpoints({
+generatedTemplatesApi.enhanceEndpoints({
+  endpoints: {
+    readNamespacedTemplateGroup: (endpoint) => {
+      // When renaming a template, we end up refetching,
+      // and we would otherwise see a "NotFound" message. We suppress this to avoid confusion in the UI
+      const extraOptions: AlertingApiExtraOptions = { hideErrorMessage: true };
+      endpoint.extraOptions = extraOptions;
+    },
+  },
+});
+
+export const templatesApi = generatedTemplatesApi.injectEndpoints({
   endpoints: (build) => ({
     previewTemplate: build.mutation<TemplatePreviewResponse, { template: string; alerts: AlertField[]; name: string }>({
       query: ({ template, alerts, name }) => ({
diff --git a/public/app/features/alerting/unified/api/util.ts b/public/app/features/alerting/unified/api/util.ts
index 2babcf0dabd..7508a38a9bd 100644
--- a/public/app/features/alerting/unified/api/util.ts
+++ b/public/app/features/alerting/unified/api/util.ts
@@ -9,9 +9,13 @@ import { isFetchError } from '@grafana/runtime';
  *   .catch(notFoundToNull); // RuleGroupDTO | null
  */
 export function notFoundToNullOrThrow(error: unknown): null {
-  if (isFetchError(error) && error.status === 404) {
+  if (isNotFoundError(error)) {
     return null;
   }
 
   throw error;
 }
+
+export function isNotFoundError(error: unknown): boolean {
+  return isFetchError(error) && error.status === 404;
+}
diff --git a/public/app/features/alerting/unified/components/contact-points/DuplicateMessageTemplate.tsx b/public/app/features/alerting/unified/components/contact-points/DuplicateMessageTemplate.tsx
index 9050df7a085..edd4edc2ecb 100644
--- a/public/app/features/alerting/unified/components/contact-points/DuplicateMessageTemplate.tsx
+++ b/public/app/features/alerting/unified/components/contact-points/DuplicateMessageTemplate.tsx
@@ -1,42 +1,67 @@
 import { RouteChildrenProps } from 'react-router-dom';
 
+import { Alert, LoadingPlaceholder } from '@grafana/ui';
 import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound';
 
-import { useAlertmanagerConfig } from '../../hooks/useAlertmanagerConfig';
+import { isNotFoundError } from '../../api/util';
 import { useAlertmanager } from '../../state/AlertmanagerContext';
-import { DuplicateTemplateView } from '../receivers/DuplicateTemplateView';
+import { generateCopiedName } from '../../utils/duplicate';
+import { stringifyErrorLike } from '../../utils/misc';
+import { updateDefinesWithUniqueValue } from '../../utils/templates';
+import { TemplateForm } from '../receivers/TemplateForm';
+
+import { useGetNotificationTemplate, useNotificationTemplates } from './useNotificationTemplates';
 
 type Props = RouteChildrenProps<{ name: string }>;
 
-const NewMessageTemplate = ({ match }: Props) => {
-  const { selectedAlertmanager } = useAlertmanager();
-  const { data, isLoading, error } = useAlertmanagerConfig(selectedAlertmanager);
+const notFoundComponent = <EntityNotFound entity="Notification template" />;
 
-  const name = match?.params.name;
-  if (!name) {
+const DuplicateMessageTemplate = ({ match }: Props) => {
+  const { selectedAlertmanager } = useAlertmanager();
+  const templateUid = match?.params.name ? decodeURIComponent(match?.params.name) : undefined;
+
+  const {
+    currentData: template,
+    isLoading,
+    error,
+  } = useGetNotificationTemplate({ alertmanager: selectedAlertmanager ?? '', uid: templateUid ?? '' });
+
+  const {
+    currentData: templates,
+    isLoading: templatesLoading,
+    error: templatesError,
+  } = useNotificationTemplates({ alertmanager: selectedAlertmanager ?? '' });
+
+  if (!selectedAlertmanager) {
+    return <EntityNotFound entity="Alertmanager" />;
+  }
+
+  if (!templateUid) {
     return <EntityNotFound entity="Notification template" />;
   }
 
-  if (isLoading && !data) {
-    return 'loading...';
+  if (isLoading || templatesLoading) {
+    return <LoadingPlaceholder text="Loading notification template" />;
   }
 
-  // TODO decent error handling
-  if (error) {
-    return String(error);
+  if (error || templatesError || !template || !templates) {
+    return isNotFoundError(error) ? (
+      notFoundComponent
+    ) : (
+      <Alert title="Error loading notification template" severity="error">
+        {stringifyErrorLike(error)}
+      </Alert>
+    );
   }
 
-  if (!data) {
-    return null;
-  }
+  const duplicatedName = generateCopiedName(template.title, templates?.map((t) => t.title) ?? []);
 
   return (
-    <DuplicateTemplateView
-      alertManagerSourceName={selectedAlertmanager!}
-      config={data}
-      templateName={decodeURIComponent(name)}
+    <TemplateForm
+      alertmanager={selectedAlertmanager}
+      prefill={{ title: duplicatedName, content: updateDefinesWithUniqueValue(template.content) }}
     />
   );
 };
 
-export default NewMessageTemplate;
+export default DuplicateMessageTemplate;
diff --git a/public/app/features/alerting/unified/components/contact-points/EditMessageTemplate.tsx b/public/app/features/alerting/unified/components/contact-points/EditMessageTemplate.tsx
index 502752f368e..2e2cfc6273b 100644
--- a/public/app/features/alerting/unified/components/contact-points/EditMessageTemplate.tsx
+++ b/public/app/features/alerting/unified/components/contact-points/EditMessageTemplate.tsx
@@ -1,46 +1,50 @@
-import { RouteChildrenProps } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
-import { Alert } from '@grafana/ui';
+import { Alert, LoadingPlaceholder } from '@grafana/ui';
 import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound';
 
-import { useAlertmanagerConfig } from '../../hooks/useAlertmanagerConfig';
+import { isNotFoundError } from '../../api/util';
 import { useAlertmanager } from '../../state/AlertmanagerContext';
-import { EditTemplateView } from '../receivers/EditTemplateView';
+import { stringifyErrorLike } from '../../utils/misc';
+import { TemplateForm } from '../receivers/TemplateForm';
 
-type Props = RouteChildrenProps<{ name: string }>;
+import { useGetNotificationTemplate } from './useNotificationTemplates';
+
+const notFoundComponent = <EntityNotFound entity="Notification template" />;
+
+const EditMessageTemplate = () => {
+  const { name } = useParams<{ name: string }>();
+  const templateUid = name ? decodeURIComponent(name) : undefined;
 
-const EditMessageTemplate = ({ match }: Props) => {
   const { selectedAlertmanager } = useAlertmanager();
-  const { data, isLoading, error } = useAlertmanagerConfig(selectedAlertmanager);
+  const { currentData, isLoading, error } = useGetNotificationTemplate({
+    alertmanager: selectedAlertmanager ?? '',
+    uid: templateUid ?? '',
+  });
 
-  const name = match?.params.name;
-  if (!name) {
+  if (!templateUid) {
     return <EntityNotFound entity="Notification template" />;
   }
 
-  if (isLoading && !data) {
-    return 'loading...';
+  if (isLoading) {
+    return <LoadingPlaceholder text="Loading template..." />;
   }
 
   if (error) {
-    return (
+    return isNotFoundError(error) ? (
+      notFoundComponent
+    ) : (
       <Alert severity="error" title="Failed to fetch notification template">
-        {String(error)}
+        {stringifyErrorLike(error)}
       </Alert>
     );
   }
 
-  if (!data) {
-    return null;
+  if (!currentData) {
+    return notFoundComponent;
   }
 
-  return (
-    <EditTemplateView
-      alertManagerSourceName={selectedAlertmanager!}
-      config={data}
-      templateName={decodeURIComponent(name)}
-    />
-  );
+  return <TemplateForm alertmanager={selectedAlertmanager ?? ''} originalTemplate={currentData} />;
 };
 
 export default EditMessageTemplate;
diff --git a/public/app/features/alerting/unified/components/contact-points/NewMessageTemplate.tsx b/public/app/features/alerting/unified/components/contact-points/NewMessageTemplate.tsx
index 042da972d17..e11ac531390 100644
--- a/public/app/features/alerting/unified/components/contact-points/NewMessageTemplate.tsx
+++ b/public/app/features/alerting/unified/components/contact-points/NewMessageTemplate.tsx
@@ -1,30 +1,16 @@
-import { Alert } from '@grafana/ui';
+import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound';
 
-import { useAlertmanagerConfig } from '../../hooks/useAlertmanagerConfig';
 import { useAlertmanager } from '../../state/AlertmanagerContext';
-import { NewTemplateView } from '../receivers/NewTemplateView';
+import { TemplateForm } from '../receivers/TemplateForm';
 
 const NewMessageTemplate = () => {
   const { selectedAlertmanager } = useAlertmanager();
-  const { data, isLoading, error } = useAlertmanagerConfig(selectedAlertmanager);
 
-  if (isLoading && !data) {
-    return 'loading...';
+  if (!selectedAlertmanager) {
+    return <EntityNotFound entity="Alertmanager" />;
   }
 
-  if (error) {
-    return (
-      <Alert severity="error" title="Failed to fetch notification template">
-        {String(error)}
-      </Alert>
-    );
-  }
-
-  if (!data) {
-    return null;
-  }
-
-  return <NewTemplateView alertManagerSourceName={selectedAlertmanager!} config={data} />;
+  return <TemplateForm alertmanager={selectedAlertmanager} />;
 };
 
 export default NewMessageTemplate;
diff --git a/public/app/features/alerting/unified/components/contact-points/NotificationTemplates.test.tsx b/public/app/features/alerting/unified/components/contact-points/NotificationTemplates.test.tsx
index 96d298ddcbe..a9ec6208599 100644
--- a/public/app/features/alerting/unified/components/contact-points/NotificationTemplates.test.tsx
+++ b/public/app/features/alerting/unified/components/contact-points/NotificationTemplates.test.tsx
@@ -1,5 +1,7 @@
 import { render, screen, within } from 'test/test-utils';
 
+import { AppNotificationList } from 'app/core/components/AppNotifications/AppNotificationList';
+import { testWithFeatureToggles } from 'app/features/alerting/unified/test/test-utils';
 import { AccessControlAction } from 'app/types';
 
 import { setupMswServer } from '../../mockApi';
@@ -9,9 +11,10 @@ import { AlertmanagerProvider } from '../../state/AlertmanagerContext';
 import { NotificationTemplates } from './NotificationTemplates';
 
 const renderWithProvider = () => {
-  render(
+  return render(
     <AlertmanagerProvider accessType={'notification'}>
       <NotificationTemplates />
+      <AppNotificationList />
     </AlertmanagerProvider>
   );
 };
@@ -70,4 +73,45 @@ describe('NotificationTemplates', () => {
     const provisionedRow = await screen.findByRole('row', { name: /provisioned-template/i });
     expect(within(provisionedRow).getByText('Provisioned')).toBeInTheDocument();
   });
+
+  describe('k8s API', () => {
+    testWithFeatureToggles(['alertingApiServer']);
+
+    it('Should render templates table with the correct rows', async () => {
+      renderWithProvider();
+
+      const slackRow = await screen.findByRole('row', { name: /slack-template/i });
+      expect(within(slackRow).getByRole('cell', { name: /slack-template/i })).toBeInTheDocument();
+
+      const emailRow = await screen.findByRole('row', { name: /custom-email/i });
+      expect(within(emailRow).getByRole('cell', { name: /custom-email/i })).toBeInTheDocument();
+
+      const provisionedRow = await screen.findByRole('row', { name: /provisioned-template/i });
+      expect(within(provisionedRow).getByRole('cell', { name: /provisioned-template/i })).toBeInTheDocument();
+    });
+
+    it('Should provisioned badge for provisioned template', async () => {
+      renderWithProvider();
+
+      const provisionedRow = await screen.findByRole('row', { name: /provisioned-template/i });
+      expect(within(provisionedRow).getByText('Provisioned')).toBeInTheDocument();
+    });
+
+    it('Should delete template', async () => {
+      const { user } = renderWithProvider();
+
+      const emailRow = await screen.findByRole('row', { name: /custom-email/i });
+      const deleteEmailButton = within(emailRow).getByRole('button', { name: /delete template/i });
+
+      await user.click(deleteEmailButton);
+
+      const confirmDeleteButton = await screen.findByRole('button', { name: /Yes, delete/i });
+      await user.click(confirmDeleteButton);
+
+      expect(screen.queryByRole('row', { name: /custom-email/i })).not.toBeInTheDocument();
+      expect(await screen.findByRole('status', { name: 'Template deleted' })).toHaveTextContent(
+        'Template custom-email has been deleted'
+      );
+    });
+  });
 });
diff --git a/public/app/features/alerting/unified/components/contact-points/__mocks__/alertmanager.config.mock.json b/public/app/features/alerting/unified/components/contact-points/__mocks__/alertmanager.config.mock.json
index 34230f1ba6d..784c8ca555f 100644
--- a/public/app/features/alerting/unified/components/contact-points/__mocks__/alertmanager.config.mock.json
+++ b/public/app/features/alerting/unified/components/contact-points/__mocks__/alertmanager.config.mock.json
@@ -1,9 +1,9 @@
 {
   "template_files": {
-    "slack-template": "{{ define 'slack-template' }} Custom slack template {{ end }}",
-    "custom-email": "{{ define 'custom-email' }}  Custom email template {{ end }}",
-    "provisioned-template": "{{ define 'provisioned-template' }}  Custom provisioned template {{ end }}",
-    "template with spaces": "{{ define 'template with spaces' }}  Custom template with spaces in the name {{ end }}"
+    "slack-template": "{{ define \"slack-template\" }} Custom slack template {{ end }}",
+    "custom-email": "{{ define \"custom-email\" }}  Custom email template {{ end }}",
+    "provisioned-template": "{{ define \"provisioned-template\" }}  Custom provisioned template {{ end }}",
+    "template with spaces": "{{ define \"template with spaces\" }}  Custom template with spaces in the name {{ end }}"
   },
   "template_file_provenances": {
     "provisioned-template": "api"
diff --git a/public/app/features/alerting/unified/components/contact-points/useNotificationTemplates.ts b/public/app/features/alerting/unified/components/contact-points/useNotificationTemplates.ts
index 35577db9d5f..e98aca41847 100644
--- a/public/app/features/alerting/unified/components/contact-points/useNotificationTemplates.ts
+++ b/public/app/features/alerting/unified/components/contact-points/useNotificationTemplates.ts
@@ -1,11 +1,19 @@
 import { produce } from 'immer';
+import { useEffect } from 'react';
+import { Validate } from 'react-hook-form';
 
 import { useDispatch } from 'app/types';
 
 import { AlertManagerCortexConfig } from '../../../../../plugins/datasource/alertmanager/types';
 import { alertmanagerApi } from '../../api/alertmanagerApi';
+import { templatesApi } from '../../api/templateApi';
+import {
+  ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup,
+  ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroupList,
+} from '../../openapi/templatesApi.gen';
 import { updateAlertManagerConfigAction } from '../../state/actions';
-import { PROVENANCE_NONE } from '../../utils/k8s/constants';
+import { K8sAnnotations, PROVENANCE_NONE } from '../../utils/k8s/constants';
+import { getAnnotation, getK8sNamespace, shouldUseK8sApi } from '../../utils/k8s/utils';
 import { ensureDefine } from '../../utils/templates';
 import { TemplateFormValues } from '../receivers/TemplateForm';
 
@@ -14,15 +22,38 @@ interface BaseAlertmanagerArgs {
 }
 
 export interface NotificationTemplate {
-  name: string;
-  template: string;
+  uid: string;
+  title: string;
+  content: string;
   provenance: string;
 }
-export function useNotificationTemplates({ alertmanager }: BaseAlertmanagerArgs) {
-  const { useGetAlertmanagerConfigurationQuery } = alertmanagerApi;
 
-  const templatesRequestState = useGetAlertmanagerConfigurationQuery(alertmanager, {
-    skip: !alertmanager,
+const { useGetAlertmanagerConfigurationQuery, useLazyGetAlertmanagerConfigurationQuery } = alertmanagerApi;
+const {
+  useListNamespacedTemplateGroupQuery,
+  useLazyReadNamespacedTemplateGroupQuery,
+  useCreateNamespacedTemplateGroupMutation,
+  useReplaceNamespacedTemplateGroupMutation,
+  useDeleteNamespacedTemplateGroupMutation,
+} = templatesApi;
+
+export function useNotificationTemplates({ alertmanager }: BaseAlertmanagerArgs) {
+  const k8sApiSupported = shouldUseK8sApi(alertmanager);
+
+  const k8sApiTemplatesRequestState = useListNamespacedTemplateGroupQuery(
+    { namespace: getK8sNamespace() },
+    {
+      skip: !k8sApiSupported,
+      selectFromResult: (state) => ({
+        ...state,
+        data: state.data ? templateGroupsToTemplates(state.data) : undefined,
+        currentData: state.currentData ? templateGroupsToTemplates(state.currentData) : undefined,
+      }),
+    }
+  );
+
+  const configApiTemplatesRequestState = useGetAlertmanagerConfigurationQuery(alertmanager, {
+    skip: k8sApiSupported,
     selectFromResult: (state) => ({
       ...state,
       data: state.data ? amConfigToTemplates(state.data) : undefined,
@@ -30,34 +61,108 @@ export function useNotificationTemplates({ alertmanager }: BaseAlertmanagerArgs)
     }),
   });
 
-  return templatesRequestState;
+  return k8sApiSupported ? k8sApiTemplatesRequestState : configApiTemplatesRequestState;
+}
+
+function templateGroupsToTemplates(
+  templateGroups: ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroupList
+): NotificationTemplate[] {
+  return templateGroups.items.map((templateGroup) => templateGroupToTemplate(templateGroup));
+}
+
+function templateGroupToTemplate(
+  templateGroup: ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup
+): NotificationTemplate {
+  const provenance = getAnnotation(templateGroup, K8sAnnotations.Provenance) ?? PROVENANCE_NONE;
+  return {
+    // K8s entities should always have a metadata.name property. The type is marked as optional because it's also used in other places
+    uid: templateGroup.metadata.name ?? templateGroup.spec.title,
+    title: templateGroup.spec.title,
+    content: templateGroup.spec.content,
+    provenance,
+  };
 }
 
 function amConfigToTemplates(config: AlertManagerCortexConfig): NotificationTemplate[] {
-  return Object.entries(config.template_files).map(([name, template]) => ({
-    name,
-    template,
+  return Object.entries(config.template_files).map(([title, content]) => ({
+    uid: title,
+    title,
+    content,
     // Undefined, null or empty string should be converted to PROVENANCE_NONE
-    provenance: (config.template_file_provenances ?? {})[name] || PROVENANCE_NONE,
+    provenance: (config.template_file_provenances ?? {})[title] || PROVENANCE_NONE,
   }));
 }
 
+interface GetTemplateParams extends BaseAlertmanagerArgs {
+  uid: string;
+}
+
+export function useGetNotificationTemplate({ alertmanager, uid }: GetTemplateParams) {
+  const [fetchAmConfig, amConfigStatus] = useLazyGetAlertmanagerConfigurationQuery({
+    selectFromResult: (state) => ({
+      ...state,
+      data: state.data ? amConfigToTemplate(state.data, uid) : undefined,
+      currentData: state.currentData ? amConfigToTemplate(state.currentData, uid) : undefined,
+      // TODO set error and isError in case template is not found
+    }),
+  });
+  const [fetchTemplate, templateStatus] = useLazyReadNamespacedTemplateGroupQuery({
+    selectFromResult: (state) => {
+      return {
+        ...state,
+        data: state.data ? templateGroupToTemplate(state.data) : undefined,
+        currentData: state.currentData ? templateGroupToTemplate(state.currentData) : undefined,
+      };
+    },
+  });
+
+  const k8sApiSupported = shouldUseK8sApi(alertmanager);
+
+  // TODO: Decide on a consistent approach for conditionally calling in our hooks -
+  // useEffect? or using `skip` properly in RTKQ hooks?
+  // What are pros and cons of each?
+  useEffect(() => {
+    if (k8sApiSupported) {
+      fetchTemplate({ namespace: getK8sNamespace(), name: uid });
+    } else {
+      fetchAmConfig(alertmanager);
+    }
+  }, [alertmanager, uid, k8sApiSupported, fetchAmConfig, fetchTemplate]);
+
+  return k8sApiSupported ? templateStatus : amConfigStatus;
+}
+
+function amConfigToTemplate(config: AlertManagerCortexConfig, name: string): NotificationTemplate | undefined {
+  const templates = amConfigToTemplates(config);
+  return templates.find((t) => t.title === name);
+}
+
+interface CreateTemplateParams {
+  templateValues: TemplateFormValues;
+}
+
 export function useCreateNotificationTemplate({ alertmanager }: BaseAlertmanagerArgs) {
   const dispatch = useDispatch();
-  const { useLazyGetAlertmanagerConfigurationQuery } = alertmanagerApi;
 
   const [fetchAmConfig] = useLazyGetAlertmanagerConfigurationQuery();
+  const [createNamespacedTemplateGroup] = useCreateNamespacedTemplateGroupMutation();
 
-  return async ({ template }: { template: TemplateFormValues }) => {
+  const k8sApiSupported = shouldUseK8sApi(alertmanager);
+
+  async function createUsingConfigFileApi({ templateValues }: CreateTemplateParams) {
     const amConfig = await fetchAmConfig(alertmanager).unwrap();
     // wrap content in "define" if it's not already wrapped, in case user did not do it/
     // it's not obvious that this is needed for template to work
-    const content = ensureDefine(template.name, template.content);
+    const content = ensureDefine(templateValues.title, templateValues.content);
+
+    const targetTemplateExists = amConfig.template_files?.[templateValues.title] !== undefined;
+    if (targetTemplateExists) {
+      throw new Error('target template already exists');
+    }
 
-    // TODO Check we're NOT overriding an existing template
     const updatedConfig = produce(amConfig, (draft) => {
-      draft.template_files[template.name] = content;
-      draft.alertmanager_config.templates = [...(draft.alertmanager_config.templates ?? []), template.name];
+      draft.template_files[templateValues.title] = content;
+      draft.alertmanager_config.templates = [...(draft.alertmanager_config.templates ?? []), templateValues.title];
     });
 
     return dispatch(
@@ -65,25 +170,46 @@ export function useCreateNotificationTemplate({ alertmanager }: BaseAlertmanager
         alertManagerSourceName: alertmanager,
         newConfig: updatedConfig,
         oldConfig: amConfig,
-        successMessage: 'Template saved.',
       })
     ).unwrap();
-  };
+  }
+
+  async function createUsingK8sApi({ templateValues }: CreateTemplateParams) {
+    const content = ensureDefine(templateValues.title, templateValues.content);
+
+    return createNamespacedTemplateGroup({
+      namespace: getK8sNamespace(),
+      comGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup: {
+        spec: { title: templateValues.title, content },
+        metadata: {},
+      },
+    }).unwrap();
+  }
+
+  return k8sApiSupported ? createUsingK8sApi : createUsingConfigFileApi;
+}
+
+interface UpdateTemplateParams {
+  template: NotificationTemplate;
+  patch: TemplateFormValues;
 }
 
 export function useUpdateNotificationTemplate({ alertmanager }: BaseAlertmanagerArgs) {
   const dispatch = useDispatch();
-  const { useLazyGetAlertmanagerConfigurationQuery } = alertmanagerApi;
 
   const [fetchAmConfig] = useLazyGetAlertmanagerConfigurationQuery();
+  const [replaceNamespacedTemplateGroup] = useReplaceNamespacedTemplateGroupMutation();
 
-  return async ({ originalName, template }: { originalName: string; template: TemplateFormValues }) => {
+  const k8sApiSupported = shouldUseK8sApi(alertmanager);
+
+  async function updateUsingConfigFileApi({ template, patch }: UpdateTemplateParams) {
     const amConfig = await fetchAmConfig(alertmanager).unwrap();
     // wrap content in "define" if it's not already wrapped, in case user did not do it/
     // it's not obvious that this is needed for template to work
-    const content = ensureDefine(template.name, template.content);
+    const content = ensureDefine(patch.title, patch.content);
 
-    const nameChanged = originalName !== template.name;
+    const originalName = template.title; // For ConfigFile API name is the same as uid
+    const nameChanged = originalName !== patch.title;
 
     // TODO Maybe we could simplify or extract this logic
     const updatedConfig = produce(amConfig, (draft) => {
@@ -92,8 +218,8 @@ export function useUpdateNotificationTemplate({ alertmanager }: BaseAlertmanager
         draft.alertmanager_config.templates = draft.alertmanager_config.templates?.filter((t) => t !== originalName);
       }
 
-      draft.template_files[template.name] = content;
-      draft.alertmanager_config.templates = [...(draft.alertmanager_config.templates ?? []), template.name];
+      draft.template_files[patch.title] = content;
+      draft.alertmanager_config.templates = [...(draft.alertmanager_config.templates ?? []), patch.title];
     });
 
     return dispatch(
@@ -101,24 +227,37 @@ export function useUpdateNotificationTemplate({ alertmanager }: BaseAlertmanager
         alertManagerSourceName: alertmanager,
         newConfig: updatedConfig,
         oldConfig: amConfig,
-        successMessage: 'Template saved.',
       })
     ).unwrap();
-  };
+  }
+
+  async function updateUsingK8sApi({ template, patch }: UpdateTemplateParams) {
+    const content = ensureDefine(patch.title, patch.content);
+
+    return replaceNamespacedTemplateGroup({
+      namespace: getK8sNamespace(),
+      name: template.uid,
+      comGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup: {
+        spec: { title: patch.title, content },
+        metadata: { name: template.uid },
+      },
+    }).unwrap();
+  }
+
+  return k8sApiSupported ? updateUsingK8sApi : updateUsingConfigFileApi;
 }
 
 export function useDeleteNotificationTemplate({ alertmanager }: BaseAlertmanagerArgs) {
   const dispatch = useDispatch();
-  const { useLazyGetAlertmanagerConfigurationQuery } = alertmanagerApi;
-
   const [fetchAmConfig] = useLazyGetAlertmanagerConfigurationQuery();
+  const [deleteNamespacedTemplateGroup] = useDeleteNamespacedTemplateGroupMutation();
 
-  return async ({ name }: { name: string }) => {
+  async function deleteUsingConfigFileApi({ uid }: { uid: string }) {
     const amConfig = await fetchAmConfig(alertmanager).unwrap();
 
     const updatedConfig = produce(amConfig, (draft) => {
-      delete draft.template_files[name];
-      draft.alertmanager_config.templates = draft.alertmanager_config.templates?.filter((t) => t !== name);
+      delete draft.template_files[uid];
+      draft.alertmanager_config.templates = draft.alertmanager_config.templates?.filter((t) => t !== uid);
     });
 
     return dispatch(
@@ -126,8 +265,65 @@ export function useDeleteNotificationTemplate({ alertmanager }: BaseAlertmanager
         alertManagerSourceName: alertmanager,
         newConfig: updatedConfig,
         oldConfig: amConfig,
-        successMessage: 'Template deleted.',
       })
     ).unwrap();
+  }
+
+  async function deleteUsingK8sApi({ uid }: { uid: string }) {
+    return deleteNamespacedTemplateGroup({
+      namespace: getK8sNamespace(),
+      name: uid,
+      ioK8SApimachineryPkgApisMetaV1DeleteOptions: {},
+    }).unwrap();
+  }
+
+  const k8sApiSupported = shouldUseK8sApi(alertmanager);
+  return k8sApiSupported ? deleteUsingK8sApi : deleteUsingConfigFileApi;
+}
+
+export function useValidateNotificationTemplate({ alertmanager }: BaseAlertmanagerArgs) {
+  const { useLazyGetAlertmanagerConfigurationQuery } = alertmanagerApi;
+  const [fetchAmConfig] = useLazyGetAlertmanagerConfigurationQuery();
+
+  const titleIsUnique: Validate<string, TemplateFormValues> = async (name) => {
+    const k8sApiSupported = shouldUseK8sApi(alertmanager);
+
+    if (k8sApiSupported) {
+      // K8s API handles validation for us, so we can just return true
+      // and rely on API errors
+      return true;
+    }
+
+    const amConfig = await fetchAmConfig(alertmanager).unwrap();
+    const templates = amConfigToTemplates(amConfig);
+    const templateOfThisNameExists = templates.some((t) => t.title === name);
+
+    if (templateOfThisNameExists) {
+      return 'Another template with this name already exists';
+    }
+
+    return true;
+  };
+
+  return {
+    titleIsUnique,
+  };
+}
+
+interface NotificationTemplateMetadata {
+  isProvisioned: boolean;
+}
+
+export function useNotificationTemplateMetadata(
+  template: NotificationTemplate | undefined
+): NotificationTemplateMetadata {
+  if (!template) {
+    return {
+      isProvisioned: false,
+    };
+  }
+
+  return {
+    isProvisioned: Boolean(template.provenance) && template.provenance !== PROVENANCE_NONE,
   };
 }
diff --git a/public/app/features/alerting/unified/components/receivers/DuplicateTemplateView.tsx b/public/app/features/alerting/unified/components/receivers/DuplicateTemplateView.tsx
deleted file mode 100644
index e6f55163d1e..00000000000
--- a/public/app/features/alerting/unified/components/receivers/DuplicateTemplateView.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Alert } from '@grafana/ui';
-import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
-
-import { generateCopiedName } from '../../utils/duplicate';
-import { updateDefinesWithUniqueValue } from '../../utils/templates';
-
-import { TemplateForm } from './TemplateForm';
-
-interface Props {
-  templateName: string;
-  config: AlertManagerCortexConfig;
-  alertManagerSourceName: string;
-}
-
-export const DuplicateTemplateView = ({ config, templateName, alertManagerSourceName }: Props) => {
-  const template = config.template_files?.[templateName];
-
-  if (!template) {
-    return (
-      <Alert severity="error" title="Template not found">
-        Sorry, this template does not seem to exist.
-      </Alert>
-    );
-  }
-
-  const duplicatedName = generateCopiedName(templateName, Object.keys(config.template_files));
-
-  return (
-    <TemplateForm
-      alertManagerSourceName={alertManagerSourceName}
-      config={config}
-      existing={{ name: duplicatedName, content: updateDefinesWithUniqueValue(template) }}
-    />
-  );
-};
diff --git a/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx b/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx
deleted file mode 100644
index 210a021936d..00000000000
--- a/public/app/features/alerting/unified/components/receivers/EditTemplateView.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Alert } from '@grafana/ui';
-import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
-
-import { TemplateForm } from './TemplateForm';
-
-interface Props {
-  templateName: string;
-  config: AlertManagerCortexConfig;
-  alertManagerSourceName: string;
-}
-
-export const EditTemplateView = ({ config, templateName, alertManagerSourceName }: Props) => {
-  const template = config.template_files?.[templateName];
-  const provenance = config.template_file_provenances?.[templateName];
-
-  if (!template) {
-    return (
-      <Alert severity="error" title="Template not found">
-        Sorry, this template does not seem to exist.
-      </Alert>
-    );
-  }
-  return (
-    <TemplateForm
-      alertManagerSourceName={alertManagerSourceName}
-      config={config}
-      existing={{ name: templateName, content: template }}
-      provenance={provenance}
-    />
-  );
-};
diff --git a/public/app/features/alerting/unified/components/receivers/NewTemplateView.tsx b/public/app/features/alerting/unified/components/receivers/NewTemplateView.tsx
deleted file mode 100644
index 00d3d788333..00000000000
--- a/public/app/features/alerting/unified/components/receivers/NewTemplateView.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
-
-import { TemplateForm } from './TemplateForm';
-
-interface Props {
-  config: AlertManagerCortexConfig;
-  alertManagerSourceName: string;
-}
-
-export const NewTemplateView = ({ config, alertManagerSourceName }: Props) => {
-  return <TemplateForm config={config} alertManagerSourceName={alertManagerSourceName} />;
-};
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
index 5dab9e79a87..eeb6890e744 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { addMinutes, subDays, subHours } from 'date-fns';
 import { Location } from 'history';
 import { useRef, useState } from 'react';
-import { FormProvider, useForm, Validate } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useToggle } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
@@ -24,7 +24,7 @@ import {
 import { useAppNotification } from 'app/core/copy/appNotification';
 import { useCleanup } from 'app/core/hooks/useCleanup';
 import { ActiveTab as ContactPointsActiveTabs } from 'app/features/alerting/unified/components/contact-points/ContactPoints';
-import { AlertManagerCortexConfig, TestTemplateAlert } from 'app/plugins/datasource/alertmanager/types';
+import { TestTemplateAlert } from 'app/plugins/datasource/alertmanager/types';
 
 import { AppChromeUpdate } from '../../../../../core/components/AppChrome/AppChromeUpdate';
 import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
@@ -34,8 +34,11 @@ import { initialAsyncRequestState } from '../../utils/redux';
 import { ProvisionedResource, ProvisioningAlert } from '../Provisioning';
 import { EditorColumnHeader } from '../contact-points/templates/EditorColumnHeader';
 import {
+  NotificationTemplate,
   useCreateNotificationTemplate,
+  useNotificationTemplateMetadata,
   useUpdateNotificationTemplate,
+  useValidateNotificationTemplate,
 } from '../contact-points/useNotificationTemplates';
 
 import { PayloadEditor } from './PayloadEditor';
@@ -45,21 +48,21 @@ import { TemplatePreview } from './TemplatePreview';
 import { snippets } from './editor/templateDataSuggestions';
 
 export interface TemplateFormValues {
-  name: string;
+  title: string;
   content: string;
 }
 
 export const defaults: TemplateFormValues = Object.freeze({
-  name: '',
+  title: '',
   content: '',
 });
 
 interface Props {
-  existing?: TemplateFormValues;
-  config: AlertManagerCortexConfig;
-  alertManagerSourceName: string;
-  provenance?: string;
+  originalTemplate?: NotificationTemplate;
+  prefill?: TemplateFormValues;
+  alertmanager: string;
 }
+
 export const isDuplicating = (location: Location) => location.pathname.endsWith('/duplicate');
 
 /**
@@ -82,17 +85,18 @@ export const isDuplicating = (location: Location) => location.pathname.endsWith(
  * │                   ││           │
  * └───────────────────┘└───────────┘
  */
-export const TemplateForm = ({ existing, alertManagerSourceName, config, provenance }: Props) => {
+export const TemplateForm = ({ originalTemplate, prefill, alertmanager }: Props) => {
   const styles = useStyles2(getStyles);
 
   const appNotification = useAppNotification();
 
-  const createNewTemplate = useCreateNotificationTemplate({ alertmanager: alertManagerSourceName });
-  const updateTemplate = useUpdateNotificationTemplate({ alertmanager: alertManagerSourceName });
+  const createNewTemplate = useCreateNotificationTemplate({ alertmanager });
+  const updateTemplate = useUpdateNotificationTemplate({ alertmanager });
+  const { titleIsUnique } = useValidateNotificationTemplate({ alertmanager });
 
   useCleanup((state) => (state.unifiedAlerting.saveAMConfig = initialAsyncRequestState));
   const formRef = useRef<HTMLFormElement>(null);
-  const isGrafanaAlertManager = alertManagerSourceName === GRAFANA_RULES_SOURCE_NAME;
+  const isGrafanaAlertManager = alertmanager === GRAFANA_RULES_SOURCE_NAME;
 
   const { error } = useUnifiedAlertingSelector((state) => state.saveAMConfig);
 
@@ -101,6 +105,11 @@ export const TemplateForm = ({ existing, alertManagerSourceName, config, provena
   const [payload, setPayload] = useState(defaultPayloadString);
   const [payloadFormatError, setPayloadFormatError] = useState<string | null>(null);
 
+  const { isProvisioned } = useNotificationTemplateMetadata(originalTemplate);
+  const originalTemplatePrefill: TemplateFormValues | undefined = originalTemplate
+    ? { title: originalTemplate.title, content: originalTemplate.content }
+    : undefined;
+
   // splitter for template and payload editor
   const columnSplitter = useSplitter({
     direction: 'column',
@@ -119,7 +128,7 @@ export const TemplateForm = ({ existing, alertManagerSourceName, config, provena
 
   const formApi = useForm<TemplateFormValues>({
     mode: 'onSubmit',
-    defaultValues: existing ?? defaults,
+    defaultValues: prefill ?? originalTemplatePrefill ?? defaults,
   });
   const {
     handleSubmit,
@@ -131,28 +140,23 @@ export const TemplateForm = ({ existing, alertManagerSourceName, config, provena
   } = formApi;
 
   const submit = async (values: TemplateFormValues) => {
-    const returnLink = makeAMLink('/alerting/notifications', alertManagerSourceName, {
+    const returnLink = makeAMLink('/alerting/notifications', alertmanager, {
       tab: ContactPointsActiveTabs.NotificationTemplates,
     });
 
     try {
-      if (!existing) {
-        await createNewTemplate({ template: values });
+      if (!originalTemplate) {
+        await createNewTemplate({ templateValues: values });
       } else {
-        await updateTemplate({ originalName: existing.name, template: values });
+        await updateTemplate({ template: originalTemplate, patch: values });
       }
+      appNotification.success('Template saved', `Template ${values.title} has been saved`);
       locationService.push(returnLink);
     } catch (error) {
       appNotification.error('Error saving template', stringifyErrorLike(error));
     }
   };
 
-  const validateNameIsUnique: Validate<string, TemplateFormValues> = (name: string) => {
-    return !config.template_files[name] || existing?.name === name
-      ? true
-      : 'Another template with this name already exists.';
-  };
-
   const actionButtons = (
     <Stack>
       <Button onClick={() => formRef.current?.requestSubmit()} variant="primary" size="sm" disabled={isSubmitting}>
@@ -160,7 +164,7 @@ export const TemplateForm = ({ existing, alertManagerSourceName, config, provena
       </Button>
       <LinkButton
         disabled={isSubmitting}
-        href={makeAMLink('alerting/notifications', alertManagerSourceName, {
+        href={makeAMLink('alerting/notifications', alertmanager, {
           tab: ContactPointsActiveTabs.NotificationTemplates,
         })}
         variant="secondary"
@@ -175,7 +179,7 @@ export const TemplateForm = ({ existing, alertManagerSourceName, config, provena
     <>
       <FormProvider {...formApi}>
         <AppChromeUpdate actions={actionButtons} />
-        <form onSubmit={handleSubmit(submit)} ref={formRef} className={styles.form}>
+        <form onSubmit={handleSubmit(submit)} ref={formRef} className={styles.form} aria-label="Template form">
           {/* error message */}
           {error && (
             <Alert severity="error" title="Error saving template">
@@ -183,27 +187,27 @@ export const TemplateForm = ({ existing, alertManagerSourceName, config, provena
             </Alert>
           )}
           {/* warning about provisioned template */}
-          {provenance && (
+          {isProvisioned && (
             <Box grow={0}>
               <ProvisioningAlert resource={ProvisionedResource.Template} />
             </Box>
           )}
 
           {/* name field for the template */}
-          <FieldSet disabled={Boolean(provenance)} className={styles.fieldset}>
+          <FieldSet disabled={isProvisioned} className={styles.fieldset}>
             <InlineField
               label="Template name"
-              error={errors?.name?.message}
-              invalid={!!errors.name?.message}
+              error={errors?.title?.message}
+              invalid={!!errors.title?.message}
               required
               className={styles.nameField}
             >
               <Input
-                {...register('name', {
+                {...register('title', {
                   required: { value: true, message: 'Required.' },
-                  validate: { nameIsUnique: validateNameIsUnique },
+                  validate: { titleIsUnique },
                 })}
-                placeholder="Give your template a name"
+                placeholder="Give your template a title"
                 width={42}
                 autoFocus={true}
                 id="new-template-name"
@@ -281,7 +285,7 @@ export const TemplateForm = ({ existing, alertManagerSourceName, config, provena
                     <div {...rowSplitter.splitterProps}></div>
                     <TemplatePreview
                       payload={payload}
-                      templateName={watch('name')}
+                      templateName={watch('title')}
                       setPayloadFormatError={setPayloadFormatError}
                       payloadFormatError={payloadFormatError}
                       className={cx(styles.templatePreview, styles.minEditorSize)}
diff --git a/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx b/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
index 8e9e039401d..240997db6b7 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
@@ -1,16 +1,21 @@
 import { Fragment, useState } from 'react';
 
+import { logError } from '@grafana/runtime';
 import { ConfirmModal, useStyles2 } from '@grafana/ui';
+import { useAppNotification } from 'app/core/copy/appNotification';
 
 import { Authorize } from '../../components/Authorize';
 import { AlertmanagerAction } from '../../hooks/useAbilities';
 import { getAlertTableStyles } from '../../styles/table';
-import { PROVENANCE_NONE } from '../../utils/k8s/constants';
-import { makeAMLink } from '../../utils/misc';
+import { makeAMLink, stringifyErrorLike } from '../../utils/misc';
 import { CollapseToggle } from '../CollapseToggle';
 import { DetailsField } from '../DetailsField';
 import { ProvisioningBadge } from '../Provisioning';
-import { NotificationTemplate, useDeleteNotificationTemplate } from '../contact-points/useNotificationTemplates';
+import {
+  NotificationTemplate,
+  useDeleteNotificationTemplate,
+  useNotificationTemplateMetadata,
+} from '../contact-points/useNotificationTemplates';
 import { ActionIcon } from '../rules/ActionIcon';
 
 import { TemplateEditor } from './TemplateEditor';
@@ -21,16 +26,24 @@ interface Props {
 }
 
 export const TemplatesTable = ({ alertManagerName, templates }: Props) => {
+  const appNotification = useAppNotification();
   const deleteTemplate = useDeleteNotificationTemplate({ alertmanager: alertManagerName });
 
-  const [expandedTemplates, setExpandedTemplates] = useState<Record<string, boolean>>({});
   const tableStyles = useStyles2(getAlertTableStyles);
 
-  const [templateToDelete, setTemplateToDelete] = useState<string>();
+  const [templateToDelete, setTemplateToDelete] = useState<NotificationTemplate | undefined>();
 
   const onDeleteTemplate = async () => {
     if (templateToDelete) {
-      await deleteTemplate({ name: templateToDelete });
+      try {
+        await deleteTemplate({ uid: templateToDelete.uid });
+        appNotification.success('Template deleted', `Template ${templateToDelete.title} has been deleted`);
+      } catch (error) {
+        appNotification.error('Error deleting template', `Error deleting template ${templateToDelete.title}`);
+
+        const loggableError = error instanceof Error ? error : new Error(stringifyErrorLike(error));
+        logError(loggableError);
+      }
     }
     setTemplateToDelete(undefined);
   };
@@ -64,88 +77,15 @@ export const TemplatesTable = ({ alertManagerName, templates }: Props) => {
               <td colSpan={3}>No templates defined.</td>
             </tr>
           )}
-          {templates.map(({ name, template, provenance }, idx) => {
-            const isProvisioned = provenance !== PROVENANCE_NONE;
-            const isExpanded = expandedTemplates[name];
-            return (
-              <Fragment key={name}>
-                <tr key={name} className={idx % 2 === 0 ? tableStyles.evenRow : undefined}>
-                  <td>
-                    <CollapseToggle
-                      isCollapsed={!expandedTemplates[name]}
-                      onToggle={() => setExpandedTemplates({ ...expandedTemplates, [name]: !isExpanded })}
-                    />
-                  </td>
-                  <td>
-                    {name} {isProvisioned && <ProvisioningBadge />}
-                  </td>
-                  <td className={tableStyles.actionsCell}>
-                    {isProvisioned && (
-                      <ActionIcon
-                        to={makeAMLink(
-                          `/alerting/notifications/templates/${encodeURIComponent(name)}/edit`,
-                          alertManagerName
-                        )}
-                        tooltip="view template"
-                        icon="file-alt"
-                      />
-                    )}
-                    {!isProvisioned && (
-                      <Authorize actions={[AlertmanagerAction.UpdateNotificationTemplate]}>
-                        <ActionIcon
-                          to={makeAMLink(
-                            `/alerting/notifications/templates/${encodeURIComponent(name)}/edit`,
-                            alertManagerName
-                          )}
-                          tooltip="edit template"
-                          icon="pen"
-                        />
-                      </Authorize>
-                    )}
-                    <Authorize actions={[AlertmanagerAction.CreateContactPoint]}>
-                      <ActionIcon
-                        to={makeAMLink(
-                          `/alerting/notifications/templates/${encodeURIComponent(name)}/duplicate`,
-                          alertManagerName
-                        )}
-                        tooltip="Copy template"
-                        icon="copy"
-                      />
-                    </Authorize>
-                    {!isProvisioned && (
-                      <Authorize actions={[AlertmanagerAction.DeleteNotificationTemplate]}>
-                        <ActionIcon
-                          onClick={() => setTemplateToDelete(name)}
-                          tooltip="delete template"
-                          icon="trash-alt"
-                        />
-                      </Authorize>
-                    )}
-                  </td>
-                </tr>
-                {isExpanded && (
-                  <tr className={idx % 2 === 0 ? tableStyles.evenRow : undefined}>
-                    <td></td>
-                    <td colSpan={2}>
-                      <DetailsField label="Description" horizontal={true}>
-                        <TemplateEditor
-                          width={'auto'}
-                          height={'auto'}
-                          autoHeight={true}
-                          value={template}
-                          showLineNumbers={false}
-                          monacoOptions={{
-                            readOnly: true,
-                            scrollBeyondLastLine: false,
-                          }}
-                        />
-                      </DetailsField>
-                    </td>
-                  </tr>
-                )}
-              </Fragment>
-            );
-          })}
+          {templates.map((notificationTemplate, idx) => (
+            <TemplateRow
+              key={notificationTemplate.uid}
+              notificationTemplate={notificationTemplate}
+              idx={idx}
+              alertManagerName={alertManagerName}
+              onDeleteClick={setTemplateToDelete}
+            />
+          ))}
         </tbody>
       </table>
 
@@ -153,7 +93,7 @@ export const TemplatesTable = ({ alertManagerName, templates }: Props) => {
         <ConfirmModal
           isOpen={true}
           title="Delete template"
-          body={`Are you sure you want to delete template "${templateToDelete}"?`}
+          body={`Are you sure you want to delete template "${templateToDelete.title}"?`}
           confirmText="Yes, delete"
           onConfirm={onDeleteTemplate}
           onDismiss={() => setTemplateToDelete(undefined)}
@@ -162,3 +102,89 @@ export const TemplatesTable = ({ alertManagerName, templates }: Props) => {
     </>
   );
 };
+
+interface TemplateRowProps {
+  notificationTemplate: NotificationTemplate;
+  idx: number;
+  alertManagerName: string;
+  onDeleteClick: (template: NotificationTemplate) => void;
+}
+
+function TemplateRow({ notificationTemplate, idx, alertManagerName, onDeleteClick }: TemplateRowProps) {
+  const tableStyles = useStyles2(getAlertTableStyles);
+
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { isProvisioned } = useNotificationTemplateMetadata(notificationTemplate);
+
+  const { uid, title: name, content: template } = notificationTemplate;
+
+  return (
+    <Fragment key={uid}>
+      <tr className={idx % 2 === 0 ? tableStyles.evenRow : undefined}>
+        <td>
+          <CollapseToggle isCollapsed={!isExpanded} onToggle={() => setIsExpanded(!isExpanded)} />
+        </td>
+        <td>
+          {name} {isProvisioned && <ProvisioningBadge />}
+        </td>
+        <td className={tableStyles.actionsCell}>
+          {isProvisioned && (
+            <ActionIcon
+              to={makeAMLink(`/alerting/notifications/templates/${encodeURIComponent(uid)}/edit`, alertManagerName)}
+              tooltip="view template"
+              icon="file-alt"
+            />
+          )}
+          {!isProvisioned && (
+            <Authorize actions={[AlertmanagerAction.UpdateNotificationTemplate]}>
+              <ActionIcon
+                to={makeAMLink(`/alerting/notifications/templates/${encodeURIComponent(uid)}/edit`, alertManagerName)}
+                tooltip="edit template"
+                icon="pen"
+              />
+            </Authorize>
+          )}
+          <Authorize actions={[AlertmanagerAction.CreateContactPoint]}>
+            <ActionIcon
+              to={makeAMLink(
+                `/alerting/notifications/templates/${encodeURIComponent(uid)}/duplicate`,
+                alertManagerName
+              )}
+              tooltip="Copy template"
+              icon="copy"
+            />
+          </Authorize>
+          {!isProvisioned && (
+            <Authorize actions={[AlertmanagerAction.DeleteNotificationTemplate]}>
+              <ActionIcon
+                onClick={() => onDeleteClick(notificationTemplate)}
+                tooltip="delete template"
+                icon="trash-alt"
+              />
+            </Authorize>
+          )}
+        </td>
+      </tr>
+      {isExpanded && (
+        <tr className={idx % 2 === 0 ? tableStyles.evenRow : undefined}>
+          <td></td>
+          <td colSpan={2}>
+            <DetailsField label="Description" horizontal={true}>
+              <TemplateEditor
+                width={'auto'}
+                height={'auto'}
+                autoHeight={true}
+                value={template}
+                showLineNumbers={false}
+                monacoOptions={{
+                  readOnly: true,
+                  scrollBeyondLastLine: false,
+                }}
+              />
+            </DetailsField>
+          </td>
+        </tr>
+      )}
+    </Fragment>
+  );
+}
diff --git a/public/app/features/alerting/unified/components/receivers/__snapshots__/NewReceiverView.test.tsx.snap b/public/app/features/alerting/unified/components/receivers/__snapshots__/NewReceiverView.test.tsx.snap
index 999e5aaf80b..681e1ee181f 100644
--- a/public/app/features/alerting/unified/components/receivers/__snapshots__/NewReceiverView.test.tsx.snap
+++ b/public/app/features/alerting/unified/components/receivers/__snapshots__/NewReceiverView.test.tsx.snap
@@ -165,10 +165,10 @@ exports[`alerting API server disabled should be able to test and save a receiver
       "provisioned-template": "api",
     },
     "template_files": {
-      "custom-email": "{{ define 'custom-email' }}  Custom email template {{ end }}",
-      "provisioned-template": "{{ define 'provisioned-template' }}  Custom provisioned template {{ end }}",
-      "slack-template": "{{ define 'slack-template' }} Custom slack template {{ end }}",
-      "template with spaces": "{{ define 'template with spaces' }}  Custom template with spaces in the name {{ end }}",
+      "custom-email": "{{ define "custom-email" }}  Custom email template {{ end }}",
+      "provisioned-template": "{{ define "provisioned-template" }}  Custom provisioned template {{ end }}",
+      "slack-template": "{{ define "slack-template" }} Custom slack template {{ end }}",
+      "template with spaces": "{{ define "template with spaces" }}  Custom template with spaces in the name {{ end }}",
     },
   },
 ]
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/TemplateSelector.test.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/TemplateSelector.test.tsx
index dfeba89c91d..73b8d455436 100644
--- a/public/app/features/alerting/unified/components/receivers/form/fields/TemplateSelector.test.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/TemplateSelector.test.tsx
@@ -1,11 +1,37 @@
-import { DEFAULT_TEMPLATES } from 'app/features/alerting/unified/utils/template-constants';
+import { ReactNode } from 'react';
+import { render, screen, userEvent } from 'test/test-utils';
 
-import { getTemplateOptions } from './TemplateSelector';
+import { CodeEditorProps } from '@grafana/ui/src/components/Monaco/types';
+import { setupMswServer } from 'app/features/alerting/unified/mockApi';
+import { grantUserPermissions } from 'app/features/alerting/unified/mocks';
+import { AlertmanagerProvider } from 'app/features/alerting/unified/state/AlertmanagerContext';
+import { testWithFeatureToggles } from 'app/features/alerting/unified/test/test-utils';
+import { GRAFANA_RULES_SOURCE_NAME } from 'app/features/alerting/unified/utils/datasource';
+import { PROVENANCE_NONE } from 'app/features/alerting/unified/utils/k8s/constants';
+import { DEFAULT_TEMPLATES } from 'app/features/alerting/unified/utils/template-constants';
+import { AccessControlAction, NotificationChannelOption } from 'app/types';
+
+import { getTemplateOptions, TemplatesPicker } from './TemplateSelector';
 import { parseTemplates } from './utils';
 
+jest.mock('@grafana/ui', () => ({
+  ...jest.requireActual('@grafana/ui'),
+  CodeEditor: ({ value, onChange }: CodeEditorProps) => (
+    <textarea data-testid="code-editor" value={value} onChange={(e) => onChange?.(e.target.value)} />
+  ),
+}));
+
+const renderWithProvider = (children: ReactNode) =>
+  render(
+    <AlertmanagerProvider accessType="notification" alertmanagerSourceName={GRAFANA_RULES_SOURCE_NAME}>
+      {children}
+    </AlertmanagerProvider>
+  );
+
+setupMswServer();
 describe('getTemplateOptions function', () => {
   it('should return the last template when there are duplicates', () => {
-    const templateFiles = {
+    const rawTemplates = {
       file1:
         '{{ define "template1" }}{{ len .Alerts.Firing }} firing alert(s), {{ len .Alerts.Resolved }} resolved alert(s){{ end }}',
       // duplicated define, the last one should be returned
@@ -22,15 +48,24 @@ describe('getTemplateOptions function', () => {
       {{ template "sub1" }}
       {{ template "sub2" }}
       {{ end }}
-      
+
       {{ define "sub1" }}
       Sub Template 1 Content
       {{ end }}
-      
+
       {{ define "sub2" }}
       Sub Template 2 Content
       {{ end }}`,
     };
+
+    const templateFiles = Object.entries(rawTemplates).map(([title, content]) => {
+      return {
+        uid: title,
+        title,
+        content,
+        provenance: PROVENANCE_NONE,
+      };
+    });
     const defaultTemplates = parseTemplates(DEFAULT_TEMPLATES);
     const result = getTemplateOptions(templateFiles, defaultTemplates);
 
@@ -44,3 +79,28 @@ describe('getTemplateOptions function', () => {
     expect(result).toMatchSnapshot();
   });
 });
+
+describe('TemplatesPicker', () => {
+  testWithFeatureToggles(['alertingApiServer']);
+
+  beforeEach(() => {
+    grantUserPermissions([
+      AccessControlAction.AlertingNotificationsRead,
+      AccessControlAction.AlertingNotificationsExternalRead,
+    ]);
+  });
+
+  it('allows selection of templates', async () => {
+    const onSelect = jest.fn();
+    const mockOption = { label: 'title' } as NotificationChannelOption;
+    const { user } = renderWithProvider(<TemplatesPicker onSelect={onSelect} option={mockOption} valueInForm="" />);
+    await user.click(await screen.findByText(/edit title/i));
+    const input = screen.getByRole('combobox');
+    expect(screen.queryByText('slack-template')).not.toBeInTheDocument();
+    await userEvent.click(input);
+    expect(screen.getAllByRole('option')).toHaveLength(7); // 4 templates in mock plus 3 in the default template
+    const template = screen.getByRole('option', { name: 'slack-template' });
+    await userEvent.click(template);
+    expect(screen.getByText('slack-template')).toBeInTheDocument();
+  });
+});
diff --git a/public/app/features/alerting/unified/components/receivers/form/fields/TemplateSelector.tsx b/public/app/features/alerting/unified/components/receivers/form/fields/TemplateSelector.tsx
index 4dd5729a619..1472fb111ea 100644
--- a/public/app/features/alerting/unified/components/receivers/form/fields/TemplateSelector.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/fields/TemplateSelector.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { useState, PropsWithChildren, useEffect, useMemo } from 'react';
+import { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useCopyToClipboard } from 'react-use';
 
@@ -22,7 +22,10 @@ import {
   trackUseSingleTemplateInInput,
 } from 'app/features/alerting/unified/Analytics';
 import { templatesApi } from 'app/features/alerting/unified/api/templateApi';
-import { useAlertmanagerConfig } from 'app/features/alerting/unified/hooks/useAlertmanagerConfig';
+import {
+  NotificationTemplate,
+  useNotificationTemplates,
+} from 'app/features/alerting/unified/components/contact-points/useNotificationTemplates';
 import { useAlertmanager } from 'app/features/alerting/unified/state/AlertmanagerContext';
 import { NotificationChannelOption } from 'app/types';
 
@@ -71,10 +74,10 @@ export function TemplatesPicker({ onSelect, option, valueInForm }: TemplatesPick
 
 type TemplateFieldOption = 'Existing' | 'Custom';
 
-export function getTemplateOptions(templateFiles: Record<string, string>, defaultTemplates: Template[] = []) {
+export function getTemplateOptions(templateFiles: NotificationTemplate[], defaultTemplates: Template[] = []) {
   // Add default templates
   const templateMap = new Map<string, SelectableValue<Template>>();
-  Object.entries(templateFiles).forEach(([_, content]) => {
+  templateFiles.forEach(({ content }) => {
     const templates: Template[] = parseTemplates(content);
     templates.forEach((template) => {
       templateMap.set(template.name, {
@@ -122,14 +125,14 @@ function TemplateSelector({ onSelect, onClose, option, valueInForm }: TemplateSe
   const [inputToUpdateCustom, setInputToUpdateCustom] = useState<string>(valueInForm);
 
   const { selectedAlertmanager } = useAlertmanager();
-  const { data, error } = useAlertmanagerConfig(selectedAlertmanager);
+  const { data = [], error, isLoading } = useNotificationTemplates({ alertmanager: selectedAlertmanager! });
   const { data: defaultTemplates } = useGetDefaultTemplatesQuery();
   const [templateOption, setTemplateOption] = useState<TemplateFieldOption>('Existing');
   const [_, copyToClipboard] = useCopyToClipboard();
 
   const templateOptions: Array<SelectableValue<TemplateFieldOption>> = [
     {
-      label: 'Selecting existing template',
+      label: 'Select existing template',
       value: 'Existing',
       description: `Select a single template and preview it, or copy it to paste it in the custom tab. ${templateOption === 'Existing' ? 'Clicking Save will save your changes to the selected template.' : ''}`,
     },
@@ -155,11 +158,11 @@ function TemplateSelector({ onSelect, onClose, option, valueInForm }: TemplateSe
   };
 
   const options = useMemo(() => {
-    if (!defaultTemplates) {
+    if (!defaultTemplates || !data || isLoading || error) {
       return [];
     }
-    return getTemplateOptions(data?.template_files ?? {}, defaultTemplates);
-  }, [data, defaultTemplates]);
+    return getTemplateOptions(data, defaultTemplates);
+  }, [data, defaultTemplates, isLoading, error]);
 
   // if we are using only one template, we should settemplate to that template
   useEffect(() => {
@@ -181,7 +184,7 @@ function TemplateSelector({ onSelect, onClose, option, valueInForm }: TemplateSe
     return <div>Error loading templates</div>;
   }
 
-  if (!data) {
+  if (isLoading || !data || !defaultTemplates) {
     return <div>Loading...</div>;
   }
 
@@ -199,7 +202,8 @@ function TemplateSelector({ onSelect, onClose, option, valueInForm }: TemplateSe
           <Stack direction="column" gap={1}>
             <Stack direction="row" gap={1} alignItems="center">
               <Select<Template>
-                aria-label="Template"
+                placeholder="Choose template"
+                aria-label="Choose template"
                 onChange={(value: SelectableValue<Template>, _) => {
                   setTemplate(value?.value);
                 }}
diff --git a/public/app/features/alerting/unified/mocks/server/all-handlers.ts b/public/app/features/alerting/unified/mocks/server/all-handlers.ts
index 049e7c8d03e..f89f70abef1 100644
--- a/public/app/features/alerting/unified/mocks/server/all-handlers.ts
+++ b/public/app/features/alerting/unified/mocks/server/all-handlers.ts
@@ -10,6 +10,7 @@ import evalHandlers from 'app/features/alerting/unified/mocks/server/handlers/ev
 import folderHandlers from 'app/features/alerting/unified/mocks/server/handlers/folders';
 import grafanaRulerHandlers from 'app/features/alerting/unified/mocks/server/handlers/grafanaRuler';
 import receiverK8sHandlers from 'app/features/alerting/unified/mocks/server/handlers/k8s/receivers.k8s';
+import templatesK8sHandlers from 'app/features/alerting/unified/mocks/server/handlers/k8s/templates.k8s';
 import timeIntervalK8sHandlers from 'app/features/alerting/unified/mocks/server/handlers/k8s/timeIntervals.k8s';
 import mimirRulerHandlers from 'app/features/alerting/unified/mocks/server/handlers/mimirRuler';
 import notificationsHandlers from 'app/features/alerting/unified/mocks/server/handlers/notifications';
@@ -18,7 +19,6 @@ import allPluginHandlers from 'app/features/alerting/unified/mocks/server/handle
 import provisioningHandlers from 'app/features/alerting/unified/mocks/server/handlers/provisioning';
 import searchHandlers from 'app/features/alerting/unified/mocks/server/handlers/search';
 import silenceHandlers from 'app/features/alerting/unified/mocks/server/handlers/silences';
-
 /**
  * Array of all mock handlers that are required across Alerting tests
  */
@@ -42,6 +42,7 @@ const allHandlers = [
   // Kubernetes-style handlers
   ...timeIntervalK8sHandlers,
   ...receiverK8sHandlers,
+  ...templatesK8sHandlers,
 ];
 
 export default allHandlers;
diff --git a/public/app/features/alerting/unified/mocks/server/handlers/k8s/templates.k8s.ts b/public/app/features/alerting/unified/mocks/server/handlers/k8s/templates.k8s.ts
new file mode 100644
index 00000000000..1287944544f
--- /dev/null
+++ b/public/app/features/alerting/unified/mocks/server/handlers/k8s/templates.k8s.ts
@@ -0,0 +1,100 @@
+import { HttpResponse, http } from 'msw';
+
+import alertmanagerConfig from 'app/features/alerting/unified/components/contact-points/__mocks__/alertmanager.config.mock.json';
+import { ALERTING_API_SERVER_BASE_URL, getK8sResponse } from 'app/features/alerting/unified/mocks/server/utils';
+import { ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup } from 'app/features/alerting/unified/openapi/templatesApi.gen';
+import { PROVENANCE_ANNOTATION, PROVENANCE_NONE } from 'app/features/alerting/unified/utils/k8s/constants';
+import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
+
+const config: AlertManagerCortexConfig = alertmanagerConfig;
+
+// Map alertmanager templates to k8s templates
+const mappedTemplates = Object.entries(
+  config.template_files || {}
+).map<ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup>(([title, template]) => ({
+  metadata: {
+    name: titleToK8sResourceName(title), // K8s uses unique identifiers for resources
+    annotations: { [PROVENANCE_ANNOTATION]: config.template_file_provenances?.[title] || PROVENANCE_NONE },
+  },
+  spec: {
+    title: title,
+    content: template,
+  },
+}));
+
+const templatesDb = new Map<string, ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup>(
+  mappedTemplates.map((t) => [t.metadata.name!, t])
+);
+
+const listNamespacedTemplateHandler = () =>
+  http.get<{ namespace: string }>(`${ALERTING_API_SERVER_BASE_URL}/namespaces/:namespace/templategroups`, () => {
+    const parsedTemplates = getK8sResponse<ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup>(
+      'TemplateGroupList',
+      Array.from(templatesDb.values())
+    );
+
+    return HttpResponse.json(parsedTemplates);
+  });
+
+const getNamespacedTemplateHandler = () =>
+  http.get<{ namespace: string; name: string }>(
+    `${ALERTING_API_SERVER_BASE_URL}/namespaces/:namespace/templategroups/:name`,
+    ({ params: { name } }) => {
+      const template = templatesDb.get(name);
+
+      if (!template) {
+        return HttpResponse.json({ message: 'NotFound' }, { status: 404 });
+      }
+
+      return HttpResponse.json(template);
+    }
+  );
+
+const putNamespacedTemplateHandler = () =>
+  http.put<
+    { namespace: string; name: string },
+    ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup
+  >(
+    `${ALERTING_API_SERVER_BASE_URL}/namespaces/:namespace/templategroups/:name`,
+    async ({ params: { name }, request }) => {
+      const template = templatesDb.get(name);
+
+      if (!template) {
+        return HttpResponse.json({ message: 'NotFound' }, { status: 404 });
+      }
+
+      const updatedTemplate = await request.json();
+      templatesDb.set(name, updatedTemplate);
+
+      return HttpResponse.json(updatedTemplate);
+    }
+  );
+
+const deleteNamespacedTemplateHandler = () =>
+  http.delete<{ namespace: string; name: string }>(
+    `${ALERTING_API_SERVER_BASE_URL}/namespaces/:namespace/templategroups/:name`,
+    ({ params: { name } }) => {
+      const template = templatesDb.get(name);
+
+      if (!template) {
+        return HttpResponse.json({ message: 'NotFound' }, { status: 404 });
+      }
+
+      templatesDb.delete(name);
+
+      return HttpResponse.json(template);
+    }
+  );
+
+const handlers = [
+  listNamespacedTemplateHandler(),
+  getNamespacedTemplateHandler(),
+  putNamespacedTemplateHandler(),
+  deleteNamespacedTemplateHandler(),
+];
+
+export default handlers;
+
+function titleToK8sResourceName(title: string) {
+  return `k8s-${title}-resource-name`;
+}
diff --git a/public/app/features/alerting/unified/openapi/templatesApi.gen.ts b/public/app/features/alerting/unified/openapi/templatesApi.gen.ts
new file mode 100644
index 00000000000..c248915c271
--- /dev/null
+++ b/public/app/features/alerting/unified/openapi/templatesApi.gen.ts
@@ -0,0 +1,387 @@
+import { alertingApi as api } from '../api/alertingApi';
+export const addTagTypes = ['TemplateGroup'] as const;
+const injectedRtkApi = api
+  .enhanceEndpoints({
+    addTagTypes,
+  })
+  .injectEndpoints({
+    endpoints: (build) => ({
+      listNamespacedTemplateGroup: build.query<
+        ListNamespacedTemplateGroupApiResponse,
+        ListNamespacedTemplateGroupApiArg
+      >({
+        query: (queryArg) => ({
+          url: `/apis/notifications.alerting.grafana.app/v0alpha1/namespaces/${queryArg['namespace']}/templategroups`,
+          params: {
+            pretty: queryArg.pretty,
+            allowWatchBookmarks: queryArg.allowWatchBookmarks,
+            continue: queryArg['continue'],
+            fieldSelector: queryArg.fieldSelector,
+            labelSelector: queryArg.labelSelector,
+            limit: queryArg.limit,
+            resourceVersion: queryArg.resourceVersion,
+            resourceVersionMatch: queryArg.resourceVersionMatch,
+            sendInitialEvents: queryArg.sendInitialEvents,
+            timeoutSeconds: queryArg.timeoutSeconds,
+            watch: queryArg.watch,
+          },
+        }),
+        providesTags: ['TemplateGroup'],
+      }),
+      createNamespacedTemplateGroup: build.mutation<
+        CreateNamespacedTemplateGroupApiResponse,
+        CreateNamespacedTemplateGroupApiArg
+      >({
+        query: (queryArg) => ({
+          url: `/apis/notifications.alerting.grafana.app/v0alpha1/namespaces/${queryArg['namespace']}/templategroups`,
+          method: 'POST',
+          body: queryArg.comGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup,
+          params: {
+            pretty: queryArg.pretty,
+            dryRun: queryArg.dryRun,
+            fieldManager: queryArg.fieldManager,
+            fieldValidation: queryArg.fieldValidation,
+          },
+        }),
+        invalidatesTags: ['TemplateGroup'],
+      }),
+      readNamespacedTemplateGroup: build.query<
+        ReadNamespacedTemplateGroupApiResponse,
+        ReadNamespacedTemplateGroupApiArg
+      >({
+        query: (queryArg) => ({
+          url: `/apis/notifications.alerting.grafana.app/v0alpha1/namespaces/${queryArg['namespace']}/templategroups/${queryArg.name}`,
+          params: { pretty: queryArg.pretty },
+        }),
+        providesTags: ['TemplateGroup'],
+      }),
+      replaceNamespacedTemplateGroup: build.mutation<
+        ReplaceNamespacedTemplateGroupApiResponse,
+        ReplaceNamespacedTemplateGroupApiArg
+      >({
+        query: (queryArg) => ({
+          url: `/apis/notifications.alerting.grafana.app/v0alpha1/namespaces/${queryArg['namespace']}/templategroups/${queryArg.name}`,
+          method: 'PUT',
+          body: queryArg.comGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup,
+          params: {
+            pretty: queryArg.pretty,
+            dryRun: queryArg.dryRun,
+            fieldManager: queryArg.fieldManager,
+            fieldValidation: queryArg.fieldValidation,
+          },
+        }),
+        invalidatesTags: ['TemplateGroup'],
+      }),
+      deleteNamespacedTemplateGroup: build.mutation<
+        DeleteNamespacedTemplateGroupApiResponse,
+        DeleteNamespacedTemplateGroupApiArg
+      >({
+        query: (queryArg) => ({
+          url: `/apis/notifications.alerting.grafana.app/v0alpha1/namespaces/${queryArg['namespace']}/templategroups/${queryArg.name}`,
+          method: 'DELETE',
+          body: queryArg.ioK8SApimachineryPkgApisMetaV1DeleteOptions,
+          params: {
+            pretty: queryArg.pretty,
+            dryRun: queryArg.dryRun,
+            gracePeriodSeconds: queryArg.gracePeriodSeconds,
+            orphanDependents: queryArg.orphanDependents,
+            propagationPolicy: queryArg.propagationPolicy,
+          },
+        }),
+        invalidatesTags: ['TemplateGroup'],
+      }),
+    }),
+    overrideExisting: false,
+  });
+export { injectedRtkApi as generatedTemplatesApi };
+export type ListNamespacedTemplateGroupApiResponse =
+  /** status 200 OK */ ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroupList;
+export type ListNamespacedTemplateGroupApiArg = {
+  /** object name and auth scope, such as for teams and projects */
+  namespace: string;
+  /** If 'true', then the output is pretty printed. Defaults to 'false' unless the user-agent indicates a browser or command-line HTTP tool (curl and wget). */
+  pretty?: string;
+  /** allowWatchBookmarks requests watch events with type "BOOKMARK". Servers that do not implement bookmarks may ignore this flag and bookmarks are sent at the server's discretion. Clients should not assume bookmarks are returned at any specific interval, nor may they assume the server will send any BOOKMARK event during a session. If this is not a watch, this field is ignored. */
+  allowWatchBookmarks?: boolean;
+  /** The continue option should be set when retrieving more results from the server. Since this value is server defined, clients may only use the continue value from a previous query result with identical query parameters (except for the value of continue) and the server may reject a continue value it does not recognize. If the specified continue value is no longer valid whether due to expiration (generally five to fifteen minutes) or a configuration change on the server, the server will respond with a 410 ResourceExpired error together with a continue token. If the client needs a consistent list, it must restart their list without the continue field. Otherwise, the client may send another list request with the token received with the 410 error, the server will respond with a list starting from the next key, but from the latest snapshot, which is inconsistent from the previous list results - objects that are created, modified, or deleted after the first list request will be included in the response, as long as their keys are after the "next key".
+    
+    This field is not supported when watch is true. Clients may start a watch from the last resourceVersion value returned by the server and not miss any modifications. */
+  continue?: string;
+  /** A selector to restrict the list of returned objects by their fields. Defaults to everything. */
+  fieldSelector?: string;
+  /** A selector to restrict the list of returned objects by their labels. Defaults to everything. */
+  labelSelector?: string;
+  /** limit is a maximum number of responses to return for a list call. If more items exist, the server will set the `continue` field on the list metadata to a value that can be used with the same initial query to retrieve the next set of results. Setting a limit may return fewer than the requested amount of items (up to zero items) in the event all requested objects are filtered out and clients should only use the presence of the continue field to determine whether more results are available. Servers may choose not to support the limit argument and will return all of the available results. If limit is specified and the continue field is empty, clients may assume that no more results are available. This field is not supported if watch is true.
+    
+    The server guarantees that the objects returned when using continue will be identical to issuing a single list call without a limit - that is, no objects created, modified, or deleted after the first request is issued will be included in any subsequent continued requests. This is sometimes referred to as a consistent snapshot, and ensures that a client that is using limit to receive smaller chunks of a very large result can ensure they see all possible objects. If objects are updated during a chunked list the version of the object that was present at the time the first list result was calculated is returned. */
+  limit?: number;
+  /** resourceVersion sets a constraint on what resource versions a request may be served from. See https://kubernetes.io/docs/reference/using-api/api-concepts/#resource-versions for details.
+    
+    Defaults to unset */
+  resourceVersion?: string;
+  /** resourceVersionMatch determines how resourceVersion is applied to list calls. It is highly recommended that resourceVersionMatch be set for list calls where resourceVersion is set See https://kubernetes.io/docs/reference/using-api/api-concepts/#resource-versions for details.
+    
+    Defaults to unset */
+  resourceVersionMatch?: string;
+  /** `sendInitialEvents=true` may be set together with `watch=true`. In that case, the watch stream will begin with synthetic events to produce the current state of objects in the collection. Once all such events have been sent, a synthetic "Bookmark" event  will be sent. The bookmark will report the ResourceVersion (RV) corresponding to the set of objects, and be marked with `"k8s.io/initial-events-end": "true"` annotation. Afterwards, the watch stream will proceed as usual, sending watch events corresponding to changes (subsequent to the RV) to objects watched.
+    
+    When `sendInitialEvents` option is set, we require `resourceVersionMatch` option to also be set. The semantic of the watch request is as following: - `resourceVersionMatch` = NotOlderThan
+      is interpreted as "data at least as new as the provided `resourceVersion`"
+      and the bookmark event is send when the state is synced
+      to a `resourceVersion` at least as fresh as the one provided by the ListOptions.
+      If `resourceVersion` is unset, this is interpreted as "consistent read" and the
+      bookmark event is send when the state is synced at least to the moment
+      when request started being processed.
+    - `resourceVersionMatch` set to any other value or unset
+      Invalid error is returned.
+    
+    Defaults to true if `resourceVersion=""` or `resourceVersion="0"` (for backward compatibility reasons) and to false otherwise. */
+  sendInitialEvents?: boolean;
+  /** Timeout for the list/watch call. This limits the duration of the call, regardless of any activity or inactivity. */
+  timeoutSeconds?: number;
+  /** Watch for changes to the described resources and return them as a stream of add, update, and remove notifications. Specify resourceVersion. */
+  watch?: boolean;
+};
+export type CreateNamespacedTemplateGroupApiResponse = /** status 200 OK */
+  | ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup
+  | /** status 201 Created */ ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup
+  | /** status 202 Accepted */ ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup;
+export type CreateNamespacedTemplateGroupApiArg = {
+  /** object name and auth scope, such as for teams and projects */
+  namespace: string;
+  /** If 'true', then the output is pretty printed. Defaults to 'false' unless the user-agent indicates a browser or command-line HTTP tool (curl and wget). */
+  pretty?: string;
+  /** When present, indicates that modifications should not be persisted. An invalid or unrecognized dryRun directive will result in an error response and no further processing of the request. Valid values are: - All: all dry run stages will be processed */
+  dryRun?: string;
+  /** fieldManager is a name associated with the actor or entity that is making these changes. The value must be less than or 128 characters long, and only contain printable characters, as defined by https://golang.org/pkg/unicode/#IsPrint. */
+  fieldManager?: string;
+  /** fieldValidation instructs the server on how to handle objects in the request (POST/PUT/PATCH) containing unknown or duplicate fields. Valid values are: - Ignore: This will ignore any unknown fields that are silently dropped from the object, and will ignore all but the last duplicate field that the decoder encounters. This is the default behavior prior to v1.23. - Warn: This will send a warning via the standard warning response header for each unknown field that is dropped from the object, and for each duplicate field that is encountered. The request will still succeed if there are no other errors, and will only persist the last of any duplicate fields. This is the default in v1.23+ - Strict: This will fail the request with a BadRequest error if any unknown fields would be dropped from the object, or if any duplicate fields are present. The error returned from the server will contain all unknown and duplicate fields encountered. */
+  fieldValidation?: string;
+  comGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup: ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup;
+};
+export type ReadNamespacedTemplateGroupApiResponse =
+  /** status 200 OK */ ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup;
+export type ReadNamespacedTemplateGroupApiArg = {
+  /** name of the TemplateGroup */
+  name: string;
+  /** object name and auth scope, such as for teams and projects */
+  namespace: string;
+  /** If 'true', then the output is pretty printed. Defaults to 'false' unless the user-agent indicates a browser or command-line HTTP tool (curl and wget). */
+  pretty?: string;
+};
+export type ReplaceNamespacedTemplateGroupApiResponse = /** status 200 OK */
+  | ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup
+  | /** status 201 Created */ ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup;
+export type ReplaceNamespacedTemplateGroupApiArg = {
+  /** name of the TemplateGroup */
+  name: string;
+  /** object name and auth scope, such as for teams and projects */
+  namespace: string;
+  /** If 'true', then the output is pretty printed. Defaults to 'false' unless the user-agent indicates a browser or command-line HTTP tool (curl and wget). */
+  pretty?: string;
+  /** When present, indicates that modifications should not be persisted. An invalid or unrecognized dryRun directive will result in an error response and no further processing of the request. Valid values are: - All: all dry run stages will be processed */
+  dryRun?: string;
+  /** fieldManager is a name associated with the actor or entity that is making these changes. The value must be less than or 128 characters long, and only contain printable characters, as defined by https://golang.org/pkg/unicode/#IsPrint. */
+  fieldManager?: string;
+  /** fieldValidation instructs the server on how to handle objects in the request (POST/PUT/PATCH) containing unknown or duplicate fields. Valid values are: - Ignore: This will ignore any unknown fields that are silently dropped from the object, and will ignore all but the last duplicate field that the decoder encounters. This is the default behavior prior to v1.23. - Warn: This will send a warning via the standard warning response header for each unknown field that is dropped from the object, and for each duplicate field that is encountered. The request will still succeed if there are no other errors, and will only persist the last of any duplicate fields. This is the default in v1.23+ - Strict: This will fail the request with a BadRequest error if any unknown fields would be dropped from the object, or if any duplicate fields are present. The error returned from the server will contain all unknown and duplicate fields encountered. */
+  fieldValidation?: string;
+  comGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup: ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup;
+};
+export type DeleteNamespacedTemplateGroupApiResponse = /** status 200 OK */
+  | IoK8SApimachineryPkgApisMetaV1Status
+  | /** status 202 Accepted */ IoK8SApimachineryPkgApisMetaV1Status;
+export type DeleteNamespacedTemplateGroupApiArg = {
+  /** name of the TemplateGroup */
+  name: string;
+  /** object name and auth scope, such as for teams and projects */
+  namespace: string;
+  /** If 'true', then the output is pretty printed. Defaults to 'false' unless the user-agent indicates a browser or command-line HTTP tool (curl and wget). */
+  pretty?: string;
+  /** When present, indicates that modifications should not be persisted. An invalid or unrecognized dryRun directive will result in an error response and no further processing of the request. Valid values are: - All: all dry run stages will be processed */
+  dryRun?: string;
+  /** The duration in seconds before the object should be deleted. Value must be non-negative integer. The value zero indicates delete immediately. If this value is nil, the default grace period for the specified type will be used. Defaults to a per object value if not specified. zero means delete immediately. */
+  gracePeriodSeconds?: number;
+  /** Deprecated: please use the PropagationPolicy, this field will be deprecated in 1.7. Should the dependent objects be orphaned. If true/false, the "orphan" finalizer will be added to/removed from the object's finalizers list. Either this field or PropagationPolicy may be set, but not both. */
+  orphanDependents?: boolean;
+  /** Whether and how garbage collection will be performed. Either this field or OrphanDependents may be set, but not both. The default policy is decided by the existing finalizer set in the metadata.finalizers and the resource-specific default policy. Acceptable values are: 'Orphan' - orphan the dependents; 'Background' - allow the garbage collector to delete the dependents in the background; 'Foreground' - a cascading policy that deletes all dependents in the foreground. */
+  propagationPolicy?: string;
+  ioK8SApimachineryPkgApisMetaV1DeleteOptions: IoK8SApimachineryPkgApisMetaV1DeleteOptions;
+};
+export type IoK8SApimachineryPkgApisMetaV1Time = string;
+export type IoK8SApimachineryPkgApisMetaV1FieldsV1 = object;
+export type IoK8SApimachineryPkgApisMetaV1ManagedFieldsEntry = {
+  /** APIVersion defines the version of this resource that this field set applies to. The format is "group/version" just like the top-level APIVersion field. It is necessary to track the version of a field set because it cannot be automatically converted. */
+  apiVersion?: string;
+  /** FieldsType is the discriminator for the different fields format and version. There is currently only one possible value: "FieldsV1" */
+  fieldsType?: string;
+  /** FieldsV1 holds the first JSON version format as described in the "FieldsV1" type. */
+  fieldsV1?: IoK8SApimachineryPkgApisMetaV1FieldsV1;
+  /** Manager is an identifier of the workflow managing these fields. */
+  manager?: string;
+  /** Operation is the type of operation which lead to this ManagedFieldsEntry being created. The only valid values for this field are 'Apply' and 'Update'. */
+  operation?: string;
+  /** Subresource is the name of the subresource used to update that object, or empty string if the object was updated through the main resource. The value of this field is used to distinguish between managers, even if they share the same name. For example, a status update will be distinct from a regular update using the same manager name. Note that the APIVersion field is not related to the Subresource field and it always corresponds to the version of the main resource. */
+  subresource?: string;
+  /** Time is the timestamp of when the ManagedFields entry was added. The timestamp will also be updated if a field is added, the manager changes any of the owned fields value or removes a field. The timestamp does not update when a field is removed from the entry because another manager took it over. */
+  time?: IoK8SApimachineryPkgApisMetaV1Time;
+};
+export type IoK8SApimachineryPkgApisMetaV1OwnerReference = {
+  /** API version of the referent. */
+  apiVersion: string;
+  /** If true, AND if the owner has the "foregroundDeletion" finalizer, then the owner cannot be deleted from the key-value store until this reference is removed. See https://kubernetes.io/docs/concepts/architecture/garbage-collection/#foreground-deletion for how the garbage collector interacts with this field and enforces the foreground deletion. Defaults to false. To set this field, a user needs "delete" permission of the owner, otherwise 422 (Unprocessable Entity) will be returned. */
+  blockOwnerDeletion?: boolean;
+  /** If true, this reference points to the managing controller. */
+  controller?: boolean;
+  /** Kind of the referent. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds */
+  kind: string;
+  /** Name of the referent. More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names#names */
+  name: string;
+  /** UID of the referent. More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names#uids */
+  uid: string;
+};
+export type IoK8SApimachineryPkgApisMetaV1ObjectMeta = {
+  /** Annotations is an unstructured key value map stored with a resource that may be set by external tools to store and retrieve arbitrary metadata. They are not queryable and should be preserved when modifying objects. More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/annotations */
+  annotations?: {
+    [key: string]: string;
+  };
+  /** CreationTimestamp is a timestamp representing the server time when this object was created. It is not guaranteed to be set in happens-before order across separate operations. Clients may not set this value. It is represented in RFC3339 form and is in UTC.
+    
+    Populated by the system. Read-only. Null for lists. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#metadata */
+  creationTimestamp?: IoK8SApimachineryPkgApisMetaV1Time;
+  /** Number of seconds allowed for this object to gracefully terminate before it will be removed from the system. Only set when deletionTimestamp is also set. May only be shortened. Read-only. */
+  deletionGracePeriodSeconds?: number;
+  /** DeletionTimestamp is RFC 3339 date and time at which this resource will be deleted. This field is set by the server when a graceful deletion is requested by the user, and is not directly settable by a client. The resource is expected to be deleted (no longer visible from resource lists, and not reachable by name) after the time in this field, once the finalizers list is empty. As long as the finalizers list contains items, deletion is blocked. Once the deletionTimestamp is set, this value may not be unset or be set further into the future, although it may be shortened or the resource may be deleted prior to this time. For example, a user may request that a pod is deleted in 30 seconds. The Kubelet will react by sending a graceful termination signal to the containers in the pod. After that 30 seconds, the Kubelet will send a hard termination signal (SIGKILL) to the container and after cleanup, remove the pod from the API. In the presence of network partitions, this object may still exist after this timestamp, until an administrator or automated process can determine the resource is fully terminated. If not set, graceful deletion of the object has not been requested.
+    
+    Populated by the system when a graceful deletion is requested. Read-only. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#metadata */
+  deletionTimestamp?: IoK8SApimachineryPkgApisMetaV1Time;
+  /** Must be empty before the object is deleted from the registry. Each entry is an identifier for the responsible component that will remove the entry from the list. If the deletionTimestamp of the object is non-nil, entries in this list can only be removed. Finalizers may be processed and removed in any order.  Order is NOT enforced because it introduces significant risk of stuck finalizers. finalizers is a shared field, any actor with permission can reorder it. If the finalizer list is processed in order, then this can lead to a situation in which the component responsible for the first finalizer in the list is waiting for a signal (field value, external system, or other) produced by a component responsible for a finalizer later in the list, resulting in a deadlock. Without enforced ordering finalizers are free to order amongst themselves and are not vulnerable to ordering changes in the list. */
+  finalizers?: string[];
+  /** GenerateName is an optional prefix, used by the server, to generate a unique name ONLY IF the Name field has not been provided. If this field is used, the name returned to the client will be different than the name passed. This value will also be combined with a unique suffix. The provided value has the same validation rules as the Name field, and may be truncated by the length of the suffix required to make the value unique on the server.
+    
+    If this field is specified and the generated name exists, the server will return a 409.
+    
+    Applied only if Name is not specified. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#idempotency */
+  generateName?: string;
+  /** A sequence number representing a specific generation of the desired state. Populated by the system. Read-only. */
+  generation?: number;
+  /** Map of string keys and values that can be used to organize and categorize (scope and select) objects. May match selectors of replication controllers and services. More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/labels */
+  labels?: {
+    [key: string]: string;
+  };
+  /** ManagedFields maps workflow-id and version to the set of fields that are managed by that workflow. This is mostly for internal housekeeping, and users typically shouldn't need to set or understand this field. A workflow can be the user's name, a controller's name, or the name of a specific apply path like "ci-cd". The set of fields is always in the version that the workflow used when modifying the object. */
+  managedFields?: IoK8SApimachineryPkgApisMetaV1ManagedFieldsEntry[];
+  /** Name must be unique within a namespace. Is required when creating resources, although some resources may allow a client to request the generation of an appropriate name automatically. Name is primarily intended for creation idempotence and configuration definition. Cannot be updated. More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names#names */
+  name?: string;
+  /** Namespace defines the space within which each name must be unique. An empty namespace is equivalent to the "default" namespace, but "default" is the canonical representation. Not all objects are required to be scoped to a namespace - the value of this field for those objects will be empty.
+    
+    Must be a DNS_LABEL. Cannot be updated. More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/namespaces */
+  namespace?: string;
+  /** List of objects depended by this object. If ALL objects in the list have been deleted, this object will be garbage collected. If this object is managed by a controller, then an entry in this list will point to this controller, with the controller field set to true. There cannot be more than one managing controller. */
+  ownerReferences?: IoK8SApimachineryPkgApisMetaV1OwnerReference[];
+  /** An opaque value that represents the internal version of this object that can be used by clients to determine when objects have changed. May be used for optimistic concurrency, change detection, and the watch operation on a resource or set of resources. Clients must treat these values as opaque and passed unmodified back to the server. They may only be valid for a particular resource or set of resources.
+    
+    Populated by the system. Read-only. Value must be treated as opaque by clients and . More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#concurrency-control-and-consistency */
+  resourceVersion?: string;
+  /** Deprecated: selfLink is a legacy read-only field that is no longer populated by the system. */
+  selfLink?: string;
+  /** UID is the unique in time and space value for this object. It is typically generated by the server on successful creation of a resource and is not allowed to change on PUT operations.
+    
+    Populated by the system. Read-only. More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names#uids */
+  uid?: string;
+};
+export type ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroupSpec = {
+  content: string;
+  title: string;
+};
+export type ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup = {
+  /** APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value, and may reject unrecognized values. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources */
+  apiVersion?: string;
+  /** Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated. In CamelCase. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds */
+  kind?: string;
+  metadata: IoK8SApimachineryPkgApisMetaV1ObjectMeta;
+  spec: ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroupSpec;
+};
+export type IoK8SApimachineryPkgApisMetaV1ListMeta = {
+  /** continue may be set if the user set a limit on the number of items returned, and indicates that the server has more data available. The value is opaque and may be used to issue another request to the endpoint that served this list to retrieve the next set of available objects. Continuing a consistent list may not be possible if the server configuration has changed or more than a few minutes have passed. The resourceVersion field returned when using this continue value will be identical to the value in the first response, unless you have received this token from an error message. */
+  continue?: string;
+  /** remainingItemCount is the number of subsequent items in the list which are not included in this list response. If the list request contained label or field selectors, then the number of remaining items is unknown and the field will be left unset and omitted during serialization. If the list is complete (either because it is not chunking or because this is the last chunk), then there are no more remaining items and this field will be left unset and omitted during serialization. Servers older than v1.15 do not set this field. The intended use of the remainingItemCount is *estimating* the size of a collection. Clients should not rely on the remainingItemCount to be set or to be exact. */
+  remainingItemCount?: number;
+  /** String that identifies the server's internal version of this object that can be used by clients to determine when objects have changed. Value must be treated as opaque by clients and passed unmodified back to the server. Populated by the system. Read-only. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#concurrency-control-and-consistency */
+  resourceVersion?: string;
+  /** Deprecated: selfLink is a legacy read-only field that is no longer populated by the system. */
+  selfLink?: string;
+};
+export type ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroupList = {
+  /** APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value, and may reject unrecognized values. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources */
+  apiVersion?: string;
+  items: ComGithubGrafanaGrafanaPkgApisAlertingNotificationsV0Alpha1TemplateGroup[];
+  /** Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated. In CamelCase. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds */
+  kind?: string;
+  metadata: IoK8SApimachineryPkgApisMetaV1ListMeta;
+};
+export type IoK8SApimachineryPkgApisMetaV1StatusCause = {
+  /** The field of the resource that has caused this error, as named by its JSON serialization. May include dot and postfix notation for nested attributes. Arrays are zero-indexed.  Fields may appear more than once in an array of causes due to fields having multiple errors. Optional.
+    
+    Examples:
+      "name" - the field "name" on the current resource
+      "items[0].name" - the field "name" on the first array entry in "items" */
+  field?: string;
+  /** A human-readable description of the cause of the error.  This field may be presented as-is to a reader. */
+  message?: string;
+  /** A machine-readable description of the cause of the error. If this value is empty there is no information available. */
+  reason?: string;
+};
+export type IoK8SApimachineryPkgApisMetaV1StatusDetails = {
+  /** The Causes array includes more details associated with the StatusReason failure. Not all StatusReasons may provide detailed causes. */
+  causes?: IoK8SApimachineryPkgApisMetaV1StatusCause[];
+  /** The group attribute of the resource associated with the status StatusReason. */
+  group?: string;
+  /** The kind attribute of the resource associated with the status StatusReason. On some operations may differ from the requested resource Kind. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds */
+  kind?: string;
+  /** The name attribute of the resource associated with the status StatusReason (when there is a single name which can be described). */
+  name?: string;
+  /** If specified, the time in seconds before the operation should be retried. Some errors may indicate the client must take an alternate action - for those errors this field may indicate how long to wait before taking the alternate action. */
+  retryAfterSeconds?: number;
+  /** UID of the resource. (when there is a single resource which can be described). More info: https://kubernetes.io/docs/concepts/overview/working-with-objects/names#uids */
+  uid?: string;
+};
+export type IoK8SApimachineryPkgApisMetaV1Status = {
+  /** APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value, and may reject unrecognized values. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources */
+  apiVersion?: string;
+  /** Suggested HTTP return code for this status, 0 if not set. */
+  code?: number;
+  /** Extended data associated with the reason.  Each reason may define its own extended details. This field is optional and the data returned is not guaranteed to conform to any schema except that defined by the reason type. */
+  details?: IoK8SApimachineryPkgApisMetaV1StatusDetails;
+  /** Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated. In CamelCase. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds */
+  kind?: string;
+  /** A human-readable description of the status of this operation. */
+  message?: string;
+  /** Standard list metadata. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds */
+  metadata?: IoK8SApimachineryPkgApisMetaV1ListMeta;
+  /** A machine-readable description of why this operation is in the "Failure" status. If this value is empty there is no information available. A Reason clarifies an HTTP status code but does not override it. */
+  reason?: string;
+  /** Status of the operation. One of: "Success" or "Failure". More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#spec-and-status */
+  status?: string;
+};
+export type IoK8SApimachineryPkgApisMetaV1Preconditions = {
+  /** Specifies the target ResourceVersion */
+  resourceVersion?: string;
+  /** Specifies the target UID. */
+  uid?: string;
+};
+export type IoK8SApimachineryPkgApisMetaV1DeleteOptions = {
+  /** APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value, and may reject unrecognized values. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#resources */
+  apiVersion?: string;
+  /** When present, indicates that modifications should not be persisted. An invalid or unrecognized dryRun directive will result in an error response and no further processing of the request. Valid values are: - All: all dry run stages will be processed */
+  dryRun?: string[];
+  /** The duration in seconds before the object should be deleted. Value must be non-negative integer. The value zero indicates delete immediately. If this value is nil, the default grace period for the specified type will be used. Defaults to a per object value if not specified. zero means delete immediately. */
+  gracePeriodSeconds?: number;
+  /** Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated. In CamelCase. More info: https://git.k8s.io/community/contributors/devel/sig-architecture/api-conventions.md#types-kinds */
+  kind?: string;
+  /** Deprecated: please use the PropagationPolicy, this field will be deprecated in 1.7. Should the dependent objects be orphaned. If true/false, the "orphan" finalizer will be added to/removed from the object's finalizers list. Either this field or PropagationPolicy may be set, but not both. */
+  orphanDependents?: boolean;
+  /** Must be fulfilled before a deletion is carried out. If not possible, a 409 Conflict status will be returned. */
+  preconditions?: IoK8SApimachineryPkgApisMetaV1Preconditions;
+  /** Whether and how garbage collection will be performed. Either this field or OrphanDependents may be set, but not both. The default policy is decided by the existing finalizer set in the metadata.finalizers and the resource-specific default policy. Acceptable values are: 'Orphan' - orphan the dependents; 'Background' - allow the garbage collector to delete the dependents in the background; 'Foreground' - a cascading policy that deletes all dependents in the foreground. */
+  propagationPolicy?: string;
+};
diff --git a/scripts/generate-alerting-rtk-apis.ts b/scripts/generate-alerting-rtk-apis.ts
index 2782354a1d6..3ffdf5de5fd 100644
--- a/scripts/generate-alerting-rtk-apis.ts
+++ b/scripts/generate-alerting-rtk-apis.ts
@@ -50,6 +50,19 @@ const config: ConfigFile = {
       exportName: 'generatedReceiversApi',
       flattenArg: false,
     },
+    '../public/app/features/alerting/unified/openapi/templatesApi.gen.ts': {
+      apiFile: '../public/app/features/alerting/unified/api/alertingApi.ts',
+      apiImport: 'alertingApi',
+      filterEndpoints: [
+        'listNamespacedTemplateGroup',
+        'createNamespacedTemplateGroup',
+        'readNamespacedTemplateGroup',
+        'replaceNamespacedTemplateGroup',
+        'deleteNamespacedTemplateGroup',
+      ],
+      exportName: 'generatedTemplatesApi',
+      flattenArg: false,
+    },
   },
 };