fix: prettier

Author: tomasz-stefaniak

gui/src/components/StyledMarkdownPreview/SecureImageComponent.test.tsx

@@ -10,53 +10,67 @@ describe("SecureImageComponent", () => {
   describe("Default blocking behavior", () => {
     it("should block images by default and show warning message", () => {
       render(<SecureImageComponent src="https://example.com/image.jpg" />);
-      
-      expect(screen.getByText(/Image blocked for security/)).toBeInTheDocument();
+
+      expect(
+        screen.getByText(/Image blocked for security/),
+      ).toBeInTheDocument();
       expect(screen.getByText("Load Image")).toBeInTheDocument();
       expect(screen.queryByRole("img")).not.toBeInTheDocument();
     });
 
     it("should display the image URL", () => {
       const testUrl = "https://example.com/test-image.png";
       render(<SecureImageComponent src={testUrl} />);
-      
+
       expect(screen.getByText(testUrl)).toBeInTheDocument();
     });
 
     it("should handle invalid src prop", () => {
       render(<SecureImageComponent src={undefined} />);
-      
-      expect(screen.getByText("[Invalid image: no source]")).toBeInTheDocument();
+
+      expect(
+        screen.getByText("[Invalid image: no source]"),
+      ).toBeInTheDocument();
       expect(screen.queryByText("Load Image")).not.toBeInTheDocument();
     });
   });
 
   describe("Query parameter detection", () => {
     it("should detect and display query parameters", () => {
-      render(<SecureImageComponent src="https://example.com/image.jpg?user=123&token=abc" />);
-      
-      expect(screen.getByText(/Warning: URL contains query parameters/)).toBeInTheDocument();
+      render(
+        <SecureImageComponent src="https://example.com/image.jpg?user=123&token=abc" />,
+      );
+
+      expect(
+        screen.getByText(/Warning: URL contains query parameters/),
+      ).toBeInTheDocument();
       expect(screen.getByText(/"user": "123"/)).toBeInTheDocument();
       expect(screen.getByText(/"token": "abc"/)).toBeInTheDocument();
     });
 
     it("should not show query parameter warning for URLs without parameters", () => {
       render(<SecureImageComponent src="https://example.com/image.jpg" />);
-      
-      expect(screen.queryByText(/Warning: URL contains query parameters/)).not.toBeInTheDocument();
+
+      expect(
+        screen.queryByText(/Warning: URL contains query parameters/),
+      ).not.toBeInTheDocument();
     });
 
     it("should handle relative URLs with query parameters", () => {
-      render(<SecureImageComponent src="/images/test.jpg?id=456&session=xyz" />);
-      
-      expect(screen.getByText(/Warning: URL contains query parameters/)).toBeInTheDocument();
+      render(
+        <SecureImageComponent src="/images/test.jpg?id=456&session=xyz" />,
+      );
+
+      expect(
+        screen.getByText(/Warning: URL contains query parameters/),
+      ).toBeInTheDocument();
       expect(screen.getByText(/"id": "456"/)).toBeInTheDocument();
       expect(screen.getByText(/"session": "xyz"/)).toBeInTheDocument();
     });
 
     it("should handle malformed URLs gracefully", () => {
       render(<SecureImageComponent src="not-a-valid-url://image" />);
-      
+
       // Should still display the URL even if it can't be parsed
       expect(screen.getByText("not-a-valid-url://image")).toBeInTheDocument();
       expect(screen.getByText("Load Image")).toBeInTheDocument();
@@ -67,63 +81,65 @@ describe("SecureImageComponent", () => {
     it("should show image when Load Image button is clicked", () => {
       const testUrl = "https://example.com/image.jpg";
       render(<SecureImageComponent src={testUrl} alt="Test image" />);
-      
+
       // Initially no image
       expect(screen.queryByRole("img")).not.toBeInTheDocument();
-      
+
       // Click load button
       const loadButton = screen.getByText("Load Image");
       fireEvent.click(loadButton);
-      
+
       // Image should now be displayed (query by tag since it might be role="presentation")
       const image = screen.getByAltText("Test image");
       expect(image).toBeInTheDocument();
       expect(image).toHaveAttribute("src", testUrl);
       expect(image).toHaveAttribute("alt", "Test image");
-      
+
       // Warning message should be gone
-      expect(screen.queryByText(/Image blocked for security/)).not.toBeInTheDocument();
+      expect(
+        screen.queryByText(/Image blocked for security/),
+      ).not.toBeInTheDocument();
     });
 
     it("should handle image load errors", async () => {
       const testUrl = "https://example.com/broken-image.jpg";
       render(<SecureImageComponent src={testUrl} alt="broken image" />);
-      
+
       // Click load button
       const loadButton = screen.getByText("Load Image");
       fireEvent.click(loadButton);
-      
+
       // Simulate image error (query by alt text since role might be presentation)
       const image = screen.getByAltText("broken image");
       fireEvent.error(image);
-      
+
       // Should show error message and hide image
       await waitFor(() => {
         expect(screen.getByText(/Failed to load image/)).toBeInTheDocument();
         expect(screen.queryByAltText("broken image")).not.toBeInTheDocument();
       });
-      
+
       // Load button should be available again
       expect(screen.getByText("Load Image")).toBeInTheDocument();
     });
 
     it("should pass through title and className props", () => {
       render(
-        <SecureImageComponent 
-          src="https://example.com/image.jpg" 
+        <SecureImageComponent
+          src="https://example.com/image.jpg"
           alt="test image"
           title="Image title"
           className="custom-class"
-        />
+        />,
       );
-      
+
       // Click load button
       fireEvent.click(screen.getByText("Load Image"));
-      
+
       // Check image has title (query by alt text)
       const image = screen.getByAltText("test image");
       expect(image).toHaveAttribute("title", "Image title");
-      
+
       // Check container has className
       const container = image.parentElement;
       expect(container).toHaveClass("custom-class");
@@ -133,14 +149,14 @@ describe("SecureImageComponent", () => {
   describe("Security features", () => {
     it("should display query parameters as JSON for transparency", () => {
       render(
-        <SecureImageComponent 
-          src="https://malicious.com/[email protected]&id=12345&action=view" 
-        />
+        <SecureImageComponent src="https://malicious.com/[email protected]&id=12345&action=view" />,
       );
-      
+
       // Should show all parameters clearly
-      expect(screen.getByText(/Warning: URL contains query parameters/)).toBeInTheDocument();
-      
+      expect(
+        screen.getByText(/Warning: URL contains query parameters/),
+      ).toBeInTheDocument();
+
       // Check JSON is properly formatted
       const preElement = screen.getByText(/"email": "user@example.com"/);
       expect(preElement).toBeInTheDocument();
@@ -150,49 +166,49 @@ describe("SecureImageComponent", () => {
 
     it("should handle encoded query parameters", () => {
       render(
-        <SecureImageComponent 
-          src="https://example.com/img.png?data=%7B%22user%22%3A%22test%22%7D" 
-        />
+        <SecureImageComponent src="https://example.com/img.png?data=%7B%22user%22%3A%22test%22%7D" />,
       );
-      
+
       // Should decode and display the parameter
-      expect(screen.getByText(/Warning: URL contains query parameters/)).toBeInTheDocument();
+      expect(
+        screen.getByText(/Warning: URL contains query parameters/),
+      ).toBeInTheDocument();
       // The decoded value should be shown in the pre element
-      const preElement = document.querySelector('pre');
+      const preElement = document.querySelector("pre");
       expect(preElement).toBeTruthy();
       // Check that the JSON contains the decoded data
       expect(preElement?.textContent).toContain('"data"');
       // The value is decoded as a string containing JSON
       expect(preElement?.textContent).toContain('"{');
-      expect(preElement?.textContent).toContain('user');
-      expect(preElement?.textContent).toContain('test');
+      expect(preElement?.textContent).toContain("user");
+      expect(preElement?.textContent).toContain("test");
     });
   });
 
   describe("Alt text handling", () => {
     it("should use empty string for alt when not provided", () => {
       render(<SecureImageComponent src="https://example.com/image.jpg" />);
-      
+
       fireEvent.click(screen.getByText("Load Image"));
-      
+
       // Query by tag name since empty alt makes it role="presentation"
-      const images = document.querySelectorAll('img');
+      const images = document.querySelectorAll("img");
       expect(images.length).toBe(1);
       expect(images[0]).toHaveAttribute("alt", "");
     });
 
     it("should use provided alt text", () => {
       render(
-        <SecureImageComponent 
-          src="https://example.com/image.jpg" 
+        <SecureImageComponent
+          src="https://example.com/image.jpg"
           alt="Description of image"
-        />
+        />,
       );
-      
+
       fireEvent.click(screen.getByText("Load Image"));
-      
+
       const image = screen.getByAltText("Description of image");
       expect(image).toHaveAttribute("alt", "Description of image");
     });
   });
-});
+});

gui/src/components/StyledMarkdownPreview/SecureImageComponent.tsx

@@ -69,7 +69,7 @@ const LoadButton = styled.button`
 const ImageContainer = styled.div`
   max-width: 100%;
   display: inline-block;
-  
+
   img {
     max-width: 100%;
     height: auto;
@@ -100,7 +100,7 @@ export const SecureImageComponent: React.FC<SecureImageComponentProps> = ({
   // Parse URL to check for query parameters
   let queryParams: Record<string, string> = {};
   let hasQueryParams = false;
-  
+
   try {
     const url = new URL(src, window.location.href);
     const params = new URLSearchParams(url.search);
@@ -110,7 +110,7 @@ export const SecureImageComponent: React.FC<SecureImageComponentProps> = ({
     });
   } catch (e) {
     // If URL parsing fails, treat src as a relative path
-    const queryIndex = src.indexOf('?');
+    const queryIndex = src.indexOf("?");
     if (queryIndex > -1) {
       hasQueryParams = true;
       const params = new URLSearchParams(src.substring(queryIndex));
@@ -141,11 +141,11 @@ export const SecureImageComponent: React.FC<SecureImageComponentProps> = ({
       <WarningText>
         Image blocked for security. Click to load if you trust the source.
       </WarningText>
-      
+
       <UrlDisplay>
         <strong>URL:</strong> {src}
       </UrlDisplay>
-      
+
       {hasQueryParams && (
         <QueryParamsDisplay>
           <strong>Warning: URL contains query parameters:</strong>
@@ -154,16 +154,14 @@ export const SecureImageComponent: React.FC<SecureImageComponentProps> = ({
           </pre>
         </QueryParamsDisplay>
       )}
-      
+
       {imageError && (
         <div style={{ color: lightGray, fontSize: "12px", marginTop: "8px" }}>
           Failed to load image. The URL may be invalid or inaccessible.
         </div>
       )}
-      
-      <LoadButton onClick={() => setShowImage(true)}>
-        Load Image
-      </LoadButton>
+
+      <LoadButton onClick={() => setShowImage(true)}>Load Image</LoadButton>
     </ImagePlaceholder>
   );
-};
+};