COM-357: Add import source as column in DAM grid

.changeset/light-candles-sparkle.md

@@ -0,0 +1,22 @@
+---
+"@comet/cms-admin": minor
+---
+
+Show DAM import source in grid
+
+To show the "Source" column in the DAM's data grid, provide `importSources` in `DamConfigProvider`:
+
+```tsx
+<DamConfigProvider
+    value={{
+        ...
+        importSources: {
+            unsplash: {
+                label: <FormattedMessage id="dam.importSource.unsplash.label" defaultMessage="Unsplash" />,
+            },
+        },
+    }}
+>
+    ...
+</DamConfigProvider>
+```

demo/admin/src/App.tsx

@@ -29,7 +29,7 @@ import * as React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import * as ReactDOM from "react-dom";
-import { IntlProvider } from "react-intl";
+import { FormattedMessage, IntlProvider } from "react-intl";
 import { Route, Switch } from "react-router-dom";
 
 import MasterHeader from "./common/MasterHeader";
@@ -65,7 +65,17 @@ class App extends React.Component {
                             resolveSiteConfigForScope: (configs, scope: ContentScope) => configs[scope.domain],
                         }}
                     >
-                        <DamConfigProvider value={{ scopeParts: ["domain"], additionalToolbarItems: <ImportFromUnsplash /> }}>
+                        <DamConfigProvider
+                            value={{
+                                scopeParts: ["domain"],
+                                additionalToolbarItems: <ImportFromUnsplash />,
+                                importSources: {
+                                    unsplash: {
+                                        label: <FormattedMessage id="dam.importSource.unsplash.label" defaultMessage="Unsplash" />,
+                                    },
+                                },
+                            }}
+                        >
                             <IntlProvider locale="en" messages={getMessages()}>
                                 <LocaleProvider resolveLocaleForScope={(scope: ContentScope) => scope.domain}>
                                     <MuiThemeProvider theme={theme}>

packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.gql.ts

@@ -31,6 +31,7 @@ export const damFileTableFragment = gql`
             ...DamFileThumbnail
         }
         updatedAt
+        importSourceType
     }
     ${damFileThumbnailFragment}
 `;

packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx

@@ -19,6 +19,7 @@ import { useDebouncedCallback } from "use-debounce";
 
 import { GQLDamItemType } from "../../graphql.generated";
 import { useDamAcceptedMimeTypes } from "../config/useDamAcceptedMimeTypes";
+import { useDamConfig } from "../config/useDamConfig";
 import { useDamScope } from "../config/useDamScope";
 import { DamConfig, DamFilter } from "../DamTable";
 import AddFolder from "../FolderForm/AddFolder";
@@ -30,8 +31,10 @@ import DamContextMenu from "./DamContextMenu";
 import { useDamFileUpload } from "./fileUpload/useDamFileUpload";
 import { damFolderQuery, damItemListPosition, damItemsListQuery } from "./FolderDataGrid.gql";
 import {
+    GQLDamFileTableFragment,
     GQLDamFolderQuery,
     GQLDamFolderQueryVariables,
+    GQLDamFolderTableFragment,
     GQLDamItemListPositionQuery,
     GQLDamItemListPositionQueryVariables,
     GQLDamItemsListQuery,
@@ -84,6 +87,7 @@ const FolderDataGrid = ({
     const damSelectionActionsApi = useDamSelectionApi();
     const scope = useDamScope();
     const snackbarApi = useSnackbarApi();
+    const { importSources } = useDamConfig();
 
     const [redirectedToId, setRedirectedToId] = useStoredState<string | null>("FolderDataGrid-redirectedToId", null, window.sessionStorage);
 
@@ -338,7 +342,7 @@ const FolderDataGrid = ({
         return "";
     };
 
-    const dataGridColumns: GridColumns = [
+    const dataGridColumns: GridColumns<GQLDamFileTableFragment | GQLDamFolderTableFragment> = [
         {
             field: "name",
             headerName: intl.formatMessage({
@@ -372,6 +376,22 @@ const FolderDataGrid = ({
             hideSortIcons: true,
             disableColumnMenu: true,
         },
+        {
+            field: "importSourceType",
+            headerName: intl.formatMessage({
+                id: "comet.dam.file.importSourceType",
+                defaultMessage: "Source",
+            }),
+            renderCell: ({ row }) => {
+                if (isFile(row) && row.importSourceType && importSources?.[row.importSourceType]) {
+                    return importSources[row.importSourceType].label;
+                }
+            },
+            // TODO enable sorting/filtering in API
+            sortable: false,
+            hideSortIcons: true,
+            disableColumnMenu: true,
+        },
         {
             field: "size",
             headerName: intl.formatMessage({
@@ -463,6 +483,7 @@ const FolderDataGrid = ({
                     selectionModel={Array.from(damSelectionActionsApi.selectionMap.keys())}
                     onSelectionModelChange={handleSelectionModelChange}
                     autoHeight={true}
+                    initialState={{ columns: { columnVisibilityModel: { importSourceType: importSources !== undefined } } }}
                 />
             </sc.FolderOuterHoverHighlight>
             <DamSelectionFooter open={damSelectionActionsApi.selectionMap.size > 0} />

packages/admin/cms-admin/src/dam/config/DamConfigContext.tsx

@@ -6,6 +6,7 @@ export interface DamConfig {
     enableLicenseFeature?: boolean;
     requireLicense?: boolean;
     additionalToolbarItems?: React.ReactNode;
+    importSources?: Record<string, { label: React.ReactNode }>;
 }
 
 export const DamConfigContext = React.createContext<DamConfig | undefined>(undefined);