add internal link content type with other datagrid adapter

src/Sulu/Bundle/AdminBundle/Resources/js/components/Overlay/overlay.scss

@@ -1,12 +1,10 @@
 @import '../../containers/Application/colors.scss';
+@import './variables.scss';
 
 $primaryBackground: $concrete;
 $secondaryBackground: $white;
 $borderRadius: 3px;
 
-$headerHeight: 60px;
-$footerHeight: 90px;
-
 $titleColor: $black;
 
 $iconFontSize: 14px;
@@ -41,6 +39,7 @@ $transitionDuration: 300ms;
     will-change: top, opacity;
     transition: top $transitionDuration, opacity $transitionDuration;
     pointer-events: none;
+    max-height: calc(100vh - $overlayMarginBottom);
 
     & > * {
         pointer-events: auto;
@@ -72,23 +71,23 @@ $transitionDuration: 300ms;
 
     header {
         background: $secondaryBackground;
-        height: $headerHeight;
+        height: $overlayHeaderHeight;
         color: $titleColor;
         font-size: 22px;
         font-weight: bold;
         text-align: center;
-        line-height: $headerHeight;
+        line-height: $overlayHeaderHeight;
     }
 
     article {
-        max-height: calc(100vh - $headerHeight - $footerHeight);
+        max-height: calc(100vh - $overlayHeaderHeight - $overlayFooterHeight - $overlayMarginBottom);
         overflow: auto;
         background: $primaryBackground;
     }
 
     footer {
         background: $secondaryBackground;
-        height: $footerHeight;
+        height: $overlayFooterHeight;
         padding: 0 60px;
         display: flex;
         justify-content: space-between;
@@ -101,7 +100,7 @@ $transitionDuration: 300ms;
 
     .icon {
         position: absolute;
-        top: calc(($headerHeight - $iconSize) / 2);
+        top: calc(($overlayHeaderHeight - $iconSize) / 2);
         right: 30px;
         font-size: $iconFontSize;
         width: $iconSize;

src/Sulu/Bundle/AdminBundle/Resources/js/components/Overlay/variables.scss

@@ -0,0 +1,3 @@
+$overlayHeaderHeight: 60px;
+$overlayFooterHeight: 90px;
+$overlayMarginBottom: 100px;

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Assignment/Assignment.js

@@ -9,6 +9,7 @@ import DatagridOverlay from './DatagridOverlay';
 import assignmentStyles from './assignment.scss';
 
 type Props = {|
+    adapter: string,
     displayProperties: Array<string>,
     onChange: (selectedIds: Array<string | number>) => void,
     label?: string,
@@ -93,7 +94,7 @@ export default class Assignment extends React.Component<Props> {
     };
 
     render() {
-        const {displayProperties, icon, label, locale, resourceKey, overlayTitle} = this.props;
+        const {adapter, displayProperties, icon, label, locale, resourceKey, overlayTitle} = this.props;
         const {items, loading} = this.assignmentStore;
         const columns = displayProperties.length;
 
@@ -126,6 +127,7 @@ export default class Assignment extends React.Component<Props> {
                     ))}
                 </MultiItemSelection>
                 <DatagridOverlay
+                    adapter={adapter}
                     locale={locale}
                     onClose={this.handleOverlayClose}
                     onConfirm={this.handleOverlayConfirm}

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Assignment/DatagridOverlay.js

@@ -2,13 +2,15 @@
 import React from 'react';
 import {observable} from 'mobx';
 import type {IObservableValue} from 'mobx'; // eslint-disable-line import/named
+import classNames from 'classnames';
 import Overlay from '../../components/Overlay';
 import Datagrid from '../../containers/Datagrid';
 import DatagridStore from '../../containers/Datagrid/stores/DatagridStore';
 import {translate} from '../../utils';
 import datagridOverlayStyles from './datagridOverlay.scss';
 
 type Props = {|
+    adapter: string,
     locale?: ?IObservableValue<string>,
     onClose: () => void,
     onConfirm: (selectedItems: Array<Object>) => void,
@@ -35,7 +37,7 @@ export default class DatagridOverlay extends React.Component<Props> {
             observableOptions.locale = locale;
         }
 
-        this.datagridStore = new DatagridStore(resourceKey, observableOptions, {});
+        this.datagridStore = new DatagridStore(resourceKey, observableOptions);
 
         preSelectedItems.forEach((preSelectedItem) => {
             this.datagridStore.select(preSelectedItem);
@@ -59,18 +61,24 @@ export default class DatagridOverlay extends React.Component<Props> {
     };
 
     render() {
-        const {onClose, open, title} = this.props;
+        const {adapter, onClose, open, title} = this.props;
+
+        const datagridContainerClass = classNames(
+            datagridOverlayStyles.datagrid,
+            datagridOverlayStyles['adapter-' + adapter]
+        );
 
         return (
             <Overlay
                 confirmText={translate('sulu_admin.confirm')}
                 onClose={onClose}
                 onConfirm={this.handleConfirm}
                 open={open}
+                size="large"
                 title={title}
             >
-                <div className={datagridOverlayStyles.datagrid}>
-                    <Datagrid adapters={['table']} store={this.datagridStore} />
+                <div className={datagridContainerClass}>
+                    <Datagrid adapters={[adapter]} store={this.datagridStore} />
                 </div>
             </Overlay>
         );

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Assignment/datagridOverlay.scss

@@ -1,3 +1,10 @@
+@import '../../components/Overlay/variables.scss';
+
 .datagrid {
     padding: 30px 60px 60px;
 }
+
+.adapter-column_list {
+    padding: 0;
+    height: calc(100vh - $overlayHeaderHeight - $overlayFooterHeight - $overlayMarginBottom);
+}

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Assignment/tests/Assignment.test.js

@@ -37,26 +37,44 @@ beforeEach(() => {
 });
 
 test('Show with default plus icon', () => {
-    expect(render(<Assignment onChange={jest.fn()} resourceKey="snippets" overlayTitle="Assignment" />))
+    expect(render(<Assignment adapter="table" onChange={jest.fn()} resourceKey="snippets" overlayTitle="Assignment" />))
         .toMatchSnapshot();
 });
 
 test('Show with passed label', () => {
     expect(render(
-        <Assignment onChange={jest.fn()} label="Select Snippets" resourceKey="snippets" overlayTitle="Assignment" />
+        <Assignment
+            adapter="column_list"
+            onChange={jest.fn()}
+            label="Select Snippets"
+            resourceKey="snippets"
+            overlayTitle="Assignment"
+        />
     )).toMatchSnapshot();
 });
 
 test('Show with passed icon', () => {
     expect(render(
-        <Assignment onChange={jest.fn()} icon="su-document" resourceKey="snippets" overlayTitle="Assignment" />
+        <Assignment
+            adapter="table"
+            onChange={jest.fn()}
+            icon="su-document"
+            resourceKey="snippets"
+            overlayTitle="Assignment"
+        />
     )).toMatchSnapshot();
 });
 
 test('Pass locale to DatagridOverlay', () => {
     const locale = observable.box('de');
     const assignment = mount(
-        <Assignment onChange={jest.fn()} locale={locale} resourceKey="snippets" overlayTitle="Assignment" />
+        <Assignment
+            adapter="table"
+            onChange={jest.fn()}
+            locale={locale}
+            resourceKey="snippets"
+            overlayTitle="Assignment"
+        />
     );
 
     expect(assignment.find('DatagridOverlay').prop('locale').get()).toEqual('de');
@@ -72,6 +90,7 @@ test('Show with passed values as items in right locale', () => {
 
     expect(render(
         <Assignment
+            adapter="table"
             displayProperties={['id', 'title']}
             onChange={jest.fn()}
             locale={locale}
@@ -85,7 +104,9 @@ test('Show with passed values as items in right locale', () => {
 });
 
 test('Should open an overlay', () => {
-    const assignment = mount(<Assignment onChange={jest.fn()} resourceKey="snippets" overlayTitle="Assignment" />);
+    const assignment = mount(
+        <Assignment adapter="table" onChange={jest.fn()} resourceKey="snippets" overlayTitle="Assignment" />
+    );
 
     assignment.find('Button[icon="su-plus"]').simulate('click');
 
@@ -94,7 +115,14 @@ test('Should open an overlay', () => {
 });
 
 test('Should close an overlay using the close button', () => {
-    const assignment = mount(<Assignment onChange={jest.fn()} resourceKey="snippets" overlayTitle="Assignment" />);
+    const assignment = mount(
+        <Assignment
+            adapter="table"
+            onChange={jest.fn()}
+            resourceKey="snippets"
+            overlayTitle="Assignment"
+        />
+    );
 
     assignment.find('Button[icon="su-plus"]').simulate('click');
 
@@ -108,7 +136,9 @@ test('Should close an overlay using the close button', () => {
 });
 
 test('Should close an overlay using the confirm button', () => {
-    const assignment = mount(<Assignment onChange={jest.fn()} resourceKey="snippets" overlayTitle="Assignment" />);
+    const assignment = mount(
+        <Assignment adapter="table" onChange={jest.fn()} resourceKey="snippets" overlayTitle="Assignment" />
+    );
 
     assignment.find('Button[icon="su-plus"]').simulate('click');
 
@@ -123,7 +153,9 @@ test('Should close an overlay using the confirm button', () => {
 
 test('Should call the onChange callback when clicking the confirm button', () => {
     const changeSpy = jest.fn();
-    const assignment = mount(<Assignment onChange={changeSpy} resourceKey="snippets" overlayTitle="Assignment" />);
+    const assignment = mount(
+        <Assignment adapter="table" onChange={changeSpy} resourceKey="snippets" overlayTitle="Assignment" />
+    );
 
     assignment.find('Button[icon="su-plus"]').simulate('click');
     const datagridStore = assignment.find('DatagridOverlay').instance().datagridStore;
@@ -138,7 +170,9 @@ test('Should call the onChange callback when clicking the confirm button', () =>
 });
 
 test('Should instantiate the DatagridStore with the correct resourceKey and destroy it on unmount', () => {
-    const assignment = mount(<Assignment onChange={jest.fn()} resourceKey="pages" overlayTitle="Assignment" />);
+    const assignment = mount(
+        <Assignment adapter="table" onChange={jest.fn()} resourceKey="pages" overlayTitle="Assignment" />
+    );
 
     assignment.find('Button[icon="su-plus"]').simulate('click');
 
@@ -156,7 +190,13 @@ test('Should instantiate the DatagridStore with the preselected ids', () => {
     });
 
     const assignment = mount(
-        <Assignment onChange={jest.fn()} value={[1, 5, 8]} resourceKey="pages" overlayTitle="Assignment" />
+        <Assignment
+            adapter="table"
+            onChange={jest.fn()}
+            value={[1, 5, 8]}
+            resourceKey="pages"
+            overlayTitle="Assignment"
+        />
     );
 
     assignment.find('Button[icon="su-plus"]').simulate('click');
@@ -178,6 +218,7 @@ test('Should reinstantiate the DatagridStore with the preselected ids when new p
 
     const assignment = mount(
         <Assignment
+            adapter="table"
             onChange={jest.fn()}
             locale={locale}
             value={[1, 5, 8]}
@@ -210,6 +251,7 @@ test('Should not reload items if all new ids have already been loaded', () => {
 
     const assignment = mount(
         <Assignment
+            adapter="table"
             onChange={jest.fn()}
             locale={locale}
             value={[1, 5, 8]}
@@ -241,6 +283,7 @@ test('Should not reinstantiate the DatagridStore with the preselected ids when n
 
     const assignment = mount(
         <Assignment
+            adapter="table"
             onChange={jest.fn()}
             locale={locale}
             value={[1, 5, 8]}
@@ -261,7 +304,13 @@ test('Should not reinstantiate the DatagridStore with the preselected ids when n
 test('Should remove an item when the remove button is clicked', () => {
     const changeSpy = jest.fn();
     const assignment = shallow(
-        <Assignment onChange={changeSpy} resourceKey="snippets" value={[3, 7, 9]} overlayTitle="Assignment" />
+        <Assignment
+            adapter="table"
+            onChange={changeSpy}
+            resourceKey="snippets"
+            value={[3, 7, 9]}
+            overlayTitle="Assignment"
+        />
     );
 
     assignment.find('MultiItemSelection').prop('onItemRemove')(7);
@@ -271,7 +320,13 @@ test('Should remove an item when the remove button is clicked', () => {
 test('Should reorder the items on drag and drop', () => {
     const changeSpy = jest.fn();
     const assignment = shallow(
-        <Assignment onChange={changeSpy} resourceKey="snippets" value={[3, 7, 9]} overlayTitle="Assignment" />
+        <Assignment
+            adapter="table"
+            onChange={changeSpy}
+            resourceKey="snippets"
+            value={[3, 7, 9]}
+            overlayTitle="Assignment"
+        />
     );
 
     assignment.find('MultiItemSelection').prop('onItemsSorted')(1, 2);