@eeacms/volto-clms-theme 1.0.101 → 1.0.104

package/CHANGELOG.md

@@ -4,8 +4,47 @@ 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.104](https://github.com/eea/volto-clms-theme/compare/1.0.103...1.0.104)
+
+- use a combined vocabulary of Products and Datasets [`9f9d0c6`](https://github.com/eea/volto-clms-theme/commit/9f9d0c693a1e870614eb8adc07c58657d9d72a06)
+- allow multiple values [`1edb5dd`](https://github.com/eea/volto-clms-theme/commit/1edb5dd166f31ade19bdcae0b7fa92836dbad420)
+- Products Vocabulary for volto-form-block CLMS-747 [`3f48358`](https://github.com/eea/volto-clms-theme/commit/3f48358dab6a3c20a8367bf4be93c94af6c86350)
+- CLMS-935 and input limitation at 8000 [`9971910`](https://github.com/eea/volto-clms-theme/commit/9971910fbe3c291faed7c0c7d458ae34597e7dc4)
+
+#### [1.0.103](https://github.com/eea/volto-clms-theme/compare/1.0.102...1.0.103)
+
+> 29 June 2022
+
+- Develop [`#269`](https://github.com/eea/volto-clms-theme/pull/269)
+- footer button disabled if email is not valid and privacy check is not clicked [`ab6a061`](https://github.com/eea/volto-clms-theme/commit/ab6a06174dd3cd5fb38bd5ae35cc530a7d3baf4e)
+- download table change and home product block fix [`480d83f`](https://github.com/eea/volto-clms-theme/commit/480d83f1772b3cdfe9b2906edfc7505dac420c8e)
+- rename Sort on selection texts CLMS-745 [`2e2f8c6`](https://github.com/eea/volto-clms-theme/commit/2e2f8c60bce7c09844f4e8f17d79f91de47d134b)
+- remove Searched for text CLMS-746 [`ac36c64`](https://github.com/eea/volto-clms-theme/commit/ac36c6461464e52e214989e56c8b7c3b2df83190)
+- remove Search Facets ordering CLMS-743 [`ee9a138`](https://github.com/eea/volto-clms-theme/commit/ee9a138b55517350e5566d54d0946a8ceefd2f90)
+- remove base filter from currentFilters list CLMS-755 [`38c2b8e`](https://github.com/eea/volto-clms-theme/commit/38c2b8e65fed847470aebaed3f2ad141f17e1fd8)
+- Checkbox tree facet selection CLMS-761 [`46e03b5`](https://github.com/eea/volto-clms-theme/commit/46e03b51e193381bf6d899f4a85334801ec969f6)
+- styling differences fixed [`ec7558d`](https://github.com/eea/volto-clms-theme/commit/ec7558d7b7532226722c64da29ec56a1f5da493f)
+- popup unification CLMS-938 [`2757b51`](https://github.com/eea/volto-clms-theme/commit/2757b519d44dc44a8db341c834578438affea124)
+- ESLint fix [`427d34c`](https://github.com/eea/volto-clms-theme/commit/427d34ca20f5a0b8dca5da13a4eb36fdc17dac0f)
+- unautorized page change and log out redirection [`737b53f`](https://github.com/eea/volto-clms-theme/commit/737b53ff09c8ef595c71c92a270b7c6ddc394e55)
+- doubling DownloadTask card CLMS-939 [`86dd1e7`](https://github.com/eea/volto-clms-theme/commit/86dd1e777f927dd33b0835da7483271ab4d0d71b)
+
+#### [1.0.102](https://github.com/eea/volto-clms-theme/compare/1.0.101...1.0.102)
+
+> 23 June 2022
+
+- Develop [`#268`](https://github.com/eea/volto-clms-theme/pull/268)
+- minor improvements to file listing in Event and News Items [`f67f15b`](https://github.com/eea/volto-clms-theme/commit/f67f15b95a96d6104f016ea26a4d2dcfd9ad9610)
+- polish the downloads list: remove the Finished Not OK tasks, and extract the 'no tasks' message to the component. Extract also the filtering function [`d31b94f`](https://github.com/eea/volto-clms-theme/commit/d31b94f20775d1947545f0618b005db594806e95)
+- improve messages [`f7df892`](https://github.com/eea/volto-clms-theme/commit/f7df892e5f1562e55705f3e1a5960d3013e72b28)
+- save and show the collection [`ae7d2f1`](https://github.com/eea/volto-clms-theme/commit/ae7d2f1df0392044ea0c48aabe21e1995811895e)
+- new field collection [`7a6da24`](https://github.com/eea/volto-clms-theme/commit/7a6da24f00a0c7e9b9785cff4a1e143010339aef)
+
 #### [1.0.101](https://github.com/eea/volto-clms-theme/compare/1.0.100...1.0.101)
 
+> 23 June 2022
+
+- Develop [`#267`](https://github.com/eea/volto-clms-theme/pull/267)
 - Sprint 27 [`67c5d34`](https://github.com/eea/volto-clms-theme/commit/67c5d340fe2b4bbab19d52936e4e5013040c0f65)
 - some corrections of Sprint 27 [`9bb92da`](https://github.com/eea/volto-clms-theme/commit/9bb92dac754a5c7969b2e78c958918d5099a6d29)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.101",
+  "version": "1.0.104",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CclHomeProductsBlock/CclHomeProductsBlockView.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isUrl } from '@plone/volto/helpers';
 
 const CclHomeProductsBlockView = (props) => {
   const { data } = props;
@@ -18,12 +19,18 @@ const CclHomeProductsBlockView = (props) => {
           }
           tabIndex={0}
           onClick={() => {
-            window.location.href =
-              product?.linkSelector[0]['@id'] || props.path;
+            window.location.href = isUrl(product?.linkSelector)
+              ? product.linkSelector
+              : isUrl('http://' + product?.linkSelector)
+              ? 'http://' + product.linkSelector
+              : '#';
           }}
           onKeyDown={() => {
-            window.location.href =
-              product?.linkSelector[0]['@id'] || props.path;
+            window.location.href = isUrl(product?.linkSelector)
+              ? product.linkSelector
+              : isUrl('http://' + product?.linkSelector)
+              ? 'http://' + product.linkSelector
+              : '#';
           }}
           id={product.productIcon === 'iconless' ? '' : product.productIcon}
         >

package/src/components/Blocks/CclHomeProductsBlock/HomeProductsSchema.js

@@ -52,12 +52,12 @@ export const ProductSchema = () => ({
       ],
     },
     linkSelector: {
-      title: 'Product link selector',
-      description: 'Select site content or paste external url',
-      widget: 'object_browser',
-      mode: 'link',
+      title: 'Url',
+      description: 'Paste external url',
+      /* mode: 'link',
+      widget: 'url',
       selectedItemAttrs: ['Title', 'Description', '@type', '@id'],
-      allowExternals: true,
+      allowExternals: true, */
     },
   },
   required: [],

package/src/components/Blocks/CustomTemplates/VoltoFormBlock/VocabularyWidget.jsx

@@ -0,0 +1,67 @@
+import React, { useEffect } from 'react';
+import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
+import { useIntl, defineMessages } from 'react-intl';
+import { getVocabulary } from '@plone/volto/actions';
+import { useDispatch, useSelector } from 'react-redux';
+
+const messages = defineMessages({
+  select_a_value: {
+    id: 'form_select_a_value',
+    defaultMessage: 'Select a value',
+  },
+});
+
+const VocabularyWidget = ({
+  name,
+  label,
+  description,
+  value,
+  onChange,
+  disabled,
+  invalid,
+  title,
+  required,
+  vocabulary,
+  isMulti,
+}) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(
+      getVocabulary({
+        vocabNameOrURL: vocabulary,
+        size: -1,
+      }),
+    );
+  }, [dispatch, vocabulary]);
+  const vocabItems = useSelector((state) => state.vocabularies[vocabulary]);
+  return (
+    <SelectWidget
+      id={name}
+      name={name}
+      title={title}
+      required={required}
+      description={description}
+      getVocabulary={() => {}}
+      getVocabularyTokenTitle={() => {}}
+      choices={
+        vocabItems?.loaded && [
+          ...vocabItems.items.map((item) => {
+            return [item.label, item.label];
+          }),
+        ]
+      }
+      value={value}
+      onChange={onChange}
+      placeholder={intl.formatMessage(messages.select_a_value)}
+      aria-label={intl.formatMessage(messages.select_a_value)}
+      classNamePrefix="react-select"
+      isDisabled={disabled}
+      invalid={invalid}
+      isMulti={isMulti}
+      {...(invalid === 'true' ? { className: 'is-invalid' } : {})}
+    />
+  );
+};
+
+export default VocabularyWidget;

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/CheckboxTreeFacet.jsx

@@ -11,6 +11,31 @@ import {
   selectFacetValueToQuery,
 } from '@plone/volto/components/manage/Blocks/Search/components/base';
 
+const hasAllChildrensSelected = (value, childrens) => {
+  var result = true;
+  if (!childrens || childrens.length === 0) {
+    result = false;
+  }
+  childrens.forEach((ch) => {
+    if (value.filter((v) => v.value === ch.value).length === 0) {
+      result = false;
+    }
+  });
+  return result;
+};
+
+const checkAllChildren = (value, childrens) => {
+  if (!childrens || childrens.length === 0) {
+    return value;
+  }
+  childrens.forEach((ch) => {
+    if (value.filter((v) => v.value === ch.value).length === 0) {
+      value.push(ch);
+    }
+  });
+  return value;
+};
+
 const CheckboxTreeFacet = (props) => {
   const { facet, choices, onChange, value } = props;
   const facetValue = value;
@@ -62,20 +87,31 @@ const CheckboxListParent = ({ option, key, onChange, value, id }) => {
             onChange={(event, { checked }) => {
               checked
                 ? onChange(id, [
+                    // if this option has children, check them all
+                    ...checkAllChildren(value, option.childrens).map(
+                      (f) => f.value,
+                    ),
+                  ])
+                : onChange(id, [
                     ...value
-                      .filter((f) => f.value !== option.value)
+                      .filter((item) => item.value !== option.value)
+                      .filter(
+                        (item) =>
+                          option.childrens?.length > 0 &&
+                          !option.childrens
+                            .map((ch) => ch.value)
+                            .includes(item.value),
+                      )
                       .map((f) => f.value),
-                    ...(checked ? [option.value] : []),
-                  ])
-                : onChange(
-                    id,
-                    value.filter((item) => item.value !== option.value),
-                  );
+                  ]);
             }}
             label={
               <label htmlFor={`field-${option.value}`}>{option.label}</label>
             }
-            checked={value.some((item) => item.value === option.value)}
+            checked={
+              value.some((item) => item.value === option.value) ||
+              hasAllChildrensSelected(value, option.childrens)
+            }
             value={option.value}
           />
         </List.Header>

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/FilterList.jsx

@@ -14,11 +14,19 @@ const messages = defineMessages({
 });
 
 const FilterList = (props) => {
-  const { facets, setFacets, isEditMode } = props;
+  const { facets, setFacets, isEditMode, data } = props;
   const showFilterList = !Object.values(facets).every((facet) => !facet.length);
 
+  const baseFacets = data.facets;
   const currentFilters = Object.fromEntries(
-    Object.entries(facets).filter((v) => v[1] && v[0] !== 'SearchableText'),
+    Object.entries(facets)
+      .filter((v) => v[1] && v[0] !== 'SearchableText')
+      .filter(
+        (v) =>
+          v[1] &&
+          baseFacets.length > 0 &&
+          !baseFacets.map((bf) => bf.field?.value).includes(v[0]),
+      ),
   );
 
   const totalFilters = [].concat.apply([], Object.values(currentFilters))

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/RightModalFacets.jsx

@@ -2,11 +2,10 @@ import { Button, Grid, Segment } from 'semantic-ui-react';
 import {
   Facets,
   SearchDetails,
-  SearchInput,
   SortOn,
 } from '@plone/volto/components/manage/Blocks/Search/components';
 import { defineMessages, useIntl } from 'react-intl';
-
+import SearchInput from './SearchInput';
 import FilterList from './FilterList';
 import CclFiltersModal from '@eeacms/volto-clms-theme/components/CclFiltersModal/CclFiltersModal';
 import { Icon } from '@plone/volto/components';
@@ -59,6 +58,15 @@ const RightModalFacets = (props) => {
   const { showSearchButton } = data;
   const isLive = !showSearchButton;
   const intl = useIntl();
+  if (querystring?.sortable_indexes?.effective?.title) {
+    querystring.sortable_indexes.effective.title = 'Publication date';
+  }
+  if (querystring?.sortable_indexes?.sortable_title?.title) {
+    querystring.sortable_indexes.sortable_title.title = 'Sort by title';
+  }
+  if (querystring?.sortable_indexes?.modified?.title) {
+    querystring.sortable_indexes.modified.title = 'Last edited';
+  }
   return (
     <Grid className="searchBlock-facets right-column-facets" stackable>
       {data?.headline && (
@@ -104,7 +112,7 @@ const RightModalFacets = (props) => {
           </div>
 
           <div className="search-results-count-sort search-filters">
-            <SearchDetails text={searchedText} total={totalItems} />
+            <SearchDetails total={totalItems} />
             <div className="filters-container">
               {data.showSortOn && (
                 <SortOn

package/src/components/Blocks/CustomTemplates/VoltoSearchBlock/SearchInput.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import { Button, Input } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Icon } from '@plone/volto/components';
+import loupeSVG from '@plone/volto/icons/zoom.svg';
+
+const messages = defineMessages({
+  search: {
+    id: 'Search',
+    defaultMessage: 'Search',
+  },
+});
+
+const SearchInput = (props) => {
+  const {
+    data,
+    searchText,
+    setSearchText,
+    isLive,
+    onTriggerSearch,
+    ...rest
+  } = props;
+  const intl = useIntl();
+
+  useEffect(() => {
+    onTriggerSearch(rest.searchedText);
+    setSearchText(rest.searchedText);
+  }, [rest.searchedText, onTriggerSearch, setSearchText]);
+
+  return (
+    <div className="search-input">
+      <Input
+        maxLength="8000"
+        id={`${props.id}-searchtext`}
+        value={searchText}
+        placeholder={
+          data.searchInputPrompt || intl.formatMessage(messages.search)
+        }
+        fluid
+        onKeyPress={(event) => {
+          if (isLive || event.key === 'Enter') onTriggerSearch(searchText);
+        }}
+        onChange={(event, { value }) => {
+          setSearchText(value);
+          if (isLive) {
+            onTriggerSearch(searchText);
+          }
+        }}
+      />
+      {isLive && (
+        <Button basic icon className="search-input-live-icon-button">
+          <Icon name={loupeSVG} />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default SearchInput;

package/src/components/Blocks/customBlocks.js

@@ -59,6 +59,7 @@ import SubscriptionBlockView from '@eeacms/volto-clms-theme/components/Blocks/Cc
 import SubscriptionBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionEdit';
 import containerSVG from '@plone/volto/icons/apps.svg';
 import customIdFieldSchema from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoFormBlock/customIdFieldSchema';
+import VocabularyWidget from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoFormBlock/VocabularyWidget';
 import downSVG from '@plone/volto/icons/down-key.svg';
 import homeBand from '@plone/volto/icons/image-wide.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
@@ -462,6 +463,18 @@ const customBlocks = (config) => ({
   form: {
     ...config.blocks.blocksConfig.form,
     fieldSchema: customIdFieldSchema,
+    additionalFields: [
+      {
+        id: 'product_vocabulary',
+        label: 'Products Vocabulary',
+        component: (props) =>
+          VocabularyWidget({
+            ...props,
+            vocabulary: 'clms.types.ProductsAndDatasetsVocabulary',
+            isMulti: true,
+          }),
+      },
+    ],
   },
 });
 

package/src/components/CLMSDownloadCartView/CLMSCartContent.jsx

@@ -234,7 +234,15 @@ const CLMSCartContent = (props) => {
             : 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 };
+          return {
+            key: option.id,
+            value: option.id,
+            text:
+              option.name +
+              ((option.collection !== undefined &&
+                ' (' + option.collection + ')') ||
+                ''),
+          };
         })}
         onChange={(e, data) => {
           const objIndex = cartItems.findIndex(

package/src/components/CLMSDownloadCartView/cartUtils.js

@@ -78,6 +78,7 @@ export const getCartObjectFromMapviewer = (
         id: item['@id'],
         name: item.name,
         full_format: item.full_format,
+        collection: item.collection,
       });
     });
   }

package/src/components/CLMSDownloadsView/CLMSDownloadTasks.jsx

@@ -62,40 +62,58 @@ const CLMSDownloadTasks = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nutsnames]);
 
+  const filterItemByDate = (item) => {
+    let FinalizationDate =
+      item?.FinalizationDateTime !== undefined
+        ? new Date(Date.parse(item?.FinalizationDateTime))
+        : ['In_progress', 'Queued'].includes(item.Status)
+        ? new Date(Date.parse('3999-12-31T23:59:59.999Z'))
+        : new Date(Date.parse('1970-01-01T00:00:00.000Z'));
+    let today = new Date();
+    let daysDiff = Math.floor(
+      (today.getTime() - (FinalizationDate.getTime() || 0)) /
+        (1000 * 3600 * 24),
+    );
+    return daysDiff - 10 < -1;
+  };
+
   const MapTasks = (mapProps) => {
     const { tasks, showDel, delTask } = mapProps;
-    return (
-      <Grid columns={2}>
-        {tasks?.length > 0 &&
-          tasks
-            .map((item) => {
-              if (!item.RegistrationDateTime) {
-                item.RegistrationDateTime = '1970-01-01T00:00:00.000Z';
-              }
-              return item;
-            })
-            .sort(dynamicSort('-RegistrationDateTime'))
-            .filter((item) => {
-              var FinalizationDate = new Date(
-                Date.parse(item?.FinalizationDateTime),
-              );
-              var today = new Date();
-              var daysDiff = Math.floor(
-                (today.getTime() - (FinalizationDate.getTime() || 0)) /
-                  (1000 * 3600 * 24),
-              );
-              return daysDiff - 10 < -1;
-            })
-            .map((item, key) => (
-              <Grid.Column key={key}>
-                <FileCard
-                  item={item}
-                  showDeleteTaskLoading={showDel}
-                  deleteTaskInProgress={delTask}
-                />
-              </Grid.Column>
-            ))}
+    // Sometimes we are receiving an empty object {}
+    // here instead of an array, weird...
+    const filtered_tasks = Array.isArray(tasks)
+      ? tasks
+          .map((item) => {
+            if (!item.RegistrationDateTime) {
+              item.RegistrationDateTime = '1970-01-01T00:00:00.000Z';
+            }
+            return item;
+          })
+          .sort(dynamicSort('-RegistrationDateTime'))
+          .filter((item) => {
+            return filterItemByDate(item);
+          })
+      : [];
+
+    return filtered_tasks.length > 0 ? (
+      <Grid doubling columns={2}>
+        {filtered_tasks.map((item, key) => (
+          <Grid.Column key={key}>
+            <FileCard
+              item={item}
+              showDeleteTaskLoading={showDel}
+              deleteTaskInProgress={delTask}
+            />
+          </Grid.Column>
+        ))}
       </Grid>
+    ) : (
+      <p>
+        <FormattedMessage
+          id="There are no tasks"
+          defaultMessage="There are no tasks"
+        />
+      </p>
     );
   };
 
@@ -151,120 +169,57 @@ const CLMSDownloadTasks = (props) => {
       setShowDeleteTaskLoading(false);
     }, 1000); // We need delete response to check if remove_task request is completed successfully
   };
+
   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>
-        )}
+
+        <MapTasks
+          tasks={queued}
+          showDel={showDeleteTaskLoading}
+          delTask={deleteTaskInProgress}
+        />
       </Grid.Column>
       <Grid.Column>
         <h2>
           <FormattedMessage id="In progress" defaultMessage="In progress" />
         </h2>
-        {taskInProgress?.length !== 0 ? (
-          <MapTasks
-            tasks={taskInProgress}
-            showDel={showDeleteTaskLoading}
-            delTask={deleteTaskInProgress}
-          />
-        ) : (
-          <p>
-            <FormattedMessage
-              id="There are no tasks in progress"
-              defaultMessage="There are no tasks in progress"
-            />
-          </p>
-        )}
+        <MapTasks
+          tasks={taskInProgress}
+          showDel={showDeleteTaskLoading}
+          delTask={deleteTaskInProgress}
+        />
       </Grid.Column>
       <Grid.Column>
         <h2>
           <FormattedMessage id="Completed" defaultMessage="Completed" />
         </h2>
-        {finishedOKTasks?.length !== 0 ? (
-          <MapTasks
-            tasks={finishedOKTasks}
-            showDel={showDeleteTaskLoading}
-            delTask={deleteTaskInProgress}
-          />
-        ) : (
-          <p>
-            <FormattedMessage
-              id="There are no completed tasks"
-              defaultMessage="There are no completed tasks"
-            />
-          </p>
-        )}
-      </Grid.Column>
-      <Grid.Column>
-        <h2>
-          <FormattedMessage
-            id="Finished with errors"
-            defaultMessage="Finished with errors"
-          />
-        </h2>
-        {finishedNOKTasks?.length !== 0 ? (
-          <MapTasks
-            tasks={finishedNOKTasks}
-            showDel={showDeleteTaskLoading}
-            delTask={deleteTaskInProgress}
-          />
-        ) : (
-          <p>
-            <FormattedMessage
-              id="There are no tasks finished with errors"
-              defaultMessage="There are no tasks finished with errors"
-            />
-          </p>
-        )}
+
+        <MapTasks
+          tasks={finishedOKTasks}
+          showDel={showDeleteTaskLoading}
+          delTask={deleteTaskInProgress}
+        />
       </Grid.Column>
       <Grid.Column>
         <h2>
           <FormattedMessage id="Rejected" defaultMessage="Rejected" />
         </h2>
-        {rejectedTasks?.length !== 0 ? (
-          <MapTasks
-            tasks={rejectedTasks}
-            showDel={showDeleteTaskLoading}
-            delTask={deleteTaskInProgress}
-          />
-        ) : (
-          <p>
-            <FormattedMessage
-              id="There are no rejected tasks"
-              defaultMessage="There are no rejected tasks"
-            />
-          </p>
-        )}
+
+        <MapTasks
+          tasks={rejectedTasks}
+          showDel={showDeleteTaskLoading}
+          delTask={deleteTaskInProgress}
+        />
       </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>
-        )}
+        <MapTasks tasks={cancelled} showDel={showDeleteTaskLoading} />
       </Grid.Column>
     </Grid>
   );