From c3fcdc36b19283569d663c6b0313e7bc4df99b49 Mon Sep 17 00:00:00 2001 From: Johannes Obermair Date: Mon, 26 Feb 2024 16:03:41 +0100 Subject: [PATCH 1/5] Add import source as column in DAM grid The import source column is only shown if `importSourceTypeLabels` is provided via `DamConfigProvider`. This is done to not show the column if no external DAMs are supported. --- .changeset/light-candles-sparkle.md | 20 ++++++++++++++ demo/admin/src/App.tsx | 12 +++++++-- .../src/dam/DataGrid/FolderDataGrid.gql.ts | 1 + .../src/dam/DataGrid/FolderDataGrid.tsx | 27 ++++++++++++++++++- .../src/dam/config/DamConfigContext.tsx | 1 + 5 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 .changeset/light-candles-sparkle.md diff --git a/.changeset/light-candles-sparkle.md b/.changeset/light-candles-sparkle.md new file mode 100644 index 0000000000..184e4af789 --- /dev/null +++ b/.changeset/light-candles-sparkle.md @@ -0,0 +1,20 @@ +--- +"@comet/cms-admin": minor +--- + +Show DAM import source in grid + +To show the "Source" column in the DAM's data grid, provide `importSourceTypeLabels` in `DamConfigProvider`: + +```tsx +, + }, + }} +> + ... + +``` diff --git a/demo/admin/src/App.tsx b/demo/admin/src/App.tsx index b19426879f..3cc26e5544 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,15 @@ class App extends React.Component { resolveSiteConfigForScope: (configs, scope: ContentScope) => configs[scope.domain], }} > - }}> + , + importSourceTypeLabels: { + unsplash: , + }, + }} + > 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..03d44284ec 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 { importSourceTypeLabels } = 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,26 @@ const FolderDataGrid = ({ hideSortIcons: true, disableColumnMenu: true, }, + { + field: "importSourceType", + headerName: intl.formatMessage({ + id: "comet.dam.file.importSourceType", + defaultMessage: "Source", + }), + renderCell: ({ row }) => { + if (row.__typename === "DamFile") { + if (row.importSourceType) { + return importSourceTypeLabels?.[row.importSourceType]; + } else { + return ; + } + } + }, + // TODO enable sorting/filtering in API + sortable: false, + hideSortIcons: true, + disableColumnMenu: true, + }, { field: "size", headerName: intl.formatMessage({ @@ -463,6 +487,7 @@ const FolderDataGrid = ({ selectionModel={Array.from(damSelectionActionsApi.selectionMap.keys())} onSelectionModelChange={handleSelectionModelChange} autoHeight={true} + initialState={{ columns: { columnVisibilityModel: { importSourceType: importSourceTypeLabels !== 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..c6515731fe 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; + importSourceTypeLabels?: Record; } export const DamConfigContext = React.createContext(undefined); From 18666ab243671623993e16e1dc0bb2131e90ebfd Mon Sep 17 00:00:00 2001 From: Johannes Obermair Date: Tue, 27 Feb 2024 10:03:04 +0100 Subject: [PATCH 2/5] Remove import source for "internal" assets --- packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx index 03d44284ec..c2a011c061 100644 --- a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx +++ b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx @@ -386,8 +386,6 @@ const FolderDataGrid = ({ if (row.__typename === "DamFile") { if (row.importSourceType) { return importSourceTypeLabels?.[row.importSourceType]; - } else { - return ; } } }, From 73fd1ce9808a8aaf81d31ed36f6174fb31821fbe Mon Sep 17 00:00:00 2001 From: Johannes Obermair Date: Tue, 27 Feb 2024 10:07:54 +0100 Subject: [PATCH 3/5] Change to `importSources` object to allow future extensions --- .changeset/light-candles-sparkle.md | 8 +++++--- demo/admin/src/App.tsx | 6 ++++-- .../admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx | 8 ++++---- .../admin/cms-admin/src/dam/config/DamConfigContext.tsx | 2 +- 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/.changeset/light-candles-sparkle.md b/.changeset/light-candles-sparkle.md index 184e4af789..32c088be01 100644 --- a/.changeset/light-candles-sparkle.md +++ b/.changeset/light-candles-sparkle.md @@ -4,14 +4,16 @@ Show DAM import source in grid -To show the "Source" column in the DAM's data grid, provide `importSourceTypeLabels` in `DamConfigProvider`: +To show the "Source" column in the DAM's data grid, provide `importSources` in `DamConfigProvider`: ```tsx , + importSources: { + unsplash: { + label: , + }, }, }} > diff --git a/demo/admin/src/App.tsx b/demo/admin/src/App.tsx index 3cc26e5544..8b52049203 100644 --- a/demo/admin/src/App.tsx +++ b/demo/admin/src/App.tsx @@ -69,8 +69,10 @@ class App extends React.Component { value={{ scopeParts: ["domain"], additionalToolbarItems: , - importSourceTypeLabels: { - unsplash: , + importSources: { + unsplash: { + label: , + }, }, }} > diff --git a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx index c2a011c061..e0131b9730 100644 --- a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx +++ b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx @@ -87,7 +87,7 @@ const FolderDataGrid = ({ const damSelectionActionsApi = useDamSelectionApi(); const scope = useDamScope(); const snackbarApi = useSnackbarApi(); - const { importSourceTypeLabels } = useDamConfig(); + const { importSources } = useDamConfig(); const [redirectedToId, setRedirectedToId] = useStoredState("FolderDataGrid-redirectedToId", null, window.sessionStorage); @@ -384,8 +384,8 @@ const FolderDataGrid = ({ }), renderCell: ({ row }) => { if (row.__typename === "DamFile") { - if (row.importSourceType) { - return importSourceTypeLabels?.[row.importSourceType]; + if (row.importSourceType && importSources?.[row.importSourceType]) { + return importSources[row.importSourceType].label; } } }, @@ -485,7 +485,7 @@ const FolderDataGrid = ({ selectionModel={Array.from(damSelectionActionsApi.selectionMap.keys())} onSelectionModelChange={handleSelectionModelChange} autoHeight={true} - initialState={{ columns: { columnVisibilityModel: { importSourceType: importSourceTypeLabels !== undefined } } }} + 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 c6515731fe..947bf1543b 100644 --- a/packages/admin/cms-admin/src/dam/config/DamConfigContext.tsx +++ b/packages/admin/cms-admin/src/dam/config/DamConfigContext.tsx @@ -6,7 +6,7 @@ export interface DamConfig { enableLicenseFeature?: boolean; requireLicense?: boolean; additionalToolbarItems?: React.ReactNode; - importSourceTypeLabels?: Record; + importSources?: Record; } export const DamConfigContext = React.createContext(undefined); From 0cd30d465d6ec21a1ae8cc9d7f687fa37ee16c32 Mon Sep 17 00:00:00 2001 From: Johannes Obermair Date: Wed, 28 Feb 2024 10:15:06 +0100 Subject: [PATCH 4/5] Use `isFile` type guard --- packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx index e0131b9730..ae45ffbd86 100644 --- a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx +++ b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx @@ -383,7 +383,7 @@ const FolderDataGrid = ({ defaultMessage: "Source", }), renderCell: ({ row }) => { - if (row.__typename === "DamFile") { + if (isFile(row)) { if (row.importSourceType && importSources?.[row.importSourceType]) { return importSources[row.importSourceType].label; } From 0fc2cb36257c3b56514dd7910c5385a5ee90db82 Mon Sep 17 00:00:00 2001 From: Johannes Obermair Date: Wed, 28 Feb 2024 10:15:43 +0100 Subject: [PATCH 5/5] Merge ifs --- .../admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx index ae45ffbd86..818217212a 100644 --- a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx +++ b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx @@ -383,10 +383,8 @@ const FolderDataGrid = ({ defaultMessage: "Source", }), renderCell: ({ row }) => { - if (isFile(row)) { - if (row.importSourceType && importSources?.[row.importSourceType]) { - return importSources[row.importSourceType].label; - } + if (isFile(row) && row.importSourceType && importSources?.[row.importSourceType]) { + return importSources[row.importSourceType].label; } }, // TODO enable sorting/filtering in API