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);