@eeacms/volto-clms-theme 1.0.80 → 1.0.83

package/CHANGELOG.md

@@ -4,8 +4,65 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.0.83](https://github.com/eea/volto-clms-theme/compare/1.0.82...1.0.83)
+
+- new widget to edit the component controlpanel [`#237`](https://github.com/eea/volto-clms-theme/pull/237)
+- use volto-react-table widget [`#238`](https://github.com/eea/volto-clms-theme/pull/238)
+- Bugs n improvements [`#235`](https://github.com/eea/volto-clms-theme/pull/235)
+- Develop [`#234`](https://github.com/eea/volto-clms-theme/pull/234)
+- remove duplicated [`0739aef`](https://github.com/eea/volto-clms-theme/commit/0739aef163cac91233a936c49f488fbc9daec5be)
+- add volto-react-table-widget [`f4b1e99`](https://github.com/eea/volto-clms-theme/commit/f4b1e998e38f31a63b475760d0bf2157451f9af4)
+- fix packages.json [`44848a0`](https://github.com/eea/volto-clms-theme/commit/44848a0e07a0a960dc17ee6d0c08febac320688d)
+- remove unneeded code [`e37e121`](https://github.com/eea/volto-clms-theme/commit/e37e121ca910b4fbaf2f9da80393fc577a6923c7)
+- adjust dependnecies [`a7f67fe`](https://github.com/eea/volto-clms-theme/commit/a7f67fec4c56d09b038ce052e88b04a601da6db3)
+- adjust import [`66bb59a`](https://github.com/eea/volto-clms-theme/commit/66bb59a22a1b623bc6dcf13996c98572b14526db)
+- add VOLTO version to addon tests execution [`a94a491`](https://github.com/eea/volto-clms-theme/commit/a94a4918413aa5a2a75eea14ab837338d24d2e32)
+- fix cart type selector [`47046b0`](https://github.com/eea/volto-clms-theme/commit/47046b0ba02400c572aee981cc52ad481d560b77)
+- reorder cart modal buttons and remove duplicates of dataset titles from modal [`03171f2`](https://github.com/eea/volto-clms-theme/commit/03171f2e7b85878d1fac186130af2dc8a8813937)
+- ESLint fix [`6e4faad`](https://github.com/eea/volto-clms-theme/commit/6e4faad26bbf412a691e827333541e6e8d302590)
+- use ReactTableWidget [`18d8777`](https://github.com/eea/volto-clms-theme/commit/18d8777cc134a6d13ed0ab1324d38c2edc5f5426)
+- Modal homogenization [`33d41b5`](https://github.com/eea/volto-clms-theme/commit/33d41b5d90094addf6d3e4301225727e801c45b5)
+- use datset title instead of dataResourceTitle [`4a9dc98`](https://github.com/eea/volto-clms-theme/commit/4a9dc98c965d96d1d796a81b94ccf5c0283309d7)
+- get header from schema [`8851314`](https://github.com/eea/volto-clms-theme/commit/8851314f92b1798428790dc4db02fd7688fbc5af)
+- use onBlur [`bdfcc7e`](https://github.com/eea/volto-clms-theme/commit/bdfcc7ecc28c48d0c84261166b824ac20e746d4f)
+- implement search and filtering [`8b748eb`](https://github.com/eea/volto-clms-theme/commit/8b748ebc17a3edbbf1e6b2d24df016f8bb86a333)
+- use react-papaparse to import/export CSV files [`d07fe9d`](https://github.com/eea/volto-clms-theme/commit/d07fe9d17ef963b839bb98b22a008921b83f9f3d)
+- add CSV export [`8bd1ea5`](https://github.com/eea/volto-clms-theme/commit/8bd1ea5451e2b2e8ce8ea1521a13acc1bfcfc7bb)
+- modify the data in the props so Volto keeps its value [`6d5b19a`](https://github.com/eea/volto-clms-theme/commit/6d5b19a081a2487d2680696ba7c993ef8f3bd50e)
+- remove styles [`c677afe`](https://github.com/eea/volto-clms-theme/commit/c677afe47ec10b0274311252941639d1ab3d326b)
+- initial demo using react-table to edit downloadable files. right now without edit functionality [`dafa015`](https://github.com/eea/volto-clms-theme/commit/dafa015e43272101c141456200c75a4c0d65d3dc)
+
+#### [1.0.82](https://github.com/eea/volto-clms-theme/compare/1.0.81...1.0.82)
+
+> 11 March 2022
+
+- Develop [`#233`](https://github.com/eea/volto-clms-theme/pull/233)
+- add new field in prepackaged downloadable files [`#232`](https://github.com/eea/volto-clms-theme/pull/232)
+
+#### [1.0.81](https://github.com/eea/volto-clms-theme/compare/1.0.80...1.0.81)
+
+> 10 March 2022
+
+- Develop [`#231`](https://github.com/eea/volto-clms-theme/pull/231)
+- new status [`#230`](https://github.com/eea/volto-clms-theme/pull/230)
+- Dataset extra formats [`#229`](https://github.com/eea/volto-clms-theme/pull/229)
+- Prepackaged table columns [`#228`](https://github.com/eea/volto-clms-theme/pull/228)
+- fix tests [`326f571`](https://github.com/eea/volto-clms-theme/commit/326f57114023154467af0357f56aa35feb21f66a)
+- add new values to initial state [`2c2bff9`](https://github.com/eea/volto-clms-theme/commit/2c2bff92440565e9f5fe8ccb173a5f8f73ccc175)
+- fix [`f91ae0b`](https://github.com/eea/volto-clms-theme/commit/f91ae0b9b4c041c865fde9cad1462c9d770454ee)
+- tests [`2f6d48e`](https://github.com/eea/volto-clms-theme/commit/2f6d48ed551df5b1620b69f440d6c802216ab38b)
+- Cart modifications for extra formats [`7406959`](https://github.com/eea/volto-clms-theme/commit/74069598e41d40ccfb411a166040be151829c970)
+- new widget for extra formats [`0b8ed19`](https://github.com/eea/volto-clms-theme/commit/0b8ed19faba3bbe24fdb1ad9b29685d2ac7dc101)
+- remove some fields [`fad800e`](https://github.com/eea/volto-clms-theme/commit/fad800e836686c847e5afbdfa8fc4c4729a9e8ff)
+- conditioned columns [`e0c1126`](https://github.com/eea/volto-clms-theme/commit/e0c1126ce17359037d7e1ac8b7132006a242845f)
+- widget modification [`17e991c`](https://github.com/eea/volto-clms-theme/commit/17e991ceed4b832fe8dc7292c20b8c6c33f2da1f)
+- prepackaged cart modifications [`f9c72f0`](https://github.com/eea/volto-clms-theme/commit/f9c72f0b0893baaf6985cce4bfe623e1cb29e8af)
+
 #### [1.0.80](https://github.com/eea/volto-clms-theme/compare/1.0.79...1.0.80)
 
+> 7 March 2022
+
+- New release [`#227`](https://github.com/eea/volto-clms-theme/pull/227)
 - Card image border [`#226`](https://github.com/eea/volto-clms-theme/pull/226)
 - pre-download modal [`d91209f`](https://github.com/eea/volto-clms-theme/commit/d91209f1b01f47217eb7ca330f5bfdcae0d10c74)
 - hide text when not logged in [`c4b88e5`](https://github.com/eea/volto-clms-theme/commit/c4b88e5d4960d5b3d752d9d8852bfe1bb0911bca)

package/Jenkinsfile

@@ -6,6 +6,7 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "clms.land.copernicus.eu,volto.eea.europa.eu"
         DEPENDENCIES = ""
+        VOLTO = "14.10.0"
     }
 
   stages {
@@ -77,7 +78,7 @@ pipeline {
               script {
                 try {
                   sh '''docker pull plone/volto-addon-ci'''
-                  sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci'''
+                  sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e VOLTO=$VOLTO -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci'''
                   sh '''rm -rf xunit-reports'''
                   sh '''mkdir -p xunit-reports'''
                   sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/coverage xunit-reports/'''
@@ -125,7 +126,7 @@ pipeline {
               script {
                 try {
                   sh '''docker pull plone; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=test plone/volto-addon-ci cypress'''
+                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e VOLTO=$VOLTO -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=test plone/volto-addon-ci cypress'''
                 } finally {
                   try {
                     sh '''rm -rf cypress-reports cypress-results cypress-coverage'''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.80",
+  "version": "1.0.83",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -26,6 +26,7 @@
     "@eeacms/volto-resize-helper",
     "@eeacms/volto-tabs-block",
     "@eeacms/volto-clms-utils",
+    "@eeacms/volto-react-table-widget",
     "volto-form-block",
     "@eeacms/volto-taxonomy"
   ],
@@ -35,6 +36,7 @@
     "@eeacms/volto-clms-utils": "0.1.6",
     "@eeacms/volto-columns-block": "4.4.3",
     "@eeacms/volto-metadata-block": "^2.1.0",
+    "@eeacms/volto-react-table-widget": "0.1.1",
     "@eeacms/volto-resize-helper": "0.2.1",
     "@eeacms/volto-tabs-block": "1.2.7",
     "@eeacms/volto-taxonomy": "^1.0.0",

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -4,7 +4,7 @@
  * @module components/CLMSDownloadCartView/CLMSCartContent
  */
 
-import { Checkbox, Grid, Modal, Segment, Select } from 'semantic-ui-react';
+import { Checkbox, Modal, Segment, Select } from 'semantic-ui-react';
 import React, { useEffect, useState } from 'react';
 import {
   getCartObjectFromMapviewer,
@@ -199,13 +199,49 @@ const CLMSCartContent = (props) => {
 
   const AreaNaming = (areaProps) => {
     const { item } = areaProps;
-    function nutsName(nItem) {
-      return nItem.area?.type === 'nuts'
-        ? 'NUTS: ' + (nItem.area.valueName || nItem.area.value)
-        : '-';
+    switch (item.area?.type) {
+      case 'polygon':
+        return 'Bounding Box';
+      case 'nuts':
+        return 'NUTS: ' + (item.area.valueName || item.area.value);
+      case undefined:
+        return item.area || '-';
+      default:
+        return '-';
     }
+  };
+
+  const TypeNaming = (typeProps) => {
+    const { item } = typeProps;
+    if (item.file_id) {
+      return (
+        <span className={'tag tag-' + item?.type?.toLowerCase()}>
+          {contentOrDash(item.type)}
+        </span>
+      );
+    } else if (!item.type) {
+      return '-';
+    }
+
     return (
-      <>{item.area?.type === 'polygon' ? 'Bounding Box' : nutsName(item)}</>
+      <Select
+        placeholder="Select type"
+        value={
+          item.type
+            ? item.type
+            : item.type_options.length > 0 && item.type_options[0].id
+        }
+        options={item.type_options.map((option) => {
+          return { key: option.id, value: option.id, text: option.name };
+        })}
+        onChange={(e, data) => {
+          const objIndex = cartItems.findIndex(
+            (obj) => obj.unique_id === item.unique_id,
+          );
+          cartItems[objIndex].type = data.value;
+          setCartItems([...cartItems]);
+        }}
+      />
     );
   };
 
@@ -243,8 +279,6 @@ const CLMSCartContent = (props) => {
                   <th>Type</th>
                   <th>Format</th>
                   <th>Projection</th>
-                  <th>Version</th>
-                  <th>Size</th>
                   <th></th>
                 </tr>
               </thead>
@@ -285,17 +319,19 @@ const CLMSCartContent = (props) => {
                           </div>
                         </div>
                       </td>
-                      <td>{contentOrDash(item.name)}</td>
+                      {item.title ? (
+                        <td>
+                          {item.title} ({contentOrDash(item.name)})
+                        </td>
+                      ) : (
+                        <td>{contentOrDash(item.name)}</td>
+                      )}
                       <td>{contentOrDash(item.source)}</td>
                       <td>
                         <AreaNaming item={item} />
                       </td>
                       <td>
-                        <span
-                          className={'tag tag-' + item?.type?.toLowerCase()}
-                        >
-                          {contentOrDash(item.type)}
-                        </span>
+                        <TypeNaming item={item} />
                       </td>
                       <td className="table-td-format">
                         {!item.file_id ? (
@@ -335,11 +371,9 @@ const CLMSCartContent = (props) => {
                             }}
                           />
                         ) : (
-                          item.projection
+                          '-'
                         )}
                       </td>
-                      <td>{item.version}</td>
-                      <td>{item.size}</td>
                       <td>
                         {item.task_in_progress ? (
                           <FontAwesomeIcon icon="spinner" spin />
@@ -406,36 +440,32 @@ const CLMSCartContent = (props) => {
               <br />
               <strong>Map viewer selection:</strong>
               <ul>
-                {getSelectedCartItems()
-                  .filter((item) => item.area)
-                  .map((item, key) => (
-                    <li key={key}>{item.name}</li>
-                  ))}
+                {[
+                  ...new Set(
+                    getSelectedCartItems()
+                      .filter((item) => !item.file_id)
+                      .map((item) => item.name),
+                  ),
+                ].map((item, key) => (
+                  <li key={key}>{item}</li>
+                ))}
               </ul>
             </div>
           </div>
         </Modal.Content>
         <Modal.Actions>
-          <Grid columns={2} stackable textAlign="center">
-            <Grid.Row verticalAlign="middle">
-              <Grid.Column>
-                <CclButton
-                  mode={'filled'}
-                  onClick={() => {
-                    setOpenedModal(false);
-                    startDownloading();
-                  }}
-                >
-                  Accept
-                </CclButton>
-              </Grid.Column>
-              <Grid.Column>
-                <CclButton onClick={() => setOpenedModal(false)}>
-                  Cancel
-                </CclButton>
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
+          <div className="modal-buttons">
+            <CclButton
+              mode={'filled'}
+              onClick={() => {
+                setOpenedModal(false);
+                startDownloading();
+              }}
+            >
+              Accept
+            </CclButton>
+            <CclButton onClick={() => setOpenedModal(false)}>Cancel</CclButton>
+          </div>
         </Modal.Actions>
       </Modal>
     </>

package/src/components/CLMSDownloadCartView/cartUtils.js

@@ -19,9 +19,12 @@ export const getDownloadToolPostBody = (selectedItems) => {
       if (item.format) {
         body_extras['OutputFormat'] = item.format;
       }
-      if (item.format) {
+      if (item.projection) {
         body_extras['OutputGCS'] = item.projection;
       }
+      if (item.type) {
+        body_extras['DatasetDownloadInformationID'] = item.type;
+      }
     }
     return { DatasetID: item.dataset_uid, ...body_extras };
   });
@@ -33,6 +36,7 @@ export const getDownloadToolPostBody = (selectedItems) => {
 export const getCartObjectFromPrepackaged = (file_data, dataset_data) => {
   return {
     name: dataset_data.title,
+    title: file_data.title,
     area: file_data.area,
     format: file_data.format?.token || file_data.format,
     resolution: file_data.resolution,
@@ -59,8 +63,14 @@ export const getCartObjectFromMapviewer = (
   if (area?.type === 'nuts' && Object.keys(nutsnames).includes(area.value)) {
     area.valueName = nutsnames[area.value];
   }
+  const type_options = [];
+  if (dataset_data.dataset_download_information?.items.length > 0) {
+    dataset_data.dataset_download_information.items.forEach((item) => {
+      type_options.push({ id: item['@id'], name: item.name });
+    });
+  }
   return {
-    name: dataset_data.dataResourceTitle || '-',
+    name: dataset_data.title || '-',
     area: area || '-',
     format:
       dataset_data.dataset_full_format?.token ||
@@ -69,7 +79,8 @@ export const getCartObjectFromMapviewer = (
     resolution: dataset_data.resolution || '-',
     size: dataset_data.size || '-',
     source: 'Map viewer',
-    type: dataset_data.dataResourceType || '-',
+    type: type_options.length > 0 ? type_options[0].id : null,
+    type_options: type_options,
     version: dataset_data.version || '-',
     year: dataset_data.year || '-',
     id: local_cart_data.id,

package/src/components/CLMSDownloadsView/CLMSDownloadTasks.jsx

@@ -13,13 +13,14 @@ import { Grid } from 'semantic-ui-react';
 
 const CLMSDownloadTasks = (props) => {
   const dispatch = useDispatch();
+  const [queued, setQueued] = useState([]);
   const [taskInProgress, setTaskInProgress] = useState([]);
   const [finishedOKTasks, setFinishedOKTasks] = useState([]);
   const [finishedNOKTasks, setFinishedNOKTasks] = useState([]);
   const [rejectedTasks, setRejectedTasks] = useState([]);
+  const [cancelled, setCancelled] = useState([]);
   const [showDeleteTaskLoading, setShowDeleteTaskLoading] = useState(false);
   const downloadtool = useSelector((state) => state.downloadtool);
-
   const user_id = useSelector((state) => state.users.user.id);
   const datasets = useSelector((state) => state.datasetsByUid.datasets.items);
   const nutsnames = useSelector((state) => state.nutsnames.nutsnames);
@@ -29,28 +30,34 @@ const CLMSDownloadTasks = (props) => {
   }, [dispatch]);
 
   useEffect(() => {
+    setQueued(downloadtool.download_queued);
     setTaskInProgress(downloadtool.download_in_progress);
     setFinishedOKTasks(downloadtool.download_finished_ok);
     setFinishedNOKTasks(downloadtool.download_finished_nok);
     setRejectedTasks(downloadtool.download_rejected);
+    setCancelled(downloadtool.download_cancelled);
   }, [downloadtool]);
 
   useEffect(() => {
     if (datasets?.length > 0) {
+      addDatasetName(queued, setQueued);
       addDatasetName(taskInProgress, setTaskInProgress);
       addDatasetName(finishedOKTasks, setFinishedOKTasks);
       addDatasetName(finishedNOKTasks, setFinishedNOKTasks);
       addDatasetName(rejectedTasks, setRejectedTasks);
+      addDatasetName(cancelled, setCancelled);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [datasets]);
 
   useEffect(() => {
     if (Object.keys(nutsnames).length > 0) {
+      addNutsName(queued, setQueued);
       addNutsName(taskInProgress, setTaskInProgress);
       addNutsName(finishedOKTasks, setFinishedOKTasks);
       addNutsName(finishedNOKTasks, setFinishedNOKTasks);
       addNutsName(rejectedTasks, setRejectedTasks);
+      addNutsName(cancelled, setCancelled);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nutsnames]);
@@ -111,6 +118,25 @@ const CLMSDownloadTasks = (props) => {
   };
   return (
     <Grid columns={1} stackable padded="vertically">
+      <Grid.Column>
+        <h2>
+          <FormattedMessage id="queued" defaultMessage="Queued" />
+        </h2>
+        {queued?.length !== 0 ? (
+          <MapTasks
+            tasks={queued}
+            showDel={showDeleteTaskLoading}
+            delTask={deleteTaskInProgress}
+          />
+        ) : (
+          <p>
+            <FormattedMessage
+              id="There are no tasks queued"
+              defaultMessage="There are no tasks queued"
+            />
+          </p>
+        )}
+      </Grid.Column>
       <Grid.Column>
         <h2>
           <FormattedMessage id="In progress" defaultMessage="In progress" />
@@ -190,6 +216,21 @@ const CLMSDownloadTasks = (props) => {
           </p>
         )}
       </Grid.Column>
+      <Grid.Column>
+        <h2>
+          <FormattedMessage id="Cancelled" defaultMessage="Cancelled" />
+        </h2>
+        {cancelled?.length !== 0 ? (
+          <MapTasks tasks={cancelled} showDel={showDeleteTaskLoading} />
+        ) : (
+          <p>
+            <FormattedMessage
+              id="There are no cancelled tasks"
+              defaultMessage="There are no cancelled tasks"
+            />
+          </p>
+        )}
+      </Grid.Column>
     </Grid>
   );
 };

package/src/components/CLMSDownloadsView/CLMSDownloadsView.jsx

@@ -71,22 +71,30 @@ const CLMSDownloadsView = (props) => {
 
   useEffect(() => {
     if (
+      downloadtool?.download_queued &&
       downloadtool?.download_in_progress &&
       downloadtool?.download_finished_ok &&
       downloadtool?.download_finished_nok &&
-      downloadtool?.download_rejected
+      downloadtool?.download_rejected &&
+      downloadtool?.download_cancelled
     ) {
+      let queuedUidsList = getUIDList(downloadtool.download_queued);
       let downloadInProgressUidsList = getUIDList(
         downloadtool?.download_in_progress,
       );
       let finishedOKUidsList = getUIDList(downloadtool?.download_finished_ok);
       let finishedNOKUidsList = getUIDList(downloadtool?.download_finished_nok);
       let rejectedUidsList = getUIDList(downloadtool?.download_rejected);
+      let cancelledUidsList = getUIDList(downloadtool?.download_cancelled);
       let uidsList = [
         ...new Set(
           rejectedUidsList.concat(
             finishedNOKUidsList.concat(
-              finishedOKUidsList.concat(downloadInProgressUidsList),
+              finishedOKUidsList.concat(
+                downloadInProgressUidsList.concat(
+                  queuedUidsList.concat(cancelledUidsList),
+                ),
+              ),
             ),
           ),
         ),

package/src/components/CLMSDownloadsView/FileCard.jsx

@@ -64,15 +64,15 @@ const FileCard = (props) => {
       <Grid
         divided
         centered
-        columns={item?.Status !== 'In_progress' ? 2 : 3}
+        columns={['In_progress', 'Queued'].includes(item?.Status) ? 2 : 3}
         padded
         className="filecard"
       >
         <Grid.Row>
           <Grid.Column verticalAlign="middle" textAlign="center" width={2}>
-            {item?.Status === 'In_progress' && (
+            {['In_progress', 'Queued'].includes(item?.Status) && (
               <Popup
-                content="In progress"
+                content="Preparing download files"
                 size="small"
                 trigger={<Loader active inline indeterminate size="medium" />}
               />
@@ -120,7 +120,9 @@ const FileCard = (props) => {
               />
             )}
           </Grid.Column>
-          <Grid.Column width={item?.Status === 'In_progress' ? 8 : 10}>
+          <Grid.Column
+            width={['In_progress', 'Queued'].includes(item?.Status) ? 8 : 10}
+          >
             <Header as="h3">{`Task ID: ${item?.TaskID}`}</Header>
             <Segment basic className="file-datetimes">
               Start date:{' '}
@@ -176,7 +178,7 @@ const FileCard = (props) => {
               </Segment>
             )}
           </Grid.Column>
-          {item?.Status === 'In_progress' && (
+          {['In_progress', 'Queued'].includes(item?.Status) && (
             <Grid.Column
               width={2}
               verticalAlign="middle"
@@ -193,7 +195,7 @@ const FileCard = (props) => {
                 />
               ) : (
                 <Popup
-                  content="Remove in progress task"
+                  content="Remove task"
                   size="small"
                   trigger={
                     <button
@@ -214,7 +216,7 @@ const FileCard = (props) => {
                         name={removeSVG}
                         size={30}
                         color="#e40166"
-                        title={'Remove in progress task'}
+                        title={'Remove task'}
                       />
                     </button>
                   }

package/src/components/CclDownloadTable/CclDownloadTable.jsx

@@ -128,6 +128,7 @@ function CclDownloadTable(props) {
       .map((item) => ({
         UID: item.UID,
         file_id: item['@id'],
+        area: item.area,
         unique_id: item.unique_id,
       }));
     addCartItem(selectedCartItems);
@@ -151,6 +152,27 @@ function CclDownloadTable(props) {
     );
   };
 
+  const contentOrDash = (content) => {
+    return content || '-';
+  };
+
+  const hasSome = (field) => {
+    return prePackagedCollection.filter((ppItem) => ppItem[field]).length > 0
+      ? field
+      : '';
+  };
+
+  const columns = [
+    hasSome('title'),
+    hasSome('area'),
+    hasSome('year'),
+    hasSome('version'),
+    hasSome('resolution'),
+    hasSome('type'),
+    hasSome('format'),
+    hasSome('size'),
+  ];
+
   return (
     <div className="dataset-download-table">
       <Toast message="Added to cart" time={5000}></Toast>
@@ -203,12 +225,14 @@ function CclDownloadTable(props) {
                   <HeaderCheckbox />{' '}
                 </th>
               )}
-              <th>Year</th>
-              <th>Resolution</th>
-              <th>Type</th>
-              <th>Format</th>
-              <th>Version</th>
-              <th>Size</th>
+              {columns.includes('title') && <th>Title</th>}
+              {columns.includes('area') && <th>Area of interest</th>}
+              {columns.includes('year') && <th>Year</th>}
+              {columns.includes('version') && <th>Version</th>}
+              {columns.includes('resolution') && <th>Resolution</th>}
+              {columns.includes('type') && <th>Type</th>}
+              {columns.includes('format') && <th>Format</th>}
+              {columns.includes('size') && <th>Size</th>}
             </tr>
           </thead>
           <tbody>
@@ -229,21 +253,39 @@ function CclDownloadTable(props) {
                           />
                         </td>
                       )}
-                      <td>{dataset_file?.year || 'YYYY'}</td>
-                      <td>{dataset_file?.resolution || '000m'}</td>
-                      <td>
-                        <span
-                          className={
-                            'tag tag-' +
-                            (dataset_file?.type?.toLowerCase() || 'raster')
-                          }
-                        >
-                          {dataset_file?.type || 'Raster'}
-                        </span>
-                      </td>
-                      <td>{dataset_file?.format || 'Format'}</td>
-                      <td>{dataset_file?.version || 'v0.0'}</td>
-                      <td>{dataset_file?.size || '000.0MB'}</td>
+                      {columns.includes('title') && (
+                        <td>{contentOrDash(dataset_file?.title)}</td>
+                      )}
+                      {columns.includes('area') && (
+                        <td>{contentOrDash(dataset_file?.area)}</td>
+                      )}
+                      {columns.includes('year') && (
+                        <td>{contentOrDash(dataset_file?.year)}</td>
+                      )}
+                      {columns.includes('version') && (
+                        <td>{contentOrDash(dataset_file?.version)}</td>
+                      )}
+                      {columns.includes('resolution') && (
+                        <td>{contentOrDash(dataset_file?.resolution)}</td>
+                      )}
+                      {columns.includes('type') && (
+                        <td>
+                          <span
+                            className={
+                              'tag tag-' +
+                              (dataset_file?.type?.toLowerCase() || 'raster')
+                            }
+                          >
+                            {contentOrDash(dataset_file?.type)}
+                          </span>
+                        </td>
+                      )}
+                      {columns.includes('format') && (
+                        <td>{contentOrDash(dataset_file?.format)}</td>
+                      )}
+                      {columns.includes('size') && (
+                        <td>{contentOrDash(dataset_file?.size)}</td>
+                      )}
                     </tr>
                   );
                 })

package/src/components/CclLoginModal/CclLoginModal.jsx

@@ -45,33 +45,39 @@ function CclLoginModal() {
       size="tiny"
       modalStatus={modalStatus}
     >
-      <div className="modal-login-title">Registration / Login</div>
-      <div className="modal-login-text">
-        <p>
-          This site uses EU Login to handle user registration and login. You can
-          read more about this service in the{' '}
-          <a href="https://ecas.ec.europa.eu/cas/about.html">
-            EU Login site help
+      <div className="content">
+        <div className="modal-login-title">Registration / Login</div>
+        <div className="modal-login-text">
+          <p>
+            This site uses EU Login to handle user registration and login. You
+            can read more about this service in the{' '}
+            <a href="https://ecas.ec.europa.eu/cas/about.html">
+              EU Login site help
+            </a>
+            .
+          </p>
+          <p>
+            {' '}
+            When you clik on the following link, you will be sent to EU Login
+            and after a successful login there you will be redirected back to
+            this site.
+          </p>
+          <p>
+            If you have any issues or questions, please contact us using the
+            <a href="/en/contact-service-helpdesk"> helpdesk</a>.
+          </p>
+        </div>
+      </div>
+      <div className="actions">
+        <div className="modal-buttons">
+          <a
+            href={toPublicURL(loginUrl) || '#'}
+            className="ccl-button ccl-button-green"
+          >
+            Login using EU Login
           </a>
-          .
-        </p>
-        <p>
-          {' '}
-          When you clik on the following link, you will be sent to EU Login and
-          after a successful login there you will be redirected back to this
-          site.
-        </p>
-        <p>
-          If you have any issues or questions, please contact us using the
-          <a href="/en/contact-service-helpdesk"> helpdesk</a>.
-        </p>
+        </div>
       </div>
-      <a
-        href={toPublicURL(loginUrl) || '#'}
-        className="ccl-button ccl-button-green"
-      >
-        Login using EU Login
-      </a>
     </CclModal>
   );
 }

package/src/components/CclModal/CclModal.jsx

@@ -30,21 +30,17 @@ function CclModal(props) {
       className={'modal-clms'}
       size={size}
     >
-      <div className={'modal-clms-background'}>
-        <div className={'modal-clms-container'}>
-          <div className={'modal-close modal-clms-close'}>
-            <span
-              className="ccl-icon-close"
-              aria-label="Close"
-              onClick={() => closeModal()}
-              onKeyDown={() => closeModal()}
-              tabIndex="0"
-              role="button"
-            ></span>
-          </div>
-          {children}
-        </div>
+      <div className={'modal-close modal-clms-close'}>
+        <span
+          className="ccl-icon-close"
+          aria-label="Close"
+          onClick={() => closeModal()}
+          onKeyDown={() => closeModal()}
+          tabIndex="0"
+          role="button"
+        ></span>
       </div>
+      {children}
     </Modal>
   );
 }

package/src/components/CclModal/modal.less

@@ -99,11 +99,6 @@
   text-align: right;
 }
 
-.modal-clms .ccl-button {
-  width: 60%;
-  margin: 2rem auto 0;
-}
-
 .modal-clms hr {
   height: 1px;
   padding: 0;
@@ -116,6 +111,28 @@
   line-height: 1.5rem;
 }
 
+.modal-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 1rem;
+}
+
+.modal-buttons .ccl-button {
+  width: auto;
+  margin: 0;
+}
+
+.modal-buttons .ccl-button:only-child {
+  margin: 0 auto;
+}
+
+@media only screen and (max-width: 767px) {
+  .modal-clms.ui.modal > .content,
+  .modal-clms.ui.modal > .actions {
+    padding: 1.5rem !important;
+  }
+}
+
 /* Language modal */
 .modals.dimmer .ui.scrolling.modal.modal-clms {
   margin-top: 0;

package/src/components/Widgets/DatasetDownloadInformationWidget.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import ObjectListWidget from '@plone/volto/components/manage/Widgets/ObjectListWidget';
+
+const ItemSchema = () => ({
+  title: 'Dataset Download Information',
+  properties: {
+    name: {
+      title: 'Name',
+      description: '',
+      type: 'string',
+    },
+    full_path: {
+      title: 'Enter the path to the full dataset download file',
+      description:
+        'This is used when requesting the download from the map viewer',
+      type: 'string',
+    },
+    full_format: {
+      title: 'Enter the format of the full dataset file',
+      description: '',
+      choices: [
+        ['Shapefile', 'Shapefile'],
+        ['GDB', 'GDB'],
+        ['GPKG', 'GPKG'],
+        ['Geojson', 'Geojson'],
+        ['Geotiff', 'Geotiff'],
+        ['Netcdf', 'Netcdf'],
+        ['GML', 'GML'],
+        ['WFS', 'WFS'],
+      ],
+    },
+    full_source: {
+      title: 'Enter the source of the full dataset file',
+      description: '',
+      choices: [
+        ['WEKEO', 'WEKEO'],
+        ['EEA', 'EEA'],
+        ['LANDCOVER', 'LANDCOVER'],
+        ['LEGACY', 'LEGACY'],
+      ],
+    },
+    wekeo_choices: {
+      title: 'WEKEO choices',
+      description: '',
+      type: 'string',
+    },
+  },
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'File',
+      fields: [
+        'name',
+        'full_path',
+        'full_format',
+        'full_source',
+        'wekeo_choices',
+      ],
+    },
+  ],
+  required: [],
+});
+
+const DatasetDownloadInformationWidget = (props) => {
+  return (
+    <ObjectListWidget
+      schema={ItemSchema()}
+      {...props}
+      value={props.value?.items || props.default?.items || []}
+      onChange={(id, value) => props.onChange(id, { items: value })}
+    />
+  );
+};
+
+export default DatasetDownloadInformationWidget;

package/src/components/Widgets/{DownloadableFilesWidget.jsx → DownloadableFilesTableWidget.jsx}

@@ -1,14 +1,16 @@
-import { getFormatConversionTable, getProjections } from '../../actions';
-import { useDispatch, useSelector } from 'react-redux';
-
-import ObjectListWidget from '@plone/volto/components/manage/Widgets/ObjectListWidget';
 import React from 'react';
+import { ReactTableWidget } from '@eeacms/volto-react-table-widget';
 
-const ItemSchema = (format_choices, projection_choices) => ({
+const ItemSchema = () => ({
   title: 'Downloadable File',
   properties: {
+    title: {
+      title: 'Title',
+      description: 'Enter the title of this file.',
+      type: 'string',
+    },
     area: {
-      title: 'Area',
+      title: 'Area of interest',
       description: 'Enter the area of this file.',
       type: 'string',
     },
@@ -16,6 +18,12 @@ const ItemSchema = (format_choices, projection_choices) => ({
       title: 'Year',
       description: 'Enter the year of this file.',
       type: 'number',
+      minimum: 1900,
+    },
+    version: {
+      title: 'Version',
+      description: 'Enter the version of this file.',
+      type: 'string',
     },
     resolution: {
       title: 'Resolution',
@@ -29,22 +37,10 @@ const ItemSchema = (format_choices, projection_choices) => ({
         ['Raster', 'Raster'],
         ['Vector', 'Vector'],
       ],
-      // type: 'string',
-      // controlled vocabulary: 'raster' or 'vector'
     },
     format: {
       title: 'Format',
       description: 'Enter the format of this file.',
-      choices: format_choices,
-    },
-    projection: {
-      title: 'Projection',
-      description: 'Enter the projection of this file.',
-      choices: projection_choices,
-    },
-    version: {
-      title: 'Version',
-      description: 'Enter the version of this file.',
       type: 'string',
     },
     size: {
@@ -52,67 +48,52 @@ const ItemSchema = (format_choices, projection_choices) => ({
       description: 'Enter the size of this file. Ex.: 3.5 GB',
       type: 'string',
     },
-    source: {
-      title: 'Source',
-      description: 'Enter the source of this file.',
-      type: 'string',
-      // controlled vocabulary: values to be provided by the user
-    },
     path: {
       title: 'Path',
       description: 'Enter the absolute path of this file in the storage',
       type: 'string',
     },
+    source: {
+      title: 'Source',
+      description: 'Enter the source of this file (this is an internal).',
+      choices: [
+        ['EEA', 'EEA'],
+        ['HOTSPOTS', 'HOTSPOTS'],
+      ],
+    },
   },
   fieldsets: [
     {
       id: 'default',
       title: 'File',
       fields: [
+        'title',
         'area',
         'year',
+        'version',
         'resolution',
         'type',
         'format',
-        'projection',
-        'version',
         'size',
-        'source',
         'path',
+        'source',
       ],
     },
   ],
   required: [],
 });
 
-const DownloadableFilesWidget = (props) => {
-  // format_conversion_table_in_progress
-  const dispatch = useDispatch();
-  React.useEffect(() => {
-    dispatch(getFormatConversionTable());
-    dispatch(getProjections());
-  }, [dispatch]);
-  const format_conversion_table_in_progress = useSelector(
-    (state) => state.downloadtool.format_conversion_table_in_progress,
-  );
-  const projections_in_progress = useSelector(
-    (state) => state.downloadtool.projections_in_progress,
-  );
-  let format_choices = Object.keys(
-    format_conversion_table_in_progress,
-  ).map((key) => [key, key]);
-  let projection_choices = [];
-  if (projections_in_progress.length > 0) {
-    projection_choices = projections_in_progress.map((key) => [key, key]);
-  }
+const DownloadableFilesTableWidget = (props) => {
   return (
-    <ObjectListWidget
-      schema={ItemSchema(format_choices, projection_choices)}
+    <ReactTableWidget
+      schema={ItemSchema()}
       {...props}
+      csvexport={true}
+      csvimport={true}
       value={props.value?.items || props.default?.items || []}
       onChange={(id, value) => props.onChange(id, { items: value })}
     />
   );
 };
 
-export default DownloadableFilesWidget;
+export default DownloadableFilesTableWidget;

package/src/components/Widgets/ProductComponentsWidget.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import ObjectListWidget from '@plone/volto/components/manage/Widgets/ObjectListWidget';
+
+const ItemSchema = () => ({
+  title: 'Product component',
+  properties: {
+    name: {
+      title: 'Name',
+      description: 'Enter the name of this component.',
+      type: 'string',
+    },
+    description: {
+      title: 'Description',
+      description: 'Enter the description of this component.',
+      type: 'text',
+    },
+  },
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Component',
+      fields: ['name', 'description'],
+    },
+  ],
+  required: [],
+});
+
+const ProductComponentsWidget = (props) => {
+  return (
+    <ObjectListWidget
+      schema={ItemSchema()}
+      {...props}
+      value={props.value?.items || props.default?.items || []}
+      onChange={(id, value) => props.onChange(id, { items: value })}
+    />
+  );
+};
+
+export default ProductComponentsWidget;

package/src/index.js

@@ -1,12 +1,11 @@
-// COMPONENTS FOR ROUTES
-import { ContactForm, Search, Sitemap } from '@plone/volto/components';
-// CUSTOMIZED BLOCKS IMPORTS
 import customBlocks, {
   customGroupBlocksOrder,
 } from '@eeacms/volto-clms-theme/components/Blocks/customBlocks';
 
-import BoundingWidget from './components/Widgets/BoundingWidget';
-// VIEWS IMPORTS
+// ROUTE VIEWS
+import { ContactForm, Search, Sitemap } from '@plone/volto/components';
+
+// VIEWS
 import CLMSDatasetDetailView from '@eeacms/volto-clms-theme/components/CLMSDatasetDetailView/CLMSDatasetDetailView';
 import CLMSDownloadCartView from './components/CLMSDownloadCartView/CLMSDownloadCartView';
 import CLMSDownloadableFileView from '@eeacms/volto-clms-theme/components/CLMSDownloadableFileView/CLMSDownloadableFileView';
@@ -21,16 +20,21 @@ import CLMSNewsItemView from '@eeacms/volto-clms-theme/components/CLMSNewsItemVi
 import ConfirmSubscriptionView from './components/CLMSSubscriptionView/ConfirmSubscriptionView';
 import ProfileView from './components/CLMSProfileView/CLMSProfileView';
 import SubscriptionView from './components/CLMSSubscriptionView/SubscriptionView';
-// WIDGET IMPORTS
-import TabsWidget from './components/Blocks/CustomTemplates/VoltoTabsBlock/TabsWidget';
-import TextLinkWidget from './components/Widgets/TextLinkWidget';
+
+// WIDGET
+import BoundingWidget from './components/Widgets/BoundingWidget';
 import ContactWidget from './components/Widgets/ContactWidget';
+import DatasetDownloadInformationWidget from './components/Widgets/DatasetDownloadInformationWidget';
 import DistributionInfoWidget from './components/Widgets/DistributionInfoWidget';
-import DownloadableFilesWidget from './components/Widgets/DownloadableFilesWidget';
+import DownloadableFilesTableWidget from './components/Widgets/DownloadableFilesTableWidget';
 import GeonetworkIdentifiersWidget from './components/Widgets/GeonetworkIdentifiersWidget';
 import MapLayersWidget from './components/Widgets/MapLayersWidget';
+import TabsWidget from './components/Blocks/CustomTemplates/VoltoTabsBlock/TabsWidget';
 import TaxonomyWidget from './components/Widgets/TaxonomyWidget';
+import ProductComponentsWidget from './components/Widgets/ProductComponentsWidget';
 // CUSTOM REDUCERS IMPORT
+import TextLinkWidget from './components/Widgets/TextLinkWidget';
+
 import reducers from './reducers';
 
 const applyConfig = (config) => {
@@ -62,15 +66,17 @@ const applyConfig = (config) => {
     ...config.widgets.widget,
     bounding_widget: BoundingWidget,
     layer_widget: MapLayersWidget,
-    downloadable_files_widget: DownloadableFilesWidget,
+    downloadable_files_widget: DownloadableFilesTableWidget,
     contact_widget: ContactWidget,
     distribution_info_widget: DistributionInfoWidget,
     geonetwork_identifiers_widget: GeonetworkIdentifiersWidget,
     text_link_widget: TextLinkWidget,
+    dataset_download_information_widget: DatasetDownloadInformationWidget,
   };
   config.widgets.id = {
     ...config.widgets.id,
     taxonomy_technical_library_categorization: TaxonomyWidget,
+    product_components: ProductComponentsWidget,
   };
   config.settings = {
     ...config.settings,

package/src/reducers/downloadtool/downloadtool_reducer.js

@@ -15,10 +15,12 @@ const getInitialState = {
   error: null,
   loaded: false,
   loading: false,
+  download_queued: {},
   download_in_progress: {},
   download_finished_ok: {},
   download_finished_nok: {},
   download_rejected: {},
+  download_cancelled: {},
   delete_download_in_progress: {},
   post_download_in_progress: {},
   format_conversion_table_in_progress: {},
@@ -59,6 +61,7 @@ export const downloadtoolReducer = (state = getInitialState, action = {}) => {
           TaskID: progress_key,
         });
       });
+      var queued = tasks_array.filter((task) => task.Status === 'Queued');
       var in_progress = tasks_array.filter(
         (task) => task.Status === 'In_progress',
       );
@@ -69,15 +72,18 @@ export const downloadtoolReducer = (state = getInitialState, action = {}) => {
         (task) => task.Status === 'Finished_nok',
       );
       var rejected = tasks_array.filter((task) => task.Status === 'Rejected');
+      var cancelled = tasks_array.filter((task) => task.Status === 'Cancelled');
       return {
         ...state,
         error: null,
         loaded: true,
         loading: false,
+        download_queued: queued,
         download_in_progress: in_progress,
         download_finished_ok: finished_ok,
         download_finished_nok: finished_nok,
         download_rejected: rejected,
+        download_cancelled: cancelled,
       };
     case `${POST_DOWNLOADTOOL}_SUCCESS`:
       return {

package/src/reducers/downloadtool/downloadtool_reducer.test.js

@@ -14,8 +14,10 @@ describe('downloadtoolReducer', () => {
       error: null,
       loaded: false,
       loading: false,
+      download_queued: {},
       download_in_progress: {},
       download_finished_ok: {},
+      download_cancelled: {},
       download_finished_nok: {},
       download_rejected: {},
       delete_download_in_progress: {},
@@ -32,6 +34,7 @@ describe('downloadtoolReducer', () => {
           error: null,
           loaded: false,
           loading: false,
+          download_queued: {},
           download_in_progress: {},
           download_finished_ok: {
             '1': {
@@ -47,6 +50,7 @@ describe('downloadtoolReducer', () => {
           },
           download_finished_nok: {},
           download_rejected: {},
+          download_cancelled: {},
           delete_download_in_progress: {},
           post_download_in_progress: {},
           format_conversion_table_in_progress: {},
@@ -72,8 +76,10 @@ describe('downloadtoolReducer', () => {
       error: null,
       loaded: true,
       loading: false,
+      download_queued: [],
       download_in_progress: [],
       download_finished_ok: [],
+      download_cancelled: [],
       download_finished_nok: [],
       download_rejected: [],
       delete_download_in_progress: {},
@@ -122,6 +128,7 @@ describe('downloadtoolReducer', () => {
           error: null,
           loaded: false,
           loading: false,
+          download_queued: {},
           download_in_progress: {},
           download_finished_ok: {},
           download_finished_nok: {},
@@ -152,6 +159,7 @@ describe('downloadtoolReducer', () => {
       error: null,
       loaded: true,
       loading: false,
+      download_queued: {},
       download_in_progress: {},
       download_finished_ok: {},
       download_finished_nok: {},

package/src/components/Widgets/DownloadableFilesWidget.test.jsx

@@ -1,5 +0,0 @@
-describe('Initial test', () => {
-  it('Initial test', () => {
-    expect(1).toBe(1);
-  });
-});