ML: Refactor AssetMeta into ContextInfo to reuse it for folders

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Typography } from '@strapi/design-system/Typography';
+
+export const ContextInfo = ({ blocks }) => {
+  return (
+    <Box
+      hasRadius
+      paddingLeft={6}
+      paddingRight={6}
+      paddingTop={4}
+      paddingBottom={4}
+      background="neutral100"
+    >
+      <Grid gap={4}>
+        {blocks.map(({ label, value }) => (
+          <GridItem col={6} xs={12} key={label}>
+            <Stack spacing={1}>
+              <Typography variant="sigma" textColor="neutral600">
+                {label}
+              </Typography>
+              <Typography variant="pi" textColor="neutral700">
+                {value}
+              </Typography>
+            </Stack>
+          </GridItem>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+ContextInfo.propTypes = {
+  blocks: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string,
+    })
+  ).isRequired,
+};

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

@@ -0,0 +1 @@
+export { ContextInfo } from './ContextInfo';

packages/core/upload/admin/src/components/ContextInfo/tests/ContextInfo.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { render } from '@testing-library/react';
+
+import { ContextInfo } from '../index';
+
+describe('ContextInfo', () => {
+  it('renders', () => {
+    const { container } = render(
+      <ThemeProvider theme={lightTheme}>
+        <ContextInfo
+          blocks={[
+            {
+              label: 'Label 1',
+              value: 'value1',
+            },
+
+            {
+              label: 'Label 2',
+              value: 'value2',
+            },
+
+            {
+              label: 'Label 3',
+              value: 'value3',
+            },
+          ]}
+        />
+      </ThemeProvider>
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

packages/core/upload/admin/src/components/ContextInfo/tests/__snapshots__/ContextInfo.test.js.snap

@@ -0,0 +1,182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContextInfo renders 1`] = `
+.c6 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c0 {
+  background: #f6f6f9;
+  padding-top: 16px;
+  padding-right: 24px;
+  padding-bottom: 16px;
+  padding-left: 24px;
+  border-radius: 4px;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c3 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c3 > * + * {
+  margin-top: 4px;
+}
+
+.c1 {
+  display: grid;
+  grid-template-columns: repeat(12,1fr);
+  gap: 16px;
+}
+
+.c2 {
+  grid-column: span 6;
+  max-width: 100%;
+}
+
+.c4 {
+  color: #666687;
+  font-weight: 600;
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  text-transform: uppercase;
+}
+
+.c5 {
+  color: #4a4a6a;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+@media (max-width:68.75rem) {
+  .c2 {
+    grid-column: span;
+  }
+}
+
+@media (max-width:34.375rem) {
+  .c2 {
+    grid-column: span 12;
+  }
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <div
+        class="c2"
+      >
+        <div
+          class=""
+        >
+          <div
+            class="c3"
+            spacing="1"
+          >
+            <span
+              class="c4"
+            >
+              Label 1
+            </span>
+            <span
+              class="c5"
+            >
+              value1
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="c2"
+      >
+        <div
+          class=""
+        >
+          <div
+            class="c3"
+            spacing="1"
+          >
+            <span
+              class="c4"
+            >
+              Label 2
+            </span>
+            <span
+              class="c5"
+            >
+              value2
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="c2"
+      >
+        <div
+          class=""
+        >
+          <div
+            class="c3"
+            spacing="1"
+          >
+            <span
+              class="c4"
+            >
+              Label 3
+            </span>
+            <span
+              class="c5"
+            >
+              value3
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="c6"
+  >
+    <p
+      aria-live="polite"
+      aria-relevant="all"
+      id="live-region-log"
+      role="log"
+    />
+    <p
+      aria-live="polite"
+      aria-relevant="all"
+      id="live-region-status"
+      role="status"
+    />
+    <p
+      aria-live="assertive"
+      aria-relevant="all"
+      id="live-region-alert"
+      role="alert"
+    />
+  </div>
+</div>
+`;

packages/core/upload/admin/src/components/EditAssetDialog/AssetMeta.js

@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Typography } from '@strapi/design-system/Typography';
-import getTrad from '../../utils/getTrad';
-
-export const AssetMeta = ({ size, date, dimension, extension }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Box
-      hasRadius
-      paddingLeft={6}
-      paddingRight={6}
-      paddingTop={4}
-      paddingBottom={4}
-      background="neutral100"
-    >
-      <Grid gap={4}>
-        <GridItem col={6} xs={12}>
-          <Stack spacing={1}>
-            <Typography variant="sigma" textColor="neutral600">
-              {formatMessage({ id: getTrad('modal.file-details.size'), defaultMessage: 'Size' })}
-            </Typography>
-            <Typography variant="pi" textColor="neutral700">
-              {size}
-            </Typography>
-          </Stack>
-        </GridItem>
-        <GridItem col={6} xs={12}>
-          <Stack spacing={1}>
-            <Typography variant="sigma" textColor="neutral600">
-              {formatMessage({ id: getTrad('modal.file-details.date'), defaultMessage: 'Date' })}
-            </Typography>
-            <Typography variant="pi" textColor="neutral700">
-              {date}
-            </Typography>
-          </Stack>
-        </GridItem>
-        <GridItem col={6} xs={12}>
-          <Stack spacing={1}>
-            <Typography variant="sigma" textColor="neutral600">
-              {formatMessage({
-                id: getTrad('modal.file-details.dimensions'),
-                defaultMessage: 'Dimensions',
-              })}
-            </Typography>
-            <Typography variant="pi" textColor="neutral700">
-              {dimension}
-            </Typography>
-          </Stack>
-        </GridItem>
-        <GridItem col={6} xs={12}>
-          <Stack spacing={1}>
-            <Typography variant="sigma" textColor="neutral600">
-              {formatMessage({
-                id: getTrad('modal.file-details.extension'),
-                defaultMessage: 'Extension',
-              })}
-            </Typography>
-
-            <Typography
-              textColor="neutral700"
-              textTransform="uppercase"
-              fontSize={1}
-              lineHeight={3}
-            >
-              {extension}
-            </Typography>
-          </Stack>
-        </GridItem>
-      </Grid>
-    </Box>
-  );
-};
-
-AssetMeta.propTypes = {
-  size: PropTypes.string.isRequired,
-  date: PropTypes.string.isRequired,
-  dimension: PropTypes.string.isRequired,
-  extension: PropTypes.string.isRequired,
-};

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

@@ -24,7 +24,7 @@ import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
 import { Formik } from 'formik';
 import * as yup from 'yup';
 import { PreviewBox } from './PreviewBox';
-import { AssetMeta } from './AssetMeta';
+import { ContextInfo } from '../ContextInfo';
 import { getTrad } from '../../utils';
 import formatBytes from '../../utils/formatBytes';
 import { useEditAsset } from '../../hooks/useEditAsset';
@@ -138,13 +138,41 @@ export const EditAssetDialog = ({
               <GridItem xs={12} col={6}>
                 <Form noValidate>
                   <Stack spacing={3}>
-                    <AssetMeta
-                      size={formatBytes(asset.size)}
-                      dimension={
-                        asset.height && asset.width ? `${asset.width}✕${asset.height}` : ''
-                      }
-                      date={formatDate(new Date(asset.createdAt))}
-                      extension={getFileExtension(asset.ext)}
+                    <ContextInfo
+                      blocks={[
+                        {
+                          label: formatMessage({
+                            id: getTrad('modal.file-details.size'),
+                            defaultMessage: 'Size',
+                          }),
+                          value: formatBytes(asset.size),
+                        },
+
+                        {
+                          label: formatMessage({
+                            id: getTrad('modal.file-details.dimensions'),
+                            defaultMessage: 'Dimensions',
+                          }),
+                          value:
+                            asset.height && asset.width ? `${asset.width}✕${asset.height}` : null,
+                        },
+
+                        {
+                          label: formatMessage({
+                            id: getTrad('modal.file-details.date'),
+                            defaultMessage: 'Date',
+                          }),
+                          value: formatDate(new Date(asset.createdAt)),
+                        },
+
+                        {
+                          label: formatMessage({
+                            id: getTrad('modal.file-details.extension'),
+                            defaultMessage: 'Extension',
+                          }),
+                          value: getFileExtension(asset.ext),
+                        },
+                      ]}
                     />
 
                     <TextInput