Cases All Templates page

x-pack/platform/plugins/shared/cases/common/constants/application.ts

@@ -26,7 +26,9 @@ export const CASE_VIEW_COMMENT_PATH = `${CASE_VIEW_PATH}/:commentId` as const;
 export const CASE_VIEW_ALERT_TABLE_PATH =
   `${CASE_VIEW_PATH}/?tabId=${CASE_VIEW_PAGE_TABS.ALERTS}` as const;
 export const CASE_VIEW_TAB_PATH = `${CASE_VIEW_PATH}/?tabId=:tabId` as const;
-
+export const CASES_TEMPLATES_PATH = '/templates' as const;
+export const CASES_CREATE_TEMPLATE_PATH = `${CASES_TEMPLATES_PATH}/create-template` as const;
+export const CASES_EDIT_TEMPLATE_PATH = `${CASES_TEMPLATES_PATH}/:templateId/edit` as const;
 /**
  * The main Cases application is in the stack management under the
  * Alerts and Insights section. To do that, Cases registers to the management

x-pack/platform/plugins/shared/cases/common/constants/index.ts

@@ -185,6 +185,7 @@ export const DEFAULT_FEATURES: CasesFeaturesAllRequired = Object.freeze({
   metrics: [],
   observables: { enabled: true, autoExtract: false },
   events: { enabled: false },
+  templates: { enabled: false },
 });
 
 /**
@@ -257,6 +258,7 @@ export const LOCAL_STORAGE_KEYS = {
   casesTableColumns: 'cases.list.tableColumns',
   casesTableFiltersConfig: 'cases.list.tableFiltersConfig',
   casesTableState: 'cases.list.state',
+  templatesTableState: 'templates.list.state',
 };
 
 /**

x-pack/platform/plugins/shared/cases/common/ui/types.ts

@@ -86,6 +86,9 @@ export interface CasesUiConfigType {
   incrementalId: {
     enabled: boolean;
   };
+  templates: {
+    enabled: boolean;
+  };
 }
 
 export const UserActionTypeAll = 'all' as const;

x-pack/platform/plugins/shared/cases/public/common/navigation/hooks.ts

@@ -8,11 +8,17 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 
-import { APP_ID, CASES_CONFIGURE_PATH, CASES_CREATE_PATH } from '../../../common/constants';
+import {
+  APP_ID,
+  CASES_CONFIGURE_PATH,
+  CASES_CREATE_PATH,
+  CASES_CREATE_TEMPLATE_PATH,
+  CASES_TEMPLATES_PATH,
+} from '../../../common/constants';
 import { useNavigation } from '../lib/kibana';
 import type { ICasesDeepLinkId } from './deep_links';
-import type { CaseViewPathParams, CaseViewPathSearchParams } from './paths';
-import { generateCaseViewPath } from './paths';
+import type { CaseViewPathParams, CaseViewPathSearchParams, TemplateViewPathParams } from './paths';
+import { generateCaseViewPath, generateTemplateEditPath } from './paths';
 import { stringifyToURL, parseURL } from '../../components/utils';
 import { useApplication } from '../lib/kibana/use_application';
 
@@ -69,6 +75,8 @@ const navigationMapping = {
   all: { path: '/' },
   create: { path: CASES_CREATE_PATH },
   configure: { path: CASES_CONFIGURE_PATH },
+  templates: { path: CASES_TEMPLATES_PATH },
+  createTemplate: { path: CASES_CREATE_TEMPLATE_PATH },
 };
 
 export const useAllCasesNavigation = () => {
@@ -96,6 +104,54 @@ export const useConfigureCasesNavigation = () => {
   return { getConfigureCasesUrl, navigateToConfigureCases };
 };
 
+export const useCasesTemplatesNavigation = () => {
+  const [getCasesTemplatesUrl, navigateToCasesTemplates] = useCasesNavigation({
+    path: navigationMapping.templates.path,
+    deepLinkId: APP_ID,
+  });
+  return { getCasesTemplatesUrl, navigateToCasesTemplates };
+};
+
+export const useCasesCreateTemplateNavigation = () => {
+  const [getCasesCreateTemplateUrl, navigateToCasesCreateTemplate] = useCasesNavigation({
+    path: navigationMapping.createTemplate.path,
+    deepLinkId: APP_ID,
+  });
+  return { getCasesCreateTemplateUrl, navigateToCasesCreateTemplate };
+};
+
+export const useTemplateViewParams = () => useParams<TemplateViewPathParams>();
+
+type GetEditTemplateUrl = (pathParams: TemplateViewPathParams, absolute?: boolean) => string;
+type NavigateToEditTemplate = (pathParams: TemplateViewPathParams) => void;
+
+export const useCasesEditTemplateNavigation = () => {
+  const { appId } = useApplication();
+  const { navigateTo, getAppUrl } = useNavigation(appId);
+  const deepLinkId = APP_ID;
+
+  const getCasesEditTemplateUrl = useCallback<GetEditTemplateUrl>(
+    (pathParams, absolute) =>
+      getAppUrl({
+        deepLinkId,
+        absolute,
+        path: generateTemplateEditPath(pathParams),
+      }),
+    [deepLinkId, getAppUrl]
+  );
+
+  const navigateToCasesEditTemplate = useCallback<NavigateToEditTemplate>(
+    (pathParams) =>
+      navigateTo({
+        deepLinkId,
+        path: generateTemplateEditPath(pathParams),
+      }),
+    [navigateTo, deepLinkId]
+  );
+
+  return { getCasesEditTemplateUrl, navigateToCasesEditTemplate };
+};
+
 type GetCaseViewUrl = (pathParams: CaseViewPathParams, absolute?: boolean) => string;
 type NavigateToCaseView = (pathParams: CaseViewPathParams) => void;
 

x-pack/platform/plugins/shared/cases/public/common/navigation/paths.ts

@@ -14,6 +14,9 @@ import {
   CASE_VIEW_PATH,
   CASE_VIEW_COMMENT_PATH,
   CASE_VIEW_TAB_PATH,
+  CASES_TEMPLATES_PATH,
+  CASES_CREATE_TEMPLATE_PATH,
+  CASES_EDIT_TEMPLATE_PATH,
 } from '../../../common/constants';
 import type { CASE_VIEW_PAGE_TABS } from '../../../common/types';
 
@@ -38,7 +41,25 @@ export const getCaseViewPath = (casesBasePath: string) =>
   normalizePath(`${casesBasePath}${CASE_VIEW_PATH}`);
 export const getCaseViewWithCommentPath = (casesBasePath: string) =>
   normalizePath(`${casesBasePath}${CASE_VIEW_COMMENT_PATH}`);
+export const getCasesTemplatesPath = (casesBasePath: string) =>
+  normalizePath(`${casesBasePath}${CASES_TEMPLATES_PATH}`);
+export const getCasesCreateTemplatePath = (casesBasePath: string) =>
+  normalizePath(`${casesBasePath}${CASES_CREATE_TEMPLATE_PATH}`);
+export const getCasesEditTemplatePath = (casesBasePath: string) =>
+  normalizePath(`${casesBasePath}${CASES_EDIT_TEMPLATE_PATH}`);
 
+export interface TemplateViewPathParams {
+  templateId: string;
+}
+
+export const generateTemplateEditPath = (params: TemplateViewPathParams): string => {
+  return normalizePath(
+    generatePath(
+      CASES_EDIT_TEMPLATE_PATH,
+      params as ExtractRouteParams<typeof CASES_EDIT_TEMPLATE_PATH>
+    )
+  );
+};
 export const generateCaseViewPath = (params: CaseViewPathParams): string => {
   const { commentId, tabId } = params;
   // paths with commentId have their own specific path.

x-pack/platform/plugins/shared/cases/public/common/use_cases_features.tsx

@@ -30,7 +30,6 @@ export const useCasesFeatures = (): UseCasesFeatures => {
   const { isAtLeastGold, isAtLeastPlatinum } = useLicense();
   const hasLicenseGreaterThanPlatinum = isAtLeastPlatinum();
   const hasLicenseWithAtLeastGold = isAtLeastGold();
-
   const casesFeatures = useMemo(
     () => ({
       isAlertsEnabled: features.alerts.enabled,

x-pack/platform/plugins/shared/cases/public/components/all_cases/selector_modal/use_cases_add_to_existing_case_modal.test.tsx

@@ -87,6 +87,7 @@ describe('use cases add to existing case modal hook', () => {
             metrics: [],
             observables: { enabled: true, autoExtract: true },
             events: { enabled: true },
+            templates: { enabled: true },
           },
           releasePhase: 'ga',
         }}

x-pack/platform/plugins/shared/cases/public/components/app/routes.tsx

@@ -23,12 +23,18 @@ import {
   getCaseViewWithCommentPath,
   useAllCasesNavigation,
   useCaseViewNavigation,
+  getCasesTemplatesPath,
+  getCasesCreateTemplatePath,
+  getCasesEditTemplatePath,
 } from '../../common/navigation';
 import { NoPrivilegesPage } from '../no_privileges';
 import * as i18n from './translations';
 import { useReadonlyHeader } from './use_readonly_header';
 import type { CaseViewProps } from '../case_view/types';
 import type { CreateCaseFormProps } from '../create/form';
+import { AllTemplatesPage } from '../templates_v2/pages/all_templates_page';
+import { TemplateFormPage } from '../templates_v2/pages/template_form_page';
+import { KibanaServices } from '../../common/lib/kibana/services';
 
 const CaseViewLazy: React.FC<CaseViewProps> = lazy(() => import('../case_view'));
 
@@ -46,12 +52,15 @@ const CasesRoutesComponent: React.FC<CasesRoutesProps> = ({
   const { basePath, permissions } = useCasesContext();
   const { navigateToAllCases } = useAllCasesNavigation();
   const { navigateToCaseView } = useCaseViewNavigation();
+
   useReadonlyHeader();
 
   const onCreateCaseSuccess: CreateCaseFormProps['onSuccess'] = useCallback(
     async ({ id }) => navigateToCaseView({ detailName: id }),
     [navigateToCaseView]
   );
+  const config = KibanaServices.getConfig();
+  const isTemplatesEnabled = config?.templates?.enabled ?? false;
 
   return (
     <>
@@ -81,6 +90,21 @@ const CasesRoutesComponent: React.FC<CasesRoutesProps> = ({
           )}
         </Route>
 
+        {isTemplatesEnabled && (
+          <Route exact path={getCasesTemplatesPath(basePath)}>
+            <AllTemplatesPage />
+          </Route>
+        )}
+        {isTemplatesEnabled && (
+          <Route exact path={getCasesCreateTemplatePath(basePath)}>
+            <TemplateFormPage />
+          </Route>
+        )}
+        {isTemplatesEnabled && (
+          <Route exact path={getCasesEditTemplatePath(basePath)}>
+            <TemplateFormPage />
+          </Route>
+        )}
         {/* NOTE: current case view implementation retains some local state between renders, eg. when going from one case directly to another one. as a short term fix, we are forcing the component remount. */}
         <Route exact path={[getCaseViewWithCommentPath(basePath), getCaseViewPath(basePath)]}>
           <Suspense fallback={<EuiLoadingSpinner />}>

x-pack/platform/plugins/shared/cases/public/components/configure_cases/index.tsx

@@ -13,6 +13,7 @@ import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { EuiThemeComputed } from '@elastic/eui';
 import {
+  EuiButton,
   EuiCallOut,
   EuiFlexItem,
   EuiLink,
@@ -31,7 +32,7 @@ import type {
   ActionConnector,
   ObservableTypeConfiguration,
 } from '../../../common/types/domain';
-import { useKibana } from '../../common/lib/kibana';
+import { KibanaServices, useKibana } from '../../common/lib/kibana';
 import { useGetActionTypes } from '../../containers/configure/use_action_types';
 import { useGetCaseConfiguration } from '../../containers/configure/use_get_case_configuration';
 
@@ -44,7 +45,7 @@ import { getConnectorById, addOrReplaceField } from '../utils';
 import { HeaderPage } from '../header_page';
 import { useCasesContext } from '../cases_context/use_cases_context';
 import { useCasesBreadcrumbs } from '../use_breadcrumbs';
-import { CasesDeepLinkId } from '../../common/navigation';
+import { CasesDeepLinkId, useCasesTemplatesNavigation } from '../../common/navigation';
 import { CustomFields } from '../custom_fields';
 import { CommonFlyout } from './flyout';
 import { useGetSupportedActionConnectors } from '../../containers/configure/use_get_supported_action_connectors';
@@ -122,6 +123,8 @@ export const ConfigureCases: React.FC = React.memo(() => {
   const hasMinimumLicensePermissionsForObservables = license.isAtLeastPlatinum();
 
   const { isObservablesFeatureEnabled } = useCasesFeatures();
+  const config = KibanaServices.getConfig();
+  const isTemplatesEnabled = config?.templates?.enabled ?? false;
 
   const [connectorIsValid, setConnectorIsValid] = useState(true);
   const [flyOutVisibility, setFlyOutVisibility] = useState<Flyout | null>(null);
@@ -178,7 +181,6 @@ export const ConfigureCases: React.FC = React.memo(() => {
     },
     [refetchActionTypes, refetchCaseConfigure, refetchConnectors, setEditedConnectorItem]
   );
-
   const onConnectorCreated = useCallback(
     async (createdConnector: ActionConnector) => {
       const caseConnector = normalizeActionConnector(createdConnector);
@@ -624,6 +626,8 @@ export const ConfigureCases: React.FC = React.memo(() => {
       </CommonFlyout>
     ) : null;
 
+  const { navigateToCasesTemplates } = useCasesTemplatesNavigation();
+
   return (
     <EuiPageSection restrictWidth={true}>
       <HeaderPage data-test-subj="case-configure-title" title={i18n.CONFIGURE_CASES_PAGE_TITLE} />
@@ -716,6 +720,18 @@ export const ConfigureCases: React.FC = React.memo(() => {
             </EuiFlexItem>
           </div>
 
+          {isTemplatesEnabled && (
+            <>
+              <EuiSpacer size="xl" />
+              <div css={sectionWrapperCss}>
+                <EuiFlexItem grow={false}>
+                  <EuiButton onClick={() => navigateToCasesTemplates()}>
+                    {i18n.SHOW_ALL_TEMPLATES}
+                  </EuiButton>
+                </EuiFlexItem>
+              </div>
+            </>
+          )}
           {hasMinimumLicensePermissionsForObservables && isObservablesFeatureEnabled && (
             <>
               <EuiSpacer size="xl" />

x-pack/platform/plugins/shared/cases/public/components/configure_cases/translations.ts

@@ -207,3 +207,10 @@ export const EDIT_OBSERVABLE_TYPE = i18n.translate(
     defaultMessage: 'Edit observable type',
   }
 );
+
+export const SHOW_ALL_TEMPLATES = i18n.translate(
+  'xpack.cases.configureCases.templates.showAllTemplates',
+  {
+    defaultMessage: 'Show all templates',
+  }
+);

x-pack/platform/plugins/shared/cases/public/components/create/flyout/use_cases_add_to_new_case_flyout.test.tsx

@@ -41,6 +41,7 @@ describe('use cases add to new case flyout hook', () => {
               metrics: [],
               observables: { enabled: true, autoExtract: true },
               events: { enabled: true },
+              templates: { enabled: true },
             },
             releasePhase: 'ga',
           }}