Use type to validate annotation key

Author: code-asher

plugins/backstage-plugin-devcontainers-backend/src/index.ts

@@ -1,2 +1,2 @@
 export * from './service/router';
-export { DevcontainersProcessor } from './processors/DevcontainersProcessor';
+export { DevcontainersProcessor, type VsCodeUrlKey } from './processors/DevcontainersProcessor';

plugins/backstage-plugin-devcontainers-backend/src/processors/DevcontainersProcessor.ts

@@ -14,6 +14,13 @@ import { parseGitUrl } from '../utils/git';
 export const DEFAULT_TAG_NAME = 'devcontainers';
 export const PROCESSOR_NAME_PREFIX = 'backstage-plugin-devcontainers-backend';
 
+const vsCodeUrlKey = "vsCodeUrl"
+
+// We export this type instead of the actual constant so we can validate the
+// constant on the frontend at compile-time instead of making the backend plugin
+// a run-time dependency, so it can continue to run standalone.
+export type VsCodeUrlKey = typeof vsCodeUrlKey
+
 type ProcessorOptions = Readonly<{
   tagName: string;
   logger: Logger;
@@ -138,7 +145,7 @@ export class DevcontainersProcessor implements CatalogProcessor {
         ...entity.metadata,
         annotations: {
           ...(entity.metadata.annotations ?? {}),
-          vsCodeUrl: serializeVsCodeUrl(location.target),
+          [vsCodeUrlKey]: serializeVsCodeUrl(location.target),
         },
         tags: [...(entity.metadata?.tags ?? []), newTag],
       },

plugins/backstage-plugin-devcontainers-react/src/hooks/useDevcontainers.ts

@@ -1,5 +1,11 @@
 import { useDevcontainersConfig } from '../components/DevcontainersProvider';
 import { useEntity } from '@backstage/plugin-catalog-react';
+import type { VsCodeUrlKey } from "@coder/backstage-plugin-devcontainers-backend";
+
+// We avoid importing the actual constant to prevent making the backend plugin a
+// run-time dependency, but we can use the type at compile-time to validate the
+// string is the same.
+const vsCodeUrlKey: VsCodeUrlKey = "vsCodeUrl";
 
 export type UseDevcontainersResult = Readonly<
   {
@@ -37,7 +43,7 @@ export function useDevcontainers(): UseDevcontainersResult {
     };
   }
 
-  const vsCodeUrl = entity.metadata.annotations?.vsCodeUrl;
+  const vsCodeUrl = entity.metadata.annotations?.[vsCodeUrlKey];
   if (!vsCodeUrl) {
     return {
       tagName,