refactor FolderCardLink/FolderCardBodyAction

packages/core/upload/admin/src/components/FolderCard/FolderCardBodyAction/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+
+const FolderCardLink = styled(NavLink)`
+  max-width: 100%;
+  text-decoration: none;
+`;
+
+export const FolderCardBodyAction = ({ to, ...props }) => {
+  if (to) {
+    return <FolderCardLink to={to} {...props} />;
+  }
+
+  return <button type="button" {...props} />;
+};
+
+FolderCardBodyAction.defaultProps = {
+  to: undefined,
+};
+
+FolderCardBodyAction.propTypes = {
+  to: PropTypes.string,
+};

packages/core/upload/admin/src/components/FolderCard/index.js

@@ -1,5 +1,4 @@
 export { FolderCard } from './FolderCard';
 export { FolderCardBody } from './FolderCardBody';
 export { FolderCardCheckbox } from './FolderCardCheckbox';
-
-export { FolderCardLink } from './styled';
+export { FolderCardBodyAction } from './FolderCardBodyAction';

packages/core/upload/admin/src/components/FolderCard/styled.js

@@ -1,7 +0,0 @@
-import { NavLink } from 'react-router-dom';
-import styled from 'styled-components';
-
-export const FolderCardLink = styled(NavLink)`
-  max-width: 100%;
-  text-decoration: none;
-`;

packages/core/upload/admin/src/components/FolderList/FolderList.js

@@ -13,7 +13,12 @@ import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
 import { useQueryParams } from '@strapi/helper-plugin';
 import Pencil from '@strapi/icons/Pencil';
 
-import { FolderCard, FolderCardBody, FolderCardCheckbox, FolderCardLink } from '../FolderCard';
+import {
+  FolderCard,
+  FolderCardBody,
+  FolderCardCheckbox,
+  FolderCardBodyAction,
+} from '../FolderCard';
 import { FolderDefinition } from '../../constants';
 
 const CardTitle = styled(Typography).attrs({
@@ -73,7 +78,7 @@ export const FolderList = ({
                 size={size}
               >
                 <FolderCardBody>
-                  <FolderCardLink to={url}>
+                  <FolderCardBodyAction to={url}>
                     <Flex as="h2" direction="column" alignItems="start">
                       <CardTitle>
                         {folder.name}
@@ -84,7 +89,7 @@ export const FolderList = ({
                         {folder.children.count} folder, {folder.files.count} assets
                       </Typography>
                     </Flex>
-                  </FolderCardLink>
+                  </FolderCardBodyAction>
                 </FolderCardBody>
               </FolderCard>
             </GridItem>