refactor: use graasp button, update dependencies

cypress/integration/item/share/tags.spec.js

@@ -12,6 +12,7 @@ import {
 import { ITEM_LOGIN_ITEMS, PUBLISHED_ITEM } from '../../../fixtures/items';
 import { DEFAULT_TAGS } from '../../../fixtures/itemTags';
 import { MEMBERS, SIGNED_OUT_MEMBER } from '../../../fixtures/members';
+import { EDIT_TAG_REQUEST_TIMEOUT } from '../../../support/constants';
 
 const openShareItemTab = (id) => {
   cy.get(`#${buildShareButtonId(id)}`).click();
@@ -48,7 +49,7 @@ describe('Customized Tags', () => {
       .type(NEW_CUSTOMIZED_TAG)
       .should('have.text', NEW_CUSTOMIZED_TAG);
     cy.get(`#${ITEM_TAGS_EDIT_SUBMIT_BUTTON_ID}`).click();
-    cy.wait('@editItem').then((data) => {
+    cy.wait('@editItem', { timeout: EDIT_TAG_REQUEST_TIMEOUT }).then((data) => {
       const {
         request: { url, body },
       } = data;

cypress/support/constants.js

@@ -11,6 +11,8 @@ export const ITEM_LOADING_PAUSE = 2000;
 export const WEBSOCKETS_DELAY_TIME = 1500;
 export const WAIT_FOR_ITEM_TABLE_ROW_TIME = 7000;
 
+export const EDIT_TAG_REQUEST_TIMEOUT = 10000;
+
 export const REDIRECTION_CONTENT = 'hello';
 export const REQUEST_FAILURE_TIME = 2500;
 

package.json

@@ -10,7 +10,7 @@
     "@graasp/ui": "github:graasp/graasp-ui.git",
     "@graasp/utils": "github:graasp/graasp-utils.git",
     "@material-ui/core": "4.12.3",
-    "@material-ui/icons": "5.0.0-beta.4",
+    "@material-ui/icons": "5.0.0-beta.5",
     "@material-ui/lab": "4.0.0-alpha.60",
     "@uppy/core": "2.1.6",
     "@uppy/dashboard": "2.1.4",
@@ -47,7 +47,7 @@
     "validator": "13.7.0"
   },
   "scripts": {
-    "pre-commit": "pretty-quick --staged && yarn lint",
+    "pre-commit": "yarn prettier:check && yarn lint",
     "hooks:uninstall": "husky uninstall",
     "hooks:install": "husky install",
     "start": "env-cmd -f ./.env.local react-scripts start",
@@ -84,6 +84,9 @@
     ]
   },
   "devDependencies": {
+    "@babel/eslint-parser": "7.17.0",
+    "@babel/eslint-plugin": "7.16.5",
+    "@babel/preset-react": "7.16.7",
     "@commitlint/cli": "16.2.3",
     "@commitlint/config-conventional": "16.2.1",
     "@cypress/code-coverage": "3.9.12",
@@ -92,11 +95,10 @@
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
-    "babel-eslint": "10.1.0",
     "concurrently": "7.0.0",
     "cypress": "9.5.2",
     "cypress-file-upload": "5.0.2",
-    "cypress-localstorage-commands": "1.6.1",
+    "cypress-localstorage-commands": "1.7.0",
     "env-cmd": "10.1.0",
     "eslint": "^7.31.0",
     "eslint-config-airbnb": "18.2.1",
@@ -110,7 +112,6 @@
     "npm-run-all": "4.1.5",
     "nyc": "15.1.0",
     "prettier": "2.6.1",
-    "pretty-quick": "3.1.3",
     "standard-version": "9.3.2",
     "typescript": "4.5.4",
     "wait-on": "6.0.1"

src/components/common/CropModal.js

@@ -5,11 +5,11 @@ import 'react-image-crop/dist/ReactCrop.css';
 import { withTranslation } from 'react-i18next';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import { Button } from '@graasp/ui';
 import { THUMBNAIL_ASPECT } from '../../config/constants';
 import { getCroppedImg } from '../../utils/image';
 import { CROP_MODAL_CONFIRM_BUTTON_CLASSNAME } from '../../config/selectors';
@@ -110,10 +110,11 @@ class CropModal extends Component {
           />
         </DialogContent>
         <DialogActions>
-          <Button onClick={onClose}>{t('Cancel')}</Button>
+          <Button onClick={onClose} variant="text">
+            {t('Cancel')}
+          </Button>
           <Button
             onClick={this.handleOnConfirm}
-            color="primary"
             className={CROP_MODAL_CONFIRM_BUTTON_CLASSNAME}
           >
             {t('Confirm')}

src/components/context/EditItemModalContext.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import Button from '@material-ui/core/Button';
+import { Button } from '@graasp/ui';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -94,14 +94,10 @@ const EditItemModalProvider = ({ children }) => {
         {renderForm()}
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} color="primary">
+        <Button onClick={onClose} variant="text">
           {t('Cancel')}
         </Button>
-        <Button
-          onClick={submit}
-          color="primary"
-          id={ITEM_FORM_CONFIRM_BUTTON_ID}
-        >
+        <Button onClick={submit} id={ITEM_FORM_CONFIRM_BUTTON_ID}>
           {t('Save')}
         </Button>
       </DialogActions>

src/components/context/FlagItemModalContext.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
+import { Button } from '@graasp/ui';
 import Dialog from '@material-ui/core/Dialog';
 import List from '@material-ui/core/List';
 import { ListItem, ListItemText, makeStyles } from '@material-ui/core';
@@ -90,7 +90,7 @@ const FlagItemModalProvider = ({ children }) => {
           </List>
         </DialogContent>
         <DialogActions>
-          <Button onClick={onClose} color="primary">
+          <Button onClick={onClose} variant="text">
             {t('Cancel')}
           </Button>
           <Button

src/components/item/FolderDescription.js

@@ -18,6 +18,10 @@ const FolderDescription = ({ itemId, isEditing }) => {
     setEditingItemId(null);
   };
 
+  const onCancel = () => {
+    setEditingItemId(null);
+  };
+
   if (!itemId) {
     return null;
   }
@@ -30,6 +34,7 @@ const FolderDescription = ({ itemId, isEditing }) => {
       showSaveButton
       onSave={onDescriptionSave}
       saveButtonId={buildSaveButtonId(itemId)}
+      onCancel={onCancel}
     />
   );
 };

src/components/item/ItemContent.js

@@ -90,6 +90,10 @@ const ItemContent = ({ item, enableEditing, permission }) => {
     setEditingItemId(null);
   };
 
+  const onCancel = () => {
+    setEditingItemId(null);
+  };
+
   const saveButtonId = buildSaveButtonId(itemId);
 
   switch (itemType) {
@@ -127,6 +131,7 @@ const ItemContent = ({ item, enableEditing, permission }) => {
             item={item}
             edit={isEditing}
             onSave={onSaveDocument}
+            onCancel={onCancel}
             saveButtonId={saveButtonId}
             maxHeight="70vh"
           />

src/components/item/form/DocumentForm.js

@@ -44,7 +44,7 @@ const DocumentForm = ({ onChange, item, updatedProperties }) => {
           onChange={handleOnChange}
           edit
           placeholderText={t('Write something...')}
-          showSaveButton={false}
+          showActions={false}
         />
       </div>
     </>

src/components/item/form/FolderForm.js

@@ -25,7 +25,7 @@ const FolderForm = ({ onChange, item, updatedProperties }) => {
         value={updatedProperties?.description || item?.description}
         edit
         onChange={onCaptionChange}
-        showSaveButton={false}
+        showActions={false}
       />
     </>
   );

src/components/item/sharing/CCLicenseDialog.js

@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import {
-  Button,
   Dialog,
   DialogTitle,
   DialogContent,
   DialogContentText,
   DialogActions,
 } from '@material-ui/core';
+import { Button } from '@graasp/ui';
 
 const CCLicenseDialog = ({
   open,
@@ -31,7 +31,6 @@ const CCLicenseDialog = ({
     <>
       <Button
         variant="outlined"
-        color="primary"
         className={className}
         onClick={handleClickOpen}
         disabled={disabled} // disable the button if no option is selected
@@ -50,12 +49,10 @@ const CCLicenseDialog = ({
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose} color="primary" autoFocus>
+          <Button onClick={handleClose} autoFocus variant="text">
             {t('Cancel')}
           </Button>
-          <Button onClick={handleSubmit} color="primary">
-            {t('Confirm')}
-          </Button>
+          <Button onClick={handleSubmit}>{t('Confirm')}</Button>
         </DialogActions>
       </Dialog>
     </>

src/components/item/sharing/CreateItemMembershipForm.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Grid, makeStyles, TextField } from '@material-ui/core';
+import { Button } from '@graasp/ui';
+import { Grid, makeStyles, TextField } from '@material-ui/core';
 import { MUTATION_KEYS } from '@graasp/query-client';
 import { useTranslation } from 'react-i18next';
 import validator from 'validator';
@@ -89,12 +90,7 @@ const CreateItemMembershipForm = ({ id }) => {
         />
       </Grid>
       <Grid item xs={1}>
-        <Button
-          onClick={submit}
-          variant="contained"
-          color="primary"
-          id={SHARE_ITEM_SHARE_BUTTON_ID}
-        >
+        <Button onClick={submit} id={SHARE_ITEM_SHARE_BUTTON_ID}>
           {t('Share')}
         </Button>
       </Grid>

src/components/item/sharing/CustomizedTagsEdit.js

@@ -1,14 +1,8 @@
 import React, { useContext, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loader } from '@graasp/ui';
+import { Loader, Button } from '@graasp/ui';
 import { useTranslation } from 'react-i18next';
-import {
-  Typography,
-  TextField,
-  Button,
-  Chip,
-  makeStyles,
-} from '@material-ui/core';
+import { Typography, TextField, Chip, makeStyles } from '@material-ui/core';
 import SaveIcon from '@material-ui/icons/Save';
 import { useParams } from 'react-router';
 import { MUTATION_KEYS } from '@graasp/query-client';
@@ -19,7 +13,6 @@ import {
   ITEM_TAGS_EDIT_INPUT_ID,
   ITEM_TAGS_EDIT_SUBMIT_BUTTON_ID,
 } from '../../../config/selectors';
-import { SUBMIT_BUTTON_WIDTH } from '../../../config/constants';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -28,7 +21,6 @@ const useStyles = makeStyles((theme) => ({
   button: {
     marginTop: theme.spacing(1),
     marginLeft: theme.spacing(2),
-    maxWidth: SUBMIT_BUTTON_WIDTH,
   },
 }));
 
@@ -85,29 +77,25 @@ const CustomizedTagsEdit = ({ item, edit }) => {
         {t('Please seperate tags by comma. ')}
         {t('Eg. English, Biology, Lab, Plants, ..., Demo')}
       </Typography>
-      <form className={classes.container} onSubmit={handleSubmit}>
-        <TextField
-          disabled={!edit}
-          variant="outlined"
-          label={t('Tags')}
-          multiline
-          maxRows={5}
-          defaultValue={displayValues}
-          onChange={handleChange}
-          id={ITEM_TAGS_EDIT_INPUT_ID}
-        />
-        <Button
-          type="submit"
-          variant="outlined"
-          color="primary"
-          className={classes.button}
-          endIcon={<SaveIcon />}
-          disabled={!edit}
-          id={ITEM_TAGS_EDIT_SUBMIT_BUTTON_ID}
-        >
-          {t('Save')}
-        </Button>
-      </form>
+      <TextField
+        disabled={!edit}
+        variant="outlined"
+        label={t('Tags')}
+        multiline
+        maxRows={5}
+        defaultValue={displayValues}
+        onChange={handleChange}
+        id={ITEM_TAGS_EDIT_INPUT_ID}
+      />
+      <Button
+        onClick={handleSubmit}
+        className={classes.button}
+        startIcon={<SaveIcon />}
+        disabled={!edit}
+        id={ITEM_TAGS_EDIT_SUBMIT_BUTTON_ID}
+      >
+        {t('Save')}
+      </Button>
       <Typography variant="subtitle1">{t('Tags Preview')}</Typography>
       {settings?.tags?.map((tag, index) => (
         <Chip label={tag} id={buildCustomizedTagsSelector(index)} />

src/components/main/DeleteItemDialog.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '@material-ui/core/Button';
+import { Button } from '@graasp/ui';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -53,7 +53,7 @@ const DeleteItemDialog = ({ itemIds, open, handleClose }) => {
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleClose} color="primary">
+        <Button onClick={handleClose} color="primary" variant="text">
           {t('Cancel')}
         </Button>
         <Button
@@ -62,6 +62,7 @@ const DeleteItemDialog = ({ itemIds, open, handleClose }) => {
           onClick={onDelete}
           color="secondary"
           autoFocus
+          variant="text"
         >
           {t('Delete Permanently')}
         </Button>

src/components/main/NewItemButton.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
-import Button from '@material-ui/core/Button';
+import { Button } from '@graasp/ui';
 import AddIcon from '@material-ui/icons/Add';
 import NewItemModal from './NewItemModal';
 import { CREATE_ITEM_BUTTON_ID } from '../../config/selectors';
@@ -34,8 +34,6 @@ const NewItemButton = ({ fontSize }) => {
       <Tooltip placement="left" title={t('Create new item')} arrow>
         <Button
           id={CREATE_ITEM_BUTTON_ID}
-          color="primary"
-          variant="contained"
           fontSize={fontSize}
           className={classes.createNewButton}
           onClick={handleClickOpen}