show selected items in internal links overlay

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/Item.js

@@ -8,18 +8,20 @@ import type {ItemButtonConfig} from './types';
 import itemStyles from './item.scss';
 
 type Props = {
-    id: string | number,
-    children: string,
     active: boolean,
-    hasChildren: boolean,
     buttons?: Array<ItemButtonConfig>,
+    children: string,
+    hasChildren: boolean,
+    id: string | number,
     onClick?: (id: string | number) => void,
+    selected: boolean,
 };
 
 export default class Item extends React.Component<Props> {
     static defaultProps = {
         active: false,
         hasChildren: false,
+        selected: false,
     };
 
     handleClick = () => {
@@ -45,12 +47,13 @@ export default class Item extends React.Component<Props> {
     };
 
     render() {
-        const {children, active, hasChildren} = this.props;
+        const {children, active, hasChildren, selected} = this.props;
 
         const itemClass = classNames(
             itemStyles.item,
             {
                 [itemStyles.active]: active,
+                [itemStyles.selected]: selected,
             }
         );
 

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/item.scss

@@ -45,7 +45,8 @@ $itemColorHover: $white;
     }
 }
 
-.item:hover {
+.item:hover,
+.item.selected {
     .button {
         visibility: visible;
     }

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/tests/Item.test.js

@@ -0,0 +1,12 @@
+// @flow
+import React from 'react';
+import {render} from 'enzyme';
+import Item from '../Item';
+
+test('Should render item as not selected by default', () => {
+    expect(render(<Item id={1}>Test</Item>)).toMatchSnapshot();
+});
+
+test('Should render item as selected', () => {
+    expect(render(<Item id={1} selected={true}>Test</Item>)).toMatchSnapshot();
+});

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/tests/__snapshots__/ColumnList.test.js.snap

@@ -47,7 +47,7 @@ exports[`The ColumnList component should render in a non-scrolling container 1`]
         class="column"
       >
         <div
-          class="item"
+          class="item selected"
         >
           <span
             class="buttons"
@@ -461,7 +461,7 @@ exports[`The ColumnList component should render in a scrolling container 1`] = `
         class="column scrolling"
       >
         <div
-          class="item"
+          class="item selected"
         >
           <span
             class="buttons"

src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/tests/__snapshots__/Item.test.js.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render item as not selected by default 1`] = `
+<div
+  class="item"
+>
+  <span
+    class="buttons"
+  />
+  <span
+    class="text"
+  >
+    <div
+      aria-label="Test"
+      class="croppedText"
+      title="Test"
+    >
+      <div
+        aria-hidden="true"
+        class="front"
+      >
+        Te
+      </div>
+      <div
+        aria-hidden="true"
+        class="back"
+      >
+        <span>
+          st
+        </span>
+      </div>
+      <div
+        class="whole"
+      >
+        Test
+      </div>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`Should render item as selected 1`] = `
+<div
+  class="item selected"
+>
+  <span
+    class="buttons"
+  />
+  <span
+    class="text"
+  >
+    <div
+      aria-label="Test"
+      class="croppedText"
+      title="Test"
+    >
+      <div
+        aria-hidden="true"
+        class="front"
+      >
+        Te
+      </div>
+      <div
+        aria-hidden="true"
+        class="back"
+      >
+        <span>
+          st
+        </span>
+      </div>
+      <div
+        class="whole"
+      >
+        Test
+      </div>
+    </div>
+  </span>
+</div>
+`;

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Datagrid/adapters/ColumnListAdapter.js

@@ -111,7 +111,7 @@ export default class ColumnListAdapter extends AbstractAdapter {
     }
 
     render() {
-        const {loading, onAddClick, onItemClick, onItemSelectionChange} = this.props;
+        const {loading, onAddClick, onItemClick, onItemSelectionChange, selections} = this.props;
 
         const buttons = [];
 
@@ -150,10 +150,11 @@ export default class ColumnListAdapter extends AbstractAdapter {
                             {items.map((item: Object) => (
                                 // TODO: Don't access properties like "hasChildren" or "title" directly
                                 <ColumnList.Item
+                                    active={this.activeItemPath.includes(item.id)}
+                                    hasChildren={item.hasChildren}
                                     id={item.id}
                                     key={item.id}
-                                    hasChildren={item.hasChildren}
-                                    active={this.activeItemPath.includes(item.id)}
+                                    selected={selections.includes(item.id)}
                                 >
                                     {item.title}
                                 </ColumnList.Item>

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Datagrid/tests/adapters/ColumnListAdapter.test.js

@@ -126,7 +126,7 @@ test('Render data with selection', () => {
             page={undefined}
             pageCount={0}
             schema={{}}
-            selections={[]}
+            selections={[1]}
         />
     );
 

src/Sulu/Bundle/AdminBundle/Resources/js/containers/Datagrid/tests/adapters/__snapshots__/ColumnListAdapter.test.js.snap

@@ -302,7 +302,7 @@ exports[`Render data with selection 1`] = `
           class="column"
         >
           <div
-            class="item"
+            class="item selected"
           >
             <span
               class="buttons"

src/Sulu/Bundle/ContentBundle/Controller/PageController.php

@@ -38,7 +38,7 @@ public function cgetAction(Request $request)
             $request->query->set('fields', 'title');
         }
 
-        return $this->replaceRelationNameInResponse(parent::cgetAction($request));
+        return $this->transformResponse(parent::cgetAction($request));
     }
 
     protected function cgetContent(Request $request)
@@ -59,16 +59,27 @@ protected function cgetContent(Request $request)
         return parent::cgetContent($request);
     }
 
-    private function replaceRelationNameInResponse(Response $response)
+    private function transformResponse(Response $response)
     {
         $responseContent = json_decode($response->getContent(), true);
+
         if (array_key_exists('nodes', $responseContent['_embedded'])) {
+            // sometime the NodeController does not listen the relation name set in this controller,
+            // so we replace it on our own.
             $responseContent['_embedded']['pages'] = $responseContent['_embedded']['nodes'];
             unset($responseContent['_embedded']['nodes']);
-
-            $response->setContent(json_encode($responseContent));
         }
 
+        // sometimes the NodeController has an uuid field instead of id, so we replace it
+        array_walk($responseContent['_embedded']['pages'], function(&$node) {
+            if (array_key_exists('uuid', $node)) {
+                $node['id'] = $node['uuid'];
+                unset($node['uuid']);
+            }
+        });
+
+        $response->setContent(json_encode($responseContent));
+
         return $response;
     }
 }

src/Sulu/Bundle/ContentBundle/Resources/js/views/WebspaceOverview/tests/WebspaceOverview.test.js

@@ -8,6 +8,8 @@ jest.mock('sulu-admin-bundle/containers', () => {
         withToolbar: jest.fn((Component) => Component),
         Datagrid: require('sulu-admin-bundle/containers/Datagrid/Datagrid').default,
         DatagridStore: jest.fn(function() {
+            this.selections = [];
+            this.selectionIds = [];
             this.getPage = jest.fn().mockReturnValue(1);
             this.destroy = jest.fn();
             this.sendRequest = jest.fn();

src/Sulu/Bundle/ContentBundle/Tests/Functional/Controller/PageControllerTest.php

@@ -85,9 +85,16 @@ public function testGetFlatResponseWithIds()
 
         $response = json_decode($client->getResponse()->getContent());
         $this->assertCount(2, $response->_embedded->pages);
-        $this->assertEquals('Homepage', $response->_embedded->pages[0]->title);
-        $this->assertEquals('test_io', $response->_embedded->pages[0]->webspaceKey);
-        $this->assertEquals('Homepage', $response->_embedded->pages[1]->title);
-        $this->assertEquals('sulu_io', $response->_embedded->pages[1]->webspaceKey);
+
+        $page1 = $response->_embedded->pages[0];
+        $page2 = $response->_embedded->pages[1];
+        $this->assertEquals('Homepage', $page1->title);
+        $this->assertEquals('test_io', $page1->webspaceKey);
+        $this->assertObjectHasAttribute('id', $page1);
+        $this->assertObjectNotHasAttribute('uuid', $page1);
+        $this->assertEquals('Homepage', $page2->title);
+        $this->assertEquals('sulu_io', $page2->webspaceKey);
+        $this->assertObjectHasAttribute('id', $page2);
+        $this->assertObjectNotHasAttribute('uuid', $page2);
     }
 }