fix: [M3-7305] - Correct Object Storage folder links containing speci…

…al characters (#10822)

* Add Intellij IDEA module files to .gitignore.

* fix: [M3-7305] - Correct Object Storage folder links containing special characters.

* Added changeset: Correct Object Storage folder links containing special characters.

* fix: [M3-7305] - code review comment applied: table explicit declaration replaced with wrapWithTableBody

* fix: [M3-7305] - corrected import for TableRowProps.

* Update packages/manager/.changeset/pr-10819-fixed-1724404332335.md

Co-authored-by: cpathipa <119517080+cpathipa@users.noreply.github.com>

* Update packages/manager/src/features/ObjectStorage/BucketDetail/FolderTableRow.test.tsx

Co-authored-by: cpathipa <119517080+cpathipa@users.noreply.github.com>

* fix typo

---------

Co-authored-by: cpathipa <119517080+cpathipa@users.noreply.github.com>
Co-authored-by: Alban Bailly <abailly@akamai.com>

.gitignore

@@ -11,6 +11,7 @@ lib
 # editor configuration
 .vscode
 .idea
+**/*.iml
 
 # misc
 .DS_Store

packages/manager/.changeset/pr-10819-fixed-1724404332335.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Correct links to Object Storage folders that contain special characters. ([#10819](https://github.com/linode/manager/pull/10819))

packages/manager/src/features/ObjectStorage/BucketDetail/FolderTableRow.test.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { FolderTableRow } from 'src/features/ObjectStorage/BucketDetail/FolderTableRow';
+import { wrapWithTableBody } from 'src/utilities/testHelpers';
+
+import type { FolderTableRowProps } from 'src/features/ObjectStorage/BucketDetail/FolderTableRow';
+
+describe('FolderTableRow', () => {
+  it('renders a link with URI-encoded special characters', () => {
+    const specialCharsProps: FolderTableRowProps = {
+      displayName: 'folder-with-special-chars...',
+      folderName: 'folder-with-special-chars <>#%+{}|^[]`;?:@=&$',
+      handleClickDelete: () => {},
+      manuallyCreated: false,
+    };
+
+    const { getByRole } = render(
+      wrapWithTableBody(<FolderTableRow {...specialCharsProps} />)
+    );
+
+    expect(getByRole('link')).toHaveAttribute(
+      'href',
+      '/?prefix=folder-with-special-chars%20%3C%3E%23%25%2B%7B%7D%7C%5E%5B%5D%60%3B%3F%3A%40%3D%26%24'
+    );
+  });
+});

packages/manager/src/features/ObjectStorage/BucketDetail/FolderTableRow.tsx

@@ -6,29 +6,38 @@ import { Link } from 'react-router-dom';
 import { EntityIcon } from 'src/components/EntityIcon/EntityIcon';
 import { Hidden } from 'src/components/Hidden';
 import { TableCell } from 'src/components/TableCell';
-import { TableRow } from 'src/components/TableRow';
+import { TableRow, TableRowProps } from 'src/components/TableRow';
 
 import { FolderActionMenu } from './FolderActionMenu';
 
-interface Props {
+export interface FolderTableRowProps extends TableRowProps {
   displayName: string;
   folderName: string;
   handleClickDelete: (objectName: string) => void;
   manuallyCreated: boolean;
 }
 
-export const FolderTableRow = (props: Props) => {
-  const { displayName, folderName, handleClickDelete } = props;
+export const FolderTableRow = (props: FolderTableRowProps) => {
+  const {
+    displayName,
+    folderName,
+    handleClickDelete,
+    manuallyCreated,
+    ...tableRowProps
+  } = props;
 
   return (
-    <TableRow key={folderName} {...props}>
+    <TableRow key={folderName} {...tableRowProps}>
       <TableCell parentColumn="Object">
         <Grid alignItems="center" container spacing={2} wrap="nowrap">
           <StyledIconWrapper>
             <EntityIcon size={22} variant="folder" />
           </StyledIconWrapper>
           <Grid>
-            <Link className="secondaryLink" to={`?prefix=${folderName}`}>
+            <Link
+              className="secondaryLink"
+              to={`?prefix=${encodeURIComponent(folderName)}`}
+            >
               {displayName}
             </Link>
           </Grid>