update logic for determining if svg needs to be fetched

Signed-off-by: John Philip <jphilip@spotify.com>

.changeset/techdocs-late-ants-remain.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Updates logic to check for SVG sources when inlining svgs.

plugins/techdocs/src/reader/transformers/addBaseUrl.test.ts

@@ -137,6 +137,36 @@ describe('addBaseUrl', () => {
     });
   });
 
+  it('preserves anchors in the original src', async () => {
+    const svgContent = '<svg></svg>';
+    const expectedSrc = `data:image/svg+xml;base64,${Buffer.from(
+      svgContent,
+    ).toString('base64')}`;
+
+    (global.fetch as jest.Mock).mockReturnValue({
+      text: jest.fn().mockResolvedValue(svgContent),
+    });
+
+    const root = await createTestShadowDom(
+      '<img id="x" src="test.svg#dark-mode" />',
+      {
+        preTransformers: [
+          addBaseUrl({
+            techdocsStorageApi,
+            entityId: mockEntityId,
+            path: '',
+          }),
+        ],
+        postTransformers: [],
+      },
+    );
+
+    await waitFor(() => {
+      const actualSrc = root.getElementById('x')?.getAttribute('src');
+      expect(expectedSrc).toEqual(actualSrc);
+    });
+  });
+
   it('inlines absolute url svgs pointed at our backend', async () => {
     const svgContent = '<svg></svg>';
     const expectedSrc = `data:image/svg+xml;base64,${Buffer.from(
@@ -195,4 +225,6 @@ describe('addBaseUrl', () => {
       });
     });
   });
+
+  it('preserves metadata about the original src', async () => {});
 });

plugins/techdocs/src/reader/transformers/addBaseUrl.ts

@@ -33,7 +33,10 @@ const isSvgNeedingInlining = (
   attrVal: string,
   apiOrigin: string,
 ) => {
-  const isSrcToSvg = attrName === 'src' && attrVal.endsWith('.svg');
+  // Let's let the URL object do automatic parsing of the pathname for us
+  const pathname = new URL(attrVal, 'https://ignored.com').pathname;
+  const isSrcToSvg = attrName === 'src' && pathname.endsWith('.svg');
+
   const isRelativeUrl = !attrVal.match(/^([a-z]*:)?\/\//i);
   const pointsToOurBackend = attrVal.startsWith(apiOrigin);
   return isSrcToSvg && (isRelativeUrl || pointsToOurBackend);