diff --git a/.changeset/light-candles-sparkle.md b/.changeset/light-candles-sparkle.md
new file mode 100644
index 0000000000..32c088be01
--- /dev/null
+++ b/.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
+,
+ },
+ },
+ }}
+>
+ ...
+
+```
diff --git a/demo/admin/src/App.tsx b/demo/admin/src/App.tsx
index b19426879f..8b52049203 100644
--- a/demo/admin/src/App.tsx
+++ b/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],
}}
>
- }}>
+ ,
+ importSources: {
+ unsplash: {
+ label: ,
+ },
+ },
+ }}
+ >
scope.domain}>
diff --git a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.gql.ts b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.gql.ts
index a5448a423b..b8bf3b00f1 100644
--- a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.gql.ts
+++ b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.gql.ts
@@ -31,6 +31,7 @@ export const damFileTableFragment = gql`
...DamFileThumbnail
}
updatedAt
+ importSourceType
}
${damFileThumbnailFragment}
`;
diff --git a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx
index 256c594359..818217212a 100644
--- a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx
+++ b/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("FolderDataGrid-redirectedToId", null, window.sessionStorage);
@@ -338,7 +342,7 @@ const FolderDataGrid = ({
return "";
};
- const dataGridColumns: GridColumns = [
+ const dataGridColumns: GridColumns = [
{
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 } } }}
/>
0} />
diff --git a/packages/admin/cms-admin/src/dam/config/DamConfigContext.tsx b/packages/admin/cms-admin/src/dam/config/DamConfigContext.tsx
index 05c86e2c4b..947bf1543b 100644
--- a/packages/admin/cms-admin/src/dam/config/DamConfigContext.tsx
+++ b/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;
}
export const DamConfigContext = React.createContext(undefined);