From 9ce4bcbec89660f9c28742e40f4a3718689a9fe6 Mon Sep 17 00:00:00 2001
From: pyphilia <pyphilia@gmail.com>
Date: Tue, 19 Oct 2021 15:34:20 +0200
Subject: [PATCH] feat: add field to edit folder's description

---
 cypress/integration/item/create/utils.js      |  2 +-
 .../integration/item/edit/editFolder.spec.js  |  6 +++--
 cypress/integration/item/edit/utils.js        |  2 +-
 cypress/support/commands/item.js              |  7 ++++--
 src/components/item/form/FolderForm.js        | 23 ++++++++++++++++---
 src/components/main/ItemsTable.js             | 22 ++++++------------
 src/components/main/NewItemModal.js           | 14 +++++++----
 src/config/selectors.js                       |  1 +
 8 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/cypress/integration/item/create/utils.js b/cypress/integration/item/create/utils.js
index 6e7eb7ee6..3bdee9a94 100644
--- a/cypress/integration/item/create/utils.js
+++ b/cypress/integration/item/create/utils.js
@@ -47,7 +47,7 @@ export const createItem = (payload, options) => {
       break;
     case ITEM_TYPES.FOLDER:
     default:
-      cy.fillSpaceModal(payload, options);
+      cy.fillFolderModal(payload, options);
       break;
   }
 };
diff --git a/cypress/integration/item/edit/editFolder.spec.js b/cypress/integration/item/edit/editFolder.spec.js
index 3b6c2b3c9..7293e8452 100644
--- a/cypress/integration/item/edit/editFolder.spec.js
+++ b/cypress/integration/item/edit/editFolder.spec.js
@@ -16,12 +16,13 @@ describe('Edit Folder', () => {
       }
 
       const itemToEdit = SAMPLE_ITEMS.items[0];
-
+      const newDescription = 'new description';
       // edit
       editItem(
         {
           ...itemToEdit,
           ...EDITED_FIELDS,
+          description: newDescription,
         },
         ITEM_LAYOUT_MODES.LIST,
       );
@@ -29,12 +30,13 @@ describe('Edit Folder', () => {
       cy.wait('@editItem').then(
         ({
           response: {
-            body: { id, name },
+            body: { id, name, description },
           },
         }) => {
           // check item is edited and updated
           expect(id).to.equal(itemToEdit.id);
           expect(name).to.equal(EDITED_FIELDS.name);
+          expect(description).to.contain(newDescription);
           cy.wait(EDIT_ITEM_PAUSE);
           cy.wait('@getOwnItems');
         },
diff --git a/cypress/integration/item/edit/utils.js b/cypress/integration/item/edit/utils.js
index 4944c0482..5429ef729 100644
--- a/cypress/integration/item/edit/utils.js
+++ b/cypress/integration/item/edit/utils.js
@@ -35,7 +35,7 @@ export const editItem = (payload, mode = DEFAULT_ITEM_LAYOUT_MODE) => {
       break;
     case ITEM_TYPES.FOLDER:
     default:
-      cy.fillSpaceModal(payload);
+      cy.fillFolderModal(payload);
   }
 };
 
diff --git a/cypress/support/commands/item.js b/cypress/support/commands/item.js
index 348f98cae..aa4cee6a3 100644
--- a/cypress/support/commands/item.js
+++ b/cypress/support/commands/item.js
@@ -13,6 +13,7 @@ import {
   ITEM_FORM_LINK_INPUT_ID,
   ITEM_FORM_DOCUMENT_TEXT_SELECTOR,
   ITEM_FORM_APP_URL_ID,
+  FOLDER_FORM_DESCRIPTION_ID,
 } from '../../../src/config/selectors';
 
 import {
@@ -77,12 +78,14 @@ Cypress.Commands.add(
 );
 
 Cypress.Commands.add(
-  'fillSpaceModal',
-  ({ name = '', extra = {} }, { confirm = true } = {}) => {
+  'fillFolderModal',
+  ({ name = '', extra = {}, description = '' }, { confirm = true } = {}) => {
     cy.fillBaseItemModal({ name }, { confirm: false });
 
     cy.get(`#${ITEM_FORM_IMAGE_INPUT_ID}`).type(`{selectall}${extra.image}`);
 
+    cy.get(`#${FOLDER_FORM_DESCRIPTION_ID}`).type(`{selectall}${description}`);
+
     if (confirm) {
       cy.get(`#${ITEM_FORM_CONFIRM_BUTTON_ID}`).click();
     }
diff --git a/src/components/item/form/FolderForm.js b/src/components/item/form/FolderForm.js
index 23cae6b6d..eab8ccada 100644
--- a/src/components/item/form/FolderForm.js
+++ b/src/components/item/form/FolderForm.js
@@ -1,9 +1,12 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
+import { TextEditor } from '@graasp/ui';
 import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
-import { ITEM_FORM_IMAGE_INPUT_ID } from '../../../config/selectors';
+import {
+  FOLDER_FORM_DESCRIPTION_ID,
+  ITEM_FORM_IMAGE_INPUT_ID,
+} from '../../../config/selectors';
 import BaseItemForm from './BaseItemForm';
 
 const FolderForm = ({ onChange, item, updatedProperties }) => {
@@ -12,16 +15,29 @@ const FolderForm = ({ onChange, item, updatedProperties }) => {
   const handleImageUrlInput = (event) => {
     onChange({ ...updatedProperties, extra: { image: event.target.value } });
   };
+  const onCaptionChange = (content) => {
+    onChange({
+      ...updatedProperties,
+      description: content,
+    });
+  };
 
   return (
     <>
-      <Typography variant="h6">{t('Create a Folder')}</Typography>
       <BaseItemForm
         onChange={onChange}
         item={item}
         updatedProperties={updatedProperties}
       />
 
+      <TextEditor
+        id={FOLDER_FORM_DESCRIPTION_ID}
+        value={updatedProperties?.description || item?.description}
+        edit
+        onChange={onCaptionChange}
+        showSaveButton={false}
+      />
+
       <TextField
         id={ITEM_FORM_IMAGE_INPUT_ID}
         margin="dense"
@@ -39,6 +55,7 @@ FolderForm.propTypes = {
     extra: PropTypes.shape({
       image: PropTypes.string,
     }),
+    description: PropTypes.string,
   }),
   onChange: PropTypes.func.isRequired,
   item: PropTypes.shape({
diff --git a/src/components/main/ItemsTable.js b/src/components/main/ItemsTable.js
index 99b21fec5..2f74850a9 100644
--- a/src/components/main/ItemsTable.js
+++ b/src/components/main/ItemsTable.js
@@ -6,6 +6,7 @@ import 'ag-grid-community/dist/styles/ag-grid.css';
 import 'ag-grid-community/dist/styles/ag-theme-material.css';
 import { useTranslation } from 'react-i18next';
 import { MUTATION_KEYS } from '@graasp/query-client';
+import { TextEditor } from '@graasp/ui';
 import { useHistory, useParams } from 'react-router';
 import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
@@ -73,19 +74,6 @@ const ItemsTable = ({
 
   const mutation = useMutation(MUTATION_KEYS.EDIT_ITEM);
 
-  const mappedRows = rows.map((item) => {
-    const { id, updatedAt, name, createdAt, type, extra, settings } = item;
-    return {
-      id,
-      name,
-      type,
-      updatedAt,
-      createdAt,
-      extra,
-      settings
-    };
-  });
-
   const isFolder = () => Boolean(itemId);
   const canDrag = () => isFolder() && !isSearching;
 
@@ -151,7 +139,7 @@ const ItemsTable = ({
   const itemRowDragText = (params) => params.rowNode.data.name;
 
   const NoRowsComponent = () => <Typography>{t('No items')}</Typography>;
-
+  const parentDescription = parentItem?.get('description');
   return (
     <div className={classes.root}>
       <TableToolbar
@@ -161,13 +149,17 @@ const ItemsTable = ({
         headerElements={headerElements}
         actions={toolbarActions}
       />
+
+      {/* description */}
+      {parentDescription && <TextEditor value={parentDescription} />}
+
       <div
         className="ag-theme-material"
         style={{ height: ITEMS_TABLE_CONTAINER_HEIGHT, width: '100%' }}
         id={tableId}
       >
         <AgGridReact
-          rowData={mappedRows}
+          rowData={rows}
           rowSelection="multiple"
           suppressRowClickSelection
           suppressCellSelection
diff --git a/src/components/main/NewItemModal.js b/src/components/main/NewItemModal.js
index 4ca15f287..68bde5663 100644
--- a/src/components/main/NewItemModal.js
+++ b/src/components/main/NewItemModal.js
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import { Box, makeStyles } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -91,11 +92,14 @@ const NewItemModal = ({ open, handleClose }) => {
     switch (selectedItemType) {
       case ITEM_TYPES.FOLDER:
         return (
-          <FolderForm
-            onChange={updateItem}
-            item={initialItem}
-            updatedProperties={updatedPropertiesPerType[ITEM_TYPES.FOLDER]}
-          />
+          <>
+            <Typography variant="h6">{t('Create a Folder')}</Typography>
+            <FolderForm
+              onChange={updateItem}
+              item={initialItem}
+              updatedProperties={updatedPropertiesPerType[ITEM_TYPES.FOLDER]}
+            />
+          </>
         );
       case ITEM_TYPES.FILE:
         return <FileDashboardUploader />;
diff --git a/src/config/selectors.js b/src/config/selectors.js
index 3979df4fc..09b8713a1 100644
--- a/src/config/selectors.js
+++ b/src/config/selectors.js
@@ -148,3 +148,4 @@ export const SETTINGS_CHATBOX_TOGGLE_ID = 'settingsChatboxToggle';
 
 export const ITEMS_TABLE_RESTORE_SELECTED_ITEMS_ID =
   'itemsTableRestoreSelectedItems';
+export const FOLDER_FORM_DESCRIPTION_ID = 'folderFormDescription';