Show additionalToolbarItems in ChooseFileDialog (#1582)

The `additionalToolbarItems` were only shown inside the `DamPage`, but
not in the `ChooseFileDialog`. To fix this, we add a
`additionalToolbarItems` option to `DamConfigProvider` that works both
inside the DAM and for the DAM blocks. We also deprecate the
`additionalToolbarItems` prop of `DamPage` in favor of this option.

.changeset/fifty-chairs-help.md

@@ -0,0 +1,31 @@
+---
+"@comet/cms-admin": patch
+---
+
+Show `additionalToolbarItems` in `ChooseFileDialog`
+
+The `additionalToolbarItems` were only shown inside the `DamPage`, but not in the `ChooseFileDialog`.
+To fix this, use the `additionalToolbarItems` option in `DamConfigProvider`.
+The `additionalToolbarItems` prop of `DamPage` has been deprecated in favor of this option.
+
+**Previously:**
+
+```tsx
+<DamPage
+    // ...
+    additionalToolbarItems={<ImportFromExternalDam />}
+/>
+```
+
+**Now:**
+
+```tsx
+<DamConfigProvider
+    value={{
+        // ...
+        additionalToolbarItems: <ImportFromExternalDam />,
+    }}
+>
+    {/*...*/}
+</DamConfigProvider>
+```

demo/admin/src/App.tsx

@@ -89,7 +89,7 @@ class App extends React.Component {
                         resolveSiteConfigForScope: (configs: Record<string, SiteConfig>, scope: ContentScope) => configs[scope.domain],
                     }}
                 >
-                    <DamConfigProvider value={{ scopeParts: ["domain"] }}>
+                    <DamConfigProvider value={{ scopeParts: ["domain"], additionalToolbarItems: <ImportFromUnsplash /> }}>
                         <IntlProvider locale="en" messages={getMessages()}>
                             <LocaleProvider resolveLocaleForScope={(scope: ContentScope) => scope.domain}>
                                 <MuiThemeProvider theme={theme}>
@@ -173,7 +173,6 @@ class App extends React.Component {
                                                                                                         variant="toolbar"
                                                                                                     />
                                                                                                 )}
-                                                                                                additionalToolbarItems={<ImportFromUnsplash />}
                                                                                             />
                                                                                         )}
                                                                                     />

packages/admin/cms-admin/src/dam/DamPage.tsx

@@ -10,10 +10,14 @@ import { ContentScopeIndicator } from "../contentScope/ContentScopeIndicator";
 import { ContentScopeInterface, useContentScope } from "../contentScope/Provider";
 import { useContentScopeConfig } from "../contentScope/useContentScopeConfig";
 import { DamScopeProvider } from "./config/DamScopeProvider";
+import { useDamConfig } from "./config/useDamConfig";
 import { DamTable } from "./DamTable";
 
 type Props = {
     renderContentScopeIndicator?: (scope: ContentScopeInterface) => React.ReactNode;
+    /**
+     * @deprecated Use `additionalToolbarItems` option in `DamConfigProvider` instead
+     */
     additionalToolbarItems?: React.ReactNode;
 };
 
@@ -53,11 +57,15 @@ function DamPage({ renderContentScopeIndicator = defaultRenderContentScopeIndica
     const routeMatch = useRouteMatch();
     const damRouteLocation = routeMatch.url.replace(match.url, "");
     useContentScopeConfig({ redirectPathAfterChange: damRouteLocation });
+    const damConfig = useDamConfig();
 
     return (
         <DamScopeProvider>
             <DamTableWrapper>
-                <DamTable contentScopeIndicator={renderContentScopeIndicator(scope)} additionalToolbarItems={additionalToolbarItems} />
+                <DamTable
+                    contentScopeIndicator={renderContentScopeIndicator(scope)}
+                    additionalToolbarItems={damConfig.additionalToolbarItems ?? additionalToolbarItems}
+                />
             </DamTableWrapper>
         </DamScopeProvider>
     );

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

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

packages/admin/cms-admin/src/form/file/chooseFile/ChooseFileDialog.tsx

@@ -114,6 +114,7 @@ export const ChooseFileDialog = ({ open, onClose, onChooseFile, allowedMimetypes
                             hideContextMenu={true}
                             hideMultiselect={true}
                             hideArchiveFilter={true}
+                            additionalToolbarItems={damConfig.additionalToolbarItems}
                         />
                     </SubRoute>
                 </MemoryRouter>