NIFI-15196 - Improve Content Viewer resolution based on MIME Type

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/feature/content-viewer.component.spec.ts

@@ -54,4 +54,58 @@ describe('ContentViewerComponent', () => {
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    describe('resolveBaseMediaType', () => {
+        it('should resolve structured syntax suffix to base media type', () => {
+            expect(component['resolveBaseMediaType']('application/vnd.api+json')).toEqual('application/json');
+            expect(component['resolveBaseMediaType']('application/fhir+xml')).toEqual('application/xml');
+            expect(component['resolveBaseMediaType']('application/some-vendor+yaml')).toEqual('application/yaml');
+            expect(component['resolveBaseMediaType']('application/vnd.example.api+json')).toEqual('application/json');
+            expect(component['resolveBaseMediaType']('application/soap+xml')).toEqual('application/xml');
+        });
+
+        it('should return null for media types without a structured suffix', () => {
+            expect(component['resolveBaseMediaType']('application/json')).toBeNull();
+            expect(component['resolveBaseMediaType']('text/plain')).toBeNull();
+            expect(component['resolveBaseMediaType']('application/xml')).toBeNull();
+            expect(component['resolveBaseMediaType']('text/csv')).toBeNull();
+            expect(component['resolveBaseMediaType']('image/png')).toBeNull();
+        });
+
+        it('should handle avro binary type which contains a plus in the subtype', () => {
+            expect(component['resolveBaseMediaType']('application/avro+binary')).toEqual('application/binary');
+        });
+    });
+
+    describe('isMediaTypeCompatible', () => {
+        it('should match exact media types', () => {
+            expect(component['isMediaTypeCompatible']('application/json', 'application/json')).toBe(true);
+            expect(component['isMediaTypeCompatible']('text/xml', 'text/xml')).toBe(true);
+            expect(component['isMediaTypeCompatible']('text/plain', 'text/plain')).toBe(true);
+        });
+
+        it('should match via startsWith for media types with parameters', () => {
+            expect(component['isMediaTypeCompatible']('text/plain; charset=UTF-8', 'text/plain')).toBe(true);
+            expect(component['isMediaTypeCompatible']('application/json; charset=UTF-8', 'application/json')).toBe(true);
+        });
+
+        it('should match structured suffix types to their base media type', () => {
+            expect(component['isMediaTypeCompatible']('application/vnd.api+json', 'application/json')).toBe(true);
+            expect(component['isMediaTypeCompatible']('application/fhir+xml', 'application/xml')).toBe(true);
+            expect(component['isMediaTypeCompatible']('application/fhir+xml', 'text/xml')).toBe(false);
+            expect(component['isMediaTypeCompatible']('application/some-vendor+yaml', 'application/yaml')).toBe(true);
+            expect(component['isMediaTypeCompatible']('application/soap+xml', 'application/xml')).toBe(true);
+        });
+
+        it('should not match unrelated media types', () => {
+            expect(component['isMediaTypeCompatible']('application/json', 'application/xml')).toBe(false);
+            expect(component['isMediaTypeCompatible']('text/plain', 'application/json')).toBe(false);
+            expect(component['isMediaTypeCompatible']('image/png', 'application/json')).toBe(false);
+        });
+
+        it('should not match when suffix resolves to a different base type', () => {
+            expect(component['isMediaTypeCompatible']('application/vnd.api+json', 'application/xml')).toBe(false);
+            expect(component['isMediaTypeCompatible']('application/fhir+xml', 'application/json')).toBe(false);
+        });
+    });
 });

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/content-viewer/feature/content-viewer.component.ts

@@ -255,7 +255,7 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
                     const supportedContentViewer = this.supportedContentViewerLookup.get(supportedMimeTypeId);
                     if (supportedContentViewer) {
                         const supportsMimeType = supportedContentViewer.supportedMimeTypes.mimeTypes.some(
-                            (supportedMimeType) => mimeType.startsWith(supportedMimeType)
+                            (supportedMimeType) => this.isMediaTypeCompatible(mimeType, supportedMimeType)
                         );
 
                         if (supportsMimeType) {
@@ -269,6 +269,41 @@ export class ContentViewerComponent implements OnInit, OnDestroy {
         return null;
     }
 
+    /**
+     * Checks if a MIME type is compatible with a supported media type.
+     * Supports exact matching, startsWith matching (for parameters like charset),
+     * and base media type resolution for structured syntax suffixes per RFC 6839.
+     * For example, "application/vnd.api+json" resolves to base type "application/json".
+     */
+    private isMediaTypeCompatible(mimeType: string, supportedMimeType: string): boolean {
+        if (mimeType === supportedMimeType || mimeType.startsWith(supportedMimeType)) {
+            return true;
+        }
+
+        const baseMediaType = this.resolveBaseMediaType(mimeType);
+        if (baseMediaType !== null) {
+            return baseMediaType === supportedMimeType || baseMediaType.startsWith(supportedMimeType);
+        }
+
+        return false;
+    }
+
+    /**
+     * Resolves a structured syntax suffix media type to its base media type per RFC 6839.
+     * For example, "application/fhir+xml" resolves to "application/xml" and
+     * "application/vnd.api+json" resolves to "application/json".
+     *
+     * @returns the base media type, or null if the media type does not contain a structured suffix
+     */
+    private resolveBaseMediaType(mimeType: string): string | null {
+        const slashIndex = mimeType.indexOf('/');
+        const plusIndex = mimeType.lastIndexOf('+');
+        if (slashIndex > 0 && plusIndex > slashIndex) {
+            return mimeType.substring(0, slashIndex + 1) + mimeType.substring(plusIndex + 1);
+        }
+        return null;
+    }
+
     viewAsChanged(event: MatSelectChange): void {
         this.loadContentViewer(Number(event.value));
     }