Add deprecation warnings (#2725)

web/src/lib/api/types/pipeline.ts

@@ -1,9 +1,9 @@
 import { WebhookEvents } from './webhook';
 
-export type PipelineError = {
+export type PipelineError<D = unknown> = {
   type: string;
   message: string;
-  data?: unknown;
+  data?: D;
   is_warning: boolean;
 };
 

web/src/views/repo/pipeline/PipelineErrors.vue

@@ -4,9 +4,17 @@
       <template v-for="(error, i) in pipeline.errors" :key="i">
         <span>{{ error.is_warning ? '⚠️' : '❌' }}</span>
         <span>[{{ error.type }}]</span>
-        <span v-if="error.type === 'linter'" class="underline">{{ (error.data as any)?.field }}</span>
+        <span v-if="isLinterError(error) || isDeprecationError(error)">
+          <span v-if="error.data?.file" class="font-bold">{{ error.data?.file }}: </span>
+          <span>{{ error.data?.field }}</span>
+        </span>
         <span v-else />
-        <span class="ml-4">{{ error.message }}</span>
+        <a v-if="isDeprecationError(error)" :href="error.data?.docs" target="_blank" class="underline ml-4">
+          {{ error.message }}
+        </a>
+        <span v-else class="ml-4">
+          {{ error.message }}
+        </span>
       </template>
     </div>
   </Panel>
@@ -16,12 +24,22 @@
 import { inject, Ref } from 'vue';
 
 import Panel from '~/components/layout/Panel.vue';
-import { Pipeline } from '~/lib/api/types';
+import type { Pipeline, PipelineError } from '~/lib/api/types';
 
 const pipeline = inject<Ref<Pipeline>>('pipeline');
 if (!pipeline) {
   throw new Error('Unexpected: "pipeline" should be provided at this place');
 }
+
+function isLinterError(error: PipelineError): error is PipelineError<{ file?: string; field: string }> {
+  return error.type === 'linter';
+}
+
+function isDeprecationError(
+  error: PipelineError,
+): error is PipelineError<{ file: string; field: string; docs: string }> {
+  return error.type === 'deprecation';
+}
 </script>
 
 <style scoped>