EZP-30524: Rewrite Universal Discovery Widget (#241)

* EZP-30530: Create a base for the new UDW

* EZP-30525: Convert Browse Tab as a standalone ReactJS module

* EZP-30526: Convert Search Tab as a standalone ReactJS module (#204)

* EZP-30825: Convert Bookmarks Tab as a standalone ReactJS module (#205)

* EZP-30527: Convert Create Tab as a standalone ReactJS module (#206)

* EZP-30840: Use dedicated endpoints for fetching data (#218)

* EZP-31043: As an Editor, I want to have breadcrumbs in grid view (#220)

* EZP-30980: As an Editor, I want Create Tab to be permission aware (#223)

* EZP-31065: As a Developer, I want UDW to be configurable (#226)

* EZP-31151: Resizing column does not display name of content item

* EZP-31153: Collapsed column displays the name of the parent

* EZP-31152: Content meta preview should display language name

* EZP-31147: Improve design of UDW's header

* EZP-31146: Align content type icons in UDW

* EZP-31145: Set font-size for content items in UDW's panels

* EZP-31142: Bookmark's button in UDW's content meta preview should keep its position

* EZP-31144: Improve content item title view when in UDW's grid view

* EZP-31196: As a Developer, I want to set alredy selected locations in UDW (#232)

* EZP-31085: As a Developer, I want ContentMetaPreview to be overridable (#233)

* EZP-31032: As an Editor, I want to edit content directly from UDW (#235)

* EZP-31032: As an Editor, I want to edit content directly from UDW

* EZP-31215: Remove old UDW and deprecated code (#237)

* EZP-31215: Remove old UDW and deprecated code

* EZP-31214: As a Developer, I want UDW to be fully translatable (#239)

* EZP-31244: As an Editor, I want to create content on the fly from the Dashboard (#240)

* fixed confirm locations

* renamed tab component to avoid conflict with form builder

* fixed content select in search filters

* fixed css class name

Author: dew326

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-    "plugins": ["react", "prettier"],
+    "plugins": ["react", "prettier", "react-hooks"],
     "extends": ["prettier", "prettier/react", "eslint:recommended", "plugin:react/recommended"],
     "env": {
         "browser": true,
@@ -33,6 +33,10 @@
         "no-extra-boolean-cast": "off",
         "react/jsx-uses-react": "error",
         "react/jsx-uses-vars": "error",
-        "jsx-quotes": ["error", "prefer-double"]
+        "react/require-default-props": "warn",
+        "jsx-quotes": ["error", "prefer-double"],
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "react/no-unused-prop-types": "warn"
     }
 }

Resources/encore/ez.config.js

@@ -1,14 +1,21 @@
 const path = require('path');
 
 module.exports = (Encore) => {
-	Encore.addEntry('ezplatform-admin-ui-modules-udw-js', [
-		path.resolve(__dirname, '../../src/modules/universal-discovery/universal.discovery.module.js'),
-	])
-		.addEntry('ezplatform-admin-ui-modules-mfu-js', [
-			path.resolve(__dirname, '../../src/modules/multi-file-upload/multi.file.upload.module.js'),
-		])
-		.addEntry('ezplatform-admin-ui-modules-subitems-js', [path.resolve(__dirname, '../../src/modules/sub-items/sub.items.module.js')])
-		.addEntry('ezplatform-admin-ui-modules-content-tree-js', [
-			path.resolve(__dirname, '../../src/modules/content-tree/content.tree.module.js'),
-		]);
+    Encore.addEntry('ezplatform-admin-ui-modules-udw-js', [
+        path.resolve(__dirname, '../../src/modules/universal-discovery/universal.discovery.module.js'),
+    ])
+        .addEntry('ezplatform-admin-ui-modules-udw-tabs-js', [
+            path.resolve(__dirname, '../../src/modules/universal-discovery/browse.tab.module.js'),
+            path.resolve(__dirname, '../../src/modules/universal-discovery/bookmarks.tab.module.js'),
+            path.resolve(__dirname, '../../src/modules/universal-discovery/search.tab.module.js'),
+            path.resolve(__dirname, '../../src/modules/universal-discovery/content.create.tab.module.js'),
+            path.resolve(__dirname, '../../src/modules/universal-discovery/content.meta.preview.module.js'),
+        ])
+        .addEntry('ezplatform-admin-ui-modules-mfu-js', [
+            path.resolve(__dirname, '../../src/modules/multi-file-upload/multi.file.upload.module.js'),
+        ])
+        .addEntry('ezplatform-admin-ui-modules-subitems-js', [path.resolve(__dirname, '../../src/modules/sub-items/sub.items.module.js')])
+        .addEntry('ezplatform-admin-ui-modules-content-tree-js', [
+            path.resolve(__dirname, '../../src/modules/content-tree/content.tree.module.js'),
+        ]);
 };

Resources/public/scss/modules/_common.scss

@@ -1,2 +1,3 @@
 @import 'common/popup';
 @import 'common/tooltip.popup';
+@import 'common/thumbnail';

Resources/public/scss/modules/_universal.discovery.scss

@@ -1,25 +1,25 @@
-@import 'universal-discovery/select.content.button';
-@import 'universal-discovery/bookmarks';
-@import 'universal-discovery/content.creator';
-@import 'universal-discovery/content.meta.preview';
-@import 'universal-discovery/content.table.pagination';
-@import 'universal-discovery/content.table.item';
-@import 'universal-discovery/content.table.header';
-@import 'universal-discovery/content.table';
-@import 'universal-discovery/choose.content.type';
-@import 'universal-discovery/choose.language';
-@import 'universal-discovery/create';
-@import 'universal-discovery/finder.tree.leaf';
-@import 'universal-discovery/finder.tree.branch';
+@import 'universal-discovery/main';
+@import 'universal-discovery/tab';
+@import 'universal-discovery/top.menu';
+@import 'universal-discovery/content.create';
+@import 'universal-discovery/content.create.widget';
+@import 'universal-discovery/content.create.button';
+@import 'universal-discovery/sort.switcher';
+@import 'universal-discovery/view.switcher';
+@import 'universal-discovery/menu.button';
+@import 'universal-discovery/tab.selector';
 @import 'universal-discovery/finder';
+@import 'universal-discovery/finder.branch';
+@import 'universal-discovery/finder.leaf';
+@import 'universal-discovery/content.meta.preview';
+@import 'universal-discovery/selected.locations';
+@import 'universal-discovery/selected.locations.item';
+@import 'universal-discovery/grid';
+@import 'universal-discovery/grid.item';
+@import 'universal-discovery/breadcrumbs';
 @import 'universal-discovery/search';
-@import 'universal-discovery/selected.content.item';
-@import 'universal-discovery/selected.content.popup';
-@import 'universal-discovery/selected.content';
-@import 'universal-discovery/panel.bookmarks';
-@import 'universal-discovery/panel.create';
-@import 'universal-discovery/panel.finder';
-@import 'universal-discovery/panel.search';
-@import 'universal-discovery/panel.tab.content';
-@import 'universal-discovery/tab.nav.item';
-@import 'universal-discovery/main';
+@import 'universal-discovery/content.table';
+@import 'universal-discovery/content.table.item';
+@import 'universal-discovery/toggle.selection.button';
+@import 'universal-discovery/filters';
+@import 'universal-discovery/bookmarks.list';

Resources/public/scss/modules/common/thumbnail.scss

@@ -0,0 +1,15 @@
+.c-thumbnail {
+    position: relative;
+
+    &__icon-wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: calculateRem(30px);
+        height: calculateRem(30px);
+        background: $ez-white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

Resources/public/scss/modules/universal-discovery/_bookmarks.list.scss

@@ -0,0 +1,41 @@
+.c-bookmarks-list {
+    width: calculateRem(215px);
+    background-color: $ez-ground-base-medium;
+    overflow: auto;
+    flex-shrink: 0;
+
+    &__item {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        padding: calculateRem(2px) calculateRem(5px);
+
+        &--not-selectable {
+            background-color: $ez-ground-base-dark;
+            cursor: not-allowed;
+        }
+
+        &--marked {
+            background-color: $ez-color-base-medium;
+            color: $ez-white;
+
+            .ez-icon {
+                fill: $ez-white;
+            }
+        }
+    }
+
+    &__item-name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: calculateRem(185px);
+        margin-left: calculateRem(5px);
+    }
+
+    &__spinner-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

Resources/public/scss/modules/universal-discovery/_bookmarks.scss

@@ -0,0 +1,99 @@
+.c-breadcrumbs {
+    display: flex;
+    align-items: center;
+    padding: 0 calculateRem(16px);
+    height: calculateRem(30px);
+
+    &__hidden-list-wrapper {
+        margin-right: 8px;
+        position: relative;
+    }
+
+    &__hidden-list {
+        display: none;
+
+        &--visible {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            z-index: 1;
+            margin-bottom: 0;
+            padding-left: 0;
+            display: block;
+            list-style: none;
+            background-color: $ez-white;
+            box-shadow: 0 calculateRem(4px) calculateRem(6px) 0 rgba(135, 135, 135, 0.35);
+            color: $ez-color-hyperlink;
+            padding: calculateRem(16px);
+        }
+    }
+
+    &__hidden-list-item {
+        padding: calculateRem(4px) 0;
+        white-space: nowrap;
+        max-width: calculateRem(500px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    &__hidden-list-toggler {
+        height: calculateRem(20px);
+        width: calculateRem(26px);
+        border: calculateRem(1px) solid $ez-color-base-medium;
+        border-radius: calculateRem(2px);
+        display: flex;
+        padding: 0;
+        justify-content: center;
+        align-items: center;
+
+        .ez-icon {
+            transform: rotate(90deg);
+            transform-origin: center center;
+            fill: $ez-color-base-medium;
+        }
+
+        &--active {
+            background-color: $ez-color-base-medium;
+
+            .ez-icon {
+                fill: $ez-white;
+            }
+        }
+    }
+
+    &__list-wrapper {
+        width: calc(100% - #{calculateRem(34px)});
+    }
+
+    &__list {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        margin-bottom: 0;
+    }
+
+    &__list-item-text {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        cursor: pointer;
+        color: $ez-color-hyperlink;
+    }
+
+    &__list-item {
+        max-width: calc(100% / 3);
+        display: flex;
+
+        &--last {
+            .c-breadcrumbs__list-item-text {
+                cursor: not-allowed;
+                color: $ez-color-base-medium;
+            }
+        }
+    }
+
+    &__list-item-separator {
+        margin: 0 calculateRem(8px);
+    }
+}