ui: add route for universal integration keys

integrationkey/integrationkey.go

@@ -17,7 +17,7 @@ func (i IntegrationKey) Normalize() (*IntegrationKey, error) {
 	err := validate.Many(
 		validate.IDName("Name", i.Name),
 		validate.UUID("ServiceID", i.ServiceID),
-		validate.OneOf("Type", i.Type, TypeGrafana, TypeSite24x7, TypePrometheusAlertmanager, TypeGeneric, TypeEmail),
+		validate.OneOf("Type", i.Type, TypeGrafana, TypeSite24x7, TypePrometheusAlertmanager, TypeGeneric, TypeEmail, TypeUniversal),
 		validate.ASCII("ExternalSystemName", i.ExternalSystemName, 0, 255),
 	)
 	if err != nil {

web/src/app/main/AppRoutes.tsx

@@ -42,6 +42,8 @@ import { useSessionInfo } from '../util/RequireConfig'
 import WizardRouter from '../wizard/WizardRouter'
 import LocalDev from '../localdev/LocalDev'
 import AdminSwitchoverGuide from '../admin/switchover/AdminSwitchoverGuide'
+import UniversalKeyPage from '../services/UniversalKey/UniversalKeyPage'
+import { useExpFlag } from '../util/useExpFlag'
 
 // ParamRoute will pass route parameters as props to the route's child.
 function ParamRoute(props: RouteProps): JSX.Element {
@@ -70,7 +72,7 @@ const alertQuery = gql`
     }
   }
 `
-
+const EXP_ROUTE_UNIV_KEY = '/services/:serviceID/integration-keys/:keyID'
 // Allow any component to be used as a route.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const routes: Record<string, JSXElementConstructor<any>> = {
@@ -100,6 +102,7 @@ export const routes: Record<string, JSXElementConstructor<any>> = {
   '/services/:serviceID/alerts/:alertID': AlertDetailPage,
   '/services/:serviceID/heartbeat-monitors': HeartbeatMonitorList,
   '/services/:serviceID/integration-keys': IntegrationKeyList,
+  [EXP_ROUTE_UNIV_KEY]: UniversalKeyPage,
   '/services/:serviceID/labels': ServiceLabelList,
   '/services/:serviceID/alert-metrics': AlertMetrics,
 
@@ -146,6 +149,8 @@ export default function AppRoutes(): JSX.Element {
   })
   const alertServiceID = urlAlertID && alertQ.data?.alert?.serviceID
 
+  const hasUnivKeysFlag = useExpFlag('univ-keys')
+
   useLayoutEffect(() => {
     if (path.endsWith('/') && path !== '/') {
       setPath(path.slice(0, -1) + location.search + location.hash, {
@@ -189,14 +194,16 @@ export default function AppRoutes(): JSX.Element {
 
   return (
     <Switch>
-      {
-        Object.entries(routes).map(([path, component]) => (
+      {Object.entries(routes)
+        .filter((value) => {
+          if (value[0] === EXP_ROUTE_UNIV_KEY && !hasUnivKeysFlag) {
+            return false
+          }
+          return true
+        })
+        .map(([path, component]) => (
           <ParamRoute key={path} path={path} component={component} />
-
-          // not worth the type headache, we just want our routes
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        )) as any
-      }
+        ))}
       <Route component={PageNotFound} />
     </Switch>
   )

web/src/app/main/components/ToolbarPageTitle.tsx

@@ -23,6 +23,7 @@ const typeMap: { [key: string]: string } = {
   rotations: 'Rotation',
   users: 'User',
   services: 'Service',
+  'integration-keys': 'IntegrationKey',
 }
 const toTitleCase = (str: string): string =>
   startCase(str)
@@ -123,7 +124,8 @@ function useBreadcrumbs(): [string, JSX.Element[] | JSX.Element] {
   const crumbs: Array<JSX.Element> = []
   const parts = path.split('/')
   const name = useName(parts[1], parts[2])
-  parts.slice(1).forEach((part, i) => {
+  parts.slice(1).forEach((p, i) => {
+    const part = decodeURIComponent(p)
     title = i === 1 ? name : toTitleCase(part)
     if (parts[1] === 'admin') {
       // admin doesn't have IDs to lookup

web/src/app/services/IntegrationKeyCreateDialog.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import { useMutation, gql } from 'urql'
-
-import { fieldErrors, nonFieldErrors } from '../util/errutil'
-
-import FormDialog from '../dialogs/FormDialog'
 import IntegrationKeyForm, { Value } from './IntegrationKeyForm'
+import { Redirect } from 'wouter'
+import FormDialog from '../dialogs/FormDialog'
+import { useExpFlag } from '../util/useExpFlag'
+import { fieldErrors, nonFieldErrors } from '../util/errutil'
 
 const mutation = gql`
   mutation ($input: CreateIntegrationKeyInput!) {
@@ -23,21 +23,40 @@ export default function IntegrationKeyCreateDialog(props: {
 }): JSX.Element {
   const [value, setValue] = useState<Value | null>(null)
   const { serviceID, onClose } = props
-
   const [createKeyStatus, createKey] = useMutation(mutation)
+  const hasUnivKeysFlag = useExpFlag('univ-keys')
+  let caption
+  if (hasUnivKeysFlag && value?.type === 'universal') {
+    caption = 'Submit to configure universal key rules'
+  }
+
+  if (createKeyStatus?.data?.createIntegrationKey?.type === 'universal') {
+    return (
+      <Redirect
+        to={`/services/${serviceID}/integration-keys/${createKeyStatus.data.createIntegrationKey.id}`}
+      />
+    )
+  }
 
   return (
     <FormDialog
       maxWidth='sm'
       title='Create New Integration Key'
+      subTitle={caption}
       loading={createKeyStatus.fetching}
       errors={nonFieldErrors(createKeyStatus.error)}
       onClose={onClose}
       onSubmit={(): void => {
         createKey(
           { input: { serviceID, ...value } },
           { additionalTypenames: ['IntegrationKey', 'Service'] },
-        ).then(onClose)
+        ).then(() => {
+          if (value?.type === 'universal') {
+            return
+          }
+
+          onClose()
+        })
       }}
       form={
         <IntegrationKeyForm

web/src/app/services/IntegrationKeyList.tsx

@@ -120,6 +120,7 @@ export default function IntegrationKeyList(props: {
     .map(
       (key: IntegrationKey): FlatListListItem => ({
         title: key.name,
+        url: key.type === 'universal' ? key.id : undefined,
         subText: (
           <IntegrationKeyDetails
             key={key.id}

web/src/app/services/UniversalKey/UniversalKeyPage.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface UniversalKeyPageProps {
+  serviceID: string
+  keyName: string
+}
+
+export default function UniversalKeyPage({
+  serviceID,
+  keyName,
+}: UniversalKeyPageProps): JSX.Element {
+  if (serviceID && keyName) {
+    return <div />
+  }
+  return <div />
+}