Add info alert for dependents and duplicates in DAM

.changeset/perfect-hounds-visit.md

@@ -0,0 +1,5 @@
+---
+"@comet/cms-admin": minor
+---
+
+Add info alert for dependents and duplicates in DAM

packages/admin/cms-admin/src/dam/FileForm/Duplicates.tsx

@@ -1,5 +1,5 @@
 import { gql, useQuery } from "@apollo/client";
-import { FormSection, useStackApi } from "@comet/admin";
+import { Alert, FormSection, useStackApi } from "@comet/admin";
 import { BallTriangle as BallTriangleIcon, Link as LinkIcon, OpenNewTab as OpenNewTabIcon, Reload as ReloadIcon } from "@comet/admin-icons";
 import {
     Button,
@@ -98,6 +98,15 @@ const Duplicates: React.FC<{ fileId: string }> = ({ fileId }) => {
                     </ListItem>
                 )}
             </List>
+            <Alert
+                title={<FormattedMessage id="comet.dam.file.duplicates.info.title" defaultMessage="What are duplicate assets?" />}
+                sx={{ marginTop: 4 }}
+            >
+                <FormattedMessage
+                    id="comet.dam.file.duplicates.info.content"
+                    defaultMessage="Duplicates refer to one or more identical copies of a digital asset stored in the DAM system. The DAM automatically detects identical assets, even if their file names are different, to reduce storage usage."
+                />
+            </Alert>
         </FormSection>
     );
 };

packages/admin/cms-admin/src/dependencies/DependencyList.tsx

@@ -1,5 +1,5 @@
 import { TypedDocumentNode, useApolloClient, useQuery } from "@apollo/client";
-import { GridColDef, messages, Tooltip, useDataGridRemote } from "@comet/admin";
+import { Alert, GridColDef, messages, Tooltip, useDataGridRemote } from "@comet/admin";
 import { ArrowRight, OpenNewTab, Reload } from "@comet/admin-icons";
 import { IconButton, LinearProgress, tablePaginationClasses } from "@mui/material";
 import { LabelDisplayedRowsArgs } from "@mui/material/TablePagination/TablePagination";
@@ -204,6 +204,12 @@ export const DependencyList = ({ query, variables }: DependencyListProps) => {
                     return `${row.id}_${row.rootColumnName}_${row.jsonPath}`;
                 }}
             />
+            <Alert title={<FormattedMessage id="comet.dam.file.dependents.info.title" defaultMessage="What are dependents?" />} sx={{ marginTop: 4 }}>
+                <FormattedMessage
+                    id="comet.dam.file.dependents.info.content"
+                    defaultMessage="Dependents are all pages, snippets and content in which a particular asset is used, linked or included. With this list, it's easy to manage or reorganize the integration of your assets."
+                />
+            </Alert>
         </>
     );
 };